Your SlideShare is downloading. ×
  • Like
Jqm20120804 publish
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Jqm20120804 publish

  • 1,550 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,550
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. オープンソースカンファレンス 2012 KyotojQuery Mobile と PhoneGap で スマートフォンアプリ楽々クッキング2012/8/4日本 jQuery Mobile ユーザ会 ( 仮 ) おかもとたかし  
  • 2. 本発表のターゲット PhoneGap , jQuery Mobile は何っていう人 手軽にスマートフォンアプリを開発したい人 HTML/JavaScript は少しは分かる。でも、 Java やま や Java は分かるとして Objective-C や C# なんて勉 強したくない人
  • 3. 自己紹介● Twitter ID: @LightningX● 自称電波系エンジニア● jQuery Mobile スマートフォンアプリ開発を出版
  • 4. スマートフォン開発の悩み
  • 5. スマートフォン開発の悩み● プラットフォームが沢山 ● iPhone 、 Android 、 Windows Phone● 覚える言語も沢山 ● Objective C, Java, C#● API もばらばら
  • 6. 安易な解決策● HTML5 と JavaScript なら今どきのスマホ ならうごく!! HTML5 JavaScript
  • 7. ● でも素の HTML+JavaScript ではスマホアプリ を作るには色々面倒。そこで、 jQuery Mobile PhoneGap で解決!!
  • 8. 【参考】 eclipse.org の survey● モバイルフレームワークとプラットフォームに何を使っていま すか ? http://www.slideshare.net/IanSkerrett/eclipse-survey-2012-report-final
  • 9. 【参考】 mozilla の調査 What libraries do you use to Which frameworks do you use to build mobile web apps/sites? convert apps to native apps? https://hacks.mozilla.org/2012/07/html5-web-applications-and-libraries-survey-first-results/
  • 10. jQuery Mobile 編
  • 11. jQuery Mobile● JavaScript フレームワークで有名な jQuery プ ロジェクトの拡張フレームワーク● スマートフォン対応のフレームワークとして開 発される。 2010 2011 2012 1.0a1 1.0a2 1.0a3 1.0b1 1.0RC1 1.0 1.0.1 1.1.1 (10/26) (11/12) (2/4) (6/20) (9/29) (11/16) (1/26) (7/11) 1.0a4 1.0b2 1.0RC2 1.1.0 (3/31) (8/3) (10/19) (4/13)
  • 12. jQuery Mobile でできること● スマホっぽい画面がそれなりに作れる● OS/ 端末間で大体同じに表示してくれる● スマホ特有のアクションを簡単に使える
  • 13. jQuery Mobile● スポンサー Adobe,Microsoft,Fillament Group,Jive Software Nokia,Research In Motion, RIM● ツールサポート Dreamweaver
  • 14. 【コラム】● jQuery Mobile と PhoneGap のライセンス● jQuery Mobile MIT/GPL デュアルライセンス● PhoneGap Apache License v2.0 → どちらも利用してもアプリのソースコード を公開しなくてもいいので使いやすい
  • 15. スマホっぽい画面がそれなりに● 普通の HTML <h2> ユーザ登録 </h2> <form action="..."> <field> <legend> 名前 :</legend> <input type="text"/><br /> </field> <field> <legend> 名前 ( よみ ):</legend> <input type="text"><br /> </field> <field> <legend> 年齢 :</legend> <select> <option value="10">10 代 </option> ... <option value="80">80 代 </option> </select> </field> <fieldset> <legend> 性別 :</legend> <input type="radio" name="sex" id="sex1" value="male"> <label for="sex1"> 男 </label> <input type="radio" name="sex" id="sex2" value="female"> <label for="sex2"> 女 </label> </fieldset> <input type="submit" value=" 送信 " />
  • 16. スマホっぽい画面がそれなりに● jQuery Mobile<div data-role="page" id="p-jqm"> <div data-role="fieldcontain"> <div data-role="header"> <fieldset data-role="controlgroup" > <h2> ユーザ登録 </h2> <legend> 性別 :</legend> </div> <input type="radio" name="sex" <div data-role="content"> id="sex1" value="male"> <form action="..."> <label for="sex1"> 男 </label> <field> <input type="radio" name="sex" <legend> 名前 :</legend> id="sex2" value="female"> <input type="text"/> <label for="sex2"> 女 </label> </field> </fieldset> <field> </div> <legend> 名前 ( よみ ):</legend> <input type="submit" value=" 送信 " /> <input type="text"> </form> </field> </div> <field> </div> <legend> 年齢 :</legend> <select> <option value="10">10 代 </option> ... <option value="80">80 代 </option> </select> </field>
  • 17. 異なるプラットフォームでだいたい同じ iPhone Android(HTC) Windows Phone
  • 18. デモ しょぼい HTML を jQuery Mobile で綺麗にし てみる
  • 19. 使い方<!DOCTYPE html><html><head>... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/><link rel="stylesheet" href="css/custom.css"/><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>...<script src="js/config.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script><script src="js/custom.js"></script></head><body> <div data-role="page" id="p-top"> <div data-role="header"> <h2> ヘッダタイトル </h2> </div> <div data-role="content"> <h2> 本文 </h2> <p> こんにちは </p> </div> <div data-role="footer"> <h2> フッタです </h2> </div> </div></body></html>
  • 20. ツールバー ● スマートフォンっぽいアプリ が簡単に<div data-role="header"> <a href="" data-rel="back"> 戻る </a> <h2> ユーザ登録 </h2> <a href="" data-icon="edit"> 追加 </a></div><div data-role="footer" > <div data-role="navbar"> <ul> <li><a href="#" data-icon="grid" class="ui-btn-active"> 一覧 </a></li> <li><a href="#" data-icon="search"> 検索 </a></li> <li><a href="#" data-icon="start"> ブックマーク </a></li> <li><a href="#" data-icon="gear" > 設定 </a></li> </ul> </div></div>
  • 21. リスト● リスト ● メニューや一覧表示に利用 ● slide アニメーションと組み合わせ <ul data-role="listview" > <li><a href=".."> ニュース </a></li> <li><a href=“.."> 天気 </a></li> <li><a href="..">TV 番組 </a></li> <li><a href=".."> 特売品 </a></li> ... </ul>
  • 22. スマホ特有のアクションが簡単に● スワイプ ( 右、左、適当 )● タップ・タップホールド● スクロール$(document).on(“swiperight”,”#screen“ function(e){ // 右にスワイプしたときの処理 }); jQuery のふつーのイベントとして扱える
  • 23. ボタンアイコン <button data-icon="xxxx"> ボタン </button>
  • 24. カスタムアイコン CSS でアイコンを定義 .ui-icon-myicon { background-image: url("myicon.png"); } data-icon で定義したアイコンを指定 <button data-icon="myicon">...</button>
  • 25. でもアイコン作るの面倒だし、、、、
  • 26. そんな面倒くさがり屋の人には
  • 27. jQuery Mobile Icon Pack● http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/● 120 個もの豊富なアイコンが利用可能
  • 28. jQuery Mobile 拡張イベント イベント名 説明 orientation 端末の方向変更 vmousedown 画面を押下 vmouseup 画面から指を離す vmousemove 画面上を指が移動した軌跡 vmouseover 領域に指が入った場所 tap タップ taphold 長押し swipe スワイプ swipeleft 右から左へスワイプ swiperight 左から右へスワイプ scrollstart スクロール開始 scrollstop スクロール停止
  • 29. イベントの注意● マウス系のイベントは正しく動作しない● Android は click イベントの反応が遅い。 cclick を利用し た方がレスポンスの良い UI が作れる。 「 JQuery Mobile スマートフォンアプリ開発サンプル http://okamototk.github.com/jqmbook-sample 10 章イベント処理 > マウスイベントの比較 で jQuery Mobile の仮想マウスイベントと通常のマウスイベントの 比較ができるのでスマートフォンでアクセスして試してみるとよい
  • 30. 画面遷移アニメーション 画面遷移を普通のブラウザの画面遷移ではな く、アニメーションで行うことができる。 ・リンクで使う <a href="index.html" data-transition="slide">Ill pop</a> ・ JavaScript から使う $.mobile.changePage("index.html", {transition: "slide"});
  • 31. JQM でできること● 一覧表示やメニュー、フォーム入力の画面● 画面遷移やポップアップ● 縦方向のスクロール制御● 位置情報を使ったアプリ● カメラを使ったアプリ (Android 2.2 以上、 iPhone は picup 使えば )
  • 32. JQM でできないこと● ゲーム画面のような自由なレンダリングを行う 画面 → 登録・検索アプリ、 twitter のような Web アプリ的なものに向いている
  • 33. JQuery Mobile が重い場合は ?● 通信速度が遅いため重い● モバイル回線なのでブチブチ切れる● そもそも端末が遅い ( 特に Android)
  • 34. パフォーマンスチューニング● CDN を利用して jQuery / jQuery Mobile を利用 <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" >● HTML5 アプリケーションキャッシュを利用● DOM キャッシュ● 遅延ロードを利用 ● リストを Ajax+Collapsible で展開● プリフェッチ● ファイルサイズの削減 ● google closure,YUI Compressor ● Apache mod_deflate参考 : パフォーマンスチューニングのサンプル http://okamototk.github.com/jqmbook-sample/19_PerformanceTuning/index.html
  • 35. ● PhoneGap 編
  • 36. Web アプリの問題● HTML+JavaScript の表現力が高まったと言って も、 Apple Store や Google Play でアプリ売って儲 けれない、、、● カメラや加速度センサーはデバイス毎に Web ブラウ ザのサポート状況が違って使えたり使えなかったりす るし、、、● そもそも、電話帳とかと連携したり、バイブ機能を 使ったりできないし、、、
  • 37. PhoneGap の特徴● スマートフォンネイティブのアプリが作れる (AppStore 、 Google Play へ登録可 )● Web ブラウザだけじゃ利用できない機能が HTML/JavaScript で使える● プラグインにより機能を拡張可
  • 38. 電話帳 コンパスメディア処理 ファイル イベント処理 加速度 Web SQL Web Storage 通知 www.icondrawer.com ストレージ
  • 39. jQuery Mobile と PhoneGap の住み分け ・ユーザインタフェース ・ Web ブラウザでは利用 できないデバイスの利用 ・スマートフォンアプリとし てビルド
  • 40. アーキテクチャ アプリケーション (HTML/JavaScript)開発者が実装する部分 プラグイン プラグイン プラグイン (Objective-C) (Java) (C# など ) Xcode Eclipse Visual Studio開発ツール テンプレート プラグイン ∞ テンプレート PhoneGap API (JavaScript)PhoneGapFramework PhoneGapLib DroidGap WP7GapClassLib iOS Android Windows Phone
  • 41. API 説明Acceleromer 加速度センサーの値取得Camera カメラで写真を取得Capture 写真、音声、ビデオなどの取得Compass コンパスの値取得Connection ネットワークの状態を取得Contacts 電話帳を操作Device デバイス情報を取得Events キー操作、バッテリー残量の低下、ネットワークの遮断などの イベントFile ファイル操作、転送などの処理Geolocation 位置情報取得Media 音声の録音、再生Notification バイブ、ビープ音やダイアログでの通知などStorage Web SQL Database, Web Storage の機能
  • 42. PhoneGap の使用例 1(Android) ①PhoneGap プロジェクト作成 ③AndroidManifest.xml の この行を削除 ②AndroidManifest.xml を編集
  • 43. PhoneGap の使用例 2(Android) assets/www フォルダ下に HTML/JS/CSS などを作成
  • 44. PhoneGap の情報収集の注意● Nitobi->Adobe 買収 ->Apache Project へ寄贈● 名前 : ● PhoneGap ● Apache Callback ● Apache Cordova と変わってきた。PhoneGap で検索して知りたい情報が出てこないときは、Apache Callback や Cordova で検索すると出てくることもある。( ただし、古い情報で最新版には当てはまらないこともあるので注意 ) Cordova
  • 45. PhoneGap と Cordova の関係 Safari PhoneGapレンダリングエンジン 将来的には + α で製品化+JavaScript を Apache に入れれOSS 化 ないものを追加 WebKit Cordova
  • 46. ● PhoneGap の使い方
  • 47. おまじないPhoneGapの準備が完了したらdevicreadyイベントが発生する。Devicereadyイベント発生後、アプリケーションの初期化処理を行う。deviceReady = false;document.addEventListener("deviceready", function(){ deviceReady = true; // 初期化処理} , false); window.setTimeout(function() { if (!deviceReady) {   // PhoneGap初期化失敗処理 }}, 5000);
  • 48. JQuery Mobileと組み合わせる場合、最初の画面のpageinitで初期化すると良い。$(document).on("pageinit","#p-page",function(e){  deviceReady = false;  document.addEventListener("deviceready", function(){   deviceReady = true;   // 初期化処理  } , false);  ....});
  • 49. Camera API デバイスによってカメラ操作の対応は異なる● Android ~ 2.3 フォルダからのアップロードは <input type="file"> で可能。カメラの直接操作は不可● Android 3.0+ <input type="file"> でカメラからアップロード可能● iOS/Windows Phone/Android -2.1 そもそもできない
  • 50. Camera API navigator.camera.getPicture( function(url) { プラットフォームを問わず img = $("#photoframe"); カメラ操作が可能に img.css("visibility","visible"); img.css("display" ,"block"); img.attr("src",url); }, function(e) { // エラー及びキャンセル }, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType : navigator.camera.PictureSourceType.CAMERA} ); ... <img style="visibility:hidden;display:none;" id="photoframe" src="" />
  • 51. File API● ストレージのファイルへのアクセス・アップ ロード localUri = "http://photoservice.example.com/upload.php"; var opts = new FileUploadOptions(); opts.fileKey="photo"; filename = fileEntry.name; opts.fileName= "upload.jpg"; opts.mimeType="image/jpeg"; サーバ側のコード ( 通常の POST のマルチパート処理でお k) var ft = new FileTransfer(); <?php require_once HTTP.php; ft.upload(localUri, UPLOADURL, function(r){ if (is_uploaded_file($_FILES["photo"]["tmp_name"])) { // アップロード成功 $filename = images/ . $_FILES[photo][name]; $filename = mb_convert_encoding($filename, "SJIS", "AUTO"); }, function(e){ if (move_uploaded_file($_FILES["photo"]["tmp_name"], $filename)) { // アップロード失敗 chmod("images/" . $_FILES["photo"]["name"], 0644); }, opts); echo $_FILES["photo"]["name"] . " をアップロードしました。 "; HTTP::redirect("index.html"); } else { echo " ファイルをアップロード "; } } else { echo " ファイルが選択されていません。 "; }
  • 52. Acceleromer API● 加速度センサーの値はデバイス毎に方向が異な z z る。 + - y - y +- + + - x x - + - + iOS(1G=9.8) Android(1G=9.8) Windows Phone(1G=1.0) (Android 3.0 以上からブラウザで取得可 ) ブラウザで取得できたりできなかったりする
  • 53. Acceleromer API z - - y wid=navigator.accelerometer.watchAcceleration( function(e){ // e.x: 水平方向の加速度 // e.y: 垂直方向の加速度 + - x // e.z : 奥方向の加速度 }, function(e){ // エラー処理 }, {frequency: 500 // 取得間隔 (ms)} ); + + 1G=9.8
  • 54. Notification API ユーザに通知を行う API● バイブレーション navigator.notification.vibrate(500);● ビープ音 navigator.notification.beep(1);● alert/confirm Windows Phone では、 PhoneGap を 利用すると alert/confirm が利用 navigator.notification.alert( できない " 警告メッセージ ", →Notification API の alerm/confirm を利用 function(){ // OK ボタンが押されたときの処理 }, " 警告ダイアログ ", "OK");
  • 55. Event● ボタンの押下、レジューム、サスペンド、ネッ トワークの切断・復帰など、ブラウザ単独では 利用できないイベントを利用可能 例: $(document).on("backbutton", function() { // 戻るボタン押下時の処理 });
  • 56. Event 一覧 イベント 説明 backbutton 戻るボダンが押された menubutton メニューボタンが押された searchbutton 検索ボタンが押された pause 待機状態になった resume 待機状態から復帰した offline オンラインからオフライン状態へ変更 online オフライン状態からオンライン状態へ変更 batterycritical バッテリーの残りが少なくなった
  • 57. PhoneGap Builder● なんか、プラットフォーム毎にビルドするのめ んどくさいんですけど、、、● そういう人には PhoneGap Builder 。 GitHub などの公開 Git リポジトリにアプリをアップし ておけば、リポジトリからソースを取得、ビル ドし、パッケージを作成してくれる !!
  • 58. JQuery Mobile と PhoneGap と ユカイな仲間たち ネイティブ アプリ作成 PhotoSwipe jqPlot XCodeその他ライブラリ *.app Mobile jQuery Validation Bookmark Bubble iPhone アプリ ソーシャル Facebook API f Twitter API メディア API PhoneGap Eclipse jQuery Mobile *.apk HTML5/JavaScript Android アプリ Offline Web Device Motion Geologication PhoneGap API Application API API Visual Studio *.xap iOS(iPhone/iPad) Android Windows Phone Picup Windows Phone アプリ
  • 59. 書籍のご紹介 ・ PhoneGap を利用した HTML/JavaScript アプリのネイティブ 化 (iPhone/Android/Windows Phone) ・ jQuery Validator と組み合わせた 入力値チェック ・ jqplot によるグラフ ・画像管理アプリ ・ twitter 検索アプリ ・加速度センサーを活用した旗取り ゲーム ・ Geolocation API を利用したランニン グの開始・終了地点と距離の登録ア プリ
  • 60. まとめ● JQuery Mobile+PhoneGap で   楽々スマートフォン開発● Web ブラウザで動かすので制限もある ● 要件に合わないと思ったら諦めることも重要 ● 要件に合えば、格段の生産性を見込める● jQuery Mobile ユーザ会 ( 仮 ) で一緒に何かや りましょう!!