連載インデックスへ
次世代のインプットを考えよう
──マウスとキーボードを超えたフィジカルコンピューティング(1)


iPhoneをリモコンにしてみる


浦野大輔(うらのだいすけ)
サイバーエージェント新規開発局所属
2009/1/9
マウスやキーボードだけではつまらない。Flashを応用して、iPhoneやバランスWiiボード、Chumbyを入力デバイスにしてみよう

フィジカルコンピューティングとは?

- PR -

 フィジカルコンピューティングとは、Tom Igoe氏が提唱した教育プログラムで、人間がいかにコンピュータと対話できるか、を考える取り組みです。

 マウスやキーボードなどの標準的な入力デバイスだけでなく、人間が普段コミュニケーションに使う身ぶりなどの身体的な動作を、入力の助けとなる動きと考えます。

 フィジカルコンピューティングでは、物理現象をPCに入力する方法としてセンサやマイコンを学び、主にメディアアートやインスタレーションなどのシーンで活用されていますが、最近では、ニンテンドーDSやWiiなどのゲーム機や、iPhoneなどのモバイルデバイスなど既存の製品でも直感的な操作が可能になり、よりユーザーに身近なものになってきました。

 AIR SANPOは、このフィジカルコンピューティング的な試みを取り入れて作られました。

 本連載では、AIR SANPOを例に、FlashとiPhoneやバランスWiiボードなどフィジカルコンピューティング的なデバイスとの連携方法や、AIRでストリートビューを使用する方法などを紹介していきます。

 今回は、iPhoneを入力デバイスとしたFlashコンテンツのサンプルを紹介します。

AIR SANPOとは?

 AIR SANPOは、「身体を使ってGoogleマップのストリートビューを散歩」をコンセプトに、複数のデバイスとWebサービスをマッシュアップしてできた仮想散歩アプリケーションです。

 サン・マイクロシステムズとリクルートが共催しているWebサービスコンテスト、Mashup Awards 4で、Any Device賞を受賞しました。

(@IT内の関連リンク)D89クリップ(1)マッシュアップ+ひとひねり=MA4の受賞作


AIR SANPO from uranodai on Vimeo.

 動画を見ていただくと分かりやすいのですが、Adobe AIR、バランスWiiボート、iPhone、ストリートビューなどを連携することで、あたかも散歩しているかのような体験ができます。

AIR SANPOでやりたかったこと

AIR SANPOの仕組み
AIR SANPOの仕組み

 AIR SANPOの特徴は、入力インターフェイスです。PCの一般的な入力インターフェイスであるキーボードとマウスの代わりに、iPhone、バランスWiiボード、Wiiリモコンを使っています。

 AIR SANPOでやりたかったことは、ストリートビューを使った新しい体験。インターフェイスの再定義です。

 ストリートビュー上を移動するとき、通常はストリートビュー上の矢印ボタンをマウスでクリックして進みます。AIR SANPOでは、このマウスクリックを、バランスWiiボード上での足踏みに置き換えました。

 ストリートビューで周りを見渡すとき、通常はストリートビュー上をマウスでドラッグして見渡します。AIR SANPOでは、このマウスドラッグを、Wiiリモコンとセンサーバーをハックして作ったIRメガネでモニタをのぞき込む動作に置き換えました。

 AIR SANPOには駅名を指定して移動する機能があるのですが、通常のキーボードによる入力では興ざめすると思い、無線でかつソフトウェアキーボードがあるiPhoneをリモコンとして採用しました。

 iPhoneのマルチタッチディスプレイで検索インターフェイスを実装することができたので、モニタ側はストリートビューの表示に専念でき、より没入感を増すことができました。手続き的なインターフェイスをより直感的な体験にすることができました。

iPhoneでできること

 iPhoneを入力デバイスとして考えたとき、どんな可能性が考えられるでしょうか。マルチタッチスクリーン、加速度センサ、Wi-Fiに注目してみましょう。

 マルチタッチスクリーンを使えば、GUIを自由にレイアウトできます。加速度センサを使えば、Wiiリモコンのように傾ける、振るなどの動作を使えます。

 Wi-Fiを使えば、ほかのハードに無線で命令できます。iPhoneは、GUIの自由度が高く、身体的な検知も可能な、インタラクティブなリモコンといえるのではないでしょうか。

 これから紹介するiPhoneとFlashの連携サンプルで、iPhoneの入力デバイスとしての可能性をぜひ体験してみてください。

iPhoneとFlashの連携チュートリアル

 では、いよいよiPhoneとFlash間で通信するサンプルをチュートリアル形式で紹介します。次の図のような仕組みで通信を行います。OSCemoteやOSC、floscについては後述します。

iPhoneとFlashの通信の仕組み
iPhoneとFlashの通信の仕組み

iPhoneのネットワーク設定

 サンプルの実効は、iPhoneとiPod touch、どちらでも可能です。ファームウェアが最新バージョンかどうか(執筆時現在2.2)確認してください。

 次に、iPhoneをPCの接続先と同一の任意のWi-Fiネットワークに接続してください。

  1/4

 INDEX
次世代のインプットを考えよう
──マウスとキーボードを超えたフィジカルコンピューティング(1)

iPhoneをリモコンにしてみる
Page1
フィジカルコンピューティングとは?
AIR SANPOとは?
AIR SANPOでやりたかったこと
iPhoneでできること
iPhoneとFlashの連携チュートリアル
iPhoneのネットワーク設定
  Page2
iPhoneのアプリケーションをインストール
OSCemoteを使う
サンプルファイルのダウンロード
  Page3
iphoneas
flosc
動作確認
ソースコードの解説
マルチタッチペイント
  Page4
ソースコードの解説
iphoneas AS3 APIについて
まとめ

【関連記事】

iPhoneアプリ情報を集めた「ITmedia App Town」を開設しました
ITmedia +D Mobile内に、iPhoneアプリの情報を集約するサイト「ITmedia App Town」を開設した。今後はiPhoneアプリの新作情報やレビュー記事などをこのページに集約していく。請うご期待。
App Store登録もOK! JavaScriptで作るiPhoneアプリ
これ、俺ならこう使う(5)
 HTML+JavaScriptでiPhoneアプリをWebアプリ的に開発しつつ、App Storeで販売できてしまう一挙両得のハイブリッド手法でCoCoTwitter作りました
リッチクライアント & 帳票」フォーラム 2008/11/28
Chumby開発者が語る誕生秘話とビジネスモデル
D89クリップ(2) かわいらしいルックスとハッキングのしやすさが注目を集める「Chumby」。Chumbyの生みの親が、ガジェットに対してユーザーが受け身でいられる自由を語る
テレビでYahoo!―デバイスが変わればUIデザインも
WebとUIをつなぐトリックスター(2) 制作の要となるエンジニアとデザイナのチームワークのツボを探る連載。今回はヤフーのテレビ向けサービスのデザイン担当に話を聞いた
Flashの基礎を無料で習得! ActionScript入門
ActionScriptを知っていますか? Flash技術の要となる言語で無料で簡単にFlashアプリケーションを作れます。そのActionScriptについて初心者のために一から丁寧に解説していきます



 Smart&Social フォーラム トップページへ



Smart & Social フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間