More Related Content
Similar to Jqm20120210 (20)
Jqm20120210
- 3. 今日のマイルストン
• jqmの便利なところ
• jqmはどんな仕組みなのか
• jqmの事例をみてみる
• jqmの課題とこれから
• jqmとPhoneGapとを一緒に使ってみる
3
- 4. 今日のマイルストン
• jqmの便利なところ
• jqmはどんな仕組みなのか
• jqmの事例をみてみる
• jqmの課題とこれから
• jqmとPhoneGapとを一緒に使ってみる
4
- 5. jqmの便利なところ
• タグ(アトリビュート)
– モバイルに合わせたコンポーネントがそろっている
– 使用するタグ自体はhtmlタグだが、data‐~を使って
指定することでモバイル用の見た目にできる
• CSS
– テーマ(スウォッチ)が5つ用意されている
– 独自にテーマを作ることも可能
• スクリプト
– ローカライズ
– 戻るボタン自動表示
– 他の前処理
5
- 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
- 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
- 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
- 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
- 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
- 39. 今日のマイルストン
• jqmの便利なところ
• jqmはどんな仕組みなのか
• jqmの事例をみてみる
• jqmの課題とこれから
• jqmとPhoneGapとを一緒に使ってみる
39
- 42. プロジェクトをつくる
• Xcodeを立ち上げてFile>New>New Projectを選択
• ダイアログでiOS>Applicationを選択
• PhoneGap‐based Applicationのテンプレートを選択
• プロジェクトに名前を付ける
• (あとは道なりに)
42
- 45. 開発の準備
選択されているか
確認する
フォルダをドラッグ
アンドドロップする
45
- 47. ファイルの配置
コンパイルするとフォル
ダの中身がコピーされ、
PhoneGapのjsファイル
も配置される
47
- 48. ホワイトリスト
• アプリ内から外部サイトへアクセスする場合はホワ
イトリストでドメイン等を許可しておく必要がある
• アウトプットを確認してみて
ERROR whitelist rejection
があったら、次ページの様にPhoneGap.plistの
ExternalHostsに許可すべきドメインを加える
• jsを外部から意図的にロードしていなくても、使って
いるライブラリが外部通信する事もあるので注意す
る必要がある
48
- 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