· 技術 · NOTE_02

画像を外に送らずにゲームを作るブラウザの中だけで完結させる仕組み

写真を使うアプリで気になるのが「その写真、どこかに送られていない？」という点です。画像走では、選んだ画像を一切外に送りません。このノートでは、それをどう実現しているかを紹介します。

なぜ送らないことにこだわるのか

スマホの写真には、家族や友だちの顔、家の中、位置が分かる風景など、人に見せるつもりのないものが写っていることがあります。遊びのために写真を選んでもらう以上、「どこにも送らない」と言い切れることは、安心して遊んでもらうための前提だと考えました。

また、写真を受け取らなければ、それを保管・管理する必要もありません。万が一の流出も起こりえません。小さな会社が運営するサービスとして、持たなくてよいものは持たないほうがよい、という判断でもあります。

ブラウザの中で色を読み取る

最近のブラウザには、画像を読み込んで、その点ひとつひとつの色を調べる機能が標準で備わっています。画像走ではこの機能を使い、次の手順で64色を取り出しています。

  1. 画像を端末の中で開くファイルを選ぶと、ブラウザはその画像を端末のメモリの中で開きます。この時点では、どこにも通信は発生しません。
  2. 真ん中を正方形に切り取る縦長や横長の写真でも、中央の正方形の部分を使います。
  3. 8×8 に縮めるブラウザの描画機能（canvas）で、正方形を 8×8 ピクセルまでなめらかに縮めます。縮めるときに周りの色が混ざるので、1マスの色は、元の写真のその部分の「平均的な色」になります。
  4. 64色を読み出す縮めた画像から64個の色の値を読み出して、選手の色にします。

レースの計算も、ブラウザの中で行います。画面の動きが止まらないように、計算は画面の描画とは別の作業場所（Web Worker と呼ばれる仕組み）で行っています。

本当に送っていないか、どう確かめたか

ブラウザには、そのページがどこと通信しているかを一覧で見られる開発者向けの機能があります。画像を選んでレースを最後まで行い、その間の通信を記録して、発生しているのがページを表示するためのファイルの取得だけであることを確認しました。

なお、画面に表示される広告や、アクセス解析のための通信は別にあります。これらは画像の情報を含みません。詳しくは各サービスのプライバシーポリシーをご覧ください。

挑戦状のリンクに入っているもの

友だちに対戦を申し込む「挑戦状」では、自分のチームを相手に届ける必要があります。ここでも画像は送らず、64マスの色の情報だけをリンクに入れています。

16段階にまとめる分、色はわずかに変わりますが、8×8 に縮めた時点で元の写真はほとんど分からなくなっています。リンクから元の写真を復元することはできません。受け取った人の画面でも、相手のチームは64個の色のドットとして表示されます。

この作りの弱点

端末の中だけで完結させる作りには、できないこともあります。たとえば、世界中のプレイヤーのランキングや、過去の対戦の記録をサーバーに残すことはできません。今の画像走では、それよりも「気軽に、安心して遊べること」を優先しています。

ただし、同じ2チームなら必ず同じ結果になるように作っているので、挑戦状を受け取った人の画面でも、送った人とまったく同じレースが再現されます。この仕組みは「同じ2チームなら、必ず同じ結果になる仕組み」で紹介しています。