jQuery Mobile導入手順 -はじめの一歩-

公開日: : 最終更新日:2014/04/20 IT, jQueryMobile


jQuery Mobileの1.0がリリースされ、利用したい方が増えていると思います。
最初に何をしていいのか分からない人もいるかもしれませんので、触ってみるという意味でのはじめの一歩を書いておきます。
とりあえず使ってみて、どういうものかを軽く知っておくのは大事だと思います。

 導入

利用するにあたってのファーストステップ。

  1. exampleフォルダを用意します。

    • exampleフォルダ内にcssフォルダもあわせて作ります。
  2. 本家サイトのDownloadをクリック。
  3. ZIP Fileからダウンロード。
  4. ダウンロードしたものを解凍しimagesフォルダとjquery.mobile.min.cssをcssフォルダにおきます。
  5. 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

  1. まずテーマカラーの頭文字を何にするか決めます。

    • a、b、c以外がいいのであれば+をクリックしてd、eなどを表示させます。
  2. Theme SettingsからFont Familyなどを選択し色を1つ1つ設定します。
  3. 完成したらDownload ThemeからDownload Zipをクリックしファイルをダウンロードします。
  4. ダウンロードしたzipを解凍し、cssフォルダにmy-custom-theme.cssを置きます。
  5. 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でもあてはまるとはかぎらないので注意が必要です。

 参考資料

広告

関連記事

no image

Androidアプリ開発 -ギャラリーから選んだ画像のサムネイルを取得-

* やりたいこと +ボタンをクリックしてギャラリーを表示。 +ギャラリーで画像を選んだら、その画像の

記事を読む

no image

iPhoneアプリをヒットさせるために大事な5つのこと

巷にはたくさんのiPhoneアプリがたくさんあります。 そして、毎日新しいアプリがリリースされていま

記事を読む

iPhoneアプリ開発 -UIScrollViewでタッチを取得-

* やりたいこと UIScrollViewでタッチを取得する。 * 方法 通常のUIScrollV

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(1) -最初の一歩-

* 作るアプリ 結婚式や2次会で「自分の名前を書く」芳名帳 これをアプリで作ってみます。

記事を読む

no image

ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今のブランチってなんだっけ? -g

記事を読む

no image

Selenium2.0でUIテスト(2) -Rubyでやってみよう-

前回は、Selenium + PHPを試しました。 今後はRubyでやってみようということでSele

記事を読む

popup

jQuery Mobile1.2のPopupを試してみた -写真を表示-

jQuery Mobile1.2の「Popup」を試してみました。 他の機能である「Collaps

記事を読む

no image

order byでハマったこと -order by、group byの処理順序-

CakePHPでorder byとgroup byを使っていてはまったことについてのメモ。 * 

記事を読む

no image

iPhoneアプリ開発 −タッチで線を描く(1)−

* やりたいこと 今回やりたいことは以下の2点。 -(1) 画面をタッチして、指を動かして線を描きた

記事を読む

no image

複数アカウントでgithubを使う

1つの端末で複数のアカウントを使いたくなったので、その方法を整理してみた。 流れとしては以下のとおり

記事を読む

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑