1. WEBエンジニアによる
スマートフォンアプリ開発
2012/08/22
竹内孝志
1

2. 背景
ＷＥＢサイト
モバイル最適化
サービス利用
(mobifyなど)
スマフォ専用
サイトの開発
専用アプリ
の開発
2

3. アジェンダ
▌モバイルアプリ
►ネイティブアプリ
►Webアプリ
►ハイブリッドアプリ
▌フレームワーク
►Titanium
►PhoneGap
►Sencha Touch 2.0
▌phonegap
►構成
►実例(デモ)
3

4. スマートフォンアプリの種
類
▌ネイティブアプリ
ダウンロードしてきて端末で直接起動するアプリケーション。
▌Webアプリ
インターネットを介して利用できるアプリケーション。
▌ハイブリッドアプリ
両方の特性を持つ中間的なアプリケーション。
4

5. ネイティブアプリ
▌メリット
►カメラやセンサーなどデバイスの機能を使える。
►ストアで簡単に課金サービスが利用できる。
►動作が早い。
▌デメリット
►開発にスマフォアプリの技術者が必要。
►プラットフォーム毎に開発が必要。
5

6. WEBアプリ
▌メリット
►WEBの技術者で事足りる。
►複数のプラットフォームに対応しやすい。
►アプリケーションのアップデートが容易。
▌デメリット
►ストアが利用できなく課金システムを独自で実装する必要が
ある。
►カメラやセンサーなどデバイスの機能が利用できない。
6

7. ハイブリッドアプリ
▌メリット
►デバイスの機能がある程度使えること。
►ストアで簡単に課金サービスが利用できること。
►WEBの技術者で事足りる。
►複数のプラットフォームに対応しやすい。
▌デメリット
►ネイティブアプリほど高度なことができない。
7

8. ３つの比較
ネイティブアプリ WEBアプリ ハイブリットアプ
リ
開発言語 Objective-C or java HTML+CSS HTML+CSS
(デザイン)
開発言語 Objective-C or java Javascript Javascript
（内部処理） (java, rubyなど)
マーケットの利用 ○ × ○
開発環境 プラットフォーム なんでもＯＫ なんでもＯＫ
に合う環境が必要
動作速度 早い 遅い 普通
8

9. ハイブリットアプリのオス
スメ
ＷＥＢエンジニアがスマートフォンアプリを開発するなら
ハイブリットアプリがお手軽
►HTML+javascriptで開発が可能
►マルチプラットフォーム対応も同じコードで可能
9

10. フレームワークの種類
▌Titanium
Javascriptのコードを変換してアプリを構成
▌phonegap
HTML,CSS,javascriptのWEBアプリを内部ブラウザで実行
▌Sencha Touch 2.0
Javascriptのライブラリ、WEBアプリをネイティブ形式へ変換
10

11. Titanium
▌特徴
Appceleratorが提供
javascriptをネイティブコードへ変換。
内部でバイナリを作成するため通常のネイティブアプリケー
ションと
同等の実行速度が実現可能。
デバイス固有の機能もほとんど実現可能。
11

12. phoneGap
▌特徴
nitobi soft(Adobe買収)社が提供。
アプリ内部のブラウザを使いWebアプリケーションを実行する。
通常のWEBサイトを作る感覚でスマートフォンアプリの作成が
可能。
Eclipseで開発。
プラットフォームが多彩。
12

13. Sencha Touch 2.0
▌特徴
Senchaが提供。
スマートフォン用のWEBアプリケーションのフレームワーク。
WEBアプリケーションをコマンド１つでネイティブアプリに変換
できる。
13

14. フレームワーク比較
Titanium PhoneGap Sencha Touch2
開発言語 JavaScript Javascript, Javascript,
HTML,CSS HTML,CSS
プラットフォー iOS,Android iOS,Android, iOS,Android
ム WindowsPhoneなど
デバイス機能 多い 普通 少ない
処理速度 早い 遅い 普通
14

15. インテントシェア
クロスプラットフォームツールで開発者が使いたいと思っているフレーム
ワーク
15

16. フレームワークのオススメ
ＷＥＢ開発者視点でみてphonegapがイチオシ
►HTML+javascript+CSSで開発が可能
►アプリの構成がＷＥＢサイトと同じで理解が容易
(ブラウザ使用のため)
16

17. phoneGap
PhoneGap 日本公式サイト
http://jp.phonegap.com/
17

18. phoneGapの構成(1)
Java
HTML CSS script
PhoneGapのjavascriptライブラリ
内蔵ブラウザ
18

19. phoneGapの構成(2)
ファイルの配置とJavaファイルに
記述を追加するだけで
phoneGapが使える。
通常のWebサイトと同じように
ファイルを配置するだけで
スマートフォンアプリの完成。
19

20. phoneGap構成(3)
main.m HTML
を実行
PhoneGap CSS
AppDelegate
ネイティブライブラリ
を実行 ロードされる
javascript
内部ブラウザを作成して Phonegap
index.htmlを表示
Javascript
ライブラリ
20

21. デモ
▌HTML + javascript
▌HTML5 + javascript + canvas
▌HTML5 + javascript + jquery
HTML5の機能やjqueryなど外部ライブラリも使用可能、
リッチなアプリを簡単に作れる。
21

22. phoneGapのまとめ
▌phonegapはハイブリットアプリのフレームワーク
▌Hアプリ内部のブラウザでＷＥＢアプリを使いデバイス上で動作
▌HTML+CSS+javascriptで開発
▌Eclipse上で開発できて環境構築も簡単
▌jQueryMobileを使うことでさらに簡単に開発が可能
22

23. 本日のまとめ
▌スマートフォンアプリの中にはネイティブアプリとＷＥＢアプリ
の特性を持ったハイブリットアプリケーションがある。
▌ハイブリットアプリはHTMLとjavascriptで開発可能なデバイス上
で動作するアプリケーションである。
▌ハイブリットアプリの中でphoneGapというフレームワークがある。
▌phoneGapを使えば短期間スマートフォンアプリを作ることができ
る。
23

24. 参考文献
サイト
PhoneGap 日本公式サイト
http://jp.phonegap.com/
書籍
PhoneGap 入門ガイド アシアル株式会社著
24

25. ご清聴ありがとうございまし
た
おわり
25