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

iPhoneアプリ開発 -同じ画像を2度以上画像処理した際に起こるエラーの対処-

* 起きた現象 (1) UIImageのデータを元にピクセルの値を色々といじって画像処理。 (2)

記事を読む

no image

iPhoneアプリ開発 -UIScrollViewで画像を拡大・縮小-

* やりたいこと UIScrollViewでピンチアウト・インして上に乗っている画像を拡大・縮小した

記事を読む

MacでRuby on Railsの開発環境構築 -Apacheで動かす-

* 環境 -MacBook Air MD231J/A -Mac OS X バージョン10.8.2

記事を読む

no image

iPhoneアプリ開発 −2本指で画像を移動させる−

* やりたいこと 表示させている画像(UIImageView)を2本指で移動させたい。 ※1本指は別

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(2) -記帳画面作成-

* 今までの流れ - * 画面構成 今回の芳名帳アプリは以下の画面で構成しています。 -

記事を読む

no image

リンク文字をタッチしても色が変わらない --webkit-tap-highlight-colorのメモ-

* 背景 jQuery Mobileを利用してスマートフォン対応をしたサイトにおいてリンク文字をタッ

記事を読む

no image

CakePHP1.3でテストコード(3) -ENUM型が使えない-

cakePHP1.3でのSimpleTestを使ったテストケースの第3回目。 今回は、テーブル構成で

記事を読む

no image

github-flowを使っての開発(3) -1つのプロジェクトを複数人で開発-

今まで2回ほどgithub-flowをもとにした開発の流れを書きました。 今回は、複数人で開発をする

記事を読む

githubを使っての開発(1) -実践github-flow-

今は開発でgithubを利用しています。 開発をおこなう上で、githubをどのように扱えば良いの

記事を読む

no image

WordPressプラグイン「SyntaxHighlighter Evolved」が動かない!?

* 起きたこと ある時から、本ブログのコードの部分が「SyntaxHighlighter」で表示され

記事を読む

広告

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 ↑