inventor のすべての投稿

サンマ不漁に接し

秋の味覚の王様

サンマは秋の味覚の王様です。白身さかなやマグロなどに較べ、求めやすい値段ながらおいしさに格別なものがあります。

はるか昔には七輪(しちりん)の上に網を敷いてサンマをのせ、うちわで扇いで煙をもうもうとたてながら焼いていました。

今では、七輪や炭、焼き網、大根おろし器(おろし金)の存在を知っている人はごく少数になっています。

おろし金と言ってもプラスチック製がほとんどで、安く(100円~1200円)長持ちする割には、切れ味がよいとは言えません。

よいものはステンレス製で一万円近くします。

大根をおろすのは大変、疲れます。そこで自動大根おろし機なるものが考案されました。

それも手間ひまかかるので、チューブ入りの「大根オロシ」がスーパーで売っています。今年はサンマが不漁でサンマ祭りが軒並み中止になっています。

目黒の秋刀魚(サンマ)

江戸時代、下級魚と言われたサンマは焼きたてが最高です。

昔の殿様の食事は毒殺を恐れて、味見をする役人がいる上、殿様の口に入るには、脂身や小骨をとるので冷めてしまいおいしさは半減します。

目黒の農婦(あるいはおじいさん)から頂いたサンマはかつて食べたことがないほどおいしかったのでしょう。

『目黒のサンマ』のくだり、「さんまは目黒にかぎる」のひとコマでした。

成長記録を動画にしてプレゼントしよう

成長記録を動画風に整理

デジタル写真を動画風に整理するひとつの方法があります。題材は子供・孫の成長記録です。BGM(background music)が入ると引き立ちます。入学や卒業のお祝いにプレゼントできるように頑張ってみましょう。 また、映画のように先頭にカウントリーダー、末尾にクレジットタイトル(制作者名、制作日、後援者名など)を入れるとテレビのドラマ制作気分を味わえます。

この他に、画像と画像の間に切り替え効果という仕組みを導入すると前の画像の余韻を残しつつ新画面に切り替えることができます。JavaScriptでプログラミングしていますが、Movie Makerでサポートしている切り替え効果を自前で処理できるのではないだろうか。研究中です。

この成長記録の特徴

  1. 人物の写真は肖像権やプライバシーの観点からここではフリー素材のイラストを使っています。本物の成長記録にはデジタル写真を適度にリサイズして使います。
  2. 著作権フリーの音楽素材をダウンロードしaudio要素を用いて、BGMによるいろどりを加えています。
  3. くまさん、リス、カエル、ひよこさん、コアラ、クジラなどの縁取りにより写真へのアクセントを付けています。

さいごに

カウントリーダーや切り替え効果はこれからの課題です。すでにマスターされている方々がおられることでしょう。一周遅れながら追いかけます。前にも述べましたが、ソースコードはもう少しまとまったところで公開する考えです。

電子版成長記録

サンプル成長記録の再閲覧はブラウザの再読み込みボタンをクリックします。

詩人・杜甫

唐代の詩人

唐代の詩人である」杜甫の作品から「春望」を映像化しました。今から1300年ほど前、当代きっての詩人のあまりにも有名な詩です。音楽はサーカスやチンドン屋さんの定番の曲で有名な哀愁をそそる曲「天然の美」をBGMに選びました。

「天然の美」の詞には著作権が残っていますが、曲の著作権保護期間は終わっているようです。ブラウザ:chrome, opera, firefox, safari, IE, Edgeなどで動作すると思います。ご鑑賞ください。

JavaScriptと見返り美人

難解で解決できないとき

他のシステムと共同だったり、フリー素材を利用した場合、にっちもさっちもいかなくなることがあります。

有料で手に入れたものであれば、相談コーナーがあって電話やメールでトラブルに対応してもらえます。

ダウンロードフリーのソフトを使った場合のトラブルは自己責任で解決するしかありません。

たいがいは、同じ悩みをもつ同好の士がおり、ネット検索で解決しますが、最新のテーマを追いかけているときは非常に困ります。

一時、あきらめる

どうしても解決の糸口にたどり着けないことは、ままあることです。その時は一時、あきらめることです。

多くの場合、時が解決してくれます。

勘違いをしていた、他の方が解決法を発表している、効果的な代替策が見つかったなどの進展が必ずあるものです。

効果的な代替策

画像の切り替えを、大きな画像をclip:rectにより、切り取って描画する方式を追いかけましたが、リモートサーバーにアップロードすると期待した動作になりません。

オーソドックスにcanvas要素のdrawImage関数を用いて、見返り美人を描画しました。

先日は8枚の画像を用意しましたが、今回はたった1枚です。横長の蒔絵のようなものです。以下に動作結果を示します。

JavaScriptと見返り美人

動く紋章
JavaScript ©TacM,2017 Ver1.00 参照:フリー音楽素材,甘茶の音楽工房casualgirls

 

 

野分(のわき)

防災の日

9月1日は、関東大震災を忘れずに、常日頃から防災について意識を高めようと制定された防災の日です。

火災旋風の映像をテレビで見ました。大きな広場に避難して安全と思ってた矢先、火災が作った旋風で人や自転車が巻き上げられて、大樹に引っかかった図がありました。

台風シーズン

この季節、台風が到来します。台風のことを昔は、野分と言っていたようです。野の草木を分け家屋を蹴散らして吹き荒れる風におののきます。

所詮、自然には適いません、天の思し召しを甘受するしかないと達観し、台風が来ることを骨休みと言っている地区もあるようです。

台風は多くの水を運んでくるので、ひでり、干ばつから救ってくれる恵みでもあるのですが、程よくというわけでないので困っています。何事も度を超すのはいけないのです。

実りの秋

初秋の候、農作物や果物が実り酒のおいしい季節です。収穫、会食、旅行、運動会と穏やかな日々を待っています。

自由研究はじめのまとめ

プログラミングの楽しさ

プログラミングは一筋縄ではいきませんが、何度も挑戦して納得のいく結果が得られたときは天にも昇る気持ちです。

ローカル環境で動作しても、公開サーバー上で問題なく動作するとは限りません。それだけ、プログラミングは奥深いといえます。最後はきれいどころの登場で幕引きとなります。

動きを制御するJavaScriptの妙味

動く紋章
JavaScript ©TacM,2017 Ver0.06 参照:フリー音楽素材,甘茶の音楽工房casualgirls
The View

サンプルコードについて

一応、納得のいく結果に至りましたのでソースコードを公開します。

<html>
<body onLoad="timer=setInterval(change, 50)">
<audio id="bgm" src="http://aidesign.lolipop.jp/wp-content/uploads/2016/04/casualgirls.mp3" autoplay controls controlsList="nodownload"></audio><span id="hd1" style="font-size:20px; color:navy;">動く紋章</span><BR>
<DIV style="float:left; width:200; height:200; border:0px orange solid;">
<svg width="200" height="200" version="2.0" viewBox="0 0 200 200" style="border:0px solid pink;">
<ellipse id="d0" cx="100" cy="100" transform="rotate(0, 100, 100)" rx="88" ry="25" style="fill:none;stroke:purple;stroke-width:2"></ellipse> <!-- cx=中心のx座標 cy=中心のy座標 rx=半径x方向 ry=半径y方向 -->
<ellipse id="d1" cx="100" cy="100" transform="rotate(30, 100, 100)" rx="88" ry="25" style="fill:none;stroke:blue;stroke-width:2"></ellipse>
<ellipse id="d2" cx="100" cy="100" transform="rotate(60, 100, 100)" rx="88" ry="25" style="fill:none;stroke:green;stroke-width:2"></ellipse>
<ellipse id="d3" cx="100" cy="100" transform="rotate(90, 100, 100)" rx="88" ry="25" style="fill:none;stroke:red;stroke-width:2"></ellipse>
<ellipse id="d4" cx="100" cy="100" transform="rotate(120, 100, 100)" rx="88" ry="25" style="fill:none;stroke:magenta;stroke-width:2"></ellipse>
<ellipse id="d5" cx="100" cy="100" transform="rotate(150, 100, 100)" rx="88" ry="25" style="fill:none;stroke:gold;stroke-width:2"></ellipse>
<text id="lang" x="80" y="105" font-family="sans-serif" font-size="10px" FontWeight="Bold" fill="navy">JavaScript</text>
<text id="copy" x="0" y="8" font-family="sans-serif" font-size="9" FontWeight="Bold" fill="navy">&copy;TacM,2017 Ver0.06</text>
<text id="ref1" x="0" y="198" font-size="9" FontWeight="Bold">参照:フリー音楽素材,甘茶の音楽工房casualgirls</text>
</svg>
</DIV>
<Div id="bj1" style="float:left; width:200; height:200; margin-left:59px;">
<img id="bj2" src="http://aidesign.lolipop.jp/wp-content/uploads/2015/05/miko-1.png" width="81" height="200" alt="The View">
</Div>
<div style="clear:both;"></div>
<p></p>
<script type="text/javascript" charset="Shift_JIS">
const gazo = [	["http://aidesign.lolipop.jp/wp-content/uploads/2016/05/A-KomachiOno.jpg", 136, 200],
				["http://aidesign.lolipop.jp/wp-content/uploads/2016/08/8aed980c1e45aa90bbb2063112b837a3.png", 147, 200],
				["http://aidesign.lolipop.jp/wp-content/uploads/2016/05/C-nukada.jpg", 200, 200],
				["http://aidesign.lolipop.jp/wp-content/uploads/2016/04/fashion.jpg", 98 , 200],
				["http://aidesign.lolipop.jp/wp-content/uploads/2016/05/E-Mannyou.jpg", 156, 200],
				["http://aidesign.lolipop.jp/wp-content/uploads/2016/05/F-kimono.png", 87 , 200],
				["http://aidesign.lolipop.jp/wp-content/uploads/2016/05/G-yukata1.png", 160, 200],
				["http://aidesign.lolipop.jp/wp-content/uploads/2015/05/miko-1.png", 81 , 200]	];
const lady = ["\u24ff小野小町", "\u2776見返り美人", "\u2777額田王", "\u2778カジュアルガール", "\u2779万葉美人", "\u277a浴衣とうちわ", "\u277b花火と夕涼み", "\u277c三月の鮠ヒロイン葉津"];
var timer = 0;
var count = -1;														//2400*300 -> 1600*200
document.getElementById("bgm").addEventListener("ended", function(){clearInterval(timer);}, false);   //再生完了

function change(){                      //楕円(ellips)描画
  var second = Math.floor(++count / 20);//秒単位, 0~55
  var k = count % 250 * 0.2;            //0 1 2 .... 248 249  //0~49, 拡大・縮小
  var ry = Math.floor(count / 250) % 2 ? 75 - k : 25 + k;     //console.log("COUNT="+count+" "+k+" "+ry);
  var left=Math.floor(second / 6) % 8;  //0~7
  var deg = (count % 6) * 30;           //console.log("DEG="+deg+" "+count);
  document.getElementById("lang").setAttribute("x", 105-ry);
  document.getElementById("lang").setAttribute("font-size", (ry*0.4-2)+"px");  //25~75, 20~70, (8~28)
  for(var i=0; i<6; ++i){
    document.getElementById("d"+i).setAttribute("ry", ry);
    document.getElementById("d"+i).setAttribute("transform", "rotate("+(deg+i*30)+", 100, 100)");
  }
//-----------------------------------------------------------------------------------------------------
  if(count%120 == 0){                                       //6秒ごとに8枚の画像を描画する。演奏時間が55秒だからもとに戻る。
    document.getElementById("bj1").style = "float:left; width:200; height:200; margin-left:" + (200 - gazo[left][1]) / 2;  //マージン左
    document.getElementById("bj2").src = gazo[left][0];     //画像ファイル名
    document.getElementById("bj2").width = gazo[left][1];   //横幅
    document.getElementById("bj2").height = gazo[left][2];  //高さ
    document.getElementById("hd1").innerHTML = lady[left];  //タイトル console.log("R="+left+" "+lady[left]+" "+count);
  }
}
</script>
</body>
</html>

おわりに

多くの人々がプログラミングの楽しさを発見できますように!

 

自由研究はじめの終わり

夏休みも終わりに

多くの学校では夏休みが終わり、寒い地区ではすでに2学期が始まっています。有名な格言『いつまでもあると思うな夏休み』。

最後にSVG(Scalable Vector Graphics)による動く紋章を作ってみました。Jリーグチームの紋章はどれも美麗ですが動きません。将来は動く紋章が流行するかも知れません。夢をみるのに多くの制約が立ちはだかっている今日、果てしない未来を楽しむのはいかがでしょう。

画像を表現するのに、JPEG, PNG, GIFなどのラスタ形式は画像を引き延ばすと、ギザギザになり画質が粗くなりますが、SVGのベクタ形式は画質の劣化がありません。

ここでは、SVGを用いて動く紋章に挑戦します。

動きを制御するJavaScriptの妙味

動く紋章
JavaScript ©TacM,2017 Ver0.02 参照:フリー音楽素材,甘茶の音楽工房 casualgirls
The View

サンプルコードについて

まだ、動作が不十分なところがあり、公開されませんが動作している分は見ることができます。

おわりに

「自由研究のはじめ」のタイトルでかなりの回数を重ねてきましたが、少し息切れしています。涼しくなったら見直すことにして遅れた夏休みに入ります。

 

自由研究のはじめ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要素は非推奨になりましたが、プラグインツールで同じことが可能です。このことから類推すると、検索の対象になっていそうです。

次回の予定

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