伸び行く若者
疲れを知らない子供のように…は「シクラメンのかほり」の一節です。歳を感じさせない昔の青年も存在します。「歳を重ねたらいたずらに若ぶらずに、盆栽や写経などに没頭すればよいのだ」という意見もあります。
世代交代は必要です。長年にわたって築き上げたことを灰にするのはもったいない、かっこよく言うならば次の世代に引き継ぎたいというのは最後のあがきでしょうか。多くのことを吸収できる小中学生に期待しましょう。
QRコード探求の始まり
QRコードを巡る様々なサポートは飽和状態になるほどに出回っています。しかしながら、自分の引き出しのなかに理解した技術として蓄積されているとは限りません。今回、JavaScriptプログラミングの一環として、動く物体に貼られているQRコードを読み取って表示する例を考えてみましょう。
QRコード解析方法
指定した文字列からQRコード画像を自ら作るサンプルコードはGithubから容易に入手することができますが、今回、WebサイトでサービスされているQRコード画像を作るサービス—QRコード作成 CGI’s『ご入力いただいた文字列のQRコードを作成する』を利用しました。
指定されたテキストボックスに URLやメールアドレスなど任意の文字列を入力し、作成ボタンをクリックして取得しました。
『誰やらが 形に似たり けさの春』という芭蕉の句は左図のようになります。一般的に使われる全角文字もコード化することが可能です。正確にエンコード・デコードされないものが出回っていますが、漢字圏に身を置くものとして早めのマスターを心がけたいです。
- 上記サイトから設定した文字列のQRコード画像を4個、用意する。
- jqueryソースコード(jquery.min.js)をインクルードする。
- githubから20個近いmegapix-image.jsなどのQRコードサポート関数群を入手してインクルードする。
- ベルトコンベア、小車、大車の画像を作る。
- 画像ファイルをサーバーのアップロードする。
- 指定されたファイルをimg要素でQRコード画像を読み込む。
- 読み込んだ画像イメージをCanvasに設定する。
- Canvasを利用してBase64コードに変換する。
- Base64をQRコードにデコードし、文字列を抽出する。
- 抽出した文字列を解析結果として表示する。
- クロスオリジンエラーをクリアするため、オプションパラメーターに「-allow-file-access-from-files」を指定してChrome.exeを立ち上げておく。
- Chromeならば、–disable-web-security –user-data-dirのパラメータも指定する。立ち上げ時にエラーメッセージが表示されてもこれを指定しないと思い通りの実行になりませんでした。
動作ブラウザの情報
動作可能なブラウザは今のところ、Chromeだけです。その上、ローカル環境では思い通り動作するのに納得いかない処理があり、QRコードを貼り付けた物品がベルトコンベアに乗って移動する部分は残念ながら描画されません。また、漢字は文字化けが起き正しく表示されません。時が解決してくれるかも知れません。
動作例
進行 ｘ ｙ
記載内容：
