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

Facebookがちょっとコワイ vol.2 -本当にあなたはあなたなの?-

以下のブログを読んで、さらにコワイと思ったFacebook。 あなたが登録している「友

記事を読む

no image

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

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

記事を読む

no image

iPhoneアプリを開発してての疑問 -教えてエライ人!-

MacでiPhoneアプリを開発してて疑問に思ったのの解決してないことを列挙。 知識不足をさらけ出し

記事を読む

no image

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

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

記事を読む

no image

jQuery Mobileのバージョンアップではまった – pushStateの存在 –

jQuery Mobileをつかってスマートフォン対応をしたときにはまったこと。 * 前提

記事を読む

no image

iPhoneアプリ開発 芳名帳アプリ作成(3) -名前を書けるようにする-

* 今までの流れ - -[http://pplace.jp/2013/06/1531/:title=

記事を読む

Jenkins + DeployGate(2) -DeployGateにアプリをアップ!-

DeployGateを使ってますか? 継続的にDeployってますか? TestFlightの

記事を読む

no image

Twitterでサービスにログイン -PHP(CakePHP1.3)で実践編-

以前、ソーシャルログインについて書きました。 ただ、Twitter連携にまだ触れてない人にはちょ

記事を読む

no image

ヘルプ作成で思ったWebサービスの3つの心得 -短文の教え-

最近ヘルプを作って思った3つのこと。 * 1文に複数の内容を書かない 1文に複数の内容を書いてい

記事を読む

no image

さくらのVPSでJenkins -執事さんとご対面-

さくらのVPSを利用している方は多いかと思います。 私も、自分で遊ぶ用(開発用)として借りてみまし

記事を読む

広告

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 ↑