メイキング・オブ・すごいインスタグラム

12/15(月)から12/19(土)まで大阪港駅のアートギャラリーCASOでIGersJP最強展大阪が行われました。

その会場内で「すごいインスタグラム」という作品を展示させていただきました。

経緯としては、WEBSTAというInstagramのウェブビューワーの開発をやらせていただいており、そのご縁で会場内でお客さんが体験できる作品を制作、展示させて頂けることとなりました。告知も盛大ないいね数が付き、プレッシャーで死にそうでした。

今回の展示自体のメインコンテンツは写真展の方でしたので、お客さんがわかりやすく気軽に体験しつつ、写真を観るという受動的な体験の他に、能動的な体験が出来るような作品を目標としました。その目的を前提に、二つの「すごさ」を仮定しました。

・iPhoneアプリから誕生したInstagramはインターフェース上、指先での細々とした動きがメインとなっているので、もっと体を大きく使って操作できたらすごいのではないか。

・写真展という固定の展示物がある空間に自分の写真がインストールされたらすごいのではないか。

この事を念頭に、「ユーザーがスクリーンに映し出される写真を触ったり掴んだりできつつ、映しだされる写真もある程度操作が可能である作品」を作ろうと考えました。

習熟度の不安は抱えつつも、アドオンの多さと勉強も兼ねてOpenframeworksを使って作品を作ろうと思いました。

触ったり掴んだりするところは、Kinectを使って輪郭を抽出しつつ、物理エンジンを導入して当たり判定をつければすぐ出来ます。2012年~の藤本直明さんのImmersive Shadowが気持ちのよい動きがすごくて見習いました。

こうした作品はKinect登場以降、その気軽さから広く使われるようになりました。前述の藤本さんの作品も既に3年前でしたので、あんまりKinectKinectするとなんだかなぁと作品に入り込めない方もおられるかと思いました。

ただし、私はそこまでシルエット操作などに明るいわけではありません。ということでせめてもの思いでシルエット輪郭をofPathでいじって粒度を荒くして、ぷにぷにした質感にすることにしました。アプローチとしては斜め上感が漂いますが、自分のシルエット(影)というよりはアバターのような違った生き物を操作するような感覚になれば、体の操作の感覚が微妙に変わってくるのではないかという狙いを込めました。あとはぷにぷにしててかわいいのも重要でした。

シルエットが出来た後は、降ってくる写真を実装しました。降ってくる写真は特定のハッシュタグをつけた写真をアップロードすると画面に反映されるようにしました。自分のコンテンツをスクリーンに反映させるというのはteamLabの作品でよく見られます。Crystal Universeでも独自のウェブサイトがあり、LED照明を操作することが可能でした。

このハッシュタグを使う構造は外部APIを使う都合、数秒のラグが発生する可能性と、他の写真に埋もれてしまう可能性がありました。そこで、ユーザがウェブから認証すると一定時間そのユーザの写真だけがスクリーンを独占する「ユーザージャックモード」も加える事にしました。

写真の衝突判定にはBox2Dを使い、写真はInstagramから取ります。Openframeworksは前述のとおりアドオンがものすごいので、大体ofxとつけるとそれっぽいのが出てきます。ofxBox2dofxInstagramも余裕で出てきます。ofxBox2dはサンプルとOpenframeworks習得のメッカyoppa.orgに沢山のリファレンスがあるので、そちらを拝見し、実装しました。

ですが、ofxInstagramの方は、非常に簡単にInstagram APIとの連携ができるものの、Kinectの映像処理とthreadがぶつかってしまい、途中でFPSが激しく落ちてしまうという症状が発生しました。症状が複数の原因に基づくものだったので、この原因調査にとても時間がかかりました。そして結局別アプローチで解決することにしました。

すごいインスタグラムシステム設計図

Openframeworksはあくまでディレクトリ内の写真状況を見てコンテンツを操作し、InstagramやWeb認証画面からの情報はバッチで管理することにしました。管理するソフトウェアが増えるので出来れば避けたいですが、別けた分プロセスが別になり、作品のパフォーマンスが向上する利点や、バッチ実装はOpenframeworksの実装よりも習熟度が高かったのでがあったので、今回はこの方法を採用をしました。

Webクライアント側はユーザ認証だけをする簡素なものにしました。会社側からAWSのOpsworksを用意していただき、そこにウェブ環境を乗せました。Opsworksを使わせてもらったのは始めてだったのですが、便利すぎてヒキました。ドン引きしました。正直もう結構サーバーサイド知識いらなくなるじゃん!って思いました。Web業界少しでも離れると超怖いんですけどの典型例で、とても貴重な体験でした。Webは誰がどんな操作をするかわからないのが常なのと、InstagramAPIからは地味に色々な返り値が返ってくるので、様々なパターンに備えてバグ取りをします。Web側のバグ取りは設営当日の明け方まで粘りました。ここの工数はある程度見越していたのですがやはりいつも大変な作業です。

設営日に社長と会い、会場でリファクタリングと追加開発を行い、無事に発表の運びとなりました。会期中に数千人のお客様が来られ、#すごいインスタグラムという指定ハッシュタグにも250件を超える写真をアップロードしていただきました。

私は在学中の大学院の授業と別の展示が控えていたため、開場から1時間ほどしかいられなかったのですが、タグの増加や、SNSでの感想を見て喜んでくださったお客さんがいてほっとしていました。こういう体験はインターネットならではだなぁと自分の研究にも役立つ体験が出来ました。

一緒にインタラクションを考え、このような機会を下さった、Joe Mioさん、Opsworksなどの技術的なフォローをしてくださった、Masakazu OHNOさんに感謝しています。テクノロジーと体験を同時に考えるとても良い機会でした。今後もプログラミングを通して更に良い体験を提供出来るように勉強していきたいです。