【お試し版】jQuery Mobileスマートフォンサイト・デザイン Webクリエイターが身につけておくべき新・100の法則。（非売品）

Transcription

1

2 著 者 プロフィール 石 原 悠 (いしはら ゆう) 会 社 員 として 複 数 の 会 社 でディレクター デザイナーの 経 験 を 経 て 2012 年 1 月 にフリーラン スに We b サイト i O S A n d roi d アプリの デザイン や 実 装 ロゴや 印 刷 物 の 制 作 など 幅 広 い 業 務 を 大 小 問 わず 請 け 負 っており jquery Mobileなどのフレームワークを 用 いた 構 築 の 実 績 も 多 い デザインだけでなく プログラミングまですべてを 手 がけたiOS アプリを 複 数 リリースするなど 実 装 方 面 の 制 作 も 得 意 としており Webサイトやアプリの 構 築 に 関 してさまざまな 角 から 得 た 経 験 と 知 識 を 生 かした 柔 軟 でスピーディーな 対 応 を 得 意 としている normo( 個 人 事 業 Webデザイン iphoneアプリ 制 作 請 負 ) 本 書 は 2014 年 5 月 現 在 の 情 報 をもとに 解 説 しています 本 書 の 発 行 後 に 各 Web サイトの 内 容 や 仕 様 jquery Mobile のバージョ ンなどが 変 わっていることがあります あらかじめご 了 承 ください 本 文 中 の 製 品 名 およびサービス 名 は 一 般 に 各 開 発 メーカーおよびサービス 提 供 元 の 商 標 または 登 録 商 標 です なお 本 文 中 に は TM および マークは 明 記 しておりません 2

3 はじめに Webサイトの 運 営 をされている 方 なら アクセス 数 の 推 移 を 見 てすでにご 存 知 かもしれませんが 近 年 Webサイトへのアクセスの 比 が PCからモバイルのほう へと 推 移 しています 2014 年 には モバイルファースト というキーワードをよく 耳 にするようになり ました こ れ ま で W e b サ イト の 制 作 業 務 で は ま ず P C 用 の W e b サ イト を 制 作 して 余 っ た 時 間 や 予 算 でモバイルサイトを 構 築 する という 流 れで 進 められてきました そ れが まずモバイルで 使 えるサイトを 点 的 に 作 る という 新 しい 流 れも 生 まれて きているようです そうした 状 況 に 応 じて モバイル 向 けのサイト 制 作 が 容 になるツールとして jquery Mobileをはじめ Twitter Bootstrapやレスポンシブデザインなど 便 利 で 高 機 能 なフレームワークや 技 術 が 日 々 進 化 してきています この 本 を 手 に 取 られた 方 は おそらくこれから 新 しくWeb サイトを 制 作 されるに あたってその 中 からjQuery Mobileの 導 入 を 検 討 されているかと 思 います jquery Mobileは 数 あるモバイルとPCの 両 方 のWebサイトを 構 築 するフレー ムワークの 中 で 学 習 コストも 低 く 効 率 的 で 柔 軟 性 にも 優 れた We b サイトが 開 発 できる 非 常 に 便 利 なフレームワークになっています そのサイト 制 作 にこの 本 が 少 しでもお 役 に 立 てたら 幸 いです 2014 年 5 月 石 原 悠 3

4 目 次 はじめに... 3 本 書 の 読 み 方... 8 序 章... 9 第 1 章 jquery Mobile の 基 本 を 知 る 法 則 法 則 基 本 的 な 使 い 方 を 知 る ボタン 素 を 理 解 する ツールバーを 理 解 する リストで 情 報 を 整 理 する スマートフォンの フォームを 理 解 する フォームを 活 用 する 1 ページの 設 定 と 構 成 素 を 理 解 する Ajaxを 使 ったページ 遷 移 を 理 解 する Ajax によるページ 遷 移 の 不 具 合 を 解 消 する jquery Mobileに 用 意 されているボタンを 把 握 する ボタンにアイコンを 表 示 する ページのヘッダに 戻 る ボタンを 表 示 する 複 数 のボタンをグループ 化 してユーザビリティを 高 める ヘッダを 固 定 して 最 大 限 に 有 効 活 用 する フッタのレイアウトを 調 整 して 見 やすくする 複 数 ページにまたがるコンテンツを 自 由 に 行 き 来 する リストを 使 ってコンテンツを 階 層 化 する 読 み 込 み 専 用 のリストを 使 用 する リストに 自 動 で 区 切 りを 挿 入 する 新 着 リストに 更 新 時 間 を 表 示 する 画 像 と 簡 単 な 情 報 をまとめた 商 品 一 覧 ページを 作 成 する 下 層 ページの 情 報 量 をリストに 表 示 してユーザーのストレスを 軽 減 する 状 況 に 合 わせた 文 字 入 力 フォームを 選 択 する スマートフォンらしいタッチパネルを 生 かしたフォームを 利 用 する 選 択 入 力 可 能 なメニューを 利 用 する 必 須 項 目 が 入 力 されたら 送 信 ボタンをアクティブに 変 更 する 基 本 素 を 理 解 してユーザーフレンドリーなアンケートページを 作 成 する 買 い 物 カートを 利 用 したEC サイトを 作 成 する 章 末 コラム iphoneとandroidの 違 い 第 2 章 基 本 的 な UI パーツを 使 いこなす 法 則 法 則 フォームを 使 いやすくする 23 検 索 フォームにプレースホルダーとフィルタリング 機 能 を 使 う オートコンプリート 機 能 を 利 用 してユーザーの 入 力 をサポートする... 63

5 ダイアログボックスを カスタマイズする ポップアップを カスタマイズする ページレイアウトを 工 夫 する 25 フォームの 入 力 内 容 をあらかじめ 指 定 する ダイアログボックスの 閉 じ 方 やトランジションをカスタマイズする ダイアログボックスの 閉 じる ボタンの 位 置 を 変 更 する サイトが 単 調 にならないようにダイアログボックスを 使 い 分 ける ポップアップウィジェットを 使 用 する ポップアップウィジェットの 位 置 や 見 栄 えを 変 える オーバーレイポップアップウィジェットを 使 用 する パネルウィジェットを 使 用 して 複 雑 なサイト 構 造 を 一 覧 できるようにする パネルウィジェットにリストを 設 置 してより 多 くのリンクを 表 示 させる グリッドレイアウトを 使 った 緩 急 のあるサイトを 作 る レスポンシブグリッドでモニタサイズや 端 末 の 向 きに 応 じた レイアウトにする レスポンシブテーブルでモニタサイズや 端 末 の 向 きに 応 じた レイアウトにする カラムトグルのチェックボックスを 使 ってコンテンツの 表 示 非 表 示 を 切 り 替 える 開 閉 式 コンテンツを 利 用 して 情 報 を 効 率 的 に 格 納 する 開 閉 式 コンテンツを 複 数 並 べてアコーディオンメニューにする 開 閉 式 コンテンツのアイコンを 変 更 する 章 末 コラム CSS のマルチクラスの 記 述 方 法 第 3 章 ページレイアウトをカスタマイズする 法 則 法 則 カスタマイズの 基 本 を 理 解 する ヘッダとフッタを 活 用 する 画 像 を 使 ってカスタマイズする スタイルシートを 使 って カスタマイズする 41 複 雑 になりがちなリストを 見 やすくする 初 期 状 態 の 2 つのテーマを 理 解 する 自 分 で 新 しいテーマを 作 成 してページに 反 映 する ページ 遷 移 のエフェクトを 理 解 して 状 況 によって 使 い 分 ける ヘッダとフッタを 画 面 外 に 移 動 させ フルスクリーンモードで 読 みやすくする サイト 全 体 に 共 通 でヘッダ フッタを 固 定 表 示 する ヘッダに 複 数 のボタンを 設 置 してページ 全 体 の 情 報 量 を 増 やす レイアウトを 工 夫 してフッタを 活 用 し サイトをより 見 やすくする ヘッダメニューをプルダウンメニューに 変 更 してボタン 数 を 増 やす プルダウンメニューに 一 手 間 加 えて 操 作 感 を 向 上 させる ページ 遷 移 時 に 表 示 されるローダーをオリジナルのものにする 省 略 されて... と 表 示 される 長 いテキストを 省 略 しないようにする ホーム 画 面 に 追 加 をした 際 のサイトのアイコンをカスタマイズする 背 景 にパターン 画 像 を 敷 いてjQuery Mobileサイトの 見 栄 えを 変 える タブナビゲーションに 通 知 件 数 アイコンを 入 れる 端 末 の 種 類 や 回 転 方 向 解 像 を 識 別 してスタイルを 反 映 する

6 JavaScript を 使 って カスタマイズする 57 オリジナルアイコンを 作 成 してサイトのオリジナリティを 高 める CSS3 のグラデーションを 利 用 した 立 体 的 なボタンを 作 成 する CSS3 のシャドウを 利 用 した 立 体 的 なボタンを 作 成 する グローバル 設 定 を 利 用 してサイト 全 体 のレイアウトを 統 一 する すべてのページに TwitterとFacebookへの 投 稿 ボタンを 設 置 する デフォルトの 角 丸 とドロップシャドウを 削 除 してシンプルなページを 作 成 する ページトランジションを 自 分 でカスタマイズする 章 末 コラム CSSやCSS3の 活 用 第 4 章 スマートフォンならではの ジェスチャーを 生 かす 法 則 法 則 イベント 取 得 時 の カスタマイズをする 6 4 スマートフォン 独 自 のジェスチャーに 対 するイベントを 取 得 する 画 面 の 回 転 のタイミングを 取 得 して 縦 長 画 像 と 横 長 画 像 を 入 れ 替 える 背 景 色 をスクロール 位 置 に 応 じて 変 える ページのロードが 完 了 した 結 果 で 成 功 と 失 敗 のメッセージを 表 示 する ページを 移 動 するたびにランダムに 画 像 を 切 り 替 える スクロール 位 置 が 変 わったときにページトップボタンを 表 示 する どのリンクから 移 動 してきたかによってページ 上 の 文 章 を 変 える 複 数 の 開 閉 パネルを 同 時 に 開 いたり 閉 じたりする 章 末 コラム マウスで 操 作 するサイトとタッチ 端 末 で 操 作 するサイト 第 5 章 フレームワークやプラグインを 活 用 する 法 則 法 則 フレームワークや プラグインを 使 う オリジナルの プラグインを 作 成 する テーマをカスタマイズする 既 存 サイトを ブラッシュアップする 72 スマートフォンサイトでGoogleマップを 表 示 する Googleマップにマーカーを 付 けたりクローズアップしたりする 端 末 をシェイクして 画 面 を 変 える スワイプで 次 の 画 像 に 移 動 するフォトギャラリーを 作 る 入 力 された 郵 便 番 号 をもとに 住 所 を 自 動 表 示 する リスト 素 の 右 肩 にバッジを 追 加 する データロードの 成 功 時 と 失 敗 時 に 状 況 に 合 わせたアラートを 表 示 する Web サイト 上 で 効 果 を 見 ながらjQuery Mobileのテーマを 作 成 する サードパーティ 製 のデザインを 探 してページに 反 映 する Twitter Bootstrap 風 のデザインにする jquery Mobile 独 自 のデザインを 利 用 しないようにする 章 末 コラム オープンソースのプラグインの 選 び 方

7 第 6 章 WordPress & EC-CUBE を カスタマイズする 法 則 法 則 RSSリーダー 作 成 の 応 用 WordPressの カスタマイズ EC-CUBEの カスタマイズ 83 YouTube RSS フィードから JSON をロードして 一 覧 表 示 する 検 索 結 果 の 一 覧 にサムネイル 画 像 を 表 示 する 作 成 したリストをタブで 切 り 替 えられるようにする 通 知 プラグインを 使 用 して RSSのロードに 失 敗 したら アラートを 表 示 する WordPressで 構 築 したブログを 端 末 に 合 わせて 振 り 分 ける WordPressに 対 応 したjQuery Mobileテーマを 作 成 する 検 索 サイトからリンクしてきたときにもトップページに 戻 れるようにする 前 の 記 事 へ 次 の 記 事 へ リンクをテキストからボタンに 変 更 する パネルウィジェットに 固 定 リンクや 外 部 リンクを 格 納 する 縦 に 長 くなりがちなページをコンパクトにまとめる jquery MobileでGoogleアナリティクスを 使 ってアクセス 解 析 を 行 う ブログをソーシャルメディアに 対 応 させ SNS のボタンを 設 置 する WordPressとjQuery Mobileで 作 ったブログに 自 作 テーマを 適 用 する EC-CUBEのメニューをスマートフォン 向 けにコンパクトにまとめる ポップアップウィジェットを 使 用 してログイン 関 連 のメニューを コンパクトにまとめる EC サイトにローテーションバナーを 設 置 して 訪 問 者 の 視 線 を 誘 導 する おすすめ 商 品 をスライドバナーからリストビューに 変 更 する 限 定 商 品 に 在 庫 数 が 表 示 されたバッジを 付 けて 目 立 たせる 章 末 コラム SassとCompassで 作 成 するjQuery Mobileテーマ 用 語 集 索 引

8 本 書 の 読 み 方 法 則 のタイトル やるべきことがすぐにわかる タイトル 付 けをしています 関 連 する 法 則 解 説 している 法 則 と 密 接 にかかわる 他 の 法 則 を 紹 介 しています 続 けて 読 むことで 理 解 が 深 まります Webサイトの 制 作 手 順 Web サイト の 制 作 手 順 を 詳 細 な 説 明 とともにサンプルコードを 掲 載 しています 法 則 の と を 3 段 階 に 分 類 しています 法 則 を 実 践 するときの 目 安 にしてください ポイント 法 則 に 関 連 する 知 って おくべき 知 識 について 説 明 しています 解 説 法 則 をしっかり 習 得 で きるように ていねい に 解 説 しています 画 面 例 豊 富 な 画 面 例 によって わかりにくいところの 理 解 が 深 まります 用 語 わかりにくい 用 語 は 巻 末 の 用 語 集 で 調 べ られます 本 書 掲 載 のソースコードについて 本 書 で 説 明 しているサンプルコードと 画 像 ファイルは 本 書 のサポートページからダウンロードでき ます 本 書 サポートページ 本 書 では jquery MobileによるWebサイトの 構 築 を 実 践 するうえで 必 な100のノウハウを 紹 介 して います まずはじっくりと 解 説 を 読 んで それから 図 解 や 実 例 具 体 的 な 記 述 方 法 などを 読 み 進 めること で 確 実 に 理 解 を 深 められます ここで 紹 介 している 紙 面 はイメージです 実 際 の 本 書 紙 面 とは 異 なります 8

9 序 章 2014 年 にバージョン 1.4として 公 開 さ れたjQuery Mobile の 特 徴 や 主 な 変 更 点 ダウンロードしてから 開 発 する までの 環 境 の 構 築 方 法 などを 解 説 す る 序 章 9

10 デザインが 刷 新 された 新 バージョン 年 1 月 に バージョン 1. 4 がリリースされた jquery Mobileは2010 年 に 公 開 されて 以 来 バージョ ンアップを 繰 り 返 し 本 書 の 執 筆 時 点 ではバージョン1. 4 が 公 開 されている バージョン 1. 3まではバージョンアップごとに 新 しく ウィジェットなどの 機 能 面 が 追 加 強 化 されることが 多 かった が 年 の 1 月 に 公 開 された バージョン 1. 4 で は デザインの 刷 新 と 使 い 方 の 変 更 が 大 きかった デザイン 面 では ios 7をイメージしたフラットなデザ インに 変 更 され また 使 い 方 の 面 では 前 バージョンま ではデータ 属 性 でスタイルを 指 定 していたが 新 しいバー ジョンからは 直 接 クラスセレクタを 指 定 してデザインを 反 映 させるようになった バージョン 1.3 までのカラフルなデザイン ios 7を 想 起 させるフラットなデザイン 10 序 章

11 フラットデザインの 採 用 これまでは スキューモーフィックデザインといわれる 現 実 世 界 に 実 際 にあるものをモチーフにした 立 体 感 や 光 沢 があるデザインが 流 行 していた それが 2013 年 あたり から 次 第 にシンプルでフラットなデザインが 採 用 される ことが 増 えてきた jquery Mobileの1.3までのバージョンアップでも と ころどころデザインの 見 直 しがされていてその 兆 しはあっ たが バージョン 1. 4で 大 幅 にほぼすべてのパーツにおい てフラットデザインが 採 用 されることとなった 新 しいフラットなデザインのjQuery Mobileは これまで デフォルトで 用 意 されていた 5つのテーマを 使 い 分 けていた のが 白 と 黒 の 2 つのテーマのみとなった また バージョン 1. 3までのテーマAは 黒 ベースのものだったが バージョ ン1.4から 白 ベースのテーマがAとして 採 用 されている デザインの 指 定 方 法 の 変 更 これ まで は U I にデ ザインを 指 定 する 際 デ ー タ 属 性 を 使 用 して data-role="button" などとしてボタン 素 とし て 指 定 していた バージョン1.4ではこの 指 定 方 法 が 撤 廃 されて クラスセレクタを 直 接 使 用 するようになった バージョン1. 3までは 複 数 のスタイルを 指 定 したいと きにはデータ 属 性 を data-role="button" data-mini= "true" などと 複 数 記 述 しなければならなかったのだが バージョン1.4からは class="ui-btn ui-btn-mini" など 直 接 クラスセレクタを 指 定 してデザインを 適 用 することが 可 能 になった これにより HTMLファイルが 随 分 すっき りして 可 読 性 が 上 がった バージョン1.3 以 前 のボタンの 指 定 方 法 のコード <a href="#" data-role="button" data-inline="true"> ボタン </a> バージョン 1.4 からの 新 しいボタンの 指 定 方 法 のコード <a href="#" class="ui-btn ui-btn-inline"> ボタン </a> アイコンの 描 画 が SVG 形 式 に 変 更 jquery Mobileは デフォルトの 状 態 で 数 多 くのプリセッ トのアイコンが 用 意 されていて 簡 単 な 指 定 で 使 えるのが 魅 力 の1つだったのだが バージョン1.4からは PNG 形 式 と SVG 形 式 の 2 種 類 を 状 況 によって 使 い 分 けるような 仕 様 に 変 更 になった SVG 形 式 で 描 画 されたアイコンは PNG 形 式 と 異 な り 拡 大 してもぼやけないので 拡 大 して 大 きく 扱 う 場 合 で もきれいなエッジで 描 画 することが 可 能 だ 今 後 R e t i n a ディスプレイ 以 上 の 解 像 の 画 面 が 登 場 したときでも 問 題 ないだろう 他 にもバージョン1. 4では グローバル 設 定 やメソッド の 呼 び 出 し 方 が 変 わったり 依 存 しているjQuery のバー ジョンが 上 がったりして 使 い 勝 手 が 変 わっているので 本 書 を 参 考 にいろいろと 試 してほしい 今 後 は 階 層 メ ニューやポップアップウィジェットなどが 非 推 奨 になる 可 能 性 も あり 次 第 に 廃 止 されていくと 考 えられる 序 章 11

12 ECサイト 構 築 のために 最 低 限 必 なファイル ソースコードをダウンロードする jquery Mobileの 公 式 サイトにアクセスし Download jquery Mobile の Latest stable をクリックしてフル パッケージのソースコードをダウンロードする 本 書 執 筆 時 点 ( 2014 年 5 月 )では jquery Mobileの 公 式 サイト からは 安 定 版 のバージョン1.4.2がダウンロードできる Latest stable : 安 定 版 の 最 終 リリース 版 Custom download : 必 な 機 能 のみを 選 択 してダ ウンロード 可 能 版 と Minified 版 が あ り 選 べ る よ う に なって い る Uncompressed 版 は デバッグ 用 なのでソースコードにコメン トが 付 いていて 可 読 性 が 高 く ソースコードを 解 読 して 内 容 を 理 解 しやすい また 業 務 などで 実 際 に 使 用 する 場 合 は 軽 くてサーバー やクライアントPCへの 負 荷 が 低 いMinified 版 や すでにイン ターネット 上 で 配 信 されている C D N 版 を 使 用 したほうが い い だろう 本 書 ではフルパッケージのバージョン1.4. 2を 使 用 する バ ー ジ ョン で は いくつ か の 新 機 能 や 専 用 の アイコ ン 群 が 追 加 され ユーザーにとってより 快 適 なサイト 制 作 が できるようになっている また トップページの Download をクリックすると さまざまなダウンロードリンクがあり そ れぞれ 次 のような 内 容 のファイルが 用 意 されている CDN-Hosted JavaScript:JSファイル CDN-Hosted CSS:CSSファイル Copy-and-Paste Snippet for CDN-hosted files: C D N を 使 用 する 場 合 のコピーペースト 用 のスニペット ZIP File:デモを 含 めたファイル 一 式 ダウンロードできるファイルには それぞれにUncompressed jquery Mobile 公 式 サイト ファイルの 中 身 を 確 認 する 本 書 では トップページにある Latest stable をクリッ クしてすべてのファイルをダウンロードしたうえで 順 を 追 っ て 説 明 していく ZIP ファイルをダウンロードして 展 開 する と 次 の 図 のような 構 成 でファイルが 格 納 されている 12 序 章

13 demosディレクトリ imagesディレクトリ jquery.mobile css jquery.mobile js jquery.mobile min.css jquery.mobile min.js jquery.mobile min.map jquery.mobile.external-png css jquery.mobile.external-png min.css jquery.mobile.icons css jquery.mobile.icons min.css jquery.mobile.inline-png css jquery.mobile.inline-png min.css jquery.mobile.inline-svg css jquery.mobile.inline-svg min.css jquery.mobile.structure css jquery.mobile.structure min.css jquery.mobile.theme css jquery.mobile.theme min.css なおjQuery Mobile 本 体 のJavaScriptファイルとして 次 の 2 つがある jquery.mobile js jquery.mobile min.js ファイル 名 に. m i n と いう 文 字 が 入 ってい るも の が 前 述 したMinified 版 にあたる 圧 縮 されたソースコードで 入 っていないものが Uncompressed 版 にあたる 圧 縮 前 の ソースコードである そして その 他 にjQuery Mobileサイトを 装 飾 する 次 の CSS が 入 っている jquery.mobile.external-png css jquery.mobile.icons css jquery.mobile.inline-png css jquery.mobile.inline-svg css jquery.mobile.structure css jquery.mobile.theme css jquery.mobile min.map このうちファイル 名 に.structure という 文 字 が 入 っ ているものは ページ 遷 移 など 基 本 となる 動 作 部 分 のみ が 記 載 され ナビゲーションバーのカラーリングやアイ コンなどの 装 飾 部 分 が 省 かれたファイルである 通 常 は jquery.mobile css ファイルのみ 使 用 すればいい が 自 作 のテーマを 使 うときなどは 各 テーマのスタイルが 記 述 されてい る.theme と.structure を 合 わせて 使 用 することになる また バージョン から 新 たに 追 加 されたアイコン 用 のファイルも 入 っており SVG や PNG 形 式 のファイル がそれにあたる またミニファイされた JavaScriptファイ ルをデバッグするために 使 用 する mapファイルなども 追 加 されている このように 多 くのファイルがあるのだが 実 際 に 仕 事 な 序 章 13

14 どで 使 用 する 場 合 はすべてのファイルが 必 なわけでは ない 本 書 では 最 低 限 必 とされる 次 の 3つのファイル を 使 用 して 話 を 進 めていく jquery Mobile サイトには 必 なモジュールを 選 択 してダウンロードできる jquery Mobile Download Builder が 用 意 されている images ディレクトリ jquery.mobile css jquery.mobile js また Mobile 版 ではないjQuery 本 体 の jquery.js も 必 となる jquery Mobile 1.4.2では jquery.jsのバー ジョンは が 使 用 されているが /2. 0な どの 幅 広 いバージョンがサポートされているようだ ダウンロードページには 最 新 のバージョンである1. 4 以 外 にも 以 前 のバージョンもいくつかダウンロードできる ようになってい る ただし 対 応 してい る jquery のバー ジョンが 異 なることに 注 意 が 必 だ jquery Mobile Download Builderを 使 うと ダウンロードすべきファイルが 整 理 されているので 非 常 に 便 利 だ 14 序 章

15 オフラインの 開 発 環 境 の 構 築 オフライン 環 境 に 必 なファイルをヘッダに 記 述 する jquery Mobileを 使 ったサイト 制 作 に 必 なファイル を 読 み 込 むため HTMLファイルのヘッダ 部 分 を 修 正 す る この 記 述 方 法 は 2 つあるので 用 途 に 合 わせて 選 択 してほしい 1つ 目 の 方 法 では ダウンロードしたjQuery Mobile 関 連 のファイルをローカル PC のディレクトリ 内 に 格 納 して 使 用 する オフラインでのサイト 制 作 の 際 に は 後 述 する2 つ 目 の 方 法 では 動 作 確 認 ができないので この 方 法 を 選 択 しなければならない 次 に HTMLファイルが 入 っている 階 層 に /jquerymobile ディレクトリを 作 成 し その 中 に 次 に 示 す 3 ファイルを 格 納 し /images ディレクトリを 作 成 する jquery.mobile min.css jquery.mobile min.js jquery.js /images ディレクトリ jquery Mobileは 基 本 的 に HTML5で 記 述 するため type 属 性 が 省 略 でき type="text/css"や type="text/ javascript"を 記 載 する 必 はない オフライン 環 境 の 場 合 のコード <link rel="stylesheet" href="../jquerymobile/jquery.mobile css" /> <script src="../jquerymobile/jquery.js"></script> <script src="../jquerymobile/jquery.mobile js"></script> オ ン ラ イ ン 環 境 で は C D N で 提 供 されて い る ファイルを 使 用 する 必 なファイルをヘッダに 記 述 する 2 つ 目 の 方 法 は コンテンツデリバリネットワーク(Contents Delivery Network CDN)で 提 供 されているファイルを 使 用 して サーバーから 直 接 ソースコードを 読 み 込 む 方 法 だ なお コンテンツデリバリネットワークとは デジタルコンテンツ をインターネット 経 由 で 配 信 するために 最 適 化 されたネッ トワークのことである こ の 方 法 は 準 備 が 不 でレス ポ ンスも い いた め 公 式 サイトではこちらが 推 奨 されている 筆 者 もディレクトリ に 余 分 なファイルを 入 れたくないので CDN のファイルを 使 用 することがほとんどだが オフライン 環 境 では 使 えな いため 本 書 では オフライン 環 境 で 使 える 1 つ 目 に 紹 介 した 方 法 で 解 説 する オンライン 環 境 の 場 合 のコード <link rel="stylesheet" href=" jquery.mobile min.css" /> <script src=" <script src=" 2.min.js"></script> 序 章 15

16 CDNを 利 用 しない 場 合 と 利 用 する 場 合 のサイト 閲 覧 の 違 い 通 常 は 左 図 のようにサーバーと1 対 1でリクエストとレ スポンスが 繰 り 返 される しかし C D N を 利 用 して 右 図 のようにサイト 内 で 使 用 する 一 部 のデータを 地 理 的 およ びバックボーン 的 に 分 散 させた 別 のサーバーから 受 信 す れば 負 荷 が 分 散 されより 効 率 のいい 安 定 したサイトの 配 信 が 可 能 になる 通 常 のネットワークを 使 用 したサイトの 閲 覧 ( 左 図 )と CDNを 使 用 したサイトの 閲 覧 ( 右 図 ) サーバーからHTMLデータが 送 信 さ れる 2H T M L を 解 析 し 画 像 や J a v a S c r i p t などの 別 ファイルのデータをサーバー にリクエストする 3リクエストのあった 画 像 や J a v a S c r i p t が 送 信 される Web ページ Web ページ 16 序 章

17 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 jquery Mobileを 使 用 するにあたって 必 になる 知 識 として jquery Mobileによるサイトでの HTMLの 書 き 方 から ページ 遷 移 などの 仕 組 み ボタンやリストなどの 基 本 的 な UI の 使 い 方 までを 解 説 する 法 則 1 ページの 設 定 と 構 成 素 を 理 解 する Ajaxを 使 ったページ 遷 移 を 理 解 する Ajax によるページ 遷 移 の 不 具 合 を 解 消 する jquery Mobileに 用 意 されているボタンを 把 握 する ボタンにアイコンを 表 示 する ページのヘッダに 戻 る ボタンを 表 示 する 複 数 のボタンをグループ 化 してユーザビリティを 高 める ヘッダを 固 定 して 最 大 限 に 有 効 活 用 する フッタのレイアウトを 調 整 して 見 やすくする 複 数 ページにまたがるコンテンツを 自 由 に 行 き 来 する リストを 使 ってコンテンツを 階 層 化 する 読 み 込 み 専 用 のリストを 使 用 する リストに 自 動 で 区 切 りを 挿 入 する 新 着 リストに 更 新 時 間 を 表 示 する 画 像 と 簡 単 な 情 報 をまとめた 商 品 一 覧 ページを 作 成 する 下 層 ページの 情 報 量 をリストに 表 示 してユーザーのストレスを 軽 減 する 状 況 に 合 わせた 文 字 入 力 フォームを 選 択 する スマートフォンらしいタッチパネルを 生 かしたフォームを 利 用 する 選 択 入 力 可 能 なメニューを 利 用 する 必 須 項 目 が 入 力 されたら 送 信 ボタンをアクティブに 変 更 する 基 本 素 を 理 解 してユーザーフレンドリーなアンケートページを 作 成 する 買 い 物 カートを 利 用 した EC サイトを 作 成 する... 56

18 法 則 1 基 本 的 な 使 い 方 を 知 る ページの 設 定 と 構 成 素 を 理 解 する head 素 に 必 な 項 目 を 記 述 する まずは 単 体 の ページを 作 成 して ヘッダに 必 な 項 目 をリストアップする <head> </head>には 序 章 で 読 み 込 む 設 定 をしたjQuery Mobileのプログラ ム 以 外 に 次 の 3 つ の 項 目 の 記 述 が 必 に なることを 覚 えておこう 文 字 コードの 指 定 関 連 する 法 則 88 WordPressに 対 応 したjQuery Mobile テーマを 作 成 する _P190 用 語 Viewport _P213 データ 属 性 _P215 ページタイトル Viewportの 設 定 ここで 選 択 する 文 字 コードは ソースコード 本 体 やjQuery Mobileの 公 式 サイト でも 使 用 されているのと 同 様 に UTF-8を 使 用 するため <meta charset="utf-8"> と 記 述 する V iew p o r t という 項 目 では スマートフォンでページを 開 いた 際 の ページ 幅 や ピ ンチ 操 作 などで 拡 大 可 能 な 最 大 幅 を 指 定 する jquery Mobileを 使 用 したサイト の 制 作 で は 横 幅 をスマートフォン のブラウ ザ にフィットさせるた め こ の V i e w p o r t の 記 述 1 行 を 加 える 必 がある <head> </head>に 記 述 するコード!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>jquery Mobile 100の 法 則 :サンプルプログラム </title> <link rel="stylesheet" href="../jquerymobile/jquery.mobile css" /> <script src="../jquerymobile/jquery.js"></script> <script src="../jquerymobile/jquery.mobile js"></script> </head> 18 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

19 ボディに 必 な 項 目 をリストアップする 次 にbody 素 内 部 だが 最 初 の data-role 属 性 に 下 の HTMLソースの1のよう に"page"と 指 定 し jquery Mobileサイト 内 での1ページ 単 体 のくくりとする そし て この 中 にページを 構 成 するさまざまな 素 を 配 置 してページを 作 成 していく jquery Mobileでは HTML 内 に 記 述 したひとまとまりの 素 を HTML 5の 独 自 データ 属 性 data- を 使 用 して data-role=" 〇 〇 " と 指 定 することで 各 パー ツとしての 機 能 を 付 与 させる 仕 組 みになっている ここでは data-role="page"を 指 定 することで jquery Mobileがその 中 の 素 をまとめて1つのページとして 認 識 するように 指 定 している <div> に 記 述 するコード <div data-role="page"> <div data-role="header"> 2 <div role="main" class="ui-content"> 3 <div data-role="footer"> 4 1 ヘッダ コンテンツ フッタの 役 割 ヘッダ 部 分 には 上 のHTMLソースの 2 のように div 素 にdatarole="header"というデータ 属 性 を 指 定 して 記 述 する このheader 属 性 はサ イト 全 体 で 常 に 表 示 される 共 通 のパーツであり コンテンツタイトル ホー ムボタン 戻 るボタン などを 設 置 するために 使 用 するエリアとなる コンテンツ 部 分 には 上 のHTMLソースの3のように div 素 に<div role="main" class="ui-content">という 値 をそれぞれ 指 定 し その 内 容 を 記 述 する ここには タイトル 本 文 画 像 リスト 子 階 層 へのリンク など 実 際 のコンテンツの 内 容 を 配 置 する 本 書 掲 載 の 多 くの 素 は この 中 で 使 用 するものとなる フッタ 部 分 には 上 のHTMLソースの4のように div 素 にdatarole="footer"というデータ 属 性 を 指 定 してその 内 容 を 記 述 する フッタはペー ジ 下 部 に 表 示 さ れ る エ リ ア で 一 般 的 に は コ ピ ー ラ イト 利 用 条 件 免 責 事 項 PC サイトなどへのリンク を 設 置 することが 多 い ただスマートフォ ンの 特 性 上 表 示 面 積 が 狭 くあまり 多 くのパーツが 設 置 できないので コピー ライトのみを 記 載 しているサイトも 少 なくない また タブナビゲーションを 使 用 するサイトでは フッタ 自 体 が 使 われないこともある スマートフォンの 画 面 に 合 わせてページを 表 示 するViewport この 法 則 で 登 場 した Viewport は jquery Mobileを 使 用 しない 場 合 でもスマートフォンサイトの 制 作 でよく 使 用 する 設 定 になる PC サイトをスマートフォンのブラウザで 閲 覧 した 際 に ページ 全 体 が 小 さく 表 示 されてしまう 経 験 をした 人 もいる と 思 うが これは 横 幅 の 指 定 されていないページを 閲 覧 した 際 に ブラウザがページの 横 幅 をデフォルトの Viewport 設 定 に 合 わせて980pxで 表 示 してしまうために 起 きる 現 象 だ これは あらかじめmeta 素 内 のViewportの 設 定 で 横 幅 を 指 定 して おくことで 回 避 できる jquery Mobileでは<meta name="viewport" content= "width=device-width, initial-scale=1, maximum-scale=1"> を 指 定 しているが width( 幅 )やinitial-scale( 倍 率 の 初 期 値 ) m a xim u m - s c ale( 倍 率 の 最 大 値 )などを 調 整 することで ペー ジを 拡 大 縮 小 したり 任 意 のサイズのページを 指 定 したりする ことも 可 能 になるので 覚 えておきたい 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 19

20 法 則 2 基 本 的 な 使 い 方 を 知 る Ajaxを 使 ったページ 遷 移 を 理 解 する 複 数 のページを 別 々のHTMLファイルに 記 述 して サイトを 作 成 する 法 則 1で 説 明 したように jquery Mobileではbody 素 内 にdata-role="page" を 指 定 することで 1 ページとして 認 識 される そのため 例 えば 1 つの H T M L ファ イル 内 に data-role="page"を3つ 指 定 すれば 全 部 で3ページのサイトというこ とになる このページの 考 え 方 はjQuery Mobileの 大 きな 特 徴 の1つだ しかし 本 書 では 通 常 のサイトのページの 考 え 方 と 同 様 に 個 別 の HTMLファイルによる 単 体 ページを 複 数 作 って それらを 相 互 に 遷 移 させるサイトの 作 成 方 法 を 覚 えてほし い な ぜなら 実 際 に スマートフォン サイトを 制 作 する 場 合 階 層 が 深 くページ 数 の 多 いサイトを 制 作 するケースが 多 く 主 にこの 方 法 を 使 うことになるからだ この サ イト 設 計 に つ い て は 初 期 段 階 で い ろ い ろ 迷 うこと が 多 い の だ が 別 々 の H T M L ファイルで 制 作 すれば コードの 可 読 性 も 上 がり 分 業 も 可 能 になるので 迷 った 場 合 はこの 構 成 でサイトを 制 作 しておくことをおすすめする ページ 遷 移 にはAjaxを 使 って 通 信 効 率 を 向 上 させる 関 連 する 法 則 3 Ajax によるページ 遷 移 の 不 具 合 を 解 消 する _P22 68 ページを 移 動 するたびにランダム に 画 像 を 切 り 替 える _P147 用 語 Ajax _P212 DOM _P212 内 部 的 な 処 理 の 話 だが jquery Mobileではスムーズなページ 遷 移 を 実 現 して 通 信 効 率 を 向 上 させるために 通 常 Ajax という 非 同 期 処 理 を 用 いて HTMLファ イルをロードし コンテンツ 部 分 だけDOM(Document Object Model)を 書 き 換 える 方 式 をとっている Ajaxとは Web ページをインターネットからダウンロードして 表 示 するまでの 処 理 方 式 の 1 つだ 通 常 We b ページは ハイパーリンクがクリックされると 次 に 表 示 させたい HTMLファイルをサーバーからダウンロードしてきて ブラウザ 全 体 の 表 示 をすべて 破 棄 してから 次 の HTMLファイルの 表 示 を 始 める 多 くのサイトの 場 合 ヘッダ フッタ グロ ーバ ル ナ ビ や サ イドメニューなど 一 部 共 通 の H T M L を 表 示 している 部 分 があるかと 思 うが 通 常 のページ 遷 移 ではこれらもいったん 破 棄 して 再 同 じも の を 描 画 してい る 場 合 が 多 い しかし A j a x を 使 った ペ ージ 遷 移 を 行 う と ページ 上 にすでに 表 示 されている 素 で 変 更 の 必 のないものはそのまま 利 用 し 表 示 を 切 り 替 えたいコンテンツ 部 分 のみを 入 れ 替 えることが 可 能 となる 20 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

21 フォームなどでは 注 意 が 必 なケースもある jquery Mobileではこのページ 遷 移 の 方 法 を 採 用 することで ページの 切 り 替 え ごとにダウンロードされたり 再 描 画 されたりする 部 分 の 処 理 負 荷 や 転 送 量 が 軽 減 され 快 適 なペ ージ 閲 覧 が 可 能 に なる しかし Ajaxでの 遷 移 を 採 用 する 場 合 にフォームを 使 用 すると ページ 全 体 が 切 り 替 わらず 通 常 のページ 遷 移 の 際 に 受 け 渡 されていたformの 値 の 情 報 などの 扱 いが 大 きく 変 わってくるので その 部 分 だけAjaxを 無 効 化 させて 運 用 することも 多 い この Ajax によるページ 遷 移 の 不 具 合 を 解 消 する 方 法 については 次 の 法 則 で 解 説 する 通 常 のページ 遷 移 とAjaxのページ 遷 移 の 違 い 通 常 のページ 遷 移 HTML HTML HTML 通 常 のページ 遷 移 では ページ 遷 移 をするたびに 新 たに HTMLファイルの 情 報 を 読 み 込 む Ajax のページ 遷 移 HTML HTML HTML Ajaxのページ 遷 移 では 共 通 部 分 はそのまま 利 用 し 表 示 を 切 り 替 えたい 部 分 のみを 読 み 込 む 旧 この 部 分 だけ 破 棄 新 この 部 分 だけ 読 み 込 む 複 数 のページを 1つの HTML ファイルに 記 述 する 方 法 複 数 のページ 構 造 をもつサイトを 1つの H T M L ファイルで 制 作 するには 単 一 ページの div 素 である data-role="page" の 塊 を 複 数 作 り それぞれにidを 使 用 して 各 ページを 指 定 すれば いい ソースコードのように id="index" id="news" id="about" と 指 定 しておけば アンカーリンクから #index などにリンクす ることで それぞれのページに 遷 移 させることが 可 能 になる ま た HTMLファイルの 一 番 上 に 記 述 されたdata-role="page" の 素 が 最 初 のページとして 表 示 される 2 3 ページぐらい の 簡 単 な 構 造 のサイトを 制 作 するケースなら この 方 法 で 十 分 だろう この 方 式 のメリットとしては 複 数 の HTMLファイルにまた がらないので ヘッダやフッタを 何 も 記 述 せずに 済 むことや 一 のアクセスで HTMLファイルをすべてダウンロードできる ので ページ 遷 移 の 際 にロード 処 理 に 時 間 がかからないことが 挙 げられる デメリットとしては 1ページ 内 にすべての 素 を 記 述 するた め 内 容 が 多 くなればなるほど 可 読 性 が 損 なわれ また 1 回 の アクセスでダウンロードするファイルサイズが 大 きくなってしま うことだ 回 線 が 遅 いスマートフォンのサイトでは あまりに 大 きなサイトを1つの HTMLファイルで 制 作 してしまうと 致 命 的 になるおそれがあるので ページ 数 が 多 いならこの 法 則 で 解 説 した 複 数 の HTMLファイルに 記 述 する 方 法 を 選 んでほしい 複 数 のページを1つのHTMLファイルに 記 述 するHTML5 のコード <div data-role="page" id="index"> 1 ページ (トップページなど) <div data-role="page" id="news"> 2 ページ (ニュースリリース 新 着 情 報 など) <div data-role="page" id="about"> 3 ページ ( 会 社 概 など) 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 21

22 法 則 3 基 本 的 な 使 い 方 を 知 る Ajax によるページ 遷 移 の 不 具 合 を 解 消 する Ajaxを 使 わずに 複 数 ページを 相 互 に 遷 移 させる 法 則 2で 解 説 した Ajaxを 使 ったページ 遷 移 の 方 法 には 注 意 点 がある Ajaxを 使 うと 最 初 に 読 み 込 ま れ た ペ ー ジ に h e a d 素 が 依 存 してしまうた め 例 え ば 個 別 の CSSを 使 用 する 下 層 ページがある などの 理 由 でAjax 読 み 込 みを 行 いたく ない 場 合 も 出 てくるだろう そのような 場 合 ある 特 別 な 処 理 を 実 行 すれば Aja x 処 理 を 回 避 してページごとにロードしなおして 表 示 させることが 可 能 となる 多 くの 場 合 デフォルトのAjaxの 遷 移 を 使 うことになると 思 うのだが サーバー の 件 や J ava S c ript イベ ント のハンドリングの 方 法 によって A ja x の 遷 移 では デ ータの やり 取 りに 不 具 合 が 生 じてしまう 場 合 がある このような 場 合 非 A j a x 処 理 を 利 用 する の だ が そ れ に は 以 下 で 紹 介 する 4 通 り の 方 法 が あ る 状 況 に 応 じ て 使 い 分 けよう 関 連 する 法 則 2 Ajaxを 使 ったページ 遷 移 を 理 解 す る _P20 68 ページを 移 動 するたびにランダム に 画 像 を 切 り 替 える _P147 用 語 Ajax _P212 Ajaxを 非 使 用 にする 処 理 ページ 初 期 化 時 に Ajaxを 非 使 用 にするコード <script language="javascript"> $(document).bind("pageinit", function(){ $.mobile. ajaxenabled = false; }); </script> $.mobile.ajaxenabled = false; と 記 述 すれば jquery Mobileがページ を 初 期 化 した 際 に すべ てのリンクに お いて 非 同 期 処 理 を 行 わない という 指 定 が 可 能 となる 一 にすべてのリンクに 対 して 指 定 できるので サイト 全 体 でAjaxでの 遷 移 をまったく 行 わない 場 合 はこの 方 法 を 使 用 する a 素 で Ajaxを 非 使 用 にするコード <a href="./index2.html" rel="external"> 次 のページ </a> 特 定 のフォームだけAjaxの 遷 移 を 回 避 するコード <form data-ajax="false"></form> リンクごとにAjaxの 使 用 / 非 使 用 を 指 定 したい 場 合 は a 素 を 使 って 非 使 用 のリンクに rel="external" を 記 述 する サイト 全 体 では Ajaxを 使 用 するが 特 定 のページのみ 非 同 期 処 理 を 行 いたくない 場 合 などには この 方 法 を 使 用 する ある 特 定 のフォームだけ Ajaxで 遷 移 させたくない 場 合 は そのフォームに 対 して<form data-ajax="false">と 指 定 する 22 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

23 法 則 4 ボタン 素 を 理 解 する jquery Mobileに 用 意 されている ボタンを 把 握 する 用 途 やサイトのデザインに 合 わせてカスタマイズする PC サイトのリンクでは 青 い 文 字 にアンダーラインが 一 般 的 だが jquery M o bile では リンクにボタンの 指 定 をするだけで 自 動 的 にスマートフォンの 画 面 に 合 わせてボタンを 描 画 してくれる ここでは 用 途 やサイトのデザインに 合 わせて 自 在 にカスタマイズできるボタン 機 能 について 把 握 していこう デフォルトのボタンを 使 うには a 素 にui-btnクラスを 追 加 する これでリン クがボタンとして 表 示 される この デフォルトの 状 態 だと ボタンは 端 末 の 横 幅 100%で 作 られるブロック 素 のものとなる もっとコンパクトなボタンを 作 りたい 場 合 は ui-btn-inlineというクラスを 追 加 すれば 文 字 の 長 さに 応 じて 幅 がフィッ トするインライン 素 のボタンが 表 示 される また この ui-btn-inlineクラスを 指 定 すると 自 動 的 に 素 が fl o at されるようになり 追 加 したボタンが 順 番 に 横 に 並 ぶようになる 例 えば 保 存 や キャンセル などの 短 い 文 字 のボタンを 並 べた ときに 横 10 0 % のボタンが 縦 に 並 ぶと 見 栄 えも 悪 くタップしにくくなるため この 指 定 をして 端 末 の 横 幅 に 依 存 しないボタンにしたほうが より 使 いやすいサイトに なるだろう また デ フォルト の ボタンは 縦 にもある 程 大 きいためタップしや すくなってい るのだが 優 先 が 低 くかったりページ 内 のスペースが 狭 かったりするときなどは 小 さなボタンが 必 になるだろう その 際 は ui - mini というクラスを 指 定 すると コ ンパクトなボタンを 表 示 できる 関 連 する 法 則 5 ボタンにアイコンを 表 示 する _ P 2 5 用 語 インライン 素 _P213 ブロック 素 _P215 ユーザーインターフェース _P216 ボタンの 大 きさのカスタマイズ 例 デフォルトのボタンのコード <a href="#" class="ui-btm"> ボタン </a> ボタンの 横 幅 を 広 げるコード <a href="#" class="ui-btm ui-btm-inline"> ボタン </a> ボタンを 小 さくするコード <a href="#" class="ui-btm ui-mini"> ボタン </a> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 23

24 色 やデザインもカスタマイズできる 決 定 ボタンなど ボタン の 用 途 に よっては 色 を 変 更 した い 場 合 もあ るだろう そ の 場 合 は ui-btn-bのクラスを 追 加 すれば あらかじめjQuery Mobileに 用 意 され ている 別 のテーマに 合 わせて 色 を 変 更 できる この b というのは a と b という2 つのカラーテーマのうち b を 使 用 するという 意 味 だ( 省 略 した 場 合 は a が 採 用 される) テーマ 自 体 の 編 集 に 関 しては 法 則 42 43で 解 説 しているが 2 つのカラーテーマを 用 途 に 応 じて 使 い 分 けることで サイト 全 体 のバランスを 保 つように 制 作 を 進 められる 色 以 外 のカスタマイズも 可 能 だ ページのデザインによっては ボタンを 角 丸 に したり 影 を 付 けたりすることもあるだろう その 場 合 には ui-corner-allクラスや uishadowクラスを 追 加 することで 簡 単 に 角 丸 や 影 を 付 けることができる また 同 意 のチェックマークを 入 れるなど あるアクションを 行 わないとタップできないよう になっているボタンはui-state-disabledクラスを 使 うといいだろう これは 下 のサ ンプル のように ボタンがタップできない 無 効 の 状 態 で 表 示 されるので 何 らかの アクションを 起 こす 必 があることが 暗 黙 の 了 解 としてユーザーに 伝 わる ユーザーインターフェース(UI)は サイト 全 体 で 共 通 のデザインになっている ことが 好 ましく ページのデザイン 優 先 でページごとに 見 栄 えが 変 わってしまうと ユーザーを 混 乱 させてしまう しかし 必 に 応 じて 機 能 を 理 解 し 上 手 に 使 い 分 ければ 整 ったデザインのサイトを 作 成 することも 可 能 になる ボタンのデザインのカスタマイズ 例 ボタンの 色 を 変 えるコード <a href="#" class="ui-btn ui-btn-b"> ボタンテーマ </a> 無 効 ボタンを 作 るコード <a href="#" class="ui-btn ui-state-disabled"> ボタン </a> ボタンを 角 丸 にしたり 陰 を 付 けたりするコード <a href="#" class="ui-btn ui-corner-all"> 角 丸 のボタン </a> <a href="#" class="ui-btn ui-shadow"> 影 付 きのボタン </a> button 素 でのデザインを 無 効 にするコード <button data-role="none"> ボタン </button> 24 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

25 法 則 5 ボタン 素 を 理 解 する ボタンにアイコンを 表 示 する ボタンの 機 能 をイメージしやすくする 50 種 類 のアイコン jquery Mobileでは a 素 にui-icon-(アイコン 名 )というクラス 名 を 指 定 する だけで あらかじめ 用 意 されたアイコンを 表 示 できる 例 えば 右 の 例 では 削 除 の 文 字 を 入 れたボタンに アイコンを 表 示 させているが これは ui-icon-deleteと 指 定 している 他 にも 次 ヘ 進 む に 使 える アイコン や ホームに 戻 る に 使 え る アイコンなど ボタンの 機 能 をイメージしやすくするアイコンが 50 種 類 も 用 意 されている(アイコンの 種 類 は 次 ページを 参 照 ) 通 常 アイコンを 表 示 する 際 には ui-btn-icon-left(アイコンを 左 端 に 表 示 する) などのクラスを 併 せて 記 述 し ボタン 内 でのアイコン の 表 示 位 置 を 指 定 する 用 途 や 画 面 のレイアウトに 応 じてクラスを 指 定 して アイコンの 位 置 を 右 端 (ui-btnicon-right)やボタン 上 部 (ui-btn-icon-top)あるいは 下 部 (ui-btn-icon-bottom) に 表 示 させることも 可 能 だ 例 えば ボタンをタップすると 画 面 が 右 から 左 へ 遷 移 するようなサイトを 制 作 し ている 場 合 次 へ 進 む ボタンは ui-btn-icon-rightクラスを 追 加 して 右 端 にアイ コンを 表 示 したほうが その 後 の 画 面 の 遷 移 がイメージしやすい また 画 面 下 部 に 設 置 するタブバーでボタンを 使 用 するような 場 合 は 上 部 (ui - bt n - ic o n -to p)か 下 部 (ui-btn-icon-bottom)にアイコンを 表 示 すると ボタンがより 見 やすくタップ しやすくなる なお アイコンはデフォルトでは 左 端 に 表 示 されるため アイコンを 左 端 に 表 示 する 場 合 はクラスの 記 述 は 必 ない 削 除 ボタンにアイコンを 付 けるコード <a href="#" class="ui-btn ui-btn-inline ui-icon-delete"> 削 除 </a> ボタン 内 のアイコンの 位 置 を 変 更 する 左 寄 せ (デフォルト) アイコンをボタン の 右 端 に 表 示 アイコンをボタン の 上 部 に 表 示 アイコンを 右 端 に 表 示 するコード <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right"> 右 </a> アイコンを 上 部 に 表 示 するコード <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top"> 上 </a> アイコンを 下 部 に 表 示 するコード <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom"> 下 </a> アイコンをボタン の 下 部 に 表 示 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 25

26 アイコンだけ 表 示 させることもできる 歯 車 の 形 をしたアイコンなどは 多 くのスマートフォ ンアプリでも 設 定 画 面 などを 表 示 する 機 能 をもつた め アイコンだけ で 意 味 が 伝 わ るし 画 面 もスッキリする そのため ボタンとしての 形 や 文 字 などを 非 表 示 にし ア イコンだけの 簡 略 化 した 表 示 にしたいときもあるだろう そんなときはui-btn-icon-notextを 追 加 するだけでいい このときa 素 に 囲 われたテキストは 非 表 示 になり その 代 わりにリンクの title 属 性 として 自 動 的 に 設 定 される アイコンのみを 表 示 するコード <a href="#" class="ui-btn ui-btn-inline ui-icon-gear ui-btn-iconnotext"> アイコンのみ </a> jquery Mobileに 用 意 されている 主 なアイコン アイコン 記 述 方 法 アイコン 記 述 方 法 ui-icon-arrow-l ui-icon-refresh ui-icon-arrow-r ui-icon-forward ui-icon-arrow-u ui-icon-arrow-d ui-icon-delete ui-icon-back ui-icon-grid ui-icon-star ui-icon-plus ui-icon-alert ui-icon-minus ui-icon-info ui-icon-check ui-icon-home ui-icon-gear ui-icon-search ui-icon-bars ui-icon-edit 26 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

27 法 則 6 ボタン 素 を 理 解 する ページのヘッダに 戻 る ボタンを 表 示 する ページを 遷 移 してきたときだけ ヘッダに 戻 る ボタンを 表 示 させる スマートフォン のサイトでは ヘッダの 左 側 に 戻 る ボタンが 付 いているペー ジをよく 見 かけるが この 戻 る ボタンを 効 率 よく 設 置 するには 工 夫 が 必 だ jquery Mobileでヘッダに 戻 る ボタンを 設 置 するには data-role="header"の div 素 に 対 してdata-add-back-btn="true"というデータ 属 性 を 記 述 すればいい これはページに 直 接 ボタンを 記 述 しているわけではなく 単 体 の URL に 直 接 アク セスしたときには 戻 る ボタンは 表 示 されず 同 じサイトの 別 ページから 遷 移 して きたときだけボタンが 表 示 される 仕 様 になっている 例 えば メールやTwitterでURLを 知 らされてjQuery Mobileサイトのページを 表 示 したと する そ の 場 合 ペ ージ に h i s t o r y. b a c k など が 指 定 されてい る 戻 る ボ タンを 設 置 していると どのページにもリンクされていないボタンが 表 示 されてしま う しかし この 方 法 を 利 用 すれば 直 接 下 層 ページにアクセスしてきた 場 合 には 戻 る ボタンは 表 示 されず トップページからアクセスしてきた 場 合 には 戻 る ボ タン が 表 示 され h i s t o r y を 利 用 してもとの ペ ージ に 戻 ることが できる 関 連 する 法 則 8 ヘッダを 固 定 して 最 大 限 に 有 効 活 用 する _P31 用 語 history _P212 ヘッダに 戻 る ボタンを 表 示 する ヘッダに 戻 る ボタンを 表 示 するコード <div data-role="header" data-add-back-btn="true" data-back-btntext=" 戻 る "> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 27

28 戻 る ボタンをより 便 利 になるように 工 夫 する 戻 る ボタンは 自 動 的 に < B a c k のようなボタンがヘッダに 表 示 される 仕 様 になっている サイトによってはこの 文 字 を 日 本 語 に 変 えたい 場 合 も 出 てくるだ ろう その 場 合 は head 素 内 で1のサンプルのように 記 述 すれば 日 本 語 への 変 更 が 可 能 になる 全 ページにまとめて 戻 る ボタンを 表 示 して 効 率 よくサイトを 制 作 することも 可 能 だ 2のサンプルのように head 素 内 に scriptとして 記 述 す れば 自 動 的 に 下 層 ページすべてに 戻 る ボタンを 表 示 でき いちいち a 素 に data-rel="back"と 記 述 する 手 間 が 省 ける ただし 一 括 で 全 ページに 戻 る ボタ ンを 設 置 してしまうと 例 えばお 問 い 合 わせフォームなど 戻 る ボタンを 表 示 さ せたくないページにも 自 動 的 に 表 示 されてしまう そのような 場 合 は 戻 る ボタ ンを 表 示 させたくないページに3の 記 述 を 個 別 に 加 えておこう ここまで 解 説 してきたように ヘッダに 自 動 的 にボタンを 表 示 する 機 能 はとても 便 利 なのだが 普 通 の ページ 素 として 配 置 されているボタンや 文 脈 の 中 のリン クから 前 の ページに 戻 りたい 場 合 もあるだろう そのような 場 合 は 4 のサンプル のように a 素 を 記 述 することで 通 常 のボタンにも 戻 る ボタンとしての 機 能 を 付 与 することが 可 能 になる この 方 法 は ボタン に 直 接 記 述 するので ボタン の 装 飾 も 自 由 に 行 える ヘッダ に ボタンを 表 示 したくないときや サイト 特 有 のデザインの 戻 る ボタンを 設 置 した いときなどはこの 方 法 で 指 定 しよう なお この 設 定 を 行 った 場 合 a 素 の h ref 属 性 に 対 してどこの URL が 記 載 されていたとしても history をたどって 1ページ 前 に 戻 る 挙 動 になる 1 戻 る ボ タ ン の テ キスト を 変 更 す る コ ー ド <script type="text/javascript"><!-- $(document).bind("pageinit", function(){ $.mobile.toolbar.prototype.options.backbtntext = " 戻 る "; }); // --></script> 2サイト 全 体 の 下 層 ページに 戻 る ボタンを 表 示 するコード <script type="text/javascript"><!-- $(document).on("pageinit", function(){ $.mobile.toolbar.prototype.options.addbackbtn = true; $.mobile.toolbar.prototype.options.backbtntext = " 戻 る "; }); // --></script> 3 特 定 のページにだけ 戻 る ボタンを 表 示 させないコード <div data-role="header" data-add-back-btn="false"> 4リンクボタンなどに 戻 る 機 能 を 追 加 するコード <a href="#" class="ui-btn ui-btn-icon-left ui-icon-arrow-r" data-rel ="back"> 戻 る </a> アイコンの 影 と 枠 を 削 除 する アイコンの 周 りの 影 や 枠 もクラスの 追 加 や 削 除 によって 細 か く 指 定 できる その 方 法 はいたって 簡 単 で 影 を 追 加 したいと きはui-shadow-iconクラスを 追 加 し 枠 を 削 除 したいときは ui-nodisc-iconクラスを 追 加 すればいい さらにui-alt-iconを 指 定 すれば 白 塗 りのアイコンを 黒 塗 りに 変 更 することが 可 能 だ 28 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

29 法 則 7 ボタン 素 を 理 解 する 複 数 のボタンをグループ 化 して ユーザビリティを 高 める ボタンの 位 置 や 大 きさだけでなく グループ 化 もサイト 制 作 では 大 切 スマートフォンのサイト 制 作 では 限 られたスペースの 画 面 の 中 で いかにわか りやすくボタンを 配 置 し ユーザーを 目 的 のページに 誘 導 するか が 大 事 になってく る 雑 然 とボタンが 並 んでいるだけのサイト と ボタンが 機 能 ごとにグループに 分 かれているサイト とでは 後 者 のほうが 迷 いにくくなるので 快 適 にサイトを 閲 覧 させることが 可 能 になる そのためには ボタンの 位 置 や 大 きさを 調 節 するだけ でなく 複 数 のボタンをグループにまとめるなどの 工 夫 も 必 になる ボタンをグループ 化 する 複 数 のボタンをグループ 化 するには グループ 化 するボ タンを<div data-role="controlgroup"> で 囲 えばいい デフォルトでは 左 下 の 図 のようにボタンが 縦 に 並 んでグループ 化 される サンプルのように はい いいえ や 前 へ 次 へ でまとめるのもいいし カ テゴリ 分 けされたボタンにするのも 見 やすい ボタンの 用 途 を 考 えてレイアウトし て 使 いやすいサイトを 制 作 しよう 大 きなボタンを 複 数 まとめるだけなら 縦 並 びでもいいのだが はい いい え などの 選 択 肢 となっているボタンをまとめるときは 文 字 も 短 いため 左 右 に 余 白 ができてしまう このような 例 では 横 並 びにするといい div 素 に datatype="horizontal"を 追 加 すれば 横 並 びにできる 関 連 する 法 則 18 スマートフォンらしいタッチパネルを 生 かしたフォームを 利 用 する _ P49 用 語 div 素 _P212 ボタンをグループ 化 する ボタンを 横 並 びでグループ 化 する ボタンをグループ 化 するコード <div data-role="controlgroup"> <a href="#" data-role="button"> 戻 る </a> <a href="#" data-role="button"> 次 へ </a> <a href="#" data-role="button"> ホームへ 戻 る </a> デフォルトでは ボタンは 縦 に 並 ぶ ボタンを 横 並 びでグループ 化 するコード <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button"> はい </a> <a href="#" data-role="button"> いいえ </a> 文 字 数 が 少 な い ときは ボタンを 横 並 び に すると い い 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 29

30 グループ 化 したボタンにアイコンを 表 示 する グループ 化 したボタンの 横 にアイコンを 表 示 して 装 飾 したいときは それぞれの ボタン 素 に 対 して ui-icon-arrow-l ui-btn-icon-left などのクラスを 追 加 すればいい また ボタンエリアが 狭 い 場 合 やボタンの 優 先 が 低 い 場 合 などは d a t a - mini =" t r u e" を 追 加 して ボタンを 小 さく 表 示 させることも 可 能 だ ボタンエリ アが 極 端 に 狭 い 場 合 や 大 量 のボタンを 設 置 しなければならない 場 合 などは アイ コンのみをグルーピングして 表 示 できる グループ 化 したボタンのカスタマイズ 例 ボタンにアイコンを 付 けるコード <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-btn-inline ui-icon-arrow-l ui-btn-iconleft"> 前 へ </a> <a href="#" class="ui-btn ui-btn-inline ui-icon-arrow-r ui-btn-iconright"> 次 へ </a> 小 さなアイコン 付 きボタンにするコード <div data-role="controlgroup" data-type="horizontal" data-mini= "true"> <a href="#" class="ui-btn ui-btn-inline ui-icon-arrow-l ui-btn-iconleft"> 前 へ </a> <a href="#" class="ui-btn ui-btn-inline ui-icon-arrow-r ui-btn-iconright"> 次 へ </a> アイコンのみをグループ 化 するコード <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-alt-icon ui-nodisc-icon ui-corner-all uiicon-check ui-btn-icon-notext">ボタン </a> <a href="#" class="ui-btn ui-alt-icon ui-nodisc-icon ui-corner-all uiicon-delete ui-btn-icon-notext"> ボタン </a> アイコンをさらに 小 さくするコード <div data-role="controlgroup" data-type="horizontal" data-mini= "true"> <a href="#" class="ui-btn ui-alt-icon ui-nodisc-icon ui-corner-all uiicon-check ui-btn-icon-notext">ボタン </a> <a href="#" class="ui-btn ui-alt-icon ui-nodisc-icon ui-corner-all uiicon-delete ui-btn-icon-notext"> ボタン </a> 30 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

31 法 則 8 ツールバーを 理 解 する ヘッダを 固 定 して 最 大 限 に 有 効 活 用 する スクロールしても 隠 れないようにヘッダを 固 定 する スマートフォンサイトに 限 らず Web サイトでは 多 くの 場 合 共 通 の ヘッダ と フッタ が 用 意 されている サイト 共 通 の ヘッダやフッタを 設 置 すれば サイ ト 全 体 の 共 通 性 が 保 たれて 導 線 がわかりやすくなるからだ jquery Mobile の デフォルトのヘッダは 法 則 1で 説 明 したようにページの 上 部 である<div datarole="page"> のすぐあとに data-role="header"を 指 定 したdiv 素 を 記 述 する ことでページに 追 加 できる また ヘッダのバー 内 には h 1 素 でページのタイト ルを 入 れておけば サイトやページのタイトルを 表 示 することが 可 能 となる デフォルトでは ヘッダはページ 上 部 に 設 定 され ページをスクロールすると 消 えていってしまう しかし data-role="header"を 指 定 した div 素 に dataposition="fixed"を 追 加 すれば スクロールしても 常 にページ 上 部 に 固 定 表 示 させ られる 下 層 の ページなどで 長 文 が 続 く 場 合 は 固 定 表 示 させたヘッダに 戻 る ボタンを 表 示 させておくのも 親 切 な 設 計 といえる 関 連 する 法 則 46 サイト 全 体 に 共 通 でヘッダ フッタ を 固 定 表 示 する _P101 用 語 カスタムヘッダ _P213 デフォルトの ヘッダ スクロールしてもヘッダが 表 示 されるように する デフォルトのヘッダのコード <div datarole="page"> <div data-role="header"> <h1> ヘッダ </h1> スクロールしてもヘッダが 表 示 されるようにするコード <div datarole="page"> <div data-role="header" data-position="fixed"> <h1> ヘッダ( 固 定 表 示 )</h1> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 31

32 ヘッダに 2 つのボタンを 表 示 する 法 則 6 ではヘッダに 戻 る ボタンを 表 示 する 方 法 を 解 説 したが それ 以 外 にも ヘッダには 何 をするかわかりやすいボタン を 表 示 するといいだろう 入 力 をキャ ンセルするときに 使 う 取 消 ボタンや ダウンロードしたファイルなどを 保 存 する ときなどに 使 う 保 存 ボタンなど ヘッダにあると 便 利 なボタンにはさまざまなケー スが 考 えられる また ヘッダの 左 右 にそれぞれ ボタンを 表 示 させたいこともある だろう ヘッダの 左 右 にボタンを 表 示 させるには (1)<div data-role="header"> 内 に a 素 で 左 側 のボタンの 記 述 ( 2)<h1> </h1>でページタイト ルの 記 述 ( 3)さらに a 素 で 右 側 のボタンの 記 述 のようにすればいい なお 右 側 だけにボタンを 表 示 させたい 場 合 は ボタン 素 内 にclass="ui-btnright"と 指 定 する 左 側 だけにボタンがあるとユーザーは 戻 る ボタンだと 勘 違 い しやすいので 気 を 付 けよう ヘッダの 左 右 にボタンを 表 示 する ヘッダの 右 側 だけにボタンを 表 示 する ヘッダにボタンを 追 加 するコード <div data-role="header"> <a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-iconleft"> 削 除 </a> <h1> ヘッダ </h1> <a href="#" class="ui-btn ui-btn-inline ui-icon-check ui-btn-iconleft"> 保 存 </a> ヘッダの 右 側 にボタンを 表 示 するコード <div data-role="header"> <h1> ヘッダ </h1> <a href="#" class="ui-btn ui-nodisc-icon ui-corner-all ui-icon-check ui-btn-icon-notext ui-btn-b ui-btn-right"> ボタン </a> カスタムヘッダを 作 成 する 共 通 のヘッダではあまり 自 由 なレイアウトはできない 例 えばヘッダにロゴ 画 像 を 入 れるなどの 工 夫 をしたい 場 合 は data-role="header"を 使 用 せず 直 接 div 素 にclass="ui-bar ui-bar-a"などを 指 定 しよう これだけで 下 のサンプルのように 横 100%のボタンが 入 るような 自 由 なレイアウトのヘッダを 作 ることが 可 能 だ こ のように ある 程 柔 軟 なレイアウトが 可 能 なのもjQuery Mobile の 強 みといえ る カスタムヘッダで 自 由 にレイアウトする バーにボタンを 追 加 するコード <div class="ui-bar ui-bar-a"> <div data-role="controlgroup" data-type="horizontal" data-mini= "true"> <a href="#" class="ui-btn ui-btn-inline">1</a> <a href="#" class="ui-btn ui-btn-inline">2</a> <a href="#" class="ui-btn ui-btn-inline">3</a> 32 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

33 法 則 9 ツールバーを 理 解 する フッタのレイアウトを 調 整 して 見 やすくする フッタを 固 定 表 示 させて 必 な 情 報 を 常 に 表 示 させる 法 則 8 ではヘッダのカスタマイズ 方 法 を 解 説 したが ここでは フッタ について 解 説 しよう ページの 下 部 に 表 示 するフッタには 主 にコピーライトや サイト 全 体 で 表 示 させなければならないが 優 先 順 位 の 低 いリンク( 例 えば 会 社 案 内 など)を 設 置 することが 多 い デフォルトのフッタをページに 表 示 するには <div data-role="page"> の 閉 じタ グのすぐ 上 に data-role="footer"を 指 定 したdiv 素 を 設 置 すればいい また コ ピーライトをp 素 で 入 れようとすると デフォルトの 場 合 は 画 面 左 にピッタリくっ つ いた 状 態 で 表 示 されてしまう 細 か いところだが スタイルシートで 調 整 してきれ いに 表 示 させたほうがいいだろう 法 則 8 のヘッダと 同 様 に フッタを 固 定 して スクロールしても 常 に 表 示 させた いときは data-position="fixed"と 指 定 すればいい スクロール 位 置 にかかわらず 常 に 画 面 の 下 部 にフッタを 表 示 できる 関 連 する 法 則 48 レイアウトを 工 夫 してフッタを 活 用 し サ イトをより 見 や すくす る _ P 用 語 グローバルナビ _P214 スタイルシート _P214 フッタにコピーライトを 入 れる フッタにコピーライトを 入 れるコード <div data-role="footer"> <p> jquery Mobile 100 の 法 則 </p> CSSで 画 面 左 に 空 きを 入 れるコード.ui-footer { padding: 0 10px; font-weight: normal; font-size:.8em; } スクロールしてもフッタが 隠 れないように 固 定 する フッタを 固 定 するコード <div data-role="footer" data-position="fixed"> <p> jquery Mobile 100 の 法 則 </p> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 33

34 フッタにボタンを 表 示 する 際 の 注 意 点 フッタにグループボタンを 設 置 する 場 合 は デフォルト のマージン 設 定 では 思 った 通 りにレイアウトされないこと があ る そ の 際 に は c l a s s = " u i - b a r " を 指 定 したり 法 則 8 のように 個 別 にスタイルを 設 定 したりするなどして レイ フッタのボタンをグループ 化 する ア ウト が 崩 れ な い よう に 調 整 す る と い い だ ろう ま た フ ッ タにサイトマップなどのボタンを 設 置 したい 場 合 は サン プルのように a 素 を 挿 入 すればいい フッタにリンクボタンを 設 置 する フッタのボタンをグループ 化 するコード <div class="ui-bar ui-bar-a"> <div data-role="controlgroup" data-type="horizontal" data-mini= "true"> <a href="#" class="ui-btn ui-btn-inline">1</a> <a href="#" class="ui-btn ui-btn-inline">2</a> <a href="#" class="ui-btn ui-btn-inline">3</a> フッタにリンクボタンを 設 置 するコード <div data-role="footer"> <a href="#" class="ui-btn"> サイトマップ </a> <a href="#" class="ui-btn"> プライバシーポリシー </a> ヘッダとフッタの 使 い 方 ヘッダにはサイトのタイトル や 検 索 ボタン フッタには 社 名 やサイトマップなど サイトの 種 類 によってはヘッダとフッタに 入 れる 素 がだいたい 決 まっている これは 異 なるサイトで あっても 同 じ 場 所 に 同 じ 機 能 のボタンがあれば ユーザーに とって 非 常 に 使 いやすくなるからだ コンテンツの 優 先 順 位 な ども 含 めて 考 える 必 があるが サイトレイアウトの 段 階 でど んな 素 を 入 れるか 迷 ったら 他 のサイトと 見 比 べて 検 討 する のもいいだろう 例 えば jquery Mobileを 使 用 したサイトを 集 めた jquery Mobile Gallery などを 見 てみると 非 常 にわかりやすい ヘッ ダには ロゴだけがあるケースも 多 いが プルダウンメニューで サイトの 主 なコンテンツへの 導 線 やログイン 機 能 が 格 納 され ているケースも 多 いことがわかる フッタには PC サイトへの 表 示 機 能 の 切 り 替 えやサイトの 概 などへのコンテンツが 格 納 されているケースが 多 い さらに 画 面 下 部 にグローバルナビのような 用 途 のボタンが 設 置 される 場 合 には タブナビゲーションが 使 用 されることが 多 い さまざまなデザイン 例 が 参 考 になる jquery Mobile Gallery jquery Mobile Gallery 34 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

35 法 則 10 ツールバーを 理 解 する 複 数 ページにまたがるコンテンツを 自 由 に 行 き 来 する ナビゲーションバーを 使 ってページを 切 り 替 える jquery Mobile のツールバーには ヘッダとフッタ 以 外 に ナビゲーションバー というものが 用 意 されている これは 複 数 のボタンがセットになったグループで 構 成 されているものだが そのうちの1つのボタンがあらかじめ 選 択 されて 表 示 さ れ るように なってい る こ の ナ ビゲ ーシ ョン バ ー は 複 数 の ペ ージ に ま た が るコ ン テ ツを 相 互 に 行 き 来 するような 構 成 のサイトで 使 用 するといい 例 えば 全 国 の 店 舗 一 覧 のページで 地 区 ごとに 切 り 替 えられるようにしたり 製 品 情 報 などを 一 覧 表 示 しているページでテキストや 画 像 表 示 を 切 り 替 えたりするときなどに 便 利 だろう ナビゲーションバーを 使 用 するには data-role="navbar"というデータ 属 性 を 使 用 する あらかじめ 選 択 された 状 態 にしたいボタンは class="ui-btn-active"と 記 述 しておく こうすることで ページがロードされた 初 期 状 態 で このボタンが アク ティブな 状 態 になる( 初 期 状 態 以 降 は タッチされたボタンがアクティブになる) また navbar 内 のリスト 素 (ul)に 複 数 のli 素 を 入 れればボタンを 増 やすこ ともできる ボタンが1つの 場 合 は 横 100%で 表 示 され 2 つ 5つまでの 間 は 横 並 びにボタンが 並 ぶ 6 つ 以 上 のボタンをグループ 化 した 場 合 には 一 番 下 のサン プルのように 2 列 の 複 数 行 で 表 示 されるようになっている 関 連 する 法 則 55 タブナビゲーションに 通 知 件 数 ア イコンを 入 れる _P 作 成 したリストをタブで 切 り 替 えら れるようにする _P185 用 語 タブナビゲーション _P214 ナビゲーションバー _P215 ナビゲーションバーの 使 用 例 ボタンが 2 つのナビゲーションバー ボタンが 2 つのナビゲーションバーを 作 るコード <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">1</a></li> <li><a href="#">2</a></li> </ul> ボタンが 5 つのナビゲーションバー ボタンが6つ 以 上 あるときは 複 数 行 で 表 示 される 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 35

36 ナビゲーションバーの 位 置 を 変 える ナビゲーションバーは その 用 途 から 多 くはヘッダのすぐ 下 か フッタのす ぐ 上 のどちらかで 使 用 される 例 えばヘッダのすぐ 下 に 表 示 する 場 合 は datarole="header"のタグ 内 に 下 のサンプルのように 記 述 する ナビゲーションバーをヘッダの 下 に 表 示 する ナビゲーションバーをフッタの 上 に 表 示 する ヘッダの 下 に 表 示 するコード <div data-role="header"> <h1> ヘッダ </h1> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> ヘッダのすぐ 下 に 表 示 する 場 合 は data-role="header"のタグ 内 に 記 述 する 別 のテーマのナビゲーションを 使 用 する フッタの 上 に 表 示 するコード <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="bottom"> <ul> <li><a href="#" data-icon="grid" class="ui-btn-active">ボタン </a></li> <li><a href="#" data-icon="star"> ボタン </a></li> <li><a href="#" data-icon="gear"> ボタン </a></li> </ul> フッタの 上 に 表 示 すれば グローバルナビのように 使 うこともできる こうする ことで iphoneアプリなどでよく 使 われるタブナビゲーションのようなUIを 簡 単 に 実 現 できる 別 々のテーマのボタンを 並 べて 使 用 する ナビゲーションのテーマを 変 えるコード <div class="ui-body ui-body-b"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active" data-icon="grid" datatheme="a">a</a></li> <li><a href="#" data-icon="star">b</a></li> <li><a href="#" data-icon="grid">a</a></li> <li><a href="#" data-icon="star">b</a></li> </ul> 親 の 素 にテーマを 指 定 すると ボタン 全 体 のテーマカラーを 変 更 することが 可 能 だ ui-bodyだったらui-body-bを ui-barだったらui-bar-bを 追 加 すれば サンプルのような 黒 い B のテーマになる 別 々のテーマのボタンを 並 べるコード <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active" data-icon="grid" data-theme ="a">a</a></li> <li><a href="#" data-icon="star" data-theme="b">b</a></li> <li><a href="#" data-icon="grid" data-theme="a">a</a></li> <li><a href="#" data-icon="star" data-theme="b">b</a></li> </ul> ボタン 単 体 でテーマを 変 更 したい 場 合 は a 素 に 個 別 にテーマを 指 定 する 36 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

37 法 則 11 リストで 情 報 を 整 理 する リストを 使 ってコンテンツを 階 層 化 する jquery Mobileの 特 徴 の1つである 豊 富 なリスト 表 示 スマートフォンは P C と 比 べると 画 面 が 小 さく グローバルナビ コンテンツ バ ナー サイトマップなど サイトに 必 な 数 多 くの 素 を 1 ページに 収 めるのは しい そのため 必 然 的 にサイト の 導 線 を 一 望 できる 一 覧 ページが 増 え 階 層 構 造 の 多 いページ 構 成 になる jquery Mobileにはそうした 階 層 構 造 を 苦 労 なく 実 現 し さまざまな 一 覧 ページを 制 作 できる 豊 富 な 種 類 の リスト が 用 意 されている リストの 作 成 は ul 素 に data-role="listview"というデータ 属 性 を 指 定 するだ けだ li 素 の 中 に a 素 でリンクを 設 定 すれば 右 向 きの 矢 印 が 表 示 されて 次 のページへのリンクも 生 成 される リストは スマートフォンサイトで 必 ずといっていいほど 使 用 される U I だが アン カータグの 有 無 やアイコンの 違 い リストに 入 れるテキストの 内 容 などで さまざ まなケースを 想 定 しなければならず CSS の 修 正 が 多 く 発 生 し 実 装 にとても 苦 労 する jquery Mobileを 使 えばこうしたケースを 特 に 意 識 せずに きれいな 表 示 の サ イトを 制 作 で きるところが 魅 力 の 1 つ だと いえる 次 の ペ ージ から 見 出 しで 区 切 ったリストや 番 号 付 きのリストなど さまざまなリストを 解 説 しているので サイ トの 内 容 に 合 わせて 最 適 なものを 見 つけてほしい 関 連 する 法 則 33 パネルウィジェットにリストを 設 置 してより 多 くのリンクを 表 示 させる _P82 41 複 雑 になりがちなリストを 見 やすく する _P96 用 語 アンカータグ _P213 リスト _P216 デフォルトのリスト デフォルトのリストを 記 述 するコード <ul data-role="listview"> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> </ul> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 37

38 さまざまなコンテンツに 対 応 するリスト 形 式 タイトル 行 を 入 れられる 区 切 りリスト 店 舗 一 覧 や 製 品 一 覧 などのページを 作 成 するとき リストの 項 目 を あ 行 か 行 などで 分 類 することがある その 際 指 定 した 項 目 の 色 を 変 更 してタ イトルとして 使 用 して 区 切 るリストにしたい 場 合 があるだろう そんなときは 色 を 変 えたい 項 目 に 対 して<li data-role="list-divider">あ 行 </li> のように list-divider 属 性 を 指 定 すればタイトル 行 が 作 成 できる また list-dividerを 指 定 した 親 ul 素 に 対 して data-dividertheme="(テーマ ID)"とテーマを 指 定 すれば 区 切 りリストの 色 を 変 えることもできる 単 に 羅 列 されただけのリストは 非 常 に 可 読 性 が 低 く ユーザーが 目 的 の 項 目 を 探 し 出 すのが 困 になるので 必 に 応 じて 色 付 きの 区 切 りリストを 使 用 するとい いだろう このように わかりや すく 区 切 ることが 親 切 な 設 計 につな がるのだ リストを 区 切 るコード <ul data-role="listview"> <li data-role="list-divider"> 区 切 りの 名 前 <span class="ui-licount">1</span></li> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> </ul> ランキングなどに 最 適 な 番 号 付 きリスト ランキングや 箇 条 書 きなどには 番 号 付 きのリストが 必 だろう 番 号 付 きの リストは 通 常 の HTM L の 番 号 リストと 同 様 に ol 素 を 使 えば 作 成 できる リストに 番 号 を 付 けるコード <ol data-role="listview"> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> </ol> 複 雑 な 挙 動 が 設 定 できる 分 割 ボタンリスト 1つのリスト 行 に 複 数 のリンクを 設 定 したい 場 合 data-split-icon="info"な どでアイコンを 設 定 し li 素 の 中 にリンクを 2 つ 作 成 すれば 分 割 されたリ ストの 左 右 それぞれをクリックしたときの 挙 動 を 別 のものに 設 定 できる 例 えば 映 画 のタイトルを 紹 介 するリストなどで リストのテキスト 部 分 はそのタ イトルの DVD 購 入 ページにリンクし 右 側 の i ボタンだけをタップしたとき だけ 詳 細 ページヘリンクさせるなど 複 雑 な 挙 動 を 設 定 することが 可 能 にな る リストに 分 割 ボタンを 付 けるコード <ul data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="true"> <li> <a href="#"> リスト </a> <a href="#" data-rel="popup" data-position-to="window" datatransition="pop">icon</a> </li> </ul> 38 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

39 リストにアイコンなどの 情 報 を 入 れる 数 字 の 入 ったカウントアイコン 付 きリスト 最 近 スマートフォンのアプリを 触 っていると メールの 受 信 件 数 や 未 読 件 数 など 数 字 の 入 ったアイコンで 表 示 されているUI がよく 採 用 されている このよ うなカウントアイコンは リストに<span class="ui-li-count"> 62</span> などと 記 述 すればいい リストにカウントアイコンを 付 けるコード <ul data-role="listview" data-count-theme="b" data-inset="true"> <li><a href="#"> リスト <span class="ui-li-count">12</span> </a></li> <li><a href="#"> リスト <span class="ui-li-count">0</span> </a></li> <li><a href="#"> リスト <span class="ui-li-count">4</span> </a></li> </ul> 商 品 紹 介 に 最 適 なサムネイル 付 きリスト リストの 中 に img 素 を 記 述 することで サムネイル 付 きのリストが 作 成 でき る E C サイトの 商 品 紹 介 はもちろん 新 着 情 報 一 覧 のアイキャッチなどに 使 用 すると 効 果 的 だ リストにサムネイルを 付 けるコード <ul data-role="listview"> <li> <a href="#"> <img src="images/thumb.jpg" /> <h3> リスト </h3> <p> 概 </p> </a> </li> </ul> 下 層 の 情 報 を 推 測 しやすいアイコン 付 きリスト サムネイルほど 大 きな 画 像 が 必 ではないときや ちょっとしたアイコンをリ ストに 表 示 したいときは img 素 にclass="ui-li-icon"を 指 定 すれば 小 さな アイコン 付 きリストが 作 成 できる アイコンを 使 って 下 層 の 情 報 を 表 示 すれ ば ユーザーは 遷 移 先 の 情 報 を 予 測 できるようになるので 無 駄 な 遷 移 が 減 り より 快 適 にサイトを 閲 覧 できるようになる リストにアイコンを 付 けるコード <ul data-role="listview"> <li><a href="#"><img src="images/icon.jpg" class="ui-li-icon"> リスト </a></li> <li><a href="#"><img src="images/icon.jpg" class="ui-li-icon"> リスト </a></li> </ul> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 39

40 グローバルナビより 優 先 の 低 い 項 目 で 使 うインラインリスト 角 丸 の 左 右 に 余 白 のあるインラインリスト デフォルトのリストは 横 幅 が 100 % の 状 態 で 生 成 されるが これに datainset="true"を 付 けて 指 定 すると 角 丸 の 左 右 に 余 白 のあるリストが 作 成 で きる グローバルナビより 優 先 が 低 い 項 目 を 作 成 するときや メリハリを 付 けたデザインにしたいときなどに 便 利 だ インラインリストを 記 述 するコード <ul data-role="listview" data-inset="true"> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> </ul> リストの 色 を 変 更 する リストの 色 を 変 更 するには ul 素 に 別 のテーマを 指 定 すればいい やり 方 は 簡 単 でul 素 に 対 してdata-theme="b" data-divider-theme="b" datacount-theme="b"などのデータ 属 性 を 追 加 すればいい テーマについては 法 則 を 参 照 の こと リストの 色 を 変 更 するコード <ul data-role="listview" data-inset="true" data-theme="b" datadivider-theme="b" data-count-theme="b"> <li data-role="list-divider"> タイトル </li> <li><a href="#" data-theme="a"> リスト <span class="ui-licount">12</span></a></li> <li><a href="#"> リスト <span class="ui-li-count">0</span> </a></li> <li><a href="#"> リスト <span class="ui-li-count">328</span ></a></li> </ul> アイコンのテーマを 変 更 する リストビューの 右 端 に 追 加 されるアイコンのテーマだけを 変 更 することも 可 能 だ ul 素 に 対 してui-alt-iconや ui-icon-bなどを 指 定 すれば 各 リストに 追 加 されるアイコンの 色 を 変 更 することができる アイコンのテーマを 変 更 するコード <ul data-role="listview" data-inset="true" class="ui-alt-icon ui-icon-b ui-nodisc-icon"> <li> <a href="#"> リスト </a> </li> </ul> <ul data-role="listview" data-inset="true" class="ui-alt-icon ui-icon-b"> <li> <a href="#"> リスト </a> </li> </ul> 40 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

41 法 則 12 リストで 情 報 を 整 理 する 読 み 込 み 専 用 のリストを 使 用 する jquery Mobile 1.2 以 降 では タップできない 読 み 込 み 専 用 リストが 利 用 できる jquery Mobileのバージョン1. 2から 新 たな 機 能 として 読 み 込 み 専 用 のリスト が 作 成 できるようになった これまでは リスト 項 目 にリンクを 設 定 しなかった 場 合 リンクがないこと(タップできないこと)は 右 側 のリンクアイコンが 削 除 され ることで 表 現 されていたが 読 み 込 み 専 用 リストでは グラデーションのない 少 し 暗 いフラットなデザインにすることでタップできないことを 表 現 している タッチパネルで 操 作 するスマートフォンサイトにおいては 不 慣 れな 人 のタップ ミスを 防 ぐため タップできるかどうかの 判 別 がひと 目 でつくことは 非 常 に だ ろう 例 えば 箇 条 書 きの 項 目 を 読 ませるため のリストと クリックして 下 層 に 誘 導 させるためのリストとをうまく 使 い 分 ければ より 見 やすいサイトになるだろう 読 み 込 み 専 用 リストの 作 成 方 法 はいたって 簡 単 で 通 常 ならリンク 用 に<li><a href="#"> リスト </a></li> としていたリスト 項 目 を a 素 を 削 除 して<li> リスト </li>とするだけでよい なお 読 み 込 み 専 用 リストには.ui-li-staticというセレクタ が 割 り 当 てられているので デザインを 変 更 したい 場 合 には.ui-li-staticのスタイル を 上 書 きすれば 任 意 のデザインの 読 み 込 み 専 用 リストを 作 成 できる 関 連 する 法 則 33 パネルウィジェットにリストを 設 置 してより 多 くのリンクを 表 示 させる _P82 41 複 雑 になりがちなリストを 見 やすく する _P96 用 語 読 み 込 み 専 用 リスト _P216 読 み 込 み 専 用 リスト インラインの 読 み 込 み 専 用 リスト 読 み 込 み 専 用 リストのコード <ul data-role="listview"> <li> リスト </li> <li> リスト </li> <li> リスト </li> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 41

42 法 則 13 リストで 情 報 を 整 理 する リストに 自 動 で 区 切 りを 挿 入 する jquery Mobile 1.2 以 降 では 自 動 で 区 切 りが 挿 入 されるようになった jquery Mobile のバージョン1. 2 から 新 しく 自 動 で 区 切 りリストを 挿 入 する 機 能 が 加 わった 従 来 は 区 切 りリストが 必 になるたびにdata-role="list-divider"で 区 切 って 見 出 しを 作 成 してい た が この 機 能 に よりそ の 手 間 が 省 け て 更 新 のしや すさが アップした また 区 切 りリストに 挿 入 される 文 字 は その 頭 文 字 に 大 文 字 や 小 文 字 が 混 在 していても 同 じグループとしてまとめられる リストビューは 店 舗 一 覧 などに 利 用 されることが 多 いと 思 うが この 機 能 はアルファベットだけでなく 漢 字 や 数 字 でもそ の 頭 文 字 をもとにリストに 変 換 してくれるので いろいろなリストに 応 用 できる 自 動 で 区 切 りリストを 挿 入 する 区 切 りリストを 挿 入 する 方 法 も 簡 単 になっていて リストビューにdata-autodividers ="true"を 加 えるだけで 頭 文 字 が 変 わるたびに 自 動 的 に<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b">a</li> のような 区 切 りがコード に 挿 入 される これにより iosの 標 準 の 連 絡 先 アプリのように 一 覧 性 が 大 きく 向 上 した 関 連 する 法 則 33 パネルウィジェットにリストを 設 置 してより 多 くのリンクを 表 示 させる _P82 41 複 雑 になりがちなリストを 見 やすく する _P96 用 語 区 切 りリスト _P214 ソート _P214 区 切 りリストの 例 区 切 りリストのコード <ul data-role="listview" data-autodividers="true"> <li><a href="#">aichi</a></li> <li><a href="#">akita</a></li> <li><a href="#">aomori</a></li> </ul> i O S 標 準 の 連 絡 先 アプリのような 区 切 り のあるリストが 自 動 的 に 作 成 される 自 動 的 に 変 換 された 見 出 し 付 きリストのコード <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b">a</li> <li><a href="#">aichi</a></li> <li><a href="#">akita</a></li> <li><a href="#">aomori</a></li> <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b">e</li> <li><a href="#">ehime</a></li> <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b">g</li> <li><a href="#">gifu</a></li> <li><a href="#">gunma</a></li> 42 第 1 章 jquery Mobileの 基 本 を 知 る 法 則