19. 3月 2013 · 1 comment · Categories: WEB制作 · Tags: , ,

css_sprite_thumbnailはい、ごめんください。

先月から、片手間にココナラでサービスを出品しています。

ウェブ解析とか、WordPress で困ったことのご相談とか、キャッチコピーとか、チビの声とかw おかげさまで、適度なペースでお声がけいただいています。ありがとうございます。

WordPress のご相談とか、解決できるとこちらもスッキリ気持ちいいです。「わかる人ならわかるんだろうなあ…」と悩むことがありましたら、お手伝いさせてくださいな。

さて前置きが長くなりましたが、先日「CSS スプライト」で作るグローバルメニューのご相談を受けました。CSS スプライトを使ったメニューの説明ページは多いのですが、ご依頼の内容をバッチリ解決できる参考ページが見つからなかったので、ちょいとエントリー。

CSS スプライトって?

一枚の画像を背景に設定し、CSS で表示エリアを設定する手法です。画像の任意の位置(X座標とY座標)と幅、高さがわかれば、四角く切り抜くことができます。

要するに CSS で画像の一部を四角く切り抜いて表示する という手法です。

0.CSS スプライトの基本条件

  • マウスオーバーで画像を変えるため、大抵はリンク(アンカータグ)で利用します。
  • リンクはブロック要素(display:block;)(=四角形)にします。
  • 画像は背景(background-image)として使います。
  • 背景画像を表示する位置(background-position)を決めます。
  • 背景画像はリピートして使えません。(background-repeat:no-repeat;)
  • アンカーの :hover で背景画像の位置を変更します。
  • アンカータグ内に入れたテキストは、text-indent か padding で表示しないようにします。

1.どんなデザインでどんな動きにしたいのか想像してみよう

css_sprite1

こんなグローバルメニューがあるとします。
メニューの周りには背景がありますね。HOME はマウスオーバーした時の状況を表します。
つまり普段は、背景が青、文字は白。マウスオーバーで背景が薄い青、文字が青となります。
まずは動きの想定とデザインを把握しておきましょう。

2.メニューの周りに注目しよう

css_sprite2

グローバルメニューの外側には背景(1)があります。
また、グローバルメニューの左右には、マウスオーバーしても変わらない部分の背景(2)があります。

これらの部分は、X軸(横)方向にリピートして使う必要があります。

ん?CSS スプライトはリピートできましたっけ…?(上記0番で確認してみてください)

CSS スプライトはリピートできません。背景は CSS スプライトとは別に考えましょう

ということで、メニューのまわりで使う背景(1)とメニュー用の背景(2)はそれぞれ切り抜くかスライスして、名前をつけて保存しておきます。

左右の端を角丸にするのは、画像を並べてもいいですが、CSS の border-radius で設定したほうがスマートですね。

3.各メニューの大きさを確認しよう

メニューの高さは全て揃うはずですね。幅がすべて同じ場合は、1つだけ分かれば良いです。違う場合は、それぞれの幅をしっかり確認しておきます。

たとえば今回の例ならすべて同じ大きさなので、1つのメニューは130×60(ピクセル)となります。それが4つあるので、メニュー部分は520×60(ピクセル)となりますね。

css_sprite3

4.上段に通常時、下段に :hover 時のメニューを並べます

メニュー部分のみを切り抜き、キャンバスの大きさを調整します(例では 520×60 となります)。

CSS スプライトにハマってしまう人は、メニューの外の背景ごとコピーしてしまうことが多いようです。必ずメニューのみを使ってください。

キャンバスの高さを2倍にして(例では120px)、メニューをコピー(レイヤーやグループ機能を使える場合は、それらを複製すると使いやすいです)して移動し、縦に並べます。

上段が通常時、下段がマウスオーバー時となります。

css_sprite4

黄色の線で示された部分をスライスして4つの画像にしてもいいですが、1つの画像として保存して進めます。(下記サンプルデモ参照)

5.CSS で設定して仕上げよう!

画像の左上を基準に、位置を指定します。

css_sprite5

右上に行くほど数値が大きくなり、左下に行くほど数値が小さくなります。
だから メニュー画像を設定 = 画像を左に移動させる 時は X座標がマイナスになり、hover 時 = 画像を上に移動させる 時は Y座標がマイナスになるのです。

・・・ややこしいですが、CSS を確認してみてください。

画像の切り抜きさえ間違わなければ、CSS スプライトは難しくありません。
今回のサンプルは下記にあります。基本部分しか入れていないのですが、お好きに使ってください。(あとで改良の余地あり)

CSS スプライトサンプル ZIP DEMO

参考サイト

CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス

基本部分がわかりやすく解説されています。私が今回の記事で言いたかったのは、背景は別になるんだよ!という部分だけです。

CSSスプライトについてあれこれ。

スプライトした際の速度検証や、背景に画像を設定してガチャガチャやる一般的な方法以外にも、色々な方法を紹介しています。深く知りたい方は必見。

Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」 | OZPAの表4

CSS スプライトのための画像を作ってくれるサイトの紹介。メニュー画像は個別にあるから、全部くっつけたいよという場合に使えます。


まったく新しいWEBサイトのユーザビリティ調査ツール – GhostRec.jp

登録~利用開始までは若干時間がかかります

登録は、メールアドレスを検証したいサイトを入力して、届いたメールを確認します。メールマガジンの登録のような気軽さですが、登録しても瞬時にメールが届くわけではありません。

「あれ?来ない?」とちょっと焦りますが、数分で「アカウント作成リクエストを承りました。」というメールが到着します。お申し込み受付フォームへと案内されますが、ここで入力する項目が結構多い。

会社名、部署名、担当者名、メール、電話番号、FAX番号、住所、有料オプション(使わなくてもOK)、備考欄・・・と、利用規約(PDF) を確認してサービスを申し込みます。

すると、「内容を確認するからちょっと待っててね、もしかしたら使えないかもしれないよ」的な申込受理のメールが自動返信されます。

だいぶ時間かかるのかなあ…と思っていたら、5分後くらいに「アカウントを有効化してください」というメールが届きました。画面に従ってアカウントの有効化を行なうと、ようこそメールが届きます。これで使えるようになりました。やったね!

一度登録すると、アカウントとログインIDを無制限に設定できます

(5)アカウント
本サービス利用契約者であるカスタマーは、管理画面にログインし自社の社員等に任意で本サービスの利用権限を付与したアカウントを発行できます。アカウント所有者は、自身の持つアカウント権限において、不特定手数のテスターにログインIDを設定することができます。

(6)ログインID
ログインIDとは、リモート型のユーザビリティ調査を実施する一人ひとりのテスターの登録IDのことで、本サービスカスタマーは、無制限にログインIDを設定できます。

以上、利用規約より抜粋。

ghostrec

アカウントは、主に上記で登録した担当者が管理するものです。GhostRec のプロジェクトを管理したり、ログイン ID を発行してテスター(被験者)を登録したり、追加 RecPV を購入したりすることができます。

ログイン ID は、アカウント所有者、プロジェクト管理、閲覧者の各アクセス権限を有します。このアクセス権限によってできることが異なってくるわけですね。ログイン ID の発行は、メールアドレスとパスワード、アクセス権限の設定のみです。

初回登録時に 100RecPV 分を無料で使えます

GhostRec は訪問者のマウスポインタの移動(追跡)とページのスクロール、ページ遷移の状況を録画して動画で確認できるツールです。1人の訪問者の1ページ分の録画= 1RecPV となります。ある訪問者が2ページ閲覧したものを録画したら 2RecPV になります。訪問者数に限らず、録画したページで計算されるわけですね。

実際にアクセスした画面を録画しているので、スマートフォンや高解像度のモニタなど、環境による表示の違いが見て取れます。Youtube のような動画ではなくて、HTML ベースでキャッシュを取ったところにポインタの動きを再現しているようですね。

ただし、5秒以内で終わってしまう動画が非常に多く、また録画時間が長くてもマウスポインタが動かない時間もある(タブとして開いていた時間が長かっただけ?)ので、わかりやすいデータが取れるのは半分以下となるでしょう。いかにも直帰、というものが無駄になってしまいます。これはこれで有効なデータとして考えたほうがいいのかは、GAなどと組み合わせて検証する必要がありそうです。

2種類のユーザビリティ調査を簡単に行うことができます

まずはプロジェクトを作成するため、プロジェクトタイプを選択します。

クイックユーザビリティ調査

玉石混交の情報ですが、不特定多数の一般的な利用状況を知りたい時に有効です。

発行された Javascript を埋め込むと、アクセスしてきた訪問者が実際に使っている様子を自動的に録画して、あとから確認できます。録画されるのはマウスカーソルとページのスクロール、ページ遷移のみなので、基本的に個人情報は入りません。また、マウストラッキングの情報が集まったページについては、ヒートマップも確認できます。

注意したいのは、すべてのページに対して javascript を埋め込んでしまうと、取得されるページがバラけてしまう上、わかりやすいデータが取れるのはごくわずかになってしまう(=ヒートマップも生成できない)ので、最初は特定のページ(トップページ等)に絞ることをオススメします。

ちなみにこのブログの場合、全ページに埋め込んだら、5時間で 100RecPV を使い果たしてしまいました・・・。

タスク型ユーザビリティ調査

被験者(テスター)を募る必要がありますが、確実に動線を検証したい時に有効です。

テスターとなる人にログイン ID を発行し、たとえば「本社の電話番号を見つけてください」とか「○日の宿泊予約を完了してください」「商品を見つけてお問い合わせしてください」など、想定する動線に基づくタスクを与え、それを遂行してもらう方法です。
ターゲットユーザー層をテスターにすることで「どこで迷うのかな?」という改善ポイントを見つけることができます。

クイックユーザビリティ調査と異なり被験者を集める必要はありますが、 テスターのログインID付与は簡単な上に無制限なので、それほど敷居は高くないでしょう。

最初の 100RecPV を有効活用したいなら、こちらをオススメします。やはり何のために追跡するのか?が大事ですよね。ご利用は計画的に。

有料で使うならいくらかかる?

1 RecPV あたりの金額は、まとめ買いで割り引きされます。

  • 5,000 RecPV まで 20円
  • 15,000 RecPV まで 16円
  • 15,001 RecPV 以上 12円

例えばタスク型で5ページ程度の回遊を想定して、10人のユーザーに依頼するとしたら、

5ページ × 10人 = 50RecPV = 1,000円 となります。

想定外の操作をすることも考慮すると、想定アクセスページ数から予算と人数を調整したほうが良いですね。

実際どんな動画を見れるの?

動画は個別に共有用リンクを生成することができます。わかりやすいサンプルをご紹介。

録画日時:12/27 15:42 録画開始URL:mekemoke.jp/tag/jqm
録画時間:0 分 35 秒(3 ページ) 環境:Japan/FF17.0/Windows
http://play.ghostrec.jp/share/19216-bd1a163442ccc455c26efb0011da59ca04dd1107

録画日時:12/27 14:17 録画開始URL:mekemoke.jp/2012/12/733.html
録画時間:1 分 8 秒(5 ページ) 環境:Japan/FF17.0/Apple
http://play.ghostrec.jp/share/19183-1c1741b8d24155950d6e20164e3feca418b04ebe

録画日時:12/27 14:53 録画開始URL:mekemoke.jp/
録画時間:279 分 37 秒(2 ページ) 環境:Japan/iPhone6.0
http://play.ghostrec.jp/share/19197-bc920a23baa9058564fff26ec3f4d32e136c754b

これらから何がわかるかというと。

  • たくさんのページを読んでくれてありがとう!(・∀・)
  • jQuery Mobile の記事人気だな、ソースをコピペできるようにしとくのはいいな。
  • iPhoneで読まれるとこういう画面になるんだな〜

・・・くらいしかないのですorz
今回の場合、残念な使い方の典型です。目的なく「使ってみた」はやめようというお話。
ユーザビリティ調査ツールは、仮説を立てた上で検証するために利用しましょう。ご利用は計画的に。(二度目)

Mindy Mouseはい、ごめんください。ひじり@雪国のウェブ解析士です。

ウェブ解析を行なうと「ここらへんを改善するとこれだけ良くなりそう」という仮説を立てることになるわけですが、「どのように改善すれば良いのか?」という方法を模索することになります。

Google Analytics の解析データだけでは見えてこない部分もあります。その定量的なデータからはわかりにくいのが、ユーザビリティ。製品やサービスには自信があるのに、どうにもコンバージョンにつながらない、という場合は、ユーザビリティの改善を行なうと一気に改善できる可能性があります。逆に、闇雲にデザインリニューアルを行なっても費用がかかるばかりですね。ポイントを押さえて改善していきましょう。(だからニッチなサービスを扱っている、金銭的体力の少ない中小企業にウェブ解析はオススメなのです)

ユーザビリティってなんだろう?

ユーザビリティ (Usability) はそもそもウェブに限ったものではなく、端的に言えば「使いやすさ」です。ISO 9241-11 に言葉の定義があるのですが、私は、期待する目的を達成するため、ユーザが気持ちよく使えるかどうか と考えています。どれだけストレスを減らせるか、ですね。

ユーザビリティについては下記が詳しいので、ちゃんと知っておきたい方は一読しておくことをお勧めします。

参考サイト:ユーザビリティとは – U-Site

上記サイトからちょっと引用。下記5つのポイントがわかりやすいです。

学習しやすさ
システムは、ユーザがそれをすぐ使い始められるよう、簡単に学習できるようにしなければならない
効率性
一度学習すれば、あとは高い生産性を上げられるよう、効率的に使用できるものでなければならない
記憶しやすさ
ユーザがしばらくつかわなくても、また使うときにすぐ使えるよう覚えやすくしなければならない
エラー
エラーの発生率を低くし、エラーが起こっても回復できるようにし、かつ致命的なエラーは起こってはならない
主観的満足度
ユーザが個人的に満足できるよう、また好きになるよう、楽しく利用できなければならない

じゃあ、これらをどうやって評価すれば良いのか?GA の場合は直帰率の高いページや、重要なページの滞在時間が極端に短い、長いというような部分を確認する方法もあります。が、近年、無料で始められるツールが出てきているのでそれを利用しない手はありません。

ユーザビリティをチェックするためのツール

ユーザビリティを確認するためには、アンケートやモニターによるユーザテストが主流でしたが、これは時間も費用もかかって大変でした。しかし、ウェブにおけるユーザビリティチェックは、無料から始められるツールが色々出てきて、手軽に確認できるようになりました。すごい時代ですね。

主にはヒートマップ(どこが見られているかがサーモグラフィーのようにわかる)やマウストラッキング(マウスがどんな動きをしたのかがわかる)などが主流で、おそらく他にもあるのだろうとは思いますが、個人的に面白そうだと思ったツールをご紹介します。

User Heat(ユーザーヒート)

ヒートマップの無料ツール User Heat :どこが読まれているかを可視化

1アカウント(メールアドレス)につき1つのタグが発行され、タグを含んだページのデータを蓄積していきます。

ここがすごい
どこがよく見られているのか、どこにクリックが集中しているのか、などがヒートマップとして現れるので、直感的に知ることができます。

例えば、バナーのつもりではない画像がクリックされていたり、バナーとして作った画像が完全にスルーされていたり。力を入れたフッタが思ったほど見られていなかったり・・・。結構衝撃的な事実がわかります。

注意したい点
URLごとにデータが蓄積されるので、同じURLでも期間によって内容が変わると、正しい結果を得られない場合があります。例えば、先月まであったメニューがなくなって1つずれると、「あれ?なんだ、このページ結構クリックされてるじゃん?」ということが起こりかねません。

そのような期間設定を踏まえたり、もっと詳細なデータがわかる有料版は下記、ユーザーインサイト。

アクセス解析ツール ユーザーインサイト : どんな読者が、どうサイトを見たかが分かるアクセス解析

GhostRec(ゴーストレック)

まったく新しいWEBサイトのユーザビリティ調査ツール – GhostRec.jp

ユーザ登録し、簡単な手順で発行された javascript のタグを解析したいサイトのページに埋め込みます。最初は無料で始められ、続けたいと思ったら課金する形になります。最初にクレカ登録などはなく、有料版への押し売りもないので、辞めたい場合はすぐに辞められます。

ここがすごい

タグを埋め込んだページにアクセスした人の行動が全部録画されているという、監視カメラのような驚愕のツールです。そのデータを元にヒートマップも生成されます。

監視カメラって言うとすごく気持ち悪い感じを受けるかもしれませんが、個人情報はまったくわかりません。そんなゴーストレックの使用レビューはまた後日。

注意したい点

最初は 100RecPv(録画100回分)が無料でもらえるので、とりあえず全部のページに仕込んでみました。そしたら、2日かからずにでもう使い切ってしまったんですね。
そのくらいのPVはわかっていたので、「おー、すごーい!どんな動きをしてるのかなあ?ワクワク」と覗いてみたら、0秒とか1秒とかのオンパレード。しかもページがバラけているのでデータが蓄積されにくく、ヒートマップがとれたのはたった1ページ。(それでも取れただけすごいのかも)
「とりあえず」でやってはいけない典型的な失敗となりました。というのも、ここまで短時間のデータばかりになるとは思っていなかったので。やるなら目的を持ってページを2~3に絞ったほうがいいです。も、もったいなさすぐる…。

ユーザビリティチェックツール

ユーザビリティチェックツール | ユーザーサイド 株式会社アーティス ユーザビリティ研究プロジェクト

汎用的なチェック項目をすべて網羅しています。ユーザ視点というよりは、提供側として心得ておきたいという項目がズラリ。登録の必要はないので簡単に使えますね。

ここがすごい

各カテゴリーごとに設問があり全部で55項目もあるので、「サイトのユーザビリティチェック結果です」とか言って顧客に出せる資料になりかねないくらい網羅されています。

注意したい点

ユーザビリティは時代によって変わってくる部分もあるため、これらの項目がすべてではありませんし、型にはまらない動きをするのが人間です。
どんなところに着目していればいいか、というのを自分のものにしておきたいですね。

FiveSecondTest(英語のみ)

FiveSecondTest

最後は英語版しかないのですが、スクリーンショットを5秒間見て、設問に答えてもらい、その結果を反映するというもの。タスク型の簡単なアンケート調査ツールですね。

ここがすごい

簡単な登録、簡単な手順でデータが溜まっていくのが面白い。このサイト自体のユーザビリティが秀逸(笑) 有料版もあります。

注意したい点

言語が違うとよくわからないしどう答えたらいいのかわからない、という状況になるので、海外向けのサイトには適していますが日本語サイトは難しいですね。日本語版があればいいのに。(余裕ができたら似た感じのものを作ってみたいなあ)

というわけで、今度はゴーストレックの使用レビューを行いまっす。

transparent (6)

割と前から使われているテクニックなのですが、備忘録も兼ねてメモ。

今回作りたいもの

  • 黒い背景色+背景画像の上で、画面の中央に白いボックスを配置したい。
  • 中央のボックスは半透明にしたい。
  • 半透明にするのは背景だけでいい。

まずは中央にボックスを作る

参考:CSS で画面中央表示のサンプル | [ VERSION510 ]

こちら(↑)が一番あっさりして有用かつわかりやすいかと。
今回作りたいものに合わせ、サンプルソースに少し手を加えます。

CSS

HTML

HTML は内部に div を追加して、margin を設定しています。
ちなみに上下にくっつけたい場合は height を 100% にして top を 0 にしてネガティブマージンなどの調整を行えばOK。

ボックスの背景のみを透明にする

IE に対応する必要がなければ background-color:RGBa; のみで良いですが、IE 独自の機能である DirectX Filter の filter: progid:DXImageTransform.Microsoft.Gradient を使ってやることで対応できます。それほど難しくはないですが、aRGBとなってるところがポイント。

ということで #wrapper が下記のようになります。

Gradient フィルタは IE5.5 から有効になっているようなので安心ですね。

GradientType=[0/1]
0は縦に、1は横に変化するグラデーション。今回はどちらでも良いです。
StartColorStr=#aaRRGGBB
グラデーション開始の透明度と色を16進数で指定します。
EndColorStr=#aaRRGGBB
グラデーション終了の透明度と色を16進数で指定します。

#aa は透明度で、00(透明)〜FF(不透明)を指定します。残りの RRGGBB は色で、こちらはいつもの16進数表記。background-color の RGBa は透明度が後ろに来て、10進数表記なので、0〜255 と 0(透明)〜1(不透明) ですね。

StartColorStr と EndColorStr を同じにすることで、単一色の半透明化が実現できます。
これで画面中央に配置したボックスが半透明になりました!


触ってみたら気持ちよかったです。やっぱりウェブサービスには心地良さが必要ですなあ。

Cambelt – Functional Placeholder Images

特徴

  • 好きなサイズの img タグを生成します。
  • 文字色と背景色を変えられます。
  • フォントサイズを変えたり、書体を選べます。(ただし日本語は不可)
  • 直接リンクしてもいい(キャッシュ機能がある)けどダウンロードしても使えます。
  • アイコンも選べます。(ただしアイコン自体のサイズは固定)
  • Ruby 使いなら自身のサーバで稼働させることもできます。
  • セキュアな環境で使いたい場合に https:// で呼び出しても使えます。

とまあ、説明が不要なくらいシンプルなサービスです。

使い方

http://cambelt.co/サイズ/表示テキスト[?オプション]

img タグの src に上記を設定するだけ。必須項目はサイズのみで、表示テキストとオプションは必要な場合のみ。オプションは最後に ? をつけて、複数のオプションは & でつなぎます。

サイズ(必須項目)

デフォルトでサイズが入ってくれるのは嬉しいですね。1440×1080 が最大サイズのようです。
通常は 幅x高さ で設定しますが、正方形の場合は一つの数値指定だけでもOK。

表示テキスト(任意項目)

上下左右中央に配置されますが、幅に収まらない長文は一番上に来てしまうようです。
改行は %0D%0A を入れると良いです。日本語は使えず(?になります)、全て大文字になりますね。

文字色と背景色(オプション)

color=背景色,文字色

色が変わります。# を抜いた16進数で。

カスタムフォント(オプション)

font=書体

日本語対応していないのは、フォントが対応していないからじゃないかな、と。(@が使えないものもありました)
追加してほしいフォントは報告してね!って受け入れているので、日本語フォントが入れば対応できるかも?個人的にはダミー画像なので、特に必要ないかなとも思うのですが。

フォントの一覧は Cambelt – Functional Placeholder Images の Font Showcase タブを参照。

フォントサイズ(オプション)

font_size=サイズ(ピクセル)

指定できるのは 0~127 でした。文字を入れたくない場合は 0 を使えばよさそうですね。

ファイルフォーマット(オプション)

format=jpg/gif

デフォルトか jpg もしくは gif 以外の設定をすると、png で生成されます。

アイコンを使う

Font3933 って webding 系フォントで作られたアイコンぽいです。使い方はテキストの場合とほぼ同じなので、色やフォントサイズを変えることができます。ただ、オプションを設定するときっちり中央に表示されないなど、まだ少し調整中のようですね。

http://cambelt.co/icon/アイコン名/サイズ(?オプション)

これで no picture などの場合にサクッと使えますね!

スマートフォン対応サイトを作るのに便利な jQuery Mobile の最新版が発表されました。新機能としては、ポップアップ、折りたたみが可能なリスト、リストの自動振り分け機能がお目見え。動作も速くなったようです。

via: Announcing jQuery Mobile 1.2.0 Final | jQuery Mobile

jQM 1.2 を使うためには、jQuery の 1.7.0以上(~1.8.2・20121003現在)が必要です。以下のように外部から読み込んでもOK。

というわけで新機能をざっくりレビュー!

1. ポップアップ機能

デモ:jQuery Mobile Docs – Popup

基本的にはダイアログと似ています。
ポップアップとダイアログの違いは、背景が(半)透明なことと、ポップアップ画面外をタップ(クリック)すればポップアップが消えること。
ダイアログは画面が暗くなり、ボタンを押さないと消えませんでした。

ポップアップは閉じるボタンでも消すことができますし、デバイスの戻るボタン(= history.back)にも対応しています。
ただ、タブでの移動はポップアップの下画面にも有効になっています。個人的には許容範囲ですが。

使い方

ポップアップで表示させたい div に data-role=”popup” 要素を追加してidを付与し、アンカータグのリンクにidを設定します。(ダイアログの使い方とほぼ同じ)

何も設定しない場合

1行のテキストを表示します。

ツールチップ表示

複数行のテキストを表示します。画面の色は data-theme で制御。

メニューを表示

リストメニューが使えます。省スペースでいいですね。

階層メニューを表示

ネストしたメニューにも対応しています。これはいい省スペース!

ログイン画面を表示

フォームもポップアップで表示できます。

ダイアログを表示

そのへんをタップすれば消えるタイプ。こっちの方が使い勝手がイイ?

写真を表示

閉じるボタンを組み合わせて使っています。これがあれば lightbox を用意しなくてもいいですね。

その他にもできること

画面に合わせてサイズを自動調整する方法もあります。

jQuery Mobile Docs – Popup images

動画や地図も表示できます。
動画には閉じるボタンついてないので、画面外をクリックしてポップアップを消すのですが、ちょっとバグってしまいました。ビックリ。

jQuery Mobile Docs – Popup iframes

右からにゅっとメニューを出すこともできます。

jQuery Mobile Docs – Popup panels

オプションでポップアップの表示場所を変えたり、表示方法(トランジション)を変えたりすることもできます。

2. 折りたたみ可能なリスト

デモ:jQuery Mobile Docs – Collapsible lists

これは嬉しい!
今まで折り畳まれたリストを表示したい時は、折りたたみコンテンツの中に入れるしかなかったのですが、リスト自体の折りたたみ表示をできるようになりました。
しかもリストの様々な表示方法を受け継いでいるので、検索やサムネイルつきのリストも使えます。
一度開いたリストを閉じることも、そのままにしておくこともできます。
アイコンやテーマも変更可能。複雑なオプションはないので、デモを見れば直感的にわかるかと思います。

3. リストの自動振り分け機能(Autodeviders)

デモ:jQuery Mobile Docs – List Autodividers

リストに data-autodividers=”true” を設定するだけで、自動的に頭文字を割り振ってくれる機能です。
日本語もバッチリ!でした。使うときはふりがなを display:none で設定しておくと良いですよ。

実行するとこんなイメージ↓

4. その他変わったこと

スタイルシート側の変更点も多いです。

1) 表示するだけ(Read-only)のリストがフラットなスタイルになって「リンクではない」という印象が強まった。

2) controlgroups で使用しているアイコンのみのボタンがタップしにくく誤動作を招いていたため、アイコンの回りの padding を大きくし、タップしやすくなった。

3) ツールバーのボタンは mini がデフォルトに。

4) fieldcontainer で使うフォームの入力欄の右側があいていたが、端までの大きさに調整された。

5) 内部のプラグインを独立させ、必要な機能だけを使えるようになった。(カスタムダウンロード)
参考:Download Builder | jQuery Mobile(1.0アルファ版)

6) jQuery 1.8 でいくつかのコードが廃止されたことに伴って jQueryMobile1.2 + jQuery 1.8 では、Blackberry 5 と iOS 3 は対応しきれない部分がある。

7) jQuery 1.6.x はサポート対象外となった。

8) 新しいプラットフォームにも随時対応!
iOS 6、Android 4.1 (Jellybean)、Tizen(日本ではあまり使われていない)、Firefox for Android、Kindle Fire HD(電子書籍リーダー)はすでに対応済み。

9) location.href を利用したXSSに対応。
参考:Masato Kinugawa Security Blog: location.hrefの盲点
参考:jQuery Mobileのlocation.hrefのバグに起因するXSSへの対応をjQuery Mobile 1.1.1に適用したビルドを作りました – へっぽこプログラマーの日記

今まで四苦八苦しながらカスタマイズして使っていたところを、スマートに対応できるようになって嬉しいですね!


企業サイト等ではトップページでキャンペーンや特長を大きなイメージで表示したい場合があります。
広告というよりかは、「アイキャッチ」とか「メインイメージ」とか…いろんな呼び方がありますが(主流はなんて言うんでしょ)、それがひとつに限らない時はランダムで表示するより、スライドして表示させるのが主流になってますね。

困ったときのjQueryを使用するのは確定していたので、山のようなプラグインから選ぶことにしました。
選定基準と理由は下記。

1.自動でスクロールする

閲覧者の操作を必要としなくても、ある程度自動で表示させるため。
デメリットとしてはクリックしようかなと思う頃には次に移ってしまうことがアリ。
これについてはユーザビリティーテストや解析結果を確認するといい。

2.キャプションやコメントは必要ない

ギャラリーサイトでは写真のタイトルとして出すんだろうけど、今回のような場合は画像だけで完結するので必要なし。あってもいいけどカスタマイズすれば綺麗に取れるものが理想。

3.サムネイル(大きなイメージを変えるためのボタン的画像)が使える

提供側としては優先順位はあるにしてもすべて見て欲しいものなので、よくある ●●●○● と下にあるだけだと、訴求力に欠ける。すべての人が最初から興味を持って訪れるわけではないので、サムネイルかボタンなどで、どんなスライドがあるかすぐに分かるほうがいい。

4.サムネイルはいくつでも置ける

メインイメージの幅や高さの範囲でしか置けないものも多いので、こっちも自動でスクロールするなどしていくつでも置ける必要がある。表示順序は表示前のプログラムである程度制御できるから、いつも隠れて見えないものがないように配慮。
ついでに、最後まで行ったら違和感なく最初に戻って欲しいな。

ちなみに、「カルーセル」というのは「回転木馬」の意味で、カルーセルパネル=横にスライドして端まで行ってもループして表示するパネルのこと。探してたのはズバリこれでした。
そういう点じゃ、端まで行って戻れないのはカルーセルとは言えないわけで・・・

via: カルーセルパネルとは – IT用語辞典 Weblio辞書

そんな条件付きで探したjQueryライブラリ!

次点:jQuery and WordPress Image Gallery

表示がすごく綺麗。あと、表示が速い??(キャッシュ効いてるのか、サーバのレスポンスがいいのか・・・)

トランジションも滑らかだし、下のサムネイルのカーソル追従もキモチイイ。

だがしかし、説明文は使わないのでスペース的に難あり。そして使用するには登録が必要。
無償のFree版と有償のPro版があって、ただ使うだけならFreeで十分。高機能を活かしたいならProで。
比較については下記にあります。

Comparison table | jQuery and WordPress Image Gallery

本命:GalleryView | spaceforaname

使うのは無料だけど自己責任で使ってね、とのこと。リスクはあるけどこの表示は私が求めていたもの・・・!

デモは下記。

ポチポチ選ぶだけでプロパティ設定をしてくれたら、期待通りになった!!