次に「モバイルならでは」
モバイルならでは、といえるアプリには2つの特徴があります。まず1つは「OS機能」です。スマートフォンiPhoneに搭載しているiOS、アンドロイド携帯に搭載しているAndroidOS、それぞれの特徴を活かすことでFacebook「モバイル」アプリである意味がより強くなります。もっともわかりやすいOS機能は「位置情報」でしょう。ウェブの標準化団体であるW3Cが仕様策定を進める規格であり、JavaScriptで位置情報を取得できるように標準化されているGeolocation APIを用いれば、ユーザーの位置情報をウェブアプリで扱うことができます。Geolocation APIは、既にFirefox・Google Chrome・Safariなどの一般的なブラウザでサポートされており、GPS対応の携帯端末でユーザーの位置情報を利用したコンテンツを提供することが可能になっています。
例えば、ユーザーのチェックインに関する情報と連動してクーポンやポイントを貯めていくアプリなどが考えられます。一方で注意が必要なのが「カメラ」と「センサー」です。カメラは、iOSでは利用できず、AndroidOSでは4.0からのみ利用可能。センサーは、iOSでは4.2からのみ利用可能で、AndroidOSでは一部例外のブラウザを除いては基本的に利用できません。
もう1つの特徴は「タッチパッド操作」です。スマートフォンの場合、ユーザーの操作方法はフリック・スワイプ・ピンチイン・ピンチアウトなど、多種多様に渡ります。例えば『ソーシャルブロック崩し』というゲームアプリは、スワイプでバーを動かすことで玉を制御し、ブロックを崩していくという操作方法を採用しています。PCでいうところのクリックにあたるタップ操作のみならず、タッチパッドならではのユーザーインターフェースを設計することは「モバイル」ならではのアプリ企画にもつながるでしょう。
最後は「HTML5」ならでは
Facebookモバイルのブラウザ上で起動する動的なウェブアプリを開発する場合、主要な開発言語はFacebookのモバイル開発プラットフォームがサポートしているHTML5+CSS+JavaScriptです。HTML4からHTML5への規格変更ではじめて可能になった要素を盛り込むことで、Facebookモバイルアプリならではの企画となるでしょう。FacebookモバイルアプリがサポートしているHTML5の要素は以下の5つです。
- デバイスアクセス:GPSやセンサーなどスマートフォンに搭載されているOS機能との連携
- マルチメディア:オーディオやビデオの埋め込み、再生
- グラフィック:canvasやSVGによる描画
- セマンティクス:HTML5で変更された要素
- スタイリング:CSS3によるリッチな表現
例えば先述の『ソーシャルブロック崩し』では、canvas上に配置されているブロックと玉の衝突判定や、動く球の速度を制御するグラフィックという要素を活用していました。これはHTML4までの規格では実現できませんでした。このほかにもマルチメディア要素を活かした動画プレイヤーアプリなどが考えられます。このようにHTML5ならではの要素を盛り込むことで、ユーザーがこれまで体験できなかったモバイル体験を提供できるようになります。
ここでご紹介した「Facebookならでは」「モバイルならでは」「HTML5ならでは」の特徴を組み合わせるという企画方法はほんの一例です。皆さんそれぞれのアプローチで、エンジニアに求められる「技術オリエンテッド」なアプリの企画提案に挑戦していただければと思います。
次回からは、いよいよ具体的なFacebookモバイルアプリの開発チュートリアルに入っていきます。どうぞお楽しみに。