Weitere ähnliche Inhalte Ähnlich wie スマートフォンアプリケーション開発の最新動向 (20) Mehr von Tsutomu Ogasawara (7) 3. 自己紹介（趣味）
PictTweet / PictTweet Plus!
iPhone/iPad 向けお絵描き Twitter アプリ。2009年5月リリース。
icotile
Twitter のフォロワー管理 Web アプリ。2011年リリース。
第0回 HTML5プログラミング&クリエイティブ・コンテスト優秀作品賞受賞
その他
野球リーグ成績管理 Web サービス（2006年）
⃝⃝⃝⃝⃝⃝ の Android への移植（2009年）
Twitter: @ogaoga
11. アプリ開発手法の３つのタイプ
背景
急激なスマートフォンへのシフト
2011 後半から 2012 春にかけて、スマートフォン
からのトラフィックが急増。
Line の急成長。
12. アプリ開発手法の３つのタイプ
背景
アプリ開発リソースが不足
サーバサイド、フロントエンドエンジニアはいるけ
ど...
Web ページのスマートフォン対応もあるし...
iPhone と Android の両対応は...
14. アプリ開発手法の３つのタイプ
背景
マネタイズの観点では、
既存の会員基盤、決済手段を利用したい。
Apple/Google に中間マージンを取られたくない。
などの理由で、ネイティブアプリが困難なことも。
15. アプリ開発手法の３つのタイプ
背景
開発都合
既存の開発リソースでアプリを開発したい。
成果物を各種プラットフォームで共有したい。
ビジネス都合
既存のマネタイズ手段、顧客獲得手段を流用した
い。
16. アプリ開発手法の３つのタイプ
背景
開発都合
既存の開発リソースでアプリを開発したい。
成果物を各種プラットフォームで共有したい。
ビジネス都合
既存のマネタイズ手段、顧客獲得手段を流用した
い。
→ Web の技術、リソースをアプリに活かしたい
17. アプリ開発手法の３つのタイプ
Native Hybrid Web
パフォーマンス ◎ ⃝ ⃝
デバイスアクセス ◎ ⃝ △
Push Notification ⃝ ⃝ ×
起動のしやすさ ⃝ ⃝ △
URL からのアクセス × × ⃝
App Store /
Market Place ⃝ ⃝ ×
独自の仕組みを
独自のマネタイズ 独自の仕組みを用意しなくてよい
利用できる
コードの可搬性 × ⃝ ◎
即時更新 × ⃝ ◎
パフォーマンスを要求される 既存の Web サービスの資産（開発
Push Notification やストアでの販売
ゲームや、没入型の魅力的な リソース、会員基盤、決済手段、
最適なアプリの種類 を行いたいが、ネイティブアプリ
アプリ、デバイスの機能をフ SEO 等）を活かしたアプリケー
を開発するリソースが無い場合等。
ルに利用するアプリ等。 ション。
フレームワーク依存のバグやパ
Apple や Google によって排除
フォーマンスの低下、OS 対応の遅 バックグラウンド動作や Push
リスク される可能性がある。リリー
れなど可能性と、ネイティブと同 Notification が出来ない。
ススケジュールも不確定。
じリスクがある。
21. アプリケーションフレームワーク紹介
Titanium Mobile
JavaScript で記述してネイティブアプリを生成（ネイティブアプリ型）。
リアルタイム性の高いものや、3D などは厳しい。
ネイティブコード（Objective-C）を呼び出すことも可能らしい。
JavaScript なので、メモリ管理や配列の扱いなどが楽。
その分パフォーマンスは落ちる。
Titanium Studio という IDE が提供されている。
Android への対応が不十分という話も？
24. アプリケーションフレームワーク紹介
Sencha Touch
ハイブリッド型。JavaScript で記述する MVC フレームワー
ク。iOS と Android に対応。
UI コンポーネントが提供されていて、JSON で UI を定義。
サーバとモデル、モデルとビューのバインド機構がある。
Sencha 独自の仕様を覚えなければならず、デザイナーには
とっつきにくい。
Sencha Architect2 という IDE がある。
27. アプリケーションフレームワーク紹介
PhoneGap
ハイブリッド型。HTML/CSS/JavaScript からネイ
ティブアプリを生成。
ネイティブコードは「枠」だけで、中身は Web アプ
リと同じ。既存の Web アプリの手法を利用可能。
ほとんどのネイティブ機能を利用可能。
アプリバイナリを生成する Web サービスも提供。
30. アプリケーションフレームワーク紹介
jQuery Mobile
Web アプリ型。UI を構築するためのライブラリ。
メジャーなライブラリである jQuery がベース。
HTML に UI の役割を記述して動作を規定する。デザ
イナー向け。
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
34. BaaS とは？
BaaS とは？
Backend as a Service
アプリケーションに必要なサーバサイドの処理を引き受けてく
れるクラウドサービス。
サーバの立ち上げ、DB 構築、API 設計、機能設計、コーディ
ング、監視、スケーリング、etc...
モバイル向けの SDK（もしくは API）とダッシュボードが提供
されていて、サーバのことを全く意識することなく、素早く利
用することが可能。
37. BaaS とは？
Parse
最小限の設定で、すぐに使い始められる。
iOS と Android 向けのネイティブアプリ用 SDK と、Web
アプリ向けの JavaScript SDK、サーバサイド向けの
REST API が提供されている。
サーバとの通信部分も隠 化された、使いやすいクラス
ライブラリ。
充実したドキュメント。
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. BaaS とは？
Parse
プロジェクトの作成からデータの保存までのデモ
Hinweis der Redaktion \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
