Uploaded byMonaca
Phone gap＋javascriptスマホアプリ開発（入門編）
2013/04/20 スマートフォンアプリ開発 勉強会 @ 福岡 での講演資料 http://atnd.org/events/37573#comments
More Related Content
Similar to Phone gap＋javascriptスマホアプリ開発（入門編）
Phone gap＋javascriptスマホアプリ開発（入門編）
- 1. PhoneGap + JavaScript スマフォアプリ開発(入門編) 2013年4月20日 スマートフォンアプリ開発勉強会 アシアル株式会社 田中正裕 ※ 後で資料を公開して、ATNDにURLを貼っておきます
- 2. 自己紹介 田中正裕 （たなかまさひろ） masahiro@asial.co.jp 大学2年生の時にアシアル株式会社を設立、 そのまま代表取締役社長として今に至る。 もともと小学生の時にパソコンを触ったことがきっかけで、 生きている時間の大半をプログラミングして過ごす。東京大 学工学部を卒業、アシアルの事業に忙しくなったため同大学 院を中退。 代表取締役社長として対外的な活動を行いつつ、各プロジェ クトではコーディングやマネジメントなども担当。
- 3. アシアル株式会社紹介 アシアル株式会社は、これまで培ってきたサーバーサイド技術をもとに、 HTML5やJavaScriptといったクライアント技術を高い次元で組み合わせ、 優れたユーザーエクスペリエンスを持つアプリケーションを提案します。 アシアルブログ 企業サイト 不定期で弊社エンジニアやデザイナーが興味の 弊社が開発・販売している各種製品やサービ ある技術テーマを配信します。 スへのリンク、スクールの情報などが掲載さ れています。
- 4. PhoneGapの扱う範囲 UI/UX UI設計 ユーザー エクスペリエンス HTML5 CSS3 Objective-C Android Java クライアント JavaScript レイヤー PhoneGap ミドルレイヤー PHP Node.js サーバーレイヤー MySQL インフラ ハードウェア クラウド Linux IaaS インフラ
- 5.
- 6. PhoneGapを使うと… HTML5（＋JavaScript、CSS）で スマホのネイティブアプリが作れます。 「ハイブリッドアプリ」 と言います
- 7. HTML5はHTMLの最新バージョン HTML 5.0 HTML2.0 HTML3.2 HTML4.0 HTML1.0 1995年 1997年 1997年～ 2008年 ドラフト 2014年正式勧告予定 「Snapshot版」 XHTML1.0 2000年 「HTML Living Standard版」 → WHATWG （Apple・Mozilla・Opera）
- 8. モバイル分野で先行するHTML5 スマートデバイス分野ではHTML5がすでにスタンダード iPhoneやAndroidなど、スマートデバイスでは早くからHTML5を標準サポート ぜんぶPhoneGapで対応 一方、PC向けWebサイトのHTML5対応はこれから Internet Explorer 10で本格的にサポート Firefox、Chrome、Safariは 早い段階でHTML5対応 CSS3だけで作成した「ドラえもん」 shopdd.blog51.fc2.com/blog-entry-932.html 日本におけるブラウザーシェア 2012年11月
- 9. HTML5かネイティブか。 “企業としての最大の失敗は http://fb.html5isready.com/ ネイティブアプリではなく HTML5に賭けすぎたことで す。時期尚早でした。”と話 した。“iOSアプリにしたら、 利用者のフィードの消費が2 倍になりました。” “Facebookモバイルアプリケー ションの動作が遅いのはHTML5の せいなんかじゃない。 我々は現代 のスマートフォンのブラウザーの 能力やHTML5の豊な能力を知って いました。”
- 10. HTML5の利点と弱点 出典: Developer Economics 2013
- 11. HTML5の利点と弱点 HTML5を選択した理由 ・クロスプラットフォームのコード 移植性 ・低コスト開発 ・クロススクリーンのコード移植性 ・学習コストの低さ ・オープンソース ・リーチ（検索エンジンなど） ・開発コミュニティーの充実
- 12.
- 13. HTML5で埋まらないギャップ クロスプラットフォーム技術としてHTML5が主流だが、デバイス性能 を最大限に発揮することは困難 NFCやカメラなどの端末機能や、3Dアニメーションなどは ネイティブアプリでないと開発できない 開発の難易度 デバイスの特殊な機能を用いたい場合 • Bluetooth通信 • デバイス内のファイル読み書き クロスプラット OS独自機能の活 フォーム 用 • NFCとか OSの機能を用いたい場合 • プッシュ通信 メンテナンス性 端末性能の発揮 • GameCenterやPassbookなどへの対応 • ホーム画面のウィジェット ハードウェア能力を最大限用いたい場合 HTML5アプリ（Web） ネイティブアプリ • 高度なアニメーション（3D、OpenGL等） • ポインターによる高速演算など
- 14. ハイブリッドアプリの登場 HTML5を内部の WebView (ブラウザ) で実行 メリット: • HTML/CSS/JavaScriptでモバイルOSにアプリを提供できる（クロスプラットフォーム性） • 端末にアプリをインストールできるため、ローカルで動作可能 • デバイスの機能(カメラ、ファイル読み書き…etc)にアクセス可能 デメリット: • 実行速度は各OSのブラウザーと同じぐらい。ただしiOSではNitro使えない。 • イバラの道。情報量が少なく、仕様変更も多々あり。 •ネイティブと比較できるのは当面先。。。
- 15. ハイブリッド化を後押しするもの BYOD・コンシューマライゼーションへの適用性 『2016年には、企業向けアプリの50%以上はハイブリッドアプリとなるだろう』 －2013年2月4日、Gartner 低コスト・RADなソリューションとしての開発手法 プロトタイプと本開発を一気に進められる Windows 8、Firefox OS、Tizenなどの新プラットフォームにおいても、ハ イブリッドアプリを低コストに移植可能 新しいプラットフォームは、ネイティブでHTML5アプリが動作する
- 16. ハイブリッドアプリの例 （アシアル実績） auヘッドライン 名刺管理: Eight テレ朝動画アプリ シューズファインダー KDDI株式会社 © 三三株式会社 © 株式会社テレビ朝日 © 株式会社アシックス
- 17. Cordova、PhoneGapとは？ オープンソースのハイブリッドアプリ開発ライブラリー Apacheプロジェクトで開発・メンテナンスされている PhoneGapが標準でサポートする機能 機能 説明 加速度センサー 端末に内蔵された加速度センサーを読み取り、端 末の傾きを取得する カメラ 端末のカメラやアルバムにアクセスし、写真を取 得する ビデオキャプチャー ビデオを録画する オーディオ録音・再 オーディオを録音したり、再生する 生 コンパス 端末の向きを方位情報として取得する 接続状態確認 OSのネットワーク接続状態を取得する アドレス帳 OSの連絡帳にアクセスし、情報の入出力を行う デバイス情報 デバイスのモデル名や端末IDなどの取得や、OS情 報を取得する ハードウェアボタン Android端末の持つ各種ボタンに対するイベントを 取得する ファイルシステム OSのファイルシステムにアクセスし、ファイルの 入出力を行う • Adobe Systems社によりリリースされた際の製品名 GPS GPSセンサーにアクセスし、現在の緯度経度を取 • さまざまなアドビ製ツールとの連携が可能 得する 国際化 OSの利用言語や各種ロケール情報を参照する バイブレーター バイブレーターを実行する スプラッシュ操作 起動時に表示されるスプラッシュ画面を制御する SQLデータベース SQLデータベースにアクセスする
- 18. PhoneGap Build PhoneGap Build: クラウドビルドサービス
- 19. PhoneGapの仕組み GPS HTML5/JavaScript/CSS3 ネイティブコード アプリのパッケージ内 カメラ サーバーとの通信は Webアプリではアクセスでき Ajaxの技術を応用 ない各種ネイティブAPIを実 行できる 連絡帳など
- 20. PhoneGapアプリの特徴 HTML5アプリ PhoneGapアプリ ネイティブアプリ 開発言語 HTML5とJavaScript Objective-CやJava JavaScriptから Webブラウザーが備える 端末やOSが持つすべての 機能 ネイティブの機能を 機能のみ利用可能 機能を利用可能 呼び出せる 通常のWeb開発環境 XcodeやEclipseといったOSごとの開発環境 開発環境 エディタ、Dreamweaver等 （もしくはMonacaやPhoneGap Build） ○ × クロスプラットフォーム 同じJavaScriptコードを流用可 開発言語自体が異なる △ ○ ◎ 実行速度 Webブラウザーが実行エン ソースコードを端末上に保 OSが直接実行する ジン 存することが可能 × ◎ オフライン対応 キャッシュを用いて一部オ 端末内にプログラムが配置 フライン対応も可能 Webサイトにアクセス アプリの配布方法 マーケットの登録が原則 マーケットへの登録は不可 ネイティブ部分はマーケッ アップデートのたびにマー サーバーから配信するため ト経由の更新。HTML5部分 メンテナンス方法 ケット登録。更新はユー 常に最新状態をキープ可能 は任意のタイミングで更新 ザー次第 可能
- 21. 他の開発手法との違い PhoneGap Titanium Unity 3D Webアプリ HTML5、CSS3、 HTML5、CSS3、 開発言語 JavaScript JavaScript / C# JavaScript JavaScript XCodeや Dreamweaverや 開発環境 Titanium Studio 独自環境 Eclipse エディター マーケットへの ○ ○ ○ × 配布 ネイティブ対応 ○ ○ ○ × アプリ実行速度 △ ○ ○ × Webアプリをネ JavaScriptでア ゲームアプリ開 ブラウザー上で 目的 イティブ化 プリ開発 発環境 動作
- 22. PhoneGapアプリの開発環境 DreamWeaver/Bracket+PG Eclipse、XCode Monaca Platform Build Webプロフェッショナル向 ネイティブ開発者向け 初心者、入門者向け 無料！ け App Storeからデバッガーを シミュレーターもしくは実 PhoneGap Buildを使うと実 ダウンロードして実機で確 機で確認 機にインストール可能 認、ビルド機能も搭載 対応製品＋PGBuildアカウン 各OSのSDKをローカルにイ Webサイトからサインアッ トがあれば簡単に開発でき ンストールする プするだけで開発できる る
- 23.
- 24.
- 25. 用意するもの（Android版） Android SDKをインストールしたPC Android端末（もしくはエミュレータ） Eclipse （Android SDKに同梱） PhoneGap SDK
- 26. デモ with PhoneGap forAndroid
- 27.
- 28.
- 29.
- 30.
- 31. 次に作るアプリ jQuery Mobileを使った簡単な写真撮影アプリ 実際に皆さんのスマホ上で動かしてみるので、 「Monaca」というアプリをインストールして、下 記のIDとパスワードでログインしてください。 メールアドレス: 20130420@monaca.mobi パスワード: 20130420 こんなアイコン
- 32. そもそもこれは何？ on 「Monaca」アプリをDLしてログインしてください メールアドレス: 20130420@monaca.mobi パスワード: 20130420
- 33. jQuery Mobileを組み込んだデモ 転送 開発 実機で動作 ＝私 ＝皆さんのデバッガー 「Monaca」アプリをDLしてログインしてください メールアドレス: 20130420@monaca.mobi パスワード: 20130420
- 34. デモ with jQuery Mobileon Monaca
- 35. PhoneGapの情報源 コミュニティ • PhoneGap Blog （USA） • PhoneGapユーザーグループ ドキュメント • マニュアル（日本語版は2.2まで、鋭意翻訳中…） • 各種Webの記事（ITProやThinkITで連載中）
- 36. まとめ • jQuery Mobileだけでは、どうしても「jQM臭」 がするアプリになってしまう • でも、業務利用やサクッと作る場合には便利 • HTML5だけでUIに優れたアプリを作れるよう になるのは、もう少し先の話かな。
- 37.