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

異彩を放つ表現

ねむの木の花言葉

下の画像において、横左、上、横右の3スクロールが独立して動作します。表示色、表示時間、スクロール方向を別々に設定しています。大事な情報はひときわ目を引く色や長時間表示に設定することも可能です。

画像の切り替えはJavaScriptにて制御されています。たとえば、早朝、昼、夕方の時間によって自動的にメッセージを変更することもできます。状況に応じて表現を変えることは大きな強みです。知恵を絞って異彩を放つ情報発信にご利用ください。

合歓(ねぶ)の花に添えて ver0.05 ©Aidesign,2016


合歓(ねむ、ねぶ)は日が落ちるころ、その葉と葉が合掌して眠るように閉じるので眠りの木、ねぶりの木とも呼ばれています。

葉が閉じるのと入れ替わるように淡紅色の花が開きます。木と花の様子から合歓という漢字になり、そこから推察されるように、盛り上がっている二人が共寝して相歓び合う意味が含まれています。

この歌は、紀郎女が大伴家持に合歓の木に想いを添えて贈ったものとされています。万葉集には清純、清楚から妖艶、官能的な大人の雰囲気まで幅広く集成されています。


ねむの木の花言葉

歓喜

胸のときめき

創造力

ねむの花に添えて

ねぶの木の花に想いを込める

ねむの花に想いを込めてプレゼントします。テキストと画像の縦スクロールおよびテキストの横スクロールはmarquee(マーキー)タグを使っています。縦スクロールにおいて、FireFox、IE、Edgeは脈動ぎみですがChromeはスムースな動きです。

お店の販売促進に、メッセージのスクロール表示を使ってみてはいかがでしょう。

合歓(ねぶ)の花に添えて ver0.03


合歓(ねむ、ねぶ)は日が落ちるころ、その葉と葉が合掌して眠るように閉じるので眠りの木、ねぶりの木とも呼ばれています。

葉が閉じるのと入れ替わるように淡紅色の花が開きます。木と花の様子から合歓という漢字になり、そこから推察されるように、盛り上がっている二人が共寝して相歓び合う意味が含まれています。

この歌は、紀郎女が大伴家持に合歓の木に想いを添えて贈ったものとされています。万葉集には清純、清楚から妖艶、官能的な大人の雰囲気まで幅広く集成されています。


ねむの木の花言葉

歓喜

胸のときめき

創造力



雅なお誘い

  Ver0.01

自由研究その後

重ね表示例

互換性を重視して《表示例》が先頭に置かれています。

yama note play 8月4日       はらたいら
きょうは、いもうと、お父さん、お母さん、僕の四人でプールに出かけました。
お父さんから新しいおよぎを教えてもらいました。               Medium-D.html

自由研究3

自由研究から得たもの

夏休みの自由研究で文字と画像の重ね書きで奇妙な現象に遭遇しました。画像表示の際、透過率を1より小さな値で使っているときはわからなかったのですが、透過率を指定しないで文面を先に、画像を後に指定すると文面は表示されません。このような場合、文面を後に指定すれば事なきを得ます。

透過率を指定しない使い方

透過率の暗黙値は1.0ですが、透過率を指定しない使い方において、テキストと重なった部分の画像が黒っぽいとき、テキストが見にくくなります。その場合は画像の透過率を下げるかテキストの色を、黒から離れた色にするとよいでしょう。

momiji2

重ね表示の利害得失

重ね表示はスペースの節約になりますが、見にくくなることがあります。最近では新聞のテレビ番組欄にも使用され、多彩な表現に目を見張ることがあります。意表をついて注意を引き付けることができそうです。芸域を広げて魅力的なサイトを構築しましょう。

透かし画像とテキストの共存

画像よりテキストの優位

ウェブサイトには文字としてのテキストの他、画像データが検索対象になります。その他、音声や動画データなどがありますが、テキストが優先されて検索されると思われます。

アナログ的なイメージはともかく、文字ならば画像データではなく情報量の小さいテキストとして表現した方が得策です。

文字の中に透かし画像を重ねて扱うことができれば、情報量の節約になります。透かし画像について、Microsoft Wordがサポートしていて、極秘資料の表紙に、社外秘と判を押すような利用方法が一般化しています。

書類作成ツールは次の図のように表紙や目次に赤色で、関係者のみ回覧、複写禁止、極秘、confidential、secretなどと注意を喚起するような表現をサポートしています。 関係者のみ回覧

top-pic

透かし文字を取り扱う

当ブログでも、透かし画像の使い方で取り上げました。

透かし文字を取り扱うには、MicrosoftのWORDが最低限、必要ではと案じていたところ、AllAboutデジタルさんが《画像上の自由な位置に文字を重ねる方法 》にて、文字と画像を重ねて表現する方法を解説されていました。

あうん

画像の中にテキストが共存して見事に生かされています。そのテクニックを発展させて、この記事がまとめられています。

長い文章では、段落をまとめてタイトルにします。読む側はそのタイトルを意識して次の段落に進みます。この場合、必ずしもタイトルにしないで、説明内容を示したいことがあります。そのような場合に、透かし文字を使うことができます。

文字と画像を重ねて表現する例

犬看板

透かし文字にするには、透かし文字をサポートするWORDなどのツールを用意して、最終的には画像データに変換することが必要です。

専門ツールを準備してその都度、変換することは、編集や更新には不利です。

そこで、画像に重ねてテキストのまま、表現する方法を探していたところ、先の記事を発見しました。

その記事の肝は以下のようです。

<p style="position: relative;">
   <img src="dog.jpg" width="320" height="140" alt="犬看板" /><br />
   <span style="position: absolute; top: 15px; left: 150px; width: 150px;">
      看板の内側に表示する文章です。
   </span>
</p>

今回の方法

今回は、画像の空白部分だけでなく、画像イメージと文字を共存させるために、画像の透過率を1.0よりも小さな値を採用しています。透過率の適切な値は、画像とテキストの濃淡やどちらを引き立たせるかによって決まります。

発展性

この記事では、テキストを動的に変更する部分は割愛されていますが、<div>や<span>タグにid属性を定義し、document.getElementById(“hoge”).innerHTMLにより、メッセージを更新してダイナミックな記事にすることができます。

サンプルソースコード

<html>
<p>
<div id="hd1" style="width:440px;height:300px;background:'lemonchiffon';border:blue solid 1px;">
<span style="font-size:24px; color:lime;">洛北の魅力</span></p>
<p>
<span style="font-size:16px; color:black; font-family:serif;">
京都駅から北側に位置している洛北エリアには、地下鉄烏丸線と叡山電車が走っていて、比叡山延暦寺、上賀茂神社は世界遺産に登録されています。<BR><BR>
洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。<BR><BR>
日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。</span>
</div>
</p>

<div id="hd2" style="width:440px;height:260px;background:'lemonchiffon';border:blue solid 1px;">
<p style="position: relative;">
  <span style="font-size:16px; position:absolute; top:0px; left:0px; width:440px; font-family:serif;">
京都駅から北側に位置している洛北エリアには、地下鉄烏丸線と叡山電車が走っていて、比叡山延暦寺、上賀茂神社は世界遺産に登録されています。<BR><BR>
洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。<BR><BR>
日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。<BR>
                     Medium-C.html</span>
  </span>
  <img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/sakura1.png" width="102" height="60" style="opacity: 0.5;" alt="sakura" align="right"/>
  <img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/rakuhoku-3.png" width="440" height="99" style="opacity: 0.3;" alt="rakuhokunomiryoku"/>
  <img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/momiji2.png" width="102" height="60" style="opacity: 0.5;" alt="momiji"/>
</p>
</div>
<script type="text/javascript" charset="Shift_JIS">
</script>
</html>

実行例

洛北の魅力

京都駅から北側に位置している洛北エリアには、地下鉄烏丸線と叡山電車が走っていて、比叡山延暦寺、上賀茂神社は世界遺産に登録されています。

洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。

日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。

京都駅から北側に位置している洛北エリアには、地下鉄烏丸線と叡山電車が走っていて、比叡山延暦寺、上賀茂神社は世界遺産に登録されています。

洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。

日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。
                     Medium-C.html
sakura rakuhokunomiryoku momiji

 

夏休み自由研究で絵日記を作る2

作る喜び

好きこそ物スポーツや学業で得意、不得意はつきものです。好きなもの、得意なものだけに傾注せずに幅広く知識や技量を習得しなさいと教育者は語ります。社会の仕組みがそのように作られているのならば、それもやむを得ないことでしょう。

オリンピックがたけなわです。強制された練習では世界一は難しいようです。苦しいけれど楽しいといった雰囲気がないと長続きしません。自由研究においても創作意欲、創る喜びを感じて欲しいものです。

先日、夏休み自由研究で絵日記を作るを発表しましたが、今回、改訂しましたので、第2弾としてお届けします。

改良点

最大の改良点は、再利用(リユース)にあります。ゴミを減らすことの一つに再利用があります。絵日記は当日、1回限りの利用は少なく、作成や読込みにおいて、複数日にまたがることが多く、このたびの改訂で読込みなどが改良されています。

reuse再実行にはアプリのロードをし直すのが簡単ですが、システム全体に負荷をかけることになります。この場合、再利用の処理を考慮するとパフォーマンスが向上します。

絵日記描画概要

ここでは説明上、多くの画面が表示されます。クリックして動作させるには末尾の実行例画面を用います。

head1

head2

 

shioriasagao

 

イベントと駆動処理

ブラウザがウェブサイトの読込み完了時に、日記のカレンダーを作成し、カレンダーの日付をクリックしたときに、指定された日記のページをめくる処理を設定します。また、別の日付の日記を見ることができるように前画面に戻る駆動処理を関連づけます。

EVENT

ローカル環境における実行方法

サイト上で実行するコードは『サンプルコード』に示してありますが、右クリック-ページのソースを表示にて得る方法もあります。それから4行目のUPLOAD定数を”image/”;のように変更し、enikkiData.jsや画像ファイルを所定のところに用意して実行環境を作り上げます。

夏休みの自由研究で絵日記を作るを完全に理解してから第2弾に進まれますように。また、ローカル環境におけるJavaScriptを実行する際、『JAVAScriptがローカル環境で利用できるか』などの記事を参考にされるとよいでしょう。

手作りへの想い

毎日の天候を逐一、記録に残すことは簡単に見えて地道な努力が必要です。かつて、8月末日にまとめて新聞に載ったことがありました。今では気象庁やライブドアなどのサイトから過去の天気を無料でダウンロードすることができます。

WeatherHacks

公開されたAPIを組み込んで、天気予報を記事の中に埋め込むことは天気情報を取得する関数で取り上げました。割りとスムースにできた記憶がありますが、過去の天気をオンラインで取得することは難しそうなので将来の宿題にしました。

コードの説明

①1行、htmlタグの宣言。
②2行、別ファイルとして作成されたソースコード[enikkiData.js]を読み込む。
③4行、ローカル環境で動作させる場合は、UPLOAD定数を変更する。
④5~6行、描画位置の調整用。
⑤7行、夏休み開始日を定義する。7月14日ならば13と定義。
⑥9~10行、絵日記画像を早めにロードする。
⑦11行、ロード時に起動する関数を定義する。前画面に戻るボタンの押下でも起動。
yamadataro ⑧12~45行、関数の起動イベントが2種、引数を持つ。
⑨15行、再実行のとき、前画面を消去する。
⑩16~22行、横縦のグリッド線を表示、外側は太い線で。
⑪23~29行、日記作成済みなら升目を色付きでマーク。
⑫30~31行、7月と8月を区別する表示色を設定する。
⑬32~33行、日付番号を表示する。
⑭35~38行、所定の位置に7月、8月をピンク色で表示。
⑮39~40行、サンプル絵日記を透かし絵で描画する。
⑯41行、透過率を元に戻しておく。
⑰42~43行、初回の時、clickイベントリスナーを登録。
⑱46~70行、canvas clickイベント関数を定義, 指定された日記のページをめくる。
⑲47~51行、7行7列のマウスクリック位置の升目を特定する。
⑳52~54行、夏休み期間外を無効にし、日記表示日を通算番号に変換
2157~69行、絵日記を表示する。この行で前表示をクリアする。
2260行、天候データを作成する。
2359~63行、月日と天候を表示する。
2464行、前画面に戻るメッセージに切り替える。
2565~66行、日記本文を表示する。
2667~69行、絵日記画像をロードし、500ミリ秒後に、描画されるように設定。
2772~74行、前画面に戻るボタンが押されたときに動作する処理
2876~78行、ロードが指定されて500ミリ秒後に絵日記画像が表示される。
2979~90行、スラッシュを改行コードに変換してテキストを表示する関数。
3091~93行、日付を画像ファイル名に変換する関数。
3196行、サイトがロードされるときに駆動する関数を取り付ける。
3299行、前画面に戻るボタンが押されたときに動作する関数を取り付ける。
33100行、canvasエリアを定義する。

サンプルコード

<html>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/enikkiData.js" charset="Shift_JIS"></script>
<script type="text/javascript" charset="Shift_JIS">
const UPLOAD="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/"; //"image/";
const BX = 10;                       //描画位置規定値-x Medium-B.html
const BY = 10;                       //描画位置規定値-y
const z = 13;                        //7月14日
var ctx;                             //コンテキストを退避する
var eImage = new Image();            //えにっき画像を早めにロードする
    eImage.src = UPLOAD+"asagao.png";//ファイル名を指定して画像をロードする
function starting(regist){           //ロード時に起動する関数、カレンダーを作る
  var canvas = document.getElementById('calender');  //描画コンテキストの取得
  if (canvas.getContext){            //サポートか
    ctx = canvas.getContext('2d');   //描画コンテキスト
    ctx.clearRect(0, 0, 720, 540);   //画面をクリア
    for(var i=0; i<8; ++i){          //0 1 2 3 4 5 6 7
        ctx.beginPath();
        ctx.lineWidth = (i%7) ? 1 : 4; //外枠を太くする, 0/7の時は4, 1~6の時は1
        ctx.moveTo(BX, BY+i*45); ctx.lineTo(BX+60*7, BY+i*45); //x-axis
        ctx.moveTo(BX+i*60, BY); ctx.lineTo(BX+i*60, BY+45*7); //y-axis
        ctx.stroke();
    }
    for(i=0; i<49; ++i){             //49日間の日付を表示する
      var x = i % 7;                 //x方向位置
      var y = Math.floor(i / 7);     //y方向位置
      if(enikki[i][0] != ""){        //天候が設定されているか
        ctx.fillStyle = "lightcyan"; //"aliceblue";
        ctx.fillRect(BX+x*60+4, BY+y*45+3, 53, 40);
      }
      ctx.font = "32px 'MS Pゴシック'";
      ctx.fillStyle = (i < (31-z)) ? "darkgreen": "cornflowerblue"; //7 or 8
      var s = " " + String((i+z)%31+1);
      ctx.fillText(s.slice(-2), BX+x*60+14, BY+y*45+34);//日付番号を表示
    }
    ctx.fillStyle = "pink";
    ctx.font = "72px 'MS Pゴシック'";        //フォントの設定
    ctx.fillText("7", BX+42, BY+117);           //7月
    ctx.fillText("8", BX+42, BY+252);           //8月
    ctx.globalAlpha = 0.3;                      //透過率を設定
    ctx.drawImage(eImage, 110, 18, 285, 300);   //サンプルえにっきを表示
    ctx.globalAlpha = 1;                        //透過率を元に戻す
    if(regist==0) return;                       //初回ならば、clickイベントリスナーを登録する
    canvas.addEventListener( 'click', leafDiary, false );    // DOMレベル2
  }
}
function leafDiary(e){ //canvas clickイベント関数を定義, 指定された日記のページをめくる
  var button = e.target.getBoundingClientRect();
  var mouseX = e.clientX - button.left - BX;   //60
  var mouseY = e.clientY - button.top - BY;    //45
  var x = Math.floor(mouseX / 60);             //7列
  var y = Math.floor(mouseY / 45);             //7行
  if(x<0 || x>6) return;                       //夏休み期間外は無効、横
  if(y<0 || y>6) return;                       //夏休み期間外は無効、縦
  var w = y * 7 + x;                           //日記表示日を通算番号に変換
  var v = (w < (31-z)) ? 7 : 8;                //7 or 8
  var d = (w+z)%31+1;                          //1~31
  if(enikki[w][0] == "") alert(v+"月"+d+"日の日記は未完です。早めの完成を願っています。");
  else{                                        //この処理で絵日記を表示する
    ctx.clearRect(0, 0, 720, 540);             //以前の表示をクリア
    var make = " 天候:"+enikki[w][0];         //天候
    ctx.fillStyle = "steelblue";
    ctx.font = "28px 'MS 明朝'";
    ctx.fillText(v+"月" + d + "日" + make, BX, BY+12);
    document.getElementById("bk").innerHTML="前画面に戻る";
    ctx.font = "18px 'MS Pゴシック'";
    msgOut(enikki[w][1], 0, 30);               //改行処理で本文を出力
    var imgFile = new Image();                 //画像を早めにロードするための準備
    imgFile.src = fileName(v*100+d);           //日付からファイル名を作成, 画像をロードする
    setTimeout(function(){outPut(imgFile);}, 500);//読込み時間がかかるので500ミリ秒間、遅らせる
  }
}
function goBack(){                             //前画面に戻るボタンが押されたときに動作する関数
  document.getElementById('bk').innerHTML='      ';
  starting(0);                                 //カレンダーを作る
}
function outPut(imgFile){                      //読込みが指定されて500ミリ秒後に実行される
    ctx.drawImage(imgFile, 0, 65, imgFile.width, imgFile.height);//日記を表示
}
function msgOut(msg, vx, vy){                  //改行するfillText関数
  var ary = "";
  for(var m=l=0; l<msg.length; ++l){           //スラッシュ検出で改行する
    var c = msg.substr(l, 1);
    if(c != '/') ary += c;
    else{                                      //改行する
      ctx.fillText(ary, BX+vx, BY+vy+(m++)*20);//文章を1行ずつ表示
      ary="";                                  //次の行に移行の準備
    }
  }
  ctx.fillText(ary, BX+vx, BY+vy+m*20);        //最後に残った文章
}
function fileName(vd){                         //指定日からファイル名を作成する関数
  return UPLOAD+("0"+vd).slice(-4)+".png";     //"image/"+("0"+vd).slice(-4)+".png";
}
</script>
</head>
<body onLoad="starting(1);">
<font size=4 color='maroon'>《自由研究-絵日記を作る2,2016-08-20》Ver 0.04,&copy;Aidesign,2016</font><BR>
<font color='cyan'>■</font><font color='orange'>の日付を指定して日記を表示。□の日付の日記は未完。</font>
<button id="bk" onClick="goBack();">      </button><BR>
<canvas id="calender" width="720" height="540" style="border: 0px blue solid"></canvas>
</body>
</html>

実行例

《自由研究-絵日記を作る2,2016-08-20》Ver 0.04,©Aidesign,2016
の日付を指定して日記を表示。□の日付の日記は未完。

 

三項演算子の威力

マニアが好む演算子

C、java、JavaScriptには三項演算子があります。

条件式 ? 式1 : 式2

三項演算子のなかで上のような演算子は条件演算子とも呼ばれ、コンパクトなソースコード、小さな機械コードの実現に貢献します。条件式の値がtrueだった場合に式1を評価した結果を返し、falseだった場合に式2を評価した結果を返します。

var answer = (age >=60) ? 1000 : 1500;

たとえば、映画館の入場料を60歳以上ならば、1000円、そうでない場合は1500円というときに使うことができます。変数answerにはageという年齢を反映した値が設定されます。

利用例と実行結果

『日曜日と土曜日は7時に、それ以外は6時に起きます』と表示する例を4つ示します。実行結果はどれも同じです。

<html>
《三項演算子の威力, 2016-08-18》<BR>
<script type="text/javascript" charset="Shift_JIS">
const week = ["日", "月", "火", "水", "木", "金", "土"];
var wake;

document.write("<BR>課題-1<BR>");
for(var i=0; i<7; ++i){
  switch(i){
  case 0: wake = 7;
          break;
  case 1: wake = 6;
          break;
  case 2: wake = 6;
          break;
  case 3: wake = 6;
          break;
  case 4: wake = 6;
          break;
  case 5: wake = 6;
          break;
  case 6: wake = 7;
          break;
  }
  document.write(week[i]+"曜日は"+wake+"時に起きます。<BR>");
}

document.write("<BR>課題-2<BR>");
for(var i=0; i<7; ++i){
  switch(i){
  case 6:
  case 0: wake = 7;
          break;
  case 1:
  case 2:
  case 3:
  case 4:
  case 5: wake = 6;
          break;
  }
  document.write(week[i]+"曜日は"+wake+"時に起きます。<BR>");
}

document.write("<BR>課題-3<BR>");
for(var i=0; i<7; ++i){
  wake = (i % 6) ? 6: 7;
  document.write(week[i]+"曜日は"+wake+"時に起きます。<BR>");
}

document.write("<BR>課題-4<BR>");
const wakeup = [7, 6, 6, 6, 6, 6, 7];
for(var i=0; i<7; ++i){
  wake = wakeup[i];
  document.write(week[i]+"曜日は"+wake+"時に起きます。<BR>");
}
</script>
</html>

《実行結果》

課題-1
日曜日は7時に起きます。
月曜日は6時に起きます。
火曜日は6時に起きます。
水曜日は6時に起きます。
木曜日は6時に起きます。
金曜日は6時に起きます。
土曜日は7時に起きます。

課題-2
日曜日は7時に起きます。
月曜日は6時に起きます。
火曜日は6時に起きます。
水曜日は6時に起きます。
木曜日は6時に起きます。
金曜日は6時に起きます。
土曜日は7時に起きます。

課題-3
日曜日は7時に起きます。
月曜日は6時に起きます。
火曜日は6時に起きます。
水曜日は6時に起きます。
木曜日は6時に起きます。
金曜日は6時に起きます。
土曜日は7時に起きます。

課題-4
日曜日は7時に起きます。
月曜日は6時に起きます。
火曜日は6時に起きます。
水曜日は6時に起きます。
木曜日は6時に起きます。
金曜日は6時に起きます。
土曜日は7時に起きます。

利用上の総合評価

それぞれの観点から4つの課題を4段階に評価しました。

課題番号 ソースコード行数 機械コードサイズ 拡張性 総合点
1 × × 5
2 7
3 10
4 10

利用する際の決め手

夏休み自由研究では、ソースコード行数を小さくするために、三項演算子を多用しています。三項演算子は見た目が良いのですが、拡張性に乏しいです。拡張性については、課題-4,1,2に軍配が上がります。

それでも、if文による判別よりはコンパクトなプログラミングになり、また他人によるプログラムコードの解析が難しくなるという理由で人気の高い演算子と言えます。

夏休み自由研究で絵日記を作る

コンピューター教育

matome.naver.jpより
matome.naver.jpより

最近、文科省は2020年から小学校のプログラミング教育を必修にすると発表しました。

理工系教育の高まりを反映して電子工作の新時代が到来しました。手始めに夏休みの自由研究として、絵日記を作ってみましょう。

昨今のIT進化には、めざましいものがあります。湖面に広がる花火の光景はさながら幻想的な光のショーのようです。

玉屋、鍵屋の掛け声から始まる古くからの花火はドーンと轟音が鳴り響いたあとは、色とりどりの花火が彩りを添えていましたが、今では音響が同期して興趣を盛り上げてくれます。

そこにはコンピューターの制御なしには成し遂げられないイベントとなりました。花火のテレビ中継解説者によると、広範囲にわたる地点の同期、光と音の競演・共演を1/30秒間隔で制御していると語っていました。

kazariコンピューター技術の応用

カメラの主流はデジカメとなり、遠隔地への送信や写真の蓄積・取り出しには電子ファイル化が必須です。

小学校の卒業式において、、証書が納められたスマホを従来の紙の代わりに卒業証書として授与される時代となりつつあります。

ここでは、夏休み自由研究の絵日記を電子ファイルで提出する方法を述べます。

開発・実行環境の考察

ブログやホームページのことを以下はウェブサイトと呼ぶことにします。サイトは多くの人々に読んでもらうのが目的です。それには公開サーバーにアップロードすることが必須です。

しかしながら、アップロードするにはそれなりの環境を整えることが必要なので、この記事では自宅や学校のローカル環境で動作するように配慮してあります。

まず、考えること

システムを作るには、どのような条件で動作し、どこまでサポートするかを決定しなければなりません。そこで、夏休みの期間を調査しました。北海道、岩手、長野などの北部地方は24~26日、南部の九州地方では38~45日もあり、さまざまです。

共通項として8月31日が夏休み最終日が多いので、最長の45日を考え、7週の49日、7/14~8/31を夏休み日程とします。

挑戦者の経験値とアドバイザー

『習うよりは慣れろ』で初歩的な記事を掲載してきました。

今回の絵日記を作成する内容は、全角コードの漢字を扱ったり、ソースコードを分割する、ファイル構造、フォルダ、文法エラー、変数のスコープ、デバッグ方法、画像ファイルの読み込み完了タイミング、テキストファイルの編集など多岐にわたる知識が必要になることがあります。

Result3

そのためには、JavaScriptのプログラミングに精通した頼りになる人がそばにいることが望ましいと言えます。

望ましい開発環境

プログラミングはJavaScript言語を使用します。ほとんどのパソコンやスマホはJavaScriptが実行できるようになっています。ここではWindows10のノートパソコンを使って動作の確認をしています。

あなたのブラウザでJavaScriptを有効にする方法でJavaScriptの有効/無効を確認できます。お試しください。

ローカル環境における動作確認法

ソースコード一式はUsefulGuide.zipにまとめられています。ファイル階層図を右に示します。

次の段落、『サンプルコード』のソースコード一式をクリックすればUsefulGuide.zipが得られます。

これを解凍し、たとえばCドライブのSampleフォルダに格納します。では、ファイルの説明をします。

➊Medium-A.html
絵日記を表示するJavaScriptアプリケーションです。次に示すenikkiData.jsを読み込んで1つのソースコードにします。
❷enikkiData.js
絵日記を記載したテキスト形式のデータファイルです。49日ぶんを日付ごとに天候と本文を納めています。コードとデータを管理しやすいように分割されています。
❸imageフォルダ
12個の画像ファイルです。Thumbs.dbはWindowsが自動的に生成しています。

上記のようにファイル構成が完成し、望ましい開発環境で示したJavaScriptの有効を確認してMedium-A.htmlアプリケーションを実行します。

途中まで動作し、正常動作とならない場合は、ファイルの格納先の不備が原因の場合が多いです。

 

ファイル階層構造図
C:\Sample
│ enikkiData.js
│ Medium-A.html
└─image
  0722.png
  0723.png
  0724.png
  0725.png
  0726.png
  0727.png
  0728.png
  0729.png
  0806.png
  0807.png
  0816.png
  enikki.png












 

現状と拡張方法

サンプルの絵日記は7/22~7/29,8/6,8/7,8/16の11日ぶん、作成されています。すべての絵日記を作成するには、enikkiData.jsに天候と本文を追加します。それに加えて、日付をファイル名とした画像ファイルを用意しなければなりません。

日記の本文は2行分しか用意されていません。多くの字数を確保するには、画像表示領域を下方に移動し本文領域を拡大します。

実行例に示したコードは画像ファイルについて、アップロードしたファイルを読み込むように修正されるなど、ダウンロードで得られる内容と一部が異なります。

また、魅力的な絵日記にするには、画像編集の知識を磨くことが大切です。画像の作り方については、習うより慣れろprogramingFの画像の作り方を参考にしてください。最後に、公開したソースコードをひな形にして、ユニークな絵日記の完成を願っています。

サンプルコード

ソースコード一式をクリックしてダウンロードします。

実行例

 

 

《自由研究-絵日記を作る,2016-08-16》Ver 0.02,©Aidesign,2016
の日付を指定して日記を表示。 □の日付の日記は未完。

 

習うより慣れろprogramingF

TinyF 習うより慣れろの整理

習うより慣れろの意気込みで、やさしいものから実用的なプログラミングを目ざしました。現在日付を出力、現在時刻を出力、一週間のゴミ出し作業、一週間の仕事、著作権消滅童謡の演奏と徐々に機能の高いプログラミングに挑戦してきました。

コピー&ペーストにより、○○.htmlを作成してJavaScriptを実行すれば、おおむね結果が得られるものばかりです。思い通りの結果が得られない場合は、ブラウザを変えたり、バージョンを上げるなどの措置で解決することがあります。

忙しい方は末尾の実行例で❶~⓰の番号をクリックしてください。

今回の挑戦

shinkeisuijyaku今回は、16個の画像を集合して作った大きな画像から、一つを切り取って指定された場所に描画します。

個々の画像は表示位置が固定されているので、神経衰弱のゲームを作るときに応用することができるでしょう。

神経衰弱は52枚のカードを用意しますが、52個をまとめて一つの画像にするには、画像容量があまりにも大き過ぎます。

同一マーク13個を一つにまとめればちょうど、程よい大きさになることでしょう。

画像の作り方

画像編集にはWindows付属のペイントでも十分です。その際、表示タブでルーラー、グリッド線、ステータスバーのボタンにチェックマークを入れて使いやすくします。

個々の画像をまとめて一枚の大きな画像を作るには、規則正しい書式にすると便利です。

それには個々の画像をサイズの等しい正方形、長方形にし、i行j列の碁盤の目のように並べます。詳しくは習うより慣れろprogramingEの画像形式が参考になります。
無料画像編集ツール10ランキング
1.FotoFlexer
2.SUMO Paint
3.PIXLR
4.PIXER.US
5.PicMagick
6.GIMP
7.Paint.net
8.INKSCAPE
9.Picasa
10.Seashore

 

画像のトリミング表示方法

画像の一部を切り抜いて表示することをトリミングと呼んでいます。JavaScriptの組み込み関数にはトリミング機能が用意されています。集合写真で両端に写ったグループ外のメンバーを削除したり、部品素材集から気に入った画像を取り出すときに利用します。drawImage関数の利用例を示します。

drawImage

処理の概要

方針

習うより慣れろprogramingEにおいて、16景表示レイアウトはあらかじめ作成した画像イメージを表示しましたが、ここではbeginPath, moveTo, lineTo, stroke関数を用いて動的に描画しました。事前に準備した画像ファイルを使えばコードサイズは小さくなりますが、動的表示法は選択肢が広がります。

処理概要

タッチやクリックイベントを処理する関数を取り付けて、タッチされた位置を0~15に変換してその番号に割り当てられた画像を1回だけ表示します。

EventDrivenイベントドリブン機構

MouseEventインターフェイスは、ポインティングデバイス (マウスなど) によるユーザの対話によって発生したイベントを捕捉することができます。その中でclickイベントはボタンが押され、そして離されたときに発生します。

イベントが発生した時に見逃すことなく処理されるように動作する仕組み《イベントドリブン機構》をJavaScript制御システムが用意しています。

コードの解説

左京大夫①1行、htmlタグの宣言。
②5行、丸囲み数字の定義。
③6行、処理済みフラグに使用。
④7~8行、描画位置の調整用。
⑤9行、コンテキストを退避する。
⑥10~11行、16景画像を早めにロードする。
⑦12行、ロード時に起動する関数を定義する。
⑧13行、描画コンテキストを取得する。
⑨14行、有効なコンテキストを初回に実行する。
⑩16~25行、横縦のグリッド線と目盛を表示。
⑪26~32行、16景番号を表示。
⑫34行、canvasクリックイベントを取り付ける。
⑬35~37行、カーソル位置から相対値を求める。
⑭40~42行、相対値を0~15の通算番号に変換。
⑮43行、初回のみ処理する。
⑯45行、通算番号から適切な16景画像を表示。
⑰54行、ロード時に起動する関数を設定する。
⑱55~56行、ガイドメッセージを定義する。
⑲57行、canvasエリアを定義する。

サンプルコード

<html>
<head>
<script language="JavaScript">
              //①    ②    ③    ④    ⑤    ⑥    ⑦    ⑧    ⑨    ⑩    ⑪    ⑫    ⑬    ⑭    ⑮    ⑯
const num = "\u2776\u2777\u2778\u2779\u277A\u277B\u277C\u277D\u277E\u277F\u24EB\u24EC\u24ED\u24EE\u24EF\u24F0";
var   out = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; //描画済みフラッグ, Tiny-F.html
const BX = 10;                       //描画位置規定値-x
const BY = 10;                       //描画位置規定値-y
var ctx = 0;                         //コンテキストを退避する
var img16Fl = new Image();           //16景
    img16Fl.src = "http://aidesign.lolipop.jp/wp-content/uploads/2016/08/16image.png"; //トンボ16景
function starting(){                 //ロード時に起動する関数
  var canvas = document.getElementById('tutorial');  //描画コンテキストの取得
  if (canvas.getContext && (ctx==0)){//再試行は禁止
    ctx = canvas.getContext('2d');   //描画コンテキスト
    for(var i=0; i<5; ++i){          //0 1 2 3 4
      ctx.beginPath();
      if((i%4)==0) ctx.lineWidth = 4;//0 4
      else         ctx.lineWidth = 1;//1 2 3
      ctx.moveTo(BX, BY+i*120); ctx.lineTo(BX+640, BY+i*120); //x-axis
      ctx.moveTo(BX+i*160, BY); ctx.lineTo(BX+i*160, BY+480); //y-axis
      ctx.stroke();
      ctx.fillText((i*160).toString(10), BX+i*160, BY+500);   //x-measure
      ctx.fillText((i*120).toString(10), BX+647, BY+i*120+3); //y-measure
    }
    for(i=0; i<16; ++i){             //16景番号を表示する
      var x = i % 4;                 //x方向位置
      var y = Math.floor(i / 4);     //y方向位置
      ctx.font = "48px 'MS Pゴシック'";
      ctx.fillStyle = "blue";
      ctx.fillText(num[i], BX+x*160+59, BY+y*120+75);//16景番号を表示
    }

    canvas.addEventListener('click', function(e){   //canvasイベント関数を定義
        var button = e.target.getBoundingClientRect();
        var mouseX = e.clientX - button.left - BX;  //160
        var mouseY = e.clientY - button.top - BY;   //120
        x = Math.floor(mouseX / 160);               //4
        y = Math.floor(mouseY / 120);               //4
        if(x>=0 && x<=3){                           //16景、表示領域外は無効
          if(y>=0 && y<=3){
            i = y * 4 + x;                          //通算番号に変換
            if(out[i]==0){                          //初回のみ、有効
              out[i] = 1;                           //処理済みにする
              ctx.drawImage(img16Fl, 160*x,120*y, 160,120,   160*x+BX,120*y+BY, 160,120);//16景画像
            }
          }
        }
    }, false);
  }
}
</script>
</head>
<body onLoad="starting();">
<font size=4 color='maroon'>16画像描画 Tiny-F.html, Ver 0.01, &copy;Aidesign,2016<BR></font>
<font size=5 color='forestgreen'>番号をタッチ、再実行は&#8635ボタンをタッチ。<BR></font>
<canvas id="tutorial" width="688" height="528" style="border: 0px blue solid"></canvas>
</body>
</html>

実行例

16画像描画 Tiny-F.html, Ver 0.01, ©Aidesign,2016
番号をタッチ、再実行は↻ボタンをタッチ。

 

夕涼みを詠う

yoshikawa-eiji名言・金言はたくさん、あります。次の川柳は《吉川英治》の作と言われています。

古い記憶ながら、本人が母親に教えてもらったと何かの書物で読んだことがあります。

このような陽を写す言葉に親しみがわきます。

これに対して、聖書が出典ともされる『働かざる者、食うべからず』のような堅い言葉は苦手です。

♪今日の仕事はつらかったあとは焼酎あおるだけ♪という詞もありますが、私には吉川英治作といわれる川柳がちょうど似合っていると思われます。