SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Facebookモバイルアプリ開発チュートリアル

Facebookモバイルアプリの企画方法

Facebookモバイルアプリ開発チュートリアル(2)

  • X ポスト
  • このエントリーをはてなブックマークに追加

次に「モバイルならでは」

 モバイルならでは、といえるアプリには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モバイルアプリの開発チュートリアルに入っていきます。どうぞお楽しみに。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Facebookモバイルアプリ開発チュートリアル連載記事一覧

もっと読む

この記事の著者

大渕脇 昭人(jActionプロジェクト)(オオフチワキ アキト(ジェイアクションプロジェクト))

Founder/ウェブデベロッパー。音響メーカーハードエンジニアを経て、アニメーション映像、コンテンツ制作へ転向。2005年に有限会社クリエイトウェーブを設立。スマートフォン向けHTML5ウェブアプリ制作にあたり、生産性改善の必要を感じた自身の経験から本プロジェクトを発案。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6588 2012/05/31 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング