Downloaded 30 times
More Related Content
Similar to PhoneGapユーザー会＠大阪 講演資料
PhoneGapユーザー会＠大阪 講演資料
- 1.
- 2.
- 3. アシアルは「エンジニアリングでインターネットの成長 を牽引する」という事業 コンセプトのもと、UI/UX 設計とプログラミングを高次元で融合したエンジニア リングサービスを提供します。 主な事業内容 ► Webシステム＆コンサルティング（特にPHP・オープンソース関連） ► 開発関連製品（JpGraph、ionCube PHP Encoder、SSLモバイル等） ► モバイルアプリ開発環境 Monaca ► エンジニア教育、トレーニング ► デザインUI/UX設計
- 4.
- 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を使うと、無料でアプリが作れますので是非お試しを！