カテゴリー: Web

とりあえずエラーページを用意してみました。いわゆる 404 Not Found とかいうアレです。

なぜって？ディレクトリ内の丸見えを防ぎたかったんです

使っているサーバはさくらインターネットのレンタルサーバ スタンダードプランで、さくらは .htaccess で設定をいぢることはできるんですが、Options が使えない。なのでインデックスファイルが存在しないディレクトリを開いた時に中身が丸見えになるのを防ぐには、Options を使わずに違うアプローチが必要になる。公式サポートのひみつのフォルダにあるファイルの一覧を見られないようにしたいというページでは DirectoryIndex を使ってインデックスファイルの設定の最後にエラーページを指定して、インデックスファイルが存在しない場合はエラーページに飛ばす方法が書かれていました。まあ、この方法を使うことにしたわけですが、ただエラーページを用意しただけじゃつまらないので色々と細工をしてみました。

めんどくさいことは Perl に投げちゃお

細工と言っても単純で、エラーコード 404 だけでなく 403 や 500 にも対応できるように、エラーページを Perl スクリプトにして動的に出力してやることにしました。

ステータスコードは検索ロボットたちに優しいんです

Perl スクリプトにすることでステータスコードをきちんと返すことができるようになる。きちんとステータスコードを出力することによって、エラーを、人にだけでなく Google や Yahoo などの検索ロボットにも伝えることができるので、結果的に検索から訪れる人に対してのエラーを減らすことができる。

真っすぐな視線には弱いんです

なお、当初の目的である、インデックスファイルがない時に error.cgi へ飛ばした場合ですが、error.cgi へ直接アクセスされることになります。なので、直接 error.cgi へアクセスがあった時はエラー 404 を返し、ファイルは存在しませんよと偽装することにしました。

error.cgi の大まかなサンプルコード

my $error_code = $ENV{REDIRECT_STATUS};

# エラー 500 (Internal server error) の場合
if ( $error_code eq "500" ){

# エラー 404 (File not found) の場合
} elsif ( $error_code eq "404" ){

# エラー 403 (Permission denied) の場合
} elsif ( $error_code eq "403" ){

# error.cgi への直接リンクの場合
} else {
    # 404 を偽装しステータスコードも 404 を返す
    print "Status: 404 Not Found\n";

}

.htaccess の中の関連する項目

#-----------------------------------------------
# インデックスファイル

DirectoryIndex index.cgi index.php index.xhtml index.shtml index.html /error/error.cgi

#--------------------------------------------------
# エラー400 (Bad Syntax) リクエストの方法が違います
# エラー401 (Authorization Required) 認証に失敗しました
# エラー403 (Permission denied) アクセス権限がありません
# エラー404 (File not found) 該当するページが見つかりません
# エラー500 (Internal server error) 内部サーバーエラー（主にCGIなどの誤り）

#ErrorDocument 400 /error/400.php
#ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/error.cgi
ErrorDocument 404 /error/error.cgi
ErrorDocument 500 /error/error.cgi

error.cgi の実行結果例

• 403 Permission denied
• 404 not found
• 500 Internal server error
• 直接 error.cgi へアクセスした場合 (404 Not Found)

エラーページ作成にあたって 68user’s page 内の error.cgi を参考にしました。

WordPress を使う機会があって、その時に Vicuna – CMS をベースにしながらテンプレートを作成しました。そんなこともあってこの Vicuna – CMS を Seesaa BLOG でも使えないものかと思い立ち、移植してみました。Seesaa 独自のテンプレートタグの情報が少なすぎて悪戦苦闘しつつもなんとか形になったようです。

ページごとのレイアウト変更

オリジナルの Vicuna CMS と同じように、開くページによって body のclass 属性を変えることによってレイアウトが切り替わるようになっています。例えば、トップページとブログ内記事検索結果を見比べるとレイアウトが違うのがわかると思います。

パンくずナビとページャー

とりあえずな感じのパンくずナビを追加。次のページへのようなナビゲーションは Vicuna CMS 方式に。

コンテンツについては使うものだけ

サイドバー等に表示されるコンテンツに関しても使う物は修正。検索フォームとかなにげに面倒くさかった。カレンダーは個人的に必要ないと思っているので放置。それにしても Seesaa BLOG の Powered by なんちゃらはどうにかならんのかな。必ず表示しなければいけないにも関わらずソースが糞すぎる。そして修正できないというジレンマ。

なるべく日本語で

やっぱ日本人なので。でも、ところどころ英語のまま。

とりあえずファイル置いときます

テンプレート

• Seesaa.Vicuna – HTML
• Seesaa.Vicuna – 記事
• Seesaa.Vicuna – コンテンツ

スキンは適当なところにアップロードして、デザインのスタイルシートに以下のようなソースを書いてスキンを読み込む。

@charset "Shift_JIS";
/*
Theme Name: wp.Vicuna
Theme URI: http://wp.vicuna.jp/
Description: wp.Vicuna Structure Template + Skin
Version: 1.5.9
Author: wu
*/
@import url("http://hogefuga/スキン名(style-vegaなど)/import.css");

なお、元にするデザインはデザイン一覧から 3 カラムレイアウトのものを適当に選ぶと幸せになれます。左のサイドバーに置いたコンテンツは div id="utilities" 内 dl class="navi" の中へ格納され、右のサイドバーに置いたコンテンツは div id="utilities" 内 dl class="others" の中に格納されます。え？言ってる意味がわからない？すいません。

ライセンスとか

オリジナルの Vicuna CMSのライセンスに準じます。自己責任で。

銀座のアップルストアで行われていた Web 標準の月例イベントである CSS Nite。行きたい行きたいと常々思っていたんだけど、青森でも有志によって開催されることになったと知り、家から会場が近いこともあったし CSS Nite in AOMORI に参加してみた。

始めの講演者の益子さんが運営する CYBER@GARDEN 内の Web リソースはむしゃぶりつくように読み漁ったもんです。プレゼンではクールでシュールな印象でした。たまのお笑いがツボに入りました。笑。

次の講演者のやすひささんのブログ： C O U L D は最新でホットでトキメキなネタがたくさんなのが面白くてしっかり巡回コースです。仕事を楽しんでるっていぅのがすごぃ伝わってきた。

最後の講演者の鷹野さんは、MacBook Pro を使ぃ、Parallels 上で Windows Vista と Windows XP を同時に起動し、なおかつ Keynote でプレゼンしながら Dreamweaver の実演を行うとぃう離れ業を見せてくれました。あの、途中動作が重くなったのって、メモリ不足によって仮想メモリ swapfile が肥大化したためだと思ぅ。無茶し過ぎです。笑。

Web 業界の裏話などが興味深かった。何より、お世話になっている Web サイトや本の中の人と直接会えたのが嬉しかった。次回もぜひやってほしぃです。ちなみに、プレゼント抽選では Dreamweaver のキーボードショットカットキー一覧表を頂きました。

せっかくスタイルシート切り替えスクリプトをつけたので、一発ネタのにちゃんねるスタイルを作ってみた。

一発ネタだけあって実用に耐えられないものとなっています。わらい。右上の StyleSelect フォームから 2ch を選んでみてください。もしくはべたぶろぐへにちゃんねるスタイルを強制的に適用する。

はい、ごめんなさい。

一昨日から夜勤のバイトしていて、帰って来ると風呂入ってお酒飲んでバタンキュー。彼岸のお団子作りです。

コメントを頂いていたので、とりあえず Lightbox JS とドロップシャドウの併用はできますよ例。

Lightbox JS とドロップシャドウ併用

<div class="image">
    <a href="http://seize-a-day.up.seesaa.net/image/bass.jpg"
            rel="lightbox" title="うちのバスちゃんズ" target="_blank">
        <img src="http://seize-a-day.up.seesaa.net/image/bass-thumbnail2.jpg"
                width="150" height="112" border="0" align="left" alt="うちのバスちゃんズ" />
    </a>
</div>

見やすいように空白類文字を加えました。

表示例

Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ)と合わせて読んでみてください。

マウスが壊れている。ドラッグがうまくいかない。うまくブロギれない。そして眠い。今日はここまで。おやすみなさい。

ふと思い立ち、Another HTML-lint gateway を使って文法チェックを試みる。

ふつうです。

http://seize-a-day.seesaa.net/ を XHTML1.0 Transitional としてチェックしました。71 個のエラーがありました。このHTMLは 60 点です。タグが 29 種類 244 組使われています。文字コードは Shift JIS のようです。

いやはや何とも中途半端な結果。ほとんどのエラーは、 Seesaa BLOG が自動生成するコード、アフィリエイトアンカーだったりするので対策のしようがない。直せるところは直してみようと思う。

ソースコードのマークアップで参考にしたとこをメモ。

• コンピュータ – mozilla.org マークアップ参考資料
• ソースコードのマークアップに関する議論リンク集

なんだか懐かしい気持ちになった。

CSS によって画像にドロップシャドウを付ける Tips。

• Easy CSS drop shadows | Blog | 1976design.com

ほとんどそのままソースを使わせてもらいました。仕組みについては A List Apart: Articles: CSS Drop Shadows を見れば、図解されているので非常にわかりやすい。

Seesaa BLOG サービスでは、アップロードした画像を記事に貼付ける時は自動でソースを埋め込んでくれる。

Seesaa BLOG が書き出すソース

<a href="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi.jpg"
        target="_blank">
    <img src="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi-thumbnail2.jpg"
            width="150" height="112" border="0" align="left" alt="kukkyさんちのキムチ" />
</a>

見やすいように空白類文字を加えました。

あたしの場合、この生成されたソースを実際に使う時は <div class="image"> で囲んでいるので、こいつを CSS のクラスセレクタとして利用することにします。

まずは Easy CSS drop shadows | Blog | 1976design.com からドロップシャドウの画像素材をダウンロードして Seesaa BLOG にアップロードしておく。そして CSS のソースも参考にしながら、margin の微調整と画像が連続する場合のみ float で流し込むように書き換える。

実際に使う HTML ソース

<div class="image">
    <a href="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi.jpg"
            target="_blank">
        <img src="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi-thumbnail2.jpg"
                width="150" height="112" border="0" align="left" alt="kukkyさんちのキムチ" />
    </a>
</div>

見やすいように空白類文字を加えています。

CSS のソース

/****************************************************
 *    Easy CSS drop shadows
 *    http://www.1976design.com/blog/archive/2003/11/14/shadows/
 ***************************************************/

/* 画像が連続する場合のみ流し込みするため、他のは流し込み解除 */
.posted
    {
    clear: both;
    }

/* .image の場合 */
.text .image
    {
    text-indent: 0;
    background: url('http://hoge(環境に合わせて書き換え)/shadow.gif') no-repeat bottom right;
    clear: none;
    float: left;
    width: auto;
    margin: 0 1em 1em 5px;
    padding: 0;
    position: relative;
    }

.text .image img
    {
    color: inherit;
    background-color: #fff;
    border: 1px solid #a9a9a9;
    display: block;
    margin: -5px 5px 5px -5px;
    padding: 4px;
    position: relative;
    }

/* もしもアンカーだった場合のために :hover 時の装飾 */
.text .image a img:hover
    {
    color: inherit;
    background-color: #fff0f0;
    border: 1px solid red;
    }

表示例

ここで使った猫の写真は、So-net blog:HDV/ハイビジョン/ネコ年は来ないの Studio Kukky さんちの猫、キムチです。 勝手に出演させちゃいました。

以下、追記。

スタイルシートをやや修正。

• 記事本文中のみに影響範囲を限定するため、各セレクタの親に .text を追加
• 流し込み解除するセレクタを変更
• 画像がアンカーではない場合も想定し、.image a としていたセレクタを .image に変更
• 画像がアンカーの場合は、マウスオーバーでアンカーであることがわかるように装飾を変更

さらに追記。

• 流し込み解除のセレクタとして .text > a と .posted を追加（けっこう重要）

さらに追記。

• 流し込み解除のセレクタを .posted のみに絞りました。これがあることで最低限のレイアウト崩壊を防げると思います

やっと Seesaa BLOG の使い方にも慣れてきたところで、とりあえずあらかじめ用意されているテンプレートの CSS をいぢることから始めてみようと思う。

素材として選んだテンプレートのスタイルは、タイトルの瑞々しいガーベラが印象的な ガーベラスタイル。

なにはともあれまずはユーザビリティ確保のために、font-size を px 単位で絶対指定された値を相対的な % 単位に書き換え。次に Windows IE での表示のことなんて知りませんよ〜という感じで無駄なプロパティを削る。あとは Seesaa BLOG 固有の class / id を把握するためにも、思うがままにひたすらいぢるのみ。

書き換えまくり中なので、見る度、見栄えが微妙に変わっているかもしれない。