カテゴリー別アーカイブ: プログラミング

Programing

生活心得

小さな目標

日ごろの小さな目標を4題、円形スクロールで表示してみました。

生活心得

  1. ⛑学童に注意!⛐道路にはいつも☠危険が潜んでいる☪暗い夜☀早めに☉ライトの点灯を⚠
  2. 歩きスマホは大事故につながる☻損害賠償、数千万円⚡賠償破産に☠歩きスマホは危ない⚠
  3. 一日3食バランスのある食事☕気楽に毎日続けられる楽しみを持つ⛳明日は明日の風が吹く
  4. 才能の差は小さいが、努力の差は大きい。継続の差はもっと大きい!⛭♡継続は力なり⚠✨

 

スクロール領域からはみ出す部分の描画設定はoverflow属性にてhiddenを指定しますが、円形帯状に制御する代わりに縦横方向に駆使して代用します。

もっと滑らかなスクロールになるはずですが、西郷(せごどん)風に、初回はこの辺りでよかろうか。

動作例

Startボタンをクリックして開始です。

 円形スクロール ©TacM,2018 Ver0.03
🗾
🌏
生活🏫心得
日ごろの心構え、たしなみ、守るべきことがら、常に心掛けなければならないこと

 

円形状スクロール

スクロールのいろは

スクロールはmarqeeタグを用いて、一時代を築いたようですがこのタグはHTML5やCSS3において、非推奨になっていますのでなるべくならば、使わないに越したことはありません。

そこでjquery.marquee.jsの利用になります。このブログでもCSSで作る全ブラウザ対応marqueeなどにおいてMarqueeWithCSSの名で何べんも取り上げています。

画像やテキストを左右の横、上下の縦スクロールして効果的な表現を可能にしています。

縦横を駆使して円形状にスクロールできないかといろいろ挑戦しましたが無理があるようです。そこでDIVの中に定義したテキストをtransform:rotateを用いて回転して描画する方法を採用しました。

にわかな挑戦のため、スムースな円形スクロールではありません。

参照先は、CSSでロゴを回転させるサンプル | WWW WATCHです。こちらは縦スクロールバーのスクロールに応じてスムースに回転表示される優れものですが、新幹線のガイド案内のように隠れたメッセージをスクロールして表示する例ではありません。

当サンプルにおいても解析が進めば期待した動作が得られるのではないだろうか。

 

円形状スクロール動作例

ブラウザの再読み込みボタンをクリックし、再実行してください。

🏫
🚕
©TacM,2018 Ver0.02

 

 

ダブル連番かぞえうた

かぞえうたの歴史

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

かぞえうたにも種類があり、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言語の知識やタグを理解して、自前のプログラムコードで制御できるように期待します。

 

夏休み課題例

縦書き文化に親しむ

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

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

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

目次

  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として童謡を選びましたが、家庭で楽しむ分には最新の音楽を利用しても許されるかも知れません。

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

 

余談

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

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

 

さいごに

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

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

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

 

プログラミングの初歩6

コンピューター版万華鏡

夏休みの自由研究としてコンピューター万華鏡の初期バージョンが完成しました。クリアした課題は以下の項目です。

  • タイトルを付ける。
  • 重厚なBGMを流す。
  • BGMの参照を明記する。
  • 円筒万華鏡を模す。
  • キーボードでも背景色を反転できる。
  • メニューを表示する。
  • 参照した著作物のクレジットを表示する。
  • 著作権表記とバージョン情報を付記する。

万華鏡(錦眼鏡)を動作

下の図をクリックすると別ウィンドウでコンピューター版万華鏡の実行画面が現れます。

新しい画面ではマウスとキーボードにより万華鏡の描画に変化を付けられます。BGMの再生ボタンをクリックしてゆったりした雰囲気でお楽しみください。

  1. マウスクリック: カンバスの背景色を「黒」「白」のいずれかに切替
  2. 「R」キー: マウスクリックと同じ機能
  3. 「スペースキー」: 残像・ぼやけを4段階に変更
  4. 「H」キー: ステージの回転を止める(停止時に押すと再開)
  5. 「P」キー: 画面イメージをPNG画像として保存
  6. 「▶」ボタン:BGM再生
  7. 「⏸」ボタン:BGM停止
  8. 「←」ボタン: このページに戻る

 

 

動作コード

<!DOCTYPE html>
<html>
<body>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>KaleidoSimple.html for p5.js</title>
</head>
<audio id='s0' 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; font-size:18px; color:darkcyan; border:0px solid blue'>&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; width:600px; height:600px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
<div id="m0" style="position:absolute; left:0px; top:0px; font-size:28px; color:pink; font-weight:bold; line-height:1.2em;">幻想的な<BR>万華鏡</div>
<img id="d0" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/illust4.png" width="300" height="86" style="position:absolute; left:0px;top:40px; overflow:hidden; clip:rect(0px 60px 86px 0px)">
<div id="m1" style="position:absolute; left:440px; top:0px; font-size:24px; color:navy;">Kaleidoscope</div>
<img id="d1" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/illust4.png" width="300" height="86" style="position:absolute; left:430px;top:20px; overflow:hidden; clip:rect(0px 160px 86px 60px)">
<div id="m2" style="position:absolute; left:0px; top:550px; font-size:24px; color:navy;">参照:p5.js<BR><span style="font-size:14px; vertical-align:top;">&copy;TacM,2018 ver0.01</span></div>
<img id="d2" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/illust4.png" width="300" height="86" style="position:absolute; left:-170px;top:455px; overflow:hidden;clip:rect(0px 215px 86px 160px)">
<div id="m3" style="position:absolute; left:430px; top:570px; font-size:24px; color:navy;">夏休みの課題例</div>
<img id="d3" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/illust4.png" width="300" height="86" style="position:absolute; left:300px;top:485px; overflow:hidden; clip:rect(0px 300px 86px 215px)">
</DIV>
<div style="position:absolute; left:0px; top:670px;">
《p5.jsはLauren McCarthyによって作成され、共同編集者のコミュニティによって開発され、 Processing FoundationとNYU ITPのサポートを受けています。》
</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>

 

動作コードの解説

 

  1. ①~⑧行、htmlで記述、ヘッダー、タイトル情報。
  2. ⑨~⑩行、BGM「乙女の祈り」を読み込み、再生・一時停止、音量の各機能を制御するコントロールを表示する。
  3. ⑪行、BGMの作曲者等を表示する。
  4. ⑫行、マウスとキーボードによるメニューを表示する。
  5. ⑬~㉓行、画像にテキストを重ね書きする指示を表示する。
  6. ⑭~㉒行、四隅に絵とメッセージを表示する。
  7. ㉔~㉖行、p5.jsのクレジット。
  8. ㉗行、ライブラリーp5.jsの縮小版を読む。
  9. ㉘行、p5.jsの制御部。
  10. ㉙~㉚行、タグを閉じる要素。

ひとこと

ソースコードのほとんどは公開されているものにリンクしています。sketch.jsに小機能を加えてsketch2.jsにしました。

 

考察

夏休みの自由研究として自前の作成コードが少ない割には、HTMLの数種のタグを使いこなしており難解であったことでしょう。

既存のものを集めてより付加価値の高いものを作り上げるには総合力が必要です。

不明な点は熟達者に教わるなりして完成されるように願っています。

今回は動的な表現ですがJavaScriptについてほとんど触れていません。これを踏み台にして、プログラミングについて興味が深まることを願っています。

 

プログラミングの初歩5

先人の作品を模倣

何かを表現したいと考え、絵を描こうとします。その前に絵に対する造詣を深めるために美術館巡りをします。それと同様にプログラミングにおいても先人の優れた作品に触れることが習得への近道になることがあります。

この回ではp5.jsという優れたライブラリーをそっくり使って、コンピューター版万華鏡を描画します。

p5.jsとは

Lauren McCarthy氏はプログラマでない人たち(アーティスト、教育者、初心者)がJavaScriptを簡単に利用できるようにするためにライブラリとしてp5.jsを開発して世に公開しました。

開発機構からのP5.jsインストール方法画像

ここでは、開発の経緯や歴史についてはこれ以上、深入りしません。McCarthy氏はGitHubにおいてp5.jsのこと以下のように説明しています。

ソフトウエアのスケッチブックを目指しているp5.jsは描画に関する一式の機能をすべて備えています。さらに、描画するカンバスには制限がありません。ブラウザのページ全体をスケッチに使えます。このため、p5.jsはアドオンのライブラリを持っています。アドオンによって、テキストやインプット、動画やウェブカメラ、音声などのHTML5のオブジェクトを扱えます。

 

p5.jsを導入する

p5.jsはかなり大きな山と言っても過言ではありません。プログラミングの初歩者にとっては高い垣根です。ここでは中味はともかく、高級電卓を使う感覚で進めてまいります。

 

上記のサイトを参考にしてp5.jsを導入します。

p5.jsでコードを書く

夏休みの課題として、いきなりコードを書くのは難儀です。ここでは先人のコードをそのまま参照させてもらいました。ねらったような動作が得られたら次へのステップを考えましょう。

p5.jsはクレジット(出版物,新聞記事,テレビ番組などに使用された著作物等の出所を明示する行為)すれば非商業目的で再利用することができます。

コンピューター版万華鏡

下の図をクリックすると別枠でコンピューター版万華鏡の実行画面が現れます。従来のようにHTMLコードを埋め込んでも期待した動作にはなりません。当ライブラリーはローカル環境で実行するのを前提にしているのでしょうか。htmlファイルをアップロードしてリンクを貼って実行しています。

新しい画面でマウスとキーボードにより万華鏡の描画に変化を付けられます。

  1. マウスクリック: カンバスの背景色を「黒」「白」のいずれかに切替
  2. スペースキー: 残像・ぼやけを変更
  3. 「H」キー: ステージの回転を止める(停止時に押すと再開)
  4. 「P」キー: 画面イメージをPNG画像として保存
  5. 「←」ボタン: このページに戻る

 

サンプルコード

<!DOCTYPE html>
<html>
<body>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Psychedelic Kaleidoscope 3 for p5.js</title>
</head>
<script src="https://infosmith.biz/scripts/035-kaleidoscope/libraries/p5.min.js"></script>
<script src="https://infosmith.biz/scripts/035-kaleidoscope/sketch.js"></script>
</body>
</html>

 

サンプルコードの解説

  1. ①~⑧行、htmlで記述、ヘッダー、タイトル情報。
  2. ⑨行、p5.jsライブラリーから冗長度を省いたファイル。
  3. ⑩行、制御ソースコード、初期化時に1回動作するsetup関数とフレーム起動タイミングで毎回起動するdraw関数を含む制御処理コード。
  4. ⑪~⑫行、タグを閉じる要素。

ひとこと

ソースコードはすべて公開されているものばかりです。まずはサイケデリックな描画が出現することです。先人のコードを眺めて自分の引き出しを豊かにしましょう。

 

魅力的な万華鏡にするには

  • タイトルを付ける。
  • 重厚なBGMを流す。
  • BGMの参照を明記する。
  • 円筒万華鏡を模す。
  • キーボードでも背景色を反転できる。
  • メニューを表示する。
  • 参照した著作物のクレジットを表示する。
  • 著作権表記とバージョン情報を付記する。
  •  

    上記は次回以降にクリアすべき課題と考えています。

     

    電子絵日記の作り方

     

    用意するもの

    1. パソコン、またはスマートフォン。
    2. テキストエディタとテキストファイルの作り方の知識。
    3. 画像編集ソフトとその扱い方。
    4. HTMLのちょっとした知識。
    5. プログラムを動作させるローカル環境。
    6. 記事(プログラム)を公開する環境。

     

    補足説明

    パソコンやスマホはインターネットにつながっている必要があります。テキストエディタは単機能のもので十分です。

    HTMLについては《プログラミングの初歩1》などの記事を参照してください。

    プログラムを動作させるローカル環境とは記事を公開する前に、自前のパソコンだけで試しに実行させる環境であり、ごく一般的なパソコンならば、暗黙のうちにこの環境にあります。

    まずはローカル環境で絵日記を作成することが最初の目標です。

    最後に世界中の多くの人に読んでもらうためには、記事を公開しなければなりません。公開サーバーにアップロードすることです。

    学校など投稿を受け付けているサイトにアップします。SNSを運用するための十分な知識が得られたら自分のホームページを持ちましょう。



    望んでもいないのにやたらと広告がつくことに抵抗がなければ、上に挙げた無料のブログやホームページを運営することができます。

    そこには壁にぶち当たっても難題を自ら解決する力と意欲が要求されます。

    解決策はほとんどネット上にありますが最適解を見つけるまでには地道な努力が必要です。

    まずは高いハードルは見送り、徐々に力を養いましょう。

     

    具体的な作成手順

    1. 絵日記の原稿用紙を作る。用紙の上部にはヘッダー領域、次に絵を載せる領域を用意する。最後に本文領域とする。日本語の絵日記ならば上図のように縦書きが多く、最上部に絵日記画像、その下右にヘッダー、左側に縦書きの本文が定番ですが、縦書きは初心者にとってハードルが高く今回は、見栄えよりも作りやすさを重要視して横書きにする。

      紙媒体の原稿用紙は単色が割安になるが、電子媒体は色付きでも変わりないのでお祭り騒ぎのような色は避けながら落ち着いた色を選択する。



      上の画像はWindowsに付属しているペイントで作成。

    2. 絵日記画像を作る。お絵かきソフトなどで手書きする雰囲気で作れれば最高。絵日記作品をコンクールなどに出品する場合はおすすめできないが、そうでなければ著作権フリーなカット集などから実際に体験した内容と似た画像を確保することも可能。
    3. 絵日記の文章を作成する。テキストに絵文字(📖)を入れてインパクトを付けることもできる。
    4. 上から、日付、絵日記画像、本文の順に配置されるようにposition absolute属性を利用して調整する。
    5. ローカル環境で動作を確認する。
    6. 記事を公開する。

     

    動作例

    1. 家族四人で花火大会に出かける日の朝の情景を日記にした。
    2. そのほか、花火大会会場への道すがら峠の茶店における一家団欒を付け加えた。

    電子絵日記のサンプル-01

    8月11日(土) 快晴
    お盆前に、おとうさん、おかあさん、ぼく、いもうとの四人で花火大会に出かけてきました。その日は早起きして、近くの広場でラジオ体操に参加し、となりのおねえちゃんからハンコを押してもらいました。

    途中、峠の茶店によって、いもうととぼくはかき氷、おとうさんとおかあさんはところてんを食べました。

     

    サンプルコード

    <html>
    <head>
    <style type="text/css">
    .figure {
    	background-image: url("http://aidesign.lolipop.jp/wp-content/uploads/2018/07/enikki-82.png");	/* 絵日記原稿用紙 */
    	width:  450px;													/* 縦横を原寸に */
    	height: 633px;													/* 縦横を原寸に */
    	font-size:26px;													/* フォントサイズ */
    }
    </style>
    </head>
    <body>
    <span style="font-size:32px">電子絵日記のサンプル-01</span>
    <Div style="position:relative;">
    <div class="figure"><span id="mdy" style="position:absolute; left:150px; top:29px;">8月11日(土) 快晴</span></div>
    <img style="position:absolute; left:65px; top:75px; width:320px; height:240px" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki5.png">
    <div style="position:absolute; left:22px; top:330px; width:408px; height:270px; border:0px solid blueviolet; font-size:21px;"><span>お盆前に、おとうさん、おかあさん、ぼく、いもうとの四人で花火大会に出かけてきました。その日は早起きして、近くの広場でラジオ体操に参加し、となりのおねえちゃんからハンコを押してもらいました。</span>
    <p>途中、峠の茶店によって、いもうととぼくはかき氷、おとうさんとおかあさんはところてんを食べました。</p>
    </div>
    </Div>
    </body>
    </html>
    

     

    さいごに

    事を仕上げるには階段を上るように一段ずつ進めることが大切です。絵日記を書いたり、ブログを始めるにも周辺の知識を吸収することが必要です。

    img要素とは

    HTML文書の本文に画像を表示させたい場合は、「img要素」を使います。img要素は、imgタグを使って、下のように書きます。

    <img src=”URL” width=”幅” height=”高さ” alt=”代替テキスト”>

     

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

     

    プログラミングの初歩4

    画像をかたどる

    画像を象るにあたり、ハート型写真を作るで画像を重ね書きする方法をまとめてあります。

    画像は一般に長方形で管理されます。時計など、丸い画像は内部的に細工が施されて円形に描画されます。

    長方形の風景画像をひょうたん形に描画したい時があります。

    また、象る形をある条件によって変更する場合は、元の画像を変更せずにフィルターの働きをする効果画像を変更する方法があります。

    この辺りの確認できた事柄をまとめます。

    縁どる方法

    画像に柔らかな滑らかな味付けをするために、角を丸くするborder-radius属性があります。角を滑らかにすることを面をとると言いますが、それを幅、高さの50%まで拡大すると楕円、真円に縁どることができます。2例を以下に挙げます。ソースコードはひとつにまとめました。

    クラシック 9枚/全48枚

    このdivが丸くなります。

    border-radiusを使用したサンプル

    <style type="text/css">
    .kadomaruR {
      width: 400px;
      height: 60px;
      background-color:aliceblue;
      border-radius:10px;
      border:2px solid purple;
      color:green;
    }
    .kadomaru {
    	background: lightcyan;											/* 背景色をライトシアンに */
    	border: 5px solid orange;										/* 枠線を付加 */
    	background-position: left top;									/* 横長画像の左上を基準に表示 */
    	border-radius: 50%;												/* 角丸半径を50%にする(=円形にする) */
    	width:  300px;													/* 縦横を原寸に */
    	height: 300px;													/* 縦横を原寸に */
    }
    </style>
    <!----------------------------------------- border-radius, four corner ------------------------------------->
    <div class="kadomaruR">
    <span style="font-size:40px;">クラシック</span><span style="font-size:16px;color:red;"> 9枚/全48枚</span>
    </div>
    <!----------------------------------------- border-radius, sheerCircle -------------------------------->
    <BR>
    <div class="kadomaru">このdivが丸くなります。</div>
    

    重ね書きによる画像縁取り

    border-radiusによる画像縁取りはひょうたんのような複雑な形に象るには不向きです。このような場合、重ね書きによる縁取りが似合います。以下に日本3景の天橋立の画像を加工前の画像とともに円形に縁どった例を示します。

    加工前の画像
     

     

    画像重ね合わせ方式

    重ね書き画像縁取りサンプルコード

    <html>
    <head>
    <style type="text/css">
    .figure {
    	background-image: url("http://aidesign.lolipop.jp/wp-content/uploads/2018/04/P17_Amanohashidate.png");/* 表示する画像 */
    	width:  600px;													/* 縦横を原寸に */
    	height: 600px;													/* 縦横を原寸に */
    }
    </style>
    </head>
    <body>
    <span style="font-size:24px">画像重ね合わせ方式</span>
    <Div style="position:relative;">
    <div class="figure"></div>
    <img style="position:absolute; top:0; width:600px; height:600px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
    </Div>
    </body>
    </html>
    

    縁取り画像の作り方

    天橋立を円形に縁どる図形(poly-99.png)の作り方を挙げます。Windowsに備え付けのペイントなどの図形エディタで図形メニュー-楕円形を選びます。

    線の幅を8pxにして楕円の縦横長さを同値にして真円を描きます。その後、中央部を透明色にして保存します。

    重ね書きの推移

    画像AにBを重ね合わせるとCの状態になります。

    JavaScriptのcanvasにおいて、globalCompositeOperation属性を利用するともっと高度な重ね合わせの描画をすることができます。この象り法は長方形に表示される万華鏡を円形に描画する手法に応用します。