Webエンジニアによるスマートフォンアプリ開発

1

WEB エンジニアによるスマートフォンアプリ開発

2012/08/22竹内孝志

2

背景

ＷＥＢサイト

モバイル最適化サービス利用(mobify など )

スマフォ専用サイトの開発

専用アプリの開発

3

アジェンダ▌モバイルアプリ

►ネイティブアプリ►Web アプリ►ハイブリッドアプリ

▌フレームワーク►Titanium►PhoneGap►Sencha Touch 2.0

▌phonegap►構成►実例 ( デモ )

4

スマートフォンアプリの種類

▌ネイティブアプリダウンロードしてきて端末で直接起動するアプリケーション。

▌Web アプリインターネットを介して利用できるアプリケーション。

▌ハイブリッドアプリ両方の特性を持つ中間的なアプリケーション。

5

ネイティブアプリ

▌メリット►カメラやセンサーなどデバイスの機能を使える。►ストアで簡単に課金サービスが利用できる。►動作が早い。

▌デメリット►開発にスマフォアプリの技術者が必要。►プラットフォーム毎に開発が必要。

6

WEB アプリ

▌メリット►WEB の技術者で事足りる。►複数のプラットフォームに対応しやすい。►アプリケーションのアップデートが容易。

▌デメリット►ストアが利用できなく課金システムを独自で実装する必要が

ある。►カメラやセンサーなどデバイスの機能が利用できない。

7

ハイブリッドアプリ

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

▌デメリット►ネイティブアプリほど高度なことができない。

8

３つの比較

ネイティブアプリ

WEB アプリ ハイブリットアプリ

開発言語( デザイン )

Objective-C or java HTML+CSS HTML+CSS

開発言語（内部処理）

Objective-C or java Javascript(java, ruby など )

Javascript

マーケットの利用

○ × ○

開発環境 プラットフォームに合う環境が必要

なんでもＯＫ なんでもＯＫ

動作速度 早い 遅い 普通

9

ハイブリットアプリのオススメ

►HTML+javascript で開発が可能►マルチプラットフォーム対応も同じコードで可能

ＷＥＢエンジニアがスマートフォンアプリを開発するならハイブリットアプリがお手軽

10

フレームワークの種類▌Titanium

Javascript のコードを変換してアプリを構成

▌phonegapHTML,CSS,javascript の WEB アプリを内部ブラウザで実行

▌Sencha Touch 2.0Javascript のライブラリ、 WEB アプリをネイティブ形式へ変換

11

Titanium

▌特徴　 Appcelerator が提供　 javascript をネイティブコードへ変換。　内部でバイナリを作成するため通常のネイティブアプリケー

ションと　同等の実行速度が実現可能。　デバイス固有の機能もほとんど実現可能。

12

phoneGap

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

が可能。　 Eclipse で開発。　プラットフォームが多彩。　

13

Sencha Touch 2.0

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

換できる。

14

フレームワーク比較

Titanium PhoneGap Sencha Touch2

開発言語 JavaScript Javascript,HTML,CSS

Javascript,HTML,CSS

プラットフォーム

iOS,Android iOS,Android,WindowsPhone など

iOS,Android

デバイス機能 多い 普通 少ない

処理速度 早い 遅い 普通

15

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

ムワーク

16

フレームワークのオススメ

►HTML+javascript+CSS で開発が可能►アプリの構成がＷＥＢサイトと同じで理解が容易　 ( ブラウザ使用のため )

ＷＥＢ開発者視点でみて phonegap がイチオシ

17

phoneGap

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

18

アセットレイヤー

phoneGap の構成 (1)

ネイティブレイヤー

PhoneGap の javascript ライブラリ

内蔵ブラウザ

HTML CSSJavascript

19

phoneGap の構成 (2)

ファイルの配置と Java ファイルに記述を追加するだけでphoneGap が使える。

通常の Web サイトと同じようにファイルを配置するだけでスマートフォンアプリの完成。

20

phoneGap 構成 (3)

main.mを実行

AppDelegateを実行

PhoneGapネイティブライブラリ

ロードされる

内部ブラウザを作成してindex.html を表示

HTML

CSS

javascript

PhonegapJavascript

ライブラリ

21

デモ▌HTML + javascript

▌HTML5 + javascript + canvas

▌HTML5 + javascript + jquery

HTML5 の機能や jquery など外部ライブラリも使用可能、リッチなアプリを簡単に作れる。

22

phoneGap のまとめ

▌phonegap はハイブリットアプリのフレームワーク

▌H アプリ内部のブラウザでＷＥＢアプリを使いデバイス上で動作

▌HTML+CSS+javascript で開発

▌Eclipse 上で開発できて環境構築も簡単

▌jQueryMobile を使うことでさらに簡単に開発が可能

23

本日のまとめ

▌スマートフォンアプリの中にはネイティブアプリとＷＥＢアプリの特性を持ったハイブリットアプリケーションがある。

▌ハイブリットアプリは HTML と javascript で開発可能なデバイス上で動作するアプリケーションである。

▌ハイブリットアプリの中で phoneGap というフレームワークがある。

▌phoneGap を使えば短期間スマートフォンアプリを作ることができる。

24

参考文献

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

書籍PhoneGap 　入門ガイド　アシアル株式会社著

25

ご清聴ありがとうございました

おわり