【お試し版】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の 基 本 を 知 る 法 則

43 ソート 機 能 がないことに 注 意 自 動 で 区 切 りを 挿 入 する 機 能 は 自 動 で 頭 文 字 を 検 索 して 区 切 ってくれるので 非 常 に 便 利 だが データをソート してくれる 機 能 はない 例 えば 右 の 例 のように 順 番 が 錯 綜 してしまっていても HTMLに 記 載 されているli 素 の 順 番 どおりに 区 切 りを 挿 入 してしまい 同 じ 見 出 しが 複 数 回 表 示 されてしまう 自 動 で 生 成 してくれるのが 便 利 なの でつい 見 落 としがちだが このようなことがないように 納 品 前 には 入 念 にチェックして 手 動 でソートしておきたい ソートされていない HTML のコード <li><a href="#">aichi</a></li> <li><a href="#">akita</a></li> <li><a href="#">ehime</a></li> <li><a href="#">aomori</a></li> リスト 素 の 独 自 デザイン Webサイトでリスト 素 を 使 用 するのは この 法 則 で 紹 介 しているような 一 覧 表 のようなものから グローバルナビゲー ション ニュースリスト フッタの ナビゲーションなど 多 岐 にわ たる こ の ようにさまざまな 役 割 があ るリスト 素 を W e b サ イ ト 内 で 効 率 的 に 配 置 し かつユーザーを 迷 わせないようにする には 同 じリスト 素 であっても 役 割 や に 応 じてデザイ ンを 異 なるものにする 必 がある jquery Mobileには 役 割 に 合 わせたさまざまなリストが 用 意 されて い て そ うし た リスト を 利 用 して も い い が 独 自 デ ザ イ ン で 作 成 することも 可 能 だ 独 自 デザインにしたいときは 通 常 の HTMLの CSS の 適 用 と 同 様 に <ul data-role="listview"></ ul>としていたところを <ul class="list"></ul> に 変 更 し そ こに CSS を 適 用 するだけだ リスト 素 に 独 自 デザインを 適 用 するコード.list { margin: -16px; padding: 0; position: relative; }.list li { border-bottom: 1px solid #E4E0BE; list-style: none; float: left; width: 50% ; }.list li:nth-child(odd) a { border-right: 1px solid #E4E0BE; }.list li a { text-decoration: none; font-size: 12px; font-weight: normal; color: #777; padding: 10px; display: block; text-align: center; background: #FFFBD5; } jquery Mobileに 標 準 で 備 わっている 区 切 りリストに 独 自 のデザインを 適 用 させ た こ の ように 2 段 組 にして 色 を 付 けることもで きる こちらは 3 段 組 にして 色 を 水 色 に 変 えた 例 狭 い 端 末 の 画 面 で 多 くの 情 報 が 一 覧 可 能 となる 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 43

44 法 則 14 リストで 情 報 を 整 理 する 新 着 リストに 更 新 時 間 を 表 示 する 新 着 リストに 更 新 時 間 を 表 示 して 最 新 情 報 の 鮮 を 伝 える 1 日 に 2 件 ほどの 更 新 があるサイトを 想 定 してみよう 1 日 に 数 件 の 更 新 がある 更 新 頻 の 高 いサイトでは 最 新 の 情 報 の 鮮 がわかるように 更 新 日 や 更 新 時 間 の 表 示 も 必 になってくる そこでこの 法 則 では 区 切 りリストを 利 用 して 新 着 情 報 ページを 作 成 し リストの 見 出 し 部 分 に 更 新 日 を リストの 項 目 部 分 に 更 新 時 間 を 表 示 する 方 法 を 解 説 する jquery Mobileでは 正 しいHTMLの 記 述 方 法 で 指 定 することで h3 素 など の な 情 報 は 大 きく p 素 などの 概 情 報 は 小 さく 優 先 に 合 わせてレイア ウトしてくれる これを 利 用 して 見 やすい 新 着 情 報 ページを 作 成 する 日 付 ごとに 区 切 りを 入 れて 全 体 の 更 新 頻 を 把 握 できるようになっている 更 新 日 と 更 新 時 間 を 表 示 する 方 法 1 リストの 情 報 を 入 力 する リストを 作 成 し サンプルコードのようにli 素 で 囲 まれた 中 に 必 な 情 報 を 入 力 していく 下 層 の 情 報 がひと 目 でわかることが なので h 3 素 でタイトル p 素 で 概 がわかる 情 報 必 であれば strong 素 などを 使 用 して キャッチコピーなどを 入 れる リストの 情 報 を 入 力 するコード <li><a href="#"> <h3> イベント 情 報 </h3> <p><strong> 詳 細 テキスト 詳 細 テキスト </strong></p> <p> 詳 細 テキスト 詳 細 テキスト 詳 細 テキスト 詳 細 テキ スト 詳 細 テキスト </p> </a></li> 2 更 新 時 間 を 表 示 する p 素 に class="ui-li-aside"クラスを 指 定 すると その 行 の 右 上 に 文 字 を 表 示 することができる 今 回 はここに 更 新 時 間 を 入 力 する 更 新 時 間 を 表 示 するコード <p class="ui-li-aside"><strong>7:32</strong>am</p> 3 日 付 ごとに 区 切 りを 入 れる 法 則 11で 解 説 したように li 素 にlist-divider データ 属 性 を 指 定 すればタイトル 行 を 作 成 できる 日 付 ごとに 区 切 りを 入 れるコード <li data-role="list-divider">2012 年 7 月 2 日 </li> 44 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

45 法 則 15 リストで 情 報 を 整 理 する 画 像 と 簡 単 な 情 報 をまとめた 商 品 一 覧 ページを 作 成 する さまざまなリスト 形 式 を 組 み 合 わせる 法 則 11で 解 説 したさまざまなリスト 形 式 を 組 み 合 わせることで ショッピングサ イトのDVD 情 報 のような 画 像 と 簡 単 な 情 報 をまとめた 商 品 一 覧 ページを 作 成 できる 同 じリストを 使 用 しても 法 則 14 で 解 説 した 新 着 情 報 のリストと DV D 情 報 などの 商 品 リストでは 役 割 も 使 い 方 も 異 なるため その 見 栄 えも 変 える 必 があ る 必 な U I を 使 用 し 見 栄 えのよ いリストが 作 れるように 心 が け てほし い カテゴリごとに 分 類 して 表 示 した DVD 情 報 の 一 覧 ページ 用 語 サムネイル _P214 商 品 一 覧 ページの 作 成 方 法 1 リストにサムネイルを 表 示 する リストを 作 成 し リストにサムネイル 用 の 画 像 を 配 置 する 右 側 に 配 置 するテキスト 情 報 の 量 によって 画 像 のサイズも 変 わってくるが pxくらいのサイズで 画 像 を 作 っておくときれいに 収 まる リストにサムネイルを 表 示 するコード <li> <a href="#"> <img src="images/thumb.jpg" /> </a> </li> 2 商 品 情 報 を 入 力 する 法 則 14と 同 様 にh3 素 とp 素 を 使 用 し おおよその 内 容 が 伝 わるように 文 字 情 報 を 入 力 する また a 素 には 商 品 の 購 入 ページへのリンクを 指 定 する 商 品 情 報 を 入 力 するコード <h3> リスト </h3> <p> 概 概 概 </p> 3 商 品 詳 細 ページへのリンクも 指 定 する a 素 のあとにもう1つ a 素 を 入 れ ダイアログで 商 品 詳 細 ページが 表 示 されるようにする 商 品 詳 細 ページへのリンクを 指 定 するコード <a href="dammy.html" data-rel="dialog" data-transition= "slideup"></a> 4 区 切 りリストを 挿 入 する 作 品 の カ テ ゴ リごとに タイトル を 入 れ る 区 切 りリストを 挿 入 する 区 切 りリストを 挿 入 するコード <li data-role="list-divider"> ゾンビ 映 画 </li> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 45

46 法 則 16 リストで 情 報 を 整 理 する 下 層 ページの 情 報 量 をリストに 表 示 して ユーザーのストレスを 軽 減 する おすすめレストラン 一 覧 に 紹 介 店 舗 数 を 表 示 する スマートフォンはブロードバンドと 比 べて 通 信 速 が 遅 いので ページを 進 んで また 戻 ってくるという 動 作 が 億 劫 になりがちだが 下 層 ページの 情 報 量 をあらかじ め 数 字 でリストに 表 示 しておけば ユーザーのストレスを 少 なからず 軽 減 できるだ ろう ここでは 例 として タウン 情 報 サイトのおすすめレストラン 一 覧 のようなペー ジを 作 成 してみよう 下 層 ページに 進 んだときに 表 示 される 情 報 量 がわかると 遷 移 する 手 間 が 省 けるので ユーザビリティが 向 上 する 紹 介 店 舗 数 の 表 示 方 法 1 リストに 次 ページの 内 容 を 入 力 する リストを 作 成 してリンクを 設 定 し 次 のページの 内 容 (この 例 で は 料 理 のカテゴリ)を 入 力 する リストに 次 ページの 内 容 を 入 力 するコード <li><a href="#"> 洋 食 </a></li> 2 リストにアイコンを 表 示 する 料 理 のカテゴリを 表 すアイコンを 作 成 し img 素 にclass="ui-liicon"クラスを 設 定 してテキストの 前 に 挿 入 する リストにアイコンを 表 示 するコード <img src="images/icon.jpg" class="ui-li-icon"> 3 リストにカウントアイコンを 表 示 する タップして 進 んだ 下 層 のページには 複 数 の 項 目 (この 例 では 店 舗 数 )が 存 在 するので それがあらかじめわかるようにカウントの 数 字 が 入 ったアイコンを 表 示 する 数 字 はclass="ui-li-count"ク ラスと 指 定 したspan 素 で 囲 む リストにカウントするアイコンを 表 示 するコード <span class="ui-li-count">12</span> 4 区 切 りリストを 挿 入 する カテゴリを 地 区 ごとに 分 けるため タイトルとなる 区 切 りリスト を 挿 入 して ペ ージ を 見 や すくする 区 切 りリストを 挿 入 するコード <li data-role="list-divider"> 千 代 田 区 </li> 46 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

47 法 則 17 スマートフォンのフォームを 理 解 する 状 況 に 合 わせた 文 字 入 力 フォームを 選 択 する 想 定 されるさまざまなUIをきれいに 整 える Webサイトを 制 作 する 過 程 においては お 問 い 合 わせフォーム や カートシ ステム などのさまざまな 文 字 入 力 フォームを 作 成 することがある こうしたフォー ムページは UI の 種 類 が 多 かったりレイアウトが しかったりして コーディング の 負 荷 が 高 くなりがちだ 特 に スマートフォン の 場 合 は オン/オフを 切 り 替 えるフ リップスイッチなどの 特 有 の UIがあったり 縦 横 のレイアウトを 考 慮 しなければな らなかったりする しかし j Q u e r y M o b i l e は ル ール に 従 って 制 作 することで 想 定 されるひと 通 り のUIをきれいに 整 えてくれる jquery Mobileの 機 能 を 使 用 して 実 例 に 合 わせた フォームを 作 成 してみれば さまざまなケースに 合 わせたフォームページの 作 り 方 やイベントのハンドリング 方 法 を 理 解 できるようになるだろう フォームの 作 成 方 法 は 下 のソースコードのように<form action="#" method ="get"> </form>で 囲 み formであることを 宣 言 し 次 に<div data-role= "fieldcontain"> で 囲 み 個 別 の 素 を 配 置 すればいい この 法 則 では 代 表 的 な 文 字 入 力 フォームを 紹 介 しよう 文 字 入 力 フォームのコード <form action="#" method="get"> <div data-role="fieldcontain"> <!-- 素 を 配 置 します --> </form> 用 語 cols 属 性 _P212 rows 属 性 _P212 1 行 の 入 力 を 促 すテキスト 入 力 フォーム input 素 の 基 本 となる 形 この UIは 名 前 やメールアドレスなど 主 に1 行 の 入 力 を 促 す 入 力 フォームに 使 用 する 1 行 の 入 力 を 促 すコード <input type="text" name="name" id="name" value="" /> 複 数 行 を 入 力 できるテキスト 入 力 フォーム 複 数 行 の 入 力 が 可 能 なテキストエリアも サンプルのようにcols 属 性 とrows 属 性 を 指 定 すれば テキストエリアと 同 じ 幅 の 入 力 しやすい UI で 表 示 できる このテキストエリアは 問 い 合 わせや 商 品 の 感 想 など 多 くのテキストを 入 力 す る 可 能 性 がある 項 目 に 使 用 する 複 数 行 の 入 力 を 促 すコード <textarea cols="40" rows="8" name="textarea" id="textarea"> </textarea> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 47

48 検 索 フォーム 見 た 目 はテキスト 入 力 フォームと 似 ているが 左 側 に 検 索 を 示 す 虫 眼 鏡 アイ コンが 表 示 される 検 索 用 のフォーム 入 力 中 に 右 側 に 表 示 される ボタンを タップすれば 入 力 した 内 容 が 削 除 される 検 索 フォームのコード <input type="search" name="search" id="search" value="" placeholder=" キーワード "> テキストエリアへの 入 力 を 補 助 する 機 能 やプラグイン スマートフォンのタッチパネルは 入 力 端 末 としてまだ 日 が 浅 く 不 慣 れな 人 だとちょっとした 情 報 を 入 力 するだけでも 考 え ている 以 上 に 時 間 がかかってしまうものだ jquery Mobileに は そうした 入 力 を 補 助 する 機 能 やプラグインがあるので 紹 介 し よう な お こ れら の 機 能 や プ ラ グイン の 使 い 方 は 後 述 する 法 則 でより 詳 細 に 説 明 している jquery Mobile の 標 準 の 機 能 詳 細 は 法 則 24を 参 照 オートコンプリート 機 能 Autocomplete widgets/autocomplete/ カレン ダーから 日 付 を 入 力 することが 可 能 に なる 詳 細 は 法 則 2 5 を 参 照 datepickerプラグイン jquery-mobile-datepicker 48 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

49 法 則 18 スマートフォンのフォームを 理 解 する スマートフォンらしいタッチパネルを 生 かしたフォームを 利 用 する 指 で 動 かすスイッチを 使 ってユーザーの 負 担 を 軽 くする 法 則 17で 解 説 した 文 字 入 力 フォームのUIの 他 にも jquery Mobileにはタッチ パネルを 生 かしたさまざまな UI が 用 意 されている オン/オフの 切 り 替 えなどに 使 われる スイッチ や 一 定 の 範 囲 内 から 値 を 指 定 できる スライダー 複 数 の 項 目 から 値 を 選 択 できる チェックボックス ラジオボタン などの UI をうまく 利 用 すれば ユーザーに 文 字 入 力 させる 負 担 を 大 きく 軽 減 できる この 法 則 では これ らの UI がどのような 用 途 で 使 いやすいのかを 解 説 していこう フリップスイッチ スライダー スマートフォン 特 有 の UI だが 主 にオン/オフの 切 り 替 えなどに 使 われる 押 したりスライドしたりして 切 り 替 えることが 可 能 だ 機 能 そのものは 後 述 する ラジオボタンでも 代 用 可 能 だが 選 択 肢 が 2 つの 場 合 はこのフォームのほう が 選 択 しやすいだろう フリップスイッチのコード <select name="flipswitch" id="flipswitch" data-role="slider"> <option value="off"> オフ </option> <option value="on"> オン </option> </select> これもスマートフォン 特 有 の UIだ iosではボリュームや 明 るさの 調 整 に 使 われている We b サイト 上 のフォームとしても 色 や サイズの 指 定 など 一 定 の 範 囲 内 から 値 を 指 定 する 用 途 で 使 い 勝 手 がいいだろう レンジスライダー スライダーのコード <input type="range" name="slider" id="slider" value="50" min="0" max="100"> レンジスライダーは 高 機 能 な U I で 1つのスライダーに 対 して 2 つの 値 を 設 定 できる 商 品 の 価 格 帯 を 最 安 値 と 最 高 値 でユーザーに 設 定 してもらうなど 低 い 値 と 高 い 値 を 設 定 しなければならない 項 目 に 使 うといい レンジスライダーのコード <div data-role="rangeslider"> <label for="range-1a"> レンジスライダー </label> <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40"> <label for="range-1b"> レンジスライダー </label> <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80"> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 49

50 チェックボックス チェックボックスは 数 多 くの 項 目 から 複 数 選 択 できる 機 能 をもつ チェッ クボックスは 項 目 をグループ 化 するdata-role="controlgroup" 属 性 を 使 わず に バラバラに 配 置 することもできるが 実 際 には 複 数 の 項 目 からいくつかを 選 択 するという 意 味 合 いからも サンプルのように controlgroup 属 性 を 使 っ てまとめておくのが 妥 当 だ ボタン 式 のチェックボックス ラジオボタン controlgroup 属 性 を 使 ったチェックボックスのコード <fieldset data-role="controlgroup"> <legend> チェックボックス </legend> <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /> <label for="checkbox-1a"> 食 べる </label> <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /> <label for="checkbox-2a"> 寝 る </label> <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /> <label for="checkbox-3a"> 遊 ぶ </label> </fieldset> 1つ1つの 文 章 が 少 ないときなどは 項 目 に data-type="horizontal" 属 性 を 設 定 すれば 横 並 び に 表 示 されてコンパクトに 収 められる なお 各 U I を 説 明 するテキストは 基 本 的 にlabel 素 で 囲 むのだが このサンプルのように 横 並 びのグループ 全 体 の 説 明 をするときには legend 素 を 使 うことが 推 奨 されている label 素 を 併 記 した 入 力 フォームは 左 右 に 並 んで 整 列 する が l e g e n d 素 を 使 うとテキストと U I が 上 下 に 並 び 左 右 に 横 幅 が 必 な 入 力 フォームに 最 適 な 表 示 をしてくれるようになっている ラジオボタンは 複 数 の 項 目 から1つだけを 選 択 させるためのもので ユーザー に 何 かの 可 否 を 選 択 させる 場 合 や 支 払 方 法 を1つだけ 選 択 させるときなど に 使 用 する これもチェックボックスと 同 様 に data-type="horizontal" 属 性 を 設 定 すると ボタン 式 のラジオボタンになり 見 た 目 はただのグループボタ ンに 見 えるが 複 数 をまとめて 横 並 び に 配 置 できるようになる 例 えば はい /いいえ/どちらでもない など 短 い 選 択 肢 からどれかを 選 択 してもらう 場 合 に 使 用 するといいだろう ラジオボタンをボタン 式 にするコード <fieldset data-role="controlgroup"> <legend> ラジオボタン </legend> <input type="radio" name="radio-choice-1" id="radio-choice -1" value="choice-1" checked="checked" /> <label for="radio-choice-1"> 猫 </label> <input type="radio" name="radio-choice-1" id="radio-choice -2" value="choice-2" /> <label for="radio-choice-2"> 犬 </label> <input type="radio" name="radio-choice-1" id="radio-choice -3" value="choice-3" /> <label for="radio-choice-3"> 鳥 </label> </fieldset> ボタンの 左 右 位 置 はどのように 決 めればいいの? 本 書 のサンプルでは 送 信 ボタンなど 何 かを 決 定 するボ タンは 右 側 に 配 置 している こうした 何 かを 決 定 するアクショ ンは Windows のデフォルトでは 左 側 に Macでは 右 側 に 配 置 されている O S の 普 及 率 を 考 えると 左 側 に 送 信 ボタン を 配 置 するほうがふさわしいように 思 えるかもしれない しか し P C の 画 面 は 基 本 的 に 左 上 から 右 下 に 目 線 が 行 き 最 後 に 見 る 右 下 に 次 のアクションのためのボタンなどがあるという 共 通 認 識 がある それはスマートフォンでも 同 様 で ページ 遷 移 も 多 くは 右 から 左 に 動 くため 右 下 に 次 へ 進 む ボタンを 左 下 には キャンセル または 戻 る などのボタンを 配 置 する のが 無 だといえる 50 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

51 法 則 19 スマートフォンのフォームを 理 解 する 選 択 入 力 可 能 なメニューを 利 用 する サブメニューが 表 示 されるタイプのフォームを 利 用 する セレクトメニューは PC ではプルダウンメニューのように 表 示 されるが i O S では 画 面 下 からスピニングホイール U I が Androidではダイアログボックスが 表 示 される jquery Mobileでは デフォルトではサンプルのように 下 矢 印 のアイ コンが 表 示 されるため これをタップすることで 選 択 用 のコ ントローラーが 表 示 される jquery Mobileには さらに カスタムセレクトメニュー と いうものが 用 意 されていて ios 標 準 のスピニングホイール UIではなく Androidと 似 た 形 式 のダイアログ 状 の 独 自 UI も 使 用 できる 例 えばiOSとAndroidでデザインを 合 わせた いときや 選 択 肢 が 多 くスピニングホイール UI でスクロール させるのが 妥 当 でないときなどに 使 用 するといいだろう セレクトメニュー セレクトメニューで 曜 日 を 選 ぶコード <select name="select-1" id="select-1"> <option value="standard"> 曜 日 を 選 ぶ </option> <option value="0"> 日 </option> <option value="1"> 月 </option> <option value="2"> 火 </option> <option value="3"> 水 </option> <option value="4"> 木 </option> <option value="5"> 金 </option> <option value="6"> 土 </option> </select> ios でセレクトメニューを 表 示 したところ メニュー をタップ すると スピニン グホイール U I が 表 示 さ れる カスタムセレクトメニュー ios でカスタムセレクトメ ニューを 表 示 したところ 選 択 肢 の 数 によってセレ クトメニューとカスタムセ レクトメニューを 使 い 分 けよう ダイアログでセレクトメニューを 表 示 するコード <select name="select-2" id="select-2" data-native-menu="false"> <option value="standard"> 場 所 を 選 ぶ </option> <option value="0"> 北 海 道 東 北 </option> <option value="1"> 関 東 中 部 </option> <option value="2"> 近 畿 中 国 四 国 </option> <option value="3"> 九 州 沖 縄 </option> </select> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 51

52 法 則 20 フォームを 活 用 する 必 須 項 目 が 入 力 されたら 送 信 ボタンをアクティブに 変 更 する JavaScriptでボタンに 誤 送 信 防 止 の 機 能 を 付 ける お 問 い 合 わせページ 自 体 は テキスト 入 力 フォームなどを 数 種 類 並 べてフォーム ページとして 作 成 するのだが その 後 ラベルをプレースホルダーという 機 能 を 使 用 してコンパクトにまとめれ ば 完 成 だ しかし お 問 い 合 わ せページ は メーラーを 起 動 せずにメールを 送 信 できるので 必 な 入 力 内 容 を 入 力 し 終 える 前 に 間 違 え て 送 信 ボタンをタップしてしまうことが 予 想 される それを 防 ぐためには サー バー 側 で 送 信 内 容 をチェックしてエラーを 表 示 させたり クライアント 側 で 必 須 項 目 が 入 力 されたかどうかをチェックして 入 力 が 完 了 したら 送 信 ボタンをアクティ ブに 変 更 したりするなど さまざまな 回 避 策 がある ここでは クライアント 側 で JavaScriptを 使 って 構 文 をチェックし jquery Mobileに 用 意 されている ボタン の 有 効 (enable)/ 無 効 (disable)の 切 り 替 え 機 能 を 使 って 誤 送 信 防 止 の 機 能 を 付 けてみよう 必 須 項 目 が 入 力 されてい ないと 送 信 ボタンがアクティブにならない 用 語 クライアント 側 _P214 プレースホルダー _P215 誤 送 信 防 止 の 機 能 を 付 ける 方 法 1 ラベルに 赤 色 の 印 を 付 ける 必 須 項 目 であることがひと 目 でわかるように 印 のラベルの 色 を 赤 色 にする 設 定 を CSS ファイルに 記 述 する ラベルの 色 を 赤 色 にするコード.attention { color: #ff0000; } 2 ラベルとして 印 を 配 置 する HTML ファイルにラベルとして 印 を 記 述 する ラベルを 印 にするコード <label for="mail"> メールアドレス <span class="attention"> </span></label> 3 ページの head 部 分 に JavaScriptを 記 述 する pageinit で 初 期 化 されたときに 実 行 される 部 分 には input や textarea に 変 更 が 加 わった 際 にupdateというアクションを 起 こ すイベントのリスナーを 設 定 する updata アクションのコード $(document).on("pageinit", function(){ $('input').on('change',update); $('textarea').on('change',update); update(); }); 52 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

53 4 送 信 ボタンのタップの 可 否 を 決 める updateが 実 行 されたら 各 inputを 確 認 して 入 力 があるかどう かを 調 べ 送 信 ボタンのタップの 可 否 を 決 めるように 変 更 を 加 える $(フォーム 素 ).val() で 入 力 されている 内 容 を 取 得 できるので この 例 では 空 ではないとき という 意 味 で if ( $ (フォーム 素 ).val()!= '') { 処 理 内 容 } という 記 述 をしてい る なお jquery Mobileでボタンのアクティブな 状 態 を 切 り 替 える に は $('button').prop('disabled', true); or $('button'). p ro p ( 'd is a ble d ', fa ls e) ; とすればいい 最 後 に ページを 開 いた ときにも 入 力 内 容 をチェックして pageinit 内 からも 一 update をコールしておこう 送 信 ボタンのタップを 判 定 するコード function update(){ if( $('#mail').val()!= '' && $('#textarea').val()!= '') { $('button').prop('disabled', false); } else { $('button').prop('disabled', true); } } 入 力 ができない 状 態 のフォームを 作 る jquery Mobile のフォーム 素 は disableにすると 入 力 が できない 状 態 を 作 ることができる 何 か 特 定 のアクションを 行 わないと 入 力 ができない 項 目 や 値 を 入 力 する 項 目 があること を 示 唆 したいが まだ 入 力 する 段 階 ではないものなど 何 らか の 理 由 で 非 アクティブな 状 態 を 作 りたいときには この 機 能 を 使 用 するといいだろう 使 い 方 は それぞれの in p ut 素 に disabled="disabled"という 値 を 付 け 加 えるだけでいい テキスト 入 力 フォームの 例 <input disabled="disabled" type="text" name="text-basic" id= "text-basic" value=""> すべての 素 が 入 力 でき なくなっている プレースホルダーを 使 えばユーザーも 迷 わなくなる メールフォーム 画 面 に 必 須 の 項 目 である 氏 名 や メール アドレス は テキスト 入 力 フォームで 作 成 するが メールアドレ スのように 入 力 される 内 容 が 定 形 フォーマットになる 場 合 は [email protected] 属 性 を 追 加 すればプレースホル ダーの 機 能 を 使 用 でき あらかじめ 入 力 内 容 を 示 唆 できる 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 53

54 法 則 21 フォームを 活 用 する 基 本 素 を 理 解 してユーザーフレンドリーな アンケートページを 作 成 する 選 択 項 目 の 数 に 合 わせてパーツを 小 さくする アンケートフォームは これまでの 法 則 で 解 説 してきたさまざまなフォームを 質 問 項 目 に 合 わせて 選 択 する 必 がある 例 えば メールアドレス なら 法 則 17で 解 説 し た 文 字 入 力 フォーム を 選 択 し 性 別 であ れ ば 法 則 1 8 で 解 説 した ラ ジ オ ボタン を 選 択 すればいい しかし より 使 いやすさを 向 上 させるためには 選 択 項 目 が 多 い ときにフォームのパーツを 小 さくするといった 細 かなカスタマイズが 必 だ この 法 則 では これまで 解 説 してきたフォームを 項 目 や 画 面 スペースに 合 わせてカスタマイ ズして ユーザーフレンドリーなアンケートページを 作 成 する 方 法 を 紹 介 しよう アンケートページの 作 成 方 法 1 性 別 に 横 並 びのラジオボタンを 使 う 一 般 的 なラジオボタンのままでも 件 は 満 たすが 説 明 が 不 な 単 純 なものからどれか1つだ けを 選 択 させる 場 合 datatype="horizontal" 属 性 を 用 いて 横 並 びのグループボタンにすると 使 いやすくなり かつ 省 スペースにもなる また 性 別 を 必 須 項 目 としなかった 場 合 は 何 も 選 択 せずに 送 信 する 人 はすべて 男 性 になって しまうため 初 期 状 態 で checked 属 性 を 指 定 しないでおくか タップしてキャンセルできるように 未 選 択 のラジオボタンを 用 意 するといいだろう これにより 誤 情 報 が 含 まれるのを 防 ぐことが できる 筆 者 は 意 図 していないボタンを 間 違 えてタップしてしまうことがある そこで キャンセル できるほうが 親 切 な 設 計 だと 考 え 可 能 であれば 未 選 択 項 目 を 付 け 足 している さらに アンケートフォームは 問 い 合 わせフォームとは 異 なり 入 力 する 項 目 が 多 くなるので ボ タンを 小 さく 表 示 するように data-mini="true"という 値 を 指 定 しておこう これによりレイアウト がスッキリし 入 力 項 目 が 多 いという 印 象 を 軽 減 できる 性 別 のラジオボタンのコード <fieldset data-role="controlgroup" data-type="horizontal" data-inline="true" data-mini="true"> <legend> 性 別 </legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" /> <label for="radio-choice-1"> 男 性 </label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2"> 女 性 </label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" checked= "checked" /> <label for="radio-choice-3"> 未 選 択 </label> </fieldset> さまざまなフォームを 駆 使 したアンケート ページの 例 54 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

55 2 数 値 を 入 力 する 項 目 にスライダーを 使 う 身 長 体 のスライダーのコード 身 長 と 体 の 項 目 をテキストエリアにしてしまうと 中 には k g や c m まで 入 れる 人 がいるかもしれない また セレクトメニュー にすると 項 目 が 膨 大 になりすぎてしまう その 点 スライダーは ド ラッグ 操 作 で 数 値 を 変 更 できるうえ 最 大 値 と 最 小 値 を 簡 単 に 設 定 可 能 な の で 身 長 や 体 とい った 数 値 を 入 力 するような 場 面 で は 非 常 に 有 効 なUIとなる さらに このフォームでは value ( 初 期 値 ) m i n ( 最 小 値 ) m a x ( 最 大 値 )の 3 つ の 値 を あ ら か じ め 設 定 し ておくことも 可 能 である なお 数 値 といっても 靴 のサイズは 数 値 が 限 られているのでセレクトメニューのほうが 使 いやすい <label for="slider"> 身 長 </label> <input type="range" name="slider" id="slider" value="160" min= "130" max="200" data-inline="true" data-mini="true" /> 中 略 <label for="slider"> 体 </label> <input type="range" name="slider" id="slider" value="65" min= "30" max="100" data-inline="true" data-mini="true" /> 3 ご 職 業 に 縦 並 びのラジオボタンを 使 う 職 業 の 項 目 は 数 ある 選 択 肢 の 中 から1つを 選 ぶだけなのでラ ジオボタンを 使 用 するといい ラジオボタンは 性 別 と 同 じように 横 並 び 表 示 にすることも 可 能 だが 職 業 の 場 合 ある 程 の 長 さ の 文 字 が 少 なくとも 3つ 以 上 は 並 ぶので datatype="horizontal" 属 性 を 指 定 せず デフォルトでのグループにして 縦 並 びに 表 示 す るほうが 無 だろう 横 並 びと 縦 並 び の 使 い 分 けに 関 しては ラ ジオボタンだけではなくチェックボックスでも 遭 遇 する 問 題 だが これは 文 字 量 やその 内 容 によって 変 わってくるということを 覚 えて おこう 4 きっかけ に 縦 並 びのチェックボックスを 使 う こうした 項 目 は 雑 誌 で テレビで 友 人 からすすめられて などから 複 数 項 目 を 選 択 する 可 能 性 があるので ラジオボタンで はなくチェックボックスを 使 用 する チェックボックスはラジオボ タンとは 異 なり 複 数 項 目 が 選 択 でき 一 選 択 した 項 目 を 再 タップすることでキャンセルできるのが 特 徴 だ 職 業 のラジオボタンのコード <fieldset data-role="controlgroup" data-mini="true"> <legend> ご 職 業 </legend> <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1"> 学 生 </label> <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2"> 会 社 員 </label> <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3"> その 他 </label> </fieldset> きっかけ 項 目 のチェックボックスのコード <fieldset data-role="controlgroup" data-inline="true" data-mini="true"> <legend> このサイトをご 覧 になられたきっかけ </legend> <input type="checkbox" name="checkbox-1a" id="checkbox- 1a" class="custom" /> <label for="checkbox-1a"> 雑 誌 で </label> <input type="checkbox" name="checkbox-2a" id="checkbox- 2a" class="custom" /> <label for="checkbox-2a"> テレビで </label> <input type="checkbox" name="checkbox-3a" id="checkbox- 3a" class="custom" /> <label for="checkbox-3a"> 友 人 からすすめられて </label> <input type="checkbox" name="checkbox-4a" id="checkbox- 4a" class="custom" /> <label for="checkbox-4a"> その 他 </label> </fieldset> 5 メルマガの 送 付 可 否 の 確 認 にフリップスイッチを 使 う メールマガジンの 送 付 について 許 可 するかどうかを 尋 ねる 項 目 で は フリップスイッチを 使 う オン/オフの 選 択 がドラッグでもタップ でも 可 能 で 非 常 に 使 いやすい UIだ フリップスイッチはサンプル のように 説 明 文 が 長 くなりがちだが デフォルトの 状 態 でlabel 属 性 と 併 用 して 使 うと 左 側 に 横 幅 3 文 字 程 で 文 字 が 折 り 返 され その すぐ 右 側 に スイッチ が 表 示 されるような 比 率 となる しかし legend 属 性 を 使 用 して 縦 並 びになるように 配 置 すれば 文 字 の 折 り 返 しが 減 り 説 明 文 が 読 みやすくなる メルマガ 送 付 可 否 のフリップスイッチのコード <legend> メールマガジンを 送 信 させていただいてもよろし いでしょうか? </legend> <select name="slider2" id="slider2" data-role="slider" data-mini= "true"> <option value="off"> いいえ </option> <option value="on"> はい </option> </select> 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 55

56 法 則 22 フォームを 活 用 する 買 い 物 カートを 利 用 した EC サイトを 作 成 する フォームを 活 用 してスムーズに 購 入 完 了 まで 進 める 導 線 やレイアウトを 設 計 する これまで 解 説 してきたフォームを 組 み 合 わせてEC サイトのページを 作 成 してみ よう E C サイトはフォームを 使 う 場 面 が 多 く 特 に 購 入 画 面 で はさまざまな 入 力 項 目 が 必 になる そのため ユーザーの 購 入 意 欲 を 維 持 したままスムーズに 購 入 完 了 画 面 まで 進 んでもらえるように 導 線 やレイアウトを 設 計 する 必 がある 以 降 買 い 物 カートの 購 入 画 面 を 例 に 項 目 が 多 く 長 い ページになってしまいがちな フォームページのレイアウト 方 法 と 入 力 方 法 をチェックするためのイベントのハ ンドリング 方 法 を 解 説 していく なお 名 前 と メールアドレス の 入 力 フォー ムについては 法 則 20と 同 じなので 参 照 してほしい カート の 中 身 は サ ムネイル 付 きの リストで 一 覧 にする ま ず 商 品 の 購 入 後 に 表 示 され る カ ート の 中 身 ペ ージ を 見 てい こう ここで は サムネイル 付 きのリスト( 法 則 11)で 商 品 一 覧 を 作 成 しておく カートに 入 れた 商 品 をこの ページで 削 除 する 人 もいるので 分 割 ボタンリスト( 法 則 11)を 使 用 して 削 除 アイコンを 右 端 に 表 示 しておくのもいいだろう さらにリストをタップしたとき に 別 ウィンドウで 商 品 詳 細 をもう 一 見 せるなどすれば 買 い 物 がしやすいサイ トになる なお 販 売 商 品 がお 茶 や 消 耗 品 などで 同 じような 写 真 が 並 ぶ 場 合 は テキスト のみのリストでも 十 分 だ 逆 に 表 示 させる 項 目 をもっと 多 くしたい 場 合 は jquery Mobile のスタイルでは 表 示 に 向 かないので data-role="none" 属 性 を 使 用 して jquery Mobileのスタイルを 外 してもいい その 場 合 は なるべく 普 通 のコーディン グ 方 法 で t a b l e 素 を 使 用 し 商 品 の 色 や 数 などを 並 べ て 見 や す い 一 覧 を 作 成 し よう( 普 通 のコーディング 方 法 については 法 則 82を 参 照 ) サム ネイル 付 き のリストを 利 用 した カート の 中 身 ページ このページで 商 品 の 削 除 が できるように 分 割 リストを 使 用 して 削 除 ア イコンを 配 置 した サムネイル 付 きのリストのコード <ul data-role="listview" data-inset= "true" data-split-icon="delete"> <li> <a href="#"> <img src="images/thumb.jpg" /> <h3> 商 品 A</h3> <p> 説 明 文 </p> </a> <a href="#"></a> </li> </ul> 56 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

57 お 届 け 先 はセレクトメニューフォームを 使 って 入 力 できるようにする お 届 け 先 のページでは 住 所 を 都 道 府 県 から 順 番 に 入 力 していく 住 所 は 入 力 内 容 も 多 く ユ ー ザ ー の 離 脱 率 が 上 がるところなので 入 力 間 違 いがないようにしたい スマー トフォンのキーボードは 入 力 しにくいので ユーザーの 負 荷 を 軽 減 できるように セレクトメニューでだいたいの 情 報 が 入 力 できるように 設 計 しておくことが になる また 入 力 項 目 がずれて 入 力 し 直 しとなるような2 手 間 を 回 避 するため 未 入 力 の 段 階 では 都 道 府 県 のみが 入 力 できるようにし 都 道 府 県 を 選 択 したあとに 市 町 村 が 選 択 できるようにするといい 同 様 に 市 町 村 の 選 択 後 に 番 地 と 建 物 名 が 入 力 できるようにする こうした 制 御 には JavaScriptを 使 う まず ページの 初 期 化 時 にセレクトメニューを 変 更 した 場 合 の 挙 動 を 設 定 す る この 例 で は u p d a t e 関 数 を 実 行 するようにしてい る こ うした J a v a S c r i p t の 使 い 方 では ページ 上 のさまざまな U I から 入 力 終 了 時 の 挙 動 を 入 手 してくるのだが この 例 では selectメニューの 変 更 を 取 得 している $(セレクタ 名 ) で 個 別 のUIから 値 を 取 得 して 別 々の 関 数 を 実 行 するよう に 設 定 す る こ と も 可 能 だ し $ ( 素 名 ) で ペ ー ジ 上 の す べてのUIの 変 更 に 対 して 一 括 でイベントを 取 得 することも 可 能 だ セレクトメニューの 都 道 府 県 の 値 は $('#select-1'). val() で 取 得 できるので その 値 が 初 期 値 の'standard'の ままかどうかを 判 定 する この 値 の 取 得 はUI の 種 類 によっ て 変 わってくるが セレクトメニューや テキストエリアは v a l ( ) で 取 得 できる 値 を 取 得 した 結 果 によって 次 のように 設 定 をする 初 期 設 定 値 の 'standard' 以 外 の 項 目 が 選 択 された セレクトメニューの 市 町 村 をアクティブに 変 更 する $('#select-2').selectmenu('enable'); 初 期 設 定 値 の'standard'のままだった タップできない 状 態 のままとする $('#select-2').selectmenu('disable'); 以 上 のことを 2 つ 目 のセレクトメニューである 市 町 村 の ほうにも 設 定 し 最 後 にテキストエリアのenable/disable を 変 更 するようにする セレクトメニューの enable/ disableは selectmenu( 値 ) の 値 を 変 更 するのだが テキ ストエリアでは $('textarea').textinput( 値 ); の 値 を 変 更 してenable/disableを 指 定 する イベントの 取 得 や 値 の 設 定 は 通 常 のjQuery Mobile のコーディングとは 異 なり JavaScript を 使 用 してイベントをやり 取 りするので 若 干 や やこしいが ユーザーの 離 脱 を 防 ぐためのとても 大 事 な 設 定 なので 丁 寧 に 設 定 しよう セレクトメニューを 使 って 入 力 の 手 間 を 省 く セレクトメニューから 都 道 府 県 を 選 択 して からでないと 次 の 市 町 村 が 入 力 できない ようになっている 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 57

58 セレクトメニューを 制 御 するコード <div data-role="fieldcontain"> <label for="select-1" class="select"> お 届 け 先 :<br /> 都 道 府 県 <span class="attention"> </span></label> <select name="select-1" id="select-1" data-mini="true"> <option value="standard"> 選 択 して 下 さい </option> <option value="0"> 東 京 都 </option> <option value="1"> 大 阪 府 </option> </select> <div data-role="fieldcontain" > <label for="select-2" class="select"> お 届 け 先 :<br /> 市 町 村 <span class="attention"> </span></label> <select name="select-2" id="select-2" data-mini="true"> <option value="standard"> 選 択 して 下 さい </option> <option value="0"> 東 京 都 </option> <option value="1"> 大 阪 府 </option> </select> <div data-role="fieldcontain" > <label for="select-2" class="select"> お 届 け 先 :<br /> 番 地 マンション <span class="attention"> </span></label> <textarea cols="40" rows="8" name="textarea" id="textarea"></ textarea> ページの 初 期 化 を 行 うJavaScript のコード $(document).on("pageinit", function(){ $('select').on('change',update); update(); }); 包 装 するかどうかの 選 択 には フリップスイッチを 使 う 商 品 を 包 装 するかどうかの 選 択 は 法 則 21で 解 説 した アンケートフォームのメルマガ 送 付 可 否 の 項 目 と 同 様 に フリップスイッチで 設 定 する また ギフトラッピングなど で 包 装 紙 が 数 種 類 ある 場 合 は ラジオボタンで 設 定 して もいいだろう さらに 支 払 方 法 の 選 択 はラジオボタンが 適 している フリップスイッチとラジオボタンの 使 い 分 け 代 引 手 数 料 などの 注 意 書 きも 必 になるので リストのあ とにはp 素 で 説 明 を 入 れたり お 支 払 いの 方 法 ペー ジなどへリンクしたりしよう フリップスイッチとラジオボタンのコード <div data-role="fieldcontain"> <label for="slider2"> 包 装 </label> <select name="slider2" id="slider2" data-role="slider"> <option value="off"> しない </option> <option value="on"> する </option> </select> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <legend> 支 払 方 法 </legend> <input type="radio" name="radio-choice-1" id="radiochoice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1"> 代 金 引 換 </label> <input type="radio" name="radio-choice-1" id="radiochoice-2" value="choice-2" /> <label for="radio-choice-2"> 口 座 振 替 </label> <input type="radio" name="radio-choice-1" id="radiochoice-3" value="choice-3" /> <label for="radio-choice-3"> クレジットカード </label> </fieldset> <p> 代 金 引 換 は 手 数 料 がかかります </p> 58 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

59 プライバシーポリシーは 疑 似 的 に スクロールバーを 設 定 する EC サイトではユーザーに 個 人 情 報 を 入 力 させるため プライバシーポリシーの 同 意 が 必 になる このプライ バシーポリシーの 表 示 にiframeを 使 っているサイトも 多 いのだが ここではdiv 素 を 入 れ 子 にして 疑 似 的 にスク ロールバーを 設 定 して 規 約 を 表 示 するようにしている な お d i v 素 に は 高 さ の 指 定 タ ッ チ で ス ク ロ ー ル さ せるように 挙 動 を 設 定 する はみ 出 している 部 分 をスク ロールさせる といった 基 本 的 な 設 定 以 外 にも 角 丸 や ボーダー 背 景 色 なども CSSで 併 せて 設 定 し ストレスな く 閲 覧 できるように 整 えておこう 規 約 には 疑 似 的 にスクロールバーを 設 定 する 疑 似 的 なスクロールバーのコード.iframe { height: 200px; -webkit-overflow-scrolling: touch; overflow-y: scroll; padding: 5px; } JavaScriptによる 素 の 取 得 この 法 則 では 素 の 使 用 可 否 の 切 り 替 えをJavaScriptで 行 っているが その 流 れは 次 のようになっている 1 特 定 の 素 に 何 か 変 更 が 加 わった 際 に $ ( 素 を 指 定 ). bind('change',update); という 形 でupdate 関 数 を 実 行 する 2 実 行 されるupdate 関 数 の 中 で Aという 素 の 入 力 値 が だった 場 合 には 使 用 可 能 にする さもなけ れば 使 用 不 可 にする と 分 岐 している 素 を 取 得 する 書 き 方 はさまざまで <input type="text" name="name" id="name" value="" />という 素 が 変 更 さ れたタイミングを 取 得 するには 下 の 表 に 示 す4つの 書 き 方 の いずれでも 可 能 だが それぞれ 特 徴 がある ページ 内 の 素 の 数 や 種 類 によって 正 しく 使 い 分 けられるようになっておくと バ グのないセキュアなフォームを 作 成 できるようになる 素 を 取 得 するJavaScript の 書 き 方 書 き 方 $('input').on('change',update); $('.name').on('change',update); $('input.name').on('change',update); $('#name').on('change',update); 特 徴 ページ 内 に 複 数 の i n p u t があり そのいずれかが 変 更 されたときにイベントを 取 得 したい 場 合 ただ し こ の 書 き 方 は 一 律 で 便 利 な 半 面 画 面 内 に 配 置 されて い るすべ て の 素 で 実 行 され る の で ペ ー ジの 素 が 多 い 場 合 には 予 想 外 の 挙 動 が 出 てくる 可 能 性 がある 特 定 のセレクタのものだけでいい 場 合 セレクタ 名 が 他 の 素 でも 使 用 されている 可 能 性 がある 場 合 特 定 の 1 つ の 素 だ けを チェックした い 場 合 た だし 素 すべ て に 指 定 が 必 な の で J a v a S c r i p t が 非 常 に 長 くなってしまう 第 1 章 jquery Mobileの 基 本 を 知 る 法 則 59

60 iphoneとandroidの 違 い jquery Mobile 1.4は スマートフォン 環 境 ではiOSは4 7.0 Androidは 他 にもWindows Phone7. 5 8や Blackberry 6 10に 対 応 デスクトップ 環 境 でも Chromeは16 24 Safariは5 6 Firefoxは10 18 また IE は 8 10 など かなり 幅 広 いプラットフォームに 対 応 している こうしたさまざまな 環 境 に 対 して 細 かな 対 応 状 況 を 気 にせずに Web サイトを 作 成 できるのは 大 きな 強 みと なっている ただ 気 を 付 けなければいけないのは こうして 単 純 にサ ポートプラットフォームを 並 べてみると 相 当 幅 広 く 対 応 し ているように 見 えるが 実 際 にそれぞれの 端 末 を 普 段 から 使 用 している 人 からみれば ボタンの 位 置 やサイズなど 使 い 慣 れている UIとはかけ 離 れた Webサイトになっている と 違 和 感 をもつことがあるのだ 端 末 の 違 いとしてよくいわれるのが iphoneでは 端 末 に 戻 る ボタンが 存 在 しないため 画 面 の 左 上 に 戻 る ボタンを 設 置 することが 多 いということだ Android なら ば 端 末 自 体 に 戻 る ボタンが 用 意 されていて 画 面 の 中 にはボタンは 必 ない 他 にもセレクトメニューの 開 き 方 が 異 なったり Androidではタブは 画 面 上 部 に 配 置 されることが 多 いが ios では 下 のほうが 多 いなどさまざまな 違 いが 存 在 する どちらか 一 方 の OS に 合 わせてデザインすると その OSに 慣 れている 人 にとっては 非 常 に 使 いやすくなるが 半 面 使 い にくくなるユーザーがいるということは 考 慮 しな ければならない とはいえ 結 局 デザインは 1 つしか 選 択 できず どちら に 合 わせればいいのかという 結 論 はないのだが ユーザー に とって 使 い や す い W e b サ イト に 仕 上 げ るた め に は タ ー ゲットとするユーザー 層 やコンテンツの 内 容 など それぞ れの 特 性 を 考 慮 したうえでサイトを 制 作 する 必 がある だろう 60 第 1 章 jquery Mobileの 基 本 を 知 る 法 則

61 ジェイクエリー j Query M モバイル obile スマートフォンサイト デザイン W ウェブ み しん ほう ebクリエイターが 身 につけておくべき 新 100 の 法 則 そく 2014 年 6 月 30 日 初 版 発 行 著 者 発 行 人 発 行 発 売 印 刷 所 いしはら ゆう 石 原 悠 土 田 米 一 株 式 会 社 インプレスジャパン An Impress Group Company 東 京 都 千 代 田 区 三 番 町 20 番 地 株 式 会 社 インプレスコミュニケーションズ An Impress Group Company 東 京 都 千 代 田 区 三 番 町 20 番 地 出 版 営 業 TEL 株 式 会 社 廣 済 堂 本 書 の 内 容 はすべて 著 作 権 法 上 の 保 護 を 受 けております 本 書 の 一 部 あるいは 全 部 について 株 式 会 社 インプレスジャパンから 文 書 の 許 諾 を 得 ずに いかなる 方 法 においても 無 断 で 複 写 複 製 することは 禁 じられています ISBN C3055 Copyright 2014 Yu Ishihara. All rights reserved. Printed in Japan 本 書 の 内 容 に 関 するご 質 問 は 書 名 ISBN( 奥 付 ページに 記 載 ) お 名 前 電 話 番 号 と 該 当 するページや 具 体 的 な 質 問 内 容 お 使 いの 動 作 環 境 などを 明 記 のうえ インプレスカスタマーセンターまでメールまたは 封 書 にてお 問 い 合 わせください 電 話 や FAX 等 でのご 質 問 には 対 応 しておりません なお 本 書 の 内 容 に 直 接 関 係 のないご 質 問 にはお 答 えできない 場 合 があります また 本 書 の 利 用 によって 生 じる 直 接 的 または 間 接 的 被 害 について 著 者 ならびに 弊 社 では 一 切 の 責 任 を 負 いかねます あらかじめご 了 承 ください 造 本 には 万 全 を 期 しておりますが 万 一 落 丁 乱 丁 がございましたら 送 料 小 社 負 担 にて お 取 り 替 え 致 します お 手 数 ですが インプレスカスタマーセンターまでご 返 送 ください 読 者 様 のお 問 い 合 わせ 先 インプレス カスタマーセンター 東 京 都 千 代 田 区 三 番 町 20 番 地 TEL / FAX [email protected]