カテゴリー別アーカイブ: ものづくり筆耕ブログ

ものづくりに関する想い

自由研究のはじめ8

動きのある電子絵日記

絵日記と言えば、上下に絵と文章が分かれて表示されることがほとんどですが、前回、絵と文章を時分割にして画面いっぱいに表示する例を挙げました。

今回は動きが全開となって、1秒ごとに絵や文字が切り替わる例を示します。容易に作ることができるアナログ時計に、ちょっぴり高度な技を駆使して、ロシア民謡のBGMを流しながら、家族の一週間の行動を組み合わせて描画してみました。

表現の構成

まず、デジタル時計の背景を決めます。かつて、札幌市時計台をバックグラウンドにしたことがありましたが、今回は①から⑫の数字付き時計文字盤としました。

後にアナログないしハイブリッド時計への拡張ができるように配慮しています。

文字盤の上部に年月日と曜日、下部に時分秒が表示されます。これでデジタル時計は動作することでしょう。

すっぽりと開いた中央部に、左から家族の一週間の行動、象徴する絵、行動のひとことコメントを表示します。

デジタル時計が一秒ごとに表示されるので、家族の一週間の行動もこれに同期して切り替えます。

動きを制御する

動きはbody要素のonLoad属性で制御関数(timerX)を呼び出します。この関数は最後でsetTimeoutによって1秒間隔で再帰呼び出されます。

日付、時分秒はDate関数により取得します。システム内蔵のサービス関数はうるう年、月の大小、年の繰り上がりなどをすべてサポートします。

その後、document.getElementByIdにより、細かな描画パラメータを設定し、曜日ごとの行動を表示します。

BGMの終了イベントを検出した後は、家族一週間行動の切り替えを終了し、本日の行動を固定表示し、通常のデジタル時計として動作します。

デジタル時計と家族の一週間

ブラウザChrome、opera、FireFox、InternetExplorer(Ver11)で動作します。

デジタル時計と家族の一週間
2016/07/02(S)
00:00:00
自由研究 電子絵日記
©TacM,2017 Ver0.02
デジタル時計と家族の一週間
作:五年三組 東京良太
後援:東京一郎
   東京やよい
月曜日の行動
ワンちゃんと散歩
 ロシア民謡『一週間』

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>デジタル時計と家族の一週間</title>
</head>
<body onLoad='timerX()'>
<DIV style="position:relative; background-color:lavenderblush; width:540px; height:540px; border: 0px green solid;">
<img id="pic1" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/Clock12.png" style="position:absolute; left:0px; top:0px; width:540px; height:540px; opacity:0.8">
<div id="date" style="position:absolute; left:85px; top:110px; font-size:48px; color:darkmagenta">2016/07/02(S)</div>
<div id="time" style="position:absolute; left:120px; top:370px; font-size:64px; color:navy">00:00:00</div>
<img id="eni0" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/Summer296.png" style="position:absolute; left:170px; top:180px; width:200px; height:200px">
<Div id="ttl1" style="position:absolute; left:5px; top:0px; font-size:22px; color:coral">自由研究<span style="font-size:10px; color:navy"> 電子絵日記<BR>&copy;TacM,2017 Ver0.02</span></Div>
<Div id="ttl2" style="position:absolute; left:395px; top:0px; font-size:16px; font-weight:bold; color:darkgreen; width:150px; height:50px; line-height:1.3em">デジタル時計と家族の一週間</Div>
<Div id="ttl3" style="position:absolute; left:5px; top:515px; font-size:16px; color:navy">作:五年三組 東京良太</Div>
<Div id="ttl4" style="position:absolute; left:420px; top:495px; font-size:16px; color:navy"; width:100px; height:34px;>後援:東京一郎<BR>&emsp;&emsp;&ensp;東京やよい</Div>
<Div id="ttl5" style="position:absolute; left:60px; top:260px; font-size:16px; color:maroon; font-weight:bold">月曜日の行動</Div>
<Div id="ttl6" style="position:absolute; left:380px; top:260px; font-size:16px; color:maroon; font-weight:bold; width:90px; height:36px">ワンちゃんと散歩</Div>
</DIV>
<Div><audio id="song0" preload="auto" autoplay controls controlsList="nodownload" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/WeekOne.mp3"></audio> ロシア民謡『一週間』</Div>
<script type="text/javascript" charset="Shift_JIS">
const fg=[["http://aidesign.lolipop.jp/wp-content/uploads/2014/07/0-super.png", 170, 180, 200, 116, "スーパーに買い物"],    // 0:592*344 200*116
          ["http://aidesign.lolipop.jp/wp-content/uploads/2014/07/1-walking.jpg", 170, 180, 200, 145, "ワンちゃんと散歩"],  // 1:369*268 200*145
          ["http://aidesign.lolipop.jp/wp-content/uploads/2014/07/2-haisha.jpg", 170, 180, 176, 200, "歯医者さんで治療"],   // 2:264*300 176*200
          ["http://aidesign.lolipop.jp/wp-content/uploads/2017/08/Summer296.png", 170, 180, 200, 200, "夏祭りの準備"],      // 3:296*296 200*200
          ["http://aidesign.lolipop.jp/wp-content/uploads/2014/07/4-englishschool.png", 170, 180, 161, 200, "英会話の勉強"],// 4:213*264 161*200
          ["http://aidesign.lolipop.jp/wp-content/uploads/2017/08/Summer330.png", 170, 180, 200, 200, "納涼花火大会に参加"],// 5:330*330 200*200
          ["http://aidesign.lolipop.jp/wp-content/uploads/2014/07/6-ittech.png", 170, 180, 200, 102, "IT教室の講師"]];      // 6:349*178 200*102
var count = 0;                                                      //秒カウンター
var eventFlag = 0;                                                  //BGM終了フラッグ
var weekDayList = ["日", "月", "火", "水", "木", "金", "土"];
var evnt = document.getElementById('song0');                        //音声オブジェクト
evnt.play();                                                        //鳴動開始
evnt.addEventListener('ended', function () {eventFlag=1;}, false);  //再生完了を知らせる

function timerX(){                                                  //ロード時と定期的に起動する関数
  var j = (count++) % 7;                                            //7で一巡
  var nowTime = new Date();                                         //日付取得
  var sec = nowTime.getSeconds();                                   //秒
  var min = nowTime.getMinutes();hour = nowTime.getHours();         //分
  var month = letter2( nowTime.getMonth() + 1 );                    //月
  var year = nowTime.getFullYear();                                 //西暦年
  var wDay = nowTime.getDay();                                      //曜日
  var weekDay = weekDayList[wDay];                                  //曜日名
  document.getElementById("date").innerHTML = year+"/"+month+"/"+letter2(nowTime.getDate())+"("+weekDay+")";
  document.getElementById("time").innerHTML = letter2(hour)+":"+letter2(min)+":"+letter2(sec);

  if(eventFlag) j = wDay;                                                       //BGM再生終了ならば本日のデータ
  document.getElementById("eni0").style.left   = fg[j][1];                      //表示位置x
  document.getElementById("eni0").style.right  = fg[j][2];                      //表示位置y
  document.getElementById("eni0").style.width  = fg[j][3];                      //表示サイズ幅
  document.getElementById("eni0").style.height = fg[j][4];                      //表示サイズ高さ
  document.getElementById("eni0").src          = fg[j][0];                      //行動画像
  document.getElementById("ttl5").innerHTML    = weekDayList[j]+"曜日の行動";   //曜日の行動
  document.getElementById("ttl6").innerHTML    = fg[j][5];                      //行動のひとことコメント
  setTimeout('timerX()', 1000);                                                 //1秒起動
}
function letter2(num) {return ('0' + num ).slice(-2);}          //1桁の数字の先頭に0を付加する
</script>
</body>
</html>

サンプルコードの解説

サンプルコードの解説はソースコードのコメントを参照ください。

考察

テレビのドキュメンタリーでは、長期的に膨大な量の取材や撮影のうち、放送される映像はごく一部です。

この電子絵日記の成果物はサンプルコードや動作結果ですが、試行錯誤の後に決めた最適値などは最後の値が残っているだけです。

テレビ報道の作成に事よせて、コンピューターソフトウェアの設計・製造の地道な行動を評価して欲しいことをアピールします。

次回の予定

動きのある絵日記は小休止します。

 

番号付きリストの悩み

OrderedList

番号付きリストの表示例

箇条書きや事柄の名称において、番号付きリスト(OrderedList)を表示したい時があります。

リストの前に大文字や小文字のアルファベット、算用数字、ローマ数字を付加する機能は、<ol>と<li>要素で実現可能ですが丸囲み番号はサポートされていません。

そこで白抜き番号で1ずつ繰り上がる連番号付きリストに挑戦しましたが、意外と手こずりましたので備忘録として残します。

当初のコード

<style type="text/css">
ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}
li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: pink;
  color: mediumblue;
  display: block;
  float: left;
  line-height: 25px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}
</style>

<div style="padding: 10px 5px 10px 20px; color: navy; background-color: lightyellow; width: 580px; border-radius: 10px; border: 1px solid blueviolet;">
<ol>
  <li>2行、記事が読み込まれるときに動作する。</li>
  <li>3行、重ね書きの基底を宣言する。</li>
  <li>4行、日記の原稿を表示する。id属性で画像に名前を付け、後でプロパティの値を変更できるようにする。</li>
  <li>5~8行、日記本文を指定する。</li>
  <li>9行、ラジオ体操の画像を表示する。</li>
  <li>10行、虫取りの画像を表示する。</li>
  <li>11行、日記作成の感想文を示す。</li>
  <li>12行、コピーライトと絵番号を表示する準備をしておく。</li>
  <li>14行、「俵はゴロゴロ」のBGMを読み込んで鳴動する。</li>
  <li>17行、画像を切り替えるためのテーブル。</li>
</ol>
</div>

問題点

上記のコードは、サイトを検索して作りました。ローカル環境では期待した動作になりましたが、リモート環境での問題点は、上図の赤矢印で示すように、同一ページに指定されたすべての番号付きリストに、番号が振られてしまうことです。

ウィジェット欄のみならず、ブログのヘッダー欄にもやたら番号が付加されます。ホームページやブログの制御ソフトに手を加えることはできませんので、掲載する記事を適切に作り上げなければなりません。

改良サンプルコード

<style type="text/css">
ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}
.rank li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: pink;
  color: mediumblue;
  display: block;
  float: left;
  line-height: 25px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}
</style>
<div style="padding: 10px 5px 10px 20px; color: navy; background-color: lightyellow; width: 580px; border-radius: 10px; border: 1px solid blueviolet;">
<ol class="rank">
  <li>2行、記事が読み込まれるときに動作する。</li>
  <li>3行、重ね書きの基底を宣言する。</li>
  <li>4行、日記の原稿を表示する。id属性で画像に名前を付け、後でプロパティの値を変更できるようにする。</li>
  <li>5~8行、日記本文を指定する。</li>
  <li>9行、ラジオ体操の画像を表示する。</li>
  <li>10行、虫取りの画像を表示する。</li>
  <li>11行、日記作成の感想文を示す。</li>
  <li>12行、コピーライトと絵番号を表示する準備をしておく。</li>
  <li>14行、「俵はゴロゴロ」のBGMを読み込んで鳴動する。</li>
  <li>17行、画像を切り替えるためのテーブル。</li>
</ol>
</div>

動作例

  1. 2行、記事が読み込まれるときに動作する。
  2. 3行、重ね書きの基底を宣言する。
  3. 4行、日記の原稿を表示する。id属性で画像に名前を付け、後でプロパティの値を変更できるようにする。
  4. 5~8行、日記本文を指定する。
  5. 9行、ラジオ体操の画像を表示する。
  6. 10行、虫取りの画像を表示する。
  7. 11行、日記作成の感想文を示す。
  8. 12行、コピーライトと絵番号を表示する準備をしておく。
  9. 14行、「俵はゴロゴロ」のBGMを読み込んで鳴動する。
  10. 17行、画像を切り替えるためのテーブル。

 

上記の動作例だけでなく、ウィジェット欄の「最近の投稿」をご覧ください。正しい表示になっていることが確認できます。

考えをめぐらした点

li要素のbefore疑似要素において、要素名を定義してdiv要素などで参照するとき、class属性でリンクを特定化して、他のリストへの波及を避けるようにします。これで、投稿記事以外の番号付きリストへの影響を取り除くことができました。

番号付きリストの利点

番号付きリストの利点は連番号を一気に割り振ってくれる点にあります。また、3行目のように長い項目名の場合は、折り返しの次の行は最初の行に揃えてくれるので見やすい表示になることです。

 

自由研究のはじめ7

自由研究真っ盛り

夏休みも残り少なくなり、夏休みのまとめに入る時期です。この記事は自由研究の決定版ではなく、電子絵日記を作るためのお手伝いをしています。決定版は教材販売会社に譲ります。

夏休みの課題として電子絵日記を作っても、提出や発表の手段がないと宝の持ち腐れになります。

世の中がインターネットの波に違和感なく溶け込んでいるときに、教育現場のサポート態勢が貧弱であれば残念です。近隣諸国に後れを取ることになります。

今回は、HTMLコードに動きを加えるために、少し多めのJavaScriptコードが追加されています。

JavaScriptコードについて

HTMLの仕様が整備されて、表現方法が多彩になりました。文字を初めに色、フォント、音、絵による表現が加わりました。HTMLだけでは動きに対応できません。

インターネットには即時性があり、動きをサポートするのがJavaScriptです。これから動きのある絵日記に挑戦します。

重要な技

動きのある記事にする簡単な方法は、あらかじめ複数の静的な表現を用意しておいて、適切なタイミングで切り替えて疑似動的表現を実現します。そのための重要な技を挙げます。今回実現したdiv要素の属性-プロパティ-値について解説します。



  1. style-position-relative、この指定の後にくる画像やテキストが重ね書きになり、基底の始まりであることを示す。
  2. opacity、透過率を示す。同一領域内でopacityが複数ある場合、1または1に近い部分が有効になる。表示する部分のopacityを1に、非表示にする部分のopacityを0にする。既存の表示を残したい場合は、opacityの値を0から1の間の値を指定する。
  3. style-position-absolute、style-position-relativeで示した箇所を基底に、表示する位置をleft, topで指定する。
  4. left、topで表示する位置を指定するので、重ね書きができる。

動きのある絵日記

ブラウザChrome、opera、FireFox、InternetExplorer(Ver11)で動作します。

 八月十五日 火曜日    くもり
       五年二組 やまだじろう
今日は終戦記念日しゅうせんきねんびです。約八十年前に太平洋戦争が起き、昭和二十年八月十五日に終結した記念の日です。この時期、高校野球全国大会の話題で盛り上がります。会社が夏休みとなり遊園地は親子連れでにぎやかでした。
《感想》
夏休みの自由研究の課題として電子絵日記を作るために、お父さんとふたりで2週間かけてパソコンやホームページのことを調べました。お父さんから著作権ちょさくけんのことを教えてもらい、著作権フリー画像と著作権保護期間終了童謡をダウンロードしました。

サンプルコード

<html>
<body onload="display();">
<DIV style="position:relative; width:366px; height:518px; border:1px green solid;">
<img id="w0" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki-90.png" style="position:absolute; left:2px; top:2px; width:364px; height:515px; opacity:0.5;">
<div id="w1" class="h2vr_0 test" style="position:absolute; left:10px; top:2px; font-size:28px; line-height:1.44em; width:350; height:500; border: 0px orange solid; opacity:0.8; font-family:HG教科書体; font-weight:bold;">
 八月十五日 火曜日    くもり<BR>
      &nbsp;五年二組&emsp;やまだじろう<BR>
今日は<ruby><rb>終戦記念日</rb><rt>しゅうせんきねんび</rt></ruby>です。約八十年前に太平洋戦争が起き、昭和二十年八月十五日に終結した記念の日です。この時期、高校野球全国大会の話題で盛り上がります。会社が夏休みとなり遊園地は親子連れでにぎやかでした。</div>
<img id="w2" src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/0722.png" style="position:absolute; left:2px; top:2px; width:360px; height:240px; opacity:0.2;">
<img id="w3" src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/0723.png" style="position:absolute; left:2px; top:252px; width:360px; height:240px; opacity:0.2;">
<div id="w4" class="h2vr_0 book" style="font-size:28px; color:navy; line-height:1.5em; font-family:HG教科書体; font-weight:bold; width:364px; height:514px; border:0px red solid; opacity:0;"><span style="color:orange">《感想》<BR></span>夏休みの自由研究の課題として電子絵日記を作るために、お父さんとふたりで2週間かけてパソコンやホームページのことを調べました。お父さんから<ruby><rb>著作権</rb><rt>ちょさくけん</rt></ruby>のことを教えてもらい、著作権フリー画像と著作権保護期間終了童謡をダウンロードしました。</div>
<div id="pn" style="font-size:14px; color:firebrick; position:absolute; left:180px; top:500px;"></div>
</DIV>
<Div><audio id="event" preload="auto" autoplay controls controlsList="nodownload" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/tawara_goro2.mp3"></audio></Div>
</body>
<script type="text/javascript" charset="Shift_JIS">
const opacity_value=[[1, 0, 0, 0, 5000], [0, 1, 1, 0, 20000], [0, 0, 0, 1, 20000], [0.8, 0.2, 0.2, 0, 20000], [0, 0.2, 0.2, 0.8, 20000]];
var timer;
var count=0;
document.getElementById("event").addEventListener("ended", closeProc, false);   //再生完了を知らせる

/* ここに動的なコードを追加する。 */
function closeProc(){                               //音声の再生完了で起動する
	clearTimeout(timer);
}
function display(){
	if(count>=5) count=0;
	console.log("COUNT:%d %f %f %f %f", count, opacity_value[count][0], opacity_value[count][1], opacity_value[count][2], opacity_value[count][3]);
	for(var i=0; i<4; ++i)	document.getElementById("w"+(i+1)).style.opacity = opacity_value[count][i];  //w1~w4
	document.getElementById("pn").innerHTML = "Ver0.01, &copy;TacM,2017 " + "\u24ff\u2776\u2777\u2778\u2779".slice(count, count+1); //①②③④の白抜き
	timer=setTimeout('display()', opacity_value[count][4]);
	++count;
}
</script>
</html>

サンプルコードの解説

  1. 2行、記事が読み込まれるときに動作する。
  2. 3行、重ね書きの基底を宣言する。
  3. 4行、日記の原稿を表示する。id属性で画像に名前を付け、後でプロパティの値を変更できるようにする。
  4. 5~8行、日記本文を指定する。
  5. 9行、ラジオ体操の画像を表示する。
  6. 10行、虫取りの画像を表示する。
  7. 11行、日記作成の感想文を示す。
  8. 12行、コピーライトと絵番号を表示する準備をしておく。
  9. 14行、「俵はゴロゴロ」のBGMを読み込んで鳴動する。
  10. 17行、画像を切り替えるためのテーブル。
  11. 20~25行、再生完了時に動作する処理。
  12. 26~33行、記事が読み込まれるときに起動し、その後、定期的に画像を切り替える。加えて、画像番号を表示する。

考察

動的表現の長所と短所について考慮します。長所としては、動きが加わることで閲覧者の目を引きます。その他、一つの窓に多数の文字や画像が表示でき、表現量が格段に増大します。

通常の絵日記は上に絵、下に文章を置くことが定番ですが、電子絵日記においては時分割で画面を目いっぱいに描画できることに加えて、イベント処理を定義し音楽と画像表示を同期させることができます。

短所として全体のハードコピーを取ることが難しく、一目で全体把握がしづらいことです。長短を勘案してご利用ください。

おまけ

このように、切り替えて表示するページの検索評価はどのようになっているのだろう。最後まできちんと評価してもらえるのか心配です。

かつて、marquee要素によりスクロール表示の表現が可能でした。今はmarquee要素は非推奨になりましたが、プラグインツールで同じことが可能です。このことから類推すると、検索の対象になっていそうです。

次回の予定

次回も動きのある絵日記について語ります。

 

自由研究のはじめ6

縦書きレイアウト方式

前回はペイントにより、縦書き絵日記を作成しました。画像による縦書きは簡単ながら、編集に難があったり、フリガナを付けると乱れることがあります。また、検索には画像はテキストよりも不利と言われています。

今回は、ブログやホームページにおいて、記事の縦書きレイアウトを実現するh2vR.jsによって縦書き絵日記を作ります。

縦書きプラグイン

WordPressや普通のホームページで縦書きが利用できる「h2vR」というプラグインがあります。入力は通常の横書き方式ながら、縦書きの記事を作成することができます。前回取り上げたテキストを縦型の画像にすることとは異なり、記事はテキストのまま保持されます。

h2vRの使い方

h2vRのプラグインツールを利用するには、先に示したサイトから次の3つのライブラリをダウンロードし、読み込んで利用します。

①h2vR.css
②h2vR.js
③h2vR_extensions.js

ダウンロードしたファイルをローカルディスクに読み込み、自己のソースファイルに包含します。ここでは、自分のサイトにアップロードしてURLを確保し、script要素で読み込み利用します。たとえば、body要素の直前において、次のように読み込みます。

<html>
<link rel="stylesheet" href="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.css" charset="UTF-8">
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.js" charset="UTF-8"></script>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR_extensions.js" charset="UTF-8"></script>
<body>

3つのライブラリを自ら組み込むのは、ローカル環境で実行するときだけであり、リモート環境で動作する場合は、div要素の中でclass=”h2vr_〇〇”を指定することで十分です。

作成した絵日記

ブラウザChromeとoperaで動作します。

八月十三日 日曜 晴れ
    やまだはな子
むかしはクーラーなどなく、すだれ風鈴ふうりん、うちわで暑さをしのいだとおじいちゃんに聞きました。井戸で冷やしたスイカやところてんのおいしさは最高と話してくれました。
Ver0.01, ©TacM,2017

サンプルコード

<html>
<body>
<DIV style="position:relative; width:370px; height:537px; border: 1px green solid; background-color:aliceblue">
<img id="w1" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki-80.png" style="position:absolute; left:0px; top:0px; width:368px; height:535px; opacity:1;">
<img id="w2" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki56.png" style="position:absolute; left:22px; top:10px; width:320px; height:240px; opacity:1;">
<div class="h2vr_0 test" style="position:absolute; left:23px; top:270px; font-size:22px; line-height:1.44em; width:315; height:220; border: 0px orange solid">
八月十三日 日曜 晴れ<BR>
    やまだはな子<BR>
むかしはクーラーなどなく、<ruby><rb>簾</rb><rt>すだれ</rt></ruby>や<ruby><rb>風鈴</rb><rt>ふうりん</rt></ruby>、うちわで暑さをしのいだとおじいちゃんに聞きました。井戸で冷やしたスイカやところてんのおいしさは最高と話してくれました。
</div>
<div style="font-size:14px; color:firebrick; position:absolute; left:5px; top:514px;">Ver0.01, &copy;TacM,2017</div>
</DIV>
<Div><audio id="event" preload="auto" autoplay controls controlsList="nodownload" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/Insects_chirping_xf.mp3"></audio></Div>
</body>
<script type="text/javascript" charset="Shift_JIS">
/* ここに動的なコードを追加する。 */
</script>
</html>

サンプルコードの解説

①3~12行、日記全体の領域を定義する。style要素のposition属性で、文字と画像を重ね書きすることを指定し、領域のサイズを示す。
②4行、絵日記の原稿用紙を指定する。leftとtop属性で位置決めする。opacityは透過率であり、1は不透明度100%を意味し、省略可能。
③5行、原稿の上部に絵を描く。描画位置はleftとtopで調整する。
④6~10行、日記本文を指定する。line-heightで行間を指定。class=”h2vr_〇〇”は縦書きを指定し、〇〇にて行内に納める文字数を指定する。0は縦書き要素の高さを固定する場合に使用し、styleのheight属性が有効になる。
⑤11行、copyrightを指定する。
⑥13行、BGMの音声データを読み込み、コントローラーを表示する。
⑦15~17行、動的なコードがあるとき、ここに追加し深みのある日記に仕立て上げる。

次回の予定

次回はこれまでの補足説明を追加します。

おまけ

縦書きをちょっぴり、高級化した記事を以前に発表しました。もし、良かったら「秋の始まり」をどうぞ、ご覧ください。

 

自由研究のはじめ5

本格的な絵日記

具体的な絵日記の書き方を始めます。日記は縦書きが多く、縦書きの日記について考えてみます。

ブログなどは欧米文化を前提としており、わが国では和様文化を大切にしながらも大胆に外国文化を受け入れ、やがては日本文化に同化を目指しているように思われます。だから、古来からの文化が色濃く残っている箇所があります。

縦書きの日記

横書き主流のHTMLの世界で、縦書きを極めているデザイナーは多く、伝統的な日本の縦書き文化の高尚化に貢献しています。

中でもh2vRはたくさんのブロガーが採用し、魅力的な記事を発信し続けています。h2vRの使い方は次回以降に掲載されます。

今回は、縦書きのフォントを画像化して、見た目は縦書き同様の絵日記を取り上げます。

ペイントによる縦書き

画像編集ソフトの横用フォントで無理やり縦書きにすると違和感を生じます。その点、縦書きフォントは、そのあたりをきちんと制御してくれます。

右上の図でフォント名「@MSゴシック」において、@は縦書きを示していますが、正式な縦書きではなく左下に示すように90度、左に回転した形をとります。よって、最終的には「右に90度回転」して利用します。

作成した絵日記

 

  

 

サンプルコード

<html>
<body>
<DIV style="position:relative; float:left; width:368px; height:522px; border: 1px green solid; background-color:aliceblue">
<img id="w1" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki-80.png" style="position:absolute; left:0px; top:0px; width:368px; height:520px; opacity:1;">
<img id="w2" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki5.png" style="position:absolute; left:20px; top:10px; width:320px; height:240px; opacity:1;">
<img id="w3" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki7.png" style="position:absolute; left:1px; top:246px; width:364px; height:273px; opacity:1;">
</DIV>
<audio id="event" preload="auto" autoplay src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/tawara_goro2.mp3"></audio>
</body>
<script type="text/javascript" charset="Shift_JIS">
/* ここに動的なコードを追加する。 */
</script>
</html>

作成画像

①enikki-80.png
②enikki5.png


③enikki7.png

 

日記画像の作成

上述しましたが、今回は簡便方式の縦書きです。右図に示す3枚の画像を重ね合わせます。指定する順序はenikki-80.png, enikki5.png, enikki7.pngの順にします。

では、enikki7.pngの作り方を述べます。まず、enikki-80.pngの下半分を切り取り、左に90度回転した画像を作ります。

次に、ペイントを起動し先の画像を読み込んでテキストタブを指定します。適度な文字サイズと@付きのフォントを指定します。

仮表示で文字サイズを調整し、左図のような縦書きの文面を作ります。その画像を右に90度回転させた画像がenikki7.pngです。

3つの画像を重ね合わせるので、はみ出すことがあり、img要素のleft, top, width, heightにて調整します。width, heightは原ファイルの比率(4:3)を保ったままにします。

次回の予定

今回はペイントを使って縦書きに挑戦しました。次回はh2vRによるかっこよい絵日記にしたいです。。

 

秋の始まり

お盆前

お盆前なのに、立秋も過ぎ秋の気配が忍び寄っています。

とはいえ、今日は台風一過で今年最高の暑さのようです。

デパートやスーパーでは夏ものは投げ売り同然です。右のポスターを半年、一年以上も使わないでください。

秋を詠った和歌

秋の和歌の楽しみ方として、遅延表示をしながら音楽と画像を協同表現しています。

再読み込みボタンをクリックし、再実行して『ふるさとの秋』の画像透過度が少しずつ変化する様に注目ください。

参照音楽:
【サイト名】フリー音楽素材 H/MIX GALLERY
【管理者】 秋山裕和
【アドレス】http://www.hmix.net/

あき

 

自由研究のはじめ4

おさらい

前回、JavaScriptコードを用いて、4組の画像と音声を切り替える動的表現を試みました。今回はこれらを整理してみます。

文章の作り方

電子絵日記を作るということは、手短な表現ではファイル拡張子がHTMLのファイルを作ることです。

文章を作るにはテキストエディタで十分です。Windowsアクセサリ-メモ帳を使います。HTMLはテキスト形式です。

テキストだけでは画像や音声データを表現できないので、タグによりテキスト以外のデータへの橋渡しをしています。

図にすると以下のようになり、先ずはテキストだけのファイルを作って自信をつけます。

テキストだけのHTMLファイル

Hello World!
世界のみなさん、こんにちは!

サンプルコード

Hello World!<br />
世界のみなさん、こんにちは!<br />

日記画像と音声データの作り方

日記に載せる画像とBGMの作り方について考えてみます。 テキストだけならエディタだけで間に合います。改行を指定する<br />はタグの一種です。文字に色を付けるにはspanタグを使いますが、画像はimgやimageタグで定義します。では画像はどのようにして用意するのでしょう。

画像を作成するには上図に示したように、画像編集ソフトを使いますがペイントなどのフリーソフトで当初は事足ります。

スナップ写真を載せるにはデジカメからパソコンやスマホに取り込み、ファイル形式がHTMLで扱えるかどうか確認します。次にデジカメ原ファイルは4000X3000ピクセルなど高密度です。日記にするには縦横を1/10、容量で1/100に縮小して十分です。ペイントでも縮小できますが、フォルダ全体をリサイズするアプリを使うと効果的です。

次に音声データを用意する方法を示します。童謡などのBGMを流すには、著作権保護期間が過ぎている音楽データをダウンロードする方法があります。サービスサイトから所望するファイル形式でダウンロードすることができます。

ピアノやギターなどの演奏に自信があれば、自作することも選択肢の一つです。演奏に熟達されていればmp3, ogg, aacなどのファイル形式に精通されていることでしょう。

理想を言えば

改行コードはやたら使わないのがスマートな方法です。一行に収まる文字数は画面サイズに依存するので表示能力に任せることが自然です。この方法はレスポンシブWebデザインと呼ばれています。

次へのステップ

今回は一休みして、細かな対応について語りました。前回の記事はここで述べた手法を用いています。もっと質の高い絵日記にするには関連する包括的な知識を集大成する必要があります。

 

自由研究のはじめ3

拡張項目

前回、文字と画像にプールの喧騒の音声を加えました。今回は4種の画像と音楽を用意し、音声の終了時に次の画像と音楽に切り替える機能を付けました。

JavaScriptコードを初めて定義し、本格的な動的表現を試みます。ここからはHTMLコードからJavaScriptコードという名称を使います。

画像と音声の切り替え方

今回の課題の肝は画像と音声を切り替えることです。音声データは数秒から数分間、鳴動することが多く、時間はマチマチの場合がほとんどです。

そのため、終了したときに動作するようにイベント動作を定義します。

今回、終了イベントで次の曲を演奏するように設定し、4回、繰り返したら終了するようにします。

サンプルコード

<html>
<body onLoad="closeProc();/*document.oncontextmenu=function(e){return false;};*/">
<audio id="event4" src="" autoplay controls controlsList="nodownload"></audio><span id="ttl4" style="font-size:26px; color:skyblue"></span><SPAN style="font-size:12px; color:darkgreen">
<BR>参照音楽=音楽研究所,http://www.asahi-net.or.jp/~HB9T-KTD/music/musj.html  <span style="font-size:9px; color:orange">Ver0.01, &copy;TacM,2017</span></SPAN>
<DIV style="position:relative; left:0px; top:0px;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/notebook.png" width="580" height="434">
<img id="pic4" src="" style="position:absolute; left:100px; top:85px;">
<div style="width:550px; height:420px; font-size:20px; color:navy; font-family:serif; position:absolute; left:20px; top:60px;">
きのう、お父さん、お母さん、僕、妹の四人で温泉リゾートホテルに車で出かけました。プールでお父さんと泳ぎの競争をしました。まだ、お父さんにはかないません。夕方、バーベキューで満腹になりました。夜はハワイアンダンスショーを楽しみました。
</div>
</DIV>
</body>
<script type="text/javascript" charset="Shift_JIS">
var title = ["\u2776四人でドライブ", "\u2777プールサイドの喧騒", "\u2778野外晩餐", "\u2779ハワイアンダンス"];
var picture = ["http://aidesign.lolipop.jp/wp-content/uploads/2017/08/drive-0.gif", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/pool-1.png", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/camp-2.jpg", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/dance-3.png"];
var music = ["http://aidesign.lolipop.jp/wp-content/uploads/2017/08/cucaracha-0.mp3", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/Picnic_Music_Box1", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/Camp-2.mp3", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/HAWAII-3.mp3"];
var count = -1;										//4つの絵を制御
var evnt = document.getElementById("event4");		//4つのイベントオブジェクト
var picGWH = document.getElementById("pic4");		//画像, 幅, 高さ
evnt.addEventListener("ended", closeProc, false);	//再生完了を知らせる
function closeProc(){								//音声の再生完了で起動する
	if(++count < 4){								//0, 1, 2, 3
		evnt.src = music[count];									//曲名
		evnt.play();												//BGM
		picGWH.src = picture[count];								//画像
		document.getElementById("ttl4").innerHTML = title[count];	//タイトル
	}
}
</script>
</html>

JavaScriptコードの説明

①2~12行、bodyブロックで音声データ、画像データにより絵日記の主部を作成。
②3行、音声データを定義する。JavaScriptコードで動的に4曲切り替える。
③4行、参照データを表示。
④5~11行、絵日記部分。
⑤6行、日記原稿画像。
⑥7行、4画像をJavaScriptコードで切り替える。
⑦8~10行、日記文。
⑧13~29行、JavaScriptコードの全文。
⑨14行、タイトル文を定義。
⑩15~16行、画像とBGMを定義。
⑪17行、4つの絵とBGMを制御する変数。
⑫18行、4つのイベントオブジェクト。
⑬19行、画像, 幅, 高さを制御する。
⑭20行、再生完了を知らせる。
⑮21~28行、音声の再生完了で起動する。

絵日記


参照音楽=音楽研究所,http://www.asahi-net.or.jp/~HB9T-KTD/music/musj.html  Ver0.01, ©TacM,2017
きのう、お父さん、お母さん、僕、妹の四人で温泉リゾートホテルに車で出かけました。プールでお父さんと泳ぎの競争をしました。まだ、お父さんにはかないません。夕方、バーベキューで満腹になりました。夜はハワイアンダンスショーを楽しみました。

次へのステップ

今回はJavaScriptコードを導入して動的表現が始まりました。次回は、動画に進むかを検討中です。

 

自由研究のはじめ2

少しずつ拡張

前回、画像と文字を混在させて自由研究の一環として絵日記の作り方を示しました。今回は予告の通り、プールの喧騒の音声を加えてみます。

作成手順

音声データを設定する部分をクローズアップします。音声データは動作ブラウザがサポートする形式にする必要があり、mp3, ogg, aacなどを用意します。ここではchromeがサポートしているmp3にしています。



用意する場所はローカル環境で動作させる場合、同一のフォルダで問題ありませんが、公開サーバー上で動作する場合は、アップロードしたURLアドレスを指定します。

サンプルコード

<p><audio src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/PoolSide.mp3" autoplay controls controlsList="nodownload"></audio><span style="font-size:28px; color:skyblue">プールサイドの喧騒</span></p>
<DIV style="position:relative; left:0px; top:0px;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/notebook.png" width="432" height="323">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/suiyoku.png" width="99" height="130" style="position:absolute; left:290px; top:182px;">
<div style="font-size:26px; color:mediumblue; font-family:serif; position:absolute; left:30px; top:60px;">
今日、お父さん、お母さん、<BR>僕、妹の四人でプールに出か<BR>け、はしゃぎまわりました。<BR>お父さんと競争した<BR>り、妹にはおよぎを<BR>教えました。
</div>
</DIV>

HTMLコードの説明

①1行、音声データを読み込んで自動スタートを指定し、再生ボタンなどのインターフェースを表示する。次いでヘッダー文を付加する。
②2~8行、重ね書き区域を定義する。タグは大文字と小文字を区別しないが対応付けを明示するために、大文字を用いる。
③3行、ノートブックの画像を読み込む。
④4行、水浴姿の画像を読み込む。
⑤5~7行、絵日記の文章の色、フォント、書体、位置を指定する。ここのタグは小文字を用いて対応付けをわかりやすくする。<BR>は改行です。
⑥6行、絵日記の文章をセットする。

HTMLとは何か

かいつまんでHTMLを説明します。HTMLとは、HyperText Markup Languageの頭文字をとったものであり、タグ(要素,<と>)を使って通常の文字表現に加えて、画像や音声、動画、色、フォントタイプなど多彩な表現ができる仕組みのことと覚えておきましょう。

ブログやホームページを作るにはHTMLを知らなければなりませんが、数種のタグの役割を理解するだけで先ずはHTML文書を作成することができます。

ここでは、p, audio, span, div, img, BRの6種のタグを使っています。ほとんどのタグはブロックを形成し、最後はスラッシュから始まるタグで閉じられます。今回のタグでBRだけが単独で使われます。

絵日記

プールサイドの喧騒

今日、お父さん、お母さん、
僕、妹の四人でプールに出か
け、はしゃぎまわりました。
お父さんと競争した
り、妹にはおよぎを
教えました。

次へのステップ

今回は絵とテキストに音声を加えてみました。次回には、絵と音声を複数用意して動きのある絵日記に進化させます。

 

数え歌仕様四字熟語

数え歌

数え歌は民衆の素朴な感情を歌にしたものが多いです。仕事にまつわるもの、生活に密着したもの、性教育的なものと様々です。

一つとせい…と一から順に繰り上がってダジャレ的な言い回しで歌い継いでいきます。日常の生活を歌いこんだり、お上のやり方を揶揄したり様々です。

「いちじく、にんじん、さんしょにしいたけ…」、「お手玉のうた」など、伝承遊戯に関するノリのいい数え歌は限りがありません。数え歌は世界共通の文化であり、ちょっぴり世界を意識して英語の短文を載せました。

かつて、輪環の順仕様四字熟語で「一石二鳥」、「二人三脚」などダブル連番で繰り上がっていく数え歌を掲載しました。それを今回は横スクロールで画像を緩やかに切り替える方式です。

ダブル連番数え歌

再度、描画するにはブラウザのロードキーをクリックします。





ダ・カーポ(da capo)