Cloud Vision API を利用した画像認識ゲームを制作

目標

ミーハーなので、アルファ碁を見て人工知能や機械学習に関心を持った。
この技術を使って何か出来ないかと調べていたところ、Googleが画像認識技術を提供していることを知り、本作を作ることにした。

本作を通じて、以下の2つの目標を達成したかった。

レスポンシブデザインの実践
初めてのサーバーサイドアプリを作る

今時レスポンシブでないウェブページは有り得ないだろう、ということで、PCからもスマホからも遊べるよう、レスポンシブデザインで作ることにした。
半年くらい前に一度作ったきりだったので、記憶を思い出すことも兼ねて。

せっかくNode.jsの勉強を始めたので、クライアントサイドで完結させず、サーバーサイドプログラミングをやろうと思った。規模の小さな本作なら実験として最適だろうし。
それに、都度APIを叩いたほうが、「人工知能と競争する」というコンセプトにも合っている。

結果

レスポンシブデザイン

一応、出来た。大したことはしていないが、スマホから見ても、レイアウトを維持できている。
ただ、今回はかなり大雑把に済ませたけど、しっかり作ろうと思ったらかなり大変だな。当たり前だけど端末によって画面サイズが違うから、主だった端末全てに対してちゃんとしたレイアウトを提供するのは、かなり面倒だと思う。

それから、そもそもcssがあまり楽しくなかった。
プログラミングの場合、自分で仕組みを作っていくという、パズル的な楽しさがある。どうすれば上手く動くか、どうすればより効率的で、保守性や可読性も高い「良いコード」になるのかを自分なりに考えて試行錯誤していくのは、楽しい。
だがcssはそういう面が少なく、私にとってはあまり面白くなかった。

まあそもそも、cssを直接書くというのが時代遅れであり、本当はSassなどを使うのが今時なんだろうけど。
cssに取られる時間を減らすためにも、cssをもっと勉強するべきなんだろうなと思った。

サーバーサイドアプリ

これは予算の都合で断念。
Cloud Vision APIは従量課金制で、最初は無料だが、一定量以上の画像を処理させると料金が発生してしまう。
本作では、1回の出題で4枚の画像を使用し、1ゲームで8問を出す。そうすると、1ゲームで32枚の画像を使う。私が3回テストしただけで、100枚近くになってしまう。しかも利用する画像は固定なのだから、何度も同じ画像を処理することになる。これはいかにもムダだ。

ということで、予め全てのデータを取っておき、それを使って全てクライアントサイドで処理することにした。
ゲーム本体においては、Node.jsの出番はなかった。