小粋空間  -  a cheap joke and a play on words site

巷では Movable Type 3.3 の話題で賑わっているようですが、当サイトのコメントスパムで重大な問題が発生していることが発覚しました。情報展開ということでお知らせします。

まず、下記のエントリーのコメントをご覧ください。

blog設定

このエントリーがブログを始めた記念すべき最初のエントリーということはおいといて、本エントリーに表示されているコメントスパムを1週間ほど前から数件/日のペースで受信していたため、セキュリティコード入力によりフィルタリングを実施しました。

ところがコメントスパムは止みませんでした。「このスパマーは手動で投稿しているのか？」と思い、次にこのコメンターの名前「100?」でフィルタリングをする設定を施しました。

しかし変化はなく、スパムコメントは投稿されてしまっていました。最後の手段として、このエントリーのコメントをクローズしたのですが、それでもスパムコメントは投稿され続けています。それが先程ご覧になったコメントです。

原因は mt4i からのコメントスパムでした。下記の内容は誤りです。

これらの対処が有効にならず、さすがに空恐ろしくなりました。
おそらく（というか間違いなく）、mt-config.cgi あるいは cookie 情報を盗まれています。そしてすべての防御をかいくぐってスパムコメントを投稿できる理由は、スパマーが自身の所有する Movable Type のようなシステムから（私のDB情報を設定して）遠隔でDBにアクセスして投稿しているのではないかと推測されます。
そう考えると、URLが大量に記述されているにもかかわらず SpamLookup - Link にひっかからない理由も納得できます。

ということで、こまめなログアウトの実施と、mt.cgi のディレクトリに下記の .htaccess を配置することを推奨します。

<Files mt-config.cgi>
  deny from all
</Files>

Movable Type のエントリー・アーカイブで同一カテゴリーのトラックバックだけを表示するカスタマイズです。ご質問を頂きましたので本エントリーにて紹介致します。

基礎知識として、エントリー・アーカイブで MTPings タグを普通に利用するだけでは、該当エントリーのトラックバックしか表示されません（アーカイブページに「最近のコメント」「最近のトラックバック」を表示する参照）。そういう訳でプラグインをいくつか試してみましたが、そのまま使うことで表示を満足するものはありませんでした（あったらすいません）。

で、自分でプラグインを作成するスキルもないので、勝手ながら Ogawa::memoranda さんの Recently pinged on Plugin を下記の通り改変させて頂き、表示させることができました。

プラグイン：Recently pinged on Plugin
改変内容：エントリー・アーカイブで同一カテゴリーのトラックバックだけを表示する

プラグインのダウンロード、インストール等につきましては配布元の記事を参照ください。

１．プラグインの修正

recently-pinged-on.pl に下記のパッチをあててください。パッチ適用前にファイルのタブ文字を半角空白8文字に変換してください。

--- recently-pinged-on.pl.bak   Tue May 30 01:14:15 2006
+++ recently-pinged-on.pl       Tue May 30 01:16:35 2006
@@ -41,7 +41,7 @@
     my $blog_id = $ctx->stash('blog_id');
     my ($start, $end) = ($ctx->{current_timestamp},
                          $ctx->{current_timestamp_end});
-    my $cat = $ctx->stash('archive_category');
+    my $cat = $ctx->{current_archive_type} eq 'Individual' ? $ctx->stash('entry')->category : $ctx->stash('archive_category');
 
     require MT::TBPing;
     my $iter = MT::TBPing->load_iter({ blog_id => $blog_id },
@@ -63,6 +63,7 @@
         my $entry = MT::Entry->load($entry_id) or next;
 
         next if $entry->status != MT::Entry::RELEASE();
+        next if !$cat && $ctx->{current_archive_type} eq 'Individual';
         next if $cat && !$entry->is_in_category($cat);
         next if $start && $end && ($entry->created_on < $start || $entry->created_on > $end);

パッチの利用方法が分からない方は、下記の recently-pinged-on.pl の抜粋を参考に、赤色部分を削除して青色の行を追加してください。*1

 　　　　　　　　　：
my $blog_id = $ctx->stash('blog_id');
my ($start, $end) = ($ctx->{current_timestamp},
                     $ctx->{current_timestamp_end});
my $cat = $ctx->stash('archive_category');
my $cat = $ctx->{current_archive_type} eq 'Individual' ? $ctx->stash('entry')->category : $ctx->stash('archive_category');
 　　　　　　　　　：
　　　　　　　　（中略） 
 　　　　　　　　　：
    require MT::Entry;
    my $entry = MT::Entry->load($entry_id) or next;
 
    next if $entry->status != MT::Entry::RELEASE();
    next if !$cat && $ctx->{current_archive_type} eq 'Individual';
    next if $cat && !$entry->is_in_category($cat);
    next if $start && $end && ($entry->created_on < $start || $entry->created_on > $end);
 　　　　　　　　　：

一応確認したつもりですが、改変内容に不備（他のアーカイブで仕様通りに動作しない等）がございましたらご指摘ください。

２．テンプレートの設定

エントリー・アーカイブのサイドバーの任意の位置に「最近のトラックバック」を表示する下記のタグを設定します。これまで表示していた「最近のトラックバック」のタグは削除してください。
あまり差異はありませんが、デフォルトテンプレートと公開テンプレートの2種類を挙げておきます。

２．１ デフォルトテンプレートの場合

<div class="module-archives module">
<h2 class="module-header">Entries of this Category</h2>
<div class="module-content">
<MTEntries recently_pinged_on="5">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
<ul>
<MTPings lastn="5">
<li><a href="<$MTPingURL$>" rel="nofollow"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</MTEntries>
</div>
</div>

２．２ 公開テンプレートの場合

<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTEntries recently_pinged_on="5">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
<ul>
<MTPings lastn="5">
<li><a href="<$MTPingURL$>" rel="nofollow"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</MTEntries>
</div>

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Movable Type のエントリー・アーカイブで同一カテゴリーのコメントだけを表示するカスタマイズです。ここでは MTTagInvoke プラグインを利用した方法を紹介します。

１．プラグインのインストール

下記のサイトより MTTagInvoke プラグインをダウンロードします。ダウンロードしたアーカイブを解凍して、0.9 の場合は MTTagInvoke.pl を plugins フォルダに配置（またはアップロード）、1.0の場合は MTTagInvoke フォルダごと plugins フォルダに配置（またはアップロード） します。

MT Extensions：MTTagInvoke

アップロード後、Movable Type 管理画面の

メイン・メニュー > システム・メニュー > プラグイン

でプラグインの一覧が表示されますので、その中に「MTTagInvoke」が表示されていればOKです。

MTTagInvoke の機能については、配布サイトや個別エントリーアーカイブに同一カテゴリーのエントリーを表示の後半にある説明を参照ください。

２．テンプレートの設定

エントリー・アーカイブのサイドバーの任意の位置に「最近のコメント」を表示する下記のタグを設定します。これまで表示していた「最近のコメント」のタグは削除してください。
あまり差異はありませんが、デフォルトテンプレートと公開テンプレートの2種類を挙げておきます。

注：MTTagInvoke プラグインは2006年9月7日、Movable Type 3.3 対応のため、1.0 にバージョンアップされました。これによりプラグインで使用されているMTタグの名称が下記のように変更されています。サンプルリストは 1.0 に合わせた内容に変更しましたので、もし 0.9 を使っている場合は、記事のサンプルリストをご利用になる際、適宜読み替えてください。

２．１ デフォルトテンプレートの場合

<div class="module-archives module">
<h2 class="module-header">Entries of this Category</h2>
<div class="module-content">
<MTTagInvoke tag_name="MTEntries"> 
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
</div>
</div>

２．２ 公開テンプレートの場合

<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTTagInvoke tag_name="MTEntries"> 
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
</div>

2006.10.02 追記
MTTagInvoke 1.0 の記述を追加しました。

2006.11.23 追記
サンプルリストを MTTagInvoke 1.0 にあわせました。

NHK趣味悠々という大人のための趣味番組で「中高年のためのパソコン講座・プログに挑戦してみよう！」が6月から放映されます。
それに伴って番組テキストも発売されています。

中高年のためのパソコン講座プログに挑戦してみよう! 日本放送協会 日本放送出版協会 日本放送出版協会 2006-05 売り上げランキング : 9879 Amazonで詳しく見る by G-Tools

ここを訪れる方にとっては簡単な内容かもしれませんが、抜粋すると、ブログの基礎知識からホームページとの違いに始まり、ブログサービスへの登録方法／ブログのマナーとルール／コメント・トラックバックや画像の掲載／デザイン・レイアウトの変更／携帯からの利用方法等が全9回の放映で紹介されます。

放映期間は6月6日（火）?8月1日（火）の毎週火曜日22:00?22:25。再放送は翌週火曜日0:30?0:55。またBS2は毎週土曜日5:30?5:55の予定です。詳しくは他の番組案内をご覧ください。

これまで民放がブログ関連の番組いくつか放映してきましたが、NHKのブログ入門によってさらに世間に認知される機会が増えることでしょう。
余談ですが、日本放送協会（NHK）は、番組ごとのブログ作成に、シックス・アパートのブログ・ソフトウエア「Movable Type（ムーバブル・タイプ）」を採用しています（関連記事）。

発言に

１．テンプレートの修正

Movable Type の公開テンプレートではエントリータイトルを下記のように設定しています（分かりやすくするために一部省略しています）。

<h3 class="entry-header">●<$MTEntryTitle$></h3>

<$MTEntryTitle$> が実際にはエントリータイトルに変換されます。「●」は私が勝手につけたもので、エントリータイトルの先頭に付与されます。
この「●」を削除して、

<h3 class="entry-header"><$MTEntryTitle$></h3>

としてください。テンプレートの修正はこれだけです。他のテンプレートをお使いの方は、エントリータイトルを囲むタグに

class="entry-header"

が設定されていればOKです。

この entry-header を利用して次項でスタイルを設定しますが、補足しておくと entry-header という class 属性は不要で、

<h3><$MTEntryTitle$></h3>

として、hx（ここでは h3）タグに直接スタイルを設定することも可能です。ここでは h3 を h2 や h1 に変更する時の利便性を考慮してこのような設定にしていますが、hx タグにスタイルを設定する手法が本来的と思われます（同じ hx に異なるスタイルを設定する場合は class 属性を与えます）。

２．CSSの修正

スタイルシートで、エントリータイトル部分のスタイルを指定する entry-header に青色のプロパティを追加します。公開テンプレートを誤使用でない方も、青色部分のプロパティ設定は同じです。

/* エントリータイトル */
.entry-header {
    margin: 15px 0 0;
    color: #444444;
    font-size: 12px;
    font-weight: bold;
    padding-left: 17px;
    background: url(http://hogehoge/images/image.gif) no-repeat 0px 0.2em;
}

padding-left プロパティはテキストタイトルの左側に余白を作り、そこに画像を表示させるために設定します。
background プロパティで画像を表示させます。後続の設定の意味は下記の通りです。

url(?)

表示させたい画像のURL（background-image）

no-repeat

画像を繰り返さない（指定しないと繰り返し表示されます）（background-repeat）

0px

画像の左端からの表示位置（background-position）
*単に"0"でもOKですが値を設定する場合を考慮して単位を付与しています

0.2em

画像の上端からの表示位置（background-position）

カッコ内はプロパティを別々に設定した時に対応する名称です。
テキストタイトルのパディングと画像の表示位置は画像サイズによって変動するため、適宜調整してください。"17px" および "0.2em" という値を変えることで微調整できます。

またここでは説明を割愛しますが、画像をエントリーのテキスト全体に背景として表示させることも可能です。

３．非推奨

画像を表示する場合、img タグをテンプレートに設定して

<h3 class="entry-header"><img src="http://hogehoge/images/image.gif"><$MTEntryTitle$></h3>

とする手もありますが、ウェブスタンダード的には

• 文書構造とデザインの混在
• 転送バイト数の増加

の点からお勧めではありません。

具体的には、画像を他の画像に変更したい場合、HTMLに img タグを直接記述していると文書構造を表すHTMLを変更しなければなりません。また、エントリータイトルが同一ページに複数存在する場合、img タグがエントリー数分必要となるため転送バイト数が増加し、僅かですが表示速度のパフォーマンスに影響します。

ウェブ進化論が予想以上に面白かったのですが、グーグル―Google 既存のビジネスを破壊するもなかなか楽しめます（乗り遅れてますが）。

グーグル―Google 既存のビジネスを破壊する 文春新書 (501) 佐々木 俊尚 文藝春秋 2006-04 売り上げランキング : Amazonで詳しく見る by G-Tools

タイトルの通り、Google にターゲットを絞った内容です。私が特に面白いと感じたのは、キーワード広告である「アドワーズ」を利用した小さな駐車場とメッキ工場が窮地から救われるという、「プロジェクトXのような（書籍より引用）」2つのドキュメンタリーです。

これらはビジネスモデルの変革を示した事例として取り上げられており、その章を読んでキーワード広告に対する認識が少し変わりました。
今まではサイト運営者として広告を捉えていましたが、広告主の立場も含めて考えるようになりました。端的に言えば、広告主であれば「できるだけ効果的な位置に表示して欲しい」と考える筈であり、そういう視点が加わりました。

広告を利用している企業の全てが、この本に書かれているような逼迫した状況ではないにしても、Google の検索結果であれブログであれ、キーワード広告が閲覧者の目にとまる機会が多いほど、広告主としてはビジネスチャンスが増え、やや大袈裟に言えば、広告を掲載しているサイトは広告主のビジネスに少なからず参加・貢献していることになります。

つまり、単なるクリック云々ではなく、キーワード広告を利用することで「ユーザーの参加」や「ロングテール」というWeb2.0的の定義に従ってビジネスモデル変革の一助を担っている、と考えてみるのも面白いのではないでしょうか。

Movable Type のエントリー・アーカイブからのコメント確認およびコメント投稿で、下記のような「エントリーIDが見つかりません」というエラーが表示されるケースがあります。

エントリーIDが見つかりません

この問題は、mt-config.cgi の CGIPathと、管理画面で設定する「サイトURL」のドメインが異なっている場合にこの現象が発生する可能性があり、XREAでの運用で独自ドメインを取得した後、「サイトURL」だけに独自ドメインを設定をしたケースが該当します。

この場合、CGIPath はXREAドメインのままです。この状態でコメント投稿を実行すると、コメント投稿用CGI mt-comments.cgi のURLには CGIPath、つまりXREAドメインが使用され、その後XREAドメインから独自ドメインへのリダイレクトが発生します。このリダイレクトで mt-comments.cgi の query として付与されたエントリーIDが欠落してしまい、実際に Movable Type で処理される時には「エントリーIDが見つからない」という状態になってしまうようです（後述の参考サイトより一部引用）。

「エントリーIDが見つかりません」で google 検索しても情報は少ないようですが、バージョン 3.2 以前は「No entry_id」というエラーが表示されており、下記のサイトに情報がありました。

• Movable Type 4989：MovableType 3.2 日本語版 StyleCatcher plugin のインストール方法のコメント欄
• XREA SUPPORT BOARD：Movable Typeの設置についての質問
• MovableType設定変更履歴：XREAで後から独自ドメインにする場合の注意

実は、昨日エントリーした検索結果画面で検索文字列が文字化けする不具合を解消すると全く同じ原因で、CGIPath のドメインを、サイトURLのドメイン、つまり取得した独自ドメインと一致させることで解消します。
具体的には、mt-config.cgi の CGIPath に記述しているURLのドメインを、管理メニューの「設定」→「公開」→「サイトURL」に記述されているドメインに修正します。ただし mt.cgi と index.html が異なるディレクトリの場合、mt.cgi までのパスをドメインの後ろに設定する必要がありますのでご注意ください。

修正が完了したら mt-config.cgi を元のディレクトリにアップロードし、エントリー・アーカイブを再構築してください。再構築しないとエントリー・アーカイブに記述されているコメント投稿用CGI mt-comments.cgi のURL が新しい URL に書き変わりません。

余談ですが、検索結果画面で検索文字列が文字化けする不具合を解消するで質問を頂いた当初、原因が全く分からず、情報に至りそうな検索文字列を片っ端から google に打ち込んでも1件もヒットしませんでした（笑）。
そんな訳で半ば諦めていたのですが、ふとその方のサイトでコメントを投稿（確認）してみると「エントリーIDが見つかりません」というエラーが発生しました。それをきっかけに上記の情報にたどり着き、検索実行用URL（これも CGIPath を使用しています）のドメインを独自ドメインに書き換えて実行したところ正常に表示され、無事解決に至ったという訳です。

つまり、本エントリーの不具合を解消することで検索結果画面の不具合も解消してしまうため、検索結果画面の問題がネットで話題にあがることがなかったのではないかと推測します。

2006.07.01 追記
mt-config.cgi 修正後のエントリー・アーカイブの再構築について追記しました。

Movable Type で「検索フォームに日本語を入力して検索すると、入力した文字が文字化けして表示される」というご質問を頂きました。確認したところ、例えば「コンピュータ」という文字列を入力すると、検索結果画面はスクリーンショットのような表示になりました（画像をクリックすると拡大表示します）。

お分かりの通り、入力した検索文字列がURLエンコードされたままの状態で処理・表示されてしまうため、エントリーに含まれる検索文字列であっても正常に検索することができず、「ページはみつかりません」という結果になってしまいます。

この問題は CGIPath のドメインを、サイトURLのドメインと一致させることで解消するようです。具体的には、mt-config.cgi の CGIPath に記述しているURLのドメインを、管理メニューの「設定」→「公開」→サイトURLに記述されているドメインに修正します。ただし mt.cgi と index.html が異なるディレクトリの場合、mt.cgi までのパスをドメインの後ろに設定する必要がありますのでご注意ください。

なお試験サイトで CGIPath とサイトURLで異なるドメインを設定してみましたが、正常に動作しました。したがって、CGIPath のドメインからサイトURLのドメインへリダイレクトを設定しているような条件の下でのみ、この問題が発生する（可能性がある）のではないかと考えます。

サイト構築のためのトータルデザイン誌「Web Designing（ウェブデザイニング）」の2006年6月号に、Web2.0関係の特集で「Web2.0 系、話題のサービス活用術」が掲載されています。

最近のWeb2.0サービスを利用されている方にとっては既にご存知のサービスがほとんどと思われますが、各サービスの基本的な操作方法やワンポイントアドバイスが掲載されていますので、「改めて体感してみたい」という方にはお勧めです。

Web Designing (ウェブデザイニング) 2006年 06月号 [雑誌] 毎日コミュニケーションズ 2006-05-18 売り上げランキング : Amazonで詳しく見るby G-Tools

記事の中で解説（または紹介）されているサービスは下記の通りです。

ソーシャルブックマーク

del.icio.us

wink

オンラインカレンダー

Google Calendar

kiko

30boxes

プロジェクト管理

Backpack

Basecamp

check*pad

動画共有

YouTube

Google Video

音楽共有

Pandora

Last.fm

写真共有

flickr

Picasa

アクセス解析

Google Analytics

Measure Map

RSSリーダー

Headline-Reader Lite

Bloglines

Safari（Mac OS）

Fresh Reader

NetNewsWire

Google Reader

RSSリーダー応用サービス

Technorati JAPAN

はてなブックマーク

FeedBurner

GMail

fresh feed

simple tracking

track feed

ブログパーツやブログペットで Flash を利用されている方は多いと思いますが、Flash のコードには embed 要素が含まれており、この要素が含まれているページは XHTML valid となりません。

Another HTML-lint gateway でチェックすると下記のようなエラーになります。

7: line xx: <embed> は Mozilla、MSIE または doti 用のタグです。 → 解説 55
7: line xx: </embed> は Mozilla または MSIE 用のタグです。 → 解説 55

この問題についてご質問を頂いたので、ネットを調べていたところ、下記の記事がありました。

Hotwired Japan：ウェブ標準のフラッシュ・オブジェクト自在術：embedタグとobjectタグ／救世主JavaScript参上

要するに JavaScript を用いて Flash のコードを表示させればよい、ということです。

上記の記事に書かれている方法が分かりにくい場合、次のようにすると良いでしょう。ここでは Kinarie&May さんの Flash カレンダーを例に変更方法を説明します。

この Flash カレンダーは、配色やURL等の必要な情報を入力して Flash のコードを生成した後、下記のコードを Movable Type のテンプレートに直接貼り付けます。

修正前

<OBJECT classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' WIDTH='130' HEIGHT='130' id='calender' ALIGN=''> <PARAM NAME=movie VALUE='http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1'> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#ffffff> <EMBED src='http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1' quality=high bgcolor=#ffffff  WIDTH='130' HEIGHT='130' NAME='calender' ALIGN='' TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer'></EMBED></OBJECT>

このコードをテンプレートにそのまま貼り付けると XHTML valid とならないため、下記のような修正を加えます。

修正後（青色を追加）*1

<script type="text/javascript">
<!--
document.write('<OBJECT classid=¥'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000¥' codebase=¥'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0¥' WIDTH=¥'130¥' HEIGHT=¥'130¥' id=¥'calender¥' ALIGN=¥'¥'> <PARAM NAME=movie VALUE=¥'http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1¥'> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#ffffff> <EMBED src=¥'http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1¥' quality=high bgcolor=#ffffff  WIDTH=¥'130¥' HEIGHT=¥'130¥' NAME=¥'calender¥' ALIGN=¥'¥' TYPE=¥'application/x-shockwave-flash¥' PLUGINSPAGE=¥'http://www.macromedia.com/go/getflashplayer¥'></EMBED></OBJECT>');
//-->
</script>

ご覧の通り、Flash のコード全てを、JavaScript の document.write('?') という「?」に収めます。Flash のコードに含まれる全てのシングルクォート（'）はエスケープ（¥ またはバックスラッシュを付与）してください。これは document.write で使用されるシングルクォートでないことを示すためです。

上記の修正を実施して正常に表示されるところまでは確認できました。表示されない場合はエスケープがきちんとできていない可能性があります。Firefoxの[ツール]-[JavaScriptコンソール]でエラーが発生していないか確認しましょう。

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

• エントリー：903（約1エントリー/日）
• コメント：6983
• トラックバック：2520
• アクセス数：約6500PV/日・約19万PV/月（Google Analytics）

2周年記念ということで、最近めっきりみかけなくなった「TB企画」を行いたいと思います。「TB企画」とは、あるお題でエントリーを書き、それをTB企画者のエントリーへトラックバックするというものです。昨年のTB企画の模様は下記の通りです。

• ブログ開設1周年記念・【TB企画】あなたのサイトのお気に入りカスタマイズ
• TB企画御礼

今回のお題は

あなたのサイトのお勧めエントリー

にしてみました。

ブログは記事を書きやすく、外部とのコミュニケーションをとりやすいのですが、時間の経過とともに過去の記事が目に触れる機会が少なくなるように思います。実際、新しい訪問者の方が過去の記事を全て閲覧するというのは現実的に考えにくいです。
ということで、ご自身のブログのエントリーで「もう一度読んで欲しい」という記事があれば、1つでも2つでも結構ですので、あなたのサイトでそのエントリーを紹介する記事を書き、このエントリーにトラックバックしてください。
このブログの記事ではなく、あなたのブログの記事を紹介してください。

頂いたトラックバックと自推記事については、2週間後位を目処に、ブログのキャプチャ画像と共にエントリーにて紹介させて頂く予定です（もしトラックバックがあれば）。多少はアクセス増加に貢献できると思います。

ちなみに私のサイトのお勧め記事は、

プルダウンメニューに表示されたアーカイブリンクの選択状態を保持する

です。
1年以上前に書いたエントリーで結構自信作だったのですが、コメント・トラックバックの反応が全くありません（笑）。ユーザビリティ向上のために、月別アーカイブやカテゴリーアーカイブの切り替えにプルダウンメニューを利用されている方は是非ご利用ください。

それでは今後も引き続きどうぞよろしくお願い致します。

CSS+JavaScript によるカラムレイアウト切り替えでは基本的な切り替え方法を紹介しましたが、このエントリーでは cookie を用いてスタイルを保持する方法を紹介します。

前述の通り、前回までのカスタマイズではブラウザ上でページ遷移やリロードをするとスタイルが元に戻ってしまうという欠点があります。例えば配色や文字サイズを切り替えたらそのままのデザインで他のページも閲覧したいケースは少なくないと思いますので、このカスタマイズを併用されるとユーザビリティが向上するでしょう。

サンプルを用意しましたのでリロードを実施してみてください。
注：IEのリキッドレイアウト表示に不具合があるようですので、サンプルは固定レイアウトのみに限定させて頂いてます。

CSS+JavaScript によるカラムレイアウト切り替えのカスタマイズが終わっていることを前提にカスタマイズを説明します。

１．cookie 保持スクリプトの追加

状態を保持したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。

<script type="text/javascript">
<!--
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
//-->
</script>

このスクリプトは QuirksMode：Cookies からの抜粋です。

２．スタイル切り替えスクリプトに cookie 保持起動の追加

CSS+JavaScript によるカラムレイアウト切り替えの１項のスクリプトに下記の青色部分 *1 を追加します。

<script type="text/javascript">
<!--
function changeColumn(id) {
  var elements = document.getElementsByTagName('body');
  document.getElementById('links-right-box').style.display = 'block';
  document.getElementById('links-left-box').style.display = 'block';
  if(id == '3'){
　　　　　：
　　　（中略）
　　　　　：
  }
  createCookie('style', id, 365);
}
//-->
</script>

createCookie の引数には、cookie名・値（ここではカラムレイアウト）・有効期限（ここでは日単位）の順に設定します。有効期限が「365」であれば1年有効であることを示します。

３．ページ読み出し時の cookie 取得処理追加

状態保持をしたいテンプレートの最後の方（</html> の前）に下記を追加します。

<script type="text/javascript">
<!--
var id = readCookie('style');
if(id){
    changeColumn(id);
}
//-->
</script>

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。

とりあえず、どのような動作になるかをサンプルでお試しください（中央上部のプルダウンメニューで操作できます）。

以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。
今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。

その理由は、現在公開しているテンプレートでは1つのスタイルシートに

• 3カラムリキッドレイアウト
• 3カラム固定レイアウト
• 2カラムリキッドレイアウト（右サイドバー）
• 2カラム固定レイアウト（右サイドバー）
• 2カラムリキッドレイアウト（左サイドバー）
• 2カラム固定レイアウト（左サイドバー）
• 1カラムリキッドレイアウト
• 1カラム固定レイアウト

の8種類のレイアウトをまとめて記述しています。各レイアウトは body 要素の class 属性に割り当てているので、この class 属性値（青色 *1）を書き換えることでレイアウトが切り替わります。

<body class="layout-three-column">

CSSには class 属性に対応するクラスセレクタが記述されています。例えば .layout-three-column では下記のような設定になっています（抜粋）。

body.layout-three-column {
    margin-bottom: 20px;
}
.layout-three-column #box {
    width: 850px;
}
.layout-three-column #content {
    float: left;
    width: 478px;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
    padding: 15px 15px 0 15px;
}

公開テンプレートでは、同様の設定を8種類全てのレイアウトについて記述しています。目新しいテクニックではありませんが、ページデザインを切り替えるには非常に有効な手法です。

つまり JavaScript で class 属性値を書き換えれば簡単にレイアウトを切り替えることが可能、という訳です。具体的には、HTML（テンプレート）に切替用のスクリプトとプルダウンメニューまたはリンクを書き加えるだけで済みます。

以下、このエントリーでは全レイアウトを表示するカスタマイズ方法を説明します。組み合わせによってはサイドバーを非表示にするような効果を出すこともできますので、それらについては追ってご紹介したいと思います。

１．スクリプトの追加

切り替えを実施したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。

<script type="text/javascript">
<!--
function changeColumn(id) {
  var elements = document.getElementsByTagName('body');
  document.getElementById('links-right-box').style.display = 'block';
  document.getElementById('links-left-box').style.display = 'block';
  if(id == '3'){
    elements[0].setAttribute('class','layout-three-column');
    elements[0].setAttribute('className','layout-three-column');
  } else if(id == '3l') {
    elements[0].setAttribute('class','layout-three-column-liquid');
    elements[0].setAttribute('className','layout-three-column-liquid');
  } else if(id == '2l') {
    elements[0].setAttribute('class','layout-two-column-left');
    elements[0].setAttribute('className','layout-two-column-left');
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '2ll') {
    elements[0].setAttribute('class','layout-two-column-liquid-left');
    elements[0].setAttribute('className','layout-two-column-liquid-left');
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '2r') {
    elements[0].setAttribute('class','layout-two-column-right');
    elements[0].setAttribute('className','layout-two-column-right');
    document.getElementById('links-left-box').style.display = 'none';
  } else if(id == '2rl') {
    elements[0].setAttribute('class','layout-two-column-liquid-right');
    elements[0].setAttribute('className','layout-two-column-liquid-right');
    document.getElementById('links-left-box').style.display = 'none';
  } else if(id == '1') {
    elements[0].setAttribute('class','layout-one-column');
    elements[0].setAttribute('className','layout-one-column');
    document.getElementById('links-left-box').style.display = 'none';
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '1l') {
    elements[0].setAttribute('class','layout-one-column-liquid');
    elements[0].setAttribute('className','layout-one-column-liquid');
    document.getElementById('links-left-box').style.display = 'none';
    document.getElementById('links-right-box').style.display = 'none';
  }
}
//-->
</script>

２．切り替え用プルダウンメニューの追加

１項と同様、切り替えを実施したいテンプレートに下記のプルダウンメニュー（青色）を追加します。ここではカラム切り替えで非表示にならないよう、中央カラム上部に設定しています。

　　　　　　　　：
<!-- 中央カラム開始 -->
<div id="content">
 
<form id="cc">
<select name="select" onchange="changeColumn(this.form.select.value);">
<option value="3">3カラム</option>
<option value="3l">3カラムリキッド</option>
<option value="2l">2カラム(左)</option>
<option value="2ll">2カラム(左)リキッド</option>
<option value="2r">2カラム(右)</option>
<option value="2rl">2カラム(右)リキッド</option>
<option value="1">1カラム</option>
<option value="1l">1カラムリキッド</option>
</select> 
</form>
 
<div class="blog">
　　　　　　　　：

リンクにする場合は下記のようになります（どこに配置するかは自己解決してください）

<ul>
<li><a href="javascript:void(0);" onclick="changeColumn('3')">3カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('3l')">3カラムリキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2l')">2カラム(左)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2ll')">2カラム(左)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2r')">2カラム(右)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2rl')">2カラム(右)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1')">1カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1l')">1カラムリキッド</a></li>
</ul>

３．スタイルの追加

２項で一応完成ですが、プルダウンメニューの位置を整えるために下記のCSSを追加します。

#cc {
    text-align:center;
    padding-top: 15px;
}

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

地図といえば Google Maps な今日この頃ですが、国土地理院が試験公開している「ウオッ地図」もちょっと面白いです。aranxp:鏡が左右を反転するのに上下を反転しない理由さんのウオッ地図で知りました。ありがとうございました。

簡単に説明すると、このサイトで日本地図の立体図を見ることができます。
ウオッ地図のトップページ左上にある「検索画面」のアイコンをクリックし、右側に表示された日本地図から好きな地域を選んでクリックすると20万分の1の地図に切り替わります。さらに表示したい場所をクリックすると概ね2万5千分の1の縮尺で拡大表示されますので、その状態で画面上の「立体視画像」のラジオボタンを選択し、立体視したい地点をクリックすると立体視用の別ウィンドウが開きます。

以前流行った3D立体画像の日本地図版といったところで、起伏の激しいところが面白いです。立体視も交差法・平行法・余色法（赤・青）の3種類が選べますので立体視が苦手な方でも大丈夫だと思います。
立体視表示される領域がやや狭いので個人的には「壮観」と言うレベルまではいきませんが、もう少し表示域を広げて、画像を重ねて表示させられれば用途が広がるのではないでしょうか。

今年2月に発売された梅田望夫さんの著書「ウェブ進化論」、遅ればせながら読みました。新書ノンフィクション部門のベストセラーランキングにも入っており、先日購入したものは第九刷でした。

ウェブ進化論 本当の大変化はこれから始まる 梅田 望夫 筑摩書房 2006-02-07 売り上げランキング : Amazonで詳しく見る by G-Tools

ウェブの世界にそれなりに精通している人が読めば、「そうそう」と頷けること多数。そうでない人達には現在のウェブがどうなっているかが、分かりやすい言葉で明快に論じられています。特にこの本で頻繁に登場するインターネットの「あちら側」と「こちら側」という比喩が、今、ネット上で起こっている最先端の事象の特徴をよく示しています。
帰省時間を利用して一気に読み終えました。「面白い」の一言に尽きます。

以下、本書籍の関連リンクです。

• 梅田望夫氏のブログ
• 日経ビジネス EXPRESS X : 【「ウェブ進化論」の梅田望夫氏に麻布の蕎麦屋で聞いた話：前編】「分かってほしい」熱気に驚いた
• 日経ビジネス EXPRESS X : 【「ウェブ進化論」の梅田望夫氏に麻布の蕎麦屋で聞いた話：後編】ウェブの頭脳とリアルの歯車を噛み合わせろ！
• 【梅田望夫がブロガーと語る「ウェブ進化論」】ネット社会で既存メディアはどう変化するのか
• R30：書評「ウェブ進化論―本当の大変化はこれから始まる」・上
• R30：書評「ウェブ進化論―本当の大変化はこれから始まる」・下
• 「ウェブ進化論」の梅田望夫氏が語る“Googleという隕石”（前編）
• 「ウェブ進化論」の梅田望夫氏が語る“Googleという隕石”（後編）
• webちくま：ネットは書籍出版を変えるか

上記記事からの抜粋ですが、

そうか、泣ける本だったのか、『ウェブ進化論』って（笑）。

ということで、お勧めの一冊です。