連載インデックスへ
D89クリップ(16) Webデザインに役立つ出来事

おばかアプリ作成のための
超まじめな勉強会レポート

仲里淳
2010/5/21
「おばかWindows 7アプリ選手権」に向けた対策講座として、@IT編集部は「おばかアプリ勉強会」を開催。過去のおばかアプリ選手権でインパクトを残してきたクリエータ/プログラマから、おばかアプリ開発の極意や心得が語られた

「私はこうしておばかアプリを生み出しました」極意と心得

- PR -

 Windows 7プラットフォームで動く、Windows 7の機能を生かしたアプリを競う「おばかWindows 7アプリ選手権」が開催中だ。応募は3月から始まっており、締め切りとなる5月31日まで残りわずかとなった。

 @IT編集部は、選手権の参加希望者にWindows 7の機能とおばかアプリ開発のヒントを知ってもらおうと、4月21日に「おばかアプリ勉強会」を開催。約30名の参加者に向けて、「ライトニングおばかトーク」「まじめ技術セッション」が行われた。過去のおばかアプリ選手権でインパクトを残してきたクリエータ/プログラマが、おばかアプリ開発の極意や心得について次々に語ると、協賛のマイクロソフトのエバンジェリストは、ユーザーエクスペリエンスやWindows 7の「センサーAPI」を活用するためのヒントを紹介した。

役に立つモノを簡単かつ安くひとひねり加えて実現

 最初に登場したのは、チームラボの山本遼さん。山本さんは第3回おばかアプリ選手権の優勝者で、そのときに披露した「らぼかへ」と、後に開発した「ヘブンズ・ドア」について紹介した。

第3回おばかアプリ選手権の優勝者、チームラボの山本遼さん

 「らぼかへ」は、コーヒーメーカーの残量を監視して、それをWebブラウザに表示されるアイコンで確認できるというアプリ。この説明だけだと「それは便利そう。製品化もありえそうな便利アプリじゃないか」と思えてしまうかもしれない。しかし、細部へのこだわりや機能を実現する発想、ケチ臭さがハンパないのだ。

「らぼかへ」。奥に見えるのがコーヒーメーカーとダンボールやWebカメラを駆使して作った残量認識センサ(詳細

 チームラボ社内で「らぼかへ」は大ウケし、山本さんに新たなリクエストがやってきた。それは、トイレの空き確認アプリ。約40人の男性社員に対して、トイレの個室は1つ。コーヒーメーカー同様、「トイレに行ったら使用中だった」ことが頻発していたという。

 最初は、トイレの中にPCを設置して、人感センサを使って空室確認するシステムを開発した。しかし、「安定動作していたが、トイレの中にPCを置くことに抵抗を感じていた」という山本さん。そんなときに同僚のエンジニアから、「マウスでもイケるのではないか」というアドバイスをもらった。これがヒントとなって、ひとひねり加えたシステムへと発展(または、退化?)することになる。

 山本さんが考えたのは、「ドアにマウスを設置することで、開閉時にクリックされて空室確認ができる」というシステムだった。クリックの認識はPCで行うが、無線式マウスなのでトイレ内に置く必要はなく清潔だ。また、Webブラウザでの表示についても、いつもトイレの状況が見えるのもどうかと思い、アイコンをクリックしたときだけ表示されるようにした。

「ヘブンズ・ドア」。マウスの固定には、製品の空き箱を流用した。見た目の無骨さは相変わらず?(山本さんの講演資料19、20枚目より)

 山本さんが考えるおばかアプリ開発の極意は、まず実用性のあるアプリであること。次に、簡単であること。高価な部品や複雑な仕掛けよりも、シンプルで身近な素材を使って作ることが、ユニークでおばかな要素を生み出すという。

過剰な演出に駄洒落と無駄をかけて一丁あがり

 カヤックでデザイナをしている林真由美さんは、第1回おばかアプリ選手権ではペパボ賞に、第3回ではデイリーポータルZ賞に輝いた。数あるおばかアプリの中でも、さらにキワモノな作品に贈られる特別賞を2つも獲得している事実が、おばか的発想のレベルが高いことを物語っている。

カヤックの林真由美さん。特別賞コレクタになりつつあるが、「次は優勝したい」とのこと

 林さんは、これまで選手権で披露したアプリ、「Trash Roll」「おはかアプリ」「パンティノン神殿」「タニマニア」などを紹介した。

 まず「Trash Roll」「おはかアプリ」は、どちらもOSのゴミ箱機能をリデザインした作品。「Trash Roll」は、「ゴミ箱を空にする」を実行する際に、削除されるファイルが映画のスタッフロールさながらにBGMとともに流れる。同じく「おはかアプリ」も、ファイルの削除を大げさに演出したもの。削除されたファイルのお墓がデスクトップに作られ、霊となったファイルがうごめくというものだ。

 ファイル削除ごときに大げさ以外のなにものでもないが、そのコンセプトについて「何気ない日常を過剰に感動的に演出したもの」と説明する。

「Trash Roll」。最初の数回は楽しめるが、そのうちウザイだけのアプリになる(林さんの講演資料16枚目より)(詳細

 「パンティノン神殿」「タニマニア」は、お色気いっぱいのiPhoneアプリ。「エロ」は人々の注目を集める要素の1つではあるが、この2つの場合は駄洒落によるネーミングも重要なポイントだったという。

複数のサイコロが3D的に動くiPhoneアプリのデモ
「パンティノン神殿」。App Storeの審査によく通ったものだと思わせるアプリ。でも、「ただのエロ」と「エロにも使える」は大違い(パンティノン神殿は後者)。こういう発想もおばかアプリには大切だ(林さんの講演資料20枚目より)(詳細

 最後に紹介した「馬鹿(うましか)アプリ」は、「無駄をさらに無駄に活用する」というコンセプトのアプリ。カヤックが明和電機と共同開発した「貧乏ゆすり計測デバイス」であるYUREXを使い、貧乏ゆすりによって仔馬と仔鹿を立ち上がらせるというもの。

複数のサイコロが3D的に動くiPhoneアプリのデモ
「馬鹿アプリ」は、浮き輪に空気を入れるかのごとく、貧乏ゆすりをして仔馬と仔鹿を立ち上がらせるだけのアプリている。ちなみにYUREXは、なんとドライバがOpenBSD-currentに採用された

冷静な自分を捨て、自己満足だけで突き進むべし

 サイバーエージェントの渡辺梓さんが紹介したのは、「レッツGYU-DooooN」という牛丼調理支援アプリ。Wiiの無線コントローラやバランスボードといった周辺機器が使われている。ITの力を使って「修行なしでおいしい牛丼を作る」のが目的だったが、実際の開発では思わぬ苦労もあったという。

複数のサイコロが3D的に動くiPhoneアプリのデモ
サイバーエージェントの渡辺梓さん(右)と浦野大輔さん(左)。普段はWebデザインや開発に携わる

 まず、牛丼の量を計測しようと採用したWiiバランスボードでは、最小計測単位が1kgだったため牛丼には不適切。そこで、重量変化10回分の平均値を使ったり、ブレ幅5倍の変化は無視したりといった工夫によって解決した。

複数のサイコロが3D的に動くiPhoneアプリのデモ
第3回おばかアプリ選手権では、ステージ上で実際に牛丼を盛り付けるデモを披露。具を盛り付けると、画面に適量かどうかが表示される(詳細

 “おばか”ならではのポイントとしては、食材の肉に高級なものを使ったり、萌え要素を入れたりといった、本来のアプリ自体とは異なる部分にこだわった点を挙げた。「私って何やってんだろ? と思うこともあったが、深夜のナチュラルハイな状態で乗り切った」とのこと。冷静に考えずに、とにかく自己満足で突き進むことも大切なのだ。

 浦野さんが紹介したのは、「絶対!ぬぎPON」という野球拳アプリ。コンセプトは「テクノロジとエロ」。内容は、画面の女の子とジャンケンをするという野球拳の王道を行くゲームだ。ただし、その小道具であるジャンケン用のグローブには、曲げセンサが使われていたり、プレイヤーの姿勢を感知するためにWiiバランスボードが使われていたりと、フィジカルコンピューティングが満載だ。

複数のサイコロが3D的に動くiPhoneアプリのデモ
「絶対!ぬぎPON」。おばかアプリ選手権における記念すべき“お色気アプリ”第1号でもある(詳細

 また、開発作業はデザイナやFlashエンジニア、デバイスエンジニアなど4人体制で行われたが、そのコラボレーションがうまくいったのも重要な成功要因だったという。詳細は、下記記事を参考にしてほしい。

じゃんけんグローブ「絶対!ぬぎPON」の作り方
次世代のインプットを考えよう(4) 
FunnelとFIOとZigBeeを活用した「絶対!ぬぎPON」を事例に、自作デバイスの組み立て方からFlashアプリ作成方法までを説明します

誰にも負けない好きなモノで、いつもと違う人と楽しむ

 シグマコンサルティングの橋本圭一さんは、「Visual Studio 2010を使った欲求指向プログラミングのすすめ」と題したプレゼンテーションを行った。橋本さんは、第2回おばかアプリ選手権では、ギターを使って文字入力を行うアプリを披露した、ミュージシャン・エンジニアである。今回は橋本さん流に、おばかアプリ開発の心得を紹介した。

複数のサイコロが3D的に動くiPhoneアプリのデモ
シグマコンサルティングの橋本圭一さん。この日はギターなどの楽器演奏はなし

 心得その1は「欲求指向プログラミング」で、これは自分の好きなことやりたいことをアプリ開発のテーマにすることで、高いモチベーションを維持して取り組めるというもの。要するに「好きこそものの上手なれ」だ。

 その2は「チームでやろう」で、社外の人と組むことで、新鮮さや刺激を生み出すというもの。自分1人では想像もしないことを生み出すためにも、これは重要だ。

 その3は「ネタは自分のサブカルチャーや生い立ちから」。人間誰しも少年時代にハマったものが1つや2つはあるはずで、そこからネタを引っ張り出してこようというもの。これも、モチベーションを生み出す方法の1つだ。

複数のサイコロが3D的に動くiPhoneアプリのデモ
第2回おばかアプリ選手権でギターによる文字入力を披露した橋本さん率いる紫熊チーム。もともと好きな音楽やギターと組み合わせたからこそ生まれたアイデアだった(詳細

 その4は「あえて最新技術に触れてみる」で、積極的に新しいことに触れる機会として生かそうというもの。仕事中に上司に指摘されても、「あ、これは遊んでいるのではなくて、Silverlight 4の勉強中です」と言い訳しやすいところもポイントだという。

異なる分野の人でも楽しめるアプリを目指そう

 AR三兄弟の長男を名乗る川田十夢さんは、AR(拡張現実)技術を駆使したアプリ開発とパフォーマンスで一躍時の人となったクリエータ。今回は、「私が“おばか”なアイデアを形にしたプロセスは、こうだ」という、勉強会のコンセプト直球ど真ん中のプレゼンテーションを披露した。

角メットを被って登場したAR三兄弟の川田十夢さん
角メットを被って登場したAR三兄弟の川田十夢さん

 プレゼンの中で取り上げられたのは、第3回おばかアプリ選手権でMashup Awards賞に輝いた「農力村の三兄弟」という作品。アプリと呼ぶべきかパフォーマンスと呼ぶべきかは大いに意見が分かれるところだが、そのコンセプトは「ミステリーサークルはARマーカーではないのか?」という仮説だったという。その検証として行ったのは、群馬県の稲畑で稲穂をマーカーに加工する作業。移動に4時間、作業に4時間も費やした。

複数のサイコロが3D的に動くiPhoneアプリのデモ
「農力村の三兄弟」。4時間を費やして完成した稲穂ARマーカー。見事にアプリから認識された(川田さんの講演資料29枚目より)(詳細

 一通り制作プロセスとデモ(稲穂で作ったARマーカーは見事認識された!)映像を紹介した後にポイントとして挙げたのは、「内輪(WebやIT業界内)だけでなく、外の人(別の業界)でも楽しめるものを作れば、結果的に多くの人に伝わる」ということ。「農力村の三兄弟」でも、稲畑を貸してくれた人に説明した際、(何となくだろうが)面白いと感じてもらえたそうだ。

複数のサイコロが3D的に動くiPhoneアプリのデモ
この日はソロ活動の川田さん。「自己紹介代わりにビームを発射します」とさりげなく(?)ARを披露。ビビビビィィィィィィーッ!!

センサやUIの開発が簡単なWin7は、おばかアプリに最適

 選手権経験者によるセッションに続いて行われたのは、マイクロソフト デベロッパー&プラットフォーム統括本部エバンジェリストの岩田雅樹さんによる技術情報の紹介。まず、おばかアプリに限らず、近年のアプリケーションにおいてデザインやユーザーインターフェイスが重要視されていることに触れ、マイクロソフトのデザイナ向けツールである「Expression 3」を紹介した。

複数のサイコロが3D的に動くiPhoneアプリのデモ
マイクロソフトの岩田さん。手にしているのは加速度センサが載ったボードで、USBを介してWindows 7と通信する

 Expressionは、グラフィック制作ツール、Webデザインツール、Webアプリケーション開発ツールなどを含む、マイクロソフトのWebクリエータ向け製品群である。デザイナの定番ツールといわれるIllustratorやPhotoshopのデータ読み込みが可能なうえ、そのままWindowsのユーザーインターフェイス開発言語であるXAMLに変換できるため、アプリケーション開発をスムーズに行うことができるという。

 岩田さんは、実際にIllustratorのファイルを読み込み、それをオブジェクトとしてVisual Studio上で簡単なプログラムを作って回転させるというデモを行った。

 次に、Windows 7で大幅に追加されたユーザーインターフェイスやセンサにかかわる機能を紹介し、加速度センサを用いてデモを行った。Windows 7には、マルチタッチやセンサ、ロケーション(位置情報)といった機能が追加されており、数行のコードを追加するだけで、それを利用したアプリを開発できる。

複数のサイコロが3D的に動くiPhoneアプリのデモ
フライパンに見立てた加速度センサを振ると、その動きに合わせて「レシピおじさん」(という名前らしい)が回転する

 このほかにも、Windows 7のマルチタッチアプリケーション開発やセンサアプリケーション開発が動画で紹介された。動画は、「Windows 7で実現する新しいアプリケーションの世界を動画でみよう」で公開されているので、Windows 7アプリ作成に興味のある方は、観ておくと参考になるはずだ。 ほかにも、岩田さんがデモで使ったアプリのコードを含むサンプルプログラム集がダウンロードできるので、こちらも参考にしてみてはいかがだろうか。

絶対に仕事ではできない戦いが、そこにはある

 おばかアプリといいつつも、緊張感漂う雰囲気の中で開催された勉強会。極意と心得を語った登壇者に共通していたのは、「自分が好きなことを楽しみながらやる」という点だ。スキや遊び心がないアプリは、いつもの仕事で嫌というほど触れているはずなので、おばかアプリ選手権では、それとは異なる間逆のものを目指してみるといいのではないだろうか。

 また、Windows 7のセンサーAPIを使うと思いのほか簡単にデータを取得できることに驚いた方もいたのではないだろうか。これを機会に、Windows 7アプリ開発にも触れてみると、新たな発見があるかもしれない。

複数のサイコロが3D的に動くiPhoneアプリのデモ
勉強会の終了後には、軽食をつまみながら参加者による懇親会が行われた

 いずれにせよ、おばかWindows 7アプリ選手権の応募締め切りが迫っている。残り数日しかないが、飛び抜けたアイデアさえあれば良い勝負ができてしまうのがおばかアプリ。栄光の「おばかップ(O杯)」目指し、いま一度ネタ…… ではなくてアプリを見直して、ギリギリまでブラッシュアップを続けてみてはいかがだろうか。

Ustreamで生中継した勉強会の動画

【@IT関連記事】

Windows 7でどんだけ“おばか”なアプリが作れるの?
おばかアプリ座談会 おばかの発想の源やアプリの作り方などについて、おばかアプリ選手権の歴戦の受賞者や、マイクロソフトの代表者に話を伺った。アイデアのご参考に
jQueryとTwitterのAPIを使ったWindows 7アプリ
楽しいWindows 7アプリ作成入門(5) 
Webデザイナ/プログラマでもテキストエディタとWebブラウザで簡単に作成できる、Windows 7デスクトップガジェットの作り方を紹介します
Silverlightで作れるAR(拡張現実)アプリの基礎知識
楽しいWindows 7アプリ作成入門(4) 
オープンソースライブラリ「NyARToolkitCS」「SLARToolkit」の登場でWPF、C#、Silverlight環境でもARが体験できるようになりました
HTML+JavaScriptで作れるWindows 7デスクトップアプリの基礎知識
楽しいWindows 7アプリ作成入門(3) 
Webアプリ開発者/デザイナでもできる、Windows 7のデスクトップアプリの概要・作り方を、具体的なコードとともに基礎から教えます
Windows 7でセンサや位置情報を使うアプリを作ろう
楽しいWindows 7アプリ作成入門(2) 
GPSで位置情報を取得したり、加速度や温度、脳波などのセンサを使うアプリを作る方法を具体的なコードやデモとともに教えます
マルチタッチのWindows 7アプリ作成の基礎
楽しいWindows 7アプリ作成入門(1) 
画面を触って字や絵を描いたり、アプリを操作するには何をどうすればいいのだろう? 具体的なコードやデモとともに一から教えます

D89クリップ バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • コンテンツ政策ヲ転換セヨ! (2012/2/10)
    mixiにしろTwitterにしろニコ動にしろ、ソーシャルサービスは伸びている。シロウトの個人が作るコンテンツで成り立つサービスだ
  • NFCやLTE対応予定のiPhoneと、先行するAndroid (2012/2/9)
    iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは?
  • 家電のUIになるブラウザ (2012/2/3)
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか? 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 (2012/2/2)
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする

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

RSSフィード

キャリアアップ

@IT Sepcial

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパーTechTargetジャパン

@IT Sepcial
ソリューションFLASH