アホWebサイト紹介「PointerPointer」

かつてこんなアホなwebサイトがあっただろうか？ SNSなどにアップされた人物写真の指先が、自分のマウスカーソルの位置を指差してくれるだけのWebサイトです。

アクセスしてみる

いきなり真っ黒の画面が表れて、「Finding pointer... Please hold still.」の文字が表示。 マウスを動かすな！と言われているので、5秒ほど待っていると・・・ こんな画像が表示・・・ 最初何を意味する画像なのかよく分からなかったんですが、指先がマウスカーソルを指さしているという事が理解できました。 おもむろに、マウスを動かしてみると・・・ おお！、ちゃんとカーソルを指さしてくれる。 これが、「ポインターポインター」というWebサービス！ なんて、アホらしい仕様なのだ！

どんどん指さしてもらいたくなる衝動

なんだか毎回違った画像が表示されるので、どんどんマウスを動かして指さしてもらいたくなってしまう。 こんな場所も・・・ こんな場所も・・・ どんどん指さしてくれます。 ※念のため、人の顔部分はモザイク加工をしておきました。

サイトリンク

https://pointerpointer.com/

技術検討

単に面白がっている場合ではありません。 こんなアホなサイトですが、やっていることは非常に高度なことが行われています。 ここからは、もし自分がこれと同じ仕様のサービスを作るとしたら、どうやるかという技術検討をしてみます。

クローリング

まず、SNSから画像を収集するのですが、指差しが行われている画像を判別する必要があります。 この時に、指差している先の座標（マウスポインターの位置に相当する）を取得します。

座標判定

また、更に同時に、指さしている方向（Direction）も取得しておいて、マウス位置の範囲をデータベース化しておきます。 たくさん画像をクローリングしていって、画面内の全ての位置にマウスが来ても指差しが行えるデータが網羅した状態になるとデータ収集完了です。 その後も地道にクリーリングを日々続けていくことで、おもしろ画像をたくさん収集することができるでしょう。

ブラウザイベント

ここで終わりではなく、実際にマウスを動かした時の座標を取得して、取得した画像とのアスペクト比を比較してちゃんとマウスポインターを指差す位置をデータベースから検索します。 ヒットした画像を表示する。 これで一通りの技術仕様ができますが、簡単に座標検出って書きましたが、AIの画像認識技術が必要になるので、簡単なプログラムや環境構築ではできかねますね。

githubで検索

こんなおもろいシンプル技術は、Githubに何かしらのリポジトリがあるのではないかと思って、検索してみました。 https://github.com/search?q=pointerpointer&type=repositories 案の定、フォークされまくっているのか、真似されまくられているのか、 たくさんのヒットがされました。 どれが本体なのか調べるのもめんどくさいので、興味がある人はフォーク元を追ってみてください。 真似物で、Javascriptのみの表示部分だけやっているゴミリポもあったので、ご注意ください。

追加アイデア検討

次にこのWebサイトに何か足りないということがあるとすれば、利用者からのフィードバック機能が足りていないと感じました。 面白い写真や、秀逸な指差し方などを、イイネする機能などがあるとその後も楽しめるし、 自動で顔モザイク機能を入れて、さらにSNSにアップできたり、同じ座標で複数の画像が選べる機能などがあると、より楽しめるのではないかと考えてみた。 でも、これ、一体何の役に立つの？？？ という、安易な疑問は、このようなアホサイトには愚問です。 その場、その瞬間に、笑う事ができれば、それでいいんです。 人の人生、笑っていれば何の間違いもありません。 アホサイト、最高！