サイト全体ではFF15の記事ばっかり増えておりますが、FF15ばっかりしているわけではございません。
ちょっと作りたいスマホアプリがあるので色々勉強しております。今からスマホアプリ作り始めるってなるとネイティブよりハイブリッドの方が学習コスト低いだろ、ってことでjQuery MobileとPHPを一から勉強しています。
jQuery Mobileを学習するに際して買ってみた参考書がjQuery Mobile スマートフォンアプリ開発というもの。プログラミング学習をRPGになぞらえたかのような軽快な文面と、基礎からメジャーなAPIやPhoneGapとの連携方法まで記述されているカバー率の高さに、一目惚れして買いました。
基本的には楽しくさくさく学習させていただいているんですけれども、いかんせん発行が2012年なんですね。扱われているjQuery Mobileのバージョンが1.1.0でして、そのままでは使えない部分があったので、メモしていこうと思います。新しい発見があったら都度更新していきます。
スポンサーリンク
1.ベースのバージョン
現在私が利用しているjQuery & jQuery Mobileのバージョンは以下のとおりです。
- jQuery : 1.11.1
- jQuery Mobile : 1.4.5
現時点(2016年12月)で安定版の最新です。
前述したjQuery Mobile スマートフォンアプリ開発のベースとなっているバージョンは以下のとおりです。
- jQuery : 1.7.1
- jQuery Mobile : 1.1.0
うーん、4年経つとこうも変わるんですね。最新技術の恐ろしいところです。
一応、動作不具合に出会って参考書とバージョンを揃えてみましたが、iOS 10.2とAndroid 5.1ではうまく動かなかったです。この分野に手を出すということは、この陳腐化の速度についていかなければならないのね…と戦々恐々だったりしますｗ
2.mobileinitイベントについて
mobileinitイベントはjQuery Mobileそのものが読み込まれる際のイベントです。読み込むタイミングとしてはjQueryの読み込みとjQuery Mobileの読み込みの間。初期化のためのJSファイルがjs/config.jsだとすれば、以下の順番です。
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/config.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
mobileinitイベントではアプリ全体の初期設定が可能です。検索ボックスのプレースホルダを一括設定するとか、ローディングメッセージを変えるとか。日本人が日本人向けにアプリを作る場合、ローカライズという観点でけっこう使うんじゃないかと思います。
記述方法は以下の通りです。
$(document).on("mobileinit", function(){
//ここに処理を記述
});
では1.1.0では動いて1.4.5では動かなかった設定コードを書いていきます。
スポンサーリンク
3.戻るボタン関連の初期設定
jQuery Mobileを利用すると、「戻る」ボタンがいとも簡単に作れます。HTML自体にインラインで設定するならこんな感じ。
<div data-role="header" data-add-back-btn="true" data-back-btn-text="戻る">
data-roleのヘッダ要素の属性として指定が可能です。参考書ではページ要素に指定していましたが、私の環境ではヘッダ要素でないと動きませんでした。これも仕様変更かもしれません。
んで、これを全ページに表示したい！とか、表示したときは一律のラベルにしたい！（デフォルトでは「Back」です）とかいうために、mobileinitイベントで初期設定を行うことができるようになっています。
例として表示テキストの設定は、1.1.0だと以下の記述となります。
$.mobile.page.prototype.options.backBtnText = "hoge";
しかし1.4.5だと上記記述では動きません。こうなります。
$.mobile.toolbar.prototype.options.backBtnText = "hoge";
このように、$.mobile.pageの部分を$.mobile.toolbarに変えてやるとうまく動きました。addBackBtnやbackBtnThemeも同様の書き換えでいけるみたいです。オブジェクト構造が変わっているようですね。
4.検索フィルタ関連の初期設定
jQuery Mobileでは検索機能もさくっと作ってくれます。リストビューやテーブルに対して、属性指定だけで実現できます。インライン設定はこんな感じ。
<ul data-role="listview" data-filter="true" data-filter-placeholder="検索">
こちらもmobileinitイベントで、プレースホルダの初期設定（デフォルトは「Filter items…」です）が変えられたりします。
プレースホルダを一括設定するには、1.1.0だとこう書きます。
$.mobile.listview.prototype.options.filterPlaceholder= "検索";
1.4.5ではこうでした。
$.mobile.filterable.prototype.options.filterPlaceholder = "検索";
リストビューから呼ぼうがなんだろうが、filterableウィジェットというオブジェクトを使用しているみたいですね。
5.仕様が変わってる？と思ったらコードを読もう
参考書通りの初期化コードがうまく動作しなかったので、もちろんGoogle先生にも聞いてみました。でもけっこう古い情報が上位に載っていたので、結局自分でなんとかしました。
どうやってなんとかしたか、というと、ネイティブコードを読むです。
公式ドキュメントを読むという手もあるかと思います。でも私は英語が嫌いなんですねー。どうしても読まなければならないなら読みますが、なるべく避けたいんです。カスです。
で、オープンフレームワークは生コードが読めるところが利点です。結局のところ、うまく動かなければネイティブコード見れば仕様わかるじゃん？英語よりコードの方がわかりやすいじゃん？ということで。
例えば今回の$.mobile.page.prototype.options.backBtnTextが動かなかった件に関しましては、backBtnTextで検索をかけてみました。すると以下の記述を発見。
$.widget( "mobile.toolbar", {
initSelector: ":jqmData(role='footer'), :jqmData(role='header')",
options: {
theme: null,
addBackBtn: false,
backBtnTheme: null,
backBtnText: "Back"
},
これを見るに、backBtnTextはmobile.toolbarオブジェクトのoptionになっていることがわかります。こいつのprototypeを設定してやればいいんだよね？という完全なる推測のもと書き換えてみたら動いたので、まあなんか、なんとかなるもんだなと、そんな感じです。
オプション名そのものが変わってしまってはこの「とりあえずオプション名を検索してみる」という方法は使えませんが、ひとつの手がかりとして便利な手なんじゃないかなーと思います。
また何か見つけたら追記します！