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

Programing

QRコードの新境地

QRコードの利用例

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

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

QRコードの新機軸

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

小林一茶の俳句は以下のような文字列から成っています。
めでたさも<BR>
 中くらいなり<BR>
  おらが春<BR>
   <span style="font-size:11px;">小林一茶</span><BR>

 

QRコードリーダー ©TacM,2018 Ver0.13 
進行
認識名称:
QRコードサイズ:FileSize
読み取り結果
 日本語サポート

脳トレゲーム作成2弾

はじめに

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

リンクフリーとは

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

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

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

発展機能

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

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

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

脳トレゲームの使い方

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

正解を得るためのヒント

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

 

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

 

脳力トレーニングゲーム

絵文字の薦め

絵文字とユニコード

ナスカの地上絵のように絵で感情を表現する習慣は古くからありますが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:collapsetable-layout:fixedwidth:600pxtext-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プログラミングコードを電子書籍化して公開したいと考えています。

実行例

絵文字のおさらい

絵文字の発信力

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

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

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

絵文字の推奨

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



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

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

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



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

動作例と利用例

絵文字の詳細は左上の拡大図、文字をコピーするときは下の赤枠内の文字を複写します。サロゲート文字を扱うことができるテキストエディタ(メモ帳など)を使います。最高速では描画が追い付かない場合は低速にします。開始画面の拡大絵文字は毎回、異なります。

公的な書類の氏名欄の名前の後にハートマークのような絵文字を付ける癖を持った人に出会ったことがありますが、絵文字はすでに軽い文化ではないようです。されど多用は避けた方が賢明と言えるようです。

まずは下のボタンをクリック‼

開始番号 終了番号
低速⇦
92%
⇨高速
絵文字一覧©2017 TacM, Ver0.01
連番号
Unicode
0xう



脳トレ・パスワード第2弾

オンライン認証の一例

スピリチュアルゲーム

パワースポット

全国いたるところに(PowerSpot)があり、はっきりわからないが力を授けてくれる場所です。

うたい文句の通りにご利益があるかどうかはわかりませんが、信ずるものは救われるというほど深刻に考えずに、霊感に触れてみたいと考えています。

スピリチュアルとは

一方、スピリチュアルとは霊的であることという意味で使われますが、これからは秋が深まりじっくり見つめなおすには好都合な季節です。

見えないものへの畏敬などについて考えたいものです。

スピリチュアルゲーム

霊的なゲームとは無関係ですが、脳のトレーニングに、反射神経を鍛えるために、ひとつのゲームを作成しました。

ゲームは極めてシンプルですので、画像を回転させたり、回転速度を変更したり、ラッキーナンバーを決定する方法などについて、自分で設計・制作するにはどのように進めるかに考えを巡らせていただけたらありがたいです。

遊び方

ゲームの進め方

  1. 右下の▶startボタンをクリックする。
  2. 右下のボタンが⏹stopに切り替わり、ルーレット円盤が回転し始める。
  3. 右上のラッキーナンバーを確認し、この番号を引き当てればウィナー。
  4. 頃合いをみて⏹stopボタンをクリックし回転を止める。
  5. 上部⇩の直下が引き当てた番号になり、▶startボタンの上に表示。
  6. ⇦と⇨ボタンの上にカーソルを置きルーレット円盤の回転速度を変更。
  7. 速度可変ボタンはクリックせず、カーソルを乗せている間、連続有効。
  8. 円盤の回転が速いと当たり番号は出しづらくなる。
  9. 初級:20~60%,中級:61~80%,上級:81~100%。20~100%に制限。
  10. 初心者は初級、中級コース。熟練者は上級コースを推奨。
  11. ラッキーナンバーを引き当てれば、派手なファンファーレが鳴り響く。

 

動作例

 

マウスオーバーの動作例

マウスオーバーイベント

マウスはポイントする場所を選んでクリックして使うことが多いですが、クリックせずに画像や文字の上にカーソルを置いてイベントを起動する機能があります。それには’onmouseover’や’onmouseout’でイベント関数を呼び込みます。

この関数をそのまま使うと一度、マウスをかざすと1回はイベント関数を起動することができますがかざしている間、連続して動作させることは難しいです。一度は画像からカーソルを離して再度、カーソルを上に乗せることが必要です。

初期のキーボードにおいて、連続して同じコードを入力することはできませんでした。すなわち、一度、キーを離して逐一、入力しなければなりませんでした。今ではキーを長めに押しっぱなしにすれば、同じコードを入力できます。これと同じ動作にしたいと考え、あれこれ試行錯誤の末、満足を得るプログラムコードに達しましたので記録に残します。

余談ですが、マウスオーバーと同じ意味でマウスホバー(mousehover)という用語も認知されています。ホバー、ホバーリングはヘリコプターが空中で止まっているときなどに使っており、カーソルが目的物の上に乗っている様は非常に似ています。

もうひとつ、蛇足になりますが複数のブラウザで動作を試しました。インターネットエクスプローラーでの動作はカーソルがちらついて見にくいです。chrome、firefox、operaは動作が軽快でした。

動作コード

<html>
<div style="color:royalblue; font-size:20px;">マウスオーバー、マウスアウト動作例<BR></div>
<div onmouseover="tm20=setInterval(alternate, 6, 0);" onmouseout="clearInterval(tm20);" style="float:left; font-size:32px; color:red;">&#x21e6;&nbsp;</div>
<div onmouseover="tm20=setInterval(alternate, 6, 1);" onmouseout="clearInterval(tm20);" style="float:left; font-size:32px; color:red;">&#x21e8;&nbsp;&nbsp;</div>
<div style="font-size:12px; line-height:4em;">&nbsp;&nbsp;&copy;TacM,2017 Ver0.02</div>
<div id="bear" style="clear:both; width:400; height:400; background-color:lightcyan; border:0px green solid;">
<img id="kuma" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/bear-210x210.png" width="64" height="64">
</div>
<script type="text/javascript">
var w=64;
var tm20;

function alternate(diff){				//64 ~ 400
 console.log("w=%d %d", w, diff);
 if(diff == 0)	w = (w > 64) ? --w : 64;
 else			w = (w < 400) ? ++w : 400;
 setting(w, w);
}

function setting(w, h) {
 document.getElementById( "kuma" ).width = w;
 document.getElementById( "kuma" ).height = h;
}
</script>
</html>

動作例

矢印の上にカーソルをかざすと熊の画像が拡大し、矢印の上にカーソルをかざすと縮小します。矢印の上からカーソルを離せば、拡大・縮小は停止します。思いがけない動作になるでしょう。

ここでは64ピクセルから400ピクセルまで変化します。キーボードのオートリピーティング処理のマウス版です。参考になれば幸いです。

マウスオーバー、マウスアウト動作例
⇦ 
⇨  
  ©TacM,2017 Ver0.02

 

秋の夕暮れ2017


現代語訳
にわか雨の露がまだ乾ききらないうちに
もう槙の木の葉に
霧がかってきている秋の夕暮れかなあ
村雨むらさめ
  つゆもまだひぬ
   まきの
きりちのぼる
  あきゆう
小倉百人一首(第八七番) 寂蓮法師じゃくれんほうし
©TacM,2017 Ver0.03

 

HTMLサンプルコード

<html>
<DIV style="position:relative;">
<div class="h2vr_24 t1" style="float:left; line-height:1.6em; font-size:16px; font-weight:bold; width:160px; height:380px; border: 0px blue solid">
<span style="color:magenta;"><BR>現代語訳<BR></span>
にわか雨の露がまだ乾ききらないうちに<BR>もう槙の木の葉に<BR>霧がかってきている秋の夕暮れかなあ
</div>
<div class="h2vr_12" style="float:left; font-size:32px; line-height:1.8em; width:410; height:360; border: 0px magenta solid">
<ruby><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>の<ruby><rb>夕</rb><rt>ゆう</rt><rb>暮</rb><rt>ぐ</rt></ruby>れ<BR>
<span style="font-size:18px">小倉百人一首(第八七番) </span><ruby><rb>寂蓮法師</rb><rt>じゃくれんほうし</rt></ruby>
</div>
<div style="color:mediumblue; position:absolute; top:355px; left:10px;">&copy;TacM,2017 Ver0.03</div>
<img style="position:absolute; top:-2px; left:6px; opacity:0.3;" src="http://aidesign.lolipop.jp/wp-content/uploads/2016/10/ears-of-rice.png" width="570" height="380">
</DIV>
</html>

 

成長記録を動画にしてプレゼントしよう

成長記録を動画風に整理

デジタル写真を動画風に整理するひとつの方法があります。題材は子供・孫の成長記録です。BGM(background music)が入ると引き立ちます。入学や卒業のお祝いにプレゼントできるように頑張ってみましょう。 また、映画のように先頭にカウントリーダー、末尾にクレジットタイトル(制作者名、制作日、後援者名など)を入れるとテレビのドラマ制作気分を味わえます。

この他に、画像と画像の間に切り替え効果という仕組みを導入すると前の画像の余韻を残しつつ新画面に切り替えることができます。JavaScriptでプログラミングしていますが、Movie Makerでサポートしている切り替え効果を自前で処理できるのではないだろうか。研究中です。

この成長記録の特徴

  1. 人物の写真は肖像権やプライバシーの観点からここではフリー素材のイラストを使っています。本物の成長記録にはデジタル写真を適度にリサイズして使います。
  2. 著作権フリーの音楽素材をダウンロードしaudio要素を用いて、BGMによるいろどりを加えています。
  3. くまさん、リス、カエル、ひよこさん、コアラ、クジラなどの縁取りにより写真へのアクセントを付けています。

さいごに

カウントリーダーや切り替え効果はこれからの課題です。すでにマスターされている方々がおられることでしょう。一周遅れながら追いかけます。前にも述べましたが、ソースコードはもう少しまとまったところで公開する考えです。

電子版成長記録

サンプル成長記録の再閲覧はブラウザの再読み込みボタンをクリックします。