2006年01月20日

●旧URLからのリダイレクトを停止しました

現在のドメイン取得・公開から約半年が経過しました。旧ドメインはダイナミックDNSの無料ドメインだったのでそのまま使用しており、旧ドメインへのアクセスは新ドメインに .htaccess を利用してリダイレクトしていたのですが、SEOを考慮して停止することに致しました(事後報告で申し訳ありませんがすでに停止しています)。
サイトを検索すると 「meta 要素での新しいURLへの誘導なら大丈夫」らしいですが、現状はとりあえず止めています。

このため、旧ドメインへのリンクが全てデッドリンクとなります。考えられる影響範囲は下記の通りですので、申し訳ございませんが必要に応じて適宜変更くださいますよう、よろしくお願い致します。

  • ブログ記事からのリンク(2005年7月10日以前)
  • RSS
  • クレジットバナー(現行のサイトから画像をダウンロード・ご自身のサイトへアップロードし、そちらへリンクをお願い致します)
  • ブックマーク類

一つ目の問題については meta タグを利用した誘導を実施するかも知れません。

2006年01月18日

●エラーページを作る

404エラーのページスクリーンショットのように、指定したURLが存在しない場合等にしばしば表示されるエラーページですが、「ErrorDocument ディレクティブ」というものを利用することでオリジナルのエラーページを表示することができるようになります。

エラーページに関するご質問を頂きましたので、本エントリーにて設定方法をご紹介致します。とりあえず確認の意味も含めて当サイトもエラーページを作ってみました。

1.エラー表示用のHTMLファイルを作る
任意のエディタで、「404.html」のファイル名でHTMLファイルを作成し、index.html が置かれているディレクトリへアップロードします。Movable Type であればプロフィールのページを作るを利用して作るとブログと同じようなデザインのファイルを簡単に作れます。

設定後、ブラウザからこのファイルのURLを入力し、正常に表示されることを確認しましょう。

2..htaccess を作る
.htaccess は特殊なファイルで、このファイルに対し、指定したURLが存在しない場合にエラーページへジャンプさせるための設定を行います。

まず任意のエディタで下記の内容をコピーしてください。そしてこれを「.htaccess」という名前で保存します。Windows の場合、エクスプローラ上でこの特殊な名前に変更することはできませんので、ご注意ください。
また自宅サーバの方は .htaccess ではなく httpd.conf を開いて下記の設定を追加します(追加後、Apache の再起動をお忘れなく)。

ErrorDocument 404 /404.html

ErrorDocument ディレクティブの説明は下記にあります。

Apache HTTP サーバErrorDocument ディレクティブ

行末の /404.html は相対パス(この書き方)または http 指定が可能です。/404.html としているのは .htaccess と同じディレクトリに配置するのでこのような設定にしています。エラー用ファイルを他のディレクトリに配置する場合は、ディレクトリ名をファイルの前に追加します。
なお初めて .htaccess を作る場合はこの1行しかありませんので、行末で必ず改行を入力してください。

3..htaccess をアップロードする
作成した .htaccess を index.html が置かれているディレクトリへアップロードします。
パーミッションによって正常に動作しない場合があるようです。現在利用しているさくらインターネットでは「644」でOKでした。ロリポップは「604」のようです。

アップロードと同時にこの機能が動作しますので、存在しないURLをブラウザで指定して1項で作成したファイルが表示されることを確認してください。また index.html 等の存在するファイルも正常に表示されることを確認してください。
正常に動作しない場合は一旦ファイルを削除しましょう。

4.注意事項
サイト検索でみつけた内容を引用しておきます。
ロリポップ!レンタルサーバー - エラーページの変更では「エラーページで画像を使用する場合には、「 http://から始まるURL 」 で表示を行ってください」と書かれていました。これは「ErrorDocumentは、エラー発生時のページを基点にエラーページ表示を行なう」ためのようです。JavaScript や CSS を参照する場合も同様です。
また「404エラーページに限り~(中略)~ページの容量が1Kバイトを超えるように、ファイルを作ってください」ということです。 このことは先のErrorDocument ディレクティブにも「一般的にはエラーの文書を 512 バイトよりも多きくすると、MSIE は サーバが生成したエラーを隠さずに表示します」とあります。

5.その他のエラーも追加する
上記は404(指定したURLが存在しない)の場合のみの説明でしたが、401(認証エラー)/403(パーミッション異常)/500(CGIエラー等)のエラーも下記のような設定を追加することで表示することができます(当サイトでは404のみ)。

ErrorDocument 401 /401.html
ErrorDocument 403 /403.html
ErrorDocument 500 /500.html

この場合も行末では必ず改行を入力してください。

2006年01月17日

●エントリー・アーカイブの追記文章の折りたたみ(改)

以前から公開している個別アーカイブに「続きを読む」を導入ですが、このカスタマイズを行うと JavaScript を OFF にした場合、追記文章が読めないという不具合が残っていました(今更ですいません)。

もともとこのスクリプトのオリジナルはscriptygoddessanother revision to the show/hide scriptで、折りたたみを戻す時に指定したアンカー位置にずれないためのカスタマイズ方法を公開していました。その後エントリー・アーカイブでも折りたためますという記事を書いたのですが、当時はアクセシビリティまで考えが及んでおりませんでした。

このスクリプトをメインページ・カテゴリー・アーカイブ・月別アーカイブに導入されている場合は、JavaScript が OFF でもエントリー・アーカイブにジャンプするように作られています(オリジナルからそうなっています)。ただしジャンプした先のエントリー・アーカイブで折りたたみを導入していると読めなくなるケースが発生します。

このエントリーではその点も踏まえ、また 3.2-ja に合わせて過去の記事を書き直してみました。
追記が読めない状態はアクセシビリティ上良くないため、すでに導入されている方は、下記の2項の青色部分を追加されることをお勧めします。

1.JavaScript の追加
エントリー・アーカイブテンプレートの編集画面を開き、<head>~</head> の間に下記を追加します。

<script type="text/javascript">
<!--
function showHide(entryID, entryLink, htmlObj) {
    extTextDivID = ('Text' + (entryID));
    extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
        if( document.getElementById(extTextDivID).style.display ) {
            if( entryLink != 0 ) {
                document.getElementById(extTextDivID).style.display = "block";
                document.getElementById(extLinkDivID).style.display = "none";
                htmlObj.blur();
            } else {
                document.getElementById(extTextDivID).style.display = "none";
                document.getElementById(extLinkDivID).style.display = "block";
            }
        } else {
            location.href = entryLink;
            return true;
        }
    } else {
        location.href = entryLink;
        return true;
    }
}
//-->
</script>

なお、テンプレートにスクリプトを直接埋め込むよりも、「テンプレートモジュール」を利用した方がスッキリします。テンプレートモジュールとは、HTMLタグやスクリプトを部品として「テンプレートモジュール」に登録し、そのモジュールを各テンプレートから引き込むように設定することで、テンプレートの記述を簡素にすることができ、修正も1ヶ所を直すだけで済むようになります。
利用する場合の手順ですが、管理メニューの「テンプレート」をクリック→「モジュール」をクリック→一番下の右にある「モジュールを新規作成」をクリック→次ページで下記を設定します。

  • テンプレート名:ShowHide(←何でもいいです)
  • このテンプレートにリンクするファイル:何も設定しない
  • モジュールの内容:上記のリストを丸ごとコピー

設定後、保存します。そして各テンプレートの <head>~</head> の間に

<MTInclude module="ShowHide">

を記述すればOKです。

2.テンプレートの修正
1項と同様、エントリー・アーカイブテンプレートの編集画面を開き、下記の部分を変更します。

3.2デフォルトテンプレートの場合、

<div id="more" class="entry-more">
    <$MTEntryMore$>
</div>

を、公開テンプレートの場合、

<MTEntryIfExtended>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</MTEntryIfExtended>

の赤色部分を、それぞれ下記の内容に書き換えます。

<noscript>
<$MTEntryMore$>
</noscript>

<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

に変更します。青色の noscript タグで括った MTEntryMore が JavaScript がOFFの場合に表示される部分です。

JavaScript が動作しない場合、「続きを読む」のリンクは表示されっぱなしになりますですので、上記リストではリンクの上に追記を表示するようにしていますが、もう少し説明を加えて、

<noscript>
<$MTEntryMore$>
<p>下記の「続きを読む」のリンクは JavaScript が有効な場合に機能します。</p>
</noscript>

としておくと分かりやすいでしょう。

3.ブラウザの JavaScript を無効ににする方法
IEの場合は、[ツール]-[インターネットオプション]-[セキュリティ]-[レベルのカスタマイズ]-[アクティブ スクリプト]の「無効にする」を選択してOK→OKをクリックします。Firefoxの場合は、[ツール]-[オプション]-[Web機能]-[JavaScriptを有効にする]のチェックを外してOKをクリックします。
いずれも再起動は不要です。

2006年01月16日

●車検と検査標章

昨年の12月に車の修理や車検でお世話になっているカーショップから、

「今年の10月、車検じゃなかったですか?」

と電話がかかってきました。そういえば昨年から今年前半にかけて色々バタバタしていたこともあり、車検に出すことをすっかり失念。幸い車検が切れている間、乗りたくても乗れない状態だったのが不幸中の幸いでした。
とうことで年末に車検をお願いして、一昨日、無事に戻ってきました。

また、そこの社長さんから聞いて初めて知ったのですが、「自動車リサイクル法」なるものが昨年の1月から始まったようで(TVでも放映されていたようですがそれも知らず)、「その費用が車検費用に加算されています」とのことです。
約数千円かかっていましたが車検費用全体に比べると誤差の範囲です。

旧検査標章車検切れに気がついて駐車場の付近の車を見ると、フロントウィンドウに貼られているステッカー(検査標章)がどれも小さくなっていました。いつ頃か不明ですがそうなったようです(自動車検査法人有効期間の更新)。
そういう訳でとりあえず記念に1枚撮っておきました。

2006年01月15日

●Lightbox JS の Movable Type での不具合を修正する

昨日エントリーしたLightbox JS で画像を表示するですが、Movable Type のアーカイブページ(カテゴリー・アーカイブ/月別アーカイブ/エントリー・アーカイブ)で正常に動作しないようでした。すいません。

下記に対処方法を記しておきます。

1.lightbox.css / lightbox.js の修正
カテゴリー・アーカイブ/月別アーカイブ(日別・週別も同じ)/エントリー・アーカイブの各ページのパスが loading.gif のパスと異なるため、lightbox.js の193行目で下記の JavaScript エラーが発生し、正常に読み込めないようです。

objLoadingImage has no properties

とりあえず loading.gif のパスにドメインを追加することでOKになりました。具体的には、当サイトの場合であれば、lightbox.js の36行目辺り

var loadingImage = 'loading.gif';

var loadingImage = 'http://www.koikikukan.com/loading.gif';

に変更します。なお試験サイトではドキュメントルートからのパス設定でも大丈夫でした。

またIEでは overlay.png のパスもきちんと設定しないと正常に読み込めないため、lightbox.css の14行目と20行目にある overlay.png にドメインを追加します。当サイトの例は下記の通りです。

#overlay{ background-image: url(http://www.koikikukan.com/overlay.png); }

    * html #overlay{
    background-color: #333;
    back\ground-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.koikikukan.com/overlay.png", sizingMethod="scale");
    }

lightbox.css の内容を styles-site.css に転記している場合(かつ普通に再構築対象にしている場合)や、ligjtbox.css をインデックステンプレートとして登録している場合は、<$MTBlogURL$>overlay.png とすればOKです。こちらも試験サイトではドキュメントルートからの設定で正常に読み込めました。

2.エントリー・アーカイブの修正
エントリー・アーカイブは1項の他に、onloadイベントハンドラとの競合で正常に動作しないという報告を下記のサイトで頂いています。ありがとうございました。

CEFA::BlogLightbox JSを組み込んだのだけれど
caramel*vanillalightbox.jsでサムネイルをCOOLに拡大表示してみる

対処は、安直ですがエントリーアーカイブの onload イベントハンドラ(赤色部分)

<body class="…" onload="individualArchivesOnLoad(commenter_name);>

を一旦削除して、

<body class="…">

とし、エントリー・アーカイブの一番最後に

<script type="text/javascript">
<!--
individualArchivesOnLoad(commenter_name);
//-->
</script>

を追加しています。この individualArchivesOnLoad は、サイン・イン中であれば名前とメール欄を非表示にし、各フォームにCookie情報を埋め込む動作を行っているだけですので、この対処で問題ない筈です。

ちなみに onload イベントハンドラに2行書いたりしてみましたがNGでした。

2006年01月14日

●オフ会

我楽さんのサイト最近はコメント等のやりとりがないのでご存知ないかも知れませんが、我楽のサイト管理人Border.さんとはブログを始めて間もない頃からの古いお付き合いでして、年末にちょっとしたやりとりから「お会いしましょう」という話に。
あいにく年末はスケジュールが詰まっていたため「では来年」ということで、本日お会いすることになりました。

場所は船橋の某ダイニングバー。偶然入ったお店ながら良い雰囲気で、料理はどれも美味でした。
Border.さんはイメージ通りのナイスガイで知的な印象。しかも私に負けず劣らず渋い声の持ち主(笑)。気がつくと4時間余り経っており、ブログ・その他色々な話題で大変楽しい一時を過ごすことができました。ありがとうございました。

多分、いわゆる「ブロガー」と呼ばれる方とお会いしたのは初めてで、ブログが生活の一部としてすっかり定着してしまっている私としては、そういうことに関して普通に話題にできるのが自然に感じられました。
つまりブログが普及してきているといっても日常で話題にすることはない訳です。そういう意味では同じ境遇(笑)にいる方との接触は非常に刺激があり、ブログとの関わり方について色々と共感を得るものがありましたし、継続するためのモチベーションも向上したのではないかと思います。

という訳でまた機会をみつけて行きましょう。次はダジャレ連発しようかと。(冗)

2006年01月13日

●Lightbox JS で画像を表示する

Lightbox JS サンプルサムネールをクリックすると同一ウィンドウ上に画像を表示するという Lightbox JS です。ご質問を頂いて知ったのですが結構広まっているようです。
ということでこのエントリーにてご紹介したいと思います。

0.動作
公式サイトでも確認できますが、とりあえず上のサムネイルをクリックしてください。ローディング画像が表示された後、元画像が表示されるという、お洒落なスクリプトです。
表示された画像をクリックすると元の画面に戻ります。一度表示された画像を再度クリックするとローディング画像は表示されません。

以下、このスクリプトの設定方法です。

1.ファイルのダウンロード
動作に必要なファイル(スクリプト・スタイルシート・画像)をダウンロードします。
まず下記のサイトへ進んでください。

Lightbox JS

表示されたページ一番下にある「DOWNLOAD」より下記のファイルをダウンロードできるようになってますので、それぞれのリンクをクリックしてください(IEであれば右クリックして「対象をファイルに保存」を選択)。

  • lightbox.js - JavaScriptファイル
  • lightbox.css - スタイルシート
  • overlay.png - オーバーレイ表示するための背景画像
  • loading.gif - ローディング中に表示する画像

2.ファイルのアップロード
ダウンロードした4ファイルを index.html と同じディレクトリにアップロードします。

Movable Type に適用させる場合の修正
Lightbox JS の Movable Type での不具合を修正するを参照ください。

FC2ブログに適用させる場合の修正
FC2ブログではファイルのアップロード先が決まっているため、lightbox.js の36行目辺りにある記述に青色部分を追加します。

var loadingImage = 'file/loading.gif';

また、lightbox.css についても、下記のように最後から2行目の部分に青色部分を追加します。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="file/overlay.png", sizingMethod="scale");

3.テンプレートの修正
lightbox.js を有効にするため、テンプレートの <head>~</head> の間に下記を追加します。

Movable Type の場合

<script type="text/javascript" src="<$MTBlogURL$>lightbox.js"></script>

Serene Bach / sb の場合

<script type="text/javascript" src="{site_top}lightbox.js"></script>

FC2ブログの場合

<script type="text/javascript" src="<%url>file/lightbox.js"></script>

またスタイルシートを読み込ませるために、light.css の中身を現在利用中のスタイルシートにコピー&ペーストするか、下記のタグを <head>~</head> 追加します。挿入位置は現在のスタイルシートを読み込んでいる link 要素のすぐ下が良いでしょう。

Movable Type の場合

<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" />

Serene Bach / sb の場合

<link rel="stylesheet" href="{site_top}lightbox.css" type="text/css" />

FC2ブログの場合

<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" />

4.リンクの設定
Lightbox JS を利用したい画像リンクやテキストリンクに、青色で示すように rel 属性を与えます。またオーバレイ表示させる元の画像も用意しておいてください。

<a href="hogehoge.jpg" rel="lightbox"><img src="thumbnail.jpg" alt="…" ></a>

これでリンクをクリックすればサンプルと同じ動作を行えるようになります。

5.不具合について
IEでは半透明の背景がページ全体をうまく覆うことができない場合があるようです。下記のサイトで修正方法が紹介されていますが、いくつかの試験サイトで設定したところ、IEでも正常に表示される時もありました(原因不明)。

えび日記Ligthbox JSを組み込んでみたけど、ちょっとおかしいのでちょっといじる。

またOpera8では iframe 部分等が半透明の背景が適用されませんでした。Firefoxは正常に表示されるようです。

6.ツールチップの文字を修正する
元画像が表示されると「Click to close」というツールチップが表示されますが、この言葉を変更したい場合は、lightbox.js の309行目辺りにある

objLink.setAttribute('title','Click to close');

objLink.setAttribute('title','画像をクリックすると元の画面に戻ります');

という具合に変更します。日本語を設定する場合は、lightbox.js をブログと同じ文字コードで保存するか、

<script type="text/javascript" src="<$MTBlogURL$>lightbox.js" charset="Shift_JIS"></script>

と、スクリプトの文字コードを設定します。

以上です。
2項のCSS修正についてはSmallStyleLightbox JS での 背景画像 (overlay.png) の配置場所を参考にさせて頂きました。またサンプル画像はEyesPicより頂きました。ありがとうございました。