jQuery Mobileのコトハジメ

Yuuです。

VPSであーだこーだしていて、PHPから書きだされたファイルがApache権限ではてさて、SuPHP?パフォーマンス?fastcgi?って感じの初心者っぷりでgoogle先生をを頼り中な今日この頃。

さて、本題。 スマートフォンサイト作るとき、jQuery Mobileにお世話になってます。

  • スマートフォンサイトのUIをカッコ良くさせたい。
  • さっくり実装させたい。

こんなときに便利でお手軽なjQuery Mobile。 とりあえず、コトハジメ的に備忘録です。

はじめに

  • 使用Ver:1.0.1

わからないことは、jQuery MobileのDEMOを見る。 英語がわからない時は、日本語リファレンス見る。

デモサイト見ればレイアウト実装のサンプルが豊富なので、たいていのことはカバーできます。

初期テンプレート

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <title>code life</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="jquery.mobile.init.js"></script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page">
  <header data-role="header">
    <h1>タイトル</h1>
  </header>
  <div data-role="content">
    <h1>見出し1</h1>
    <p>コンテンツ内容</p>
    <h2>見出し2</h2>
    <p>コンテンツ内容</p>
    <h3>見出し3</h3>
    <p>コンテンツ内容</p>
  </div>
  <footer data-role="footer">
    <h4>CopyRight &copy; Code-life.net. All rights reserved.</h4>
  </footer>
</div>
</body>
</html>

公式を参考にすると上記のような感じになります。

jQuery Mobile 初期設定

エラーメッセージなどが英語だったりするので設定を変更するために下記のJSを読み込みます。

1
<script src="jquery.mobile.init.js"></script>
1
2
3
4
5
6
7
8
$(document).bind('mobileinit', function(){
    $.mobile.loadingMessage = '読み込み中';
    $.mobile.pageLoadErrorMessage = '読み込みに失敗しました';
    $.mobile.dialog.prototype.options.closeBtnText = '閉じる';
    $.mobile.selectmenu.prototype.options.closeText= '閉じる';
    $.mobile.listview.prototype.options.filterPlaceholder = '検索文字列';
    $.mobile.page.prototype.options.backBtnText = '戻る';
  });

ポイントは、上記スクリプトをjQuery MobileのJS読み込み前に読み込むこと。

参考: グローバル設定

jQuery Mobile CSS初期設定

文字数が要素内で一定値をオーバーすると、文字が省略されてしまうので、それをCSSで解除してあげる。

1
2
3
4
5
6
7
8
9
.ui-header .ui-title,
.ui-footer .ui-title,
.ui-btn-inner,
.ui-li-heading,
.ui-li .ui-btn-text a.ui-link-inherit,
.ui-li-desc {
  overflow: visible;
  white-space: normal;
}

デザインを変更する

デフォルトのデザインをそのまま使う場合はあまりないので、それぞれのデザインをオリジナルなものに変更します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div data-role="page" data-theme="f">
  <header data-role="header" data-theme="f">
    <h1>タイトル</h1>
  </header>
  <div data-role="content" data-theme="f">
    <h1>見出し1</h1>
    <p>コンテンツ内容</p>
    <h2>見出し2</h2>
    <p>コンテンツ内容</p>
    <h3>見出し3</h3>
    <p>コンテンツ内容</p>
  </div>
  <footer data-role="footer" data-theme="f">
    <h4>CopyRight &copy; Code-life.net. All rights reserved.</h4>
  </footer>
</div>

data-theme=“f"をそれぞれの要素に追加しました。

data-themeによって、スタイルの切り替えが可能。 jQuery Mobileでは、aからeまでのスタイルがセットされているので、何もスタイルがセットされていないf~zなど任意のスタイルを指定してあげれば、当然スタイルがセットされてないのでデザインが解除されます。

あとはそれぞれいつも通りにCSSでデザイン作るだけです。

jQuery Mobileのデフォルトスタイルをカスタマイズ

テーマが折角あるようなのでテーマcssを作りたい。

JavaScriptで適用されているCSSスタイルが何なのかを見るときは、ブラウザの要素検証だったり、firebugだったりで適用CSSを確認しますよね。 それをすべて追って、上書きするのは大変です。

そんなときは、jQuery MobileのTheme Rollerを使います。 このウェブツールを使うと、jQuery Mobileのテーマをちょちょいと作ることができます。

カラーコード指定で迷った場合は、Adobe Kulerからも選択できます。 ちなみにKulerをどう反映すればいいか最初はわからなかったんですが、カラーアイコン(?)をドラック&ドロップで反映できます。 そのデザイン反映したやつを左上のDownload Themeでダウンロードする。

あとはそれを組み込んで随時改修していきましょう。

Comments