月別アーカイブ: 2014年12月

干支の不思議2

ひつじ甲午(きのえうま)年もあと5日を残すだけとなりました。もうすぐ乙未(きのとひつじ)年の幕が切って落されます。

十二支と十干で12X10=120種の組合せが発生しますが干支(えと)は半分の60周年で一巡します。この現実は干支の不思議で語りました。

なぜ組合せのすべてが使われないかを調べてみました。2種類の呼称を組み合わせて呼び方を決める場合、次への繰り上げが発生したら2つとも繰り上げなければなりません。10と12には共通な素因数2が存在し、一巡までの分類数は組合せの1/2になります。

干支4X5

上に4X5=20種の例を示します。4と5には共通な素因数が存在しないのですべての組合せ20種を使うことができます。

甲乙丙

3X9の場合は共通な素因数が3だから27/3=9種の呼び方が存在します。赤橙黄緑の呼び方がすでに9種あり、甲乙丙を加えても増加せず9種であり、このような呼び方は単に日本語を英語で表現することと大差なく、うま味、深みがないので使われません。

未4ヒツジはメンヨウとも呼ばれます。英語ではsheep、単複同形です。群れで行動し単独でいることはほとんどないからでしょうか。

良い年でありますように。

サンプリングの妙

ui.enchant.jsのバーチャルパッドを使ってみました。マウスや方向キーで画像を自在に移動させるときは非常に便利です。今回、方向キーの押下で動作を起動し、さらに再度の押下で動作を停止する処理の問題点を整理します。

下の図は太い線がキーの押下状態を表し高さがキーオン状態を示します。縦細線はサンプリングのタイミングです。赤丸がキーオン状態の検出を示します。

Sample1方向キーを処理のトリガーに使うことは稀ですがうまく使うと効果的です。上図の上矢印(↑)に示すように、かつては状態がオフからオンに変わるエッジ状態を検出することができ割り込み処理で確定的な処理を実行しました。今では高度なOS(オペレーティングシステム)が関与し割り込み処理という考え方はなくなったのでプログラミングに配慮が必要です。

sampling0

enchant.jsではキーの押し下げと離される時を区別できるようですが、us.enchant.jsではそれに代わる手法がないようです。

当初、図のA方式で66.67msの間隔でキー状態をサンプリングしたところ、1回のキー押下で2回キー押下を検出しました。B方式で間隔を2倍にしサンプリングを遅くしたところ、キー検出は1回になり制御は改善されました。

この方式はキーオン状態が短くなると検出されなくなるという不安定性が残ります。サンプリング間隔は信号オンの長さよりも小さくすることが必須条件です。

KeyInputA方式を改良したのがC方式であり、前回キーサンプリング状態を記憶し状態がオフからオンに変わった時をキーの押下があったとします。A方式の2と4は状態変化がないのでキーの押下ではないと判断します。

C方式で制御が安定しました。この処理はプログラミングの初歩的な手法ですが、知っていると知らないでは大違いです。窮地に陥った時は知恵を出しましょう。

情報機器、家庭に1台から一人複数台

情報機器の変遷

かつてテレビは数百軒に1台、数軒に1台、家庭に1台、一人1台と変遷しました。パソコンなどの情報機器も家庭に1台、一人1台から一人複数台の時代に変わりつつあります。数台といっても機種が異なり、デスクトップパソコン、ノートパソコン、タブレット、スマートフォンのように多様です。

TV

機種ごとに入力方法が違うのですべてに対応するアプリケーションが望まれます。情報端末機にはキーボードやマウスがあるものとないものがあり、タッチ入力マウス入力キー入力の3つがサポートされると使い勝手が向上します。

斜めに移動させる場合には2つのキーを同時に押すと便利です。

PC

以下に、3方法をサポートした妖怪画像を移動させるWebアプリを示します。

考察

厳寒期に差し掛かり個室ごとの暖房では物足りないことがあります。大きなストーブのある居間ではタブレットでの作業となることもあるでしょう。入力方法の改善に目を向けてみました。

Google Chromeで正常動作を確認しましたがWeb上にアップロードして実行させると3方法のうち、正常動作は1~2だけの場合があります。Google ChromeのJavaScriptバージョンとローカル上のバージョンに差があるためと思われます。

プログラムコードのポイント

プログラムコードの大半はenchant公式サイトからダウンロードしましたがui.enchant.jsの画像参照先のみを編集してあります。アプリコードではソースコードの取り込みはenchant.js、ui.enchant.jsの順に設定します。

ui.enchant.jsは今回のテーマであるバーチャルパッドをサポートするものであり、以下の図に示した4画像ファイルを必要としますがファイル名はそのままで編集すれば好みのデザインにすることができます。今回、pad.pngを編集しました。

4つの方向キーを形どり矢印を半透明にしているので画像と重なっても違和感は少ないです。

enchant.js-builds-0.8.2-b
└─plugins
      └─ui
            ├─pad.pag
            ├─apad.png
            ├─icon0.png
            └─font0.png

サンプルコード

<html>
<head>
<meta charset="UTF-8">
<title>KeyPad-sample</title>
<div id="enchant-stage" style="width: 600px; height: 600px;"></div>
<script type="text/javascript" src="https://aidesign.lolipop.jp/wp-content/uploads/2014/11/enchant.js"></script>
<script type="text/javascript" src="https://aidesign.lolipop.jp/wp-content/uploads/2014/12/ui.enchant.js"></script>
<script type="text/javascript">
enchant();                              // ライブラリの初期化
var CHARA_IMAGE_NAME = "https://aidesign.lolipop.jp/wp-content/uploads/2014/11/yuruch-3.png";
window.onload = function() {
    var game = new Game();              // Gameオブジェクト
    game.preload(CHARA_IMAGE_NAME);     // 画像読み込み
    game.onload = function() {
     var sprite = new Sprite(32, 32);   // スプライト生成
     sprite.moveTo(100, 100);
     sprite.image = game.assets[CHARA_IMAGE_NAME];// ゆるキャラ画像をセット
     game.rootScene.addChild(sprite);   // シーンに追加
     var pad = new Pad();               // バーチャルキーパッドを生成
     pad.moveTo(20,40);
     game.rootScene.addChild(pad);
     var SPEED = 4;
     var MOVE_RANGE_X = game.width - sprite.width;
     var MOVE_RANGE_Y = game.height - sprite.height;
     sprite.onenterframe = function() {
         if (game.input.left)  { this.x -= SPEED; }
         if (game.input.right) { this.x += SPEED; }
         if (game.input.up)    { this.y -= SPEED; }
         if (game.input.down)  { this.y += SPEED; }
         if (this.x < 0)                 { this.x = 0; } // X軸, 移動可能な範囲を制限
         else if (this.x > MOVE_RANGE_X) { this.x = MOVE_RANGE_X; }
         if (this.y < 0)                 { this.y = 0; } // Y軸
         else if (this.y > MOVE_RANGE_Y) { this.y = MOVE_RANGE_Y; }
     };
    };
    game.start();
};
</script>
</head>
</html>

サンプル動作

KeyPad-sample

 

電子式福引き管理ソフト封切

はじめに

抽選会電子式福引き管理ソフトを封切します。このソフトは前回に述べたように管理者向けのソフトウェアです。福引きの運用を定め、抽選くじを引いていただき景品をお渡しする管理ソフトの原型です。最後に挙げたサンプル動作で試してください。

使い方

使い方を説明します。景品数は特賞:1、1等:5、2等:20、3等:100、4等:400に設定済みであり、⇒キーの押下によりがらがらを回転させ再び⇒キーを押して回転を止め抽選玉を取り出します。停止が指定されても抽選玉の飛び出し口が所定の位置に来るまでがらがらは回転して停止します。

抽選玉が出てくると当たり等賞が表示され、特~2等賞の場合はファンファーレが鳴り響きます。

管理者モード

管理者モードを起動して現況を表示したり、抽選玉を追加するには⇐キーを連続6回押します。以下の画面が表示されます。このモードで⇓キーを押せば様々な設定が可能になりますが未実装です。

再び、⇓キーを押して管理者モードから福引きモードに戻します。

管理者画面

課題

すでに述べましたが賞品数や等賞数の設定は実装されていません。また、キャッチコピーの文言、ファンファーレなども固定であり設定は将来にゆだねられます。複数抽選器の同期や翌日への持越しはできません。

訪問者、時刻、操作・抽選記録も実装されていませんが、構造的には問題なく追加が可能でしょう。訪問者が途切れた時には勇ましいBGMが流れ、販売促進用のキャッチコピーが横スクロールするのも人目を惹きそうです。

管理者モードになるのも、いとも簡単であり実体的でありません。セキュリティを配慮した処置が施されるべきでしょう。

サンプル動作

→(右方向キー)の押下で開始・停止します。[EY-9K版]

合鍵と情報

前方後円墳盗難防止には錠前で施錠します。錠を開ける鍵の断面は前方後円墳のような形をしています。

江戸時代では蔵の鍵は経営者が肌身離さず身に付けていました。近年、物理的なものに代わり、パスワードと呼ばれる情報に取って代わろうとしています。この方式は情報が盗まれたことが判りにくいという難点があります。盗難者が悪意的に利用しなければ発覚しないことがあります。

合鍵づくり

昔ながらの鍵でも粘土で型を取り、複製した場合はパスワードの盗難に似て発覚に気づくのが遅れてしまいます。

鬼平犯科帳時代劇では鍵の型を取ったり、お店の間取りなどを事前調査する役割を引き込み役と呼んでいます。池波正太郎の作品によく登場します。

手先が器用というだけで合鍵づくりに誘い込まれる飾り職人や表向きは人当たりがよくて働き者の引き込み女はドラマの役柄に欠かせません。

古来から錠は備付けでなく取り外しができるものが多く、その意味では施錠するという言い方が一般的と思われますが俗に鍵を掛けると言っていました。

onetimepassword時々刻々変わるワンタイムパスワードはセキュリティーを高めます。多くの電子機器はインターネットにつながっているので固有な算出法を登録し、特別な機器を設置することなく小予算で強固な鍵を作ることもできます。

将来はパスワードそのものを秘密にするのではなく、方式を秘密にするようになるのでしょうか。

蔵出し秘蔵画に迫る

視線を釘づけ

ノーベル賞受賞や選挙戦の報道が盛んです。《末は博士か大臣か》の言葉でなりたい職業を言い表したのでしょうか。そのほか、なってみたい職業にオーケストラの指揮者プロ野球の監督があります。プロ野球の監督はブロックサインを駆使し派手なアクションで観客の視線を釘付けにします。

ブロックサイン画像

今回、ブロックサイン式パスワードで秘密の花園の扉を開け、謎に包まれた深窓に踏み込んでみます。

ブロックサイン式パスワードの操作法

ブロックサイン風な手順でパスワードの代わりをします。タッチパネルの特定箇所に決められた順に触れてください。下の画像で一度目は印内の番号順に、二度目も同所を同じ順序でタッチします。

成功すればとっておきの蔵出し秘蔵画(豊満な美人浮世絵)がご覧になれます。スマホではタッチ操作、パソコンはマウスを使います。失敗しても何度も1~5のタッチを繰り返せば成功します。

蔵出し秘蔵画閲覧に挑戦


最後に

タッチでパスワード代わりにするには、タッチ場所とタッチ順は秘密にします。今回の例では2回目からの手順になります。実際には桁数を増やしたり、時間・曜日などと絡ませて複雑にすれば実用的なセキュリティ対策となります。

タッチ入力位置の検出はenchant.js(v0.8.2)ライブラリーを使いましたが、ブラウザIEは相性が悪いようです。Google Chrome, FireFoxでは動作しました。

おまけ

この記事には広告やウィジェット欄がありません。それだけ気合を込めて作成されています。ウィジェット欄の表示を抑える手法は回を変えて発表したいと考えています。

電子式福引き管理ソフト4

機能

この作品は電子式福引き管理ソフトと銘打っているので、単に福引きを楽しむものではありません。福引き賞品を用意したり、キャッチコピーを折り込んだり、曜日、時間帯の訪問者などを把握し販売促進に供するために作られた管理者向けのソフトウェアです。主な機能を示します。

1.福引き
2.賞品設定
3.現況表示
4.キャッチコピー編集
5.販売分析

動作画面と動作概要

 

E-Lottery

上図は動作画面です。ゲームの操作はPC(パソコン)ではキーボードやマウスが多いのですが、スマホではタッチ操作になります。enchant.jsライブラリーでは方向キーを簡便に使えるように準備されています。通常のキーも使えますが少し手間がかかります。

上の主機能で2以降は管理者向けの機能です。一般利用者に起動されないようにパスワードを設けます。今回は↑、↓、←の3キーで6桁のパスワードにしました。3つのキーといえども3X3X3X3X3X3=729通りの組み合わせがあり、簡単なパスワードとして使えます。機能起動として設定したキーが押されると所定の処理が起動するようにプログラミングされます。4つ目の→キーは福引きの開始・停止専用キーに使います。

起動手順

①賞品設定 ———– ←←←←←←
②現況表示 ———– ↓↓↓↓↓↓
③メッセージクリア — ↑↑↑↑↑↑

セキュリティーを高めるには3つのキーを織り交ぜた方がよいのですが、判りやすいように上のように決めました。8桁にすれば6561通りの組み合わせになり実用的になります。

考察

フライトレコーダーを持ち出すまでもなく製品には通常の機能のほかに、メインテナンスや分析などの管理機能が備わっています。今回、その起動方法の一つについて語りました。スマホでは高機能タッチ操作が可能です。起動法やパスワードの扱いにはタッチ操作が望ましいです。稿を改めて「ブロックサイン風パスワード」として発表を予定しています。ご期待ください。

電子式福引き管理ソフト3

Rolling-sample

















マウスの代わりに→(右方向キー)の押下で開始・停止します。

WordPressカスタマイズの仕様が変わり、表示が乱れます。電子式福引き管理ソフト4、電子式福引き管理ソフト封切、電子式福引き管理ソフト改2をご覧ください。

電子式福引き管理ソフト2

新しい課題

新しいことを始めると様々な問題に直面します。JavaScriptで記述したローカル上のHTMLファイルで動作を確認し、ウェブにアップロードすると期待した動作になりません。以下のような項目で問題になりました。

electroniclottery

①マウス入力ができない。タッチ動作がマウスの代用になりそうですが互換性はそれほどでない。
②スクリプトプログラミングでPC上では文法エラーも起きず、期待した動作をしていてもウェブ上では、改行のみの文で文法エラーが起きる。
③if文などで&&や||で繋いだ複雑な文はウェブ上ではエラーになる。
④ローカル環境と異なり、ウェブではヘッダーとしてのスライドショーが画面表示を圧迫し、ブログタイトルや日付表示が画像表示とかぶる。
⑤ウィジェット欄が画面の表現範囲を狭めている。

等の問題が起きました。それぞれ、

①マウスの代わりに→方向キーで代替
②読みにくくなるが改行コードだけの文を削除する
③if文の条件式を簡素化しif文を入れ子にする
④特定のカテゴリではヘッダーやウィジェット欄への出力を抑制するようWordPressをカスタマイズする

などの対策で切り抜けます。

次のステップ

数々の問題点が発生しようやくがらがらを回転させることができました。ヘッダースライドショー、ブログタイトルの表示を抑制することができましたが、投稿日付やカテゴリ名がまだ表示されます。次回までには細かな調整ができるでしょうか。

Google ChromeとFireFoxで回転します。前者が一番、安定した動作になります。IEでは回転しません。調査中です。あたり玉の処理はまだまだかかりそうです。