スマートフォンアプリケーション開発の最新動向

8,058 views
7,960 views

Published on

某社勉強会で発表した内容。一部伏せ字にしてあります。

Published in: Technology
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,058
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
0
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • いま、Web 業界では、HTML5 vs ネイティブアプリといった、話が出ている。\n\n
  • 写真はカメラアプリ。撮影状態のビューの上に独自の UI を表示したり、デバイスの機能を拡張するようなものは、ネイティブで開発する必要がある。\nあとは、ゲームのような応答速度を要求するアプリなど。\n\n
  • 画面は Financial Times。\n独自の定期購読サービスを行うため、HTML5 に移行。\nlocalStorage や Application Cache を使って、オフライン購読や高速化を実現。\nテキスト中心のコンテンツであることもあり、デバイスの依存性を排除できた。\n
  • UI の一部に WebView を使って、サーバが送信してきた HTML/CSS/JavaScript を描画する。\nコンテンツ部分は、Safari で見たときと同じ。\n\n
  • Facebook の場合、メニュー、検索、ツールバー部分がネイティブ UI。\nコンテンツ部分が WebView。\nアプリをアップデートしていないのに、コンテンツ部分が更新されていたりする。\n\n
  • あと、Web の会社の NAVER がスマートフォンアプリで成功したことは、Web 業界ではかなり注目されています。\n
  • \n
  • あと、既存会員に対してメールマガジンを送って誘導するようなケースも、アプリの起動は難しい。\n
  • 別の課金サービスへのアプリ内からの誘導は、Apple の審査でリジェクトされる。\n\n
  • これらの理由により、ネイティブアプリだけではなく、Web アプリやハイブリッド型のアプリが必要とされている。\n\n
  • これらの理由により、ネイティブアプリだけではなく、Web アプリやハイブリッド型のアプリが必要とされている。\n\n
  • \n
  • \n
  • \n
  • Appcelerator というベンダーが開発していう。\nここにあるように、JavaScript コードを各種プラットフォームに変化するフレームワーク。\n\n
  • Titaniumu は JavaScript のインタプリタがネイティブの実行環境上で動作している。\nKitchen Sink というデモアプリがあるので、それを実行してみる。\n\n
  • Titaniumu は JavaScript のインタプリタがネイティブの実行環境上で動作している。\nKitchen Sink というデモアプリがあるので、それを実行してみる。\n\n
  • \n
  • JSONP で取得したデータをモデルにマッピングして、モデルとバインドされたビューに自動的に表示するようなことが可能。\n正直複雑。\nエンタープライズ向け???\n
  • \n
  • 元々は別のベンダーが開発していたのを、Adobe が買収。\nHTML5/CSS3/JavaScript を PhoneGap でラップして、各種プラットフォームのバイナリに変換してくれる。\n\nAdobe は Flash で負けたのですが、実は HTML5 にも注力していて、「Adobe Edge」という HTML5 オーサリングツールをリリースしている。\nそれで作った HTML5 アプリをネイティブとしてリリーするためのフレームワーク。\n
  • この後紹介する jQuery Mobile などの Web アプリのフレームワークを利用することも可能。\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 最近のアプリケーションは、クライアントだけで閉じて実行されることはほとんどなく、サーバにデータを集めて、それをたくさんの人とシェアするようなケースが多い。\nたとえば Instagram のようなアプリ。\nそのサーバサイドでやるべきことが提供されていて、クライアントのプログラミングのみで利用可能。\n
  • 実はたくさんの BaaS サービスが既に存在していますが、今日はその中の Parse をご紹介します。\n\n
  • \n
  • \n
  • ・データベースとファイルの保存\n・Geo Location を利用したデータの取得。\n・Push Notification の送信\n・メールアドレスでのユーザー認証\n・Facebook、Twitter でのユーザー認証\n・Facebook、Twitter の SDK を含み、認証データと連携して API を実行可能。\n
  • \n
  • \n
  • \n
  • \n
  • \n\n\n\n
  • \n
  • スマートフォンアプリケーション開発の最新動向

    1. 1. スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
    2. 2. 自己紹介(お仕事)1996∼2004 ⃝⃝⃝でソフトウェアエンジニア2004∼2010 ⃝⃝⃝/⃝⃝⃝で UI デザイン2010∼2012 ⃝⃝⃝⃝⃝⃝⃝⃝で Web ディレクター2012∼ ⃝⃝で HTML5 Project チーム
    3. 3. 自己紹介(趣味)PictTweet / PictTweet Plus! iPhone/iPad 向けお絵描き Twitter アプリ。2009年5月リリース。icotile Twitter のフォロワー管理 Web アプリ。2011年リリース。 第0回 HTML5プログラミング&クリエイティブ・コンテスト優秀作品賞受賞その他 野球リーグ成績管理 Web サービス(2006年) ⃝⃝⃝⃝⃝⃝ の Android への移植(2009年)Twitter: @ogaoga
    4. 4. アジェンダアプリ開発手法の3つのタイプアプリケーションフレームワーク紹介BaaS とは?
    5. 5. アプリ開発手法の3つのタイプ
    6. 6. アプリ開発手法の3つのタイプ 開発手法別アプリのタイプ ネイティブアプリ型 Web アプリ型 ハイブリッド型
    7. 7. アプリ開発手法の3つのタイプ 開発手法別アプリのタイプ ネイティブアプリ型 Web アプリ型 ハイブリッド型
    8. 8. アプリ開発手法の3つのタイプ 開発手法別アプリのタイプ ネイティブアプリ型 Web アプリ型 ハイブリッド型 http://apps.ft.com/
    9. 9. アプリ開発手法の3つのタイプ 開発手法別アプリのタイプ ネイティブアプリ型 Web アプリ型 ハイブリッド型
    10. 10. アプリ開発手法の3つのタイプ 開発手法別アプリのタイプ ネイティブアプリ型 Web アプリ型 Native Native WebView ハイブリッド型
    11. 11. アプリ開発手法の3つのタイプ 背景 急激なスマートフォンへのシフト 2011 後半から 2012 春にかけて、スマートフォン からのトラフィックが急増。 Line の急成長。
    12. 12. アプリ開発手法の3つのタイプ 背景 アプリ開発リソースが不足 サーバサイド、フロントエンドエンジニアはいるけ ど... Web ページのスマートフォン対応もあるし... iPhone と Android の両対応は...
    13. 13. アプリ開発手法の3つのタイプ 背景 一方、ユーザー獲得の観点では、 検索エンジンからの流入 ソーシャルメディアでの拡散による流入 が重要な獲得手段。
    14. 14. アプリ開発手法の3つのタイプ 背景 マネタイズの観点では、 既存の会員基盤、決済手段を利用したい。 Apple/Google に中間マージンを取られたくない。  などの理由で、ネイティブアプリが困難なことも。
    15. 15. アプリ開発手法の3つのタイプ 背景 開発都合 既存の開発リソースでアプリを開発したい。 成果物を各種プラットフォームで共有したい。 ビジネス都合 既存のマネタイズ手段、顧客獲得手段を流用した い。
    16. 16. アプリ開発手法の3つのタイプ 背景 開発都合 既存の開発リソースでアプリを開発したい。 成果物を各種プラットフォームで共有したい。 ビジネス都合 既存のマネタイズ手段、顧客獲得手段を流用した い。 → Web の技術、リソースをアプリに活かしたい
    17. 17. アプリ開発手法の3つのタイプ Native Hybrid Web パフォーマンス ◎ ⃝ ⃝ デバイスアクセス ◎ ⃝ △ Push Notification ⃝ ⃝ × 起動のしやすさ ⃝ ⃝ △URL からのアクセス × × ⃝ App Store / Market Place ⃝ ⃝ × 独自の仕組みを 独自のマネタイズ 独自の仕組みを用意しなくてよい 利用できる コードの可搬性 × ⃝ ◎ 即時更新 × ⃝ ◎ パフォーマンスを要求される 既存の Web サービスの資産(開発 Push Notification やストアでの販売 ゲームや、没入型の魅力的な リソース、会員基盤、決済手段、 最適なアプリの種類 を行いたいが、ネイティブアプリ アプリ、デバイスの機能をフ SEO 等)を活かしたアプリケー を開発するリソースが無い場合等。 ルに利用するアプリ等。 ション。 フレームワーク依存のバグやパ Apple や Google によって排除 フォーマンスの低下、OS 対応の遅 バックグラウンド動作や Push リスク される可能性がある。リリー れなど可能性と、ネイティブと同 Notification が出来ない。 ススケジュールも不確定。 じリスクがある。
    18. 18. アプリケーションフレームワーク紹介
    19. 19. アプリケーションフレームワーク紹介 アプリケーションフレームワーク ネイティブアプリ型 (普通に)ネイティブアプリ Titanium Mobile ハイブリッド型 PhoneGap Sencha Touch 2 Web アプリ型 jQuery Mobile (普通に)HTML5/CSS3/JavaScript
    20. 20. アプリケーションフレームワーク紹介 Titanium Mobile
    21. 21. アプリケーションフレームワーク紹介 Titanium Mobile JavaScript で記述してネイティブアプリを生成(ネイティブアプリ型)。 リアルタイム性の高いものや、3D などは厳しい。 ネイティブコード(Objective-C)を呼び出すことも可能らしい。 JavaScript なので、メモリ管理や配列の扱いなどが楽。 その分パフォーマンスは落ちる。 Titanium Studio という IDE が提供されている。 Android への対応が不十分という話も?
    22. 22. アプリケーションフレームワーク紹介 Titanium Mobile Titanium Studio でアプリをビルドするデモ
    23. 23. アプリケーションフレームワーク紹介 Sencha Touch
    24. 24. アプリケーションフレームワーク紹介 Sencha Touch ハイブリッド型。JavaScript で記述する MVC フレームワー ク。iOS と Android に対応。 UI コンポーネントが提供されていて、JSON で UI を定義。 サーバとモデル、モデルとビューのバインド機構がある。 Sencha 独自の仕様を覚えなければならず、デザイナーには とっつきにくい。 Sencha Architect2 という IDE がある。
    25. 25. アプリケーションフレームワーク紹介 Sencha Touch デモ
    26. 26. アプリケーションフレームワーク紹介 PhoneGap
    27. 27. アプリケーションフレームワーク紹介 PhoneGap ハイブリッド型。HTML/CSS/JavaScript からネイ ティブアプリを生成。 ネイティブコードは「枠」だけで、中身は Web アプ リと同じ。既存の Web アプリの手法を利用可能。 ほとんどのネイティブ機能を利用可能。 アプリバイナリを生成する Web サービスも提供。
    28. 28. アプリケーションフレームワーク紹介 PhoneGap Web サービスでアプリをビルドするデモ
    29. 29. アプリケーションフレームワーク紹介 jQuery Mobile
    30. 30. アプリケーションフレームワーク紹介 jQuery Mobile Web アプリ型。UI を構築するためのライブラリ。 メジャーなライブラリである jQuery がベース。 HTML に UI の役割を記述して動作を規定する。デザ イナー向け。
    31. 31. アプリケーションフレームワーク紹介 jQuery Mobile デザインを Web サービスでカスタマイズするデモ
    32. 32. アプリケーションフレームワーク紹介 Titanium Sencha Touch 2 PhoneGap jQuery Mobile タイプ ネイティブ ハイブリッド ハイブリッド Web アプリ The jQuery ベンダー Appcelerator Sencha Inc. Adobe Foundation HTML5 / CSS3 / HTML5 / CSS3 / 主な開発言語 JavaScript 主に JavaScript JavaScript JavaScript 対応 iOS / Android / iOS / Android / iOS / Android iOS / Android Windows Phone7 / Windows Phone7 / プラットフォーム Blackberry など Blackberry など JavaScript でネイ JavaScript の MVC 複数のプラット 画面遷移を HTML 上 特徴 ティブアプリ開発 フレームワーク フォーム対応 で定義 デザイナー メインの対象者 エンジニア エンジニア デザイナー /エンジニア 各プラットフォーム 開発環境 Titanium Studio Sencha Architect 2 の開発環境 / codiqa 等 PhoneGap Build
    33. 33. BaaS とは?
    34. 34. BaaS とは? BaaS とは? Backend as a Service アプリケーションに必要なサーバサイドの処理を引き受けてく れるクラウドサービス。 サーバの立ち上げ、DB 構築、API 設計、機能設計、コーディ ング、監視、スケーリング、etc... モバイル向けの SDK(もしくは API)とダッシュボードが提供 されていて、サーバのことを全く意識することなく、素早く利 用することが可能。
    35. 35. BaaS とは? さまざまな BaaS
    36. 36. BaaS とは? Parse
    37. 37. BaaS とは? Parse 最小限の設定で、すぐに使い始められる。 iOS と Android 向けのネイティブアプリ用 SDK と、Web アプリ向けの JavaScript SDK、サーバサイド向けの REST API が提供されている。 サーバとの通信部分も隠 化された、使いやすいクラス ライブラリ。 充実したドキュメント。
    38. 38. BaaS とは? Parse
    39. 39. BaaS とは? Parse Objective-C for iOS PFObject *post = [PFObject objectWithClassName:@"Post"]; [post setObject:@"Hello World" forKey:@"title"]; [post setObject:@"I got Parse working on iOS!" forKey:@"content"]; [post saveInBackground]; Java for Android ParseObject post = new ParseObject("Post"); post.put("title", "Hello World"); post.put("content", "I got Parse working on Android!"); post.saveInBackground(); JavaScript var Post = Parse.Object.extend("Post"); var post = new Post(); post.set("title", "Hello World"); post.set("content", "I got Parse working on Web App!"); post.save(null, {success: function(){}, error: function(){} } );
    40. 40. BaaS とは? Parse プロジェクトの作成からデータの保存までのデモ
    41. 41. 今日のおさらい
    42. 42. まとめアプリ開発手法の3つのタイプ 開発リソースやビジネスモデルに応じて選択。様々なフレームワーク 開発言語やツールを選べる。BaaS サーバサイドの開発をスキップできる。
    43. 43. まとめ で、⃝⃝⃝で使えるの???
    44. 44. Thank you!

    ×