Tweetこんにちは。ぐるなびで広告関連サービスの開発を担当している長谷川@2児の父です。PiとGobotを使って、子供と遊べる宝探しIoTゲームを作りました。はじめに我が家には二人の娘がいます。次女はまだ生後半年なのでようやく寝返りができるようになったところですが、3歳の長女はいろいろなことがわかるようになって、毎日泣いたり怒ったり笑ったり激しい喜怒哀楽を見せてくれます。父親として感情豊かになってきた娘の喜ぶ顔を見たいという思いから、これまで何度もサプライズをやってきたのですが、子供は意外とシビアであまり食いついてくれません。そんな中彼女が唯一夢中になったのがお正月の宝探しゲームでした。※ハート型なのは家にあったふせんがこの形しかなかったためで、特に意味はありません3歳の娘に普通にお年玉をあげてもあまり盛り上がらないだろうと思い、ヒントをもとに宝探し風にして探させるという昭和の漫画とかでよくあるやつを試してみました。ふせんに指示された場所に行くと次の指示が書かれたふせんが貼ってあって、順番に進んでいくと最後にポチ袋が待っているアレです。娘はこのゲームをとても気に入ってくれて、今年の正月は三ヶ日毎朝同じ場所にふせんを貼って、毎朝同じようにお年玉探しをやらされました。Piを使って試してみました。3ケーブル類ゲームのルール手元に南京錠があったので、宝物を隠してこれで施錠して無事解錠できたらクリアというゲームにします。Piの電子部品を使って答えるタイプにしました。フロントエンドにReact.jsを選んだのは、Websocketを使う上でSPAのほうが画面制御がしやすそうだったから。サーバサイドのGo言語+Gobotは以下の理由から選定しました。WEBサーバ、GPIO操作、WebSocket操作が1つの言語で完結するラズパイだけでなくいろんなプラットフォーム(ArduinoのほかAR.DroneやSpheroなど)に対応しているので、覚えておけば今後応用がききそう並列処理ができるので複雑なGPIO操作が容易に実装できそうストーリー設定・娘の大好きなぬいぐるみを救出する今回協力いただく、娘が一番気に入っているぬいぐるみの「ワン」。年中持ち歩くものだからなかなか洗濯させてくれない元々は奥さんの実家の車に放置されていた出処不明のぬいぐるみなのですが、娘はそれを大変気に入り「ワン」と名前を付けて一緒に寝たり、お出かけに連れて行ったりします。今回は悪いやつがワンをクローゼットの中に隠したという設定にしました。ゲームを作るさっそく作っていきましょう。悪役をHTML&CSSで作るまずはワンを連れ去った悪いやつをデザインします。ゲームはiPhoneのWEBブラウザをベースに進行するのでHTMLとCSSで描画。デザインは単純な図形の組み合わせでできるどくろタイプとしました。ちなみに娘は少し怖がりなので、どくろは極力怖くない見た目にしています。35%;}やられたときの顔も用意。rotate(30deg);}表情が変わるだけだとわかりにくいのでアニメーションCSSで効果をつけます。問題に正解するとドクロが点滅し、ダメージを受けた(っぽい)演出をさせます。}}解答を間違えてどくろがドヤ顔するときのHTMLも作ります。</div>問題を作る悪いやつの基本パターンができたので、次に問題作成にとりかかります。問題は南京錠の解錠番号にあわせて3問。第1問:React.jsとCSS3のアニメーション1問目は簡単な引き算です。React.jsで実装したソースは以下。250px;}onChangeで入力された答えをanswer1に格納しておき、こたえるボタンが押されたらgotoQ2で回答をチェック。正解ならQ2へ、不正解であればハズレの画面を表示させます。娘はひらがなとカタカナは普通に読め、数字も12までなら(時計の文字盤を見ながら)数えられるのですが、引き算は教えたことがないので多分答えられません。CSS3のアニメーション機能を使って30秒経過したらボールが落下して答えがわかるようにしました。先ほどのCSSに、30秒経過するとボールが落ちるアニメーションを追加。画面を30秒放置するとこんな感じでボールが落下します。残ったボールの数を答えれば正解。第2問:React.jsとCSS3のアニメーション2問目は身近なところから出題。信号のライトの並び順を問題にしました。:W320]こちらも1問目同様、20秒経過したら色がつくようにアニメーションCSSを入れます。:W320]ソースはこちら。this.state.checked3がtrueの場合は正解、それ以外の場合は不正解の画面を表示させてQ2へ戻ります。Piと連動3問目が最後の問題となります。Piと連動して、光っているLEDのどれかを消すと悪者をやっつけることができる、という問題にしました。GPIO経由でのLED制御およびWebSocket通信を行うプログラムはGo言語で実装しGobot+WebSocketライブラリを使います。配置ピンとパーツの接続は下記としました。GobotからGPIOピンへの接続を行う場合GPIO番号ではなくピン番号を指定します。});サーバサイドでGoのプログラムが起動すると、最初に3つのLED全てを点灯させた後、WebSocket経由でクライアントと接続します。renderを呼び出してページを切り替えます。間違ったボタンが押された場合は不正解のページを表示させた後に3問目の最初に戻ります。LEDが光っているところGobotでボタンの入力を監視し、ボタンが押されると下のように画面が切り替わります。Piのボタンを押したらどくろがやられるところ子供と遊ぶ実装が完了したので、早速娘と遊んでみましょう。WEBサイトはiPhoneで表示させます。どれくらい時間がかかるかわからないのでiPhoneの画面ロックはOFFにしておきましょう。ワンをクローゼットに隠し、南京錠で施錠。どくろのサイトのURLをQRコードにし、「ちょうせんじょう」と書き足して娘に渡します。iPhoneでQRコードを読み込むと、どくろからワンはいただいたとメッセージが......極力かわいく描いたつもりが、この時点で若干びびり気味です。いえ3問答えないとワンは取り戻せません。がんばれ、娘!第1問やはり引き算はまだ難しかったようで、なかなか進みません。答えがわからず、しばらく考えていると・・・ボールが落ちていきました。正解!最初の数字は「5」。こちらも同じように答えを聞いてきましたが、ちょっと待つと色がつくので気づいたようです。連続正解!次の数字は「7」です。第3問いよいよ最後の問題です。どくろから、パパの部屋へ行けとの指示がありました。指示通りパパの部屋へ。急いで階段を駆け上がる娘。どくろの言ったとおり、3つのランプが光っています。ここに来てとうとう「わからない」と泣き出してしまいましたが、妻と二人で押すボタンを教えます。どくろをやっつけた!最後の番号は「3」でした。番号を入手した娘はクローゼットへ走ります。どくろから聞いた3ケタの番号をセット。するとクローゼットが開き無事にワンを助け出すことができました!反省ゲーム後に娘から下記の指摘事項をいただきました。問題が3問しかないのは少ない。ボタン1つ押すんじゃなくて、3つ全部押したら正解のほうがよかった。隠すのはぬいぐるみじゃなくて、次はいらない棒にしなさい。どくろの色が青だと男の子っぽいので、ピンクにしなさい。同様にまつ毛をつけなさい。怖くないようにどくろを描いたつもりが、それでも結構怖かったみたいでどくろへの指摘が多かったです。何かを隠す場合、親が思っている以上に子供はぬいぐるみに愛着があるので、どうでもいいようなものを隠したほうが良いと思いました。ちなみに娘がぬいぐるみの代わりに隠したらいいと提案してきたのがこちらの棒です。感想IoTは思った以上に子供と遊ぶのに親和性が高いように思いました。今回のようなゲームを作る場合、キーボードの特定のキーを押したらクリアのような形でも実装ができますが、あえてボタンを押させることでゲームをやっている感がぐっと増します。ボタンを押すかわりに3色のケーブルのうちどれか1つを切ったら正解というようなゲームも簡単にできそうです。アクション映画みたいですね。Gobotは今回はじめて使いましたが直感的でわかりやすく、何よりGo言語の特徴であるchannelやgoroutineが使えるので、センサーを並列処理で扱うことが多いIoTなどのフィジカルコンピューティングに向いている気がします。Piと連動した宝探しをやりたいと思います。お知らせぐるなびでは一緒に働く仲間を募集しています。長谷川ぐるなびビッグデータを使った商品開発を行っています。2児の父親で、プライベートでは子供が喜ぶような何かを作ったりしてますが、どれも反応がいまいちなのが悲しいです。google.setOnLoadCallback(initialize);スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。