インプレス[コンピュータ・IT]ムック jQuery Mobileスマートフォンサイト・デザイン 新・100の法則。
インプレス / 2014年06月27日 / 全224ページ
モバイルファーストを容易に実現するフレームワーク「jQuery Mobile」を徹底解説! フラットデザインに対応した最新バージョン1.4対応。導入前に知っておくべき基本はもちろん、UIパーツを使いこなす法則やページレイアウトをカスタマイズする法則、スマートフォンならではのジェスチャー操作を生かす法則など、モバイル向けのWebサイト制作に役立つ100個ノウハウを解説!
目次
- 著者プロフィール
- はじめに
- 目次
- 本書の読み方
- 序章
- 第1章 jQuery Mobileの基本を知る法
- 法則1 ページの設定と構成要素を理解する
- 法則2 Ajaxを使ったページ遷移を理解する
- 法則3 Ajaxによるページ遷移の不具合を解消する
- 法則4 jQuery Mobileに用意されているボタンを把握する
- 法則5 ボタンにアイコンを表示する
- 法則6 ページのヘッダに「戻る」ボタンを表示する
- 法則7 複数のボタンをグループ化してユーザビリティを高める
- 法則8 ヘッダを固定して最大限に有効活用する
- 法則9 フッタのレイアウトを調整して見やすくする
- 法則10 複数ページにまたがるコンテンツを自由に行き来する
- 法則11 リストを使ってコンテンツを階層化する
- 法則12 読み込み専用のリストを使用する
- 法則13 リストに自動で区切りを挿入する
- 法則14 新着リストに更新時間を表示する
- 著者プロフィール
- はじめに
- 目次
- 本書の読み方
- 序章
- 第1章 jQuery Mobileの基本を知る法
- 法則1 ページの設定と構成要素を理解する
- 法則2 Ajaxを使ったページ遷移を理解する
- 法則3 Ajaxによるページ遷移の不具合を解消する
- 法則4 jQuery Mobileに用意されているボタンを把握する
- 法則5 ボタンにアイコンを表示する
- 法則6 ページのヘッダに「戻る」ボタンを表示する
- 法則7 複数のボタンをグループ化してユーザビリティを高める
- 法則8 ヘッダを固定して最大限に有効活用する
- 法則9 フッタのレイアウトを調整して見やすくする
- 法則10 複数ページにまたがるコンテンツを自由に行き来する
- 法則11 リストを使ってコンテンツを階層化する
- 法則12 読み込み専用のリストを使用する
- 法則13 リストに自動で区切りを挿入する
- 法則14 新着リストに更新時間を表示する
- 法則15 画像と簡単な情報をまとめた商品一覧ページを作成する
- 法則16 下層ページの情報量をリストに表示してユーザーのストレスを軽減する
- 法則17 状況に合わせた文字入力フォームを選択する
- 法則18 スマートフォンらしいタッチパネルを生かしたフォームを利用する
- 法則19 選択入力可能なメニューを利用する
- 法則20 必須項目が入力されたら「送信」ボタンをアクティブに変更する
- 法則21 基本要素を理解してユーザーフレンドリーなアンケートページを作成する
- 法則22 買い物カートを利用したECサイトを作成する
- 章末コラム iPhoneとAndroidの違い
- 第2章 基本的なUIパーツを使いこなす法則
- 法則23 検索フォームにプレースホルダーとフィルタリング機能を使う
- 法則24 オートコンプリート機能を利用してユーザーの入力をサポートする
- 法則25 フォームの入力内容をあらかじめ指定する
- 法則26 ダイアログボックスの閉じ方やトランジションをカスタマイズする
- 法則27 ダイアログボックスの「閉じる」ボタンの位置を変更する
- 法則28 サイトが単調にならないようにダイアログボックスを使い分ける
- 法則29 ポップアップウィジェットを使用する
- 法則30 ポップアップウィジェットの位置や見栄えを変える
- 法則31 オーバーレイポップアップウィジェットを使用する
- 法則32 パネルウィジェットを使用して複雑なサイト構造を一覧できるようにする
- 法則33 パネルウィジェットにリストを設置してより多くのリンクを表示させる
- 法則34 グリッドレイアウトを使った緩急のあるサイトを作る
- 法則35 レスポンシブグリッドでモニタサイズや端末の向きに応じたレイアウトにする
- 法則36 レスポンシブテーブルでモニタサイズや端末の向きに応じたレイアウトにする
- 法則37 カラムトグルのチェックボックスを使ってコンテンツの表示・非表示を切り替る
- 法則38 開閉式コンテンツを利用して情報を効率的に格納する
- 法則39 開閉式コンテンツを複数並べてアコーディオンメニューにする
- 法則40 開閉式コンテンツのアイコンを変更する
- 章末コラム CSSのマルチクラスの記述方法
- 第3章 ページレイアウトをカスタマイズする法則
- 法則41 複雑になりがちなリストを見やすくする
- 法則42 初期状態の2つのテーマを理解する
- 法則43 自分で新しいテーマを作成してページに反映する
- 法則44 ページ遷移のエフェクトを理解して状況によって使い分ける
- 法則45 ヘッダとフッタを画面外に移動させ、フルスクリーンモードで読みやすくする
- 法則46 サイト全体に共通でヘッダ、フッタを固定表示する
- 法則47 ヘッダに複数のボタンを設置してページ全体の情報量を増やす
- 法則48 レイアウトを工夫してフッタを活用し、サイトをより見やすくする
- 法則49 ヘッダメニューをプルダウンメニューに変更してボタン数を増やす
- 法則50 プルダウンメニューに一手間加えて操作感を向上させる
- 法則51 ページ遷移時に表示されるローダーをオリジナルのものにする
- 法則52 省略されて「...」と表示される長いテキストを省略しないようにする
- 法則53 「ホーム画面に追加」をした際のサイトのアイコンをカスタマイズする
- 法則54 背景にパターン画像を敷いてjQuery Mobileサイトの見栄えを変える
- 法則55 タブナビゲーションに通知件数アイコンを入れる
- 法則56 端末の種類や回転方向、解像度を識別してスタイルを反映する
- 法則57 オリジナルアイコンを作成してサイトのオリジナリティを高める
- 法則58 CSS3のグラデーションを利用した立体的なボタンを作成する
- 法則59 CSS3のシャドウを利用した立体的なボタンを作成する
- 法則60 グローバル設定を利用してサイト全体のレイアウトを統一する
- 法則61 すべてのページにTwitterとFacebookへの投稿ボタンを設置する
- 法則62 デフォルトの角丸とドロップシャドウを削除してシンプルなページを作成する
- 法則63 ページトランジションを自分でカスタマイズする
- 章末コラム CSSやCSS3の活用
- 第4章 スマートフォンならではのジェスチャーを生かす法則
- 法則64 スマートフォン独自のジェスチャーに対するイベントを取得する
- 法則65 画面の回転のタイミングを取得して縦長画像と横長画像を入れ替える
- 法則66 背景色をスクロール位置に応じて変える
- 法則67 ページのロードが完了した結果で成功と失敗のメッセージを表示する
- 法則68 ページを移動するたびにランダムに画像を切り替える
- 法則69 スクロール位置が変わったときにページトップボタンを表示する
- 法則70 どのリンクから移動してきたかによってページ上の文章を変える
- 法則71 複数の開閉パネルを同時に開いたり閉じたりする
- 章末コラム マウスで操作するサイトとタッチ端末で操作するサイト
- 第5章 フレームワークやプラグインを活用する法則
- 法則72 スマートフォンサイトでGoogleマップを表示する
- 法則73 Googleマップにマーカーを付けたりクローズアップしたりする
- 法則74 端末をシェイクして画面を変える
- 法則75 スワイプで次の画像に移動するフォトギャラリーを作る
- 法則76 入力された郵便番号をもとに住所を自動表示する
- 法則77 リスト要素の右肩にバッジを追加する
- 法則78 データロードの成功時と失敗時に状況に合わせたアラートを表示する
- 法則79 Webサイト上で効果を見ながらjQuery Mobileのテーマを作成する
- 法則80 サードパーティ製のデザインを探してページに反映する
- 法則81 Twitter Bootstrap風のデザインにする
- 法則82 jQuery Mobile独自のデザインを利用しないようにする
- 章末コラム オープンソースのプラグインの選び方
- 第6章 WordPress&EC-CUBEをカスタマイズする法則
- 法則83 YouTube RSSフィードからJSONをロードして一覧表示する
- 法則84 検索結果の一覧にサムネイル画像を表示する
- 法則85 作成したリストをタブで切り替えられるようにする
- 法則86 通知プラグインを使用して、RSSのロードに失敗したらアラートを表示する
- 法則87 WordPressで構築したブログを端末に合わせて振り分ける
- 法則88 WordPressに対応したjQuery Mobileテーマを作成する
- 法則89 検索サイトからリンクしてきたときにもトップページに戻れるようにする
- 法則90 「前の記事へ」「次の記事へ」リンクをテキストからボタンに変更する
- 法則91 パネルウィジェットに固定リンクや外部リンクを格納する
- 法則92 縦に長くなりがちなページをコンパクトにまとめる
- 法則93 jQuery MobileでGoogleアナリティクスを使ってアクセス解析を行う
- 法則94 ブログをソーシャルメディアに対応させ、SNSのボタンを設置する
- 法則95 WordPressとjQuery Mobileで作ったブログに自作テーマを適用する
- 法則96 EC-CUBEのメニューをスマートフォン向けにコンパクトにまとめる
- 法則97 ポップアップウィジェットを使用してログイン関連のメニューをコンパクトにまとめる
- 法則98 ECサイトにローテーションバナーを設置して訪問者の視線を誘導する
- 法則99 「おすすめ商品」をスライドバナーからリストビューに変更する
- 法則100 限定商品に在庫数が表示されたバッジを付けて目立たせる
- 章末コラム SassとCompassで作成するjQuery Mobileテーマ
- 用語集
- 索引
- 読者アンケート
- 奥付
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。