Webページの制作でiframeで他のページの情報を埋め込んだり、ウィジェットを埋め込んだりすることってありますよね。
このiframeは高さが決まった高さなら、CSSで高さ（height）を事前に決めてあげればよいのですが、昨今のレスポンシブWebデザインでは、iframeの高さがPCとスマホ・タブレットで結構変わってしまうことも多くて、事前に高さを決め打ちで指定できないことも多くあります。
そこで、JavaScript（jQuery）を使って、iframeの高さを自動的に設定してくれるスクリプトを紹介します。
画像をウェブページ上でスライドのように切り替えるスクリプトは、いわゆるスライダーと呼ばれます。
このスライダーを使うためのスクリプトとして有名で高機能なスクリプトに「Slider Pro」があります。
Slider ProはjQueryと一緒にロードして使うタイプのスライダーのスクリプトです。
画像出典：Slider Pro - Elegant and Professional Sliders
Webサイト制作に役立つ情報を発信しているサイト「コリス（Coliss）」でも紹介されていましたね。
Slider Proの特徴
Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。
[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro（ コリス）
実際に制作したSlider Proを使ったスライダーはこんな感じ。
画像出典：相談できる印刷会社 吉田印刷所
今回もフォームの最適化について書いていこうと思います。
先日の「【Web制作】フォームの最適化しようと、いくつか表現を変えてみたテスト【初心者向け】（画像あり）」という記事の引用の中で紹介した「こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由」（マミオン有限会社）のページで以下のアドバイスが書かれていました。
シニアのフォーム入力操作を観察していると、誤ってページから離脱してしまい、再びフォームのページに戻ったら最初から全部やりなおし…という悲しいシーンによく遭遇します。フォームからフォーカスが外れた状態なのに気付かず、文字を修正しようとしてbackspaceキーを押してしまうのです。
こうした悲劇を防ぐためには、上記のHOME’S介護のように確認メッセージを出す方法がよいでしょう。実装方法も簡単なので、費用対効果が高い対策ですね。
[jQuery] ページを離れる際に確認メッセージを出す方法（18th Tech Note）
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 ｜ マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価
なるほど。Backspaceキーが「前のページに戻る」のショートカットキーになっていることに気がつかずに、または、意図せずショートカットキーの機能が有効になってページを移動してしまうというわけですね。
これは確かにストレスになります。
早速紹介されていたページを見て、jQueryのスクリプトを見てみました。
これはこのままでも使えるので、皆さん使ってみると良いと思います。
ページを移動しようとすると、以下の様な「このページから移動しますか？ 入力したデータは保存されません。［このページから移動する］［このページに留まる］」という確認用のダイアログが出てきます（画面はFirefox）。
ですが、個人的な見地から、もう少し修正すると更に良くなると考えたので、修正版を公開します。
画像出典：.hover()（jQuery API Documentation）
jQueryの1.7以降では、.onという要素にイベントを追加する命令（メソッド）が使えるようになっています。今まで.bindで書いていたものから置き換えて使えるようです。
といっても私は.bindすら使っていませんでしたが…（.hover()や.click()だけで事足りていたので…）。
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()
.on() | jQuery API Documentation
.onの詳しい話は「jQuery の on() と off() を理解する（tacamy.blog）」に書かれているので、詳しく知りたい方はそちらを読んで欲しいのですが、.onは引数のひとつめにイベントを複数書けるのでとても簡単な書き方になります。便利そうですよね。
on() のひとつ目の引数を、スペース区切りで複数指定することで、どのイベントが発生しても同じ処理をさせることができます。
$('.foo').on('click blur', function(){...});jQuery の on() と off() を理解する - tacamy.blog
ということで、早速使ってみようと思いました。
$(".foo").on("click",function(){...});とclickイベントが付いている要素へ、追加でマウスカーソルが要素に掛かっても（要素にホバーしても） function(){...} を実行できるようにしようと、
$(".foo").on("click hover",function(){...});と書いたら動作しないわけですよ。
いつもマウスカーソルが要素に掛かる（ホバーする）時には次のように書いていて、
$(".foo").hover(function(){...});これが動作するのになぜ…と思ったら、重大な勘違いをしていました。
このブログは画像拡大表示の動作（lightbox）には prettyPhoto というjQueryのプログラムを使用しています。
複数の画像をグループとして表示したり、YouTubeやvimeoの動画を表示することができたりと高機能のlightboxプログラムです。（下の画像もPCで見た場合、クリックするとprettyPhotoのlightboxで表示されます）
画像出典：jQuery lightbox（No Margin For Errors）
このprettyPhotoですが、トップページのサンプルのページに以下の様に書いてあります。
- Create a link (<a href="#">).
- Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
- Change the href of your link so it points to the full size image.
jQuery lightbox for images, videos, YouTube, iframes, ajaxStephane Caron ? No Margin For Errors
実際これはこれで問題ないのですが、毎回「<a href="画像のファイル名" rel="prettyPhoto">」と「rel="prettyPhoto"」をaタグに追加して書くのは面倒ではないですか？
私は面倒です。
また、このブログは最近デザインをリニューアルしましたが、過去の画像のリンクに「rel="prettyPhoto"」と加えるのは現実的に無理です。
なので、楽をしましょう。
レスポンシブウェブデザインのページを作るときに注意したいのが、画像をスライド表示のように切り替えて表示するスライダーを使用する際に、PC用で使っていたスライダーのJavaScript（やjQueryプラグイン）を使用すると、画面の大きさに合ったスライダーにならないとか、画像をスワイプして画像切り替えができないという問題が発生することがあります。
その点をクリアしたレスポンシブウェブデザインで使用できるスライダーのjQueryプラグインとして、私はFlexSliderを使用しています。現在のバージョンは2.2.1。
画像出典：FlexSlider 2（woothemes）
こちらの極薄紙印刷のサービス紹介サイトで使用しています。
画像出典：極薄紙印刷･薄葉紙印刷のスーパーライトプリント（吉田印刷所）
以前に「【疑問】JavaScriptの window.jQuery || document.write …という条件式の書き方」ということを書いて、理由を探したのですが、ちょっとまだモヤモヤしたままでした。
モヤモヤを抱えたままだったので自分なりに考えてみました。
今回はウェブの開発・制作でよく使われるFirefoxのFirebugを使用します。（インストールはこちらから）
Firebugの機能で、コンソールという機能があって、ここにスクリプトを書いて、色々実験ができます。
画像出典：Firebug
この機能を使って「window.jQuery || document.write('<script src="●●"><\/script>') 」の動作を調べてみます。
名前：笹川 純一・jdash2000（Google+のプロフィール）
ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。
お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。
