28. 10月 2012 · Write a comment · Categories: WEB制作 · Tags: , ,

Trust Form のチェックボックスやラジオボタンに、label タグが入っていなかった件で、そこを弄ったついでに設定した内容です。

チェックボックスなどだけにクリックエリアが効いているだけでは非常に押しにくいため、テキストを <label> で囲ってやる必要があります。ちなみに、IE6の場合は input に id を設定し、label に for=”id名” と設定してあげないと有効になりません。制作側の手間を増やしてくれる、マゾには嬉しいブラウザです。

IE6 の場合:
<label for=”chk1″><input type=”checkbox” name=”chk1″ id=”chk1″ vaue=”めっけら” /> めっけら<label>

IE7移行 の場合:
<label><input type=”checkbox” name=”chk1″ vaue=”もっけら” /> もっけら<label>

さて、上記のようにテキスト部分を囲ってやるだけでもいいのですが、もう一歩踏み込んでもっとわかりやすくしてみましょう。例えばこんなふうに↓

スマートフォンの UI に便利な jQueryMobile のスタイルまで行かなくても、クリックエリアと選んだ選択肢はわかりやすくなりますね。大前提として、チェックボックスは複数選択できますが、ラジオボタンは1つのみです。これを jQuery と CSS で料理します。

javascript (jQuery) 

WordPress で jQuery を使いたい場合は  jQuery(document).ready(function($) { … }); の中に上記のような命令を書けば良いですね。

選択済みの選択肢に label-checked クラスを設定し、クリックした時の挙動を入れています。type の複数取得の記述は…動いてますがちと自信ナス。

HTML

span で囲むのはどちらでも構わないです。ある程度 label で対応できるので。上の例だと、最初の選択肢がすでに選択済みの状態なので、javascript によって label に CSS のクラスが設定されています。

CSS

Trust Form を作成すると div.contact-form で囲まれます。その中の label 近辺を修飾しています。好みに応じてもうちょっとボタンらしくしても良いかと。

こんな感じで EFO にもオススメなので、お試しください。

スマートフォン対応サイトを作るのに便利な 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

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

デモは下記。

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

22. 2月 2012 · 2 comments · Categories: WEB制作 · Tags: ,

jQueryの1.4以上から遅延処理を行なうdelayが登場していることを知って、遅延処理ならさくっと終わるじゃーんと思って入れたものの動かなかったでござる。

理由は、delayはアニメーションにしか効かないから。もともとのキュー(queue)がアニメーションするものにしか有効でないためだろう。だから、「何秒後にこのクラスを変える」というのがdelayではできなかった。

ということで、animateを使うことに。

opacityを1.0、つまり見た目は変更せずに1秒経ったあとでcompleteの関数を実行。
hoverはマウスオーバーとマウスアウトが交互にイベント実行されるので、toggleにしておけばひとつの関数で済む。

実装したのは結局もうひとつfunction作って、

$(this).clearQueue().stop().removeClass(‘hover_submn’);

としたけど。clearQueueとstopはどちらかで良いかも。