日ごろの小さな目標を4題、円形スクロールで表示してみました。
スクロール領域からはみ出す部分の描画設定はoverflow属性にてhiddenを指定しますが、円形帯状に制御する代わりに縦横方向に駆使して代用します。
もっと滑らかなスクロールになるはずですが、西郷（せごどん）風に、初回はこの辺りでよかろうか。
スクロールはmarqeeタグを用いて、一時代を築いたようですがこのタグはHTML5やCSS3において、非推奨になっていますのでなるべくならば、使わないに越したことはありません。
そこでjquery.marquee.jsの利用になります。このブログでもCSSで作る全ブラウザ対応marqueeなどにおいてMarqueeWithCSSの名で何べんも取り上げています。
画像やテキストを左右の横、上下の縦スクロールして効果的な表現を可能にしています。
縦横を駆使して円形状にスクロールできないかといろいろ挑戦しましたが無理があるようです。そこでDIVの中に定義したテキストをtransform:rotateを用いて回転して描画する方法を採用しました。
にわかな挑戦のため、スムースな円形スクロールではありません。
参照先は、CSSでロゴを回転させるサンプル | WWW WATCHです。こちらは縦スクロールバーのスクロールに応じてスムースに回転表示される優れものですが、新幹線のガイド案内のように隠れたメッセージをスクロールして表示する例ではありません。
当サンプルにおいても解析が進めば期待した動作が得られるのではないだろうか。
ブラウザの再読み込みボタン
をクリックし、再実行してください。
かぞえうたの歴史はかなり古くから存在しています。娯楽と仕事が一体となったものやリズム感よろしく老若男女の間で歌われています。わらべ歌から童謡、春歌まで幅広く庶民生活になじんでいます。
かぞえうたにも種類があり、１から順に繰り上がっていくものが多いようです。日本のことばには七転び八起きのように数詞を折り込んで表現し、ことば遊びの原形と言えるのではないでしょうか。
ことば遊びのひとつとして、すでに輪環の順に四字熟語（輪環の順仕様四字熟語、数え歌仕様四字熟語）を取り上げました。
今回は夏休みの課題例になるよう全プログラムコードを公開し、左スクロールに対応すべく縦書きを止めるなど小変更を加えました。
今回は、jQueryというJavaScriptのライブラリを用いてスクロール表現を取り上げます。jQueryには使いやす機能が豊富に詰まっています。
新幹線や山手線などにおいて限定された広さの車内掲示板で多くのメッセージを表示するとき、スクロール表示されます。また、表現に動きを付けて見るものの目を惹きつけます。
<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;"> ダブル連番かぞえ歌 </span>©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'>▶</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'>▶</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が上部にくると大当たりのファンファーレが鳴り響きます。
<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;">
ラッキーセブンゲーム</span><span style="font-size:14px; color:navy;"> ©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>
プログラミング教育は「プログラマーを育てる」ことではありません。「プログラミング的思考を育むもの」です。
保証の限りではありませんがプログラミングに興味を持てば「出世に役立つ」、「お金もうけにつながる」、「異性にモテる」かも知れません。
あらゆるものがコンピューターに制御されている今日、当サンプルが楽しくゲームを作るための一助になればありがたいです。
大昔は小学校において、夏休みの自由研究が親子共同で作成する風習はありませんでした。親からアドバイスを受けるのは、ずるをしたような雰囲気がありました。
その当時は少子化からほど遠く、親はひたすら働いていた時代です。教育は学校まかせ、多くの親は「稼ぎに追いつく貧乏なし」を信じていたように思われます。
学習月刊誌には多くの自由研究が載っているのではないだろうか。夏休みも残り少なくなってきました。
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'> バダジェフスカ作曲 乙女の祈り
<span style="font-size:12px; color:navy; vertical-align:top;"><br /> R:背景色反転 △:ぼやけ変化 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輪車ー補助輪付き２輪車ー親から抑えてもらって走るなど段階を踏みます。
それと同じです。家族や親戚、知人にアドバイスを受けてください。
そっくり真似たものでも動作することが大切です。ハードルがたくさん立ちはだかっていて、スンナリいくことは少ないです。
解決策はネット上にあります。できれば検索の仕方をマスターして独学できるようになれば最高でしょう。
艱難辛苦を経て動作に漕ぎつけたらオリジナル色を出すために、自分の名前や道筋を立ててくれた両親の名前などを載せます。それには10行目を編集します。
加えてダウンロードフリーの音楽サイトから音楽素材を入手して清涼感あふれるBGMに変更しましょう。
4行目を変更します。例題は公開サーバー上のURLアドレスですが、ローカルアドレスでも問題なく動作します。少しずつ力を付けていって機能豊富な作品を作り上げてください。
今回のサンプルは15行からなるHTMLコードですが、重要な情報がびっしり詰まっています。
幻想的な万華鏡は12～13行のJavaScriptにより制御されます。
この稿は整った釣り堀でそれなりの魚を釣り上げるようなものです。
ゆくゆくはJavaScript言語の知識やタグを理解して、自前のプログラムコードで制御できるように期待します。
この記事は夏休みの課題例です。公開サーバーにアップロードすることなく、自前の環境で動作するように配慮されています。我が国の古来からの縦書き文化を尊重する意思が込められています。
電子表現においてこのような解説記事も縦書きで表現する方法もありますがそれは現実的ではありません。ひいきの引き倒しはよくありません。
伝統的な和歌、俳句、習字などの分野で縦書き文化が花開くことを願いつつ、この試みが親子で完成させる宿題のひな型になれば幸いです。
多くの人にアピールするにはテキストの表示に加え、写真や画像を表示すると存在感が高まります。また、バックグラウンドミュージック(BGM)として表現内容を支援したり雰囲気を和らげる音楽を流すと表現効果が格段にアップします。
表現する題材は古くから縦書きが似合う短歌（五七五七七）を選びました。著作物には著作権があります。
著作権の保護期間が過ぎれば、著作権が消滅するわけではありませんが著作権料等の心配はなくなります。
そこで万葉集と古今和歌集のなかから一首ずつ選びました。
著作権の保護期間が消滅している古典的な童謡から赤とんぼ、フリーBGM DOVA-SYNDROMEから著作権フリー素材を選択しています。
当記事を読み始めると文面や画像が表示され、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;">🎜BGMのタイトル</span><span style="font-size:10px;"> ©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;">再生ボタン▶のクリックで開始</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">万葉集 巻一〇-一九七二 作者未詳</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">古今和歌集 秋歌上 一六九 <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", "", "❶赤とんぼ", "❷Coffee Break", "🈡エンドクレジット"];
const volume = [0.5, 0.6, 1.0, 'midnightblue', 'maroon', 'pink', 'akizora2018.png', 'risshu2018.png', 'final2018.png']; //音量を実態に合わせる
var j=0; //🈠❶❷🈡 初 ① ② 終
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; //０、①、②、🈡
}
</script>
</body>
</html>
今回の記事をひな型にして自前の課題を作成するには、縦書き素材、画像、BGMなどを作成しなければなりません。
ローカル環境で動作させるのであれば、それらは公開サーバーにアップロードする必要はありません。
著作権との絡みからBGMとして童謡を選びましたが、家庭で楽しむ分には最新の音楽を利用しても許されるかも知れません。
画像や音楽素材を入手して世代に合った内容に改造を試みるのも面白いでしょう。
一般に、著作物の末尾には書籍ならば奥付、映画や動画ならばエンドクレジットを記すことが習わしです。
今回、エンドクレジットを左図のように横書きの画像で表していますが、これを縦書きの文字形式にしてオリジナル作品の一号を目指すのはいかがでしょうか。
事を仕上げるには階段を上るような着実な歩みが望まれます。
絵日記を書いたり、ブログを始めるにも周辺の知識を吸収することが必要です。
テキストエディタによるテキストの編集に加えて、簡単な画像を扱えるようになると記事が華やかになります。画像の扱い方を習得しましょう。
夏休みの自由研究としてコンピューター万華鏡の初期バージョンが完成しました。クリアした課題は以下の項目です。
下の図をクリックすると別ウィンドウでコンピューター版万華鏡の実行画面が現れます。
新しい画面ではマウスとキーボードにより万華鏡の描画に変化を付けられます。BGMの再生ボタンをクリックしてゆったりした雰囲気でお楽しみください。
<!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'> バダジェフスカ作曲 乙女の祈り
<span style="font-size:12px; color:navy; vertical-align:top;"><br /> R:背景色を反転 △:残像・ぼやけ変化 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;">©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>
動作コードの解説
ソースコードのほとんどは公開されているものにリンクしています。sketch.jsに小機能を加えてsketch2.jsにしました。
夏休みの自由研究として自前の作成コードが少ない割には、HTMLの数種のタグを使いこなしており難解であったことでしょう。
既存のものを集めてより付加価値の高いものを作り上げるには総合力が必要です。
不明な点は熟達者に教わるなりして完成されるように願っています。
今回は動的な表現ですがJavaScriptについてほとんど触れていません。これを踏み台にして、プログラミングについて興味が深まることを願っています。
先人の作品を模倣何かを表現したいと考え、絵を描こうとします。その前に絵に対する造詣を深めるために美術館巡りをします。それと同様にプログラミングにおいても先人の優れた作品に触れることが習得への近道になることがあります。
この回ではp5.jsという優れたライブラリーをそっくり使って、コンピューター版万華鏡を描画します。
Lauren McCarthy氏はプログラマでない人たち（アーティスト、教育者、初心者）がJavaScriptを簡単に利用できるようにするためにライブラリとしてp5.jsを開発して世に公開しました。
ここでは、開発の経緯や歴史についてはこれ以上、深入りしません。McCarthy氏はGitHubにおいてp5.jsのこと以下のように説明しています。
ソフトウエアのスケッチブックを目指しているp5.jsは描画に関する一式の機能をすべて備えています。さらに、描画するカンバスには制限がありません。ブラウザのページ全体をスケッチに使えます。このため、p5.jsはアドオンのライブラリを持っています。アドオンによって、テキストやインプット、動画やウェブカメラ、音声などのHTML5のオブジェクトを扱えます。
p5.jsはかなり大きな山と言っても過言ではありません。プログラミングの初歩者にとっては高い垣根です。ここでは中味はともかく、高級電卓を使う感覚で進めてまいります。
上記のサイトを参考にしてp5.jsを導入します。
夏休みの課題として、いきなりコードを書くのは難儀です。ここでは先人のコードをそのまま参照させてもらいました。ねらったような動作が得られたら次へのステップを考えましょう。
p5.jsはクレジット（出版物，新聞記事，テレビ番組などに使用された著作物等の出所を明示する行為）すれば非商業目的で再利用することができます。
下の図をクリックすると別枠でコンピューター版万華鏡の実行画面が現れます。従来のようにHTMLコードを埋め込んでも期待した動作にはなりません。当ライブラリーはローカル環境で実行するのを前提にしているのでしょうか。htmlファイルをアップロードしてリンクを貼って実行しています。
新しい画面でマウスとキーボードにより万華鏡の描画に変化を付けられます。
<!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>
ソースコードはすべて公開されているものばかりです。まずはサイケデリックな描画が出現することです。先人のコードを眺めて自分の引き出しを豊かにしましょう。
上記は次回以降にクリアすべき課題と考えています。
パソコンやスマホはインターネットにつながっている必要があります。テキストエディタは単機能のもので十分です。
HTMLについては《プログラミングの初歩1》などの記事を参照してください。
プログラムを動作させるローカル環境とは記事を公開する前に、自前のパソコンだけで試しに実行させる環境であり、ごく一般的なパソコンならば、暗黙のうちにこの環境にあります。
まずはローカル環境で絵日記を作成することが最初の目標です。
最後に世界中の多くの人に読んでもらうためには、記事を公開しなければなりません。公開サーバーにアップロードすることです。
学校など投稿を受け付けているサイトにアップします。SNSを運用するための十分な知識が得られたら自分のホームページを持ちましょう。
望んでもいないのにやたらと広告がつくことに抵抗がなければ、上に挙げた無料のブログやホームページを運営することができます。
そこには壁にぶち当たっても難題を自ら解決する力と意欲が要求されます。
解決策はほとんどネット上にありますが最適解を見つけるまでには地道な努力が必要です。
まずは高いハードルは見送り、徐々に力を養いましょう。
紙媒体の原稿用紙は単色が割安になるが、電子媒体は色付きでも変わりないのでお祭り騒ぎのような色は避けながら落ち着いた色を選択する。
上の画像はWindowsに付属しているペイントで作成。
電子絵日記のサンプル-01
途中、峠の茶店によって、いもうととぼくはかき氷、おとうさんとおかあさんはところてんを食べました。
<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>
事を仕上げるには階段を上るように一段ずつ進めることが大切です。絵日記を書いたり、ブログを始めるにも周辺の知識を吸収することが必要です。
HTML文書の本文に画像を表示させたい場合は、「img要素」を使います。img要素は、imgタグを使って、下のように書きます。
<img src=”URL” width=”幅” height=”高さ” alt=”代替テキスト”>
テキストエディタによるテキストの編集に加えて、簡単な画像を扱えるようになると記事が華やかになります。画像の扱い方を習得しましょう。
画像を象るにあたり、ハート型写真を作るで画像を重ね書きする方法をまとめてあります。
画像は一般に長方形で管理されます。時計など、丸い画像は内部的に細工が施されて円形に描画されます。
長方形の風景画像をひょうたん形に描画したい時があります。
また、象る形をある条件によって変更する場合は、元の画像を変更せずにフィルターの働きをする効果画像を変更する方法があります。
この辺りの確認できた事柄をまとめます。
画像に柔らかな滑らかな味付けをするために、角を丸くするborder-radius属性があります。角を滑らかにすることを面をとると言いますが、それを幅、高さの50％まで拡大すると楕円、真円に縁どることができます。2例を以下に挙げます。ソースコードはひとつにまとめました。
<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属性を利用するともっと高度な重ね合わせの描画をすることができます。この象り法は長方形に表示される万華鏡を円形に描画する手法に応用します。