MovableTypeの最近のブログ記事

このサイトもTechnoratiにpingを飛ばすようにしてますが、Technoratiの検索経由で来る人はほとんどいないようですし、あまり意味ないのかなと思ってました。日本販Technoratiができるならやめちゃってもいいですね。

デジタルガレージ、Technoratiと提携して日本版ブログ検索サイトを開設

デジタルガレージは、米国でブログ検索サービスを提供するTechnoratiと業務提携し、日本国内における独占的な代理権契約を締結したと発表した。これに伴い、2005年1月21日付けで、100％子会社テクノラティジャパンを設立する。 　Technoratiは、12月20日現在で500万件のブログサイトと7億3,000万件のリンク情報が検索対象の米国で提供されているブログ検索サービス。同サービスでは、ブログへの書き込みから数分後に更新内容を検索対象に追加できるとしている。

それにしてもものすごい数です。増加率もすごいんではないかと思います。そのうち、これまでの一般Webページの数をブログのページの数が上回る日も来るんではないでしょうか。

このblogではAmazonのウィッシュリストを公開してます。たくさん画像を載せているためページのロードには少々時間がかかると思いますが、ご容赦ください。

時折、ウィッシュリストの一部が正しく表示されないことがあります。ページの再構築の時に aws.pl の呼び出しで何か失敗しているようです。あまり頻繁に起きるので対策を講じてみようと思います。前の記事での改造により再構築時に画像をチェックしてるので、それが重くて失敗してる可能性を考えました。そこで、画像のチェックをページ表示時に行うように変更しました。下記のbulknewsさんのスクリプトを使わせていただいてます。bulknewsさん、ありがとうございます。aws.plの改造の方は元に戻しています。

Amazon の輸入盤画像をいじる javascript: blog.bulknews.net

Amazon Web Services の輸入盤の画像 URL 問題を解消しつつ、さらに画像がなかったら no image の画像を返し、かつサイズを適当にあわせる javascript。

やってみたんですが、結果は変わりありませんでした。この方法でも失敗する時は失敗します。AWS(Amazon Web Service)の呼び出し自体が重くて失敗するんですかね。

このサイトにもコメントスパムが来るようになってきた。しばらくは一日1～2個くらいだったんだけど、だんだん増え始めてる。今日は7つだ。いきなり数百個もついたりすることがあるらしいので、一応対策しておくことにする。

まずは、一日数個でも消すのは面倒なので、まとめて消せるようにするために、次の対策を導入する。menu.tmplを置き換えるだけなのでとても簡単。スパムコメントのついたエントリを探したりする手間がいらなくなるので、コメント削除がとっても楽チンになる。Memo Leavesさん、ありがとうございます。

Memo Leaves: 編集メニュー画面からコメントスパムを一括削除

いろいろ試行錯誤した結果、編集メニュー画面に出てる最近のコメントにチェックボックスをつけてDeleteボタンもつけることにした。

次に、そもそもスパムコメントを書き込めないようにする。いろいろな方法があるようだけど、下記の手法を取り入れることにする。コメントを投稿する際にパラメータとして記事のタイトルを渡し、チェックに用いるという方法だ。noblog短気な猫3rdさん、ありがとうございます。 Individual Entry Archive、Comment Listing、Comment Preview、Comment Errorの4つを修正する。 さらに、[MT]/lib/MT/App/Comment.pm を修正する。

noblog::短気な猫3rd: コメントスパム対策

コメントスパムが少し多くなってきたので、Movable Typeのコメントスパム対策をやってみました。 副作用が心配なもの(MTBlackListなど?)は除外して、オーソドックスな方法で入れてあります。 (でも、ちょっと凝った部分もあります)

さて、これで様子を見てみよう。うまくコメントスパムを防止できるかな。

(追記)
対策したとたんにまるで来なくなりました。この方法だとMovableTypeのログに記録が残るんですが、3日後の8/14にようやく1件が記録されてるだけです。

Amazonのウィッシュリストをblogに表示するのエントリで書いたスクリプトでもやはり輸入版CDの画像は表示されない。そこで輸入版CDでも画像を表示できるAmazonリンク生成スクリプトのエントリと同様の修正を加える。オリジナルのawl.plとの差分は下記の赤いところだ。

sub aws_detail {
    my ($ctx, $e) = @_;
    defined (my $detail = $ctx->stash("Detail")) or return '';
    if (ref $detail->{$e} eq 'ARRAY') {
        #return Jcode->new(join ", ", @{$detail->{$e}}, 'utf8')->utf8;
        return join ", ", @{$detail->{$e}};
    } else {
        if ($e =~ /(ImageUrlSmall|ImageUrlMedium|ImageUrlLarge)/) {
            my $imageUrl = $detail->{$e};
            if (!checkimage($imageUrl)) {
                $imageUrl =~ s/09/01/;
            }
            if (!checkimage($imageUrl)) {
                $imageUrl = "http://images-jp.amazon.com/images/G/09/".
                    "x-locale/detail/thumb-no-image.gif";
            }
            $detail->{$e} = $imageUrl;
        }

        # return $detail->{$e} . Jcode->new($detail->{$e},'utf8')->utf8 || '';
        return $detail->{$e} || '';
    }
}

use Image::Magick;
use LWP::Simple;
sub checkimage {
    my ($url) = @_;
    my $imagedata = get($url);
    my $image = Image::Magick->new;
    $image->BlobToImage($imagedata);
    if ($image->Get('width', 'height') == (1, 1)) {
        return 0;
    }
    return 1;
}

これでウィッシュリストにも輸入版CDが表示されるようになった。

blogにAmazonウィッシュリストを貼るようにしてから一月半ほど立ちますが、これはなかなかいいですよ。Amazonで気になる本やCDを見かけたら、メモする代わりにウィッシュリストに入れればいいんです。自分のblogは毎日目にするわけですから、忘れてしまうことがありません。毎日見るところにメモを書くってのは情報整理の基本のひとつですね。

Amazonリンク生成スクリプトのエントリで書いたスクリプトでは、輸入版のCDの場合に画像が表示されないらしい。Amazon Web Service 側の不具合のようだが、下記の処理をすることで表示できるようだ。

hail2u.net - Weblog - Amazonの画像置換

AWSで返された画像のURLとかAmazonのASINコードから09で類推した画像が、1*1の黒いGIF画像だった場合に、01で類推できるURL無理やり置換してみる実験。

というわけで次のコードを加えてみた。

if (!checkimage($imageUrl)) {
    $imageUrl =~ s/09/01/;
}
if (!checkimage($imageUrl)) {
    $imageUrl = "http://images-jp.amazon.com/images/G/09/".
        "x-locale/detail/thumb-no-image.gif";
}

use Image::Magick;
sub checkimage {
    my ($url) = @_;
    my $imagedata = get($url);
    my $image = Image::Magick->new;
    $image->BlobToImage($imagedata);
    if ($image->Get('width', 'height') == (1, 1)) {
        return 0;
    }
    return 1;
}

これで輸入版でもジャケット写真が表示できるようになった。ほんとはスピリッツオブゼロ＠blog - [AWS] Amazon Webサービスの画像置換のようにJavaScriptでページ表示時に判定した方がよいんでしょうね。いつかは本来のURLで画像が表示できるようになるかもしれないから。でもそれもどうなるかわからないから、今は上記のようにしておこう。

スクリプト全体は以前と同じく ここに置いておきます。試したい人は下記でどうぞ。Amazonのページから呼び出すJavaScriptはAmazonリンク生成スクリプトのエントリを見てください。

nlog(n): 画像アップロード先の月別指定

このサイトでは、画像のアップロード先を、アーカイブディレクトリ内の年月ディレクトリにしている。例えば、今月であれば 200406 というディレクトリである。毎回このディレクトリを指定するのは面倒なので、テンプレートに手を加える。

この3ヶ月間はimagesというディレクトリに全部の画像を放り込んできたが、さすがに適当な単位で分けておいたほうがよいかと思っていた。この記事はちょうどそれを自動化できるやり方を書いてくれている。これはありがたいということで、早速使わせていだだく。nlog(n)さん、ありがとうございます。少々手を加えて、images-200407のようなディレクトリ名になるようにしました。

今日はAmazonのウィッシュリストをトップページに表示してみることにする。Amazonのウィッシュリストは気になる本リストとしてとても便利だ。Amazonで気になる書籍を見つけたらすかさずウィッシュリストに入れればよい。クリックひとつの操作だけだ。これをblogのトップページに画像付きで並べられれば、時折眺めては思い出すことができる。ボタンひとつでblogに表示できるので、なかなか悪くない方法だと思う。

ウィッシュリストを取り出すにはAmazon Web Services(AWS)でWishlistSearchという検索を行えばよい。前回作成したスクリプトを拡張すれば簡単に作ることができる。しかし、今回は既存のpluginを使ってみることにした。pluginの組み込み方や、作り方の勉強もしたいからだ。

今回は平田さんのaws.plを使うことにした。平田さんは下記の書籍の著者であり、今では MovableType 開発元のSix Apartの偉い人になっている。

Movable Typeで今すぐできるウェブログ入門 平田 大治 インプレス (2003/08/01) ￥ 1,890 ISBN: 4844318128

さて、aws.plを使う手順は次の通り。デベロッパトークンやアフィリエイトIDの取得は予め行っているものとする。

1. simple amazon log aws.pl - MT plugin for Amazon webservices からダウンロード、インストール。

   インストール方法は、展開して出てくる aws.pl を mt.cfg を置いたディレクトリの plugins ディレクトリの下に置けばよい。 既に修正版が配布されてるかもしれないが、上記リンクのものはそのままでは動かなかった。aws.pl に以下の修正を加える必要がある。

2. 「amazon.com」を「amazon.co.jp」に修正。
3. 「WishListSearch」を「WishlistSearch」に修正。

さらに、perl 5.8の人は次の修正も必要らしい。

4. のまのしわざ MT plug-in開発の勉強（aws.plの修正）の修正を加える。

ウィッシュリストを表示するには下記のように書けばよい。ウィッシュリストの場合には、ウィッシュリストIDを指定しなければならない。Amazonで自分のウィッシュリストを開いて、作成者の情報の編集ボタンを押してみよう。そのページのURLの一部にウィッシュリストIDは含まれている。私の場合は「2J09IUCQB4QI」となっている。「⇒」のところは折り返さずに1行で書く。

<MTAws dev_token="デベロッパトークン" associate_id="アソシエイトID"
    search="WishlistSearch" query="ウィッシュリストID">
    <a href="http://www.amazon.co.jp/exec/obidos/ASIN/⇒
    <$MTAwsAsin$>/ref=nosim/アソシエイトID">
    <img alt="<$MTAwsProductName$>" src="<$MTAwsImageUrlMedium$>"
         border=0 />
    <br />
    </a>
</MTAws>

表示させてみると、ウィッシュリストが10件分表示される。これだけでは寂しいのでもっと表示させよう。AWSでは1回につき10件の検索結果を1ページ分の情報として取得できる。そして、ページ番号を指定することで10件ごとに順次取得することができる。ところが、ウィッシュリスト検索ではパラメータにページ指定が含まれていない。awl.plでもページ指定を渡さないようになっている。これは困った。

でも実はやってみればできるんである。ページ番号指定はウィッシュリスト検索のドキュメントにはないパラメータだが、指定してみるとちゃんとページごとに検索結果を取得できる。そこで、aws.plを次のように修正する。赤字のところを追加した。もちろん、今回はたまたま動いただけで、今後動かなくなってしまう可能性もあるので注意が必要だ。

5. 10件を超えるウィッシュリストを表示させる修正を加える。

    'WishlistSearch' => [ "dev-t", "t", "type", "f", "locale", "page" ],

テンプレートに埋め込むタグに下記のようにpage指定を追加する。さらにページ番号のところを2、3と変えて3つほど並べると、ウィッシュリストを30件表示できるわけだ。

<MTAws dev_token="デベロッパトークン" associate_id="アソシエイトID"
    search="WishlistSearch" query="ウィッシュリストID" page="1">
    <a href="http://www.amazon.co.jp/exec/obidos/ASIN/<⇒
    $MTAwsAsin$>/ref=nosim/アソシエイトID">
    <img alt="<$MTAwsProductName$>" src="<$MTAwsImageUrlMedium$>"
         border=0 />
    <br />
    </a>
</MTAws>

これで喜んでいたら、30件表示されるはずが数えてみるとどうも数が少々少ないことに気づく。調べて見ると画像が提供されていない書籍やDVDがあることがわかった。画像がない場合には、サイズ1×1の画像ファイルのURLが返ってくるのだ。画像はなくてもリンクだけは表示しておきたいのだが、これではクリックもできない。そこで、少々強引だが、次のような修正を加えてみた。ちょっと無理のあるやり方だが、最小限の変更で済ますためにこうしてみた。追加したのは赤字のところ。

6. 画像のないアイテムに仮の画像を表示する修正を加える。

sub aws_detail {
    my ($ctx, $e) = @_;
    defined (my $detail = $ctx->stash("Detail")) or return '';
    if (ref $detail->{$e} eq 'ARRAY') {
        #return Jcode->new(join ", ", @{$detail->{$e}}, 'utf8')->utf8;
        return join ", ", @{$detail->{$e}};
    } else {
        if ($e =~ /(ImageUrlSmall|ImageUrlMedium|ImageUrlLarge)/) {
            use LWP::Simple;
            my $data = get($detail->{$e});
            use Image::Magick;
            my $image = Image::Magick->new;
            $image->BlobToImage($data);
            if ($image->Get('width', 'height') == (1, 1)) {
                return "http://images-jp.amazon.com/images/G/09/".
                       "x-locale/detail/thumb-no-image.gif";
            }
        }
        # return $detail->{$e} . Jcode->new($detail->{$e},'utf8')->utf8 || '';
        return $detail->{$e} || '';
    }
}

これで画像のないアイテムのところには「No image」という画像が表示されるようになった。なお、Amazon側の負荷などの影響か、時折検索結果をうまく得られないことがある。そういう時は、少し時間をおいてから再度リビルドしよう。

やろうとしてたことはひとまず実現できた。平田さんのaws.plは非常に簡潔に書かれていながら、とても汎用にできている。たくさんのことができるのにやたらと行数が短いのだ。しかも今回のようにパラメータを追加するような変更がとても簡単にできる。今後Amazon側でAPIに拡張が加えられても容易に対応できそうだ。このようなスクリプトを提供してくださっていることに感謝します。

Perlの勉強もしたことだし、何か作ってみようということで、amazonのアフィリエイトリンクを生成するプログラムを書いてみた。同様のものは多くの人が作っているので今さら新しくはないのだが、勉強がてらに自分でやってみる。

Amazon Web Service(AWS)を使うとプログラムからamazonの検索機能を呼び出すことができる。試しにやってみるなら、プログラムを書かなくてもこんなフォームを書けば呼び出すことができる。

<form action="http://xml.amazon.co.jp/onca/xml3"
  method="GET" name="aws">
  ISBN:
  <input type="text" name="AsinSearch" value=""/>

  <input type="hidden" name="dev-t" value="デベロッパ・トークン"/>
  <input type="hidden" name="t" value="アソシエイトID"/>
  <input type="hidden" name="f" value="xml"/>
  <input type="hidden" name="locale" value="jp"/>
  <input type="hidden" name="type" value="lite"/>
  <input value="送信" type="submit"/>
</form>

これはISBN番号を入力して呼び出すと、書籍の情報が帰ってくるというものだ。ISBN番号は書籍の裏表紙に定価の近くあたりに「ISBN4-XXXX-XXXX-X」と記してある番号のことだ。4以降の数字を4も含めて、ハイフンを抜いて入力すればよい。自分への覚書として下のフォームで呼び出せるようにしておいた。手元にある本のISBN番号を入力して試してみるとよい。

このフォームを送信して返ってくるのは、XML形式で書籍情報を表したものだ。タグの羅列に埋め込まれるように書籍の題名や著者名が並んでいる。URLはこんな感じになっている。

http://xml.amazon.co.jp/onca/xml3?dev-t=デベロッパ・トークン&t=アソシエイトID&f=xml&AsinSearch=ISBN番号&locale=jp&type=lite

こういうURLを生成して呼び出せば、XML形式で書籍の情報が返ってくるということだ。これがRESTと呼ばれる呼び出し方法の基本的なしくみだ。AWSではRESTの他にSOAPという方式で呼び出すこともできるのだが、この程度の使い方には冗長過ぎる方式かもしれない。それに、SOAPでは文字コード周りで少々工夫が必要らしい。

では、このURLをperlで生成しよう。これは簡単だ。

sub amazon_query_url_isbn {
    my $isbn = shift;

    "$amazon_query_url?"
    . "dev-t=$amazon_dev_token&"
    . "t=$amazon_affiliate_id&"
    . "f=xml&"
    . "locale=jp&"
    . "type=lite&"
    . "AsinSearch=$isbn";
}

これを呼び出して結果を受け取るには、LWP::Simpleを使ってこうやればよい。

use LWP::Simple;
my $xml = get(amazon_query_url_isbn($isbn));

さて、帰ってきたXML形式の情報は、XML::Simpleを使って分解してみよう。

use XML::Simple;
my $tree = XMLin($xml, ForceArray=>1, KeyAttr=>[]);
my $book = $tree->{"Details"}->[0];

XMLがperlのハッシュと配列でツリー状に展開される。データ構造としては非常に複雑だが、それこそこの本で勉強したかいがあるというものだ。ここから個々の情報を取り出すにはこんなふうにすればよい。

sub getValue {
    my ($tree,  $tag) = @_;
    return join(', ', @{$tree->{$tag}});
}

要素が複数個ある場合には「,」で繋げて並べるようにしている。著者名は階層が1段深いので下記のようにする。書籍ではなくCDやDVDの場合にも使えるようにしてみた。

sub getAuthors {
    my $detail = shift;
    if ($detail->{"Authors"} != undef) {
        return getValue($detail->{"Authors"}->[0], "Author");
    } elsif ($detail->{"Artists"} != undef) {
        return getValue($detail->{"Artists"}->[0], "Artist");
    } else {
        return ;
    }
}

これらを使うと、個々の書籍情報はこんなふうに取り出せる。

my $title        = getValue  ($book, "ProductName");
my $author       = getAuthors($book, "Author");
my $manufacturer = getValue  ($book, "Manufacturer");
my $imageUrl     = getValue  ($book, "ImageUrlMedium");
my $price        = getValue  ($book, "OurPrice");
my $asin         = getValue  ($book, "Asin");
my $releaseDate  = getValue  ($book, "ReleaseDate");
my $imageUrl     = getValue  ($book, "ImageUrlMedium");

あとは、これを好きなように加工して使えばよい。アソシエイトID付きのリンク付き書籍情報として表示してみる。下のフォームから呼び出せるようにしておいた。手元の書籍のISBN番号を入力してみるとよい。

表示されたHTMLタグをblogなり、webページなりにコピー&ペーストすれば画像付きアソシエイトリンクのできあがりだ。さっそく作ってみたのがこれだ。

Amazon Hacks 世界最大のショッピングサイト完全活用テクニック100選 ポール・ボシュ, 篠原 稔和, ウェブ・ユーザビリティ研究会 オライリー・ジャパン (2004/04/24) ￥ 3,045 ISBN: 4873111811

フォームにいちいちISBN番号を入力するのは面倒くさい。そこで、javascriptで自動化してみよう。amazonの商品ページを開いている状態で上記フォームを呼び出すスクリプトはこうなる。

javascript:var%20id='アソシエイトID';var%20u=document.location.href;var%20i=u.indexOf('ASIN');var%20asin=u.substring(i+5,i+15);void(window.open('http://blog.bibinko.com/cgi-bin/amazon-isbn.cgi?asin='+asin+'&t='+id))

このスクリプトを実行するには、まずこのAmazonリンク作成リンクを、リンクバーにドラグ&ドロップする。そして、Amazonの商品ページを開いた状態でリンクバーからこのリンクを呼び出すとフォームを送信するのと同じ処理が実行される。こういうスクリプトをbookmarkletと呼ぶらしい。リンクのプロパティを開くと、URLのところにスクリプト本体が入っている。先頭の方にアソシエイトIDが入っているので、自分のIDに修正して使えばよい。

AWSでは、XSLTというXMLの処理系を使うことができ、Perlなどでプログラムを書かなくても同じことができる。XSLTでXMLからHTMLへの変換規則を記述し、そのファイルのURLをAWS呼び出し時に渡しておけばよいのだ。この方法もそのうち勉強がてら試して見よう。

Amazonのアソシエイトプログラムでは、リンク作成のページで商品へのリンクを作成することができる。そのページの中で、イメージのコピーもできるようになっている。画像をローカルにコピーしてしまえば、amazon側の負荷を減らせるのでできればコピーしてしまいたい。ところが、 Amazon.comWebサービス 使用許諾条件には下記のように記述されている。

Amazon.comWebサービス 使用許諾条件

貴方は、24 時間までの間、貯蔵（キャッシュ）目的でAmazon.com の知的財産を格納することができます。

AWSを使ったサービスでは画像を24時間までしかローカルに保持できないのだ。これでは画像どころか、書名や著者名さえもローカルに保持することができなくなってしまう。これに関しては次のように考えることにした。AWSによる書籍情報表示サービスと、それを活用してアフィリエイトリンクを提示することをそれぞれ独立な行為と考えるのだ。前者は情報をその場で表示するだけで、保持し続けることはない。後者では前者で得た情報をアフィリエイトリンク作成のために使用する。実際、前者と後者は別な人が提供することができるので、分離して考えることは合理的であろう。その意味でも、blogのエントリまで自動生成したりせず人手によるコピー&ペーストを介しておくのがよさそうだ。

それでは、この考え方で画像もコピーできるのだろうか。前述のリンク作成のページでのイメージコピーのところでは、商品によって商品の画像が提示されるものとされないものとがある。いくつか試してみたところでは、書籍では提示されず、CDやDVDでは提示されるようだ。wadさんによると和書とXbox本体以外に関してはamazonがアソシエイト先に画像をサブライセンスする権利を持っているらしい。

wad's更新記録

amazon.co.jpに問い合わせたところ、「和書およびXbox本体」以外の画像については、アソシエイトが自分のサイト上で自由に表示できるという答えをもらいました。 これ以降の記述には、私の解釈が入っている部分があります。 「和書およびXbox本体」以外の取り扱い品目については、amazonは、アソシエイトに画像の使用をサブライセンスするライセンスを、それらの画像の著作権者から得ているということです。また、amazonのサイト上にある「画像ファイル」そのものは、amazonが作成したか使用許諾を受けたものなので、amazonのサイトからコピーして使っても問題はありません。 「和書およびXbox本体」の商品については、各発売元の許諾を得る必要があります。実際、amazon.co.jpのリンク・ジェネレータでは、和書とXbox本体については、イメージ・リンクに使用する画像として、「Amazon.co.jpで買える」というジェネリックな画像が表示されます(すべて調べたわけではありませんが)。

今現在でもこの条件のままだとすると、洋書やCD/DVDならイメージのコピーができるが、和書ではできないということになる。実際にコピーする際には、Amazonのリンク作成ページで確認するか、Amazonに条件を問い合わせてから行うべきだろう。

画像をコピーできるものに関しては、次のようなコードでコピーすることができる。

my $MTImagePath   = "画像ファイルの置き場所";
my $filename = $imageUrl;
$filename =~ s#.*/##;
my $path = $MTImagePath . "/" . $filename;
getstore($imageUrl, $path);

今のところコピー可能な画像かどうかを自動的に判別する方法がわからないので、前述の確認を行った上で使い分けるしかないだろう。今回作成したスクリプトからは、画像のコピー機能ははずしてある。コピーしなくとも、イメージを参照して自分のサイトに埋め込んで表示することはグレーゾーンだと思われる。世間ではこのような表示が普及しつつあるようなのでそれに従ってみるが、問題があるようならすぐにはずしたい。

ISBN番号での検索以外にもキーワード検索や著者名での検索などいろいろな検索ができる。そうした検索にも必要が出てきたら対応しよう。今のところAmazonのサイトで検索して、書籍情報をクリップしてこのサイトにアフィリエイトリンクを張る程度なのでこのスクリプトくらいで十分だ。できあがったPerlスクリプトをここに置いておく。デベロッパ・トークンのところを自分のものに修正すればそのまま使えるはずだ。自由に改変して使ってもらってかまわない。表示形式をなどを自分好みにカスタマイズするとよいだろう。

せっかく作ったので、過去のエントリのアフィリエイトリンクも作り直しておこうかな。

日付のところに曜日を入れようと思って、フォーマット指定に %a を入れると「月」のような表示になるはずが変な文字化けになる。%A にすると「月曜日」のように正しく表示される。でもよくよく見ると水曜日と木曜日が逆になってる。なんだこりゃ。

自分でコードを追っかけるのは面倒なのでWebで探してみると、やっぱり解決してくれてる人がいました。きゃんころさん、ありがとう！活用させていただきました。

きゃんころ: MOVABLETYPE曜日問題

MOVABLETYPEを日本語で使っていて、日付に曜日を表示させると水曜日と木曜日が入れ替わってしまうという問題が発生しました。
...
簡単に言うと、文字そのものでなく「漢字コード」でコーディングされていたところが間違っていたためです。

MT 和風日付表示プラグインというのを使うと休日名を表示したりもできるらしいんだけど、それはまた今度にしておこう。

個別のエントリごとのページを開くと、文字が一瞬表示されるものの直後に消えてしまう症状に悩まされていた。マウスでなぞって選択すると表示されたりするのだが開いた直後には何も表示されない状態なのだ。これではまずいので、じっくり調べてみた。

スタイルシートやテンプレートを少しずつ変更して様子を見たところ、コメント記入欄にある float 指定と、ブロックに対する背景色指定が複合して現象が発生するようだ。どちらかを削ると文字は表示されるからだ。この症状をWebで探してみると、こんなページが見つかった。

Internet Explorer (Windows) CSSバグリスト

背景色が指定された要素内にフロートがあるときに要素内の文字が消える(IE6)

まさにこの症状だ。このページの対処法に従い、該当のブロックである comments-body に width: 90% を加えてみた。見事へんてこな現象は回避された。めでたし。

Going My Way: divで囲まれた要素を表示するDOM Inspecter

Cartapacioで紹介されていたMouseover DOM Inspectorはおもしろい。Bookmarkletなのでツールバーにもっていってクリックすると今見ているページのdivやClassの部分をわかりやすく表示してどんなクラス名がつけられているかを表示してくれます。

これは便利だにゃー。いちいちソースを開かなくても構造やクラス名がわかっちゃう。いろいろと使えそうです。リンクバーに追加。