Uploaded on

 

  • 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
2,277
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
0
Likes
2

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. 始めてのjqmクラスメソッド 開発部 ともだつばさ
  • 2. このセッションの目的誰が なんとなくjqmの事は分かったけど、もう少し知りた い人何を 実際にアプリを作るのに必要な話どれくらい 知らなかった事の分だけどうする 知って持ち帰る 2
  • 3. 今日のマイルストン• jqmの便利なところ• jqmはどんな仕組みなのか• jqmの事例をみてみる• jqmの課題とこれから• jqmとPhoneGapとを一緒に使ってみる 3
  • 4. 今日のマイルストン• jqmの便利なところ• jqmはどんな仕組みなのか• jqmの事例をみてみる• jqmの課題とこれから• jqmとPhoneGapとを一緒に使ってみる 4
  • 5. jqmの便利なところ• タグ(アトリビュート) – モバイルに合わせたコンポーネントがそろっている – 使用するタグ自体はhtmlタグだが、data‐~を使って 指定することでモバイル用の見た目にできる• CSS – テーマ(スウォッチ)が5つ用意されている – 独自にテーマを作ることも可能• スクリプト – ローカライズ – 戻るボタン自動表示 – 他の前処理 5
  • 6. おさらい• jqmでは、html5のdata‐~属性を使って、独自の機 能を提供している (*この事実から必然的にjqmを利用するならhtml5 宣言で書く必要がある)• よく使われるのは data‐role、data‐theme、data‐icon、、、など• 今回はアイコン/ボタン類とリスト表示にしぼって紹 介します 6
  • 7. アイコンいろいろdata‐iconで指定出来るアイコンは18個矢印系:arrow‐l,arrow‐r,arrow‐u,arrow‐d,演算子系:delete,plus,minus,アクション系:check,gear,refresh,forword,back,情報系:grid,star,alert,info,home,searchとりあえずアプリ作るのには十分そうな量がある 7
  • 8. ボタンいろいろdata‐iconposでアイコンの位置を変えられる・left,right,top,buttom,notext・デフォルトはleft・notextを指定した場合は アイコンだけ表示される<a href="#" data‐role="button" data‐icon="check“data‐iconpos="left">left</a><a href="#" data‐role="button" data‐icon="check“data‐iconpos="right">right</a><a href="#" data‐role="button" data‐icon="check“data‐iconpos="top">top</a><a href="#" data‐role="button" data‐icon="check“data‐iconpos="bottom">bottom</a><a href="#" data‐role="button" data‐icon="check“data‐iconpos="notext">notext</a> 8
  • 9. ボタンいろいろボタンは配置するだけだと画面の横幅いっぱいに表示される。インラインボタンにすると適した大きさになる。data‐inline=“true”を指定する <a href="#" data‐role="button" data‐icon="delete" data‐ inline="true">close</a> <a href="#" data‐role="button" data‐icon="check" data‐ inline="true">check</a> 9
  • 10. ボタンいろいろdata‐role=“controlgroup”でくくるとボタンがグループされるdata‐type=“horizontal”で横並び出来る <div data‐role=“controlgroup”> <a href="index.html" data‐role="button">Yes</a> <a href="index.html" data‐role="button">No</a> <a href="index.html" data‐role="button">Maybe</a> </div> 10
  • 11. リストいろいろul,liなどの要素とdata‐role="listview"を用いる <ul data‐role=“listview” data‐theme=“g”> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul> 11
  • 12. リストいろいろliの中に2つのa要素を持つとリストが分割されるdata‐split‐iconで右側アイコンを変えられる <li><a href="sample4.html">Acura</a> <a href="">acura</a></li> 12
  • 13. リストいろいろdata‐role=“list‐divider”を使う事でインデックスを表示出来る <li data‐role="list‐divider">A</li> <li><a href="sample4.html">Acura</a> <a href="">acura</a></li> 13
  • 14. リストいろいろ<span class=“ui‐li‐count”>{数}</span>でカウントバブルを表示出来る <li data‐role="list‐divider">A</li> <li><a href="sample4.html">Acura<span class="ui‐li‐count">12</span> </a><a href="">acura</a></li> 14
  • 15. CSS(テーマ、スウォッチ)• jqmではa~eまでの5つのテーマ(スウォッチ)が用意 されていて、テーマを使うにはdata‐theme=“{a~e}” で指定する• f~zに独自のテーマを割り当てる事が出来る• ただし、設定出来る項目は膨大なので1から作るの は心が折れる... 既存のa~eをベースにして作るか、「テーマロー ラー」を使う http://jquerymobile.com/themeroller/ 15
  • 16. CSS(テーマ、スウォッチ)cssの中を覗くと/*Swatches*/と始まるセクションの中に各A~Eのテーマの定義があるのでそれらをコピペして新しいFを作くればOK 16
  • 17. CSS(テーマ、スウォッチ)テーマローラーでは、左ペインにあるインスペクタを使って各項目の値を設定したり、右ペイン上部にあるカラーボックスを各UI要素にドラッグアンドドロップして色を設定する事も出来る 17
  • 18. スクリプトで一括設定• ローカライズや共通設定は起動時に一括でやってし まう• jqmが実行されると、document オブジェクトの mobileinit イベントが呼び出されるのでその中で処 理をする $(document).bind(“mobileinit”, function(){ // 初期値の上書き });• htmlでのタグの順序は、次の通り <script src=“jquery.js”></script> <script src=“custom‐scripting.js”></script> <script src=“jquery‐mobile.js”></script> 18
  • 19. スクリプトで一括設定jquery本体の読み込みと <script type="text/javascript" jqmの読み込みの間に右 src="http://code.jquery.com/jquery‐1.6.4.min.js"></script> <script type="text/javascript">記のスクリプトを走らせる $(document).bind("mobileinit", function() { $.mobile.loadingMessage・ローディング中のメッ = 読み込み中です;セージ $.mobile.pageLoadErrorMessage = 読み込みに失敗しました;・読み込み失敗のメッ $.mobile.dialog.prototype.options.closeBtnTextセージ = 閉じる;・ダイアログの閉じるボタ $.mobile.selectmenu.prototype.options.closeTextンのラベル = 閉じる; $.mobile.listview.prototype.options.filterPlaceholder・セレクトメニューの閉じ = 検索ワードを入力してください;るボタンのラベル $.mobile.page.prototype.options.backBtnText・検索フィールドのプレイ = 戻る;スホルダー }); </script>・戻るボタンのラベル <script type="text/javascript" の6つの設定が共通で可 src="http://code.jquery.com/mobile/1.0/jquery.mobile‐能 1.0.min.js"></script> 19
  • 20. スクリプトで一括設定「戻るボタン」を全画面で <script type="text/javascript" 出したい場合は、全ての src="http://code.jquery.com/jquery‐ページにアトリビュートを 1.6.4.min.js"></script> <script type="text/javascript">付けていると面倒くさい $(document).bind("mobileinit", function() {ので、スクリプトで一括で $.mobile.page.prototype.options.addBackBtn = 設定をすると便利 true; }); </script> <script type="text/javascript"  src="http://code.jquery.com/mobile/1.0/jquery.mobile‐ 1.0.min.js"></script> 20
  • 21. スクリプトで一括設定設定出来る項目は他にもい <script type="text/javascript" くつかある src="http://code.jquery.com/jquery‐ 1.6.4.min.js"></script> <script type="text/javascript">ajax制御には $(document).bind("mobileinit", function() {$.mobile.ajaxLinksEnabled //viewportContentの設定$.mobile.ajaxFormsEnabled $.mobile.metaViewportContent = "width=device‐あるが、非推奨 width, minimum‐scale=1, maximum‐scale=1"; //ページトランジション他の要素については $.mobile.defaultPageTransition = "slidedown";http://dev.screw‐ //ダイアログ表示時のトランジションaxis.com/doc/jquery_mobile $.mobile.defaultDialogTransition = "slidedown";/api/configuring_defaults/ //ajax通信するか $.mobile.ajaxEnabled = false;を参照 }); </script> <script type="text/javascript"  src="http://code.jquery.com/mobile/1.0/jquery.mobile‐ 1.0.min.js"></script> 21
  • 22. 今日のマイルストン• jqmの便利なところ• jqmはどんな仕組みなのか• jqmの事例をみてみる• jqmの課題とこれから• jqmとPhoneGapとを一緒に使ってみる 22
  • 23. おさらい• htmlの中に<div data‐content=“page”>として記述す れば、jqmのフレームワークが勝手にモバイル用に 変換、表示してくれる• 1つのhtmlの中にpageを複数作る事が出来る• 遷移はid名を<a>のhrefに指定すれば良い 23
  • 24. pageを分ける多くのjqm解説サイトだとコーディング例が1つのhtmlの中に複数のpageを作るように書いてあるけど、実際どうするのが良いのだろうか?• 状況によりhtmlを分ける:1つのhtmlの中にpageを 何個も作っていたらサイズが大きくなる• 次の様な例を考えてみる 画面遷移 ポップアップ 24
  • 25. pageを分けるhtmlをひとまず分けてみる<script type="text/javascript">   元のhtml <div data‐role="page" id=""> test1.html$(function(){$("#popupBtn").click(function(){alert( <div data‐role="header"><h2>test</h2></div>“popupBtnが押された");});});</script> <div data‐role="content">‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐‐ <a href="./test2.html" data‐role="button" data‐<div data‐role="page" id=“page1"> transition="slide">test2</a> <div data‐role="header"><h2>test</h2></div> </div> <div data‐role="content"> <div data‐role="footer"><h4>test</h4></div> <a href=“#page2" data‐role="button" data‐ </div>transition="slide">test2</a> </div> <script type="text/javascript">  <div data‐role="footer"><h4>test</h4></div> test2.html $(function(){$("#popupBtn").click(function(){alert(“pop</div> upBtnが押された");});});</script><div data‐role="page" id=“page2"> ‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐‐ <div data‐role="header"><h2>test2</h2></div> <div data‐role="page" id=""> <div data‐role="content"> <div data‐role="header"><h2>test2</h2></div> <p>test2</p> <div data‐role="content"> <a href="#" data‐role="button"  <p>test2</p>id=“popupBtn">popup</a> <a href="#" data‐role="button"  </div> id="testBtn">popip</a> <div data‐role="footer"><h4>test2</h4></div> </div></div> <div data‐role="footer"><h4>test2</h4></div></div> 25
  • 26. pageを分ける分けたものを実行するとどうなるのか• 遷移後、ボタンを押下してもアラート窓が出ない どうも、スクリプトが動いていないらしい そこでブラウザのデバッグ機能を使ってコードの挙 動を覗いてみる もとのコードはそ のまま test2.htmlのpage 部分だけが挿入さ れる 26
  • 27. pageを分ける• <a>タグのhrefで他のhtmlのURLを指定した場合、 jqmはajaxロードを行う• その際にロード元htmlにロードされるのは、被ロード htmlのdata‐contet=“page”の部分だけ• ヘッダ部分は読み込まれないので、当然そこに書い てあるスクリプトは、実際に使われていても読み込 まれない• 結果、スクリプトが動かない 27
  • 28. pageを分けるということで、選択肢は – 無理矢理スクリプトを読み込ませる様にする – ajaxロードを回避するの2択どちらを選択するかは、設計等々の条件による 28
  • 29. pageを分ける無理矢理スクリプトを読み込ませる様にするdata‐contet=“page”内のどこかにscriptタグを埋めれば良い(けど、、、美しくない) <div data‐role="page" id=""> <script> $(function(){ $("#testBtn").click(function(){ alert(“textBtnが押された"); }); }); </script> <div data‐role="header"><h2>header</h2></div> <div data‐role="content"> 29
  • 30. pageを分けるajaxロードを回避する部分的にajaxさせたくない場合は link=“external”か、data‐ajax=“false”を指定しておく全体的にajaxさせたくない場合はスクリプトのロード時に jQuery(document).bind("mobileinit",function() {jQuery.mobile.ajaxEnabled =false;});を使う 30
  • 31. 今日のマイルストン• jqmの便利なところ• jqmはどんな仕組みなのか• jqmの事例をみてみる• jqmの課題とこれから• jqmとPhoneGapとを一緒に使ってみる 31
  • 32. 事例を見てみる• 「jQuery Mobile Gallery」 (http://www.jqmgallery.com/)に山程事例があるの でこれを参考にしてみる• ただし、その実装方法が良いかどうかはまた別の話• β版とかα版もあるので注意する 32
  • 33. 事例を見てみるサイト 特徴Felt Bicycles ・リスト表示を多用 ・jqmのコンポーネント/スキンをほぼそのまま利用Stedesign ・jqmの良いところを全て使いましたといった感じのサイト ・1つのhtmlの中に複数のpageを定義している(おそらくほぼ全て)Century 21 ・html内に複数のpageを定義するのと、外部htmlへリンクするの とを使い分けているLetters to Amanda ・デザインが特徴的なサイト15VISION ・画面サイズに連動させて画面レイアウト変更 ・戻るボタンはあるけど、jqmの機能は使っていない 33
  • 34. 事例を見て分かることpageはどう分けるか ・静的なコンテンツだけであればhtml内に複数pageを定義する のはあり(ただし、htmlのサイズを気にする必要はあり) ・動的なコンテンツの場合は別のhtmlにせざるを得ない ・ページを分ける場合にはjavascriptの処理に気をつける必要が あるjqm標準の部品はどうするか ・テーマはカスタムしている事はあるが、積極的に利用している ・意外に標準テーマそのままの場合も多い ・UIが揃っている方が良いので、積極的に独自に実装する必要 はない(用意された部品を効果的に使うからこそF/Wの意味が ある)PCサイトとモバイルサイト ・jqmの事例として上がっているサイトは、PC版とモバイル版は分をどうするか けていないサイトが多い ・分ける必要がないならそのままでも ・スクリーンサイズなどで見た目を変えている「戻る」ボタン ・戻るボタンは必ずしもやりたいことは実現できない ・戻るボタンを表示していないサイトの方が多い ・戻るボタンを表示する場合でも独自に実装している事が多い 34
  • 35. 今日のマイルストン• jqmの便利なところ• jqmはどんな仕組みなのか• jqmの事例をみてみる• jqmの課題とこれから• jqmとPhoneGapとを一緒に使ってみる 35
  • 36. jqmの不便なところ冗長な記述 data‐themeをはじめ、どのタグでも同じ記述をするだろうと思 われる部分でも、必要なタグ全てに記述を入れないといけな い事が多い。いじろうと思うとそれなり cssの量もかなりあるので、覚える/探すのが大変に大変 テーマローラーを利用すれば覚えなくてもテーマが作成可能 (使い勝手は微妙??) ThemeRoller for jQuery Mobile http://jquerymobile.com/themeroller/不安定なヘッダフッタの ヘッダやフッタの固定や表示/非表示の機能、特にフッタの固固定や表示/非表示機能 定は表示がチカチカして不安定に見える 適する場面があれば便利 次期バージョンでなんとかなるらしい便利なような便利じゃな 戻るボタンいような機能達 ajaxページ遷移 固定ヘッダフッタ重さ もっさり感は否めない 36
  • 37. jqmの便利なところ開発は早く出来る 用意してくれている部品をうまいこと使って構築すれば、それ なりの早さで実装可能。あまり端末の個体差を考えないで良 いのはやはりありがたい。モックを作るには便利 早く作れるので、さっくりといくつかのモックを作って比較しな がらプロジェクトを進めるという事は出来る。 それをそのままプロジェクトで使おうというマインドはやめた 方が良い。(一般論として)デザイナーとの協業には あくまでもhtmlなので、デザイナーとデベロッパーとが一つのもってこい ファイルを編集可能。(プログラマ寄りのF/Wでは難しい)ユーザー(とユーザー予 jQueryのユーザーがそもそも多いのでそのままjQuery備軍)の多さ Mobileを使ってみようと思う人は多いはず(その結果良い進 化を実現するという訳でもないけど)まだまだ進化途中のフレームワークなので、欠点を把握しつつ、使える範囲で使っていくのが良さそう 37
  • 38. 次期ver.でどうなるか春までに、1.0.1(済)→1.1→1.2とバージョンアップ予定1.0.1:公開済み メンテナンスリリース1.1:2月中旬/下旬 AMDサポート:Asynchronus Module Definition(非同期モ予定 ジュール定義) 実行時ダウンロードに対応→初期ロードが軽くなる TrueFixedToolbars:CSSベースで完全に固定された表示に Ajaxによるページ遷移をスムーズに素早くする1.2:1.1の1ヶ月後く 新しいウィジェットの追加予定らい(3月、4月) 38
  • 39. 今日のマイルストン• jqmの便利なところ• jqmはどんな仕組みなのか• jqmの事例をみてみる• jqmの課題とこれから• jqmとPhoneGapとを一緒に使ってみる 39
  • 40. PhoneGapって?• PhoneGapは、カナダのnitobi社が開発した、 HTML+JavaScriptでiPhone/Androidなどのネイティブ アプリを開発する為のフレームワーク• 2011/10にAdobe社により買収• 最新バージョンは1.3.0(2012/01/31現在)• jqmはPhoneGapをサポートしている 40
  • 41. 環境の構築• http://phonegap.com/からphonegapのSDKをダウン ロードする(最新は1.3.0ですが本セッションでは1.2.0 を使用します)• 本セッションではiOSアプリの開発を試してみる• ダウンロードしたzipを解凍し、iOS>PhoneGap‐ 1.2.0.dmgをマウントする• PhoneGap‐1.2.0.pkgを実行してインストール 41
  • 42. プロジェクトをつくる• Xcodeを立ち上げてFile>New>New Projectを選択• ダイアログでiOS>Applicationを選択• PhoneGap‐based Applicationのテンプレートを選択• プロジェクトに名前を付ける• (あとは道なりに) 42
  • 43. プロジェクトをつくる テンプレートの選択 名前を付けると プロジェクトのできあがり 43
  • 44. 開発の準備• これまでの操作でプロジェクトが出来上がっている はず• プロジェクト外にwwwフォルダを作成して、そのフォ ルダ内にindex.html(と必要なファイル群)を配置• 当該フォルダをプロジェクト内にドラッグアンドドロッ プしてリンクを作る 44
  • 45. 開発の準備 選択されているか 確認するフォルダをドラッグアンドドロップする 45
  • 46. ファイルの配置• 用意したindex.htmlに実装していく• 外部スクリプトやhtmlは合理的に• PhoneGapが用意しているAPIを使うには <script src=“./phonegap‐1.2.0.js”></script> をロードする必要あり• 一度コンパイルを掛けると、該当ファイルがプロジェ クト下のwwwにコピーされる• その時に、phonegap‐1.2.0.jsもコピーされる 46
  • 47. ファイルの配置 コンパイルするとフォル ダの中身がコピーされ、 PhoneGapのjsファイル も配置される 47
  • 48. ホワイトリスト• アプリ内から外部サイトへアクセスする場合はホワ イトリストでドメイン等を許可しておく必要がある• アウトプットを確認してみて ERROR whitelist rejection があったら、次ページの様にPhoneGap.plistの ExternalHostsに許可すべきドメインを加える• jsを外部から意図的にロードしていなくても、使って いるライブラリが外部通信する事もあるので注意す る必要がある 48
  • 49. ホワイトリスト ここに注意!!ドメインを追加する 49
  • 50. カメラロールから写真を取ってみる• PhoneGapが用意しているAPIについては http://docs.phonegap.com/en/{各バージョン} /index.htmlに詳しくあります• 写真データを取得するには navigator.camera.getPicture( cameraSuccess,  cameraError, [ cameraOptions ] ); を利用する 50
  • 51. パラメタcameraSuccess[Function] データを取得出来た時のコールバック関数cameraError[Function] データの取得に失敗した時のコールバック関数cameraOption[Object] データ取得に関するオプション quality:Number[0‐100] destinationType:Number[0:DATA_URL,1:FILE_URI] sourceType: Number[0:PHOTOLIBRARY,1:CAMERA,2:SAVEDPHOTOA Lbum] allowEdit:Boolean EncodingType:Number [0:JPEG,1:PNG] targetWidth:Number targetHeight:Number MediaType:Number [0:PICTURE,1:VIDEO,2:ALLMEDIA] 51
  • 52. ソース<body> <script type="text/javascript" charset="utf‐8"> <div data‐role="page"> $(function(){ <div data‐role="header"> $("#selectPhotoBtn").click(function(){ <h1>PhotoApp</h1> navigator.camera.getPicture(function( </div> imageURI){ <div data‐role="content"> $("#selectedPhoto").attr("src", imageURI); <img id="selectedPhoto" width="600"  }, function(msg){height="450"> alert("Error : " + msg); </div> }, { <div data‐role="footer" class="ui‐bar"  quality:50,data‐position="fixed"> <div data‐role="navbar"> destinationType:Camera.DestinationType.FILE_URI, <a href="#" id="selectPhotoBtn">Select Photo</a> sourceType:Camera.PictureSourceType.SAVEDPHOT </div> OALBUM </div> }); </div> });</body> }); </script> html js 52
  • 53. 実行結果 カメラロールに 入っている画像ボタン押下 画像選択のポップアップ 選択画像が表示される 53
  • 54. まとめ• HTMLとJavaScriptが分かっていればネイティブアプリ が作れるというのはうれしい• ネイティブアプリと同じ操作感を出すのには苦労す る(というかムリ) ネイティブとは違う操作感になることを許容できるか• 標準で用意されているプラグインでは足らず独自に プラグインを作らないとアプリ作りは難しい(逆に そっちの方のウェイトが大きいかも)• デバッグが大変• 既にweb版のアプリがあってそれに端末固有の機 能を使いたいからネイティブアプリ化するというのは ありかも 54
  • 55. おわり ご静聴ありがとうございました。 55