PhoneGap アプリの作り方アシアル株式会社 田中正裕<masahiro@asial.co.jp>

講演者紹介

田中正裕（たなか まさひろ）アシアル株式会社 代表取締役

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

アシアル株式会社 紹介

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

► エンジニア教育、トレーニング► デザイン UI/UX 設計

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

アシアルの取り組み

HTML5/CSS3/JavaScript によるモバイルソリューション提供を中心に、クラウド技術とオープンソーステクノロジーにフォーカスしています

HTML5 を用いたモバイルアプリ開発

スマートフォン / タブレット開発プラットフォーム オープンソース支援

構築事例

PhoneGap 構築事例

名刺管理 : Eight© 三三株式会社

テレ朝動画アプリ© 株式会社テレビ朝日

シューズファインダー© 株式会社アシックス

Monaca プラットフォーム

ブラウザだけで

PhoneGap アプリが

開発できます！

PhoneGap を選定した理由

コーディング担当

ネイティブオンリー

エンジニア

サーバーサイドエンジニア

デザイナー JS/Flashエンジニア

ネイティブエンジニア

ディレクター SE/PM

PhoneGap守備範囲

具体的なチームの分担

Android エンジニアプロジェクト管理

iOS エンジニアHTML/CSS まわり

JavaScript エンジニアJavaScript ロジック

【必要になる知識】

CSS3JavaScript

HTML5＋

Android JavaiOS Objective-C

PhoneGap アプリ制作のコツ

► 企画段階・開発前

► 設計時

► 開発中

► メンテナンス時

企画段階・開発前

► そもそも PhoneGap で作ることができるかどうかの判断► HTML5 が対応していても、モバイルブラウザが対応していないケースもある► Titanium, Corona SDK などの選択もあり

► 開発対象のプラットフォームと端末の選定► iOS だけでまずリリースするのか？両方同時リリースか？対応端末のバージョンは？

► メインの開発方法の選定► Xcode と Eclipse の両刀使いは大変。 Monaca を検討してください（宣伝）

► 実際のハイブリッドアプリを使って、イメージをしていただく► ハイブリッドアプリのクセや、できることの把握につながります

設計時

【ユーザーインターフェース】► 使う UI ライブラリは？

► jQuery Mobile? Sencha Touch? もしくは独自で CSS を作る？► 画面デザインは iOS 風？ Android 風？

【プログラミング技術】► MVC フレームワークを使う？

► Backbone.js? AngularJS? Closure?

► JS コンパイラを使う？► Google Closure Compiler? CoffeeScript?

開発中

まずはプロトタイプ（モックアップ）を作る► 機能の確認► 動きの確認（速度の確認）► CSS レベルでの作り込み＋ターゲット端末での確認まで

デバッグ► DOM の確認には Weinre が便利 (http://people.apache.org/~pmuellr/

weinre/docs/1.x/1.5.0/)

► JavaScript のデバッグは難しい

メンテナンス時

意外と難しいのが、 PhoneGap アプリのメンテナンス（というより、スマートフォンアプリ全般でいえる内容です）

► OS のバージョンアップにより、細かい挙動が変わってしまう► iOS 5.0→5.1への、ローカルストレージ取り扱いの違い等

► 一つのコード修正で、 Android と iOS の両方を確認しないといけない► 画面解像度などの基本機能に、想定外のデバイスが出てくる

諸々のノウハウ

HTML5 の制約► ネイティブモジュールを組み合わせることで、ほぼすべて解決可能► とはいえ、実際にはカメラ以外でネイティブを頼る部分は特になかった機種依存問題► 最新の CSS3 機能については、 iPhone と Android の差異が大きい

例） 3D アニメーション機能は Android には無いなど► 基本的に最新バージョンの OS の方がクセが少ない► HTML5 や JavaScript で機種依存問題は基本的に発生しない。 CSS3 については、まだ不安定

な部分もあり。ユーザーエクスペリエンス► position:fixed がフルに使えない iOS4系と Android では対応に苦労 →そのためネイティブで

ツールバー等を表示するプラグインを自社開発► HTML5 だけだと画面遷移がモッサリする可能性が高い► 用いる CSS3 のプロパティによりスムーズさが大きく異なる事もある

PhoneGapお悩み解決サイトhttp://phonegap-fan.com

PhoneGap Fan というサイトを運

営しています。

日本語 API ドキュメントの掲載な

ど、今後も内容を充実していきま

す。

構築経験をオープンに : Monaca プラットフォーム

► HTML5 とネイティブを組み合わせたハイブリッドアプリ開発向けプラットフォーム

► クラウド上にすべての機能を統合し、だれでもアプリ開発ができる環境を提供

► 開発したアプリは App Store や Google Play などの各種マーケットへの公開が可能

Monaca Frameworkオープンソースの PhoneGap拡張ライブラリ

monaca-framework-ios:iOS 用フレームワーク

Monaca-framework-android:Android 用フレームワー

クmonaca.js

JavaScript ライブラリ

ドキュメント

まとめ

► PhoneGap アプリの制作では、ハイブリッドアプリとしての設計技術が必要になる。

► まだ日本語でのノウハウが不足している→ユーザー会に期待！► 必要に応じてネイティブ拡張が可能なため、基本的には力業で何とかなる。

＆

► Monaca を使うと、無料でアプリが作れますので是非お試しを！

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