コミット: 51 - takoyaki_umaaaaHideout (svn)

JavaScriptを色々あれこれしようとするがひたすら失敗を繰り返している

コミットメタ情報

• リビジョン: 51 (tree)
• 日時: 2016-12-14 23:35:50
• 作者: takoyaki_umaaaa

ログメッセージ

(メッセージはありません)

変更サマリ

• modified: HtmlDrawApp/.vs/HTMLDrawApp/v14/.suo
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/vs.appxrecipe
• modified: HtmlDrawApp/HTMLDrawApp/css/default.css
• modified: HtmlDrawApp/HTMLDrawApp/index.html
• modified: HtmlDrawApp/HTMLDrawApp/js/apparea.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palette.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palgroup.js
• added: HtmlDrawApp/doc/Palette定義FileFormat.txt
• modified: HtmlDrawApp/doc/構成.txt

差分

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 50)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 51)
@@ -188,16 +188,28 @@
 		border: 1px solid rgba(0,0,0,0.2);
 		background-color: rgba(27, 158, 131, 0.6);
 		box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
+		/* ********************** */
+		position: relative;
+		width: 60px;	height: 60px;
+		margin: 7px 7px;		padding: 0;
 	}
 	.paltxtcol {
 		border: 1px solid rgba(0,0,0,0.2);
 		background-color: rgba(154,145,140,0.6);
 		box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
+		/* ********************** */
+		position: relative;
+		width: 60px;	height: 60px;
+		margin: 7px 7px;		padding: 0;
 	}
 	.palact {
 		border: 1px solid rgba(0,0,0,0.2);
 		background-color: rgba(156, 165, 55, 0.6);
 		box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
+		/* ********************** */
+		position: relative;
+		width: 60px;	height: 60px;
+		margin: 7px 7px;		padding: 0;
 	}
 	.palset {
 		border: 1px solid rgba(0,0,0,0.2);

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html	(revision 50)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html	(revision 51)
@@ -155,43 +155,52 @@
 			}
 		</style>
 
-		<fieldset class="palgroup palgroup0" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
+		<fieldset class="palgroup palgroup0" data-objid="palgroup0" style="width:400px; height:130px;" title="背景の色や画像を設定するパレットです">
 			<legend class="pallegend"> Background Palette </legend>
 			<div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
 				<span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
 			</div>
-			<div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
-			<div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
-			<div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
-			<div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
-			<div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
+			<ul class="palflex">
+				<li class="palbg palbg0" data-objid="palbg0" data-palid="0"></li>
+				<li class="palbg palbg1" data-objid="palbg1" data-palid="1"></li>
+				<li class="palbg palbg2" data-objid="palbg2" data-palid="2"></li>
+				<li class="palbg palbg3" data-objid="palbg3" data-palid="3"></li>
+				<li class="palbg palbg4" data-objid="palbg4" data-palid="4"></li>
+			</ul>
+			<div class="palsize"></div>
 		</fieldset>
 		<br />
 
-		<fieldset class="palgroup palgroup1" data-objid="palgroup1" title="テキストの色を設定するパレットです">
+		<fieldset class="palgroup palgroup1" data-objid="palgroup1" style="width:400px; height:130px;" title="テキストの色を設定するパレットです">
 			<legend class="pallegend"> Style Palette </legend>
 			<div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
 				<span class="paldesc1">外観</span><span class="paldesc2">見た</span>
 			</div>
-			<div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0"></div>
-			<div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1"></div>
-			<div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2"></div>
-			<div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3"></div>
-			<div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4"></div>
+			<ul class="palflex">
+				<li class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0"></li>
+				<li class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1"></li>
+				<li class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2"></li>
+				<li class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3"></li>
+				<li class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4"></li>
+			</ul>
+			<div class="palsize"></div>
 		</fieldset>
 
 		<br />
 
-		<fieldset class="palgroup palgroup2" data-objid="palgroup2" title="動きを設定するパレットです">
+		<fieldset class="palgroup palgroup2" data-objid="palgroup2" style="width:400px; height:130px;" title="動きを設定するパレットです">
 			<legend class="pallegend"> Action Palette </legend>
 			<div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
 				<span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
 			</div>
-			<div class="palact palact0" data-objid="palact0" data-palid="0"></div>
-			<div class="palact palact1" data-objid="palact1" data-palid="1"></div>
-			<div class="palact palact2" data-objid="palact2" data-palid="2"></div>
-			<div class="palact palact3" data-objid="palact3" data-palid="3"></div>
-			<div class="palact palact4" data-objid="palact4" data-palid="4"></div>
+			<ul class="palflex">
+				<li class="palact palact0" data-objid="palact0" data-palid="0"></li>
+				<li class="palact palact1" data-objid="palact1" data-palid="1"></li>
+				<li class="palact palact2" data-objid="palact2" data-palid="2"></li>
+				<li class="palact palact3" data-objid="palact3" data-palid="3"></li>
+				<li class="palact palact4" data-objid="palact4" data-palid="4"></li>
+			</ul>
+			<div class="palsize"></div>
 		</fieldset>
 
 		<fieldset class="palgroup palgroup3" data-objid="palgroup3" style="width:400px; height:130px;" title="設定を変更するパレットです">

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js	(revision 50)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js	(revision 51)
@@ -4,10 +4,8 @@
 class appArea {
 	constructor(dom) {
 		this.DOMobject = dom;
-		this.mouseMoveFunc = null;
-		this.mouseUpFunc = null;
-		this.touchMoveFunc = null;
-		this.touchEndFunc = null;
+
+		this.clearCallEventObj();
 	}
 	// 保存ファイルから編集エリア内容 (DispFieldの divとそこに連なるelement) を
 	// 取得するための正規表現object取得
@@ -112,6 +110,26 @@
 		this.mouseMoveFunc = mouseMove;
 		this.mouseUpFunc = mouseUp;
 	}
+	setInputEventObj(
+				strclass,	// End event callback 第2引数 targetとして返してほしいelementが持つ css class名
+				funcMove,	// Move eventで呼んでほしい関数 or null
+				funcEnd		// End eventで呼んでほしい関数 or null
+	) {
+		this.debuglog('setInputEventObj strclass=' + strclass + ', callbackMove=' + ((null != funcMove) ? funcMove.name : 'null') + ',  callbackUp=' + ((null != funcEnd) ? funcEnd.name : 'null'));
+
+		// Callbackを上書きしてしまう場合はエラー出力し、ひとまず処理を継続
+		if (null != funcMove || null != funcEnd) {
+			if (null != this.mouseMoveFunc || null != this.mouseUpFunc) {
+				console.error('入力イベント callback設定上書き   \n\
+Before  strclass=' + this.strclass + 'callbackMove=' + (this.inputMoveFunc ? this.inputMoveFunc.name : 'null') + ',  callbackUp=' + (this.inputEndFunc ? this.inputEndFunc.name : 'null') + '\n\
+After   strclass=' + strclass + 'callbackMove=' + ((null != funcMove) ? funcMove.name : 'null') + ',  callbackUp=' + ((null != funcEnd) ? funcEnd.name : 'null'));
+			}
+		}
+
+		this.strclass = strclass;
+		this.inputMoveFunc = funcMove;
+		this.inputEndFunc = funcEnd;
+	}
 	// Touch I/F 用
 	// 最初のtouch objectのみを返す (そのため mouse I/Fと同じように扱える)
 	setSingleTouchEventObj(
@@ -143,6 +161,8 @@
 		this.mouseUpFunc = null;
 		this.touchMoveFunc = null;
 		this.touchEndFunc = null;
+		this.inputMoveFunc = null;
+		this.inputEndFunc = null;
 	}
 	// Event handler -------------------
 
@@ -159,11 +179,17 @@
 		if (null != this.mouseMoveFunc) {
 			this.mouseMoveFunc(evt);
 		}
+		if (null != this.inputMoveFunc) {
+			this.inputMoveFunc(evt);
+		}
 	}
 	onTouchMove(evt){
 		if (null != this.touchMoveFunc) {
 			this.touchMoveFunc(evt.targetTouches[0], evt);
 		}
+		if (null != this.inputMoveFunc) {
+			this.inputMoveFunc(evt);
+		}
 	}
 
 	//  ドロップ処理
@@ -178,6 +204,9 @@
 		if (null != this.mouseUpFunc) {
 			this.mouseUpFunc(evt, e);
 		}
+		if (null != this.inputEndFunc) {
+			this.inputEndFunc(evt, e);
+		}
 	}
 	onTouchEnd(evt){
 		this.debuglog('タッチエンド onTouchEnd()  findClass=' + this.strclass + ',  callback  move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ',  End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
@@ -190,6 +219,9 @@
 		if (null != this.touchEndFunc) {
 			this.touchEndFunc(evt.changedTouches[0], e, evt);
 		}
+		if (null != this.inputEndFunc) {
+			this.inputEndFunc(evt, e);
+		}
 	}
 
 

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 50)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 51)
@@ -9,7 +9,7 @@
 // パレットのCSS機能ボタンを押したときに実行する機能を提供する
 // (保持中CSS class nameを対象Elementに付加, 削除)
 // (Button instanceが自分の機能を意識しないようにするためのclass)
-class PaletteCSS {
+class PaletteApplyCSS {
 	constructor() {
 		this.paletteRule = null;
 		this.dataScheme = null;
@@ -91,12 +91,12 @@
 	getDescription() {
 		return this.description;
 	}
-} PaletteCSS
+}
 
 // パレットのFunctionボタンを押したときに実行する機能を提供する
 class PaletteFunction {
 	constructor() {
-		this.paletteFunction = null;
+		this.palettePressFunction = null;
 		this.dataScheme = null;
 		this.description = null;
 		this.replaceObject = null;
@@ -117,25 +117,25 @@
 	// 登録するとき、必要に応じてthisやargをbindすること
 
 	registerFunction(func) {
-		if (null != this.paletteFunction) {
-			console.error('パレット機能 上書き登録\n以前の機能 = ' + this.paletteFunction.name + ',  今回の機能 = ' + func.name);
+		if (null != this.palettePressFunction) {
+			console.error('パレット機能 上書き登録\n以前の機能 = ' + this.palettePressFunction.name + ',  今回の機能 = ' + func.name);
 			// ひとまず処理継続
 		}
-		this.paletteFunction = func;
+		this.palettePressFunction = func;
 		return true;
 	}
 	removeFunction() {
-		this.paletteFunction = null;
+		this.palettePressFunction = null;
 	}
 	getFunction() {
-		return this.paletteFunction;
+		return this.palettePressFunction;
 	}
 	executeFunction() {
-		if (null == this.paletteFunction) {
+		if (null == this.palettePressFunction) {
 			console.error('パレット機能登録前に呼び出そうとした');
 			return false;
 		}
-		return this.paletteFunction();
+		return this.palettePressFunction();
 	}
 
 	// executeFunction実行後に PaletteFunction の Instance を入れ替える設定
@@ -181,86 +181,86 @@
 // パレット機能定義 Class と 表示定義 Class を繋ぐ Class。即時実行。
 // 表示定義 Class 寄りの存在 (画面仕様に影響される処理内容なので)
 var paletteFunctionObjects = (function () {
-	let paletteFunction = [];
+	let palettePressFunction =[];
 
 	var defineFunctions = function () {
 		let cnt = 0;
 		// 設定パレット非表示設定
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
-		paletteFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
+		palettePressFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
 		// 選択要素削除
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
-		paletteFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
+		palettePressFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
 		// 枠の表示/非表示
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
-		paletteFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
+		palettePressFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
-		paletteFunction[cnt].registerDescription("識別用の枠を消します。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
-		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
-		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
+		palettePressFunction[cnt].registerDescription("識別用の枠を消します。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
+		palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
 		cnt++;
 		// アニメーションする/しない設定
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
-		paletteFunction[cnt].registerDescription("アニメーションを停止します。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
+		palettePressFunction[cnt].registerDescription("アニメーションを停止します。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
-		paletteFunction[cnt].registerDescription("アニメーションを再開します。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
-		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
-		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
+		palettePressFunction[cnt].registerDescription("アニメーションを再開します。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
+		palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
 		cnt++;
 		// パレット上の要素は常にアニメーションをしない/する設定
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
-		paletteFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
+		palettePressFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
-		paletteFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
-		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
-		paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
+		palettePressFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
+		palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
 		cnt++;
 		// image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
-		paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
+		palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
-		paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
-		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
-		paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		palettePressFunction[cnt]= new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
+		palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
+		palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
 		cnt++;
 		// div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
-		paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
+		palettePressFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
-		paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
-		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
-		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
+		palettePressFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
+		palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
 		cnt++;
 	};
 	defineFunctions();
@@ -267,11 +267,11 @@
 
 	return {
 		getItem: function (num) {
-			if (paletteFunction.length <= num) {
-				console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ',  len = ' + paletteFunction.length);
+			if (palettePressFunction.length <= num) {
+				console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ',  len = ' + palettePressFunction.length);
 				return null;
 			}
-			return paletteFunction[num];
+			return palettePressFunction[num];
 		}
 	};
 })();
@@ -281,7 +281,7 @@
 class PaletteShapeFunctionButton {
 	constructor() {
 		this.DOMobject = null;
-		this.paletteFunction = null;
+		this.palettePressFunction = null;
 	}
 
 	// 表示に使用するDOM要素を作成
@@ -288,7 +288,8 @@
 	// DOM 要素を作成してこの Instance の表示要素として登録
 	createButtonElement(parent) {
 		if (null != this.DOMobject) {
-			console.error('パレットボタン  ボタン要素作成エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = 新規');
+			console.error('パレットボタン(PaletteShapeFunctionButton)  ボタン要素作成エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = 新規');
+			// そのまま実行
 		}
 
 		this.DOMobject = document.createElement('div');
@@ -304,11 +305,11 @@
 	// 既に存在する Element をこの Instance の表示要素として登録する
 	setButtonElement(ele) {
 		if (null == ele) {
-			console.error('パレットボタン  ボタン要素設定エラー  引数の要素が未設定');
+			console.error('パレットボタン(PaletteShapeFunctionButton)  ボタン要素設定エラー  引数の要素が未設定');
 			return false;
 		}
 		if (null != this.DOMobject) {
-			console.error('パレットボタン  ボタン要素設定エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = ' + ele);
+			console.error('パレットボタン(PaletteShapeFunctionButton)  ボタン要素設定エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = ' + ele);
 		}
 		this.DOMobject = ele;
 		this.setDomHandler();
@@ -324,15 +325,15 @@
 	// Palent の left, top, width, height に合わせたサイズで表示する
 	setPalentElement(ele) {
 		if (null == ele) {
-			console.error('パレットボタン  親要素設定エラー  引数の親要素が未設定');
+			console.error('パレットボタン(PaletteShapeFunctionButton)  親要素設定エラー  引数の親要素が未設定');
 			return false;
 		}
 		if (null == this.DOMobject) {
-			console.error('パレットボタン  親要素設定エラー  ボタン要素が登録されていません parent = ' + ele);
+			console.error('パレットボタン(PaletteShapeFunctionButton)  親要素設定エラー  ボタン要素が登録されていません parent = ' + ele);
 			return false;
 		}
 
-		if (null == this.DOMobject.parentNode)	console.log('パレットボタン  親要素設定未設定状態');
+		if (null == this.DOMobject.parentNode) console.log('パレットボタン(PaletteShapeFunctionButton)  親要素設定未設定状態');
 		else									this.DOMobject.parentNode.removeChild(this.DOMobject);
 
 		// 最も手前に追加
@@ -343,20 +344,20 @@
 	}
 
 	// ボタン Click で実行する機能を登録
-	setPaletteFunction(palfunc) {
-		if (null != this.paletteFunction) {
-			console.error('パレットボタンへの機能設定エラー  上書き登録\n以前の機能 = ' + this.paletteFunction.getFunction.name + ',  今回の機能 = ' + palfunc.getFunction.name);
+	setPalettePressFunction(palfunc) {
+		if (null != this.palettePressFunction) {
+			console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー  上書き登録\n以前の機能 = ' + this.palettePressFunction.getFunction.name + ',  今回の機能 = ' + palfunc.getFunction.name);
 			// ひとまず処理継続
 		}
-		this.paletteFunction = palfunc;
+		this.palettePressFunction = palfunc;
 
 		// 表示要素の更新
-		this.DOMobject.title = this.paletteFunction.getDescription();
-		this.DOMobject.style.backgroundImage = 'url(' + this.paletteFunction.getImage() + ')';
+		this.DOMobject.title = this.palettePressFunction.getDescription();
+		this.DOMobject.style.backgroundImage = 'url(' + this.palettePressFunction.getImage() + ')';
 		this.DOMobject.style.backgroundSize = 'cover';
 	}
-	clearPaletteFunction() {
-		this.paletteFunction = null;
+	clearPalettePressFunction() {
+		this.palettePressFunction = null;
 		this.DOMobject.title = null;
 		this.DOMobject.style.backgroundImage = 'none';
 	}
@@ -367,10 +368,10 @@
 	setDomHandler() {
 		this.DOMobject.classList.add('palbutton');
 		this.DOMobject.dataset.objid = 'palbutton';
-		this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShape.bind(this), false);
-		this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShape.bind(this), false);
-		this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShape.bind(this), false);
-		this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShape.bind(this), false);
+		this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShapeFunctionButton.bind(this), false);
+		this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShapeFunctionButton.bind(this), false);
+		this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShapeFunctionButton.bind(this), false);
+		this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShapeFunctionButton.bind(this), false);
 		this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
 		this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
 		this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
@@ -379,22 +380,22 @@
 
 	// Event handler ------------------------
 
-	onMouseDownPaletteShape(evt) {
+	onMouseDownPaletteShapeFunctionButton(evt) {
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 	}
-	onMouseUpPaletteShape(evt) {
+	onMouseUpPaletteShapeFunctionButton(evt) {
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
-		// 登録処理実行
-		this.paletteFunction.executeFunction();
+		// Function実行
+		this.palettePressFunction.executeFunction();
 
 		// Toggle button 処理
-		let replaceObject = this.paletteFunction.getObjectToReplaceAfterExecution();
+		let replaceObject = this.palettePressFunction.getObjectToReplaceAfterExecution();
 		if (null != replaceObject) {
-			this.clearPaletteFunction();
-			this.setPaletteFunction(replaceObject);
+			this.clearPalettePressFunction();
+			this.setPalettePressFunction(replaceObject);
 		}
 	}
 }	// class PaletteShapeFunctionButton
@@ -405,24 +406,270 @@
 // DOM Elementの保持、ボタンdrag & dropでの実行機能との関連付け
 // Input eventから必要機能の呼び出し
 class PaletteShapeCSSButton {
-}
+	constructor() {
+		this.DOMobject = null;
+		this.paletteDropFunction = null;
+	}
 
-// Drop file(CSS定義test)の内容読み込み
-//		string objectを返す
-// Stringの解析
-//		class name取得
-//		定義内容取得
-//		description取得
-//		data scheme取得
-// StringをStyle elementへadd - Ruleへの参照を返す
-//		Element指定は必須
-// StringをStyle elementへreplace - Ruleへの参照を返す
-//		Element指定は必須
-// CSS class name指定でRuleへの参照を返す
-//		Element指定あり …… 指定Element内から検索
-//		Element指定なし …… document全体から検索
+	// 表示に使用するDOM要素を作成
+	// DOM 要素を作成してこの Instance の表示要素として登録
+	createButtonElement(parent) {
+		if (null != this.DOMobject) {
+			console.error('パレットボタン(PaletteShapeCSSButton)  ボタン要素作成エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = 新規');
+			// そのまま実行
+		}
 
+		this.DOMobject = document.createElement('div');
+		this.setDomHandler();
 
+		// 引数 Element の Child として登録
+		this.setPalentElement(parent);
+
+		return true;
+	}
+
+	// 親要素設定。所属パレットを切り替えたい場合など
+	// ボタンを引数 Element の Child として登録する
+	// Palent は position:static 以外の指定が必須
+	// Palent の left, top, width, height に合わせたサイズで表示する
+	setPalentElement(ele) {
+		if (null == ele) {
+			console.error('パレットボタン(PaletteShapeCSSButton)  親要素設定エラー  引数の親要素が未設定');
+			return false;
+		}
+		if (null == this.DOMobject) {
+			console.error('パレットボタン(PaletteShapeCSSButton)  親要素設定エラー  ボタン要素が登録されていません parent = ' + ele);
+			return false;
+		}
+
+		if (null == this.DOMobject.parentNode) console.log('パレットボタン(PaletteShapeFunctionButton)  親要素設定未設定状態');
+		else this.DOMobject.parentNode.removeChild(this.DOMobject);
+
+		// 最も手前に追加
+		// DOM tree に入ったタイミングで CSS 設定が適用される
+		// (親要素の位置とサイズにフィットする)
+		ele.appendChild(this.DOMobject);
+		return true;
+	}
+
+	// Paletteボタン対象Dropで実行する機能を登録
+	setPaletteDropFunction(dropcssfunc) {
+		if (null != this.paletteDropFunction) {
+			console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー  上書き登録\n以前の機能 = ' + this.paletteDropFunction.getFunction.name + ',  今回の機能 = ' + palfunc.getFunction.name);
+			// ひとまず処理継続
+		}
+		this.paletteDropFunction = palfunc;
+
+		// 表示要素の更新
+		this.DOMobject.title = this.palettePressFunction.getDescription();
+		this.DOMobject.style.backgroundImage = 'url(' + this.palettePressFunction.getImage() + ')';
+		this.DOMobject.style.backgroundSize = 'cover';
+	}
+
+	clearPaletteDropFunction() {
+		this.paletteDropFunction = null;
+		this.DOMobject.title = null;
+		this.DOMobject.style.backgroundImage = 'none';
+	}
+
+
+	// Private 関数 ------------------------
+
+	setDomHandler() {
+		this.DOMobject.classList.add('palbutton');
+		this.DOMobject.dataset.objid = 'palbutton';
+		this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShapeCSSButton.bind(this), false);
+	//	this.DOMobject.addEventListener('mousemove', this.onMouseMovePaletteShapeCSSButton.bind(this), false);
+	//	this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShapeCSSButton.bind(this), false);
+		this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShapeCSSButton.bind(this), false);
+	//	this.DOMobject.addEventListener('touchmove', this.onMouseMovePaletteShapeCSSButton.bind(this), false);
+	//	this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShapeCSSButton.bind(this), false);
+		this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
+		this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
+		this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
+	}
+
+
+	// Event handler ------------------------
+
+	// Mouse/Touch event handler
+	// Mouse Up座標にあるElementにCSS classを追加する
+
+	// 移動対象Palette要素選択
+	onMouseDownPaletteShapeCSSButton(evt) {
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+		// Mouse/Touch event 差分
+		let eleTarget = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target;
+
+		// Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
+		window.appArea.setInputEventObj(eleTarget.dataset.objid, this.onMouseMovePaletteShapeCSSButton.bind(this), this.onMouseUpPaletteShapeCSSButton.bind(this));
+		this.startMovingElement(evt);
+	}
+	startMovingElement(evt){
+		// Drag対象を保持
+		this.draggingDOM = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target;
+		// ElementのDrag開始位置を保持
+		this.startElementX = parseInt(this.draggingDOM.style.left);
+		this.startElementY = parseInt(this.draggingDOM.style.top);
+		// MouseのDrag開始位置を保持
+		this.startDragX = evt.pageX;
+		this.startDragY = evt.pageY;
+		this.draggingDOM.style.opacity = 0.4;
+	}
+
+	// Palette要素移動
+	onMouseMovePaletteShapeCSSButton(evt) {
+		if (null == this.draggingDOM) return;
+		evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();	// 要素既定のdefault動作を止める
+
+		// 画像の仮移動
+		this.endDragX = evt.pageX;
+		this.endDragY = evt.pageY;
+		// 移動量取得
+		let moveX = this.endDragX - this.startDragX;
+		let moveY = this.endDragY - this.startDragY;
+		// dispObjがあった位置からマウス移動分移動させた後の位置取得
+		moveX = this.startElementX + moveX;
+		moveY = this.startElementY + moveY;
+
+		window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
+	}
+	renderMoveDragging(x, y) {
+		if (null == this.draggingDOM) return;
+		this.draggingDOM.style.left = x + "px";
+		this.draggingDOM.style.top = y + "px";
+	}
+
+	// Palette要素移動完了
+	onMouseUpPaletteShapeCSSButton(evt) {
+		if (null == this.draggingDOM) return;
+		evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();	// 要素既定のdefault動作を止める
+		this.endMovingElement(evt);
+	}
+	endMovingElement(evt) {
+		// 初期表示状態に戻す
+		this.draggingDOM.style.left = this.startElementX + "px";
+		this.draggingDOM.style.top = this.startElementY + "px";
+		this.draggingDOM.style.opacity = 1.0;
+
+		// Drag中 element情報をクリア
+		this.draggingDOM = null;
+		// Mouse event callback設定をクリア
+		window.appArea.clearCallEventObj();
+
+		// マウス座標直下にある要素を検索
+		// (evt.targetは自分を指してしまうため)
+		let target = window.ObjIDMgr.hitCheck(evt.pageX, evt.pageY);
+		if (null == target) {
+			if (window.frameArea.hitCheck(evt.pageX, evt.pageY))
+				target = window.frameArea;
+		}
+
+		// Target element へ CSS classを追加する
+	}
+
+
+	// Drag&Drop event
+	// Applicationの外からFile Dropされたときに
+	// File内容情報を読み込み、CSSに反映させる
+	onDragStartPaletteShapeCSSButton(evt) {
+		evt.preventDefault();
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+	}
+	onDragOverPaletteShapeCSSButton(evt) {
+		evt.preventDefault();
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.dataTransfer.dropEffect = "copy";
+	}
+	onDropPaletteShapeCSSButton(evt) {
+		this.debuglog('onDrop');
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.stopImmediatePropagation();		// 処理中要素の他のevent listenerを止める
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+
+		// Text, Imageそれぞれの解析処理呼び出し
+		getDropFile(evt, this.replaceCSSText.bind(this), this.parseImage.bind(this), this.parseError.bind(this));
+	}
+
+	replaceCSSText(file) {
+		let cssText = null;
+		cssText = this.paletteTextParser.readTextFile(file);
+		this.paletteTextParser.parseText(cssText);
+		let rule = this.paletteApplyCss.getCSS();
+		this.paletteTextParser.replaceCSSRule(rule, cssText);
+	}
+	parseImage(file) {
+		console.error('画像ファイルには未対応');
+		return false;
+	}
+	parseError() {
+		console.error('ドロップファイル解析エラー');
+		return false;
+	}
+}	// class PaletteShapeCSSButton
+
+// Text解析、CSS登録
+// CSSの汎用操作を扱うわけではない
+// 解析後のTextやImageは保持しない
+// singletonにしたいがやり方がわからないので1つだけ作るようにする；´Д｀)運用でカバー
+class PaletteCSSTextParser {
+	constructor() {
+		this.filename = null;
+		this.cssText = null;
+	}
+
+	// Drop file(CSS定義test)の内容読み込み(file, ele, num)
+	// 基本的には上書きで使う。パレット要素数とCSS定義数がイコールになる。
+	// keyframeはkeyframe登録専用のstyle elementに登録する
+	//		string objectを返す
+	//		引数style elementへのCSS登録
+	//			num番目のCSSへ上書きする
+	//			(len <= num) or (num < 0) はaddする
+	readTextFile(
+		file,			// 読みこむ対象ファイル
+		readComplete	// 読み込み完了Callback(function(fileReadStr))
+	) {
+		// file名保持
+		this.filename = file.name;
+
+		let text = null;
+		// drop fileの読み込み
+		let reader = new FileReader();
+		// Text fileを読み込み
+		reader.readAsText(file);
+		reader.onload = function (evt) {
+				this.cssText = evt.target.result; // 読み込んだ文字列
+				if (null != readComplete)
+					readComplete(this.cssText);
+		}.bind(this);
+	}
+
+	// Stringの解析・解析結果を一旦内部保持 (解析実行ごとに上書き)
+	//		class name取得
+	//		定義内容取得
+	//		description取得
+	//		data scheme取得
+	//		comment取得
+	parseText(str) {
+		// Textを下記要素に分解する
+		// ・
+	}
+
+	// StringをStyle elementへadd - Ruleへの参照を返す
+	//		Element指定は必須
+	// StringをStyle elementへreplace - Ruleへの参照を返す
+	//		Element指定は必須
+	replaceCSSRule(rule, text) {
+	}
+
+	// CSS class name指定でRuleへの参照を返す
+	//		Element指定あり …… 指定Element内から検索
+	//		Element指定なし …… document全体から検索
+}
+
 class CSSPalette {
 	constructor() {
 		this.draggingDOM = null;
@@ -440,6 +687,14 @@
 
 		// palette要素を保持
 		// 背景設定パレット
+		let elePalbg = document.getElementsByClassName('palbg');
+		this.palBackground = [];
+		for (let cnt = 0; cnt < elePalbg.length; cnt++) {
+			this.palBackground[cnt] = new PaletteShapeCSSButton();
+			this.palBackground[cnt].createButtonElement(elePalbg[cnt]);
+			// ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
+		}
+/*
 		this.DOMpalbg = document.getElementsByClassName('palbg');
 		for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
 			this.DOMpalbg[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -452,7 +707,16 @@
 			this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
 			this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
 		}
-		// テキストカラーパレット
+*/
+		// スタイルパレット
+		let elePalstyle = document.getElementsByClassName('paltxtcol');
+		this.palStyle = [];
+		for (let cnt = 0; cnt < elePalstyle.length; cnt++) {
+			this.palStyle[cnt] = new PaletteShapeCSSButton();
+			this.palStyle[cnt].createButtonElement(elePalstyle[cnt]);
+			// ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
+		}
+/*
 		this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
 		for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
 			this.DOMpaltxtcol[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -465,7 +729,16 @@
 			this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
 			this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
 		}
+*/
 		// アクションパレット
+		let elePalaction = document.getElementsByClassName('palact');
+		this.palAction = [];
+		for (let cnt = 0; cnt < elePalaction.length; cnt++) {
+			this.palAction[cnt] = new PaletteShapeCSSButton();
+			this.palAction[cnt].createButtonElement(elePalaction[cnt]);
+			// ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
+		}
+/*
 		this.DOMpalact = document.getElementsByClassName('palact');
 		for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
 			this.DOMpalact[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -478,6 +751,7 @@
 			this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
 			this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
 		}
+*/
 		// 設定パレット
 		// (リファクタにより、設定パレットのみ処理を別物にしている)
 		let palfuncs = [
@@ -490,11 +764,11 @@
 			paletteFunctionObjects.getItem(10)	//	Toggle Scale font size
 		];
 		let elePalset = document.getElementsByClassName('palset');	// 土台 Element 取得
-		this.palSetting = [];
+		this.palSetting = [];	// ボタン機能提供Elementを保持するClass Instance配列
 		for (let cnt = 0; cnt < elePalset.length; cnt++) {
-			this.palSetting[cnt] = new PaletteShapeFunctionButton();
-			this.palSetting[cnt].createButtonElement(elePalset[cnt]);
-			this.palSetting[cnt].setPaletteFunction(palfuncs[cnt]);
+			this.palSetting[cnt] = new PaletteShapeFunctionButton();		// ボタン機能Class Instance生成
+			this.palSetting[cnt].createButtonElement(elePalset[cnt]);		// ボタンElement生成とパレットに関連付け
+			this.palSetting[cnt].setPalettePressFunction(palfuncs[cnt]);	// ボタン押下で実行する機能の登録
 		}
 /*
 		// 設定パレットは 要素のdrop処理がなく、表示ボタン押下で登録機能を実行する
@@ -692,7 +966,7 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
-		window.appArea.setSingleTouchEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
+		window.appArea.setSingleTouchEventObj(evt.targetTouches[0].target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
 		this.startMovingElement(evt.targetTouches[0]);
 	}
 	startMovingElement(evt){

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js	(revision 50)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js	(revision 51)
@@ -38,7 +38,9 @@
 
 		let palsize = document.getElementsByClassName('palsize');
 		this.paletteSizeChanger = [];
-		this.paletteSizeChanger[0] = new PalGroupSize(palsize[0]);
+		for (let cnt = 0; cnt < palsize.length; cnt++) {
+			this.paletteSizeChanger[cnt] = new PalGroupSize(palsize[cnt]);
+		}
 	}
 
 	// 操作関数 ----------------------------
@@ -148,6 +150,9 @@
 		this.DOMobject.title = "ドラッグでサイズを変更します";
 		this.DOMobject.addEventListener('mousedown', this.onMouseDownPalGroupSize.bind(this), false);
 		this.DOMobject.addEventListener('touchstart', this.onTouchStartPalGroupSize.bind(this), false);
+		if (null == this.DOMobject.parentNode) {
+			console.error('パレットサイズ変更エラー 指定要素の親要素が見つかりません。\nサイズ変更対象が見つからないためパレットのサイズは変更できません');
+		}
 	}
 
 	onMouseDownPalGroupSize(evt) {
@@ -167,13 +172,13 @@
 		this.startChangingSize(evt.targetTouches[0]);
 	}
 	startChangingSize(evt) {
-		let target = evt.target.parentNode;
+		let target			= this.DOMobject.parentNode;
 		this.startLeft		= parseInt(target.style.left);
 		this.startTop		= parseInt(target.style.top);
-		this.startWidth	= parseInt(target.style.width);
+		this.startWidth		= parseInt(target.style.width);
 		this.startHeight	= parseInt(target.style.height);
-		this.startDragX = evt.pageX;
-		this.startDragY = evt.pageY;
+		this.startDragX		= evt.pageX;
+		this.startDragY		= evt.pageY;
 	}
 
 	InputMovePalGroupSize(evt, touchevt) {
@@ -192,10 +197,10 @@
 			window.renderLoop.requestRenderFunc(this.renderInputMovePalGroupSize.bind(this, eleTarget, this.startLeft, this.startTop, this.startWidth + moveX, this.startHeight + moveY));
 	}
 	renderInputMovePalGroupSize(eleTarget, left, top, width, height) {
-		eleTarget.style.left = left + "px";
-		eleTarget.style.top = top + "px";
-		eleTarget.style.width = width + "px";
-		eleTarget.style.height = height + "px";
+		eleTarget.style.left	= left + "px";
+		eleTarget.style.top		= top + "px";
+		eleTarget.style.width	= width + "px";
+		eleTarget.style.height	= height + "px";
 	}
 
 	InputUpPalGroupSize(evt, touchevt) {

--- HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 50)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 51)
@@ -188,16 +188,28 @@
 		border: 1px solid rgba(0,0,0,0.2);
 		background-color: rgba(27, 158, 131, 0.6);
 		box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
+		/* ********************** */
+		position: relative;
+		width: 60px;	height: 60px;
+		margin: 7px 7px;		padding: 0;
 	}
 	.paltxtcol {
 		border: 1px solid rgba(0,0,0,0.2);
 		background-color: rgba(154,145,140,0.6);
 		box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
+		/* ********************** */
+		position: relative;
+		width: 60px;	height: 60px;
+		margin: 7px 7px;		padding: 0;
 	}
 	.palact {
 		border: 1px solid rgba(0,0,0,0.2);
 		background-color: rgba(156, 165, 55, 0.6);
 		box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
+		/* ********************** */
+		position: relative;
+		width: 60px;	height: 60px;
+		margin: 7px 7px;		padding: 0;
 	}
 	.palset {
 		border: 1px solid rgba(0,0,0,0.2);

--- HtmlDrawApp/HTMLDrawApp/index.html	(revision 50)
+++ HtmlDrawApp/HTMLDrawApp/index.html	(revision 51)
@@ -155,43 +155,52 @@
 			}
 		</style>
 
-		<fieldset class="palgroup palgroup0" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
+		<fieldset class="palgroup palgroup0" data-objid="palgroup0" style="width:400px; height:130px;" title="背景の色や画像を設定するパレットです">
 			<legend class="pallegend"> Background Palette </legend>
 			<div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
 				<span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
 			</div>
-			<div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
-			<div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
-			<div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
-			<div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
-			<div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
+			<ul class="palflex">
+				<li class="palbg palbg0" data-objid="palbg0" data-palid="0"></li>
+				<li class="palbg palbg1" data-objid="palbg1" data-palid="1"></li>
+				<li class="palbg palbg2" data-objid="palbg2" data-palid="2"></li>
+				<li class="palbg palbg3" data-objid="palbg3" data-palid="3"></li>
+				<li class="palbg palbg4" data-objid="palbg4" data-palid="4"></li>
+			</ul>
+			<div class="palsize"></div>
 		</fieldset>
 		<br />
 
-		<fieldset class="palgroup palgroup1" data-objid="palgroup1" title="テキストの色を設定するパレットです">
+		<fieldset class="palgroup palgroup1" data-objid="palgroup1" style="width:400px; height:130px;" title="テキストの色を設定するパレットです">
 			<legend class="pallegend"> Style Palette </legend>
 			<div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
 				<span class="paldesc1">外観</span><span class="paldesc2">見た</span>
 			</div>
-			<div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0"></div>
-			<div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1"></div>
-			<div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2"></div>
-			<div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3"></div>
-			<div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4"></div>
+			<ul class="palflex">
+				<li class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0"></li>
+				<li class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1"></li>
+				<li class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2"></li>
+				<li class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3"></li>
+				<li class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4"></li>
+			</ul>
+			<div class="palsize"></div>
 		</fieldset>
 
 		<br />
 
-		<fieldset class="palgroup palgroup2" data-objid="palgroup2" title="動きを設定するパレットです">
+		<fieldset class="palgroup palgroup2" data-objid="palgroup2" style="width:400px; height:130px;" title="動きを設定するパレットです">
 			<legend class="pallegend"> Action Palette </legend>
 			<div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
 				<span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
 			</div>
-			<div class="palact palact0" data-objid="palact0" data-palid="0"></div>
-			<div class="palact palact1" data-objid="palact1" data-palid="1"></div>
-			<div class="palact palact2" data-objid="palact2" data-palid="2"></div>
-			<div class="palact palact3" data-objid="palact3" data-palid="3"></div>
-			<div class="palact palact4" data-objid="palact4" data-palid="4"></div>
+			<ul class="palflex">
+				<li class="palact palact0" data-objid="palact0" data-palid="0"></li>
+				<li class="palact palact1" data-objid="palact1" data-palid="1"></li>
+				<li class="palact palact2" data-objid="palact2" data-palid="2"></li>
+				<li class="palact palact3" data-objid="palact3" data-palid="3"></li>
+				<li class="palact palact4" data-objid="palact4" data-palid="4"></li>
+			</ul>
+			<div class="palsize"></div>
 		</fieldset>
 
 		<fieldset class="palgroup palgroup3" data-objid="palgroup3" style="width:400px; height:130px;" title="設定を変更するパレットです">

--- HtmlDrawApp/HTMLDrawApp/js/apparea.js	(revision 50)
+++ HtmlDrawApp/HTMLDrawApp/js/apparea.js	(revision 51)
@@ -4,10 +4,8 @@
 class appArea {
 	constructor(dom) {
 		this.DOMobject = dom;
-		this.mouseMoveFunc = null;
-		this.mouseUpFunc = null;
-		this.touchMoveFunc = null;
-		this.touchEndFunc = null;
+
+		this.clearCallEventObj();
 	}
 	// 保存ファイルから編集エリア内容 (DispFieldの divとそこに連なるelement) を
 	// 取得するための正規表現object取得
@@ -112,6 +110,26 @@
 		this.mouseMoveFunc = mouseMove;
 		this.mouseUpFunc = mouseUp;
 	}
+	setInputEventObj(
+				strclass,	// End event callback 第2引数 targetとして返してほしいelementが持つ css class名
+				funcMove,	// Move eventで呼んでほしい関数 or null
+				funcEnd		// End eventで呼んでほしい関数 or null
+	) {
+		this.debuglog('setInputEventObj strclass=' + strclass + ', callbackMove=' + ((null != funcMove) ? funcMove.name : 'null') + ',  callbackUp=' + ((null != funcEnd) ? funcEnd.name : 'null'));
+
+		// Callbackを上書きしてしまう場合はエラー出力し、ひとまず処理を継続
+		if (null != funcMove || null != funcEnd) {
+			if (null != this.mouseMoveFunc || null != this.mouseUpFunc) {
+				console.error('入力イベント callback設定上書き   \n\
+Before  strclass=' + this.strclass + 'callbackMove=' + (this.inputMoveFunc ? this.inputMoveFunc.name : 'null') + ',  callbackUp=' + (this.inputEndFunc ? this.inputEndFunc.name : 'null') + '\n\
+After   strclass=' + strclass + 'callbackMove=' + ((null != funcMove) ? funcMove.name : 'null') + ',  callbackUp=' + ((null != funcEnd) ? funcEnd.name : 'null'));
+			}
+		}
+
+		this.strclass = strclass;
+		this.inputMoveFunc = funcMove;
+		this.inputEndFunc = funcEnd;
+	}
 	// Touch I/F 用
 	// 最初のtouch objectのみを返す (そのため mouse I/Fと同じように扱える)
 	setSingleTouchEventObj(
@@ -143,6 +161,8 @@
 		this.mouseUpFunc = null;
 		this.touchMoveFunc = null;
 		this.touchEndFunc = null;
+		this.inputMoveFunc = null;
+		this.inputEndFunc = null;
 	}
 	// Event handler -------------------
 
@@ -159,11 +179,17 @@
 		if (null != this.mouseMoveFunc) {
 			this.mouseMoveFunc(evt);
 		}
+		if (null != this.inputMoveFunc) {
+			this.inputMoveFunc(evt);
+		}
 	}
 	onTouchMove(evt){
 		if (null != this.touchMoveFunc) {
 			this.touchMoveFunc(evt.targetTouches[0], evt);
 		}
+		if (null != this.inputMoveFunc) {
+			this.inputMoveFunc(evt);
+		}
 	}
 
 	//  ドロップ処理
@@ -178,6 +204,9 @@
 		if (null != this.mouseUpFunc) {
 			this.mouseUpFunc(evt, e);
 		}
+		if (null != this.inputEndFunc) {
+			this.inputEndFunc(evt, e);
+		}
 	}
 	onTouchEnd(evt){
 		this.debuglog('タッチエンド onTouchEnd()  findClass=' + this.strclass + ',  callback  move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ',  End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
@@ -190,6 +219,9 @@
 		if (null != this.touchEndFunc) {
 			this.touchEndFunc(evt.changedTouches[0], e, evt);
 		}
+		if (null != this.inputEndFunc) {
+			this.inputEndFunc(evt, e);
+		}
 	}
 
 

--- HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 50)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 51)
@@ -9,7 +9,7 @@
 // パレットのCSS機能ボタンを押したときに実行する機能を提供する
 // (保持中CSS class nameを対象Elementに付加, 削除)
 // (Button instanceが自分の機能を意識しないようにするためのclass)
-class PaletteCSS {
+class PaletteApplyCSS {
 	constructor() {
 		this.paletteRule = null;
 		this.dataScheme = null;
@@ -91,12 +91,12 @@
 	getDescription() {
 		return this.description;
 	}
-} PaletteCSS
+}
 
 // パレットのFunctionボタンを押したときに実行する機能を提供する
 class PaletteFunction {
 	constructor() {
-		this.paletteFunction = null;
+		this.palettePressFunction = null;
 		this.dataScheme = null;
 		this.description = null;
 		this.replaceObject = null;
@@ -117,25 +117,25 @@
 	// 登録するとき、必要に応じてthisやargをbindすること
 
 	registerFunction(func) {
-		if (null != this.paletteFunction) {
-			console.error('パレット機能 上書き登録\n以前の機能 = ' + this.paletteFunction.name + ',  今回の機能 = ' + func.name);
+		if (null != this.palettePressFunction) {
+			console.error('パレット機能 上書き登録\n以前の機能 = ' + this.palettePressFunction.name + ',  今回の機能 = ' + func.name);
 			// ひとまず処理継続
 		}
-		this.paletteFunction = func;
+		this.palettePressFunction = func;
 		return true;
 	}
 	removeFunction() {
-		this.paletteFunction = null;
+		this.palettePressFunction = null;
 	}
 	getFunction() {
-		return this.paletteFunction;
+		return this.palettePressFunction;
 	}
 	executeFunction() {
-		if (null == this.paletteFunction) {
+		if (null == this.palettePressFunction) {
 			console.error('パレット機能登録前に呼び出そうとした');
 			return false;
 		}
-		return this.paletteFunction();
+		return this.palettePressFunction();
 	}
 
 	// executeFunction実行後に PaletteFunction の Instance を入れ替える設定
@@ -181,86 +181,86 @@
 // パレット機能定義 Class と 表示定義 Class を繋ぐ Class。即時実行。
 // 表示定義 Class 寄りの存在 (画面仕様に影響される処理内容なので)
 var paletteFunctionObjects = (function () {
-	let paletteFunction = [];
+	let palettePressFunction =[];
 
 	var defineFunctions = function () {
 		let cnt = 0;
 		// 設定パレット非表示設定
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
-		paletteFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
+		palettePressFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
 		// 選択要素削除
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
-		paletteFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
+		palettePressFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
 		// 枠の表示/非表示
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
-		paletteFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
+		palettePressFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
-		paletteFunction[cnt].registerDescription("識別用の枠を消します。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
-		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
-		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
+		palettePressFunction[cnt].registerDescription("識別用の枠を消します。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
+		palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
 		cnt++;
 		// アニメーションする/しない設定
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
-		paletteFunction[cnt].registerDescription("アニメーションを停止します。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
+		palettePressFunction[cnt].registerDescription("アニメーションを停止します。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
-		paletteFunction[cnt].registerDescription("アニメーションを再開します。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
-		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
-		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
+		palettePressFunction[cnt].registerDescription("アニメーションを再開します。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
+		palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
 		cnt++;
 		// パレット上の要素は常にアニメーションをしない/する設定
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
-		paletteFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
+		palettePressFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
-		paletteFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
-		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
-		paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
+		palettePressFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
+		palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
 		cnt++;
 		// image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
-		paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
+		palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
-		paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
-		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
-		paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		palettePressFunction[cnt]= new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
+		palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
+		palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
 		cnt++;
 		// div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
-		paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
+		palettePressFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
 		cnt++;
-		paletteFunction[cnt] = new PaletteFunction();
-		paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
-		paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
-		paletteFunction[cnt].registerImage("images/StoreLogo.png");
-		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
-		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		palettePressFunction[cnt] = new PaletteFunction();
+		palettePressFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
+		palettePressFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
+		palettePressFunction[cnt].registerImage("images/StoreLogo.png");
+		palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
+		palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
 		cnt++;
 	};
 	defineFunctions();
@@ -267,11 +267,11 @@
 
 	return {
 		getItem: function (num) {
-			if (paletteFunction.length <= num) {
-				console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ',  len = ' + paletteFunction.length);
+			if (palettePressFunction.length <= num) {
+				console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ',  len = ' + palettePressFunction.length);
 				return null;
 			}
-			return paletteFunction[num];
+			return palettePressFunction[num];
 		}
 	};
 })();
@@ -281,7 +281,7 @@
 class PaletteShapeFunctionButton {
 	constructor() {
 		this.DOMobject = null;
-		this.paletteFunction = null;
+		this.palettePressFunction = null;
 	}
 
 	// 表示に使用するDOM要素を作成
@@ -288,7 +288,8 @@
 	// DOM 要素を作成してこの Instance の表示要素として登録
 	createButtonElement(parent) {
 		if (null != this.DOMobject) {
-			console.error('パレットボタン  ボタン要素作成エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = 新規');
+			console.error('パレットボタン(PaletteShapeFunctionButton)  ボタン要素作成エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = 新規');
+			// そのまま実行
 		}
 
 		this.DOMobject = document.createElement('div');
@@ -304,11 +305,11 @@
 	// 既に存在する Element をこの Instance の表示要素として登録する
 	setButtonElement(ele) {
 		if (null == ele) {
-			console.error('パレットボタン  ボタン要素設定エラー  引数の要素が未設定');
+			console.error('パレットボタン(PaletteShapeFunctionButton)  ボタン要素設定エラー  引数の要素が未設定');
 			return false;
 		}
 		if (null != this.DOMobject) {
-			console.error('パレットボタン  ボタン要素設定エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = ' + ele);
+			console.error('パレットボタン(PaletteShapeFunctionButton)  ボタン要素設定エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = ' + ele);
 		}
 		this.DOMobject = ele;
 		this.setDomHandler();
@@ -324,15 +325,15 @@
 	// Palent の left, top, width, height に合わせたサイズで表示する
 	setPalentElement(ele) {
 		if (null == ele) {
-			console.error('パレットボタン  親要素設定エラー  引数の親要素が未設定');
+			console.error('パレットボタン(PaletteShapeFunctionButton)  親要素設定エラー  引数の親要素が未設定');
 			return false;
 		}
 		if (null == this.DOMobject) {
-			console.error('パレットボタン  親要素設定エラー  ボタン要素が登録されていません parent = ' + ele);
+			console.error('パレットボタン(PaletteShapeFunctionButton)  親要素設定エラー  ボタン要素が登録されていません parent = ' + ele);
 			return false;
 		}
 
-		if (null == this.DOMobject.parentNode)	console.log('パレットボタン  親要素設定未設定状態');
+		if (null == this.DOMobject.parentNode) console.log('パレットボタン(PaletteShapeFunctionButton)  親要素設定未設定状態');
 		else									this.DOMobject.parentNode.removeChild(this.DOMobject);
 
 		// 最も手前に追加
@@ -343,20 +344,20 @@
 	}
 
 	// ボタン Click で実行する機能を登録
-	setPaletteFunction(palfunc) {
-		if (null != this.paletteFunction) {
-			console.error('パレットボタンへの機能設定エラー  上書き登録\n以前の機能 = ' + this.paletteFunction.getFunction.name + ',  今回の機能 = ' + palfunc.getFunction.name);
+	setPalettePressFunction(palfunc) {
+		if (null != this.palettePressFunction) {
+			console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー  上書き登録\n以前の機能 = ' + this.palettePressFunction.getFunction.name + ',  今回の機能 = ' + palfunc.getFunction.name);
 			// ひとまず処理継続
 		}
-		this.paletteFunction = palfunc;
+		this.palettePressFunction = palfunc;
 
 		// 表示要素の更新
-		this.DOMobject.title = this.paletteFunction.getDescription();
-		this.DOMobject.style.backgroundImage = 'url(' + this.paletteFunction.getImage() + ')';
+		this.DOMobject.title = this.palettePressFunction.getDescription();
+		this.DOMobject.style.backgroundImage = 'url(' + this.palettePressFunction.getImage() + ')';
 		this.DOMobject.style.backgroundSize = 'cover';
 	}
-	clearPaletteFunction() {
-		this.paletteFunction = null;
+	clearPalettePressFunction() {
+		this.palettePressFunction = null;
 		this.DOMobject.title = null;
 		this.DOMobject.style.backgroundImage = 'none';
 	}
@@ -367,10 +368,10 @@
 	setDomHandler() {
 		this.DOMobject.classList.add('palbutton');
 		this.DOMobject.dataset.objid = 'palbutton';
-		this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShape.bind(this), false);
-		this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShape.bind(this), false);
-		this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShape.bind(this), false);
-		this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShape.bind(this), false);
+		this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShapeFunctionButton.bind(this), false);
+		this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShapeFunctionButton.bind(this), false);
+		this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShapeFunctionButton.bind(this), false);
+		this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShapeFunctionButton.bind(this), false);
 		this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
 		this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
 		this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
@@ -379,22 +380,22 @@
 
 	// Event handler ------------------------
 
-	onMouseDownPaletteShape(evt) {
+	onMouseDownPaletteShapeFunctionButton(evt) {
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 	}
-	onMouseUpPaletteShape(evt) {
+	onMouseUpPaletteShapeFunctionButton(evt) {
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
-		// 登録処理実行
-		this.paletteFunction.executeFunction();
+		// Function実行
+		this.palettePressFunction.executeFunction();
 
 		// Toggle button 処理
-		let replaceObject = this.paletteFunction.getObjectToReplaceAfterExecution();
+		let replaceObject = this.palettePressFunction.getObjectToReplaceAfterExecution();
 		if (null != replaceObject) {
-			this.clearPaletteFunction();
-			this.setPaletteFunction(replaceObject);
+			this.clearPalettePressFunction();
+			this.setPalettePressFunction(replaceObject);
 		}
 	}
 }	// class PaletteShapeFunctionButton
@@ -405,24 +406,270 @@
 // DOM Elementの保持、ボタンdrag & dropでの実行機能との関連付け
 // Input eventから必要機能の呼び出し
 class PaletteShapeCSSButton {
-}
+	constructor() {
+		this.DOMobject = null;
+		this.paletteDropFunction = null;
+	}
 
-// Drop file(CSS定義test)の内容読み込み
-//		string objectを返す
-// Stringの解析
-//		class name取得
-//		定義内容取得
-//		description取得
-//		data scheme取得
-// StringをStyle elementへadd - Ruleへの参照を返す
-//		Element指定は必須
-// StringをStyle elementへreplace - Ruleへの参照を返す
-//		Element指定は必須
-// CSS class name指定でRuleへの参照を返す
-//		Element指定あり …… 指定Element内から検索
-//		Element指定なし …… document全体から検索
+	// 表示に使用するDOM要素を作成
+	// DOM 要素を作成してこの Instance の表示要素として登録
+	createButtonElement(parent) {
+		if (null != this.DOMobject) {
+			console.error('パレットボタン(PaletteShapeCSSButton)  ボタン要素作成エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = 新規');
+			// そのまま実行
+		}
 
+		this.DOMobject = document.createElement('div');
+		this.setDomHandler();
 
+		// 引数 Element の Child として登録
+		this.setPalentElement(parent);
+
+		return true;
+	}
+
+	// 親要素設定。所属パレットを切り替えたい場合など
+	// ボタンを引数 Element の Child として登録する
+	// Palent は position:static 以外の指定が必須
+	// Palent の left, top, width, height に合わせたサイズで表示する
+	setPalentElement(ele) {
+		if (null == ele) {
+			console.error('パレットボタン(PaletteShapeCSSButton)  親要素設定エラー  引数の親要素が未設定');
+			return false;
+		}
+		if (null == this.DOMobject) {
+			console.error('パレットボタン(PaletteShapeCSSButton)  親要素設定エラー  ボタン要素が登録されていません parent = ' + ele);
+			return false;
+		}
+
+		if (null == this.DOMobject.parentNode) console.log('パレットボタン(PaletteShapeFunctionButton)  親要素設定未設定状態');
+		else this.DOMobject.parentNode.removeChild(this.DOMobject);
+
+		// 最も手前に追加
+		// DOM tree に入ったタイミングで CSS 設定が適用される
+		// (親要素の位置とサイズにフィットする)
+		ele.appendChild(this.DOMobject);
+		return true;
+	}
+
+	// Paletteボタン対象Dropで実行する機能を登録
+	setPaletteDropFunction(dropcssfunc) {
+		if (null != this.paletteDropFunction) {
+			console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー  上書き登録\n以前の機能 = ' + this.paletteDropFunction.getFunction.name + ',  今回の機能 = ' + palfunc.getFunction.name);
+			// ひとまず処理継続
+		}
+		this.paletteDropFunction = palfunc;
+
+		// 表示要素の更新
+		this.DOMobject.title = this.palettePressFunction.getDescription();
+		this.DOMobject.style.backgroundImage = 'url(' + this.palettePressFunction.getImage() + ')';
+		this.DOMobject.style.backgroundSize = 'cover';
+	}
+
+	clearPaletteDropFunction() {
+		this.paletteDropFunction = null;
+		this.DOMobject.title = null;
+		this.DOMobject.style.backgroundImage = 'none';
+	}
+
+
+	// Private 関数 ------------------------
+
+	setDomHandler() {
+		this.DOMobject.classList.add('palbutton');
+		this.DOMobject.dataset.objid = 'palbutton';
+		this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShapeCSSButton.bind(this), false);
+	//	this.DOMobject.addEventListener('mousemove', this.onMouseMovePaletteShapeCSSButton.bind(this), false);
+	//	this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShapeCSSButton.bind(this), false);
+		this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShapeCSSButton.bind(this), false);
+	//	this.DOMobject.addEventListener('touchmove', this.onMouseMovePaletteShapeCSSButton.bind(this), false);
+	//	this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShapeCSSButton.bind(this), false);
+		this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
+		this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
+		this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
+	}
+
+
+	// Event handler ------------------------
+
+	// Mouse/Touch event handler
+	// Mouse Up座標にあるElementにCSS classを追加する
+
+	// 移動対象Palette要素選択
+	onMouseDownPaletteShapeCSSButton(evt) {
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+		// Mouse/Touch event 差分
+		let eleTarget = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target;
+
+		// Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
+		window.appArea.setInputEventObj(eleTarget.dataset.objid, this.onMouseMovePaletteShapeCSSButton.bind(this), this.onMouseUpPaletteShapeCSSButton.bind(this));
+		this.startMovingElement(evt);
+	}
+	startMovingElement(evt){
+		// Drag対象を保持
+		this.draggingDOM = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target;
+		// ElementのDrag開始位置を保持
+		this.startElementX = parseInt(this.draggingDOM.style.left);
+		this.startElementY = parseInt(this.draggingDOM.style.top);
+		// MouseのDrag開始位置を保持
+		this.startDragX = evt.pageX;
+		this.startDragY = evt.pageY;
+		this.draggingDOM.style.opacity = 0.4;
+	}
+
+	// Palette要素移動
+	onMouseMovePaletteShapeCSSButton(evt) {
+		if (null == this.draggingDOM) return;
+		evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();	// 要素既定のdefault動作を止める
+
+		// 画像の仮移動
+		this.endDragX = evt.pageX;
+		this.endDragY = evt.pageY;
+		// 移動量取得
+		let moveX = this.endDragX - this.startDragX;
+		let moveY = this.endDragY - this.startDragY;
+		// dispObjがあった位置からマウス移動分移動させた後の位置取得
+		moveX = this.startElementX + moveX;
+		moveY = this.startElementY + moveY;
+
+		window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
+	}
+	renderMoveDragging(x, y) {
+		if (null == this.draggingDOM) return;
+		this.draggingDOM.style.left = x + "px";
+		this.draggingDOM.style.top = y + "px";
+	}
+
+	// Palette要素移動完了
+	onMouseUpPaletteShapeCSSButton(evt) {
+		if (null == this.draggingDOM) return;
+		evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();	// 要素既定のdefault動作を止める
+		this.endMovingElement(evt);
+	}
+	endMovingElement(evt) {
+		// 初期表示状態に戻す
+		this.draggingDOM.style.left = this.startElementX + "px";
+		this.draggingDOM.style.top = this.startElementY + "px";
+		this.draggingDOM.style.opacity = 1.0;
+
+		// Drag中 element情報をクリア
+		this.draggingDOM = null;
+		// Mouse event callback設定をクリア
+		window.appArea.clearCallEventObj();
+
+		// マウス座標直下にある要素を検索
+		// (evt.targetは自分を指してしまうため)
+		let target = window.ObjIDMgr.hitCheck(evt.pageX, evt.pageY);
+		if (null == target) {
+			if (window.frameArea.hitCheck(evt.pageX, evt.pageY))
+				target = window.frameArea;
+		}
+
+		// Target element へ CSS classを追加する
+	}
+
+
+	// Drag&Drop event
+	// Applicationの外からFile Dropされたときに
+	// File内容情報を読み込み、CSSに反映させる
+	onDragStartPaletteShapeCSSButton(evt) {
+		evt.preventDefault();
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+	}
+	onDragOverPaletteShapeCSSButton(evt) {
+		evt.preventDefault();
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.dataTransfer.dropEffect = "copy";
+	}
+	onDropPaletteShapeCSSButton(evt) {
+		this.debuglog('onDrop');
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.stopImmediatePropagation();		// 処理中要素の他のevent listenerを止める
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+
+		// Text, Imageそれぞれの解析処理呼び出し
+		getDropFile(evt, this.replaceCSSText.bind(this), this.parseImage.bind(this), this.parseError.bind(this));
+	}
+
+	replaceCSSText(file) {
+		let cssText = null;
+		cssText = this.paletteTextParser.readTextFile(file);
+		this.paletteTextParser.parseText(cssText);
+		let rule = this.paletteApplyCss.getCSS();
+		this.paletteTextParser.replaceCSSRule(rule, cssText);
+	}
+	parseImage(file) {
+		console.error('画像ファイルには未対応');
+		return false;
+	}
+	parseError() {
+		console.error('ドロップファイル解析エラー');
+		return false;
+	}
+}	// class PaletteShapeCSSButton
+
+// Text解析、CSS登録
+// CSSの汎用操作を扱うわけではない
+// 解析後のTextやImageは保持しない
+// singletonにしたいがやり方がわからないので1つだけ作るようにする；´Д｀)運用でカバー
+class PaletteCSSTextParser {
+	constructor() {
+		this.filename = null;
+		this.cssText = null;
+	}
+
+	// Drop file(CSS定義test)の内容読み込み(file, ele, num)
+	// 基本的には上書きで使う。パレット要素数とCSS定義数がイコールになる。
+	// keyframeはkeyframe登録専用のstyle elementに登録する
+	//		string objectを返す
+	//		引数style elementへのCSS登録
+	//			num番目のCSSへ上書きする
+	//			(len <= num) or (num < 0) はaddする
+	readTextFile(
+		file,			// 読みこむ対象ファイル
+		readComplete	// 読み込み完了Callback(function(fileReadStr))
+	) {
+		// file名保持
+		this.filename = file.name;
+
+		let text = null;
+		// drop fileの読み込み
+		let reader = new FileReader();
+		// Text fileを読み込み
+		reader.readAsText(file);
+		reader.onload = function (evt) {
+				this.cssText = evt.target.result; // 読み込んだ文字列
+				if (null != readComplete)
+					readComplete(this.cssText);
+		}.bind(this);
+	}
+
+	// Stringの解析・解析結果を一旦内部保持 (解析実行ごとに上書き)
+	//		class name取得
+	//		定義内容取得
+	//		description取得
+	//		data scheme取得
+	//		comment取得
+	parseText(str) {
+		// Textを下記要素に分解する
+		// ・
+	}
+
+	// StringをStyle elementへadd - Ruleへの参照を返す
+	//		Element指定は必須
+	// StringをStyle elementへreplace - Ruleへの参照を返す
+	//		Element指定は必須
+	replaceCSSRule(rule, text) {
+	}
+
+	// CSS class name指定でRuleへの参照を返す
+	//		Element指定あり …… 指定Element内から検索
+	//		Element指定なし …… document全体から検索
+}
+
 class CSSPalette {
 	constructor() {
 		this.draggingDOM = null;
@@ -440,6 +687,14 @@
 
 		// palette要素を保持
 		// 背景設定パレット
+		let elePalbg = document.getElementsByClassName('palbg');
+		this.palBackground = [];
+		for (let cnt = 0; cnt < elePalbg.length; cnt++) {
+			this.palBackground[cnt] = new PaletteShapeCSSButton();
+			this.palBackground[cnt].createButtonElement(elePalbg[cnt]);
+			// ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
+		}
+/*
 		this.DOMpalbg = document.getElementsByClassName('palbg');
 		for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
 			this.DOMpalbg[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -452,7 +707,16 @@
 			this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
 			this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
 		}
-		// テキストカラーパレット
+*/
+		// スタイルパレット
+		let elePalstyle = document.getElementsByClassName('paltxtcol');
+		this.palStyle = [];
+		for (let cnt = 0; cnt < elePalstyle.length; cnt++) {
+			this.palStyle[cnt] = new PaletteShapeCSSButton();
+			this.palStyle[cnt].createButtonElement(elePalstyle[cnt]);
+			// ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
+		}
+/*
 		this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
 		for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
 			this.DOMpaltxtcol[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -465,7 +729,16 @@
 			this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
 			this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
 		}
+*/
 		// アクションパレット
+		let elePalaction = document.getElementsByClassName('palact');
+		this.palAction = [];
+		for (let cnt = 0; cnt < elePalaction.length; cnt++) {
+			this.palAction[cnt] = new PaletteShapeCSSButton();
+			this.palAction[cnt].createButtonElement(elePalaction[cnt]);
+			// ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
+		}
+/*
 		this.DOMpalact = document.getElementsByClassName('palact');
 		for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
 			this.DOMpalact[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -478,6 +751,7 @@
 			this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
 			this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
 		}
+*/
 		// 設定パレット
 		// (リファクタにより、設定パレットのみ処理を別物にしている)
 		let palfuncs = [
@@ -490,11 +764,11 @@
 			paletteFunctionObjects.getItem(10)	//	Toggle Scale font size
 		];
 		let elePalset = document.getElementsByClassName('palset');	// 土台 Element 取得
-		this.palSetting = [];
+		this.palSetting = [];	// ボタン機能提供Elementを保持するClass Instance配列
 		for (let cnt = 0; cnt < elePalset.length; cnt++) {
-			this.palSetting[cnt] = new PaletteShapeFunctionButton();
-			this.palSetting[cnt].createButtonElement(elePalset[cnt]);
-			this.palSetting[cnt].setPaletteFunction(palfuncs[cnt]);
+			this.palSetting[cnt] = new PaletteShapeFunctionButton();		// ボタン機能Class Instance生成
+			this.palSetting[cnt].createButtonElement(elePalset[cnt]);		// ボタンElement生成とパレットに関連付け
+			this.palSetting[cnt].setPalettePressFunction(palfuncs[cnt]);	// ボタン押下で実行する機能の登録
 		}
 /*
 		// 設定パレットは 要素のdrop処理がなく、表示ボタン押下で登録機能を実行する
@@ -692,7 +966,7 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
-		window.appArea.setSingleTouchEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
+		window.appArea.setSingleTouchEventObj(evt.targetTouches[0].target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
 		this.startMovingElement(evt.targetTouches[0]);
 	}
 	startMovingElement(evt){

--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js	(revision 50)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js	(revision 51)
@@ -38,7 +38,9 @@
 
 		let palsize = document.getElementsByClassName('palsize');
 		this.paletteSizeChanger = [];
-		this.paletteSizeChanger[0] = new PalGroupSize(palsize[0]);
+		for (let cnt = 0; cnt < palsize.length; cnt++) {
+			this.paletteSizeChanger[cnt] = new PalGroupSize(palsize[cnt]);
+		}
 	}
 
 	// 操作関数 ----------------------------
@@ -148,6 +150,9 @@
 		this.DOMobject.title = "ドラッグでサイズを変更します";
 		this.DOMobject.addEventListener('mousedown', this.onMouseDownPalGroupSize.bind(this), false);
 		this.DOMobject.addEventListener('touchstart', this.onTouchStartPalGroupSize.bind(this), false);
+		if (null == this.DOMobject.parentNode) {
+			console.error('パレットサイズ変更エラー 指定要素の親要素が見つかりません。\nサイズ変更対象が見つからないためパレットのサイズは変更できません');
+		}
 	}
 
 	onMouseDownPalGroupSize(evt) {
@@ -167,13 +172,13 @@
 		this.startChangingSize(evt.targetTouches[0]);
 	}
 	startChangingSize(evt) {
-		let target = evt.target.parentNode;
+		let target			= this.DOMobject.parentNode;
 		this.startLeft		= parseInt(target.style.left);
 		this.startTop		= parseInt(target.style.top);
-		this.startWidth	= parseInt(target.style.width);
+		this.startWidth		= parseInt(target.style.width);
 		this.startHeight	= parseInt(target.style.height);
-		this.startDragX = evt.pageX;
-		this.startDragY = evt.pageY;
+		this.startDragX		= evt.pageX;
+		this.startDragY		= evt.pageY;
 	}
 
 	InputMovePalGroupSize(evt, touchevt) {
@@ -192,10 +197,10 @@
 			window.renderLoop.requestRenderFunc(this.renderInputMovePalGroupSize.bind(this, eleTarget, this.startLeft, this.startTop, this.startWidth + moveX, this.startHeight + moveY));
 	}
 	renderInputMovePalGroupSize(eleTarget, left, top, width, height) {
-		eleTarget.style.left = left + "px";
-		eleTarget.style.top = top + "px";
-		eleTarget.style.width = width + "px";
-		eleTarget.style.height = height + "px";
+		eleTarget.style.left	= left + "px";
+		eleTarget.style.top		= top + "px";
+		eleTarget.style.width	= width + "px";
+		eleTarget.style.height	= height + "px";
 	}
 
 	InputUpPalGroupSize(evt, touchevt) {

--- HtmlDrawApp/doc/Palette螳夂ｾｩFileFormat.txt	(nonexistent)
+++ HtmlDrawApp/doc/Palette螳夂ｾｩFileFormat.txt	(revision 51)
@@ -0,0 +1,60 @@
+パレット要素にドロップする Text file format
+
+File Types
+	Style		Style指定のみ
+	Action		Style + Animation
+
+Items
+	[Section]	[Data]				[Regex Key]		[Times]
+	Comment		Text				"Comment"		many times
+	Types		"Style"/"Action"	"Types"			only once
+	Description	Text				"Description"	only once
+	Rule		Text				"Rule"			only once
+	Keyframe	Text				"Keyframe"		only once
+	Picture		data scheme			"Picture"		only once
+
+
+Block
+	定義領域の前後を定型文字列で囲む
+
+	[<Regex Key> Start]
+	各種定義テキスト
+	[<Regex Key> End]
+
+	例：
+	[Types Start]
+	Style
+	[Types End]
+	[Description Start]
+	定義ファイルの内容説明文章
+	[Description End]
+
+
+Rule定義について
+	疑似要素は使えない
+	最初の "{" から "}" の内容を読みこむ
+
+	例
+	[Rule Start]
+	dummy {
+		border-radius: 50%;
+	}
+	[Rule End]
+
+
+Keyframe定義について
+	Types が Action の場合のみ有効
+
+	例
+	[Keyframe Start]
+	dummy {
+		animation: balloon 0.4s linear 0.5s 1;
+		transform-origin: 0 100%;
+	}
+	@keyframes balloon {
+		0% {transform: scaleX(0.0) scaleY(0.0) rotateZ(20deg);}
+		50% {transform: scaleX(0.5) scaleY(0.5) rotateZ(30deg);}
+		100% {transform: scaleX(1.0) scaleY(1.0) rotateZ(0deg);}
+	}
+	[Keyframe End]
+

--- HtmlDrawApp/doc/構成.txt	(revision 50)
+++ HtmlDrawApp/doc/構成.txt	(revision 51)
@@ -33,7 +33,9 @@
 					DispObj								user setting	default			visible		absolute	300
 					focusbar	フォーカス要素			default			default			visible		absolute	500
 		PalGroup				パレット要素 grouping	default			default			visible		absolute	1000
-			palbg				背景画像設定			drop file		default			visible		absolute	1100
+			palflex				ボタン表示領域			gray 50%		90% x 75%		動的		relative
+				palbg			ボタン配置				transparent		60px x 60px		visible		relative
+					palbutton	ドラッグ可能ボタン		picture			inherit			visible		absolute
 			paltxtcol			テキスト色設定			drop file		default			visible		absolute	1100
 			palaction			動き設定				drop file		default			visible		absolute	1100