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

Programing

雲路みちゆきゲーム

2018-03-15プログラミングinventor

雲路（うんろ）とは

雲路（うんろ、くもじ）とは進路、針路、行き先のことです。JavaScriptのcanvasを用いてリサジュー曲線を描いてみました。リサジュー曲線(LissajousCurve)はパラメーターをちょっと変えるだけでさまざまな幾何学模様を表現することができます。

大学などにおいて、そのアカデミックな雰囲気を醸し出す形を象徴にした校章が採用されています。動作例のヘッダー画像に電気通信大学などのロゴマークを取り上げています。

リサジュー曲線を描くとき、その軌道を予測しクリックして当たったときの得点数を競うゲームを作りました。ゲーム名は軌道予測が合っていますが、ちょっとひねって、雲路みちゆきと怪しげな名前にしてあります。使い方を以下に示します。

ゲーム利用法

使い方は、開始ボタンをクリックしスタートします。リサジュー曲線の2000ヶ所に及ぶポイントを通過する際、進路を予測し的中すれば当たりとなり、得点が1点加算されます。

描画速度をinput要素のnumberタイプで3ms～30msに変更可能です。

初期値を15ms以外でゲームをする場合、速度設定後に開始ボタンをクリックします。

描画予測位置の少し先をクリックするとヒットしやすいです。描画速度が極端に遅い場合、的中回数が複数になる場合があります。

動作例

早春賦

2018-02-14プログラミングinventor

春は名のみか

春のかおり

極寒を体験すると春はもうすぐです。晩冬から早春の風景を思い浮かべ、童謡『早春賦』を聴きながら時の流れを感じ取ります。音楽はいつものように著作権保護期間終了の作品から選びました。

ただで使わせていただいて愚痴をこぼすのも何ですが、古い歌は意味が難解です。「氷解け去り葦は角ぐむ」は『氷は溶けて消え葦は芽を吹き出した』との意味のようです。歌の歌詞はしっかり縦書きにしました。

音楽、画像、春さきのおりおりのことばにより、押し込められた季節から早春へと弾けてください。

春を待つ心

ドローンによる演出

2018-02-11プログラミングinventor

ドローンによる巧みな演出

ピョンチャン冬季オリンピック開会式をテレビで見て、たいへん楽しい想いをしました。予算が潤沢にあればいろんなことができるのだと感心しました。

オリンピックマークは5色で青黄黒緑赤をLEDで出せると思います。人の姿から5輪のマークに変わるところは圧巻でした。そのとき、1つずつ、フラッシュして色が変化したら猶、良かったでしょう。

予算がないものにはコンピューター上で動作させることにしましょう。

ドローンに色を付けてみる

動くドキュメント作成法

ドローンを制御してイベントを演出したような描画をするには、Javascriptによるプログラミングをします。今回の作品は110行ほどのコードで成り立っています。

時間をおいてゆっくり動作させるためにsetTimeoutを使います。興味が湧きましたら、まず、簡単なことからスタートするとよいでしょう。

様々な学習方法があります。専門学校の門をたたいたり、著名な先生のプログラミング講座を受けることもできます。一方、赤ちゃん、幼児が言葉を覚えるように先達者の言動をひたすら模倣して学習する方法があります。

この方法がお金もかからず、自分の努力で進むことができます。インターネットが身近に普及している時代です。習得のための材料・資料はネット上にあります。

手っ取り早くサンプルコードを入手する場合は、少しばかりのお小遣いを使ってください。もし、よかったら右の画像をクリックして多くのサンプルコードに触れてください。他と異なる習得方法があることを知っていただけたら幸いです。

身近な生活への応用

今年の冬は記録的な大雪で悩まされています。道路に降り積もった雪で道路側溝が隠れて見えなくなり、車が転倒する事故が多発しています。

今やGPSによる位置検出精度は数センチになっており、道路や障害物の詳細情報が整理されたら、自動運転技術で雪に埋もれた道路から車がはみ出すことはなくなることでしょう。

自動運転装置は高価です。まずはNAVIスクリーンに実際の風景に加えて雪の下にあるセンターラインや縁石を表示する機能を追加してほしいです。この装置はそんなに高価にはならないでしょう。とりあえず、運転者がその画面を参考にしながら運転して危険を察知する方式が考えられます。

今までにないシステムを構築するには総合的な知識が要求されます。若者が遊び心を持ちつつ楽しみながら新しい技術を学んで身近な生活に役立つことを願っています。

クリッピングをマスター

2018-01-26プログラミングinventor

長年の課題

複数のピースを一枚にまとめ集合画像にしたとき、クリップして部分的に表示することができず悩んでいました。今回、以下のような2行5列にまとめた10枚の動物の画像を1枚ずつ表示できたので備忘録として残します。

img要素にposition absoluteを指定し、clip:rectにより取り出すエリアを設定し、位置のずれをtopとleftによって調整して期待した動作を得ました。今回、clip領域を計算により決定せずに、泥臭い方法ながらテーブルを参照する方式に変えたところ思うような動作になりました。以前はcanvasのdrawImage関数を用いて切り抜けていましたが、canvasに頼ることがないので積年の悩みが解消しました。以下にコードを示します。

サンプルコード

<html>
<body>
<button onclick="setClip();">開始</button>　<span id="num" style="color:red">&#x24ff;</span>
<span style="font-size:10px">　&copy;TacM,2018 Ver0.01</span><br />
<div style="position:relative; width: 750px; height: 300px; border: 0px solid gray;">
<img id="sample" width="750px" height="300px" style="position:absolute; top:-150px; left:-300px;
 clip:rect(150px,450px,300px,300px)" src="http://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
</body>
<script type="text/javascript" charset="Shift_JIS">
const SUJI = "\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e";	//0123456789
const rectT=[
'rect(  0px, 150px, 150px,   0px)', 'rect(  0px, 300px, 150px, 150px)',
'rect(  0px, 450px, 150px, 300px)', 'rect(  0px, 600px, 150px, 450px)',
'rect(  0px, 750px, 150px, 600px)', 'rect(150px, 150px, 300px,   0px)',
'rect(150px, 300px, 300px, 150px)', 'rect(150px, 450px, 300px, 300px)',
'rect(150px, 600px, 300px, 450px)', 'rect(150px, 750px, 300px, 600px)'];
var v=0;
var p = document.getElementById( "sample" );

function setClip(){
 console.log("V="+v+" : "+rectT[v]);
 document.getElementById("num").innerHTML=SUJI.substr(v, 1);
 p.style.clip = rectT[v];
 p.style.left = -(v%5)*150+'px';
 p.style.top = -Math.floor(v/5)*150+'px';
 if(++v < 10) setTimeout(setClip, 1000);
 else v = 0;
}
</script>
</html>

動作結果

　⓿ 　©TacM,2018 Ver0.01

QRコードの新境地

2018-01-20プログラミングinventor

QRコードの利用例

QRコードはあらゆるところで利用されています。ここで取り上げることは新しくも珍しくもないことでしょうが、新参者にとっては語るに価値がありと、いまさらながらスポットライトを当ててみました。

QRコードが世に出たころはまだ、インターネットが普及途上にあったので当時は基本的な利用方法のような気がします。今はあらゆるものがインターネットにつながる時代であり、昔とは趣きが異なることでしょう。

QRコードの新機軸

以下の実行例は10個のQRコード画像を読み、取り出された文字列をJavaScriptスプリプト言語処理系が解釈して表示しています。文字が赤色で表示されたり大きなサイズになるのはspan要素で指定されているからです。あくまでもQRコード画像の色は単色です。

たとえば、小林一茶の俳句は以下のような文字列から成っています。そのほか、メッセージが左右にスクロールしたり、イラストが左から右へ流れて描画されるのはJavaScriptのMarquee要素(タグ）によります。

めでたさも<BR>
　中くらいなり<BR>
　　おらが春<BR>
　　　<span style="font-size:11px;">小林一茶</span><BR>

開始ボタンをクリックしてスタートです。

QRコードリーダー ©TacM,2018 Ver0.15　
認識名称:
QRコードサイズ:FileSize 進行

読み取り結果

　日本語サポート

脳トレゲーム作成2弾

2017-11-28プログラミングinventor

はじめに

脳力トレーニングゲームの第2弾を作成しました。記憶力を研ぎ澄まして漢字検定に挑戦しよう。ゲームは末尾に用意されています。

リンクフリーとは

情報関連においてリンクとは連結する、関連づけるなどの意からハイパーリンクを省略しリンクと呼び、他のページの所在を表す情報のことを指します。

リンク先情報が価値の高い場合、著作権保有者に無断でリンクを貼る行為を禁じているケースがあります。これに対し記事を公開するのは多くの人々に読んでもらいたいとの思いから積極的にリンク貼りを許容し奨励しているケースが多いです。この状態をリンクフリーと言います。

今回、脳トレゲームに正解回答の場合、四字熟語の解説ページを参照します。リンクフリーを許可された参照先の四字熟語辞典オンラインさんに感謝申し上げます。

発展機能

Ver0.02に追加された機能を挙げます。

脳力トレーニングゲームで扱う画像は1182におよび、1ゲーム10画像が表示されるので118ゲームの対戦をすることができる。
休憩などを勘案し、45分以内の中断をすることができる。45分を越えた場合は過去の成績はリセットされ、新しいゲームとして扱われる。
45分以内のゲーム中断ならば、ブログ閲覧を閉じても再起動することによりゲームは継続される。
ゲームに勝利した場合、その褒章として漢字検定の研究ができ、四字熟語辞典オンラインにジャンプすることができる。
漢字検定の研究後、ブラウザの直前のページに戻るボタンをクリックして脳力トレーニングゲームを再開することができる。
戻るボタンはブラウザにより異なり、←、‹、⇦などを使う。
蛇足ながら、四字熟語の言葉遊びとして以前に知恵を絞ってまとめたダブル連番数え歌：数え歌仕様四字熟語も含まれている。

ここから使い方の説明に入ります。まずは、説明用の図を示します。

上の図に示すように、Ver0.02に終了ボタンが追加されています。

脳トレゲームの使い方

左上の開始ボタンをクリックして開始する。
10個の絵文字が表示される。表示順がシャッフルされる前に7～9番目の絵柄を記憶する。
「〇番目の絵？」が表示され、指定された絵の記憶を呼び起こす。
下段のシアン背景色の絵をクリックするとあたり/はずれが表示される。
はずれのときは残念至極が表示されるが、あたりの場合、四字熟語の解説へ進むことができる。
上の図のように四字熟語に下線が付いた場合はその文字をクリックして漢字検定の研究ができる。
漢字検定の研究に進まず、開始や終了ボタンをクリックすれば、漢字検定を省略できる。
下段の絵柄背景色がピンク色に、開始ボタンがシアン色になったら次にチャレンジする。
118回戦までトレーニングできる。
終了ボタンをクリックすると、脳トレゲームが終りブログ閲覧も終了する。途中までの成績は45分以内ならば記憶され、再開で継続される。
ブラウザchrome, firefox, ie11, opera, edgeでおおむね動作する。

正解を得るためのヒント

10個の絵が表示されたら、すばやく7～9番目の絵柄のみを記憶する。
大きな絵よりも複数表示される下段を見る。。
カンニングに近い策だが、絵文字の薦めの実行例から3列ずつ色分けし、7～9、17～19、27～29番目の絵柄を暗記する。

※※※※※※※※※※※　The brain power training　※※※※※※※※※※※

脳力トレーニングゲーム

絵文字の薦め

2017-11-17プログラミングinventor

絵文字とユニコード

ナスカの地上絵のように絵で感情を表現する習慣は古くからありますがemojiは日本から世界中に広まりました。絵文字をテキストエディタで扱うときには注意が必要です。全角特殊文字なかでもサロゲート文字を入力できないエディタが多いからです。

絵文字をJavascriptプログラミングする場合、機能の小さなエディタでも扱えるようにするには16進数コードで記述することが多く、文字に対応する16進数ユニコードを取り出すツールを作ってみました。体験を記録に残します。

絵文字表示の一方法

主な絵文字1126種を画面に表示し、絵文字の上をクリックし選択した文字と16進数ユニコードを大きく表示します。

文字を等間隔に描画しクリックしたときのカーソル位置(x, y)から選択された文字を特定します。

均等割り付けならばクリック位置から選ばれた文字に変換するのはきわめて容易です。

均等割り付けの難しさ

文字や画像を表示しクリックした位置を検出してそれを反映させるとき、均等割り付けで描画します。均等割り付けの方法は以下のようにjustifyを使うのが定番ですが、しっくり思ったようにいきません。

text-align:justify; text-justify:inter-ideograph; white-space:nowrap;

試行錯誤を繰り返し、次のようなtable要素を使うことにしました。


<div id="emoji" style="clear:both; width:600px; height:1900px; border:1px green solid;">
<table id="tbl" style="border-collapse:collapse; table-layout:fixed; width:600px; height:1900px; text-align:center; font-size:14px;" border="1"></table>
</div>

上に示したようにポイントはtable要素において、border-collapse:collapse、table-layout:fixed、width:600px、text-align:centerを用いることです。中でもwidthで長さを固定にすることが大切です。borderに””とヌルを指定すると枠線は表示されません。

均等割り付けの他に問題になった点は文字の高さがブラウザごとにまちまちなことです。

この問題を解消するには、絵文字描画エリアのdiv要素のheight属性に、height:1900pxなどと固定値を設定します。この値を表示行数で除して一文字の高さを算出します。そしてカーソル位置から指定文字を割り出す算出式に採用します。

ブラウザ対策と使い方

🎅

ブラウザの動作が微妙に異なることは知られています。ここでは、IE11, Chrome, FireFox, Opera, edgeで動作するように努力しました。通常の利用方法ではブラウザOperaでclientHeightが他のブラウザと異なる値になり、誤動作しました。そこで最も大きな値を定義し、その値をdocument.getElementById(‘tbl’).style.heightで求めてDivエリアの高さとみなして各ブラウザに対応させます。

16進ユニコードを得るには実行例の絵文字上をクリックします。絵文字は少ない情報量で意思疎通を図るのに適し、ユニコードとして統一されたことは大きな進歩ですが、残念な点は表現する意は同じでも絵柄が開発元ごとに少しずつ異なることです。

将来への布石

今回、使われている主要なブラウザで動作するように腐心しました。そのため、動作中のブラウザ名を右上に表示していますがその特定法は完全ではありません。簡便法により振り分けています。

ブラウザ名に’opera’という文字列が入っていれば、operaブラウザと判定する方法です。この文字列が恒久的に変わらないという保証はありません。

他にもoperaHouseという別のブラウザが出現したときも不安定になります。これが他力本願的であり簡便法と言われる所以です。

検出したブラウザコードを条件式で参照することはしておらず、各ブラウザに共通する処理で切り抜けていますが安定した解析法とは言えません。

将来、Javascriptプログラミングコードを電子書籍化して公開したいと考えています。

実行例

絵文字のおさらい

2017-11-11プログラミングinventor

絵文字の発信力

絵文字の発信力は絶大です。言葉や文字は万国共通とはいきませんが絵による表現はおおむね共通です。2020年の東京オリンピックに向けて、インバウンド（訪日外国人旅行）が活況を呈しています。

外国人サポートの一環としてホテルや文化施設などに絵による告知、案内の徹底化を図っています。

絵文字は文字（キャラクター）であり、情報量において画像よりは小容量です。それなのに見るものへの訴え力は強力です。絵文字はケータイ文化などと言われがちですが、その歴史は有史以来でとてつもなく古く、エジプト、マヤの文字、漢字などは象形文字です。

絵文字の推奨

これまで絵文字を使う機会が少なかったのですが、絵文字は画像に比して少ない情報量で多彩な表現ができるので最近、積極的に使い始めました。多用するとお祭りのような雰囲気になるので抑えて使おうと考えています。

ケータイの機種ごとにコードが異なったりしますが、ユニコード(Unicode)として定義されたものは共通性があります。ここでは1126種の絵文字を掲載しました。

ユニコードとサロゲートペア

ユニコードは当初、16ビットの65536種で全世界の主要文字を表示するはずでしたがすぐに満杯になり、顔文字や動物の絵文字は16ビットを超えて表示するようになり、ユニコードが0x10000より大きい文字を上位と下位に分けて表現するサロゲートペア（サロゲート文字、U+0x10000～0x10ffff）が規格化されました。

このページでは、0x0023～0x1F9C0 をJavascriptで順次、表示しています。ここで扱う絵文字の連番号は0から1125まであり、開始番号と終了番号で指定された範囲を16進ユニコードとともに描画します。カーソルを低速あるいは高速ボタンの上にかざすと描画速度を変更することができます。表示仕様が決まったら「描」をクリックして絵文字を表示させます。