PhoneGapを利用したハイブリットアプリについて、解説しています

1. ハイブリッドアプリについて
PhoneGapアプリ制作の入り口

2. ©2014 Yoshihiro Takahashi All Right Reserved. 2
スマートフォンアプリについて

3. ©2014 Yoshihiro Takahashi All Right Reserved. 3
スマフォアプリの種類
• ネイティブアプリ
– アプリストアで購入/ダウンロード
– 端末にインストールして利用
• ウェブアプリ
– Webコンテンツとして提供
– ブラウザ上で利用
• Gmail、Googleドキュメント、Facebook、
チャットワークなど

4. ©2014 Yoshihiro Takahashi All Right Reserved. 4
ネイティブアプリ開発について

5. ©2014 Yoshihiro Takahashi All Right Reserved. 5
ネイティブアプリの特徴
• 開発環境
– iOSアプリ
• 開発言語にObjective-C もしくは swiftを使用
• プログラミングツール Xcode を使用
• Macでしか開発できない
• 実機確認に費用が発生（iOS Developer Programへの登録）
– Androidアプリ
• 開発言語にJavaを使用
• プログラミングツール Android Studio を使用
• Win / Mac で開発
• 動作/機能
– アプリストアでの課金を利用
– カメラ/センサー/ローカルファイル/Bluetoothなど、全てのスマ
ホ機能を活用できる。
– 動作のパフォーマンスが良い。

6. ©2014 Yoshihiro Takahashi All Right Reserved. 6
ネイティブアプリの欠点
• iPhoneとAndroidの両方開発する場合、
別々にゼロから開発しなければならない
• ２つ同時にプログラミング言語の学習は、
敷居が高い
• iOSアプリの場合、公開に審査が必要なた
め、公開/アップデートに時間がかかる

7. ©2014 Yoshihiro Takahashi All Right Reserved. 7
ウェブアプリ開発について

8. ©2014 Yoshihiro Takahashi All Right Reserved. 8
ウェブアプリの特徴
• 開発環境
– HTML・CSS・JavaScriptなどのWebサイト制作技術
で開発できる
– テキストエディタ、Dreamweaverなど様々なツールで
開発可能
• 動作環境
– ブラウザがあれば、どの端末でも動作可能
– 更新が容易
– スマホ固有機能（傾き、GPSなど）を一部利用できる

9. ©2014 Yoshihiro Takahashi All Right Reserved. 9
ウェブアプリの欠点
• アプリストア（App Store/Google Play）が
利用できない
• 課金を自前で実装、集客が困難
– ただし、大企業の場合には毎月自動課金が可能なため、有利な場合
もある
• 電話帳/コンパス/カメラなど、一部スマホ
固有機能が利用できない

10. ©2014 Yoshihiro Takahashi All Right Reserved. 10
まとめ
• ネイティブアプリは、課金や機能など、良い点が多い
• ネイティブアプリは、複数端末用のアプリ開発が困難
• ウェブアプリは、複数端末用のアプリ開発が容易

11. ©2014 Yoshihiro Takahashi All Right Reserved. 11
この問題を解決するのが

12. ©2014 Yoshihiro Takahashi All Right Reserved. 12
ハイブリッドアプリ

13. ©2014 Yoshihiro Takahashi All Right Reserved. 13
ハイブリッドアプリとは
• 各OS用のブラウザアプリ内に、HTML/CSS/JavaScriptファイ
ルを含めて制作し動作させる
• 単体アプリとして作成するため、アプリストアとして配布可能
• 同じHTML/CSS/JavaScriptファイルを、多くの端末で利用可能
ネイティブアプリとウェブアプリのいいとこ取り

14. ©2014 Yoshihiro Takahashi All Right Reserved. 14
これを実現するのが

15. ©2014 Yoshihiro Takahashi All Right Reserved. 15
PhoneGap

16. ©2014 Yoshihiro Takahashi All Right Reserved. 16
PhoneGapの仕組み
JavaScript
HTML
CSS
画像
制作するのは、
通常のWebファイル
JavaScript
HTML
CSS
画像
アプリとして
「ラップ」する
ブラウザ
スマホ機能用API

17. ©2014 Yoshihiro Takahashi All Right Reserved. 17
PhoneGapの仕組み
• HTML/CSS/JavaScriptファイルをアプ
リとして「ラップ」する
• JavaScriptから、スマホ機能へアクセス
するためAPIを提供

18. ©2014 Yoshihiro Takahashi All Right Reserved. 18
PhoneGap対応プラットフォーム
• iPhone/iPhone 3G，iPhone 3GS以上
• Android
• BlackBerry OS4.6-4.7，OS5.x，6.0以上
• HP WebOS
• Windows Phone 7
• Symbian
• Bada

19. ©2014 Yoshihiro Takahashi All Right Reserved. 19
PhoneGap利用可能スマホ機能
• モーションセンサ
• カメラ
• マイク
• コンパス
• GPS
• メディア
– ・・・など

20. ©2014 Yoshihiro Takahashi All Right Reserved. 20
PhoneGapで不利な点
• ハードウェア機能の制御
– Bluetoothなどハードウェア機能の制御が困難
• 動作が若干遅い
– ブラウザ上で動作するので、ネイティブアプリより
は、動作が若干遅くなる
• PhoneGapを利用するための環境構築が困難

21. ©2014 Yoshihiro Takahashi All Right Reserved. 21
PhoneGapの環境構築
• iOSアプリ
– プログラミングツール Xcode を使用
– Macでしか開発できない
– iOS Developer Programへの登録
• Androidアプリ
– Aptana, Dreamweaver, EclipseなどPhoneGap対応
エディタを使用
– Win / Mac で開発

22. ©2014 Yoshihiro Takahashi All Right Reserved. 22
こんなに環境を
揃えるのは面倒だ

23. ©2014 Yoshihiro Takahashi All Right Reserved. 23
こういう場合は

24. ©2014 Yoshihiro Takahashi All Right Reserved. 24
PhoneGap:Build

25. ©2014 Yoshihiro Takahashi All Right Reserved. 25
PhoneGap:Build とは
• クラウドベースでのビルド/コンパイル環境
– 環境構築せずに、ネット上のシステムを使って、各
端末のアプリファイルを作成する

26. ©2014 Yoshihiro Takahashi All Right Reserved. 26
PhoneGap:Buildの利用について
• Adobe IDが必要
• iOSアプリを制作する場合には、iOS
Developer Programへ登録（要年間費
用）し、証明書を作成

27. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 27
PhoneGap:Buildで
アプリ作成

28. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 28
アップのため下準備
1. 新規にフォルダを作成し、英語で名前を付けてくださ
い。
2. 作成したファイルを作成したフォルダにコピー
3. アプリ起動時に表示したいHTMLファイルの名前を
index.html と変更
4. フォルダをZIP形式で圧縮
5. PhoneGap:BuildにZIPファイルをアップ