QRコードを作成するためのいくつかのステップ

こんにちは。

弊社のメルマガを購読されている方々はご存知かと思いますが、この「30分くらいで何か作ろう」の特別編としてＱＲコードを作成するためのツールをちょこっと前に作りました。


QR-Code bots

こちら、さくっと作った割には意外と反響があったため、今日は調子に乗ってこのツールを改造してみようと思います。
ついでに、改造に強い設計についてもちょこっと触れていきます。



以前作ったツールは、QRコード君（以下bot）が画面の横からちょこちょこ走ってきて一段ずつQRコードを作るものでした。

これを、bot全員がわーっと走ってきて、やんややんやとQRコードを作っていくものに改造します。
幼稚園あたりの運動会のイメージです。統制が取れているような、取れていないような。

さて。

途中の経過はさておいて、出来上がったものがこちらです。


QR-Code bots 2

どうでしょうか。
最終的な結果物（QRコード）は同じですが、それまでの過程がだいぶ違います。

実はこの改造自体には、そんなに時間がかかっていません。
この手の「複数のオブジェクトが同時にわいわいと動くもの」を作るときは、以下のような考え方で最初から作っておくと、後々の改造が非常に楽になります。

１：登場人物を定義する

この場合はbotくんだけです。何百人も登場しますが、結局は同じ機能を持った同一人物です。

botくん

２：登場人物が受ける命令を定義する

bot君が受け付けることができる命令はどんなものがあるか、考えます。この場合は、

• ここからここまで、なんとかして行け！


• しゃがんでQRコードの一部になれ！


• 画面の外に逃げろ！

これだけです。

３：登場人物が発生するイベントを定義する

botくんが、それをカントクする立場の人に伝えるイベント（「こんなことがあったよ！」という通知）を定義します。この場合は、

• 目標地点にたどり着いたよ！


• マウスで触られちゃったよ！


• 画面の外に逃げ終わったよ！

これだけです。

４：登場人物を管理する立場の人（カントク君）を作る

カントク君は、画面には登場しないのですが、以下のようなお仕事をします。この場合は、

• ＵＲＬを入力されたら、JavascriptにQRコードの作成を依頼し、結果を受け取る


• QRコードの内容に応じて、botくんをたくさん舞台に生み出す


• 一人ひとりのbotくんに「あそこまで走れよー」と指示を出す


• botくん全員から「たどり着いたよ！」イベントを受け取ったら、今度は全員に「しゃがめ！」と指示を出す


• だれか一人から「マウスで触られたよ！」というイベントを受け取ったら、全員に「逃げろー！」と指示を出す

おおざっぱに書くと、これだけです。

登場人物それぞれが「どのように走るか」「ぶつかったりしたときにどのように動くか」などは、カントクくんではなく、botsくん自体のほうに実装します。

このように、登場人物と、それをカントクする人、というように明確に立場を分けて作っておくと、今回のようにそれぞれの登場人物の動きやタイミングを変えたくなったときに、非常に簡単な修正だけで終わります。

最初から後々の改造を見越した実装を行うこと、これはソフトウェアを作るときにはとても重要なポイントです。

これから何か作るときに、ちょこっと参考にしていただければと思います。

（甲斐）