2012.06.11

jQueryといふものをしてみむとてするなり

サイト制作の復習です。
先日、サイトを引っ越しまして、旧サイトへのアクセスを新サイトへ転送しております。
niftyのフリースペースでは.htaccessが使えない為、301リダイレクトで転送できません。苦し紛れにmetaのrefresh 0秒を使用しています。

Firefoxだと自動転送ブロックでサイト移転のお知らせが見えます。しかし、Safariなどは意図した挙動とはいえ、有無を言わさず０秒で転送されるので、ビジターに不安を与えかねません。
移転の案内を読める時間をとった３秒後に転送とかが一番親切だと個人的には思いますが、今後のビジターの為にも検索エンジン対策でいちおう0秒転送で301的にもしたいものです。
（refreshの場合、０秒で301扱いという情報も見ましたが、Googleはスパム扱いするという情報もあり、根本的な検索エンジン対策にはなっていません。.htaccessが使えなくては他に手は無いしなぁー　PHP? 敷居が高すぎますｗ）
そこで、新サイトにフローティングウィンドウで「移転のお知らせ」を表示して、ビジターに悪質な誘導ではないことを案内することにしました。
最近、プラグインを利用して興味を持ったcssが出来れば敷居がちょっとばかり低いというjQueryを学習してみむ。

近頃、勉強の為にご本を買いました。

Amazonで見る
Web制作の現場で使うjQueryデザイン入門[改訂新版]
(Web Professional Books) 大型本 – 2013/3/7

改訂新版がでました！：最新のJquery1.9とHTML5に対応。価格もお安くなってます。
jQueryがまったく手探り状態でも基礎から学べました。これ一冊実践したらjQuery結構使えるようになるんじゃないかな。と期待しています。
ただ、jQueryを使う上でのjavascriptのこれは覚えとけという解説がもうちょっとあればなぁ。それを言っては欲張りなんだけども。きっと本がもう一冊書けちゃうボリュームになってしまうんだろうな。
javascriptの何が知りたいのかのとっかかりになるので、そこから発展して学習するのもいいかもしれない。
こちらの本の中にもフローティングウィンドウの実例があり、すごいのがWebで全文読めるということ。でも、ゴロゴロしたりしながら読める書籍はやっぱりいいです。jQueryの概要はだいたい掴めたような…。自分で１からというのはまだまだですが。

しかし…『Web制作の現場で使う jQueryデザイン入門』の作例はドラッグできるとか高性能すぎます。そんなに凄いのじゃなくていいんです…。
ただ元サイトから飛ばされてきた時、出来れば真ん中くらいにウィンドウがあって、閉じられさえすればいいという。

こんなん、書いて見ました。合ってんのかなぁ。動いているけど…突っ込みお待ちしてます。
そしてIE方面はガン無視してます。すみません。最近IE対策のなにもかも面倒になってきた。
さわやかサンプル
move_shot

<div id=”floatWindow”>は<body>直下に置く。

css、scriptは適宜外部ファイルに。
position使いすぎなページのためのz-indexなど、必要の無いものは端折ってます。
当サイトでは画像を使いaltで文字を入れていますのもここでは端折っています。
重要なのはcssの #floatWindow｛display: none; }
この指定で非表示にしてある#floatWindowをjQueryの.fadeInという命令で操るらしい。

まず、旧サイトからのアクセスだけを振り分けたい。
if(document.referrer.indexOf(“gonz”)!=-1)
リファラに旧サイトのアドレスの一部、”gonz”の文字列が無いときは-1の値が返る。!=は「等しくない」
gonzは無い（-1）と等しくない。つまり、gonzがあるよという場合（if) は命令を実行するよ。

ウィンドウを開くんだけど横位置真ん中に開きたいなぁ。
var winW = $(window).width(); ブラウザのウィンドウサイズを収得して変数（winW）を宣言。
$(“#floatWindow”).css(‘left‘, winW/2-$(“#floatWindow”).width()/2)で
#floatWindowのcssにleftプロパティと
計算式「winWブラウザウィンドウ幅÷２-フロートウィンドウ幅÷２」で求められた値が追加され、水平方向真ん中に位置指定。
.fadeIn(“fast”)　でフェードインのアニメーションをしつつ表示（開く）。

もちろん閉じるボタンで閉じられないと。
$(“#floatWindow a.close”).click(function(){
#floatWindowの中のaクラスcloseをクリックした時、
$(“#floatWindow”).fadeOut(“fast”);
return false;
#floatWindowをフェードアウトのアニメーションしつつ非表示に（閉じる）。と。
return false;は<a>の時はお約束だよ。

div#floatWindowの中身はdlじゃなくても何でも。最初に『Web制作の現場で使う jQueryデザイン入門』見て忠実にやってみた名残だったり。
今回は、script意外の所の凡ミスでかなり苦労しました。<body>直下のdivでないと動かないというのに、どっかのdivの閉じタグが一個足らんかったという…子要素判定となっておりました。
SafariのWEB インスペクタがなければ発見できなす。
さて、次は何をしてみましょうかね。

CATEGORY : css&html web関連 | TAGs :

コメントをどうぞ



PageTop