リダイレクトあれこれ

昔はホームページを見ていると、よく
「このサイトは移転しました、10秒後に移動します。移動しない場合は・・・」
的なのを見かけたのですが、最近そういうのあまり見かけない気がします。

ウェブサイトの閲覧の仕方が変わったのかな?
見ているカテゴリが違うってのもあるかもしれないです。


↑のような感じの時に用いられるリダイレクト処理。
ちょっと仕事でリダイレクト処理を扱うことがあったので、少ないですが思いつく範囲で列挙します。


HTMLのMETAタグを用いる場合

<META HTTP-EQUIV="refresh" content="5;URL=http://www.hogehoge.jp/to/">




javascriptを用いる場合
location.href = 'http://www.hogehoge.jp/to.html';
/* ↓履歴を残さずにページを移動するメソッドだが、
* Firefoxだと普通に履歴が残っている為に戻ることが可能。
*/
location.replace('http://www.hogehoge.jp/to.html');
// 5秒後に移動する場合
setTimeout("redirect()", 5000);
function redirect()
{
location.href = '../to.html';
}




.htaccessを用いる場合
Redirect permanent /from/ http://www.hogehoge.jp/to/
# mod_rewrite
<IfModule mod_rewrite.c>
    RewriteEngine On
   
    RewriteRule ^index.html$ http://%{HTTP_HOST}/index.php [L,R]
   
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [L,R]
</IfModule>
※.htaccessを用いる時は記述を間違えるとサイト全部アクセス出来ないという状況になる可能性もあるので、扱いには注意。



思い浮かんだのはこれくらいですー。
他にも色々あると思いますが、必要なものをチョイスするのがベストです。

IE6で、直前にあるボックスのmarginを引き継いでしまうバグ

皆様元気にIE8対策してますか?

「まだIE8の浸透率低いだろうし、別にいいかも・・・」

とか思ってしまいます、私が。

でも、IE6に比べると全然いいんじゃないかなって気もします。





よく、リストなどをfloatさせて横並びにするCSSのテクニックがあります。

私もメニューだったり、更新履歴だったりのところで使ったりするものなのですが、このボックス要素をfloatさせるというところに予想外のバグが潜んでいたりします。



たとえば、こんな感じです。

html, body,
h1, h2, h3, h4, h5, h6, a, p, addres,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form,
fieldset {
margin: 0;
padding: 0;
border: none;
font-style: normal;
font-weight: normal;
font-size: 100%;
list-style-type: none;
}
#container {
width: 700px;
}
h1{
width: 700px;
height: 30px;
margin-bottom: 20px;
background-color: #900;
color: #fff;
}
.date_list dt {
float: left;
width: 100px;
height: 30px;
margin: 0;
background-color: #090;
color: #fff;
}
.date_list dd {
display: inline;
float: left;
width: 600px;
height: 30px;
margin: 0;
background-color: #009;
color: #fff;
}
<div id="container">
<h1>これはタイトルです。</h1>
<dl class="date_list">
    <dt>○月×日</dt>
    <dd>これはダミーです。</dd>
</dl>
<dl class="date_list">
    <dt>○月×日</dt>
    <dd>これはダミーです。</dd>
</dl>
<div class="text_area">
    これはダミーです。<br />
    これはダミーです。<br />
    これはダミーです。
</div>
これはダミーです。
</div>


これをFirefoxやIE7で見ると、意図したとおりになります。

0909291.jpg


ですが、IE6では意図していないところに隙間ができてしまいます。


0909292.jpg





どうも、直前にmarginを持ったボックスがあると、そのmarginを引き継ぐようです。

引き継ぐのは、margin-bottomの値のみ。
ちなみに、clearfixを使うと悪化します。
試してみたclearfixは、
clearfixでfloatを解除 – d-spica
↑のもので試してみました。
(IE6で時々、clearfixの高さが0にならないんですよね・・・その辺は未だなぞ)


なので、
「直前のmarginを引き継ぐのなら、marginが0の子を入れてあげればいいじゃない」
ってことで、h1タグの直後に

<div style="height: 0px; overflow: hidden;"></div>

を挿入。
すると、正しく表示されるようになりました。
もっとスマートな方法があればいいんですけどね。

amazonのロゴの意味を知っていますか?

この週末は頭痛でしんでいました。
休みボケのせい?だったのか、なぜか昨日働いていたら徐々にマシになっていった不思議。。。
あぁでも、プログラムなんかじゃなくデザインやりたいです、デザイン!


デザインといえば、amazonのロゴの意味を知ってますか?
amazonの下にあるみょーんってなっている黄色の円弧ですが、実はaとzを結ぶ矢印になっていて、「a→z」商品の取り扱い数が多いとかいう意味を持っています。

ってことだけは知っていたのですが、笑顔っぽくなっているということは↓の記事で初めて知りました。
あの企業のロゴの秘密いろいろ – かちびと.net

こういうの見ていると超楽しいですよね!
あのロゴにこんな意味があったのかーとか。
見たことあるロゴは半分くらいですがっ。

他の企業ロゴを見るのも、ちょっと楽しくなりそうです。
私も何かのロゴの意味とかを聞いたことがあるはずなんですが、思い出せず。。。
思い出したら、ちょろっと書くかもしれません。

Firefoxで最近閉じたウインドウが開けるようになっている

今日でシルバーウィークも終わりです。
連休とはいえ、休めたのか休めてないのかなぞです、体がだるい。
連休が終わりといっても、また2日会社に行ったら週末なので、かなり楽ちんですねー。
今週もがんばろっ。


Firefox大好きな皆様、バージョンはいくつですか?
まだ3.5にしていないという方もいるかもですが、3.5にバージョンアップすることで増える機能のうち、私的にすごく嬉しい機能が1つ。

履歴 → 最近閉じたウインドウ

とすると、間違って閉じてしまったウインドウを復帰することができるのです!

基本的にタブを大量に開いていて、ブラウザを閉じる時もタブ情報を保持したままにしているのですが、ポップアップなどでウインドウが2枚になってしまった時に、メインのブラウザから先に閉じてしまってしまった時の悲劇といったらもう。。。

そんな時にこの『最近閉じたウインドウ』を選択すると、開いていたタブ情報も全て復活するみたいです。
同じような使い方をしている人には、嬉しい機能だと思います。

Firefoxで検索(ページコントロール)を楽にする

シルバーウィークも後半戦です。
というか、シルバーウィークって名前がついてることにびっくりです。
来年もシルバーウィークってあるんでしょうか??


そんなシルバーウィーク中なので仕事はありませんが、メインブラウザはFirefoxな私です。
ほとんどカスタマイズしていなかったのですが、最近AutoPagerizeを導入するためにGreasemonkeyを入れましたましたっ。
順番的には逆なのですが。

Autopagerizeを入れるだけでもGoogle、Yahoo等の検索結果ページ、楽天やAmazonの商品検索ページで、ホイールをくるくる回すだけで、次のページ次のページが表示されますよ!

ですが、Googleの画像検索ではAutopagerizeが機能しません。
さらに追加で【AutoPagerize】Google 画像検索対応スクリプト(AutoPagerize本体をいじらない版) – 風柳亭を導入することで、Googleの画像検索でもAutopagerizeが動きます。
こんな感じで↓

導入前


0909221.jpg




導入後


0909222.jpg




今見ているページの下に移動すると、次のページが読み込まれて表示されます。
画像検索の際はサムネイルをざっと見て次のページへ、ってことも多いと思うので、そういう時にはすごく便利ですよ!