月別アーカイブ: 2018年8月

写真を動画風にまとめる

スライドショーより高級に

夏休みには行楽地に出かけ、大いに見分を広めたことでしょう。将来、新地に踏み出すには大きな広い世界を知ることが大切です。

そして、たくさんの写真にイメージを残したことでしょう。

夏休みの終わりにそれらを動画風にまとめて、自由研究の資料になるよう『スライド動画』を作ってみました。

写真編集ツール

写真編集ツールは無料から有料まで様々なものが出回っています。デジタルカメラメーカーから『スライドショー』が提供されています。BGMを流してかなりのことができます。

このほか、Windows Vista用に開発され標準品として付属されたWindows Movie Maker2.6(以下はWMM26と略記)があります。Windows10では期待した動作にならない部分がありますが、古いパソコンにインストーラーMM26_JPN.msiがあったので今回、これを使ってみます。

このソフトはWindows10上で動作することは保障されていませんが、スライド動画を作成するぶんにはさしたる問題はありません。インストール方法や使い勝手は《Windows Movie Maker2.6》にまとめてあります。

インストールして起動

WMM26が運よくインストールできたら起動するとやがて次のような画面が得られます。

コレクションを選び右クリックし「新規コレクション」でMovie16フォルダを作ります。このフォルダにスライド動画の素材を一同に集めます。

次に画像の表示順序を勘案して、下のストリーボードにドラッグ&ドロップします。カレントリーダーを先頭に、クレジットタイトル画像を2番目に、エンドクレジットを末尾にし、他は適宜に移動します。

さらに、BGM音楽素材をストリーボードの表示「オーディオ/音楽」の欄に移動します。上の図で1番目と2番目の間の上がタイムラインの表示になっていることを確認して、作業タグからビデオ切り替え効果の表示を選択して画像と画像の間に切り替え効果を挿入します。

切り替え効果は60種ほどあり、画像の始まり、終わり、画像内容にマッチするのを選んで画像と画像の間にドラッグ&ドロップします。たとえば、映画は🎬(カチンコ)により始まるので、最初はロールを選んでいます。本をめくるような画像の前にはページカール(右上へ)などが合いそうです。

字幕(キャプション)の付け方

字幕を付けるには、ムービーの編集-タイトルまたはクレジットの作成を起動します。「タイトルはどこに追加しますか?」の問い合わせに、選択したクリップの前、本体、後を指定します。そのあとにタイトルのテキストを入力します。

タイトル表示にインパクトを付けるには、詳細オプションでタイトルアニメーションを設定したり、フォントと色を変更することができます。

微調整など

テレビの縦横比は当初、4:3でしたが今では16:9が多いです。今回のスライド動画は16:9であり、デジタル写真で撮った画像が4:3であるので、両側に黒い縁が表れます。

動画再生時間は画像枚数に比例しますが、ツール-オプション-詳細と操作して、画像の再生時間と切り替え効果の再生時間を変更することにより調整することができます。

ただし、この設定は編集を始める前に初期化しておかなければなりません。優れた作品を作成するには、編集ツールの機能に精通して豊富な経験が必要です。

動画と音楽の再生時間を同時に終了させるには、音楽を伸縮すると違和感が出てしまうので、動画の数コマを伸縮させて調整します。

完成した作品

 

16枚の画像をもとに、先頭にはカウントリーダー次いでクレジットタイトル、末尾にはエンドクレジットを追加、主な画像には字幕(キャプション)をつけてスライド動画を作成しました。

中央または左下の再生ボタン▶をクリックすれば《スライド動画の作り方》が再生されます。昭和の映画には映写開始時に5~10秒間ほどカウントダウンするカウントリーダーが付いていました。レトロな雰囲気が味わえたら最高です。

終わりに

編集ツールが古く情報が少ないこともあり、WMM26を使いこなすのは骨です。予算があれば信頼性の高いソフトウェアが望まれます。この編集ツールが出力する動画のファイル形式はWMVタイプであり、JavaScriptで扱うにはMP4タイプに変換する必要があります。

16枚の写真は建物や風景がほとんどです。テレビで取り上げる同級生の写真では本人以外にモザイクが入るご時世です。変哲のない画像についてはご容赦ください。最後に難解な課題への挑戦に感謝いたします。

参考:動画ファイルの形式一覧(拡張子)

ファイル形式 拡張子
AVI  .avi
MOV .mov 
MPEG2-TS .m2ts  .ts 
MPEG2-PS .mpeg .mpg 
MPEG4 .mp4 .m4a 
WMV .wmv 
FLV .flv .f4v 
WebM .webm 
VOB .VOB 
MKV  .mkv
AVCHD .mts .m2ts 

 

電子チラシを作る

最後の夏休み自由研究

夏休みが終わって2学期が始まっているところもあります。夏休み期間は25日~45日と幅があるようです。

年々、暑さが高じてきているので冬休みを短く、夏休みを長くとろうとする傾向にあります。

2学期始業日は9月1日と固定していた記憶があります。ここ1~2ヶ月、自由研究、夏休み課題などについてさんざん触れてきました。最後に両親がスーパーを経営していることを想定し、感謝の印に電子チラシ(Webチラシ)を両親のために作ってあげる例を取り上げます。

自前のホームページ作成の前に

多くの企業は独自のホームページを持っています。チラシによる情報伝達には相当の時間を要するうえ、それなりの経費が掛かります。その点、ホームページにより素早い対応が可能になります。

うまく運用すれば、小なる経費で大なる効果を上げることができます。

 

販売促進のチラシを自在に作成できるようになったら、ホームページを持つような進展を考えてもよいでしょう。

作成する電子チラシの概要を決める

電子チラシの内容

  1. 店舗案内
    • 住所
    • 電話番号
    • 最寄り駅
    • 営業時間
    • 店休日
    • 案内図
  2. 店の営業方針
  3. 店の雰囲気
  4. 取り扱い商品例
  5. キャッチコピー

 

 

課題《電子チラシ》

夏休み自由研究 電子チラシを作る
 スーパー丸福大感謝セール ©TacM,2018 Ver0.02
 
ハートフル商店街【スーパー丸福】地産地消 とりたて野菜、鮮度抜群の近海魚、うまさ安さ一挙両得 
 

課題のHTMLコード

<html>
<body>
<div style="font-size:48px; color:darkviolet;"><span style="font-size:16px; color:black;">夏休み自由研究&nbsp;</span>電子チラシを作る</div>
<DIV id="fig0" style="position:relative; width:600px; height:230px; background:aliceblue; color:blue; font-weight:bold; overflow:hidden;">
<span style="font-size:30px; color:coral;">&emsp;スーパー<span style="color:green;">丸福</span>大感謝セール</span>&emsp;&copy;TacM,2018 Ver0.02
<DiV id="dmy1" style="position:absolute; top:60px; left:0px; width:600px; height:40px; background-image:url(http://aidesign.lolipop.jp/wp-content/uploads/2017/10/superMarufuku.png); opacity:0.2;"></DiV>
<Div id="msg1" style="position:absolute; top:60px; width:600px; height:40px; overflow:hidden; font-size:28px; color:darkred;"
 data-direction="left" data-duration="9500">
ハートフル商店街【スーパー丸福】地産地消 とりたて野菜、鮮度抜群の近海魚、うまさ安さ一挙両得 </Div>
<DiV id="dmy2" style="position:absolute; top:125px; left:0px; width:600px; height:84px; background-image:url(http://aidesign.lolipop.jp/wp-content/uploads/2017/10/super3.png); opacity:0.2;"></DiV>
<Div id="msg2" style="position:absolute; top:125px; left:0px; opacity:1.0; width:880px; height:84px; overflow:hidden; border:0px solid red;"
 data-direction="right" data-duration="12000"><img src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/yasai-880x84.png"></Div>
</DIV>
<Div><img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/Marufuku.png"></Div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2016/09/jquery.marquee.min_.js"></script>
<script type="text/javascript" charset="Shift_JIS">
	jQuery(document).ready(function($){$('#msg1').marquee();$('#msg2').marquee();});	//marquee起動
</script>
</body>
</html>

さいごに

今回は、販売促進用のチラシを経営者たる両親に日頃の感謝を込めてプレゼントする例を取り上げました。

画像認識と組み合わせて、《本日100番目のお客様です。サービスカウンターまでお越しください。粗品と入店記念写真をお贈りします。》などとサービスするシステムを開発することもできるでしょう。

知恵を絞って売り上げに貢献する施策を考えてみませんか。

 

ダブル連番かぞえうた

かぞえうたの歴史

かぞえうたの歴史はかなり古くから存在しています。娯楽と仕事が一体となったものやリズム感よろしく老若男女の間で歌われています。わらべ歌から童謡、春歌まで幅広く庶民生活になじんでいます。

かぞえうたにも種類があり、1から順に繰り上がっていくものが多いようです。日本のことばには七転び八起きのように数詞を折り込んで表現し、ことば遊びの原形と言えるのではないでしょうか。

matome.naver.jpより
夏休みの課題として

ことば遊びのひとつとして、すでに輪環の順に四字熟語(輪環の順仕様四字熟語数え歌仕様四字熟語)を取り上げました。

今回は夏休みの課題例になるよう全プログラムコードを公開し、左スクロールに対応すべく縦書きを止めるなど小変更を加えました。

スクロールの特長

今回は、jQueryというJavaScriptのライブラリを用いてスクロール表現を取り上げます。jQueryには使いやす機能が豊富に詰まっています。

新幹線や山手線などにおいて限定された広さの車内掲示板で多くのメッセージを表示するとき、スクロール表示されます。また、表現に動きを付けて見るものの目を惹きつけます。

主な改訂項目

  1. 音声の自動開始が無効になったのでaudio要素の再生ボタンのクリックをすべての動作の開始にする
  2. かぞえうたが流れる時間を10分割して一番から十番に対応づける
  3. 画像のヘッダータイトルをテキスト表示する
  4. 難解な四字熟語に意味を追加

動作例

 ダブル連番かぞえ歌 ©TacM,2018 Ver0.04
右のをクリック

動作コード

<html>
<head>
<style type="text/css">
.markey {
  width: 600px;
  height: 450px;
  background-image: url("http://aidesign.lolipop.jp/wp-content/uploads/2018/08/SkyAutumn.png");
  overflow: hidden;
  border: 1px solid violet;
}
</style>
</head>
<body>
<DIV style="width:100%; height:590px; border:0px solid red;">
<span style="font-size:28px; color:mediumblue;">&emsp;ダブル連番かぞえ歌&emsp;</span>&copy;TacM,2018 Ver0.04<BR>
<Div style="width:600px; min-height:95px; border:0px solid blue; font-size:36px;">
<div id="top" style="float:left; width:298px; color:deeppink; border:0px solid pink;">再生<span style='color:black'>&#x25B6;</span>をクリック</div>
<audio id="bgm" style="float:left; min-height:55px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/kazoeuta.mp3" controls controlsList="nodownload">他のブラウザをどうぞ。</audio>
</Div>
<Div style="position:relative; width:600; height:450; border:0px solid pink;">
<div class="markey" data-direction='left' data-duration='14000' width="600" height="450" style="position:absolute; top:0; left:0;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/wordplay12.png" width="6000" height="450"></div>
</Div>
</DIV>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.js"></script>
<script type="text/javascript" charset="Shift_JIS">
          //①    ②    ③    ④    ⑤    ⑥    ⑦    ⑧    ⑨    ⑩    ⑪    ⑫    ⑬    ⑭    ⑮    ⑯
const suji="\u2776\u2777\u2778\u2779\u277A\u277B\u277C\u277D\u277E\u277F\u24EB\u24EC\u24ED\u24EE\u24EF\u24F0";
const head=["一石二鳥", "二人三脚", "三寒四温", "四分五裂", "五臓六腑", "六順七徳", "七転八倒", "八葉九尊", "九分十分", "十年一日", "再生<span style='color:black'>&#x25B6;</span>をクリック"];
var count=-1;
document.getElementById("bgm").addEventListener('play', function(){	//プレイイベント
 if(count < 0){											//初期化処理は1回こっきり
  count=0;
  jQuery(function () {									//marquee処理
	jQuery('.markey')
			.bind('beforeStarting', function(){			//開始前に動作する処理
			timer1sec();								//待機関数起動
		})
		.bind('finished', function(){					//マーキーの終了処理
			jQuery('.markey').marquee('destroy');		//jQuery('.markey').marquee('toggle');
			count=-1;
		})
		.marquee()
  });
 }
});
function timer1sec(){									//待機関数 //console.log("count", count, count*14.3, count, suji[count]+head[count]);
	document.getElementById("top").innerHTML = (count==10) ? head[count] : suji[count]+head[count];
	if(++count <= 10)setTimeout('timer1sec()', 14300);	//待機関数再起動, 2'35"  155" 15500ms
}
</script>
</body>
</html>

 

終わりに

ダブル連番四字熟語は六と八が難解でした。六泊七日や八割九分は苦し紛れと言われそうで取り上げるに至りません。

音楽や動画を表示する場合、描画の準備完了や再生完了時にイベントが発生し、その処理を定義する例を示しました。参考になれば幸いです。

追記

2018/09/01:chrome, edge, firefox, operaのほかie11で動作するように小変更。

 

夏休み終章に備える

プログラミング教育

2020年度に小学校でプログラミング教育が必修化になり、プログラミングが授業に導入されます。

一年後に中学校で技術・家庭科でプログラミング教育が拡充され、さらにその一年後に高等学校で「情報Ⅰ」が必修化になり、加えて2024年度の大学入学共通テストに「情報Ⅰ」が国語・数学のような基礎的科目として導入される見通しと言われています。

これまでにも多くの例題を取り上げてきましたが、ちょっぴり高級化が施されたラッキーセブンゲームをお届けします。0~9が印刷されたターンテーブルを回し’7’を引き当てたらファンファーレとともに大当たりとアナウンスされるゲームです。

当たる確率は10%ですがクリックするタイミングを究明すればもっと高い成功率になりそうです。

作成したラッキーセブンゲーム

ころあいをはかり停止ボタンをクリックするとターンテーブルの回転が止まります。7が上部にくると大当たりのファンファーレが鳴り響きます。

 ラッキーセブンゲーム ©2018 TacM, Ver0.02

ゲームHTMLコード

<html>
<body onload="revolution();">
<audio id="bg" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/muci_action_r01.mp3" loop></audio>
<audio id="ok" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/1tosho.mp3"></audio>
<audio id="ng" src="http://aidesign.lolipop.jp/wp-content/uploads/2016/01/btn10.mp3"></audio>
<Div id="fig00" style="position:relative; width:480px; height:470px; background:lightcyan; color:darkgreen; font-size:28px; font-weight:bold;">
&nbsp;ラッキーセブンゲーム</span><span style="font-size:14px; color:navy;">&ensp;&copy;2018 TacM, Ver0.02</span>
<img id="ht" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/logomark2.png" width=80" height=80" style="position:absolute; left:165px; top:38px; visibility:hidden;">
<img id="f2" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png" style="transform:rotate(-18deg); position:absolute; left:30px; top:120px; width:340px; height:340px">
<a style="position:absolute; left:340px; top:407px" onclick="go()"><img id="ex" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/04/button0.png"></a>
</Div>
<script type="text/javascript" charset="Shift_JIS">
const SPEED=10;							//回転速度
var clickCount=degree=endFlag=0;		//clickCount:開始/停止, degree:回転角, c:確定番号

function revolution(){					//回転を制御する関数			//-18 -13 -8 -3  2  7	
 var e=(degree++)%72*5;												//  0   5 10 15 20 25 ~ 355
 var c=Math.floor(e/36) % 10;			//console.log("revolution", e+18, e, c);
 document.getElementById("f2").style.transform = "rotate("+(e-18)+"deg)";//回転を制御, console.log("revolution", endFlag, e, c);
 if(endFlag==1){						//console.log("終了");
  document.getElementById("bg").pause();
  if(c==7){document.getElementById("ok").play();document.getElementById("ht").src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/atari3.png";}
  else{document.getElementById("ng").play();document.getElementById("ht").src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/logomark2.png";}
  document.getElementById("ht").style.visibility="visible";
  endFlag=0;							//次回の準備
 }
 else	if((clickCount % 2)==0)	setTimeout('revolution()', SPEED);		//回転中ならば継続
}
function go(){							//開始あるいは停止を制御する関数, console.log("回転開始", clickCount);
  document.getElementById("ex").src = "http://aidesign.lolipop.jp/wp-content/uploads/2018/04/button" + (++clickCount % 2) + ".png";
  if((clickCount % 2)==0){				//停止中から回転開始
    document.getElementById("bg").play();
    document.getElementById("ht").style.visibility="hidden";
    setTimeout('revolution()', SPEED);	//console.log("回転開始");
  }
  else	endFlag=1;						//console.log("回転停止");
}
</script>
</body>
</html>

 

 

参考になる初心者向けプログラミング教育電子書籍

  1. スラスラわかるHTML&CSSのきほん 1980円 アマゾンキンドル
  2. 基礎から徹底的に学ぶJavaScript Kindle版 350円 アマゾンキンドル
  3. スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ) 1793円 アマゾンキンドル
  4. 動作させながらゼロから学べるJavaScript 256円 アマゾンキンドル
  5. 作りながら学ぶ HTML/CSSデザインの教科書 2800円 アマゾンキンドル
  6. プログラミングの基本がJavaScriptで学べる本 972円 アマゾンキンドル

さいごに

プログラミング教育は「プログラマーを育てる」ことではありません。「プログラミング的思考を育むもの」です。

保証の限りではありませんがプログラミングに興味を持てば「出世に役立つ」、「お金もうけにつながる」、「異性にモテる」かも知れません。

あらゆるものがコンピューターに制御されている今日、当サンプルが楽しくゲームを作るための一助になればありがたいです。

 

コンピューター万華鏡

自由研究今昔

大昔は小学校において、夏休みの自由研究が親子共同で作成する風習はありませんでした。親からアドバイスを受けるのは、ずるをしたような雰囲気がありました。

その当時は少子化からほど遠く、親はひたすら働いていた時代です。教育は学校まかせ、多くの親は「稼ぎに追いつく貧乏なし」を信じていたように思われます。

参考例を多く集める

学習月刊誌には多くの自由研究が載っているのではないだろうか。夏休みも残り少なくなってきました。

7月~8月に、コンピューター版万華鏡の作り方を6回ほどに分けて掲載しました。間に合わない人のために超簡単版を再掲します。

超簡単版万華鏡

<!DOCTYPE html>
<html>
<body>
<audio style="float:left;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/BADARZEWSKA-TheMaidens-Prayer.mp3"
               loop controls controlslist="nodownload"></audio>
<div style='float:left; width:310px; height:50px; color:darkgreen; font-size:18px'>&nbsp;バダジェフスカ作曲&ensp;乙女の祈り
<span style="font-size:12px; color:navy; vertical-align:top;"><br />&nbsp;R:背景色反転&ensp;△:ぼやけ変化&ensp;H:回転制御</span></div>
<DIV style="position:relative; clear:both;">
<img style="position:absolute; left:0px; top:0px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
<div style="position:absolute; left:0px; top:610px;">作成者:平成小学校5年2組 山田太郎 後援:山田一平太、山田やよい。『推奨するブラウザはChrome, FireFox, Opera, Edgeです。』</div>
</DIV>
<script src="https://infosmith.biz/scripts/035-kaleidoscope/libraries/p5.min.js"></script>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/sketch2.js"></script>
</body>
</html>

 

上記コードをコピー&ペーストし、tiny.htmlというファイル名で自分の記憶装置に確保します。

エクスプローラーでこのファイルにポイントを合わせクリックすると万華鏡が描画されることでしょう。

15行からなるHTMLプログラムですが、運がよければ万華鏡の画面が現れ、ゆっくり回転するはずです。

そして、再生ボタンをクリックすると《乙女の祈り》が鳴動します。

動作させるまで

ゲームなどはスイッチを入れれば、即、動作することでしょう。それが自分で作ったものが動作するのです。たった15行ですが、そこには多くのコードを参照する仕組みが組み込められています。その一部分でも齟齬があれば動作しません。

先ずは、コンピューターの仕組みに詳しい人から枠組みを作ってもらう事です。

そして毎度で恐縮ですが、絵が満載の手ほどき本を参考にすることです。

自転車の練習には、3輪車ー補助輪付き2輪車ー親から抑えてもらって走るなど段階を踏みます。

それと同じです。家族や親戚、知人にアドバイスを受けてください。

そっくり真似たものでも動作することが大切です。ハードルがたくさん立ちはだかっていて、スンナリいくことは少ないです。

解決策はネット上にあります。できれば検索の仕方をマスターして独学できるようになれば最高でしょう。

動作後にすること

艱難辛苦を経て動作に漕ぎつけたらオリジナル色を出すために、自分の名前や道筋を立ててくれた両親の名前などを載せます。それには10行目を編集します。

加えてダウンロードフリーの音楽サイトから音楽素材を入手して清涼感あふれるBGMに変更しましょう。

4行目を変更します。例題は公開サーバー上のURLアドレスですが、ローカルアドレスでも問題なく動作します。少しずつ力を付けていって機能豊富な作品を作り上げてください。

さいごに

今回のサンプルは15行からなるHTMLコードですが、重要な情報がびっしり詰まっています。

幻想的な万華鏡は12~13行のJavaScriptにより制御されます。

この稿は整った釣り堀でそれなりの魚を釣り上げるようなものです。

ゆくゆくはJavaScript言語の知識やタグを理解して、自前のプログラムコードで制御できるように期待します。

 

夏休み課題例の解説

課題例のおさらい

前回、初秋を感じさせる風景画に、郷愁を誘うBGMを流して和歌を縦書きに表示する課題を作成しました。

そして、表現方法を中心に作り方の概要を総花的な説明に終始したきらいがあります。今回は、説明しきれなかった部分について補足説明します。

最初の目標

まず、先人が発表しているサンプルコードを入手して動作させることが理解の早道になることが多いです。車を改造して公道を走ることは許されませんが、ひな形として入手したソースコードを変更して動作させても問題は起きません。

黎明期のコンピューターでは不安定なソフトウェアを動作させるとシステム破壊などがありました。システムが進化した今日、このような心配は皆無です。異常動作が自分のアプリ以外に波及することはありません。

我田引水になりますが、ハードウェアと周辺工学の進化にともなう環境整備はコンピューターの学習者にとってたいへん恵まれた状況にあると言えるでしょう。

動作確認済みと称されるコードを走らせて、その動きを観察します。その中でたった一か所を変更して動作の変化を調べましょう。例えば、コードの一部分color:red; をcolor:blue; に変えたときの動きを注視して両者の違いを確認しましょう。赤色で表示されていたものが青色に変わったことが分かれば大きな自信になることでしょう。

超簡単例


HTMLコード表示
簡単な例です。
<span style="color:red;">赤色で表示する。</span>
簡単な例です。
赤色で表示する。

HTMLコード表示
簡単な例です。
<span style="color:blue;">赤色で表示する。</span>
簡単な例です。
赤色で表示する。
少しずつ変更して違いを確認します

HTMLコード表示
簡単な例です。
<span style="color:blue;">青色で表示する。</span>
簡単な例です。
青色で表示する。

 

夏休み課題例の解説

本題の課題例の解説に入ります。課題例を隈なく理解するためには、HTMLやJavaScriptの初歩からの手ほどきが必要ですが、母校の校歌やお気に入りの歌詞を縦書きに表示するために参考になるような説明をします。

課題例の説明

前回に示したコードの行に沿って説明します。

  1. 1~7行、HTML文書であることを宣言し、縦書きライブラリーを組み込む。体系づけて知識を吸収するには《動作させながらゼロから学べるJavaScript, 256円》、《作りながら学ぶ HTML/CSSデザインの教科書, 2800円》等を参照。
  2. 8~56行、このドキュメントの表紙や縦書きで表示する主要部。
  3. 9~17行、表紙のイメージ図、再生ボタンの扱い方、BGMの曲名、本ドキュメントの著作権表示、夏休み課題例の著作権表示例などを定義する。
  4. 18~55行、JavaScriptで定義することを宣言。。
  5. 19~20行、和歌二首の現代語訳を定義、三首めに最後のメッセージを代替。
  6. 21~23行、和歌の本文を振り仮名付きで定義。縦書きはh2vRの仕様で定義。
  7. 25~26行、音声データファイル名、曲名などを定義。
  8. 27行。曲名に対する音量、タイトル文字表示色、背景画像を定義。
  9. 28行、和歌の表示順カウンタ。
  10. 29~33行、BGMのイベントオブジェクトのプレイイベントを捕捉した時の処理を定義。
  11. 34~37行。再生完了時の処理を定義。
  12. 38~54行。再生完了イベントで起動する関数。
  13. 39行、デバッグ文。
  14. 40~44行、背景画像、textcolor、ブロックを可視化、現代語訳と和歌を設定。
  15. 45~46行、切り替えを有効化。
  16. 47行、BGMの音声データを設定。
  17. 48行、BGMのタイトルを設定。
  18. 49~52行、BGMのとき、BGM関連データを設定。
  19. 53行、開始、一首目、二首目、終わりカウンタを更新。
  20. 57行、このドキュメントを締めくくる。

 

さらなる試み

ものごとを大成させるに王道はありません。当ブログでは優しいサンプルを入手して自分のものとして吸収し、それを少しずつ拡大・拡張して高みを極めることを目標にしてきました。

自分流とオーソドックスを交互に繰り返してもよいでしょう。早く自分に見合った学習法を確立されるように祈っています。

 

夏休み課題例

縦書き文化に親しむ

この記事は夏休みの課題例です。公開サーバーにアップロードすることなく、自前の環境で動作するように配慮されています。我が国の古来からの縦書き文化を尊重する意思が込められています。

電子表現においてこのような解説記事も縦書きで表現する方法もありますがそれは現実的ではありません。ひいきの引き倒しはよくありません。

伝統的な和歌、俳句、習字などの分野で縦書き文化が花開くことを願いつつ、この試みが親子で完成させる宿題のひな型になれば幸いです。

目次

  1. 準備するもの
  2. 表現の構想を練る
  3. 表現する題材を選ぶ
  4. BGMを選ぶ
  5. 具体的な表現方法
  6. 動作例
  7. サンプルコード
  8. 自前の課題を作成するには
  9. 余談
  10. さいごに

準備するもの

  1. パソコン、またはスマートフォン。
  2. テキストエディタによるテキストファイルの編集法。
  3. 画像編集ソフトとその扱い方。
  4. HTMLの初歩的な知識。
  5. マウスイベントを補足するaddEventListenerの知識。
  6. プログラムを動作させる一般的な動作環境。

 

表現の構想を練る

多くの人にアピールするにはテキストの表示に加え、写真や画像を表示すると存在感が高まります。また、バックグラウンドミュージック(BGM)として表現内容を支援したり雰囲気を和らげる音楽を流すと表現効果が格段にアップします。

 

表現する題材を選ぶ

表現する題材は古くから縦書きが似合う短歌(五七五七七)を選びました。著作物には著作権があります。

著作権の保護期間が過ぎれば、著作権が消滅するわけではありませんが著作権料等の心配はなくなります。

そこで万葉集と古今和歌集のなかから一首ずつ選びました。

  1. 万葉集 巻10-1972 作者未詳
  2. 古今和歌集 秋歌上 一六九 藤原敏行

 

BGMを選ぶ

著作権の保護期間が消滅している古典的な童謡から赤とんぼ、フリーBGM DOVA-SYNDROMEから著作権フリー素材を選択しています。

  1. 『赤とんぼ』、作詞:三木露風、作曲:山田耕筰
  2. 『Coffee Break』, DOVA-SYNDROME(by Chiaki)

 

具体的な表現方法

当記事を読み始めると文面や画像が表示され、BGMが自動的に再生されるのが理想的です。

しかしながら、今年になり主要ブラウザにおいてaudioタグのautoplayが無効になったので、音楽の再生ボタンがクリックされたら音楽が開始されます。

今までのようにすべてHTMLだけで賄うことは無理です。HTMLのコードに加え、主に動的なパートを担当するJavaScriptコードにより制御されます。細分した処理を以下に示します。

記事を読み込む。

音楽を再生するボタンのクリックで発生するイベントを捕捉できるよう仕掛けを作る。

音楽の再生完了イベントの処理を取り付ける。

《赤とんぼ》を再生する。

秋空にコスモスの花が咲き乱れる画像を描画する。

万葉集から、秋の到来を心待ちする心情を詠った和歌を表示する。

《Coffee Break》を再生する。

ススキの穂が秋空に映える画像を描画する。

古今和歌集から、秋の訪れを風の音で感じた様を詠った和歌を表示する。

むすびの言葉やエンドクレジットを表示する。

 

動作例

次の図をクリックすると別ウィンドウで《夏休み2018課題例1》が開きます。その後は、BGMの再生ボタンをクリックすれば、課題が動作します。戻るボタンをクリックすれば、当ウィンドウに戻ります。

 

サンプルコード

次のサンプルコードは、CSS,HTML,JavaScriptをひとつにまとめてあります。コピー&ペーストでソースコードをローカルディスクに格納して実行します。アップロードする場合はh2vRライブラリーを組み込むコード2行を削除しなければなりません。

縦書きライブラリーを公式サイトからダウンロードしてローカルシステム上に構築する必要がありますが、当面、当ブログが運営中止になる予定はありませんので、コピー&ペーストで作成したHTMLコードで大方のブラウザで動作するものと思われます。

<!DOCTYPE html>
<html>
<head>
<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>	<!-- when upload, delete this line -->
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR_extensions.js" charset="UTF-8"></script><!-- when upload, delete ... -->
</head>
<body>
<span style="font-size:28px; font-family:serif;">夏休み2018課題例1 </span><span id="ttl1" style="font-size:16px; font-weight:bold;">&#x1F39C;BGMのタイトル</span><span style="font-size:10px;"> &copy;TacM,2018 Ver0.03</span><BR>
<Div width="600px" height="100px" style="float:left; border:0px blue solid;">
<div style="float:left; width:250px; margin-top:14px; height:40px; font-size:16px; color:darkcyan;">再生ボタン&#x25B6;のクリックで開始</div>
<audio id="event" controls controlsList="nodownload" src="">終わり</audio><BR>
</Div>
<DIV id="v2" style="clear:both; width:600px; height:420px; border:0px green solid; font-family:serif; font-weight:bold; background-image:url('http://aidesign.lolipop.jp/wp-content/uploads/2018/08/diary2018.png'); color:midnightblue;">
<div id="v3" class="h2vr_22" style="float:left; margin-top:20px; font-size:18px; line-height:2em; width:150px; height:420px; border:0px blue solid; visibility:hidden;"></div>
<div id="v4" class="h2vr_12" style="float:left; margin-top:20px; font-size:32px; line-height:2em; width:430px; height:420px; border:0px red solid; visibility:hidden;"></div>
</DIV>
<script type="text/javascript" charset="Shift_JIS">
const yaku = ['【現代語訳】<BR>野辺を見ると、一面になでしこの花が咲いてる。<BR>私が待ち望んだ秋が近くまで来ているようだ。',
			  '【現代語訳】<BR>秋が来たと、はっきりと目には映らないが、<BR>風の音で秋の訪れに気づかされました。', ''];	//3番めはダミー
const waka =
 ['<ruby><rb>野辺</rb><rt>のべ</rt><rb>見</rb><rt>み</rt></ruby>れば<BR> なでしこの<ruby><rb>花</rb><rt>はな</rt></ruby><BR>  <ruby><rb>咲</rb><rt>さ</rt></ruby>きにけり<BR>わが<ruby><rb>待</rb><rt>ま</rt></ruby>つ<ruby><rb>秋</rb><rt>あき</rt></ruby>は<BR> <ruby><rb>近</rb><rt>ちか</rt></ruby>づくらしも<BR> <span style="font-size:20px">万葉集 巻一〇-一九七二&nbsp;作者未詳</span>',
 '<ruby><rb>秋</rb><rt>あき</rt><rb>来</rb><rt>こ</rt></ruby>ぬと<BR> <ruby><rb>目</rb><rt>め</rt></ruby>にはさやかに<BR>  <ruby><rb>見</rb><rt>み</rt></ruby>えねども<BR><ruby><rb>風</rb><rt>かぜ</rt></ruby>の<ruby><rb>音</rb><rt>おと</rt></ruby>にぞ<BR> おどろかれぬる<BR> <span style="font-size:20px">古今和歌集&emsp;秋歌上&emsp;一六九&emsp;<ruby><rb>藤原敏行</rb><rt>ふじわらのとしゆき</rt></ruby></span>', ''];//3番めダミー

const music = ["http://aidesign.lolipop.jp/wp-content/uploads/2016/08/JASRAC_000-0391-3_AkaTombo_xf_Music_Box.mp3",
			   "http://aidesign.lolipop.jp/wp-content/uploads/2018/08/Coffee_Break.mp3", "", "&#x2776;赤とんぼ", "&#x2777;Coffee Break", "&#x1F221;エンドクレジット"];
const volume = [0.5, 0.6, 1.0, 'midnightblue', 'maroon', 'pink', 'akizora2018.png', 'risshu2018.png', 'final2018.png'];	//音量を実態に合わせる
var j=0;													//&#x1F220;&#x2776;&#x2777;&#x1F221; 初 ① ② 終
var evnt = document.getElementById("event");				//BGMのイベントオブジェクト
	evnt.addEventListener('play', function(){				//プレイイベント
		if(j == 0)changeScreen();							//初回だけ、2回目以降は再生完了が代行する
		console.log("PLAY/PAUSE", j);
	});
	evnt.addEventListener('ended', function(){				//再生完了を知らせる
		console.log("ENDED", j);
		changeScreen();
	});
function changeScreen() {									//playイベントの1回目、再生完了イベントで起動
  console.log("CS-j", j, volume[j+6], volume[j+3]);
  document.getElementById("v2").style.backgroundImage = "url('http://aidesign.lolipop.jp/wp-content/uploads/2018/08/"+volume[j+6]+"')";//背景画像
  document.getElementById("v2").style.color = volume[j+3];	//textcolor
  document.getElementById("v3").style.visibility = document.getElementById("v4").style.visibility = "visible";
  document.getElementById("v3").innerHTML = yaku[j];		//現代語訳
  document.getElementById("v4").innerHTML = waka[j];		//和歌
  h2vR.switcher( 'v3' );
  h2vR.switcher( 'v4' );									//requeir h2vR_extensions.js!
  evnt.src = music[j];										//BGMの音声データ
  document.getElementById("ttl1").innerHTML = music[j+3];	//BGMのタイトル
  if(j < 2){												//次のBGMがあるときだけ
	evnt.volume = volume[j];								//BGMの音量
	evnt.play();											//console.log("changeScreen", j, "\nH =", music[j], volume[j]);
  }
  ++j;														//0、①、②、&#x1F221;
}
</script>
</body>
</html>

 

自前の課題を作成するには

今回の記事をひな型にして自前の課題を作成するには、縦書き素材、画像、BGMなどを作成しなければなりません。

ローカル環境で動作させるのであれば、それらは公開サーバーにアップロードする必要はありません。

著作権との絡みからBGMとして童謡を選びましたが、家庭で楽しむ分には最新の音楽を利用しても許されるかも知れません。

画像や音楽素材を入手して世代に合った内容に改造を試みるのも面白いでしょう。

 

余談

一般に、著作物の末尾には書籍ならば奥付、映画や動画ならばエンドクレジットを記すことが習わしです。

今回、エンドクレジットを左図のように横書きの画像で表していますが、これを縦書きの文字形式にしてオリジナル作品の一号を目指すのはいかがでしょうか。

 

さいごに

事を仕上げるには階段を上るような着実な歩みが望まれます。

絵日記を書いたり、ブログを始めるにも周辺の知識を吸収することが必要です。

テキストエディタによるテキストの編集に加えて、簡単な画像を扱えるようになると記事が華やかになります。画像の扱い方を習得しましょう。

 

地球はめぐる

立秋2018

近ごろ、大雨、強風、竜巻、河川の決壊、土砂崩れ、海の向こうでは山火事が頻発しています。

化石燃料の大量使用や森林の減少が原因なのか。

限りある地球を大切にしたいものです。

一方、八月七日は立秋です。記録的な猛暑はあと、わずかで終わってほしいです。

地球はめぐり、夏から秋の到来です。

 秋の到来

 

赤とんぼ 作詞:三木露風、作曲:山田耕筰

【現代語訳】
秋が来たと、はっきりと目には映らないが、
風の音で秋の訪れに気づかされました。
あきぬと
 にはさやかに
  えねども
かぜおとにぞ
 おどろかれぬる
 古今和歌集 秋歌上 一六九 藤原敏行ふじわらのとしゆき

 

夏祭り

眠り流し(ねむりながし、ねぶりながし)

夏祭り

眠り流しとは夏の睡魔を払う行事の総称。青森のねぶた祭り、弘前のねぷた祭りなど東北地方に多いですがこの祭りは全国的です。

伝統的なお祭りは主催者にとって、生活そのものそれ以上の感慨があることでしょう。

ここにも人口減少の現象が影を落としています。

かつては神輿を担ぐにも優先順位があり、新参者には担がせてもらえないとの嘆きがあったようですが、今では担ぎ手が減り「来る者拒まず」が定着しつつあります。

開催の意味

秀吉の茶会、お城の花見、専制時代の夏祭りは政治的な意味合いが強いとも言われています。

為政者は日ごろの締め付けを和らげ、うっぷんから目をそらせるガス抜きの効果を期待したことでしょう。

娯楽の少ない庶民には数少ないワクワク感のある時期であったことと思われます。

一般には五穀豊穣、子孫繁栄、疫病撃退を願って民衆のエネルギーをぶつけ合ったものと思われます。

夏の俳句

芭蕉が《奥の細道》を著した旅の行程で、登米-一関-平泉とたどったときに詠んだ夏の俳句を衣川の風景に重ね合わせて挙げます。

 
 夏草なつくさ
  つわものどもが
   ゆめあと
     松尾芭蕉まつおばしょう
平泉、奥の細道