inventor のすべての投稿

脳トレゲーム作成一例

脳力トレーニング

青少年の人気職業は時代によって変化します。「末は博士か大臣か」という言葉がありました。今はユーチューバーゲーマーが人気とか。安定した職業とはいいがたいですが、華やかさが喧伝された結果でしょうか。

戦争に用いた弾道計算がコンピューターの性能向上に役立ったように、ゲーム開発から日常生活に貢献するシステムが確立された例はいくつもあります。

今回、脳力トレーニングゲームを作りました。ゲームの作り方の一例をまとめます。ゲーマーになるための秘訣として参考になれば幸いです。

ゲームの概要と趣旨

1200種近い画像から10個を選んで順に表示し、少し前に表示された絵柄を当てるゲームです。ゲームの難度は初級、中級、上級とあり記憶すべき画像が7~9、6~8、5~7番目に設定可能です。

1回の表示画像は10種なので、連続120回の挑戦が可能です。1回ごとに対戦成績が表示されるので途中で終了できます。

当サイトはものづくりの原点を語るページです。そのため、扱う画像に趣きを設け、Unicode Version10.0(emoji5.0)の絵文字1182種を使っています。

emoji5.0は56文字が追加されましたが、ずばり新設された絵文字の仕様書を手に入れることはできませんでした。周辺のドキュメントから56種を決定しています。正式機関からの発表と違った場合はご勘弁ください。


脳トレゲームの使い方

  1. ここでは入力促進をシアン色、ガイドメッセージをピンク色で表示し順次、切り替える。
  2. 左上の開始ボタンをクリックして開始する。
  3. 10個の絵文字が表示される。後に表示順がシャッフルされるのでその前に7~9番目の絵柄を記憶する。
  4. 「〇番目の絵?」が表示され、指定された絵の記憶を呼び起こす。
  5. 下段のシアン背景色の絵をクリックするとあたり/はずれが表示される。
  6. あたりの場合、四字熟語の解説へ、はずれは残念至極が表示される。
  7. 下段の絵柄背景色がピンク色に、開始ボタンがシアン色になったら次にチャレンジする。
  8. 118回戦までトレーニングできる。

発展機能

  1. 初級、中級、上級の難易度を選択できるように機能を追加する。
  2. 難易度のランク設定の他、さらなる難度設定に表示速度を変更できるようにする。
  3. 記憶した画像に合致した時には、褒美として四字熟語のリンク先にジャンプし、漢字検定への実力を養う。

動作例

 

 

絵文字の薦め

絵文字とユニコード

ナスカの地上絵のように絵で感情を表現する習慣は古くからありますが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う



ファイル比較ツール

ツールとノウハウ

物を作るに当たり、材料とそれを作るツール(道具)があれば十分とは限りません。ものには大きさ、重さ、成分など様々な仕様があり、その上、料金、納期などたくさんの制約があります。そのため、周辺知識(技術情報、ノウハウ)と多くの道具を必要とします。

双方を豊富に持ち合わせてこそ、一流の製造者と言えるでしょう。ソフトウェアを開発するに当たり、幾度となくソースコードの改訂が行われます。改訂記録簿に改訂理由や改訂箇所などを記録して管理します。

改訂記録簿に記入することは大きな改訂であるときのことが多く、小改訂では省略されることがあり、以前のファイルと最新ファイルの差を浮き彫りにしたいことがあります。それを解決するツールにファイルコンペアがあります。

フリーソフトにもごまんと数がそろっていますが、今回はWindowsに備え付けのFC.EXEの使い方を紹介します。

コマンドプロンプト

2つのファイルを比較するツールであるファイルコンペア(FC.exe)はDOS時代から深い歴史があり、Widowsのコマンドプロンプト(CMD.exe)で動作します。「スタート」-「Windowsシステムツール」-「ファイル名を指定して実行」-「CMD.exe」により起動されるアプリがコマンドプロンプトです。

起動されるとモニタ画面が黒くなり、C\のようなプロンプトマークが表われます。コマンドプロンプトはタイプライター時代のCUI(Character User Interface)アプリですがまだ現役です。現在のGUI(graphic User Interface)に相当する代替品がない場合などに使われることがあり、今回、FC.exeを使ってみます。

上の図はCMDのプロパティで画面の色、文字の色を変更しています。

コマンドプロンプトモードで動作するアプリは「CMD.exe」の起動後にキーボードからFC.exeのようなプログラム名を入力して立ち上げることが一般的ですが、「ファイル名を指定して実行」の次に「FC.exe」で直接、立ち上げることができます。

コマンドプロンプトモードを経由せずWindowsから「ファイル名を指定して実行」した場合、コンソールに表示する動作結果は一瞬で消滅するので、コンソール出力を標準出力装置(モニタ)からディスク装置に切り替える措置は必須です。

ファイルの比較

ファイルコンペア(FC.exe)の機能や使い方を知るには、CMDアプリの起動画面で

Help  FC  >  FileCompare.TXT

と操作すれば、FileCompare.TXTに以下のように出力されます。

2つのファイルまたはファイル セットを比較し、相違点を表示します。

FC [/A] [/C] [/L] [/LBn] [/N] [/OFF[LINE]] [/T] [/U] [/W] [/nnnn]
   [ドライブ1:][パス1]ファイル名1 [ドライブ2:][パス2]ファイル名2
FC /B [ドライブ1:][パス1]ファイル名1 [ドライブ2:][パス2]ファイル名2

  /A         相違する各部分の 1 行目と最後の行だけを表示します。
  /B         バイナリの比較を実行します。
  /C         英字の大文字と小文字を区別しません。
  /L         ファイルを ASCII テキストとして比較します。
  /LBn       連続する最大不一致行を指定行数に設定します。
  /N         ASCII の比較で行番号を表示します。
  /OFF[LINE] オフライン属性が設定されたファイルをスキップしません。
  /T         タブをスペースに変換しません。
  /U         Unicode テキスト ファイルとしてファイルを比較します。
  /W         連続した空白(タブとスペース)を1つのスペースに圧縮して比較
             します。
  /nnnn      不一致発見後に確認する、一致すべき連続行数を指定します。
             
  [ドライブ1:][パス1]ファイル名1
             比較する最初のファイルまたはファイル セットを指定します。
  [ドライブ2:][パス2]ファイル名2
             比較する2番目のファイルまたはファイル セットを指定します。

コマンドプロンプトを隠す

コマンドプロンプトになじみがない場合はコマンドプロンプトを隠しましょう。それにはコマンドプロンプトに深いかかわりのあるバッチコマンドを理解しなければなりません。バッチコマンドを収録したファイルは拡張子がBATで、一つのコマンドが終了したら次のコマンドを実行するなど複数のまとまった仕事ができるように定義されたテキストファイルです。

直前のアプリが終了コードをサポートしているとエラーコードに対応した制御をする機能があり、使い方により高度な処理をさせることができます。ここではバッチファイルを使って、ファイルの比較状況をファイルに残しコマンドプロンプトの存在を隠します。

【FC2.BATの内容】
C:\Windows\System32\FC.exe /L /N sample1.html sample2.html > FC.TXT

例えば、FC2.BATに上のようなコマンドを作って実行します。実行されるFC2.BATと同一フォルダに比較される2つのファイルが存在すれば、一瞬、黒い画面が現れた後、FC.TXTファイルが数秒後に生成されます。

生成されない場合はFC.exeが実行されなかったケースが多く、実行されてもFC.TXTファイルサイズが0の場合は比較対象のファイルが見つからないケースがほとんどです。比較するファイルが異なるフォルダにある場合は、ファイル名にフルパス指定をします。

因みに’>’はリダイレクト機能であり、コンソールに表示される内容をファイルに保存することを指定しています。この機能によりコンソール画面に表示されるはずであった比較結果がテキストファイルに保存され、コマンドプロンプトの存在が隠蔽されます。

このあと、テキストエディタにより比較結果を確認します。

比較結果(FC.TXTの内容)

ファイル sample1.html と sample2.html を比較しています
***** sample1.html
   51:  var okng=["", ""];              //ニコニコ顔(OK)、涙顔(NG)
   52:  var ctx=helpCount=count=success=passWord=pw=0;
   53:  var retry=3;
   54:  var tm = setInterval("timerX()", 1000);
***** sample2.html
   51:  var okng=["", ""];              //ニコニコ顔(OK)、涙顔(NG)
   52:  var ctx=helpCount=0;
   53:  var count=success=0;
   54:  var retry=3;
   55:  var passWord=pw=0;
   56:  var tm = setInterval("timerX()", 1000);
*****

さいごに

ファイルの差分を色を変えて表示してくれるファイルコンペアツールがたくさん揃っています。これらに較べFC.exeはモノクロムで華やかさはありませんが、比較結果をファイルに残すことができるので結構、重宝しています。

様々なイースターエッグ

復活祭の卵

イースターエッグとはキリスト教信者が、復活祭(イースター)を祝うために卵に装飾を施して、それらのなかに子供が喜びそうな菓子やおもちゃなどを隠して楽しむ遊びのようです。

教会での結婚式、バレンタインデー、ハローウィン、クリスマスが日本の文化に根付き、落ち着いた行事として慣行化している中、イースターエッグで楽しむ風習の定着はイマイチと言えそうです。

復活祭の日付が毎年、異なり一定していないことも定着しない理由の一つかも知れません。

庶民のささやかな発言

古今東西、力のないものが大きな力を持つものへの風刺や反発に、落書きや怪文書で対抗します。最近は絶大な力を有しつつも、Twitterによる発言に熱心な指導者もいます。

日本の歴史的に有名な落書きに1334年の二条河原の落書(にじょうかわらのらくしょ)があります。七五調の文体でよくぞ88節もの風刺を利かしたものよと評価されています。

本来のイースターエッグの他に、コンピューター版イースターエッグがあります。いたずら心、遊び心、怒りのはけ口に天井裏に落書きしたり、フェンスや橋梁の橋げたなどにペインティングで悪ふざけをして周辺への迷惑行為を見かけます。

世界的にも歴史的建造物の天井裏に、上役や役人への憎悪図や男女の交合図などが発見されることがあるようです。この他、地下室や倉庫などに長い間、人目に触れずに大衆の叫びが埋もれて世紀の大発見などと報道されることもあります。

コンピューター版イースターエッグ

コンピューター版「イースターエッグ」は、開発者が仕込んだ一種のお遊びと言える機能です。

日本の企業はお固いのが通例でユーモア精神が欠落していると言われ続けてきました。

ソフトウェアは欧米が先進国であったせいか、コンピューター版イースターエッグは割と受け入れられています。

有名な話は「Windows95の開発者をフォルダウィンドウに表示するコマンド」です。

英語版だけかと思っていましたが、最近、日本語版もあったことがわかり、知るのが遅すぎたと残念に感じています。

日本での動き

アメリカがくしゃみをすれば日本が風邪をひくとも言われてきました。米国のトレンドが日本に伝わらないわけがありません。

日本でも過去に仕込んだからくりが明るみになってきました。

表沙汰になるには寿命の長い製品であることが必須です。正規仕様でないものが商品の全盛期に語られることは少ないです。うまくストーリーを考えれば面白いドラマになりそうです。世の中の新しい展開を注視せずにはおられません。

おまけ

おまけとして、単純なイースターエッグをJavascriptでプログラミングしました。下の画面の特定箇所をクリックすると新たな文言が表われます。

 

 

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

ものづくりの信頼性

悠久の流れの一コマ

何か事件が起きるといつも語り継がれます。最近、大組織の不祥事が立て続けに表に現れ右往左往の様子が見られ、ものづくりへの信頼が揺らいでいます。

規制緩和、新興国の追い上げ、法の厳正運用化など様々な要因が考えられますが、ひた隠しにしていたものが一気に噴き出したとも取られます。

ブログタイトルにものづくりと銘打っていることから日頃の思いを記録に残したいと思います。

潮の変わり目

ここ150年ほど、ひたすら先進国を見習い、近代化を進めて先進国の仲間入りを果たしましたが、その先進諸国にも様々な問題が噴出しています。潮の変わり目に一斉に突入したのでしょうか。

電気、車、鉄鋼産業、報道機関で次から次へと法令違反が明るみになっています。これはまさに最近、起きた現象ではなく明るみになったという表現がぴったりです。

以前はなあなあ、どんぶり勘定で許されていたものが本来の姿に戻りつつあるといってもよいでしょう。

組織は上意下達(じょういかたつ)がほとんどで上位・上層の命令が絶対視されています。ピラミッド型組織は、三権分立が民主主義の根幹である三すくみの権力構造でなく、一方的です。創業者や先進者の強固な意志に貫かれた政策でなければ国際競争に勝てないのでしょう。

株主総会、第三者機関があるではないかといいますが、傀儡的な形だけの存在がほとんどです。

歴史を振り返る

過去には大きな業績を残した人が大勢います。部下には極めて非情であった信長やより血の濃い後継者を守るために、一時は頼りにした薄くなった縁者をことごとく排斥した秀吉などが語られますが、やり遂げた業績からすれば、それらの悪行は大したことではないと評価する人もいます。

それに較べ、実力相応にあるいは幸運にも名のある会社の指導者になった選ばれし人々には私利私欲はないのだろうか。金品が動くと問題にされますが、邪まな考えで組織を私化した場合の評価はグレーです。先の2偉人とは比較できないほどの不行状もあると思われます。

時節到来

風通しの悪い組織はなかなか改まりません。改革をしようとしても柵(しがらみ)でにっちもさっちもいきません。自分の人間関係、親、親類にまで及びそうです。

藤沢周平の時代小説に『嗅足組(かぎあしぐみ)』という藩主直属の秘密集団があり、突如、藩の権力を私化した不埒ものを拘束するシーンが多く出てきます。

長年、先輩がやってきたことを踏襲しただけなのに、突然、逮捕されることが出て来るかも知れません。

ドラマにもなりましたが、刑務所で印刷した大学入試用紙をバレーボールに入れて塀の外に持ち出した事件がありました。また、かつて社内資格を採るとき、あるいは縁故が幅をきかす就職に便宜を図ったときに金銭が動くという話を耳にしたことがあります。

茶菓子代ならば許される範囲でしょうが個人レベルで何十万円という金銭の授受はいつ、嗅足組に踏み込まれてもおかしくありません。OKからNGの境目がいつ変更になるかは神のみぞ知るです。

飛行機が強硬着陸するのは危険ですが、知恵を絞って平穏な軟着陸が望まれます。江戸時代の幕藩体制をいつまで温存するのかという声が聞こえてきます。時代に乗り損ねた制度は徐々に消え去る運命でしょう。

オンライン認証の一例

スピリチュアルゲーム

パワースポット

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

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

スピリチュアルとは

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

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

スピリチュアルゲーム

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

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

遊び方

ゲームの進め方

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

 

動作例