jQuery Mobile導入手順 －はじめの一歩－
公開日： :
最終更新日：2014/04/20 IT, jQueryMobile
最初に何をしていいのか分からない人もいるかもしれませんので、触ってみるという意味でのはじめの一歩を書いておきます。
とりあえず使ってみて、どういうものかを軽く知っておくのは大事だと思います。
導入
利用するにあたってのファーストステップ。
- exampleフォルダを用意します。
- exampleフォルダ内にcssフォルダもあわせて作ります。
- 本家サイトのDownloadをクリック。
- ZIP Fileからダウンロード。
- ダウンロードしたものを解凍しimagesフォルダとjquery.mobile.min.cssをcssフォルダにおきます。
- exampleフォルダ直下にsample.htmlを用意し、以下をコピペし保存します。
<html> <head> <title>サンプル</title> <link href="./css/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0/jquery.mobile-1.0.min.js"></script> <div data-role="page"> <ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="/example/list1/">List1</a></li> <li><a href="/example/list2/">List2</a></li> </ul> </div> </body>
保存したsample.htmlをブラウザで表示させます。
スマートフォン対応されているのがわかるかと思います。
テーマカラーの設定
jQuery Mobileを利用するにあたり、自身のサイトのテーマカラーを決める必要があります。
テーマカラーは最初から5種類(a～e)が用意されています。
sample.htmlを表示させると黒色のリスト表示だったと思います。
これはdata-theme=”a”の場合のテーマカラーです。
sample.htmlの以下の箇所のdata-themeの値でテーマカラーが設定されます。
<ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="/example/list1/">List1</a></li> <li><a href="/example/list2/">List2</a></li> </ul>
このdata-theme=”a”をb、c、d、eと変更してみてください。
色が変更されるのがわかるかと思います。
テーマカラーの作成
a～eまでの5種類がどうしても自身のサイトとあわないというケースもあると思います。
その場合は、自分でテーマカラーを作成します。
色を1つ1つ決めるのは面倒なので、オリジナルで作る場合は以下のサイトを利用するのが良いです。
ThemeRoller | jQuery Mobile
- まずテーマカラーの頭文字を何にするか決めます。
- a、b、c以外がいいのであれば+をクリックしてd、eなどを表示させます。
- Theme SettingsからFont Familyなどを選択し色を1つ1つ設定します。
- 完成したらDownload ThemeからDownload Zipをクリックしファイルをダウンロードします。
- ダウンロードしたzipを解凍し、cssフォルダにmy-custom-theme.cssを置きます。
- sample.htmlに以下の1文を追加します(jquery.mobile.min.cssの前に記述)。
<link href="./css/my-custom-theme.css" rel="stylesheet" />
以上でテーマカラーを新たに作れました。
そこで、sample.htmlの以下のdata-themeの値を作った際に用意した頭文字にします。
<ul data-role="listview" data-inset="true" data-theme="※変更点※"> <li><a href="/example/list1/">List1</a></li> <li><a href="/example/list2/">List2</a></li> </ul>
これで自分が作ったテーマカラーが反映されたのが分かるかと思います。
最後に
はじめの一歩はローカルでの導入とテーマカラーについての説明です。
また今度次のステップについて書ければ書こうと思います。
今後色々な情報を調べることになるかと思います。
最初にjQuery Mobileで何ができるのか軽くチェックするなら以下のドキュメントを読むことをお勧めします。
英語：jQuery Mobile: Demos and Documentation
日本語：jQuery Mobile 1.1.0 日本語リファレンス
※以前はpushStateが非対応だったので何かと不便でしたが、今は対応しているので便利です。
情報チェック時の注意点
情報を調べる際に注意すべき点はjQuery Mobileの利用バージョンです。
※1.0がリリースされたのは2011年11月16日です。
1.0に至るまでに何度もバージョンアップしており、色々と変更になっています。
見ている情報が必ずしも1.0でもあてはまるとはかぎらないので注意が必要です。
参考資料
- Jquerymobile | PPl@ce
- 本サイトでのjQueryMobile関連のエントリー
広告
関連記事
-
リンク文字をタッチしても色が変わらない －-webkit-tap-highlight-colorのメモ－
* 背景 jQuery Mobileを利用してスマートフォン対応をしたサイトにおいてリンク文字をタッ
-
jQuery Mobileの1.0Beta3、1.0RC1で起きた現象 -iOS5で動かない！？-
最近おきたjQuery Mobile周りについてのメモ。 本来なら色々チェックしてちゃんと原因を調
-
PHP_CodeSniffer＋ Eclipse + PHP Code Formatter Pluginでコーディング規約を守ったコーディング
1人でプログラミングをしているにしても、多人数でプログラミングをしているにしても、コーディング規約を
-
iPhoneアプリ開発 - touchesBeganとUITapGestureRecognizerの差(タッチとタップ) –
「画面にある画像を移動させたい」とか、「画面に線を書きたい」ということがあるかと思います。 ぐぐると
-
Jenkins + スマホアプリ(1) －スマホアプリ用CI環境を作ってみよう－
前回までは、iPhoneアプリでのCI環境でした。 TestFlightがAndroidアプリにも
-
iPhoneアプリ開発 －WebViewで表示しているページで特定のリンククリック時の動作を変える－
* やりたいこと UIWebViewでWebページを表示し、特定のリンクをクリックした際には別処理を
-
jQueryMobileでカレンダー表示 -DateBoxプラグインの利用-
スマートフォン対応をしているとカレンダーの表示の仕方をスマートフォンらしくしたいことがあると思います
-
Twitterでサービスにログイン －ソーシャルログイン－
* やりたいこと -自身のWebサービスにTwitterIDでログイン(ソーシャルログイン)したい。
-
PhoneGapを触ってみた ―導入編―
スマートフォン対応をjQuery Mobileを使ってやったので、その資産をいかせないかということで
-
iPhoneアプリ開発 －UIButtonのTouch Down、Touch up Inside、Touch up Outsideの使い方－
* Touch DownとTouch up Inside、Touch up Outsideの違い
