日別アーカイブ: 2017-08-16

自由研究のはじめ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)で動作します。

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

サンプルコード

<html>
<body onload="display();">
<DIV style="position:relative; width:366px; height:518px; border:1px green solid;">
<img id="w0" src="https://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="https://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="https://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>夏休みの自由研究の課題として電子絵日記を作るために、お父さんとふたりで２週間かけてパソコンやホームページのことを調べました。お父さんから<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="https://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要素は非推奨になりましたが、プラグインツールで同じことが可能です。このことから類推すると、検索の対象になっていそうです。

次回の予定

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