Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PhoneGapユーザー会@大阪 講演資料

2,050 views

Published on

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

Published in: Technology
  • Login to see the comments

  • Be the first to like this

PhoneGapユーザー会@大阪 講演資料

  1. 1. PhoneGapアシアル株式会社 田中正裕<masahiro@asial.co.jp>
  2. 2. 田中正裕(たなか まさひろ)アシアル株式会社 代表取締役大学2年生の時にアシアル株式会社を設立、そのまま代表取締役社長として今に至る。もともと小学生の時にパソコンを触ったことがきっかけで、生きている時間の大半をプログラミングして過ごす。東京大学工学部を卒業、アシアルの事業に忙しくなったため同大学院を中退。代表取締役社長として対外的な活動を行いつつ、各プロジェクトではコーディングやマネジメントなども担当。
  3. 3. アシアルは「エンジニアリングでインターネットの成長 を牽引する」という事業コンセプトのもと、UI/UX 設計とプログラミングを高次元で融合したエンジニアリングサービスを提供します。主な事業内容► Webシステム&コンサルティング(特にPHP・オープンソース関連)► 開発関連製品(JpGraph、ionCube PHP Encoder、SSLモバイル等)► モバイルアプリ開発環境 Monaca► エンジニア教育、トレーニング► デザインUI/UX設計
  4. 4. 出典: http://redmonk.com/sogrady/2012/09/12/language-rankings-9-12/
  5. 5. HTML5/CSS3/JavaScriptによるモバイルソリューション提供を中心に、クラウド技術とオープンソーステクノロジーにフォーカスしています HTML5を用いた スマートフォン/タブレット モバイルアプリ開発 開発プラットフォーム オープンソース支援
  6. 6. 名刺管理: Eight テレ朝動画アプリ シューズファインダー © 三三株式会社 © 株式会社テレビ朝日 © 株式会社アシックスPhoneGap
  7. 7. ブラウザだけで PhoneGapアプリが 開発できます!Monaca
  8. 8. PhoneGap 守備範囲 ディレクター SE/PM コーディング デザイナー JS/Flash ネイティブ ネイティブ サーバーサイド 担当 エンジニア エンジニア オンリー エンジニア エンジニアPhoneGap
  9. 9. Androidエンジニア プロジェクト管理 【必要になる知識】 CSS3 JavaScript HTML5 +iOSエンジニア JavaScriptエンジニア Android JavaHTML/CSSまわり JavaScriptロジック iOS Objective-C
  10. 10. ► 企画段階・開発前► 設計時► 開発中► メンテナンス時PhoneGap
  11. 11. ► そもそもPhoneGapで作ることができるかどうかの判断 ► HTML5が対応していても、モバイルブラウザが対応していないケースもある ► Titanium, Corona SDKなどの選択もあり► 開発対象のプラットフォームと端末の選定 ► iOSだけでまずリリースするのか?両方同時リリースか?対応端末のバージョンは?► メインの開発方法の選定 ► XcodeとEclipseの両刀使いは大変。Monacaを検討してください(宣伝)► 実際のハイブリッドアプリを使って、イメージをしていただく ► ハイブリッドアプリのクセや、できることの把握につながります
  12. 12. 【ユーザーインターフェース】► 使うUIライブラリは? ► jQuery Mobile? Sencha Touch? もしくは独自でCSSを作る?► 画面デザインはiOS風?Android風?【プログラミング技術】► MVCフレームワークを使う? ► Backbone.js? AngularJS? Closure?► JSコンパイラを使う? ► Google Closure Compiler? CoffeeScript?
  13. 13. まずはプロトタイプ(モックアップ)を作る► 機能の確認► 動きの確認(速度の確認)► CSSレベルでの作り込み+ターゲット端末での確認までデバッグ► DOMの確認にはWeinreが便利 (http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/)► JavaScriptのデバッグは難しい
  14. 14. 意外と難しいのが、PhoneGapアプリのメンテナンス(というより、スマートフォンアプリ全般でいえる内容です)► OSのバージョンアップにより、細かい挙動が変わってしまう ► iOS 5.0→5.1への、ローカルストレージ取り扱いの違い等► 一つのコード修正で、AndroidとiOSの両方を確認しないといけない► 画面解像度などの基本機能に、想定外のデバイスが出てくる
  15. 15. HTML5の制約► ネイティブモジュールを組み合わせることで、ほぼすべて解決可能► とはいえ、実際にはカメラ以外でネイティブを頼る部分は特になかった機種依存問題► 最新のCSS3機能については、iPhoneとAndroidの差異が大きい 例)3Dアニメーション機能はAndroidには無いなど► 基本的に最新バージョンのOSの方がクセが少ない► HTML5やJavaScriptで機種依存問題は基本的に発生しない。CSS3については、まだ不安定な 部分もあり。ユーザーエクスペリエンス► position:fixedがフルに使えないiOS4系とAndroidでは対応に苦労 →そのためネイティブで ツールバー等を表示するプラグインを自社開発► HTML5だけだと画面遷移がモッサリする可能性が高い► 用いるCSS3のプロパティによりスムーズさが大きく異なる事もある
  16. 16. PhoneGap Fanというサイトを運 営しています。 日本語APIドキュメントの掲載など、 今後も内容を充実していきます。PhoneGaphttp://phonegap-fan.com
  17. 17. ► HTML5とネイティブを組み合わせたハイブリッドアプリ開発向けプラットフォーム► クラウド上にすべての機能を統合し、だれでもアプリ開発ができる環境を提供► 開発したアプリはApp StoreやGoogle Playなどの各種マーケットへの公開が可能 : Monaca
  18. 18. monaca-framework-ios: iOS用フレームワーク Monaca-framework-android: Android用フレームワーク monaca.js JavaScriptライブラリMonaca Framework PhoneGap
  19. 19. ► PhoneGapアプリの制作では、ハイブリッドアプリとしての設計技術が必要 になる。► まだ日本語でのノウハウが不足している→ユーザー会に期待!► 必要に応じてネイティブ拡張が可能なため、基本的には力業で何とかなる。 &► Monacaを使うと、無料でアプリが作れますので是非お試しを!

×