先日開催したHACKist展「DIGITAL FRAGMENTS」で展示した「Clippable CODE」という作品についてご紹介します。

突然ですが、みなさんはデジタルアートはお好きですか？
最近は色々なところでデジタルアート系の展示会がおこなわれていて、目にする機会も多くなってきたのではないでしょうか。
デジタルアートは、アナログアートにはできないインタラクティブな表現を使ったものが多くて、個人的には大好きです。

できれば、スマートフォンの壁紙にして持ち歩きたいところですが、なかなか展示会などでは撮影禁止だったりして持ち帰ることはできません…。

ということで、今回はデジタルコンテンツを切り取って持ち帰れるようにするための仕組みを作りました。

Clippable CODEとは？

「Clippable CODE」は、デジタルコンテンツに「切り取り機能」を追加してスマートフォンやタブレットなどの端末で持ち帰ることを可能にする仕組みを作品化したものです。
今回の展示では、HACKistブログの背景アニメーションを作った小井さんのmetrogramをお借りして、それを持ち帰れるようにしました。

切り取り操作はタッチディスプレイをタッチしておこないます。
タッチディスプレイ上のデジタルコンテンツの好きなところをタッチすると、その位置に切り取り線が出現します。切り取り線の隅には2カ所丸い円がついていて、その部分を指でドラッグすることで、切り取り範囲を変えることができます。

切り取りたい範囲が決まったら、切り取り線の中をタップすることでその部分が切り取られます。するとその部分が静止画としてキャプチャされ、中央にQRコードが表示されます。

この時キャプチャされた画像はサーバー上に送信されており、表示されたQRコードをスマートフォンやタブレットで読み取ることで、キャプチャした画像が見られる専用ページに飛ぶことができます。

あとはその画像を保存して壁紙にするなりSNS上でシェアするなり、自由に楽しむことができます。

技術的には全てWeb技術をベースに実装されています。
デジタルコンテンツとそれを切り取る部分は全てWebブラウザ上で動いており、それがサーバー（Node.js）と連携することで、切り取った画像をスマホで持ち帰れるようになっています。

今後の展望

現在はまだ静止画としてしか持ち帰ることができませんが、ゆくゆくは動きのあるデジタルコンテンツをそのまま持ち帰れるようにしたいと考えています。

また、今回の展示ではアート作品を持ち帰るための仕組みとして展示していましたが、デジタルコンテンツであれば同じように適用することができるため、サイネージ分野などにも応用が可能です。

例えば、街や商業施設の案内板にこの仕組みを導入し、目的地までの地図を切り取ってスマホに送ることができるようにしつつ、QRコードから飛んだ先の専用ページで切り取ったエリアの店舗情報もあわせてレコメンドするなどの拡張も可能です。

個人的には、このような仕組みが色々なデジタルアート系の展示会などで使われるようになって、気に入った作品を持ち帰れるのが当たり前のような世の中になったら非常に嬉しいです。

――――――――――――――
コンテンツ提供：小井
実装：進藤

最近、IoT（モノのインターネット）やスマート家電などという言葉は耳にすることが多くなりましたが
ITなどの新しもの好きの人以外は、まだまだ実物を身近に体験することは少ないと思います。

そこでスマート家電を身近に体験してもらえるように、スマホサイトから電気をつけたり、消したり、家電などデバイスを操作できるコンテンツ「でんせつ 電接 / 電切」を先日のHACKist展示会「DIGITAL FRAGMENTS」にて展示しました。

スマホでQRコードを読んでスマホサイトにアクセスするだけで
会場の照明を操作したり、おもちゃを動かすことができるコンテンツとなっています。

展示会でアプリをインストールしてもらうのはハードルが高いのでスマホサイトから、会場のデバイスを操作できるように設計し、来場した多くの人にコンテンツを楽しんでいただくことができました。

node.js、WebSocketやWebRTCを使ってスマホとPCを遠隔で接続する事によって、スマホにアプリを入れることなく、スマホをコントローラー化することが可能です。

展示は終了してしまいましたが、スマホをコントローラーにすることができるHiSESSIONサービスの一例として、
ALTERATION WALL は絶賛公開中なので、こちらを是非、体験していただけたらと思います。
（スマホから写真を投稿してパソコンにインスタレーションを作り上げることができます！）

イベントなどで応用したいなどありましたら、気軽にお問い合わせください。

―――――――――――――――――
制作 : 高野 祥宏

先日のDigitalFragmentsで展示した「Customize Journey」の紹介をします！

Customize Journeyとは、iPad上でカスタマイズしたオリジナルロケットを、スクリーン上の宇宙に旅立たせて楽しむ作品となっています。
「イベントの参加者に何らかの足跡を残してもらい、会場の盛り上がり具合を把握したい」という私的な要望から作るに至っています。

飛ばしたロケットは大体20~30分滞在するので、滞在しているロケットの数から、盛り上がり具合を把握する事が出来ます。
滞在しているロケットを参考に、自分のロケットを他のロケットより格好良くカスタマイズしましょう。

上記iPadの画面から、Head、Body、Wing、Jetの4か所のパーツをカスタマイズする事が出来ます。
選んだパーツによってスペックが変わり、飛び方や速度も変わるので、個性を存分に発揮できるようになっています。
ちなみにこのパーツ群、どんな組み合わせでも不自然なくハマるよう、デザイナー加藤 咲の匠の技術が使われています。

カスタマイズが完了したら、右のバーを上までグッと上げてもらう事で、オリジナルロケットをスクリーン上の宇宙に旅立たせてあげる事が出来ます。

他のロケットと共に、旅に出るオリジナルロケットの勇姿を、手を振って見てあげてください。
ちなみに飛び立つ仕組みはNode.jsです。

以下、操作の流れをまとめた動画になります。

今後の展開としては、自分で作ったロケットをスマートフォンで持ち帰ってもらえるよう改良中です。
スマートフォン上でのロケットは、数日後着陸し、ロケットのパーツに応じたアイテムを持ち帰っている、というストーリーになっています。
そちらを含めて近日中に、URLを公開させて頂きます！

それではまた、宇宙で！

―――――――――――――――――
スタッフクレジット：
サウンド:小野 翔太郎
デザイナー:加藤 咲
プログラマー:宮林 竜平

このブログでは、『ad:tech tokyo 2014にて「TICK TOCK」公開しました！　概要編』とは趣向を変えて「TICK TOCK」の内側の仕組みを、実際のプログラムを交えて解説していこうと思います。
目次は以下です。

――――――――――――――――――――――

1. スマホから動画をリアルタイムに投稿する方法
2. 動画の書込み
3. FFMPEGを利用した動画の編集方法

――――――――――――――――――――――

1. スマホから動画をリアルタイムに投稿する方法

「TICK TOCK」では、動画を投稿すると、リアルタイムに加工された動画がWebに反映されます。

そのリアルタイム性を実現しているものが、「Node.js+SocketIO」です。
2014年5月28日、SocketIOがver1.0となり、バイナリーファイルの送受信に対応しました。
それにより、HTMLから取得したファイルデータを簡単にNode.jsで送信できるようになり、今回のリアルタイム動画投稿が可能となりました！

ざっくりソースを用意してみました。↓

<!--HTML-->
<input id="hackist" type="file" />

/*フロント側JavaScript*/
// idが'hackist'のものに変化があればfile_sendを起動する。
$('#hackist').on('change', file_send);

// 起動するとファイルをサーバーへ送る。
function file_send (file)
{
　  socket.emit( 'hackist', file )
}

HTMLのinputからファイルを取って送るだけの内容です。

今までも同じような事はできたのですが、自分でファイルのバイナリデータを、base64エンコードしてテキストデータに変換して・・・等大変でしたが今ではたった数行のコードで書けるようになって、とても簡単になりました！

2. 動画の書込み

サーバー側でファイルを受け取ったら、次にファイルをサーバーに保存する必要があります。

ここでは「1. スマホから動画をリアルタイムに投稿する方」で送信したファイルを受け取り、書込み用のメソッドを使用します。

ざっくりソースだとこんな感じです。↓

/*サーバー側*/

// 'hackist'というkeyで送られてきたファイルを受信
socket.on('hackist', function(file) {

  // ファイル名や保存先パスの生成
  var paths = _fileNameMake.start(file.name);

  // 動画の保存。保存先のファイルパスと実際に保存したいファイルを入れる。
  fs.writeFile(paths.movie_file_path, file.data, function(err){

      // エラーが起きたらエラーを教える。 
      if (err){throw err;}

      // エラーが起きずに保存出来たら、次のステップ、動画の加工へ。
      movie_processing();

  });

});

任意のファイル名にし、任意のディレクトリへ保存したら今度は次のステップ、動画の加工に入ります。

3. FFMPEGを利用した動画の編集方法

FFMPEGとは、コマンドから動画や音声が詳細に編集できるというライブラリです。

対応しているファイル形式は100を超えており、
動画のビットレートやフレームレートの変更から
字幕を付けたり、画像として出力しちゃうなんて事もできます。

そんなFFMPEGを使って今回は下記の８つのフローで、
動画の変換から表示までをしています。
―――――――――――――――――――――――――――――――――――――

1. スマホの動画を、Node.jsで受け取り。
2. 動画を保存。
3. 保存した動画を0.5秒に1枚のJPG画像群に変換。
4. 画像の存在や枚数の確認
5. 画像群を縦に連結して1枚のJPG画像にする。
6. 連結したJPGのファイルパスをデータベースに保存７、表示用のPCに、データベースに保存しているファイルパスを全て送信。
7. 縦長のJPGの位置を上手く調整してアニメーションに見せる。

―――――――――――――――――――――――――――――――――――――

また、FFMPEGはこんな感じで使います！↓

// 叩くコマンドを 変数「command」　の中に代入します。　
//保存先、画像に変換する間隔、明るさ、保存名　などを記述しています。

var command = 'ffmpeg -i ' + movie_file_path + ' -f image2 -vf fps=fps=4 -vf mp=eq=20:20 -s ' + resize_size + ' ' + image_file_path + '%01d.jpg';

// ここでプログラムからコマンドを叩きに行きます。
var child = _exec(command , function(err, stdout, stderr)
{
     // エラーが起きたらエラーを教える。 
     if (err){throw err;}

     // エラーが無ければ完了！
});

ここまで読んでくださった方は何となくわかると思うのですが、
「TICK TOCK」は動画のように見えて、実はJPGの画像を動画っぽく見せるという技術でした。

最後にこの記事をまとめると、
【Node.js + Socket.io + FFMPEG】を使うと、
動画のリアルタイム投稿だけでなく、リアルタイム編集までも可能にしてしまうよ！
という事です！

ここまで読んで下さって誠にありがとうございます！
次回の記事もよろしくお願いします！

ad:tech tokyo2014のブースにて、新作コンテンツ「TICK TOCK」を出展しました！

「TICK TOCK」とは、スマートフォンで5秒程度の動画を撮影し、その動画を送信すると、リアルタイムにコマ撮り風のループ動画になってモニター上に映し出されるというデジタルインスタレーションです。

ad:tech tokyo 2014では、こんな↓ブースで公開していました。

背景が全て白になるよう専用の撮影場所を設営して、来場者の方に、5秒間の動画用の動作をして頂きました。

来場者の方に、いきなり5秒動いて欲しいと言っても難しいので、緊張をほぐすためにもこんなカードを用意しました。

表側が50、100、200のカロリー表示になっていて、裏側はそのカロリーに応じた動作になっています。

来場者の方には、まずはカードの表側を見せ、1枚だけ選んで頂きます。その中から引いた動作を実行して頂き、5秒間の動画を撮影させて頂きました。

文字だけでわかりづらいと思うので、以下フローを説明する動画になります。

カードの成果もあってか、「TICK TOCK」を展示した2日間で、約70人の方に動画撮影にご協力頂けました。誠にありがとうございます！

また、以下はカードリストになります。面白い動きもたくさんあるので、是非拡大して見てみてください！

下記URLから実際に投稿もできます！
皆さんもドシドシ投稿してみて下さいね！

―――――――――――――――――――――――――――――――

・PC用 表示URL
（※最新のFlashをインストールしている必要があります。）
http://ist-ticktock.cloudapp.net/

・スマホ用 投稿URL
http://ist-ticktock.cloudapp.net/sp/
―――――――――――――――――――――――――――――――

また、この「TICK TOCK」ですが、ハフィントンポストの記事に取り上げて頂けました！
皆様、清らかなシェアをお願い致します。
http://www.huffingtonpost.jp/yusuke-iguchi/digital-marketing_b_5840288.html

そして更に、「ad:tech tokyo 2014にて「TICK TOCK」公開しました！　詳細編」という技術的な詳細を用意しました。

中身の話に興味のある方は是非ご閲読ください！

それではまた！

以前「プレゼン資料をハックして、ニコ動的にコメントできるようにしてみた」という記事を我が先輩が上げていたのですが、今回は弊社の夏季インターンシップ用に「ニコ動的コメント機能を任意の動画サービスの上に乗せられる」という形にブラッシュアップしてみました。

まずは↓動画をご覧ください。

仕組みはシンプルで、Webに動画を埋め込んで、その上のレイヤーにニコ動なコメントを乗せています！

スマホ画面はこんな感じになっていて、コメントを投稿するか、スタンプボタンを押すだけ。

管理画面からは動画の埋め込みコードを入力するだけで、生放送から投稿動画まで簡単にセットできます。

また、フルスクリーン表示ではなく、右側にコメントをストックしながら、動画を楽しむ事もできます。

このブラッシュアップにより、YouTubeやUstreamの生放送をニコ動風に変えてしまう事や、通常のアップロードされている動画で皆と上映会！みたいな事ができるようになりました！

使用する人はURLだけ知っていれば会員登録をしなくても使えるので、大人数でのイベントとかでも使えるかもしれないです！

試してみたい方は是非是非ご連絡下さい！
それでは！

こんにちは。貴田です。

ここ最近、スマホ対応ガジェットがKickStarter界隈を中心にどんどん世間に出てきている印象がありますが、今回は2010年から存在するOrbotix社製のiPhone、Androidから制御できるボール型ロボット「Sphero」という商品をいじってみましたので、そのレポートです。

簡単にSpheroについてご紹介

とにかく対応アプリが豊富でさまざまな楽しみ方があります。ラジコンカーのように自由にSpheroを操作できるアプリ。お絵かきをすると、その軌跡をSpheroがなぞるように動くアプリ。マクロと呼ばれるコマンドを使って、「緑に光りながら、８の字に動く」などの一連の特定の動きを命令できるアプリもあります。

その他にも、Spheroをスマホカメラで認識してあそべるARアプリや、Spheroを3軸ジャイロセンサ搭載のコントローラーとして使うアプリが存在したり、Sphero自体は水上に浮いて走れる特性を持っていたりと、その楽しみ方は本当に豊富です。

今回のSpheroの制御実験のテーマについて

今回、私がチャレンジしたのは、「PCで指定した位置に、Spheroをピンポイントで到達させること」です。

通常のアプリで、「円を描く」、「８の字で描く」などの命令を送っても、SpheroはGPSのような空間内での絶対位置を把握するセンサを搭載していないので、出発地点と、ひとまわりした後の終着地点では、わずかにズレが生じてしまいます。

そこを外部のセンサ（今回はWebカメラ）を用いて補うことで、ピンポイントで目標地点にSpheroを移動させることにチャレンジしました。

制御実験の結果について

制御実験結果をムービーで撮影しましたので、ご覧ください。

「9秒〜」は、マウスでクリックした緑の点を目標地点にして、Spheroが進んでる様子がわかると思います。画面が紫がかっているのは、赤外光フィルタを通して、みているカメラの映像を使ってるためです。赤外光フィルタを通してみると、反射材を貼り付けたSpheroが綺麗に白く映り、青い枠できちんと認識できているのがわかります。ちなみに、赤の点はキャリブレーション時に使用している４隅の点です。

システム構成について

システム構成は上図になります。Spheroには、iOS、Android、Ruby、Python、Arduinoなど様々なSDKが存在しますが、今回は僕が個人的に慣れているという理由でNode.jsを採用しました。カメラでのSpheroの認識はOpenCV+OpenFrameworksを使いました。実験は、社内の自席の隣の通りの床で行いました。窓と近接しているので、照明環境が安定せず、色認識で行うのが困難だったため、色よりは精度の高かった赤外線＋再帰性反射材の組み合わせで認識を行いました。

図左が、Amazonで購入した「赤外線カメラ＋赤外線投光機」が一緒になったWebカメラに、ヨドバシで購入した赤外線透過フィルターを（ざつに養生テープで）貼り付けている写真です。図右がSpheroに東急ハンズで買った蛍光反射テープをベタベタ貼った結果の写真です。

これは社内の自席の隣の床です。認識エリアの四隅に白い養生テープを貼り付けて、アプリ起動時に４点キャリブレーションを行って、「カメラで撮影した画像」と「PC内用の正方形の２次元仮想空間」の射影変換に活用していました。

これは制御時のアルゴリズムです。単純なフィードバック制御で行いました。

実際やってみて難しかった点は、Spheroに「角度＋θ動け！」と命令しても、Spheroの回転軸が徐々にズレていってしまい、うまく目標座標に辿りつけなかったことです。対策として、移動するたびに、「理想の移動方向」と「実際の移動方向」の差分をとりフィードバックをかけることで、動きが改良されました。

応用例について

この「ピンポイントでのSpheroの位置制御」の技術が可能になることで、Spheroに特定の動きをさせることで、特定のメッセージを伝えるためのコンテンツへ応用できると思います。プロジェクションマッピングと連動させたり、複数のSpheroを連携させて、特定のビジュアルを作ることが考えられます。

以下は、DIsney Researchの「Display Swarm」という研究です。今回の僕のSphero制御実験のだいぶ先を研究されています。１台の時と比べると、複数のロボットを動かす際は、ロボット同士をぶつからないようにするソフトウェア制御が肝になりそうです。

今回は、赤外線認識や、Spheroをいじりたいという思いからの、夏の実験的な制作という位置づけでしたが、どこかできちんとしたアウトプットに落とし込めるようにしていきたいと思います！

その際、「HACKistとして作った作品で出るんだから、ただ出るのではなく、やはり何かハックしなきゃ！」と思いたち、プレゼン資料ハックをして、スクリーンに投影される発表資料に対して、ニコニコ動画的にコメントをリアルタイムに投稿できるようにしてみました。

 

そのときの発表の様子がこちらです！！

（プレゼンのおしゃべりが下手くそですが、見て頂かないと伝わらないので。。）

仕組みについて

まずPowerPointやKeynoteは使わず、HTMLでコーディングしてブラウザベースでプレゼン資料を作りました。資料作成には、hakimさんという方が作られているreveal.jsという、HTMLでかんたんにプレゼンテーションが作れるフレームワークを使用させていただきました。

このフレームワークをベースに、reveal.jsの中でメインで使われている描画要素の上に、新規にcanvas要素を敷いて、サーバー経由で投稿されてきたコメントのテキストデータを流せるようにすこし改造させていただきました。また、スマホからプレゼン資料へのリアルタイムなコメントの通信は、この分野では定番になりつつある、Node.jsとSocket.IOを使いました。

やってみてわかったことは、以下です。

• 理想的には、プレゼン資料の上を流れるコメントを見ながら、インタラクティブに発表をしたいと思っていたのですが、プレゼンに時間制限があり、焦りながら喋っていたので、全くコメントが頭に入ってこなかったです。コメントに触れつつ、プレゼンする場合は、発表時間に余裕をもった方がいいなとおもいました。（これは自分がプレゼン慣れしてないせいかもしれないですが。。）
• 「みんなのコメントで発表がにぎやかになって、おもしろかった。」というプラスの意見と、「コメントばかり気になって、発表内容が頭に入ってこなかった。」というマイナスの意見と、両方の感想を聞くことができました。お固い発表にはこのままの演出だと不向きで、楽しく発表したいときは向いてるな、と感じました。
• 発表前にコメントの量や内容がどうなることか全く予測できなかったですが、発表開始から終了まで終始、激励コメントや、発表内容に関するツッコミなどのコメントが流れていました。コメントのフィルタリングは、一切していなかったですが、意味不明なものもありますが、基本的に好意的なものが多く、アイスタはいい人が多いなあ、と感じました。

結果として、このプレゼン大会では部門賞をいただきました。

ありがとうございました。それでは！

• openFrameworksのofxFaceTrackerおもしろそうだなあ
• Chromeの音声認識の精度すごいからさわってみたいなあ
• アドベントカレンダーに参加してみたいなあ

という、3つの願望を同時に叶えるべく、今回はかんたんに「漫画の吹き出し表現」の実装にチャレンジしてみました。

（というわけで、この投稿は、openFrameworks Advent Calendar 2013の17日目の記事です！

それでは、今回実装したシステムの前で、2次使用がフリー化されている漫画「ブラックジャックによろしく」の名ゼリフをHACKistメンバーで喋ってみた様子をご覧ください。

個人的には、この技術は、デジタルサイネージと、WEBのクチコミをつなげるような分野で活用できたら、面白いのではと考えてます。

仕組みについて

吹き出しに表示する文字は、リアルタイムに音声認識をして取得しています。裏でChromeを立ち上げて、Web Speech APIを通じて認識結果を受け取り、一度、Node.jsで立てたサーバーを経由して、openFrameworksへ渡しています。

吹き出しの大きさは、openFrameworksのofxFaceTrackerという顔のさまざまなパーツの位置を取得できるライブラリを使って、以下のようなルールで実装しています。

• 口の大きさ（横幅、縦幅）を取得して、吹き出しの大きさを変更しています。
• 唇の位置を取得して、吹き出しのちょんを、常に話者の近くに出すようにしています。

ちなみに、ofxFaceTrackerでは、以下の図のように、かなり細かい顔パーツの位置を取得できます。

アドベントカレンダーに初参加して思ったこと

個人的にアドベントカレンダー初参戦で、間に合わすように記事を書いてしまったので、突貫となり反省点も多いですが、実装からアップまでのスピードもあまり時間をかけず行えたので、今回のような技術を試す系の記事には、この強制感は心地よいなあとも思いました。今後も「試したらあげる」のテンポで、ポンポンいきたいな、と思いました。

それではまた！

先日こちらのブログでも紹介させていただきましたが、
11/3,4日に、行われたMaker Faire Tokyo 2013 にHACKist一同、出展者として参加してきました。

今回は遅まきながら、当日のHACKistブースの様子レポートをお届けします！

当日、日本科学未来館はこのように大勢の人で賑わっていました！

Makerさんたちの熱気が半端なかったです！

僕たちHACKistのブースは「タイム24ビル」でしたが、

こちらも多くの人が入れ替り立ち替りでやってきていて、大変盛り上がってました！

そして、当日のHACKistブースはこのような感じ！

黄色いはたをドーンと掲げ、場内でも目立つようにブースを構えておりました。

今回は水周りに関係する作品が多かったため、エプロンを着用してみなさまをお出迎え！

先日ご紹介した6作品を時間交代で展示し、机いっぱいに広げて紹介させていただきました！

中でも当日Makerさんたちに好評いただいたのが、こちらの【kitchen DJ】と【NOODLE RECORD】。

特に【kitchen DJ】はご家族でいらしているお子様にかなりたくさん遊んでいただきました！
あらかじめ用意していたバナナが品切れになり、ダッシュで買いに行くような 場面も。。。

その他にも、電子工作に詳しい小学生のサイエンスボーイやMakerの大先輩であるおじさま方など、多くの方から作品の感想やアドバイスをいただき大変刺激的な2日間でした！

来年度もぜひとも出展したいです！！と個人的に強く思いました！

Maker Faire Tokyo 2013 に出展した各作品については、

また後ほどのエントリーを楽しみにしておいてください！

それでは！！