Uploaded byMonaca
5,626 views
Phone gap＋javascriptスマホアプリ開発（入門編）
2013/04/20 スマートフォンアプリ開発 勉強会 @ 福岡 での講演資料http://atnd.org/events/37573#comments
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+PGEclipse、XCode Monaca Platform Build Webプロフェッショナル向ネイティブ開発者向け 初心者、入門者向け 無料！ け App Storeからデバッガーをシミュレーターもしくは実 PhoneGap Buildを使うと実 ダウンロードして実機で確機で確認 機にインストール可能 認、ビルド機能も搭載 対応製品＋PGBuildアカウン各OSのSDKをローカルにイ Webサイトからサインアッ トがあれば簡単に開発できンストールする プするだけで開発できる る
- 23.
- 24.
- 25.用意するもの（Android版） Android SDKをインストールしたPCAndroid端末（もしくはエミュレータ） 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.