2012/9/14に行われた、PhoneGapユーザー会＠大阪での講演資料です

1. PhoneGap
アシアル株式会社 田中正裕
<masahiro@asial.co.jp>

2. 田中正裕（たなか まさひろ）
アシアル株式会社 代表取締役
大学2年生の時にアシアル株式会社を設立、そのまま代表取締役社長と
して今に至る。もともと小学生の時にパソコンを触ったことがきっかけ
で、生きている時間の大半をプログラミングして過ごす。東京大学工学
部を卒業、アシアルの事業に忙しくなったため同大学院を中退。代表取
締役社長として対外的な活動を行いつつ、各プロジェクトではコーディ
ングやマネジメントなども担当。

3. アシアルは「エンジニアリングでインターネットの成長 を牽引する」という事業
コンセプトのもと、UI/UX 設計とプログラミングを高次元で融合したエンジニア
リングサービスを提供します。
主な事業内容
► Webシステム＆コンサルティング（特にPHP・オープンソース関連）
► 開発関連製品（JpGraph、ionCube PHP Encoder、SSLモバイル等）
► モバイルアプリ開発環境 Monaca
► エンジニア教育、トレーニング
► デザインUI/UX設計

4. 出典: http://redmonk.com/sogrady/2012/09/12/language-rankings-9-12/

5. HTML5/CSS3/JavaScriptによるモバイルソリューション提供を中心に、
クラウド技術とオープンソーステクノロジーにフォーカスしています
HTML5を用いた スマートフォン/タブレット
モバイルアプリ開発 開発プラットフォーム オープンソース支援

7. 名刺管理: Eight テレ朝動画アプリ シューズファインダー
© 三三株式会社 © 株式会社テレビ朝日 © 株式会社アシックス
PhoneGap

8. ブラウザだけで
PhoneGapアプリが
開発できます！
Monaca

9. PhoneGap
守備範囲
ディレクター SE/PM
コーディング デザイナー JS/Flash ネイティブ ネイティブ サーバーサイド
担当 エンジニア エンジニア オンリー エンジニア
エンジニア
PhoneGap

10. Androidエンジニア
プロジェクト管理
【必要になる知識】
CSS3
JavaScript
HTML5
＋
iOSエンジニア JavaScriptエンジニア Android Java
HTML/CSSまわり JavaScriptロジック iOS Objective-C

11. ► 企画段階・開発前
► 設計時
► 開発中
► メンテナンス時
PhoneGap

12. ► そもそもPhoneGapで作ることができるかどうかの判断
► HTML5が対応していても、モバイルブラウザが対応していないケースもある
► Titanium, Corona SDKなどの選択もあり
► 開発対象のプラットフォームと端末の選定
► iOSだけでまずリリースするのか？両方同時リリースか？対応端末のバージョンは？
► メインの開発方法の選定
► XcodeとEclipseの両刀使いは大変。Monacaを検討してください（宣伝）
► 実際のハイブリッドアプリを使って、イメージをしていただく
► ハイブリッドアプリのクセや、できることの把握につながります

13. 【ユーザーインターフェース】
► 使うUIライブラリは？
► jQuery Mobile? Sencha Touch? もしくは独自でCSSを作る？
► 画面デザインはiOS風？Android風？
【プログラミング技術】
► MVCフレームワークを使う？
► Backbone.js? AngularJS? Closure?
► JSコンパイラを使う？
► Google Closure Compiler? CoffeeScript?

14. まずはプロトタイプ（モックアップ）を作る
► 機能の確認
► 動きの確認（速度の確認）
► CSSレベルでの作り込み＋ターゲット端末での確認まで
デバッグ
► DOMの確認にはWeinreが便利
(http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/)
► JavaScriptのデバッグは難しい

15. 意外と難しいのが、PhoneGapアプリのメンテナンス
（というより、スマートフォンアプリ全般でいえる内容です）
► OSのバージョンアップにより、細かい挙動が変わってしまう
► iOS 5.0→5.1への、ローカルストレージ取り扱いの違い等
► 一つのコード修正で、AndroidとiOSの両方を確認しないといけない
► 画面解像度などの基本機能に、想定外のデバイスが出てくる

16. HTML5の制約
► ネイティブモジュールを組み合わせることで、ほぼすべて解決可能
► とはいえ、実際にはカメラ以外でネイティブを頼る部分は特になかった
機種依存問題
► 最新のCSS3機能については、iPhoneとAndroidの差異が大きい
例）3Dアニメーション機能はAndroidには無いなど
► 基本的に最新バージョンのOSの方がクセが少ない
► HTML5やJavaScriptで機種依存問題は基本的に発生しない。CSS3については、まだ不安定な
部分もあり。
ユーザーエクスペリエンス
► position:fixedがフルに使えないiOS4系とAndroidでは対応に苦労 →そのためネイティブで
ツールバー等を表示するプラグインを自社開発
► HTML5だけだと画面遷移がモッサリする可能性が高い
► 用いるCSS3のプロパティによりスムーズさが大きく異なる事もある

17. PhoneGap Fanというサイトを運
営しています。
日本語APIドキュメントの掲載など、
今後も内容を充実していきます。
PhoneGap
http://phonegap-fan.com

18. ► HTML5とネイティブを組み合わせたハイブリッドアプリ開発向けプラットフォーム
► クラウド上にすべての機能を統合し、だれでもアプリ開発ができる環境を提供
► 開発したアプリはApp StoreやGoogle Playなどの各種マーケットへの公開が可能
: Monaca

19. monaca-framework-ios:
iOS用フレームワーク
Monaca-framework-android:
Android用フレームワーク
monaca.js
JavaScriptライブラリ
Monaca Framework
PhoneGap

21. ► PhoneGapアプリの制作では、ハイブリッドアプリとしての設計技術が必要
になる。
► まだ日本語でのノウハウが不足している→ユーザー会に期待！
► 必要に応じてネイティブ拡張が可能なため、基本的には力業で何とかなる。
＆
► Monacaを使うと、無料でアプリが作れますので是非お試しを！