Commit: 42 - takoyaki_umaaaaHideout (svn)

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

Commit MetaInfo

• Revision: 42 (tree)
• Time: 2016-12-06 02:58:58
• Author: takoyaki_umaaaa

Log Message

識別用borderの表示/非表示

Change Summary

• 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/DispObj.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/framearea.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/main.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.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/DispObj.js
• modified: HtmlDrawApp/HTMLDrawApp/js/framearea.js
• modified: HtmlDrawApp/HTMLDrawApp/js/main.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palette.js
• modified: HtmlDrawApp/HTMLDrawApp.marker.tss
• modified: HtmlDrawApp/HTMLDrawApp.tss

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 42)
@@ -1,4 +1,9 @@
-body {
+// Webviewの表示スタイル定義
+//
+// CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
+// ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
+
+body {
   /*スクロールとズームを有効にするにはこのコメントを解除します
   タッチ操作: 操作;
   */
@@ -13,6 +18,9 @@
 		 -khtml-user-select: none;
 		   -moz-user-select: none;
 				user-select: none;
+		font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
+		-webkit-font-smoothing: antialiased;
+		-webkit-overflow-scrolling: touch;
 	}
 
 	.buttonstyle {
@@ -51,7 +59,7 @@
 	#DispField{
 		display:block;
 		position:relative;
-		width:400px;	height:300px;
+		width:1000px;	height:500px;
 		border: none;
 		margin: 0;		padding: 0;
 		background-color: transparent;
@@ -64,7 +72,6 @@
 		display:block;
 		position: absolute;
 		width: 100%;	height: 100%;
-		border: 1px solid black;
 		margin: 0;		padding: 0;
 		background-color: white;
 		transform-style: inherit;
@@ -100,20 +107,53 @@
 		display: inline-block;
 		position: absolute;
 		left:0px; top:310px;
-		width: 195px;	/* (5+25+5) * 5 + (5+5) */
-		height: 55px;
+		width: 400px;	/* (5+25+5) * 5 + (5+5) */
+		height: 120px;
 		margin: 0px;		padding: 5px;
-		background-color: rgba(205,133,63,0.6);
-		border: 2px solid gray;
-		border-radius: 4px;
+		border: 1px solid transparent;
+		border-radius: 8px;
 		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
 	}
 	.pallegend {
 		background-color: transparent;
+		height: 30px;
 		font-weight: bold;
-		font-size: small;
+		font-size: 30px;
+		line-height: 30px;
+		color: gray;
 	}
+	.palgroup0 {
+		background-color: rgba(27, 158, 131, 0.6);
+		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
+	}
+	.palgroup1 {
+		background-color: rgba(154,145,140,0.6);
+		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
+	}
+	.palgroup2 {
+		background-color: rgba(156, 165, 55, 0.6);
+		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
+	}
 
+	.paldesc1,
+	.paldesc2 {
+		display: inline-block;
+		position: absolute;
+		width: 350px;	height: 110px;
+		margin:0;		padding:0;
+		line-height: 110px;
+		font-size: 110px;
+		font-weight: bold;
+		color: rgba(255, 255, 255, 0.3);
+	}
+	.paldesc1 {
+		left: -40px;	top: -20px;
+		text-align: left;
+	}
+	.paldesc2 {
+		right: -40px;	bottom: -60px;
+		text-align: right;
+	}
 
 
 	/* パレット要素の定義 */
@@ -122,21 +162,26 @@
 	.palact {
 		display: inline-block;
 		position: absolute;
-		width: 25px;	height: 25px;
-		border: 2px solid blue;
-		border-radius: 4px;
-		margin: 2px;
+		width: 50px;	height: 50px;
+		border-radius: 8px;
+		margin: 4px;	padding: 0;
+		text-align: center;
+		font-size: 45px;	line-height: 45px;
 	}
 	.palbg {
-		border: 2px solid black;
+		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);
 	}
 	.paltxtcol {
-		border: 2px solid blue;
-		text-align: center;
-		font-size: 100%;
+		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);
 	}
 	.palact {
-		border: 2px solid brown;
+		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);
 	}
 
 

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html	(revision 42)
@@ -3,7 +3,6 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta charset="utf-8" />
-    <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=10, minimum-scale=0.1, width=device-width, height=device-height">
     <title>HTMLDrawApp</title>
     <link href="css/default.css" rel="stylesheet" />
 </head>
@@ -20,149 +19,59 @@
 		<button type=button class="pal" data-objid="pal" data-palid="1" title="現在のパレット設定を保存します">設定保存</button>
 		<button type=button class="pal" data-objid="pal" data-palid="2" title="設定画面を表示します">設定Drop</button>
 		<button type=button class="pal" data-objid="pal" data-palid="3" title="アニメーションを停止します">アニメ停止</button>
-		<button type=button class="pal" data-objid="pal" data-palid="4" >button5</button>
+		<button type=button class="pal" data-objid="pal" data-palid="4" >枠表示</button>
 		<a href="#" id="save" download="DragDraw.dd" title="DragDraw.ddという名前でダウンロードフォルダに保存します">画像保存</a><br />
 		<a href="#apparea">停止</a>
 
+		<style id="styledispobj">
+			.DispObj {
+				border: none;
+			}
+		</style>
 		<!-- Palette -->
 		<style id="stylepalbg">
-			.palbg0 {
-				background-image: url(dummy.png);
-			}
-
-			.palbg1 {
-				background-image: url(dummy.png);
-			}
-
-			.palbg2 {
-				background-image: url(dummy.png);
-			}
-
-			.palbg3 {
-				background-image: url(dummy.png);
-			}
-
-			.palbg4 {
-				background-image: url(dummy.png);
-			}
+			.palbg0 { background-image: url(dummy.png); }
+			.palbg1 { background-image: url(dummy.png); }
+			.palbg2 { background-image: url(dummy.png); }
+			.palbg3 { background-image: url(dummy.png); }
+			.palbg4 { background-image: url(dummy.png); }
 		</style>
 		<style id="stylepaltxtcol">
-			.paltxtcol0 {
-				color: black;
-			}
-
-			.paltxtcol1 {
-				color: red;
-			}
-
-			.paltxtcol2 {
-				color: blue;
-			}
-
-			.paltxtcol3 {
-				color: green;
-			}
-
-			.paltxtcol4 {
-				color: brown;
-			}
+			.paltxtcol0 { color: black; }
+			.paltxtcol1 { color: red; }
+			.paltxtcol2 { color: blue; }
+			.paltxtcol3 { color: green; }
+			.paltxtcol4 { color: brown; }
 		</style>
 		<style id="stylepalact">
-			/* animation指定，keyframe指定, … と交互に設定されている想定 */
-			/* palette css と keyframe は必ず1対1．例えkeyframeが使いまわせたとしても。 */
-			.palact0 {
-				animation: animeY1 0.5s ease-in 0.3s 1 normal;
-			}
-
+			.palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
 			@keyframes animeY1 {
-				0% {
-					transform: translateY(-60px) translateX(-30px);
-				}
-
-				10% {
-					transform: translateY(20px) translateX(30px);
-				}
-
-				20% {
-					transform: translateY(-40px) translateX(-20px);
-				}
-
-				30% {
-					transform: translateY(50px) translateX(-10px);
-				}
-
-				40% {
-					transform: translateY(-40px) translateX(20px);
-				}
-
-				50% {
-					transform: translateY(30px) translateX(-15px);
-				}
-
-				60% {
-					transform: translateY(-25px) translateX(0px);
-				}
-
-				70% {
-					transform: translateY(15px) translateX(-15px);
-				}
-
-				80% {
-					transform: translateY(-10px) translateX(10px);
-				}
-
-				90% {
-					transform: translateY(0px) translateX(-5px);
-				}
-
-				100% {
-					transform: translateY(0px) translateX(0px);
-				}
+				0% { transform: translateY(-60px) translateX(-30px); }
+				10% { transform: translateY(20px) translateX(30px); }
+				20% { transform: translateY(-40px) translateX(-20px); }
+				30% { transform: translateY(50px) translateX(-10px); }
+				40% { transform: translateY(-40px) translateX(20px); }
+				50% { transform: translateY(30px) translateX(-15px); }
+				60% { transform: translateY(-25px) translateX(0px); }
+				70% { transform: translateY(15px) translateX(-15px); }
+				80% { transform: translateY(-10px) translateX(10px); }
+				90% { transform: translateY(0px) translateX(-5px); }
+				100% { transform: translateY(0px) translateX(0px); }
 			}
 
-			.palact1 {
-				animation: animeact1 2s ease-in 0.3s 1 normal;
-			}
-
-			@keyframes animeact1 {
-				to {
-					color: black;
-				}
-			}
-
-			.palact2 {
-				animation: animeact2 2s ease-in 0.3s 1 normal;
-			}
-
-			@keyframes animeact2 {
-				to {
-					color: black;
-				}
-			}
-
-			.palact3 {
-				animation: animeact3 2s ease-in 0.3s 1 normal;
-			}
-
-			@keyframes animeact3 {
-				to {
-					color: black;
-				}
-			}
-
-			.palact4 {
-				animation: animeact4 2s ease-in 0.3s 1 normal;
-			}
-
-			@keyframes animeact4 {
-				to {
-					color: black;
-				}
-			}
+			.palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
+			@keyframes animeact1 { to { color: black; } }
+			.palact2 { animation: animeact2 2s ease-in 0.3s 1 normal; }
+			@keyframes animeact2 { to { color: black; } }
+			.palact3 { animation: animeact3 2s ease-in 0.3s 1 normal; }
+			@keyframes animeact3 { to { color: black; } }
+			.palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
+			@keyframes animeact4 { to { color: black; } }
 		</style>
 
-		<fieldset class="palgroup" data-objid="palgroup0"  title="背景の色や画像を設定するパレットです">
+		<fieldset class="palgroup palgroup0" data-objid="palgroup0"  title="背景の色や画像を設定するパレットです">
 			<legend class="pallegend"> Background Palette </legend>
+			<span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
 			<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>
@@ -171,8 +80,9 @@
 		</fieldset>
 		<br />
 
-		<fieldset class="palgroup" data-objid="palgroup1" title="テキストの色を設定するパレットです">
+		<fieldset class="palgroup palgroup1" data-objid="palgroup1" title="テキストの色を設定するパレットです">
 			<legend class="pallegend"> Text Color Palette </legend>
+			<span class="paldesc1">外観</span><span class="paldesc2">見た</span>
 			<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>
@@ -182,8 +92,9 @@
 
 		<br />
 
-		<fieldset class="palgroup" data-objid="palgroup2" title="動きを設定するパレットです">
+		<fieldset class="palgroup palgroup2" data-objid="palgroup2" title="動きを設定するパレットです">
 			<legend class="pallegend"> Action Palette <span id="btnpauseanim" class="buttonstyle" title="要素の動きを一時的に停止します">Ⅱ</span></legend>
+			<span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
 			<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>

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js	(revision 42)
@@ -188,7 +188,7 @@
 		return new rectData(0, 0, destW, destH);
 	}
 	renderCreate() {
-		this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
+//		this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
 		if (null != this.text) this.DOMobject.innerHTML = this.text;
 //		this.DOMobject.style.position = "absolute"; // DispObj CSS classで指定
 

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/framearea.js	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/framearea.js	(revision 42)
@@ -34,8 +34,15 @@
 			console.error("【DisplayField】 initialize()  DOMobject is null.");
 			return false;
 		}
+		if (this.dom) {
+			console.error("【DisplayField】 initialize()  親要素が見つかりません");
+			return false;
+		}
+
 		this.DOMobject = dom;
 		this.DOMobject.classList.add('FrameArea');
+		this.DOMobject.dataset.width = this.DOMobject.parentNode.style.width;
+		this.DOMobject.dataset.height = this.DOMobject.parentNode.style.height;
 	}
 
 

Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 42)
@@ -26,8 +26,8 @@
 		// 背景設定パレット
 		this.DOMpalbg = document.getElementsByClassName('palbg');
 		for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
-			this.DOMpalbg[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
-			this.DOMpalbg[cnt].style.top = 18 + 'px';
+			this.DOMpalbg[cnt].style.left = 10 + 70 * cnt + 'px';
+			this.DOMpalbg[cnt].style.top = 40 + 'px';
 			this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -37,8 +37,8 @@
 		// テキストカラーパレット
 		this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
 		for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
-			this.DOMpaltxtcol[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
-			this.DOMpaltxtcol[cnt].style.top = 18 + 'px';
+			this.DOMpaltxtcol[cnt].style.left = 10 + 70 * cnt + 'px';
+			this.DOMpaltxtcol[cnt].style.top = 40 + 'px';
 			this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -48,8 +48,8 @@
 		// アクションパレット
 		this.DOMpalact = document.getElementsByClassName('palact');
 		for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
-			this.DOMpalact[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
-			this.DOMpalact[cnt].style.top = 18 + 'px';
+			this.DOMpalact[cnt].style.left = 10 + 70 * cnt + 'px';
+			this.DOMpalact[cnt].style.top = 40 + 'px';
 			this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);

--- HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 42)
@@ -1,4 +1,9 @@
-body {
+// Webviewの表示スタイル定義
+//
+// CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
+// ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
+
+body {
   /*スクロールとズームを有効にするにはこのコメントを解除します
   タッチ操作: 操作;
   */
@@ -13,6 +18,9 @@
 		 -khtml-user-select: none;
 		   -moz-user-select: none;
 				user-select: none;
+		font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
+		-webkit-font-smoothing: antialiased;
+		-webkit-overflow-scrolling: touch;
 	}
 
 	.buttonstyle {
@@ -51,7 +59,7 @@
 	#DispField{
 		display:block;
 		position:relative;
-		width:400px;	height:300px;
+		width:1000px;	height:500px;
 		border: none;
 		margin: 0;		padding: 0;
 		background-color: transparent;
@@ -64,7 +72,6 @@
 		display:block;
 		position: absolute;
 		width: 100%;	height: 100%;
-		border: 1px solid black;
 		margin: 0;		padding: 0;
 		background-color: white;
 		transform-style: inherit;
@@ -100,20 +107,53 @@
 		display: inline-block;
 		position: absolute;
 		left:0px; top:310px;
-		width: 195px;	/* (5+25+5) * 5 + (5+5) */
-		height: 55px;
+		width: 400px;	/* (5+25+5) * 5 + (5+5) */
+		height: 120px;
 		margin: 0px;		padding: 5px;
-		background-color: rgba(205,133,63,0.6);
-		border: 2px solid gray;
-		border-radius: 4px;
+		border: 1px solid transparent;
+		border-radius: 8px;
 		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
 	}
 	.pallegend {
 		background-color: transparent;
+		height: 30px;
 		font-weight: bold;
-		font-size: small;
+		font-size: 30px;
+		line-height: 30px;
+		color: gray;
 	}
+	.palgroup0 {
+		background-color: rgba(27, 158, 131, 0.6);
+		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
+	}
+	.palgroup1 {
+		background-color: rgba(154,145,140,0.6);
+		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
+	}
+	.palgroup2 {
+		background-color: rgba(156, 165, 55, 0.6);
+		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
+	}
 
+	.paldesc1,
+	.paldesc2 {
+		display: inline-block;
+		position: absolute;
+		width: 350px;	height: 110px;
+		margin:0;		padding:0;
+		line-height: 110px;
+		font-size: 110px;
+		font-weight: bold;
+		color: rgba(255, 255, 255, 0.3);
+	}
+	.paldesc1 {
+		left: -40px;	top: -20px;
+		text-align: left;
+	}
+	.paldesc2 {
+		right: -40px;	bottom: -60px;
+		text-align: right;
+	}
 
 
 	/* パレット要素の定義 */
@@ -122,21 +162,26 @@
 	.palact {
 		display: inline-block;
 		position: absolute;
-		width: 25px;	height: 25px;
-		border: 2px solid blue;
-		border-radius: 4px;
-		margin: 2px;
+		width: 50px;	height: 50px;
+		border-radius: 8px;
+		margin: 4px;	padding: 0;
+		text-align: center;
+		font-size: 45px;	line-height: 45px;
 	}
 	.palbg {
-		border: 2px solid black;
+		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);
 	}
 	.paltxtcol {
-		border: 2px solid blue;
-		text-align: center;
-		font-size: 100%;
+		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);
 	}
 	.palact {
-		border: 2px solid brown;
+		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);
 	}
 
 

--- HtmlDrawApp/HTMLDrawApp/index.html	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/index.html	(revision 42)
@@ -3,7 +3,6 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta charset="utf-8" />
-    <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=10, minimum-scale=0.1, width=device-width, height=device-height">
     <title>HTMLDrawApp</title>
     <link href="css/default.css" rel="stylesheet" />
 </head>
@@ -20,149 +19,59 @@
 		<button type=button class="pal" data-objid="pal" data-palid="1" title="現在のパレット設定を保存します">設定保存</button>
 		<button type=button class="pal" data-objid="pal" data-palid="2" title="設定画面を表示します">設定Drop</button>
 		<button type=button class="pal" data-objid="pal" data-palid="3" title="アニメーションを停止します">アニメ停止</button>
-		<button type=button class="pal" data-objid="pal" data-palid="4" >button5</button>
+		<button type=button class="pal" data-objid="pal" data-palid="4" >枠表示</button>
 		<a href="#" id="save" download="DragDraw.dd" title="DragDraw.ddという名前でダウンロードフォルダに保存します">画像保存</a><br />
 		<a href="#apparea">停止</a>
 
+		<style id="styledispobj">
+			.DispObj {
+				border: none;
+			}
+		</style>
 		<!-- Palette -->
 		<style id="stylepalbg">
-			.palbg0 {
-				background-image: url(dummy.png);
-			}
-
-			.palbg1 {
-				background-image: url(dummy.png);
-			}
-
-			.palbg2 {
-				background-image: url(dummy.png);
-			}
-
-			.palbg3 {
-				background-image: url(dummy.png);
-			}
-
-			.palbg4 {
-				background-image: url(dummy.png);
-			}
+			.palbg0 { background-image: url(dummy.png); }
+			.palbg1 { background-image: url(dummy.png); }
+			.palbg2 { background-image: url(dummy.png); }
+			.palbg3 { background-image: url(dummy.png); }
+			.palbg4 { background-image: url(dummy.png); }
 		</style>
 		<style id="stylepaltxtcol">
-			.paltxtcol0 {
-				color: black;
-			}
-
-			.paltxtcol1 {
-				color: red;
-			}
-
-			.paltxtcol2 {
-				color: blue;
-			}
-
-			.paltxtcol3 {
-				color: green;
-			}
-
-			.paltxtcol4 {
-				color: brown;
-			}
+			.paltxtcol0 { color: black; }
+			.paltxtcol1 { color: red; }
+			.paltxtcol2 { color: blue; }
+			.paltxtcol3 { color: green; }
+			.paltxtcol4 { color: brown; }
 		</style>
 		<style id="stylepalact">
-			/* animation指定，keyframe指定, … と交互に設定されている想定 */
-			/* palette css と keyframe は必ず1対1．例えkeyframeが使いまわせたとしても。 */
-			.palact0 {
-				animation: animeY1 0.5s ease-in 0.3s 1 normal;
-			}
-
+			.palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
 			@keyframes animeY1 {
-				0% {
-					transform: translateY(-60px) translateX(-30px);
-				}
-
-				10% {
-					transform: translateY(20px) translateX(30px);
-				}
-
-				20% {
-					transform: translateY(-40px) translateX(-20px);
-				}
-
-				30% {
-					transform: translateY(50px) translateX(-10px);
-				}
-
-				40% {
-					transform: translateY(-40px) translateX(20px);
-				}
-
-				50% {
-					transform: translateY(30px) translateX(-15px);
-				}
-
-				60% {
-					transform: translateY(-25px) translateX(0px);
-				}
-
-				70% {
-					transform: translateY(15px) translateX(-15px);
-				}
-
-				80% {
-					transform: translateY(-10px) translateX(10px);
-				}
-
-				90% {
-					transform: translateY(0px) translateX(-5px);
-				}
-
-				100% {
-					transform: translateY(0px) translateX(0px);
-				}
+				0% { transform: translateY(-60px) translateX(-30px); }
+				10% { transform: translateY(20px) translateX(30px); }
+				20% { transform: translateY(-40px) translateX(-20px); }
+				30% { transform: translateY(50px) translateX(-10px); }
+				40% { transform: translateY(-40px) translateX(20px); }
+				50% { transform: translateY(30px) translateX(-15px); }
+				60% { transform: translateY(-25px) translateX(0px); }
+				70% { transform: translateY(15px) translateX(-15px); }
+				80% { transform: translateY(-10px) translateX(10px); }
+				90% { transform: translateY(0px) translateX(-5px); }
+				100% { transform: translateY(0px) translateX(0px); }
 			}
 
-			.palact1 {
-				animation: animeact1 2s ease-in 0.3s 1 normal;
-			}
-
-			@keyframes animeact1 {
-				to {
-					color: black;
-				}
-			}
-
-			.palact2 {
-				animation: animeact2 2s ease-in 0.3s 1 normal;
-			}
-
-			@keyframes animeact2 {
-				to {
-					color: black;
-				}
-			}
-
-			.palact3 {
-				animation: animeact3 2s ease-in 0.3s 1 normal;
-			}
-
-			@keyframes animeact3 {
-				to {
-					color: black;
-				}
-			}
-
-			.palact4 {
-				animation: animeact4 2s ease-in 0.3s 1 normal;
-			}
-
-			@keyframes animeact4 {
-				to {
-					color: black;
-				}
-			}
+			.palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
+			@keyframes animeact1 { to { color: black; } }
+			.palact2 { animation: animeact2 2s ease-in 0.3s 1 normal; }
+			@keyframes animeact2 { to { color: black; } }
+			.palact3 { animation: animeact3 2s ease-in 0.3s 1 normal; }
+			@keyframes animeact3 { to { color: black; } }
+			.palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
+			@keyframes animeact4 { to { color: black; } }
 		</style>
 
-		<fieldset class="palgroup" data-objid="palgroup0"  title="背景の色や画像を設定するパレットです">
+		<fieldset class="palgroup palgroup0" data-objid="palgroup0"  title="背景の色や画像を設定するパレットです">
 			<legend class="pallegend"> Background Palette </legend>
+			<span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
 			<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>
@@ -171,8 +80,9 @@
 		</fieldset>
 		<br />
 
-		<fieldset class="palgroup" data-objid="palgroup1" title="テキストの色を設定するパレットです">
+		<fieldset class="palgroup palgroup1" data-objid="palgroup1" title="テキストの色を設定するパレットです">
 			<legend class="pallegend"> Text Color Palette </legend>
+			<span class="paldesc1">外観</span><span class="paldesc2">見た</span>
 			<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>
@@ -182,8 +92,9 @@
 
 		<br />
 
-		<fieldset class="palgroup" data-objid="palgroup2" title="動きを設定するパレットです">
+		<fieldset class="palgroup palgroup2" data-objid="palgroup2" title="動きを設定するパレットです">
 			<legend class="pallegend"> Action Palette <span id="btnpauseanim" class="buttonstyle" title="要素の動きを一時的に停止します">Ⅱ</span></legend>
+			<span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
 			<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>

--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js	(revision 42)
@@ -188,7 +188,7 @@
 		return new rectData(0, 0, destW, destH);
 	}
 	renderCreate() {
-		this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
+//		this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
 		if (null != this.text) this.DOMobject.innerHTML = this.text;
 //		this.DOMobject.style.position = "absolute"; // DispObj CSS classで指定
 

--- HtmlDrawApp/HTMLDrawApp/js/framearea.js	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/js/framearea.js	(revision 42)
@@ -34,8 +34,15 @@
 			console.error("【DisplayField】 initialize()  DOMobject is null.");
 			return false;
 		}
+		if (this.dom) {
+			console.error("【DisplayField】 initialize()  親要素が見つかりません");
+			return false;
+		}
+
 		this.DOMobject = dom;
 		this.DOMobject.classList.add('FrameArea');
+		this.DOMobject.dataset.width = this.DOMobject.parentNode.style.width;
+		this.DOMobject.dataset.height = this.DOMobject.parentNode.style.height;
 	}
 
 

--- HtmlDrawApp/HTMLDrawApp/js/main.js	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js	(revision 42)
@@ -257,6 +257,13 @@
 		// FrameArea取得
 		let frameDom = document.getElementById("FrameArea");
 		window.frameArea.initialize(frameDom);
+		// FrameArea.datasetからキャンバスの幅高さを取得
+		let width = window.frameArea.DOMobject.dataset.width;
+		let height = window.frameArea.DOMobject.dataset.height;
+		if (0 < parseInt(width))
+			window.displayField.DOMobject.style.width = parseInt(width) + px;
+		if (0 < parseInt(height))
+			window.displayField.DOMobject.style.height = parseInt(height) + px;
 
 		// 4. DOM treeに合わせて DispObj instanceを作成
 		window.ObjIDMgr.adjustEnvToDOM();
@@ -286,7 +293,25 @@
 				window.ObjIDMgr.toggleClassToAllObj('PauseAnimation');
 				window.CSSPalette.toggleClassToActionPalettes('PauseAnimation');
 				break;
-			case 4:
+			case 4:	// Show/Hide element borderline
+				{
+					let setStr = '';
+					let nowSetting = window.frameArea.DOMobject.style.border;
+					if ("" == nowSetting) {
+						setStr = "1px solid black";
+					}
+					else {
+						setStr = "";
+					}
+					window.frameArea.DOMobject.style.border = setStr;
+
+					let dispobjRuleBefore = ".DispObj { border: "
+					let dispobjRuleAfter = ";}";
+					let elestyle = document.getElementById('styledispobj');
+					elestyle.sheet.removeRule(0);
+					elestyle.sheet.insertRule(dispobjRuleBefore + setStr + dispobjRuleAfter, 0);
+				}
+				break;
 			case 5:
 				let color = parseInt(evt.target.dataset.value);
 				setBkColorFocusedObject(color);

--- HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 41)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 42)
@@ -26,8 +26,8 @@
 		// 背景設定パレット
 		this.DOMpalbg = document.getElementsByClassName('palbg');
 		for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
-			this.DOMpalbg[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
-			this.DOMpalbg[cnt].style.top = 18 + 'px';
+			this.DOMpalbg[cnt].style.left = 10 + 70 * cnt + 'px';
+			this.DOMpalbg[cnt].style.top = 40 + 'px';
 			this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -37,8 +37,8 @@
 		// テキストカラーパレット
 		this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
 		for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
-			this.DOMpaltxtcol[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
-			this.DOMpaltxtcol[cnt].style.top = 18 + 'px';
+			this.DOMpaltxtcol[cnt].style.left = 10 + 70 * cnt + 'px';
+			this.DOMpaltxtcol[cnt].style.top = 40 + 'px';
 			this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -48,8 +48,8 @@
 		// アクションパレット
 		this.DOMpalact = document.getElementsByClassName('palact');
 		for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
-			this.DOMpalact[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
-			this.DOMpalact[cnt].style.top = 18 + 'px';
+			this.DOMpalact[cnt].style.left = 10 + 70 * cnt + 'px';
+			this.DOMpalact[cnt].style.top = 40 + 'px';
 			this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);