小粋空間: 2008年9月アーカイブ

Top ＞ September 2008 [全て開く]

CSS でヘッダーに画像を表示する for Movable Type 4

September 30,2008 1:55 AM
Category：[CSS]
Tag：[CSS, Image]
Permalink

以前エントリーした「CSSでタイトルバナーに画像を表示する」の Movable Type 4 版です。

デフォルトテンプレート・配布テンプレートともにMovable Type 3.x からマークアップが変更されたため、本エントリーでヘッダに画像を設定する方法を簡単に紹介します。
この内容は Movable Type 以外のブログでも利用可能です。

配布テンプレートに画像を表示

エントリーの中で用いている背景画像は Link Style 様より利用させて頂きました。ありがとうございました。

１．基本

デフォルトテンプレートのヘッダー部分の(X)HTMLマークアップと、画像を表示するためのCSSの基本的な設定は次の通りです。

１．１ヘッダーの (X)HTML マークアップ

デフォルトテンプレートのヘッダーの (X)HTML マークアップは、div 要素と h1/h2 要素、a 要素でブログのタイトルを表示しています。h1 要素はブログ名、h2 要素はブログの説明を表示します。

<div id="header">
    <div id="header-inner">
        <div id="header-content">
            <h1 id="header-name"><a href="http://user-domain/" accesskey="1">My First Blog</a></h1>
            <h2 id="header-description">description</h2>
        </div>
    </div>
</div>

配布テンプレートも大体同じですが、div の入れ子はデフォルトテンプレートより少ないです。h1 要素はブログ名、p 要素はブログの説明を表示します。ブログの説明を h2 要素にしていないのは、ブログ記事タイトルを h2 要素にしているためです。デフォルトテンプレートではブログ記事タイトルは h3 要素になります。

<div id="header">
<h1 id="blog-name"><a href="http://user-domain/" accesskey="1">My First Blog</a></h1>
<p class="blog-description">description</p>
</div>

画像を表示するにあたって、ヘッダーの (X)HTML マークアップを変更する必要はありませんが、基礎として覚えておくと良いでしょう。

なお、いずれのヘッダーも「ヘッダー」テンプレートモジュールにあります。構造を分かりやすくするため、上記のマークアップは再構築後のソースで表示しています。

１．２ヘッダーの CSS

いずれの場合も、一番外側の div 要素に対し、下記の CSS を設定すれば背景画像（リストの「画像ファイル名」）を表示します。

#header {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

１．３プロパティの説明

CSS で設定する各プロパティの内容は次の通りです。

background-image: 画像ファイル名を指定します。画像ファイル名の部分にはURL指定（例：http://domain/images/hogehoge.gif）・ドキュメントルートからの絶対パス（例：/blog/image/hogehoge.gif）・スタイルシートからの相対パス（例：../images/hogehoge.gif）が指定できます。ダブルクォーテーションは任意です。

background-position: 画像の表示開始位置を指定します。ここではleft（水平位置が左端）と top（垂直位置が上端）を指定しています。右下端から開始する場合は「right bottom」とします。記述順序は基本的に1番目が水平位置、2番目が垂直位置です。% や px 指定による設定も可能ですので、表示位置を細かく決めたい場合はこちらの方が良いでしょう。ご自身で調べていろいろお試しください。

background-repeat: 画像の繰り返しを指定します。バナーのサイズに等しい画像を表示する場合はサンプルのように「no-repeat（繰り返しなし）」とします。バナーからはみ出した部分は表示されません。
バナーより小さい画像で繰り返し表示をするには、水平方向に繰り返す場合は「repeat-x」、垂直方向に繰り返す場合は「repeat-y」、水平・垂直方向に繰り返す場合は「repeat」とします。

上記の各プロパティを background プロパティにまとめて記述することも可能です。ここではこの方法で説明を進めます。

#header {
    background: url("画像ファイル名") no-repeat left top;
}

注：画像ファイルを記述した右カッコの直後には、必ず半角空白を入れてください。空白がないとブラウザによっては画像が正常に表示されない可能性があります。
下は誤った例です。

#header {
    background: url("画像ファイル名")no-repeat left top;
}

２．デフォルトテンプレートに画像を表示する

ブログ管理画面の「デザイン」→「テンプレート」の「スタイルシート」インデックステンプレートを開き、テンプレート編集画面で、下記の青色部分を追加します。背景画像はお好きなものを予めブログディレクトリ（index.html や style.css と同じディレクトリ）にアップロードしておき、赤色の部分にアップロードしたファイル名を記述してください。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
 
#header { 
    background: url("背景画像ファイル名") repeat-x top left; 
}

完成イメージ
デフォルトテンプレートに画像を表示

なお、画像の設定だけではヘッダー上部に border の設定が残っているため、ヘッダー全体を画像で埋めるには次のように border-top-width プロパティを追加してください。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
 
#header { 
    border-top-width: 0;
    background: url("背景画像ファイル名") repeat-x top left; 
}

完成イメージ
デフォルトテンプレートに画像を表示

２．配布テンプレートに画像を表示する

ブログ管理画面の「デザイン」→「テンプレート」の「スタイルシート」インデックステンプレートを開き、テンプレート編集画面で、下記の青色部分を追加します。背景画像はお好きなものを予めブログディレクトリ（index.html や styles-site.css と同じディレクトリ）にアップロードしておき、赤色の部分にアップロードしたファイル名を記述してください。

/* ヘッダ */
#header {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}
 
#header a,
#header a:link,
#header a:visited {
    color: #fff;
    background: transparent;
    font-size: 32px;
    text-decoration: none;
}
#header a:hover {}
#header a:active {}
  
#header { 
    background: url("背景画像ファイル名") no-repeat top left; 
}

完成イメージ
配布テンプレートに画像を表示

４．リキッドレイアウトの場合

上記は固定レイアウトをサンプルに説明しました。リキッドレイアウトの場合はディスプレイの解像度によって横幅がかなり長くなる可能性があるので、横長の画像を用意するか、水平方向の繰り返し表示を指定するようにしてください。

５．画像が垂直方向に収まらない場合

作成した画像がヘッダーの縦方向に収まらない可能性もあります。このような場合、タイトルバナーの縦幅を広げます。配布テンプレートであれば、

/* ヘッダ */
#header {
    padding: 25px 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}
...後略...

と、padding プロパティの上下方向の値を追加させることでタイトルバナー全体の縦幅が広がります。
デフォルトテンプレートの場合も padding プロパティで縦幅を広げることができます。

または、次のように line-height プロパティを与えます。

#header {
    line-height: 2.5;
}

デフォルトテンプレートでは #header-name に与えてください。

#header-name {
    line-height: 2.5;
}

値や単位の説明は省略しますので、他のサイトなどで調べてください。

６．ブログタイトルの位置を補正する

ブログタイトルの位置を補正したい場合は、padding プロパティを修正します。ここではデフォルトテンプレートの他のスタイルの背景画像

mt-static/themes/cityscape-portland/header.png

を利用して、左上に表示する例で説明します。

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

デフォルトテンプレートでは次のように設定します。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
 
#header {
    border-top-width: 0;
    background: url("<$mt:StaticWebPath$>themes/cityscape-portland/header.png") repeat-x top left;
    padding: 0 0 40px 5px;
}

完成イメージ
デフォルトテンプレートに画像を表示

パディングを指定する順番は、左から時計回りに「上・右・下・左」です。ちなみにパディングを個別に指定する場合は、

padding-top: 0;
padding-right: 0;
padding-bottom: 40px;
padding-left: 5px;

とします。右のパディングについては

text-align: left;

と、テキストを左寄せにしているため、省略しても問題ありません（テキストを右寄せにする場合は必要になります）。

このように、タイトルを左上寄せに配置するには、左パディング・上パディングを少なくし、下パディングを増やせばよい訳です。

ブログタイトルを右寄せにする場合は、#header に

text-align: right;

を追加します。

６．２配布テンプレートの場合

配布テンプレートでは次のように設定します。青色部分のように設定してください。

/* ヘッダ */
#header {
    padding: 25px 15px 75px 25px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}
 
#header a,
#header a:link,
#header a:visited {
    color: #fff;
    background: transparent;
    font-size: 32px;
    text-decoration: none;
}
#header a:hover {}
#header a:active {}
 
#header {
    background: url("<$mt:StaticWebPath$>themes/cityscape-portland/header.png") no-repeat top left;
}

完成イメージ
配布テンプレートに画像を表示

Comments [6] | Trackbacks [0]

FeedBurner アカウントをGoogle アカウントに移行する

September 29,2008 12:55 AM
Category：[FeedBurner, Google]
Tag：[Adsense, FeedBurner, Google]
Permalink

FeedBurner アカウントをGoogle アカウントに移行する方法を紹介します。

１．はじめに

現在利用中の FeedBurner（フィード配信サービス）が Google に買収されて日が経ち、FeedBurner でフィード向け Adsense が利用できるようになりました。

ネット検索でヒットする設定方法は、Drk7jp さんの、FeedBurner のアカウントを利用したまま、フィード向け AdSense を利用する方法です。

Drk7jp - フィード向け Google AdSense の使い方手順

本エントリーでは FeedBurner のアカウントを Google アカウントに移行する方法を説明し、その延長として、フィード向け AdSense を利用する際の注意点を説明します。アカウント移行と Adsense 利用の関係については、２項にその理由を示しています。

FeedBurner から Google へのアカウントの移行は、いずれ自動的に行われることになるようですが、ここで示す手順は Google への申請により移行する方法です。

以下で示す手順は、すでに日本語版 FeedBurner を利用していることと、Google アカウントを所有していることが前提です。「日本語版 FeedBurner」と限定しているのは、移行画面で FeedBurner のアカウントを入力するフィールドがあるのですが、仮に英語版 FeedBurner と日本語版 FeedBurner で同じアカウントをもっている場合、どちらのアカウントを Google アカウントに移行するかを設定できないためです。

アカウントの移行については正式な手順を紹介していますが、移行後に何らかの不具合が発生しても当ブログでは責任を負いかねますので、ご自身の責任で行ってください。また、移行後のフィード向け Adsense 設定についてのご質問にも一切お答え致しません。

２．アカウント移行までの経緯

実は一度、Drk7jp さんの記事を元にフィード向け AdSense を設定してみたのですが、当ブログではフィード向け広告を期待通りに配信できないことが判明しました。

原因の解説の前に、FeedBurner によるフィード配信の動作を図に示します。

FeedBurner でフィード配信をしており、自サイトのフィード（atom.xml など）を公開している場合、.htaccess で FeedBurner へのリダイレクトを行っていると思います。リダイレクト後、FeedBurner は非公開のフィード（fb.xml）を取得し、それを加工して購読者に配信します。シーケンスの流れは推測です。

通常の FeedBurner 配信シーケンス

このように自サイトのフィードを公開した運用を行っているのであれば、.htaccess でリダイレクト先のドメインを feed.proxy.google.com（Adsense の「新しいフィードを作成」のURL）に振り替え、フィード向け AdSense の設定で、登録するURLに FeedBurner のURL を設定すれば、次のような流れでフィード向け広告が配信されると思います。

広告を配信する際のシーケンス

ですが、当ブログでは前述の通り、ほとんど全ての購読者に FeedBurner のフィードURLを公開しているため、そもそも feed.proxy.google.com へのリダイレクトが行えません。
これがフィード向け広告を配信できない原因です。

当ブログの FeedBurner 配信シーケンス

それで、直接 FeedBurner へ問い合わせたところ、下記の（ような）方法で移行してもらえれば大丈夫です、という連絡を頂いた次第です。

３．アカウント移行の申請

それでは、アカウントを移行するための申請を行います。

Google ヘルプより「AdSense」をクリック。

Google ヘルプセンター

「フィード向け Adsense」をクリック。

フィード向け Adsense

「利用開始」をクリック。

利用開始

「FeedBurner 広告ネットワークを使用しています。フィード向け AdSense の使用を開始するにはどうしたらよいですか。」をクリック。

FeedBurner

ここで一旦説明に目を通し、「お問い合わせ」をクリック。

お問い合わせ

さらに説明に目を通し、「FeedBurner のアカウント」に、現在利用中の FeedBurner アカウント、「移行をご希望の Google アカウントのメールアドレス」に Google アカウントに登録しているメールアドレスを設定し「送信」をクリック。

お問い合わせ

アカウントの移行が完了すれば、Google アカウントのメールアドレスに（多分）メールが届くと思います。フィードのURL も、Google アカウントのフィードURL（http://feed.proxy.google.com/xxx）に変更になります。
新しいフィードURLの末尾が、FeedBurner で使っていたものと同一のものになるかどうかについては分かりません。

つまり、申請さえ行えば Google 側でアカウントの移行を行ってくれるようです。

４．アカウント移行後の FeedBurner について

FeedBurner の管理画面は、FeedBurner から Google アカウントの FeedBurner に移行します。

移行後の FeedBurner 管理画面です。移行後は購読者数が 0 になっています。

移行後の Google アカウントの FeedBurner 管理画面などは、掲載を控えます。

ちなみに移行後は、ユーザーのGoogle アカウントログイン直後の画面に「FeedBurner」へのリンクが表示されるようになります。そこから進んだ画面は既存の FeedBurner の管理画面と大体同じものです。

５．アカウント移行後のフィード向け Adsense 設定

アカウントを移行しただけでは広告は表示されません。移行後、Google Adsense の管理画面より「フィード向け Adsense」の広告作成および設定を行ってください。

作成したフィード向け Adsense がフィードに表示されるかどうかは、「広告の管理」タブで、作成したフィード向け Adsense の「ステータス」が「実行中」になったことで確認します。

６．リダイレクトについて

リダイレクトの設定は、新しいフィードURLにリダイレクトする設定を行いますが、現状のまま（旧FeedBurner へのリダイレクト）でも問題ありません。旧FeedBurner へのリダイレクトしていても、新しいフィードURLにリダイレクトされます。

つまり、（推測の域を出ませんが）次のようなことをやってくれているのだと思います。

移行後のシーケンス

７．広告の表示確認

「広告の管理」タブで、作成したフィード向け Adsense の「ステータス」が「実行中」になったことを確認して、Google リーダーや livedoor reader でフィードに広告が表示されることを確認してください。

Comments [1] | Trackbacks [0]

渋谷・東急百貨店の「なにわうまいもん市」

September 28,2008 12:03 AM
Category：[お知らせ]
Tag：[]
Permalink

関東圏では「明石焼（たこ焼きよりも柔らかい）」の美味しいお店が少ないようです。以前、池袋の東武百貨店に「道頓堀くくる」が出店していたようですが、閉店してしまっています。

とはいえ、ネットで調べると何店舗かみつかります。

上記の他に、美味しいお勧めのお店がありましたら教えてください。

それとは別に、現在、渋谷・東急百貨店で「第4回　いらっしゃ～い！ナニワなシブヤ　大＊大阪博覧会　in SHIBUYA」を開催しています。そのイベントのひとつとして、西館8Fで「なにわうまいもん市」をやっています（画面には「終了しました」とありますが編集ミスと思われます）。

ここでは、「道頓堀くくる」の明石焼をはじめ、名物のいかやき、会津屋の元祖たこ焼き、味乃家のモダン焼など、関西出身の方にはたまらないフードが勢揃いです。

この催しは2008年9月30日（火）まで開催しています。また、毎年この時期に開催しているようですので、今年行き損ねた方は来年ぜひ。

Comments [0] | Trackbacks [0]

配列に

September 27,2008 1:55 AM
Category：[ダジャレ]
Tag：[Joke]
Permalink

続きを読む ≫

Comments [0] | Trackbacks [1]

MTInclude タグによる SSI（サーバサイドインクルード）不要なインデックステンプレートのモジュール化

September 26,2008 12:55 AM
Category：[モジュール化]
Tag：[Customize, intel, Module, MovableType, MTBlogSitePath]
Permalink

MTInclude タグによるインデックステンプレートのモジュール化を紹介します。

注：この手法は再構築を行わないと情報が更新されないので、比較的静的な情報か、定期的に再構築を行う運用環境でご利用ください。

１．概要

「最近のブログ記事」をモジュール化する例で、イメージ図を示します。

インデックステンプレートのモジュール化

サイドバーに表示する「最近のブログ記事」をモジュール化する場合、インデックステンプレートで作成します。ファイル名は recent_entry.html としておきます。

次にメインページやブログ記事などのテンプレートに MTInclude タグを記述して、file モディファイアに recent_entry.html を指定します。file モディファイアで指定したファイルの内容は、出力するページ内に展開されます。

この方法を用いれば、すべてのページに対し、同じ内容の「最近のブログ記事」を表示することができます。
「最近のブログ記事」以外に、「最近のコメント」「最近のトラックバック」「カテゴリーリスト」「月別アーカイブリスト」「タグクラウド」などにも適用できます。

２．メリット・デメリット

メリット

リストの再構築回数を減らせるので、全体の再構築時間の短縮が可能です。
全ページで同じ内容のリストを表示することができます。
SSI（サーバサイドインクルード）の設定が不要。PHP化も不要です。

デメリット

リストの表示内容を更新するには、再構築が必要です。

３．具体的なカスタマイズ例

Movable Type 4 以降で、デフォルトテンプレートの「ウィジェット」にある「最近のブログ記事」をモジュール化してみます。配布テンプレートでも同じ作業です。

ブログ管理画面の「デザイン」→「テンプレート」の「インデックステンプレートを作成」をクリック。

テンプレート一覧

インデックステンプレート作成画面で次の内容を設定。

テンプレート名：最近のブログ記事
テンプレートの内容：「ウィジェット」の「最近のブログ記事」の内容をそのままペースト
出力ファイル名：recent_entry.html（拡張子は .html でなくても構いません）
テンプレートの種類：カスタムインデックステンプレート
公開：スタティック

テンプレート作成画面

作成したら保存し、再構築まで行ってください。再構築後、テンプレート編集画面右の「公開されたテンプレートを確認」をクリックして、ファイルが出力されたことを確認してください。次のような、スタイルを適用していないテキストが表示されていればOKです。

4．デフォルトテンプレートで「最近のブログ記事」などをすべてのページに表示する

デフォルトテンプレートでは「最近のブログ記事」「最近のコメント」などのいくつかのウィジェットは「ホームページウィジェットグループ」ウィジェットを経由してインクルードしているので、上記の設定だけではメインページだけしか表示されません。

すべてのページでウィジェットを表示させるには、「ホームページウィジェットグループ」ウィジェットにある MTIf タグを削除するか、囲む位置を変更します。

例えば、「最近のブログ記事」だけを全ページに表示させるには次のように変更します。

変更前

...前略...
<mt:If name="main_index">
    <$mt:Include widget="最近のコメント"$>
    <$mt:Include widget="最近のブログ記事"$>
    <$mt:Include widget="アイテム"$>
    <$mt:Include widget="タグクラウド"$>
</mt:If>

変更後

...前略...
<mt:If name="main_index">
    <$mt:Include widget="最近のコメント"$>
</mt:If>
    <$mt:Include widget="最近のブログ記事"$>
<mt:If name="main_index">
    <$mt:Include widget="アイテム"$>
    <$mt:Include widget="タグクラウド"$>
</mt:If>

５．トラブルシューティング

MTInclude タグを利用するので、目的のファイルがみつからない場合、再構築でエラーが発生します。

再構築エラー

エラーが発生した場合、次のような原因がないか、確認しましょう。

インデックステンプレートで作成したファイルの実体が存在しない（未再構築）。
MTInclude タグで指定したファイル名が誤っている。
MTInclude タグで指定したファイルのパスが誤っている。

Comments [2] | Trackbacks [0]

週刊東洋経済「グーグル10年目の大変身」

September 25,2008 12:55 AM
Category：[書籍]
Tag：[Book, Rakuten]
Permalink

現在発売中の週刊東洋経済（9/27特大号）で「グーグル10年目の大変身」という特集が掲載されています。

週刊東洋経済 2008年 9/27号 [雑誌]

誌面の約60ページを割いています。まだ読んでいないのでとりあえず目次だけ紹介しておきます。数字は該当ページです。

40 創業10年で急成長したグーグル; 42 ブラウザにも参入。広がるサービスの裾野; 44 戦略的拠点1・マウンテンビュー：変化止まらぬ技術者の楽園; 50 戦略的拠点2・サンブルーノ：ユーチューブは利益を生むか; 56 戦略的拠点3・ニューヨーク：16兆円市場の若き改革者; 60 戦略的拠点4・ロンドン：欧州でシェア断トツ西部戦線異状なし; 66 戦略的拠点5・北京：中国で進む衝撃の現地化; 72 戦略的拠点6・東京：モバイルも、動画も。高まる日本への期待; 74 最前線で活躍する18人のプロフィール：多士済々のグーグラー; 78 パートナー：なぜグーグルと組んだのか？携帯キャリア、情報家電、大学; 80 ディープ対談：グーグルはいい会社。だけど心配... 樋口理×中嶋淳; 84 日本のライバル：生態系広げるヤフー、ＭＳＮは強い足場を模索; 86 グーグルは「取引市場」を目指す、進む広告の破壊的創造; 90 グーグル、ヤフー、マイクロソフト競合サービスを徹底比較; 94 要素技術の優秀さはお墨付き、次世代検索は日本発？
INTERVIEW: 54 ヴィントン・サーフ／グーグル副社長兼チーフ・インターネット・エバンジェリスト; 59 ティム・アームストロング／グーグル広告販売担当副社長; 65 オーミッド・コーデスタニ／グーグル上級副社長（業務開発兼国際営業担当）; 69 カイフ・リー／グーグル副社長（グレーターチャイナ総裁）
COLUMN: 46 エコビジネスにも乗り出したグーグル; 49 僕たちはなぜグーグルを辞めたか？; 53 ユーチューブ日本の民放との提携も間近か

書店で平積みされているのをみつけて購入しました。残り僅かだったのでかなり好調な売れ行きのようです（または気づくのが遅かった？）。

Google の動向が気になる方はどうぞ。

Comments [1] | Trackbacks [0]

システムテンプレートとその他のテンプレートを振り分ける

September 24,2008 1:23 AM
Category：[テンプレートタグ, 検索]
Tag：[Customize, MovableType, System]
Permalink

Movable Type 4.1 以降で、システムテンプレート（コメントプレビュー／コメント完了／検索結果）とその他のテンプレートで処理を振り分けるカスタマイズです。

「Google Adsense の広告を検索結果ページだけに表示しない方法」ということで、以前にご質問を頂いたものを情報展開しておきます。

なお、このカスタマイズは、システムテンプレートの「ダイナミックパブリッシングエラー」や「ポップアップ画面」を利用していないことを前提にしていますので予めご了承ください。

１．システムテンプレートとその他のテンプレートで処理を振り分ける

システムテンプレートでは、変数 system_template に 1 が設定されるので、これを利用してシステムテンプレートとその他のテンプレートを振り分けます。

<mt:unless name="system_template">
システムテンプレート以外で表示
<mt:else>
システムテンプレートで表示
</mt:unless>

２．システムテンプレートをさらに振り分ける

冒頭に記した、「Google Adsense の広告を検索結果ページだけに表示しない方法」です。

システムテンプレートのコメントプレビュー／コメント完了ページと検索結果を振り分ける場合は、次のように変数 body_class を利用します。コメント関連のシステムテンプレートは変数 body_class に mt-comment -xxxxx という値が設定されます。

<mt:unless name="system_template">
システムではないページで表示
<mt:elseIf name="body_class" like="mt-comment">
コメントプレビュー・コメント完了ページで表示
<mt:else>
検索結果で表示
</mt:unless>

Adsensen のコードを最後の MTElse タグブロックに含めなければ、検索結果ページだけ非表示になります。

上記以外にも色々な振り分け方法があると思いますので、試してみてください。
また検索結果テンプレートだけに何らかのユーザ変数を設定しておけば、「ダイナミックパブリッシングエラー」や「ポップアップ画面」を含め、検索結果テンプレートだけを振り分けることが可能です。検索結果テンプレートを判定するには、変数 search_results で判定できます。

「Movable Type 4.2 パーフェクトガイド」をお持ちの方は、213ページ～214ページに関連する変数を掲載しています。

Movable Type 4.2 パーフェクトガイド
荒木勇次郎

毎日コミュニケーションズ 2008-07-31
売り上げランキング : 9985

Amazonで詳しく見る by G-Tools

2008.10.10
検索結果テンプレートの判定に関する記述を変更しました。

Comments [0] | Trackbacks [0]

WordPress逆引きデザイン事典[2.X対応]

September 23,2008 12:03 AM
Category：[書籍]
Tag：[Amazon, Book]
Permalink

WordPress 2.x 向けの逆引き事典です。

WordPress逆引きデザイン事典[2.X対応]
高山一登

翔泳社 2008-09-11
売り上げランキング : 7266

Amazonで詳しく見る by G-Tools

翔泳社が出版している通常の縦長サイズよりやや細めの幅で、コンパクトな感じです。

目次とは別に、書籍の構成は大きく3つに分かれていて、前半が基本操作、中盤はテンプレート、後半はテンプレートタグとプラグインの解説になっています。

「2.x対応」と書かれている通り、214 ある全項目に、2.2 / 2.3 / 2.5 / 2.6 の対応表がついています（ほとんどの項目がすべてのバージョンに対応しています）。

逆引き形式ですが、WordPress の基本的なほぼすべての項目を網羅しているので、ビギナーの方から事典として使いたい方まで、幅広く使える内容ではないでしょうか。

第1部ブログを準備する
第1章基本情報: 001 WordPressとブログソフトについて知る; 002 WordPressのしくみについて知る; 003 WordPressとMovable Typeの違いを知る
第2章インストール: 004 必要なサーバ構成を知る; 005 WordPressの入手する; 006 新規インストールする; 007 ブログをバックアップする; 008 旧バージョンからアップデートする; 009 他のブログから移行する; 010 他のブログへ移行する
第3章セットアップ: 011 ブログ名、ブログの説明を設定する; 012 ブログ・WordPressのURLを変更する; 013 管理用のメールアドレスを変更する; 014 誰でも自由にユーザー登録できるようにする; 015 ログインしたユーザーからのみコメントを受け付ける; 016 新規ユーザーに自動で割り当てる権限を設定する; 017 タイムゾーンを設定する; 018 日付と時間の表示フォーマットを変更する; 019 カレンダーの曜日の始まりを変更する; 020 ファイルのアップロード先を変更する; 021 アップロード画像のサムネイルと中サイズの上限を設定する; 022 ユーザーを追加/権限の変更/削除する; 023 ユーザーのプロフィールとパスワードを変更する; 024 ブログページの最大表示件数を変更する; 025 RSS/Atomフィードの投稿表示件数を変更する; 026 RSS/Atomフィードに表示する内容を設定する; 027 ページとRSS/Atomフィードのcharsetを変更する; 028 投稿記事内のリンク先にピンバックを送信する; 029 他のブログからのトラックバックを受け付ける; 030 検索エンジンやポータルサイトに更新通知（ping）を送信する; 031 検索エンジンの巡回を拒否する; 032 投稿記事やアーカイブ、カテゴリ、タグなどのURLフォーマットを変更する; 033 my-hacks．phpを有効にする; 034 記事投稿用のテキストエリアのサイズを設定する; 035 投稿時に顔文字をグラフィックに置き換える; 036 投稿時に不正なXHTML構文を自動的に修正する; 037 投稿時にデフォルトで登録されるカテゴリーを設定する; 038 リンク追加時にデフォルトで登録されるカテゴリーを設定する; 039 トップページに特定のページを表示する; 040 ブログ全体でコメントを許可/拒否する; 041 コメントが投稿されたときに管理者にメールで通知する; 042 コメントを表示するには管理者の承認を必要とする; 043 コメント投稿者のメールと名前を必須にする; 044 一度承認された投稿者のコメントのみ承認する; 045 特定のリンク数、IP、アドレスを含むコメントは承認待ち/スパム扱いにする; 046 アバター（Gravatar）を表示させる; 047 ブログのデザインテーマを変更する; 048 ブログのデザインテーマをオフィシャルサイトからダウンロードする; 049 サイドバーに最新記事やテキストなどさまざまなウィジェットを表示する; 050 ウィジェットに対応したサイドバーを増やす; 051 リモート投稿を可能にする
第2部ブログを書く
第4章記事、ページ: 052 新しく記事を投稿する; 053 ビジュアルエディタを使って投稿記事を編集する; 054 HTMLエディタを使って投稿記事を編集する; 055 投稿記事にカテゴリーを設定する; 056 投稿記事ごとにコメント、トラックバック/ピンバックの許可の設定をする; 057 投稿記事に対してパスワードをかける; 058 投稿記事の公開状態を設定する; 059 画像や動画を投稿記事に掲載する; 060 投稿記事の文章に区切りをつける; 061 投稿記事を任意のURLにする; 062 投稿記事の概要を追加する; 063 トラックバックを通知する; 064 任意の投稿項目を追加する（カスタムフィールドを使用する）; 065 投稿記事の投稿時間を任意に設定する; 066 投稿記事の投稿者を変更する; 067 表示しているWebページへのリンクを投稿記事に簡単に追加する; 068 投稿した記事を編集/削除する; 069 独立したコンテンツを表示するページを作成する; 070 ページを階層化する（親ページを作成する）; 071 ページのテンプレートを変更する; 072 ページの表示順を指定する; 073 作成済みのページを編集/削除する
第5章ファイル: 074 アップロード済みのファイルの「タイトル」「キャプション」「説明」を編集する; 075 アップロードしたファイルのURLを確認する; 076 アップロードしたファイルを削除する; 077 サーバ上のファイルを編集する（html/php/txt/.htaccess など）
第6章リンク: 078 リンクを追加/編集/削除する; 079 表示しているサイトを簡単にリンクに登録する; 080 リンクカテゴリーを追加/編集/削除する; 081 リンクをインポートする
第7章カテゴリー: 082 新しいカテゴリーを追加する; 083 カテゴリーを編集/削除する; 084 新しいタグを追加する; 085 タグを編集/削除する
第8章コメント、トラックバック: 086 コメント・トラックバックを承認待ち/スパム/削除の設定にする; 087 コメント・トラックバックの内容を編集する; 088 承認待ちのコメント・トラックバックのステータスを管理画面から変更する; 089 承認待ちのコメント・トラックバックのステータスをメールから変更する
第3部ブログをデザインする
第9章テーマとテンプレート: 090 テーマの基本概念を知る; 091 テーマのカスタマイズ方法を知る; 092 テーマの作成方法を知る; 093 PHPの基本を知る; 094 テンプレートタグの基本を知る; 095 CSSの基本を知る; 096 「メインインデックス」テンプレートを編集する; 097 「ヘッダ」テンプレートを編集する; 098 「フッタ」テンプレートを編集する; 099 「サイドバー」テンプレートを編集する; 100 「コメント」テンプレートを編集する; 101 「単一記事の投稿」テンプレートを編集する; 102 「ページ」テンプレートを編集する; 103 「カテゴリー」テンプレートを編集する; 104 「タグ」テンプレートを編集する; 105 「投稿者」テンプレートを編集する; 106 「日付」テンプレートを編集する; 107 「検索結果」テンプレートを編集する; 108 「404」テンプレートを編集する; 109 「検索フォーム」テンプレートを編集する; 110 「アーカイブ」テンプレートを編集する; 111 「添付ファイル」テンプレートを編集する; 112 「ポップアップコメント」テンプレートを編集する
第10章ブログ全体: 113 ブログのタイトルを表示する; 114 ブログの説明文を表示する; 115 ブログの管理者のメールアドレスを表示する; 116 ブログのサイトURLを表示する; 117 WordPressをインストール下URLを表示する; 118 RSSフィードへのリンクを表示する; 119 テンプレートのURLを表示する; 120 テーマファイルのディレクトリURLを表示する; 121 メインCSSファイルのURLを表示する; 122 メインCSSファイルのディレクトリ名を表示する; 123 ピンバック用URLを表示する; 124 文字コードを表示する; 125 WordPressのバージョンを表示する; 126 HTMLタイプを表示する; 127 ページタイトルを表示する; 128 ログイン・ログアウトリンクを表示する; 129 ユーザー登録用のリンクを表示する; 130 現在表示されているページを調べる; 131 記事のコメントフィードへのリンクを表示する; 132 カレンダーを表示する; 133 タグクラウドを表示する; 134 検索した文字列を表示する; 135 リンクの一覧を表示する
第11章記事、ページ: 136 記事のタイトルを表示する; 137 記事のIDを表示する; 138 記事の本文を表示する; 139 記事の日付を表示する; 140 記事の最終更新日時を表示する; 141 記事の投稿者名を表示する; 142 記事の抜粋を表示する; 143 カスタムフィールドの内容を表示する; 144 投稿者の経歴を表示する; 145 投稿者のユーザーIDを表示する; 146 投稿者のメールアドレスを表示する; 147 投稿者のWebサイトを表示する; 148 投稿者のインスタントメッセンジャーIDを表示する; 149 投稿者の公開した記事数を表示する; 150 投稿者アーカイブへのリンクを表示する; 151 記事の一覧を表示する; 152 ページの一覧を表示する; 153 ページの一覧をドロップダウンで表示する; 154 記事の詳細ページへのパーマリンクを表示する; 155 記事の編集画面へのリンクを表示する; 156 記事にアンカーを設定する; 157 ひとつ前の記事へのリンクを表示する; 158 ひとつ後の記事へのリンクを表示する; 159 改ページされたページで各ページへのリンクを表示する; 160 記事のタグ一覧を表示する
第12章アーカイブ: 161 月別アーカイブで現在の年月を表示する; 162 タグアーカイブで現在のタグ名を表示する; 163 分割されたアーカイブで前後のページへのリンクを表示する; 164 分割されたアーカイブで次のページへのリンクを表示する; 165 分割されたアーカイブで前のページへのリンクを表示する; 166 投稿者アーカイブへのリンクの一覧を表示する; 167 日付アーカイブへのリンクの一覧を表示する; 168 年別アーカイブへのリンクを表示する; 169 月別アーカイブへのリンクを表示する; 170 日別アーカイブへのリンクを表示する
第13章カテゴリー: 171 記事のカテゴリー名とカテゴリーアーカイブへのリンクを表示する; 172 カテゴリーアーカイブで現在のカテゴリー名を表示する; 173 カテゴリーの説明文を表示する; 174 カテゴリーの一覧をドロップダウンで表示する; 175 カテゴリーの一覧を表示する; 176 記事が特定のカテゴリーに含まれるかどうか調べる; 177 カテゴリーの親カテゴリーを表示する; 178 記事に設定したカテゴリーの情報をまとめて表示する
第14章コメント、トラックバック: 179 コメントのIDを表示する; 180 コメントの日付を表示する; 181 コメントの投稿者名を表示する; 182 コメント投稿者のIPアドレスを表示する; 183 コメント投稿者のメールアドレスを表示する; 184 コメント投稿者のサイトURLを表示する; 185 コメントの種類を表示する; 186 コメントの本文を表示する; 187 コメントの概要を表示する; 188 コメント編集画面へのリンクを表示する; 189 記事のトラックバックURLを表示する; 190 記事に対するコメント、トラックバック、ピンバックの合計数を表示する; 191 記事のコメント部分へのアンカーリンクを表示する; 192 コメントフォームをポップアップで表示する; 193 ピンバックを利用する
第15章フィード: 194 記事詳細ページへのリンクをフィード形式で表示する; 195 記事タイトルをフィード形式で表示する; 196 記事本文をフィード形式で表示する; 197 記事の抜粋をフィード形式で表示する; 198 記事のカテゴリー名をフィード形式で表示する; 199 コメントの投稿者名をフィード形式で表示する; 200 コメントの本文をフィード形式で表示する; 201 ブログに関する情報をフィード形式で表示する
第4部ブログをカスタマイズする
第16章プラグイン: 202 プラグインについて知る; 203 プラグインを管理画面で編集する; 204 スパムを排除する; 205 パンくずリストを表示する; 206 ページナビゲーションにページ番号を表示する; 207 記事の抜粋を日本語でも利用できるようにする; 208 メールで記事を投稿する; 209 記事にグーグルマップを表示する; 210 記事にYouTubeを表示する; 211 ブログで意識調査を行う; 212 ショッピングカートの機能を追加する; 213 サイドバーにメッセージボックスを設置する; 214 コメント欄をページで分割する

Comments [0] | Trackbacks [0]

Serene Bach カテゴリーのプルダウン化プラグイン v3.00

September 22,2008 12:55 AM
Category：[プルダウン]
Tag：[Category, SereneBach]
Permalink

以前公開していた、Serene Bach 用の「カテゴリーのプルダウン化プラグイン」をバージョンアップしました。

「カテゴリーのプルダウン化プラグイン」は、カテゴリー単位の折りたたみや、親カテゴリー記事数の、子カテゴリー記事数との合算表示などを可能にするものです。

１．改善点

これで、

サブカテゴリーのプルダウン化
新着表示
カテゴリー件数表示（子カテゴリー分を親カテゴリーに合算可能）

の3拍子がひとつのプラグインで行えるようになります。

Serene Bach カテゴリーのプルダウン化

新着表示は、管理画面の「追加機能」に表示された「カテゴリーのプルダウン化」のページ（下）から設定できます。

管理画面の「追加機能」に表示された「カテゴリーのプルダウン化」のページ

２．ダウンロード

改善版は下記のページからダウンロードしてください。

カテゴリーのプルダウン化プラグイン for Serene Bach

また、新着表示のカスタマイズについても上記のページに記述を追加しました。

Comments [0] | Trackbacks [0]

課題表の

September 21,2008 12:03 AM
Category：[ダジャレ]
Tag：[Joke]
Permalink

続きを読む ≫

Comments [5] | Trackbacks [0]

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。

September 20,2008 12:58 AM
Category：[書籍]
Tag：[Amazon, Book]
Permalink

「Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。」の執筆陣が、Movable Type 版の「100の法則」を出版されました。インプレスジャパン様より献本頂きました。ありがとうございました。

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。
加藤善規

インプレスジャパン 2008-09-12
売り上げランキング : 5838

Amazonで詳しく見る by G-Tools

本書は、テンプレートのカスタマイズからプラグイン・環境変数によるカスタマイズ、JavaScrpt・外部ツール等を駆使した 100 の Tips 集です。フルカラーで、基本的に完成画面とそれに対応するサンプルが用意されており、直感的にカスタマイズのポイントが理解できるようになっています。
また、LDAP や承認フローなど、Movable Type EnterPrise の機能についても触れられており、これまでの MT関連書籍にはなかったと思います。

タイトルの通りバージョン 4.2 はもちろん、4.x で利用可能な内容になっているので、4.0x や 4.1x をお使いの場合でも適用できるでしょう。

第1章 Movable TypeをCMSとして使う前に理解する法則: 1 Movable Typeのテンプレートを理解する; 2 テンプレートタグの使い方を身につける; 3 アーカイブマッピングで出力ファイル名をカスタマイズする; 4 カスタムフィールドで自由に項目を追加する; 5 グローバルテンプレートで複数ブログのデザインを揃える; 6 ダイナミックパブリッシングを理解する; 7 Webサイトのコンテンツを分解する; 8 Movable Typeを使ったWebサイトの全体像を設計する; 9 個別のコンテンツのテンプレートを作成する; 10 企業サイトにふさわしいページタイトルを設定する; コラム Movable TypeとWordPress

第2章管理者の運用効率を高める法則: 11 過去のブログ記事へのリンクはテンプレートタグを利用する; 12 TagAssistプラグインで正しい文書構造の文章を書く; 13 ブログ記事とコメントで絵文字を使う; 14 指定日投稿でブログ記事を事前に投稿する; 15 携帯電話からブログ記事を投稿する; 16 カスタムフィールドで表を自動的に作成する; 17 ブログ記事から編集画面へ直接移動する; 18 ブログ記事投稿ツールを利用する; 19 RenameLabelプラグインで入力フォームのラベルを変更する; 20 Bookmarksプラグインで管理画面をすばやく移動する; 21 骨格のみを複製して効率よくブログを作成する; 22 ブログパーツをウェブページ機能で管理する; 23 Copyrightの年はMTDateタグで自動更新する; 24 条件分岐でリンク先を使い分ける; 25 SSIでトップページに常に最新情報を表示する; 26 Regexプラグインで高度な正規表現を使用する; 27 更新のたびにサイトマップのページを自動的に作成する; 28 カテゴリを限定してフィードを配信する; 29 更新pingを送信して集客する; 30 検索エンジン向けのサイトマップXMLを自動生成する; 31 新着情報をTwitterで告知する; 32 更新情報をメールで配信する; コラム iPhoneからブログ記事を管理する

第3章ユーザーが使いやすいWebサイトを作成する法則: 33 特定のカテゴリに属するブログ記事を一覧表示する; 34 注目の記事をピックアップして表示させる; 35 シークレットタグを使ってブログ記事を分類する; 36 Ajaxを利用して人気記事ランキングを表示する; 37 最近コメントがあったブログ記事を一覧表示する; 38 コメントやトラックバックのあったブログ記事をツリーで表示する; 39 MultiBlogを利用して複数ブログの記事を一覧表示する; 40 ランダムにブログ記事の一覧を作成する; 41 複数のブログから同じタグのブログ記事を抜き出す; 42 RSSを利用して外部ブログの記事をまとめて表示する; 43 タグを利用して関連記事へのリンクを自動的に表示する; 44 同じカテゴリの前後のブログ記事へリンクを作成する; 45 a要素にtitle属性を指定してアクセシビリティを向上させる; 46 カテゴリを任意の順番に並べ替える; 47 パンくずリストを作成する; 48 静的なアーカイブページを分割する; 49 検索結果がゼロ件のときに代わりの導線を用意する; 50 タグ検索結果のURLを短くして利便性を高める; 51 OPMLファイルを生成して複数のフィードをまとめて登録させる; 52 フィードアイコンはもっとも目に付く位置に配置する; 53 「続きを読む」のナビゲーションは的確に配置する; 54 商品ごとに問い合わせフォームを作成する; 55 ブログ記事にGoogleマップで地図を表示する; 56 ブログ記事に5段階評価を付ける; 57 同じアーカイブから2つのレイアウトを作成する; コラムデザインの制約がないMovable Type

第4章 Webサイトの価値を高めるデザインの法則: 58 ブログ記事のコメントに連番を振る; 59 奇数、偶数でコメントやリストを交互に色分けする; 60 トップページとそれ以外のページで見出しレベルを変更する; 61 ソーシャルブックマークの被ブックマーク数を表示する; 62 ソーシャルブックマークへの追加ボタンを設置する; 63 RSSリーダーへのフィード登録ボタンを設置する; 64 カテゴリやタグを利用して特定のブログ記事にのみアイコンを付ける; 65 一定時間で自動的に消えるNewマークを付ける; 66 最新のブログ記事のみデザインを変える; 67 ブログ記事ごとに自動でデザインを変更する; 68 カテゴリごとにデザインを変えて判別性を高める; 69 投稿者別にアイコンやデザインを変更する; 70 グローバルテンプレートと条件分岐でページごとにCSSを変更する; 71 月別アーカイブへのナビゲーションを折りたたんですっきり見せる; 72 ブログ記事の日付を画像で出力する; 73 美しいタグクラウドを作成する; コラムブログとブランディングデザインの戦略

第5章多彩なWebページを作成する法則: 74 ユーザーのプロフィールページを作成する; 75 担当者が管理できるイベントカレンダーを作成する; 76 高機能なフォトギャラリーを作る; 77 ウェブページ機能で個別のページを作成する; 78 プレゼンテーション用のスライドを作る; 79 サムネイルのある実績紹介ページを作成する; 80 PDFによるIR情報ページを作成する; 81 沿革ページをMovable Typeで管理する; 82 カテゴリから企業のグローバルメニューを作成する; 83 日報管理をMovable Typeで行う; 84 PayPalを利用してECサイトを作る; 85 FAQページはJavaScriptを併用して作成する; 86 顧客情報データベースを作る; コラムイントラブログを利用したナレッジの蓄積と共有

第6章パフォーマンスとセキュリティを高める法則: 87 不要な再構築ファイルを減らしてサーバ負荷を軽減する; 88 FastCGIを使用して動作速度を上げる; 89 コメントやトラックバックの間隔を制限してサーバ負荷を軽減する; 90 アップロードするファイルサイズの上限を指定する; 91 1つのデータベースに複数のMovable Typeをインストールする; 92 Movable Typeのデータを完全バックアップする; 93 標準の文字コードを変更する; 94 Berkeley DBを使用している場合はデータベースを移行する; 95 スパム対策を施してサーバ負荷や管理の手間を軽減する; 96 管理画面への不正なアクセスを防止する; 97 ブログ記事の公開に承認フローを組み込む; 98 ロールを設定してユーザーごとに権限を管理する; 99 LDAPで連動してユーザー管理を行う; 100 企業での利用にはMovable Type Enterpriseを使用する; コラム Movable TypeをWindowsサーバで利用する; 付録1 Movable Typeのインストール方法; 付録2 Movable Typeのアップグレード方法; 付録3 本書で使用するテンプレートタグ; 付録4 本書で紹介するプラグイン一覧

なお、法則 44・法則 65・法則 79では、当ブログで公開している以下のカスタマイズを紹介頂いています。この場をお借りしてお礼申し上げます。

Comments [0] | Trackbacks [0]

RebuildIndexFilter プラグイン v0.06

September 19,2008 12:55 AM
Category：[コールバック]
Tag：[MovableType, Plugin, RebuildIndexFilter]
Permalink

先日公開した「RebuildIndexFilter プラグイン」をさらにバージョンアップしました。

改善点は次の通りです。

日時指定投稿に対応
チェックロジックの見直し

プラグインは下記のページよりダウンロードしてください。

RebuildIndexFilter プラグイン

現時点で（多分）確認できている動作は次の通りです。

再構築イベント	処理
ブログ記事の投稿/編集	ブログ記事の新規投稿ブログ記事の日時指定投稿ブログ記事の編集プログ記事編集画面からの公開プログ記事編集画面からの未公開プログ記事一覧画面からの公開プログ記事一覧画面からの公開取り消しプログ記事一覧画面からの削除
ウェブページの作成/編集	ウェブページ新規作成ウェブページの日時指定作成ウェブページ編集ウェブページ編集画面からの公開ウェブページ編集画面からの未公開ウェブページ一覧画面からの公開ウェブページ一覧画面からの公開取り消し注：「削除」では再構築処理が行われないため、プラグインは動作しません
コメント投稿/編集	コメント投稿コメントの編集コメント編集画面からの公開コメント編集画面からの公開取り消しコメント一覧画面からの公開コメント一覧画面からの公開取り消しコメント一覧画面からのスパムコメント一覧画面からのスパム解除
トラックバック投稿/編集	トラックバック受信トラックバックの編集トラックバック編集画面からの公開トラックバック編集画面からの公開取り消しトラックバック一覧画面からの公開トラックバック一覧画面からの公開取り消しトラックバック一覧画面からのスパムトラックバック一覧画面からのスパム解除

インデックステンプレート編集画面からの「保存と再構築」、および再構築画面からの再構築については、プラグインの設定とは関係なく、無条件に再構築します。

日時指定投稿は、ローカルPC環境で run-periodic-tasks をコマンド起動で確認したものですので、レンタルサーバでうまく動作しない場合はご連絡ください。

これで主要なトリガはほぼ網羅したと思いますが、コメント一覧画面からのコメント返信には対応できておりません。

Comments [29] | Trackbacks [1]

Movable Type 4.2 テンプレートセット修正

September 18,2008 1:23 AM
Category：[テンプレート, テンプレートセット]
Tag：[MovableType, Template]
Permalink

配布中の Movable Type 4.2 テンプレートセットを修正致しました。

Movable Type テンプレート

修正したテンプレートは、下記のバージョンで配布しています。

template_4_2_utf8_1_4
template_4_2_utf8_1_4_style
template_4_2_utf8_1_6_style_liquid

ご利用の皆様にはご迷惑をおかけして申し訳ございませんが、以前のバージョンで本エントリーの不具合が発生している場合は、テンプレートのバージョンアップを行うか、下記の修正を行ってください。

今回の問題で改修するテンプレートは、「ウェブページ」アーカイブテンプレートのみです。

１．問題点

ウェブページの表示時に JavaScript エラーが発生する。
スタイル対応版で、切り替えたスタイルがウェブページに反映されない（常に3カラム固定レイアウトで表示）。

２．原因

JavaScript エラーについては、Movable Type 4.1 まで使用していた mt.js に実装されている関数 individualArchivesOnLoad を起動していたため。エラー自体は引数に設定している commenter_name が未定義によるものです。

スタイルが反映されない問題については、body 要素で設定する CSS レイアウト用の変数 page_layout の値が、body 要素の直前にある MTSetVar タグで layout-three-columns という値で上書きされてしまっていたため。

３．対処

JavaScript エラーが発生する問題については、「ウェブページ」アーカイブテンプレートの先頭の方にある下記の MTSetVar タグを次のように修正してください。

変更前（赤色部分を削除）

<mt:setVar name="body_onload" value="individualArchivesOnLoad(commenter_name)" />

変更後（青色部分を追加）

<mt:setVar name="body_onload" value="mtEntryOnLoad()" />

スタイルが反映されない問題については、「ウェブページ」アーカイブテンプレートの先頭の方にある下記の MTSetVar タグを1行削除してください。

<mt:setVar name="page_layout" value="layout-three-column" />

Comments [8] | Trackbacks [1]

VisibleCustomFieldImage プラグイン v0.10

September 17,2008 12:55 AM
Category：[管理画面]
Tag：[CustomField, MovableType, Plugin]
Permalink

Movable Type 4.1 向けに公開していた、「カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン 0.02」を 4.2 対応にしました。

2010.03.26 Movable Type 5用に「CustomFieldAssetDetailsHandler プラグイン v0.20」を公開しました。

このプラグインを用いることで、Movable Type 4.2 のカスタムフィールドに画像を選択した場合にスキップされてしまう、アイテムの情報入力画面をハンドリングできます（下）。

アイテムの情報入力画面をハンドリング

なお、ブログ記事編集画面へのサムネイル表示については、Movable Type の標準機能になりましたので、本プラグインからその機能は削除しました。

ということで、本プラグインの目的は、アップロード時にアイテムのオプション画面をハンドリングするだけの機能に縮退しています。プラグイン名で機能が推測できないので、プラグイン名を変更したいところですが、一身上の都合でこのままにしておきます。

１．プラグインのダウンロード

下記のリンクをクリックしてプラグインをダウンロードします。

VisibleCustomFieldImage.zip

プラグイン開発やサポート等にご支援・ご賛同くださる方からの寄付をお待ち申し上げます。下記の「寄付」のリンクをクリックすると Paypal によるお支払いページにジャンプします。

２．プラグインのアップロード

ダウンロードした VisibleCustomFieldImage.zip を解凍して、中にある VisibleCustomFieldImage.pl を plugins ディレクトリにアップロードします。「VisibleCustomFieldImage.pl」が表示されればOKです。

プラグイン一覧

３．使い方

予め作成している、画像用カスタムフィールドの「imageを選択」をクリック。

画像用カスタムフィールド

「新しい画像をアップロード」をクリック（またはアップロード済の画像を選択して「次へ」をクリック）。

「新しい画像をアップロード」をクリック

新しい画像をアップロードする場合は「参照」をクリック。

「参照」をクリック

アップロードしたい画像選択後、「アップロード」をクリック。

「アップロード」をクリック

オプション画面が表示されます（これが本プラグインの機能）。
機能はファイルアップロードのオプション画面と同じですが一応掲載しておきます。

オプション画面

名前：アイテムの名前を入力します。
説明：アイテムの説明を入力します。
タグ：アイテムのタグを入力します。

「完了」をクリックすると、Movable Type の標準機能でサムネイル画像が管理画面に表示されます。なお、「ブログ記事に画像を表示」「サムネイルを利用」「ポップアップウィンドウ～」の項目は入力しても効果はありません（本文・追記のテキストエリアにカーソルをあてている状態で有効となるため）。

サムネイル画像

ブログ記事を投稿すると、予めテンプレートに設定していたカスタムフィールドのテンプレートタグ部分にサムネイル画像が表示されます。

サムネイル画像が表示

アイテムの一覧を表示すると、サムネイル画像やポップアップがすべて管理対象になっています。

アイテムの一覧

2011.08.12
本文の説明を一部修正しました。

Comments [9] | Trackbacks [0]

フォルダアーカイブとフォルダアーカイブ一覧を作る

September 16,2008 1:23 AM
Category：[4.2, フォルダ]
Tag：[Customize, Folder, MovableType, Page]
Permalink

Movable Type 4.2 でフォルダアーカイブとフォルダアーカイブ一覧を作るカスタマイズを紹介します。

Movable Type 4.2 標準の機能ではフォルダアーカイブを作成することができません。将来的に機能追加されるかもしれませんが、ここではプラグインを利用して Movable Type 4.2 でフォルダアーカイブページを作成する方法を紹介します。

次のようなフォルダとウェブページの構成を想定します。

フォルダ1
　├ ウェブページ1-1
　├ ウェブページ1-2
　└ ウェブページ1-3
フォルダ2
　├ ウェブページ2-1
　├ ウェブページ2-2
　└ ウェブページ2-3

この構成であれば、フォルダアーカイブには、次のようにフォルダに属するウェブページの一覧を表示することができます。

フォルダ1のフォルダアーカイブページ
フォルダ一1のウェブページ一覧

フォルダ2のフォルダアーカイブページ
フォルダ一2のウェブページ一覧

サブフォルダがある場合も、独立したアーカイブページとして作成可能です。

フォルダアーカイブの作成に伴い、フォルダアーカイブページへのリンク（フォルダ一覧）の作成方法もあわせて説明します。

フォルダ一覧

１．フォルダアーカイブの作成

フォルダアーカイブの作成は、The blog of H.Fujimoto の藤本壱さんが作成された WriteToFile プラグインを利用します。

１．１ WriteToFile プラグインのダウンロード

下記のページより、WriteToFile プラグインをダウンロードしてください。

The blog of H.Fujimoto - テンプレートの再構築結果を部分的にファイルに出力するプラグイン

ダウンロードしたプラグインアーカイブを展開し、plusins ディレクトリにアップロードします。
プラグインの一覧で「WriteToFile」が表示されれば OK です。

プラグイン一覧

１．１フォルダアーカイブ用テンプレートの作成

フォルダアーカイブ用テンプレートはインデックステンプレートで作成します。

ブログ管理画面の「デザイン」→「テンプレート」で「インデックステンプレートを作成する」をクリック。

テンプレート一覧

表示されたテンプレート作成画面で、次の内容を設定。

テンプレートの名前: フォルダアーカイブ（何でも構いません）
テンプレートの内容: ご利用のメインページの内容をそのままコピー＆ペースト。
ファイル名: dummy.dat（このファイルはダミーなので使いません）
その他: 変更せずそのまま

１．２フォルダアーカイブ用テンプレートの修正1

フォルダアーカイブ用テンプレートの先頭と末尾に、テンプレートタグ（青色部分）を追加します。

<MTTopLevelFolders>
<MTSetVarBlock name="fname"><MTFolderPath>/index.html</MTSetVarBlock>
<MTWriteToFile file="$fname">
[１．１項でペーストしたメインページの内容]
</MTWriteToFile>
<MTSubFolderRecurse>
</MTTopLevelFolders>

１．３フォルダアーカイブ用テンプレートの修正2

テンプレート内にある MTEntries タグを MTPages タグに変更します。

配布テンプレート

変更前（赤色を削除）

...前略...
<div id="content">
<div class="blog">
 
<mt:entries>
   <mt:entryTrackbackData />
   <mt:include module="ブログ記事の概要" />
</mt:entries>
 
</div>
</div>
...後略...

変更後（青色を追加）

...前略...
<div id="content">
<div class="blog">
 
<mt:Pages>
  <mt:PagesHeader>
  <h2 class="date"><$MTFolderLabel$>のウェブページ一覧</h2>
  <div class="entry">
    <ul>
  </mt:PagesHeader>
      <li><a href="<$MTPagePermalink$>"><$MTPageTitle$></a></li>
  <mt:PagesFooter>
    </ul>
  </div>
  </mt:PagesFooter>
</mt:Pages>
 
</div>
</div>
...後略...

完成例

フォルダ一覧

既定のブログ

変更前（赤色を削除）

...前略...
<div id="alpha">
  <div id="alpha-inner">
<mt:Entries>
  <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
  <$mt:Include module="ブログ記事の概要"$>
</mt:Entries>
    <div class="content-nav">
      <a href="<$mt:Link template="archive_index"$>">アーカイブ</a>
    </div>
  </div>
</div>
...後略...

変更後（青色を追加）

...前略...
<div id="alpha">
  <div id="alpha-inner">
<mt:Pages>
  <mt:PagesHeader>
  <h2 class="archive-title"><$MTFolderLabel$>フォルダの一覧</h2>
  <ul>
  </mt:PagesHeader>
    <li><a href="<$MTPagePermalink$>"><$MTPageTitle$></a></li>
  <mt:PagesFooter>
  </ul>
  </mt:PagesFooter>
</mt:Pages>
    <div class="content-nav">
      <a href="<$mt:Link template="archive_index"$>">アーカイブ</a>
    </div>
  </div>
</div>
...後略...

完成例

フォルダ一覧

設定が完了したら再構築してください。
再構築でエラーが発生した場合、４項に該当していないか確認してください。

２．フォルダアーカイブ一覧の作成

下記のサブテンプレートをウィジェットで作成します。ただしフォルダアーカイブに表示させる場合はインデックステンプレートで作成して、モジュール化を行ってください（理由は３項参照）。

配布テンプレートの場合

<mt:ifArchiveTypeEnabled archive_type="Page">
  <mt:if tag="blogPageCount">
<dt class="sidetitle">フォルダ一覧</dt>
<dd class="side">
    <mt:topLevelFolders>
      <mt:folderHeader>
  <ul>
      </mt:folderHeader>
    <li><a href="<mt:blogURL /><mt:folderPath />/index.html"><mt:folderLabel /></a> [<mt:folderCount />]
      <mt:subFolderRecurse />
    </li>
      <mt:folderFooter>
  </ul>
      </mt:folderFooter>
    </mt:topLevelFolders>
</dd>
  </mt:if>
</mt:ifArchiveTypeEnabled>

完成例

フォルダ一覧

既定のブログの場合

<mt:IfArchiveTypeEnabled archive_type="Page">
<div class="widget-pages widget">
  <h3 class="widget-header">フォルダ一覧</h3>
  <div class="widget-content">
  <mt:TopLevelFolders>
    <mt:folderHeader>
    <ul>
    </mt:folderHeader>
      <li class="folder folder-<$mt:FolderID$>"><a href="<mt:blogURL /><mt:folderPath />/index.html"><mt:folderLabel /></a> [<mt:folderCount />]
    <$mt:SubFolderRecurse$>
      </li>
    <mt:folderFooter>
    </ul>
    </mt:folderFooter>
  </mt:TopLevelFolders>
  </div>
</div>
</mt:IfArchiveTypeEnabled>

完成例

フォルダ一覧

３．注意事項1

MTWriteToFile タグの中にカテゴリーリストやフォルダリストのサブテンプレートがあると、そこにある MTSubCatsRecurse や MTSubFolderRecurse タグが干渉して、サブフォルダのアーカイブが作成されないようです。

フォルダリストにカテゴリーリストやフォルダリストを含める場合はカテゴリーリストやフォルダリストをインデックステンプレートでモジュール化してください。

インデックステンプレートで作成したフォルダリストの出力ファイル名を folder.html とした場合、例えば次の方法で表示できます。PHP化する必要はありません。

<mt:BlogSitePath cat="folder.html" setvar="folder" />
<mt:include file="$folder" />

４．注意事項2

ウェブページのないフォルダがあると、フォルダアーカイブの再構築で次のようなエラーが発生します。

再構築エラー

Comments [6] | Trackbacks [1]

RebuildIndexFilter プラグイン v0.03

September 15,2008 2:26 AM
Category：[コールバック]
Tag：[MovableType, Plugin, RebuildIndexFilter]
Permalink

先日公開した「RebuildIndexFilter プラグイン」をバージョンアップしました。

改善点は次の通りです。

コメント・トラックバック一覧画面の公開・公開の取り消し・スパム・スパム解除による再構築に対応
ブログ記事・ウェブページの新規作成時に動作しない不具合に対応
ウェブページ関連の制御の不具合を修正

プラグインは下記のページよりダウンロードしてください。

RebuildIndexFilter プラグイン

なお、スケジュールタスクによる再構築（日時指定投稿）には現在対応しておりません。

Comments [16] | Trackbacks [0]

年別アーカイブを利用した月別アーカイブの年別表示

September 14,2008 2:55 AM
Category：[月別アーカイブ]
Tag：[Customize, Monthly, MovableType, Yearly]
Permalink

Movable Type の年別アーカイブを利用した「月別アーカイブの年別表示」を紹介します。

月別アーカイブの年別表示

当ブログで紹介してきた「月別アーカイブの年別表示」では月別アーカイブ（とプラグイン）を利用したものに執着していましたが、年別アーカイブと月別アーカイブを組み合わせれば同様の表示が実現できます。

この方法のメリットは、プラグインを利用する必要がないことですが、デメリットとして、アーカイブテンプレートに対して、年別アーカイブのアーカイブマッピングの追加が必要です。年別アーカイブをアーカイブページとして使用しない場合は、再構築オプションの「公開」を手動にしておくと良いでしょう。

月別アーカイブの年別表示

１．基本形

次のサブテンプレートをサイドバーまたはウィジェットとして作成します。ここでは配布テンプレート用にアレンジしています。

MTArchiveList タグを入れ子にすることで、外側の MTArchiveList タグは年表示、内側の MTArchiveList タグは外側の MTArchiveList タグのコンテキストとなるため、特定の月のみを表示します。

<mt:ifArchiveTypeEnabled archive_type="Yearly">
<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
  <mt:archiveList archive_type="Yearly">
    <mt:archiveListHeader>
  <ul>
    </mt:archiveListHeader>
    <li><mt:archiveTitle />
    <mt:archiveList archive_type="Monthly">
      <mt:archiveListHeader>
      <ul>
      </mt:archiveListHeader>
        <li><a href="<mt:archiveLink />"><mt:archiveDate format="%B" cat="月" /></a> [<mt:archiveCount />]</li>
      <mt:archiveListFooter>
      </ul>
      </mt:archiveListFooter>
    </mt:archiveList>
    </li>
    <mt:archiveListFooter>
  </ul>
    </mt:archiveListFooter>
  </mt:archiveList>
</dd>
</mt:ifArchiveTypeEnabled>
</mt:ifArchiveTypeEnabled>

２．ツリー化 + 折りたたみ

１項のサブテンプレートにツリー化用の class 属性と年別用折りたたみのマークアップを追加したものです。

下記のサブテンプレートは「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」と組み合わせてお使いください。

<mt:ifArchiveTypeEnabled archive_type="Yearly">
<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
  <mt:archiveList archive_type="Yearly">
  <div id="archive<mt:archiveDate format="%Y" />name">
    <span><mt:archiveTitle /></span>
  </div>
    <mt:archiveList archive_type="Monthly">
      <mt:archiveListHeader>
  <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      </mt:archiveListHeader>
    <li class="tree<mt:archiveListFooter>_end</mt:archiveListFooter>"><a href="<mt:archiveLink />"><mt:archiveDate format="%B" cat="月" /></a> [<mt:archiveCount />]</li>
      <mt:archiveListFooter>
  </ul>
      </mt:archiveListFooter>
    </mt:archiveList>
  </mt:archiveList>
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
<mt:archiveList archive_type="Yearly">
FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
</mt:archiveList>
//]]>
</script>
</dd>
</mt:ifArchiveTypeEnabled>
</mt:ifArchiveTypeEnabled>

３．参考・関連記事

この記事は下記のサイトを参考にさせていただきました。ありがとうございました。

４．その他

余談ですが、「Movable Type 4.2 パーフェクトガイド」では、プラグインや年別アーカイブを使わずに、「月別アーカイブの年別表示」を実現するカスタマイズを豊富に紹介しています。

Movable Type 4.2 パーフェクトガイド
荒木勇次郎

毎日コミュニケーションズ 2008-07-31
売り上げランキング : 7256

Amazonで詳しく見る by G-Tools

Comments [3] | Trackbacks [0]

毎日コミュニケーションズから

September 13,2008 12:33 AM
Category：[ダジャレ]
Tag：[Joke]
Permalink

続きを読む ≫

Comments [0] | Trackbacks [0]

RebuildIndexFilter プラグイン v0.02

September 12,2008 12:31 AM
Category：[コールバック]
Tag：[MovableType, Plugin, RebuildIndexFilter]
Permalink

先日公開した「RebuildIndexFilter プラグイン」をバージョンアップしました。

改善点は次の通りです。

本格版で複数のイベントを指定できるようにしました
スクリプトファイルの変更に対応できるようにしました（本格版・簡易版）
簡易版のプラグイン名を RebuildIndexFilter Lite に変更しました

プラグインは下記のページよりダウンロードしてください。

RebuildIndexFilter プラグイン

アドバイスくださった壱さん、およびご要望くださった bzbell さん、ありがとうございました。

本格版のイベント複数指定は次のように変更しました。

変更前
再構築イベントの種類（変更前）

変更後
再構築イベントの種類（変更後）

簡易版は、MTIgnore タグを複数設定すれば同じ効果があります（多分）。

Comments [9] | Trackbacks [0]

CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）

September 11,2008 1:55 AM
Category：[CSS]
Tag：[CSS, Dropshadow, Template]
Permalink

CSSでブログの横に影をつける方法です。

背景画像

以前エントリーした、「CSSでブログに影をつける（ドロップシャドウ）」は、Movable Type 3 向け配布テンプレートの CSS レイアウトに合わせたものでしたが、Movable Type 4 では CSS レイアウトを変更したので、そのままでは適用できません。

ということで、Movable Type 4 向けの配布テンプレートによる設定方法を紹介します。このエントリーでは固定レイアウトのみを対象にしています。

１．ドロップシャドウの仕組み

固定レイアウトの場合、ブログ全体のカラム幅に合わせて影をつけた横長の画像を、CSS を利用して表示します。ドロップシャドウとはいっても、要するにブログ幅に合わせた、単なる背景画像です。

下のスクリーンショットはその一部分です。固定レイアウトの場合、下の画像と、これを 180℃反転させた画像を、幅900px ほどの GIF 画像の両端に配しています。

背景画像

基本的には、body 要素の背景画像（CSS で言えば body 要素セレクタの background プロパティ）に背景画像を指定すれば良いのですが、IE6 の場合、ブラウザのリサイズでタイトルバナー右端と背景画像の間に空白が時々発生するという問題があります *1 ので、ここでは div 要素に背景画像を与えています。

また、div 要素に設定する場合でも、width プロパティを指定した親の div 要素がないと、body 要素に背景画像を設定した場合と同様の事象になるようです。
かなりおおざっぱですが下記に(X)HTMLマークアップのイメージを記します。*2

<body>
  <div>　← ブログの幅を指定
    <div>　← 背景画像を指定
　　　：
　[ブログ本体のマークアップ]
　　　：
    </div>
  </div>
</body>

設定内容については、後述する公開テンプレートによるカスタマイズをご覧ください。

下記にサンプルを用意しています。前述の不具合についてもサンプルをご覧頂ければお分かりになると思います。

２．配布テンプレートによるカスタマイズ

２．１ドロップシャドウ用画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

ドロップシャドウ用背景画像

保存したファイルは、サーバのブログディレクトリ（index.html があるディレクトリ）にアップロードしてください。
この背景画像は、配布テンプレートの3カラム固定レイアウトの幅に合わせています。

異なる背景画像を作りたい場合は、下記の記事を参考にしてください。

CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

２．２テンプレートの修正

ページ全体の修正イメージ（赤色を削除して青色を追加）は次の通りです。

...前略...
<div id="box" class="clearfix">
  <div id="inner" class="clearfix">
    ...中略...
  </div>
</div>
<div id="footer">
  <div id="footer-inner" class="clearfix">
    <p id="footer">Copyright ...中略... All Rights Reserved.</p>
  </div>
</div>
...後略...

このように変更するためには、まず、「ヘッダー」テンプレートモジュールに対し、下記の修正（赤色を削除して青色を追加）を行ってください。

...前略...
<div id="box" class="clearfix">
  <div id="inner" class="clearfix">
...後略...

次に、「フッター」テンプレートモジュールに対し、下記の修正（赤色を削除して青色を追加）を行ってください。

...前略...
  </div>
</div>
<div id="footer">
  <div id="footer-inner" class="clearfix">
    <p id="footer">Copyright ...中略... All Rights Reserved.</p>
  </div>
</div>
...後略...

２．３スタイルシートの修正

スタイルシートに対し、下記の修正（赤色を削除して青色を追加）を行ってください。

注：配布テンプレートのバージョンによっては修正前の内容が表示しているものと若干異なる場合があります。対応するセレクタ（.layout-three-column と組み合わせたもの）は同じなので、セレクタと変更内容をよく確認して修正してください。

/* カラム切り替え */
body.layout-three-column,
body.layout-three-column-right,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    text-align: center;
    background: #36414d;
}
...中略...
/* 固定レイアウト共通 */
.layout-three-column #box,
.layout-three-column-right #box,
.layout-two-column-left #box,
.layout-two-column-right #box,
.layout-one-column #box {
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 25px 0;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    text-align: left;
    background-color: #fff;
}
 
/* 3カラム固定レイアウト幅 */
.layout-three-column-right #box,
.layout-three-column #box {
    width: 850px;
    width: 870px;
}
.layout-three-column #inner {
    _height:100%;
    padding: 0 10px 15px 10px;
    background: url("back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #inner {
    height:100%;
}
...中略...
/* フッタ */
.layout-one-column #footer,
.layout-three-column #footer,
.layout-three-column-right #footer,
.layout-two-column-left #footer,
.layout-two-column-right #footer,
.layout-one-column-liquid #footer {
    margin-right: auto;
    margin-left: auto;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    border-bottom: 1px solid #669;
    height: 45px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
    line-height: 3.5;
    line-height: 3.7;
}
.layout-three-column #footer,
.layout-three-column-right #footer {
    width: 850px;
    width: 870px;
}
.layout-three-column #footer-inner {
    _height:100%;
    padding: 0 10px;
    background: url("back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #footer-inner {
    height:100%;
}
.layout-three-column #footer-inner p {
    color: #fff;
    background: #8fabbe;
}
...中略...
.clearfix:after {
    content: ""; /* ピリオドを削除*/
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

2008.09.17
２．２項の説明が誤っていたので修正しました。また、２．１項に背景画像を作る記事へのリンクを追加しました。

*1：これは当サイトのテンプレートだけかもしれませんので、表示はご利用のテンプレートによって異なる可能性があります。

*2：div 要素を背景画像表示のために用いるのはXHTMLとして適正な文書構造ではありません（本来はブログ全体を括る要素に与えるのが妥当）が、クロスブラウザ対応のためのテクニックとして記しています。

Comments [4] | Trackbacks [0]

RebuildIndexFilter プラグイン

September 10,2008 12:55 AM
Category：[コールバック]
Tag：[MovableType, Plugin, RebuildIndexFilter]
Permalink

Movable Type のインデックステンプレートの再構築をフィルタリングする RebuildIndexFilter プラグインを作ってみました。MT4.2x/MT5.0x/MT5.1xで動作を確認しています。

１．主な機能

このプラグインは、インデックステンプレートの再構築トリガを、次の5種類のイベントから選択することができます。

ブログ記事の投稿
ウェブページの作成
コメント投稿
トラックバック受信
すべて

例えば、フィードなどは「ブログ記事の投稿」のみをトリガに再構築することで、コメント投稿やトラックバック受信による再構築から除外することができます。

２．プラグイン作成の経緯

そもそも、Movable Type のインデックステンプレートの再構築のトリガは、再構築画面からの再構築以外に、ブログ記事の投稿やコメント投稿・トラックバック受信も含まれます。

私のブログでは、Google サイトマップや全エントリータイトルを表示するアーカイブインデックス、タグクラウドといった、再構築に時間のかかるページに加え、サイドバーのパーツ（最近のエントリー・最近のコメント・最近のトラックバックなど）について、インデックステンプレートを使って数多くのモジュール化を行っています。

このため、インデックステンプレート全体を再構築してしまうとサーバにかなりの負荷がかかるのですが、コメント投稿では、コメントとは関係のないインデックステンプレートまですべて再構築してしまいます（内容に変化がなければファイルとしては出力されません）。

このため、現在使用中のサーバ（CORESERVER-A）に移転した直後のインデックステンプレートの再構築関係は次のようになっており、コメント投稿から完了までに30秒ほどかかり、500エラーが多発していました。

改善前の再構築

その後、自ブログに本プラグインを導入し、下の図のように、イベント別に再構築するインデックステンプレートを絞り込んだところ、コメント投稿時間が10秒前後で完了するようになり、劇的に改善しました。

改善後の再構築

ということで、本プラグインを適用し、インデックステンプレートの再構築イベントをフィルタリングすることで、コメント投稿処理やトラックバック受信処理の短縮を図ることができます。また、イベントと関係のないインデックステンプレートの再構築を避けたい、という場合にもお勧めです。

再構築画面からの再構築には影響ありません。

２．価格

非商用利用：無償
商用利用：1050円/1サーバ（購入前に必ず動作確認してください）

非商用利用でご利用の場合も、プラグインのご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

３．プラグインのダウンロード

下記のリンクからプラグインアーカイブをダウンロードし、任意のフォルダに保存してください。今回はデータベースを利用する本格版と、データベースを使用しない簡易版の2種類を用意しました。フィルタリングの動作はどちらも同じですが、設定方法が異なります（詳細は後述）。

変更履歴
2008.09.10 初版
2008.09.12 スクリプト名の変更に対応。本格版について複数イベント指定に対応。
2008.09.15 本格版について、コメント・トラックバックの承認およびスパムに対応。いくつかの不具合を修正
2008.09.16 本格版について、XREA で動作しない不具合を修正
2008.09.16 本格版について、再構築画面からの動作を修正
2008.09.19 本格版について、日時指定投稿に対応。チェックロジックの見直し
2008.09.25 本格版について、日時指定投稿の不具合修正
2008.09.27 本格版について、通知メールからの承認に対応
2008.10.07 本格版について、Can't locate object method "properties" via package "MT::Template" at lib/MT/Object.pm line 195. となるエラーの対処
2010.03.19 v0.10 本格版について、Movable Type 5.0のUIに対応
2012.01.06 v0.11 本格版について、Movable Type 5.1のUIに対応

RebuildIndexFilter_0_09.zip（本格版：MT4.2x用）

RebuildIndexFilter_0_10.zip（本格版：MT5.0x用）

RebuildIndexFilter_0_11.zip（本格版：MT5.1x用）

RebuildIndexFilter.zip（簡易版）

４．インストール

プラグインアーカイブを解凍し、中にある RebuildIndexFilter フォルダを plugins ディレクトリにアップロードしてください。

本格版はアップロードした後に管理画面にアクセスすると、次のようなアップグレード画面になりますので、「アップグレード開始」をクリックし、画面にしたがって操作を進めてください。簡易版はこの画面は表示されません。

MT4の画面（MT5以降も同じです）
プラグイン一覧

ブログ管理画面より「システム」→「プラグイン」でプラグイン一覧を表示し、次のように表示されればOKです。

プラグイン一覧

５．使用方法（本格版）

インデックステンプレートのオプションに「再構築イベント」という項目が表示されるので、そこから再構築を実施したいイベントを選択します。デフォルトはすべてのイベントで無条件に再構築します。

MT4の画面
再構築イベントの種類

MT5.1の画面
再構築イベントの種類

データベースは、Movable Type のアップグレードによる不具合を避けるため、独立したテーブルを作成しています。

現在確認できている動作は次の通りです。

再構築イベント	処理
ブログ記事の投稿/編集	ブログ記事の新規投稿ブログ記事の編集プログ記事編集画面からの公開プログ記事編集画面からの未公開プログ記事一覧画面からの公開プログ記事一覧画面からの公開取り消しプログ記事一覧画面からの削除
ウェブページの作成/編集	ウェブページ新規作成ウェブページ編集ウェブページ編集画面からの公開ウェブページ編集画面からの未公開ウェブページ一覧画面からの公開ウェブページ一覧画面からの公開取り消し注：「削除」では再構築処理が行われないため、プラグインは動作しません
コメント投稿/編集	コメント投稿コメントの編集コメント編集画面からの公開コメント編集画面からの公開取り消しコメント一覧画面からの公開コメント一覧画面からの公開取り消しコメント一覧画面からのスパムコメント一覧画面からのスパム解除通知メールからの承認通知メールからのスパム指定
トラックバック投稿/編集	トラックバック受信トラックバックの編集トラックバック編集画面からの公開トラックバック編集画面からの公開取り消しトラックバック一覧画面からの公開トラックバック一覧画面からの公開取り消しトラックバック一覧画面からのスパムトラックバック一覧画面からのスパム解除通知メールからの承認通知メールからのスパム指定

６．使用方法（簡易版）

インデックステンプレートの中に次のような MTIgnore タグを挿入します。挿入位置はどこでも構いません。プラグインは、この挿入された MTIgnore タグを検索して再構築をフィルタリングします。

再構築イベント

記述する内容は次の通りです。

ブログ記事投稿・編集で再構築を行う場合: <mt:ignore>EntryOnly</mt:ignore>
ウェブページ作成・編集で再構築を行う場合: <mt:ignore>PageOnly</mt:ignore>
コメント投稿で再構築を行う場合: <mt:ignore>CommentOnly</mt:ignore>
トラックバック受信で再構築を行う場合: <mt:ignore>PingOnly</mt:ignore>

何も挿入しない場合は無条件に再構築します。

７．その他

イベントの判定方法はあまりエレガントではないので、完璧に動作するかどうかは分かりません。基本的な動作については正常性を確認しています。

2008.09.10
５項の画面が間違っていたので差し替えました。

Comments [11] | Trackbacks [1]

チャレンジ！　Movable TypeをCMSとして使ってみよう！（第4回　テンプレートモジュールを読み込ませる／head要素の中身を作る）

September 9,2008 1:00 AM
Category：[お知らせ]
Tag：[MovableType]
Permalink

またまた遅くなりましたが、フリーランスWebデザイナー・黒野明子さんの gihyo.jp で Movable Type の連載第4回が公開されています。

チャレンジ！　Movable TypeをCMSとして使ってみよう！- 第4回　テンプレートモジュールを読み込ませる／head要素の中身を作る

第4回は「テンプレートモジュールを読み込ませる／head要素の中身を作る」です。

今回は、各テンプレートから読み込むための head 領域用のテンプレートの作成を行います。head 領域用のテンプレートは head 要素の内容だけを表現するテンプレートで、インクルードするテンプレートに応じて MTIf タグや MTIfArchiveType タグを使って振り分け処理を行います。

いつものように、「ほげ山くん」と「くれま先輩」が会話形式で進めます。

Comments [0] | Trackbacks [0]

Movable Type で BlogPet からの投稿を設定する場合の注意事項

September 8,2008 12:33 AM
Category：[BlogPet]
Tag：[BlogPet, MovableType]
Permalink

BlogPet を利用すると、ブログ投稿や、ペットが自分のブログのユーザーとして自動投稿してくれる機能があります。これらの機能を利用するには、BlogPet と Movable Type の設定が必要ですが、その場合の注意事項を記しておきます。

１．BlogPet へブログ情報設定

BlogPetの管理画面にログインして、「各種設定」→「基本設定」→「ブログ」と進み、表示された画面で次の内容を設定します。

BlogPetの管理画面

ブログのユーザーID

ブログにログインするときのユーザー名を設定します。

ブログのパスワード

ブログにログインするときのパスワードではなく、「Webサービスパスワード」を設定します。「Webサービスパスワード」の設定については２項を参照してください。

投稿用APIのURL

アプリケーションディレクトリにあるCGIファイル、mt-xmlrpc.cgiまでのURLを設定します（CGIファイル名を含む）。

Blog判別用ID

ブログを1つしか作っていない場合は「1」です。複数作成している場合は、管理画面のURLなどに表示される

blog_id=X

のXの部分がBlog判別用IDになります。

２．Movable Type への「Webサービスパスワード」の設定

ブログ管理画面の「一覧」→「ユーザー」でユーザーの一覧を表示し、ブログをインストールするときに作成したユーザー名をクリック。

ユーザーの一覧

画面下の方に「Webサービスパスワード」があります。これが、BlogPetの「ブログのパスワード」に該当します。

Webサービスパスワード

インストール直後は任意の値が設定されているので、右側の「内容を表示」のリンクをクリックすれば現在設定されているパスワードが表示されます。

Webサービスパスワードの確認

パスワードを変更したい場合は、任意のパスワードに変更して「変更を保存」をクリックしてください。

なお、「Webサービスパスワード」は、インストール時のユーザーのユーザー編集画面にしか表示されません。

３．BlogPet側の設定で「この設定では投稿用APIにアクセスできませんでした。」というエラーになる場合

１項の設定が適正でない場合、「設定を保存」をクリックした後にタイトルのエラーが発生します。
このエラーは設定状況によって次の2つに分かれます。

３．１「MetaWeblogとAtomAPIのみ対応しています」というエラーになる

MetaWeblogとAtomAPIがみつけられない場合のエラーです。

Webサービスパスワード

原因は、１項の「投稿用APIのURL」で設定したURLが間違っているためです。アプリケーションディレクトリまでのURLが間違っていないか、mt-xmlrpc.cgiがURLに含まれているか確認してください。アプリケーションディレクトリが

http://user-domain/mt/

であれば、「投稿用APIのURL」は、

http://user-domain/mt/mt-xmlrpc.cgi

となります。

３．２「ログインが不正です。」というエラーになる

１項の「投稿用APIのURL」は正しく設定されていますが、投稿用APIを使って、設定したブログにログインできないために発生するエラーです。

Webサービスパスワード

原因は、２項の「Webサービスパスワード」と、１項の「ブログのパスワード」が不一致（Movable Typeの管理画面にログインするときのパスワードを設定してしまった場合など）のためです。
Movable Typeの「Webサービスパスワード」を確認して、BlogPet管理画面の「ブログのパスワード」に設定してください。

Comments [4] | Trackbacks [0]

スカラー変数を

September 7,2008 12:03 AM
Category：[ダジャレ]
Tag：[Joke]
Permalink

勉強しよう

続きを読む ≫

Comments [0] | Trackbacks [0]

Amazon 2008年8月の注文ランキング

September 6,2008 2:00 PM
Category：[Amazon]
Tag：[Amazon, Ranking]
Permalink

2008 年 8 月の Amazon 注文ランキングです。iPod 関連の商品が結構多かったです。

1位：Movable Type 4.2 パーフェクトガイド

Movable Type 4.2 パーフェクトガイド
荒木勇次郎

毎日コミュニケーションズ 2008-07-31
売り上げランキング : 1457

Amazonで詳しく見る by G-Tools

5位：Movable Type プロフェッショナル・スタイル MT4.1対応

Movable Type プロフェッショナル・スタイル MT4.1対応
CSS Nite

毎日コミュニケーションズ 2008-04-08
売り上げランキング : 2676

Amazonで詳しく見る by G-Tools

5位：統計数字を疑う　なぜ実感とズレるのか？

統計数字を疑う　なぜ実感とズレるのか？
門倉貴史

光文社 2006-10-17
売り上げランキング : 2767

Amazonで詳しく見る by G-Tools

5位：パワーサポートエアーパッドソール for MX レボリューション PAS-71

パワーサポートエアーパッドソール for MX レボリューション PAS-71

パワーサポート 2007-05-28
売り上げランキング : 4187

Amazonで詳しく見る by G-Tools

Comments [0] | Trackbacks [0]

MTEntriesWithSubCategories タグの不具合などについて

September 5,2008 1:23 AM
Category：[4.2]
Tag：[MovableType, MTEntriesWithSubCategories]
Permalink

Movable Type 4.2/4.21 で、MTEntriesWithSubCategories タグをブログ記事リストで使用すると、下記の問題が発生します。頂いたコメントで判明致しました。

テンプレートのプレビューでエラーになる
テンプレート再構築でエラーになる（場合がある）

いずれも次のようなエラーが発生します。

再構築エラー

注：再構築でエラーになるのは、テンプレート編集画面の「保存と再構築」をクリックした場合のみ確認しています。

また、Movable Type 4.1 では親カテゴリーにブログ記事が1件も投稿されていない場合でも、小カテゴリーにブログ記事が投稿されていれば、MTEntriesWithSubCategories タグを使用することで、親カテゴリーアーカイブが出力されましたが、4.2 では親カテゴリーに1件以上のブログ記事が投稿されていないと空の親カテゴリーアーカイブが出力されるようです。

バージョン4.1 で MTEntriesWithSubCategories タグを利用されている方はご注意ください。

Comments [0] | Trackbacks [0]

Google Chrome

September 4,2008 1:55 AM
Category：[Google]
Tag：[Browser, Google]
Permalink

Google から3日にリリースされた独自ブラウザ「Google Chrome」が多くのブログで紹介されています。ということで、当ブログでも便乗しておきます。

「ブラウザは Windows のIE しか使ったことがない」といったビギナーの方に向けて書いてます（と言いながらダウンロードでは Firefox を使ってますが...）。

１．Google Chrome の主な特徴

Google Chrome には、主に次のような特徴があります。

Googleが開発を進めてきたJavaScript エンジン「V8」と、Appleが無償公開するレンダリングエンジンの「WebKit」を採用し、高速化を図っています。
タブをブラウザの外にドラッグすると、新しいウィンドウが開きます。また、別のウィンドウのタブを他のウィンドウのタブに移動することもできます。
各タブは独立したプロセスとして動作するため、あるタブで障害が発生しても、他のタブが動かなくなるということがありません。
シークレットウィンドウ（後述）を使用すればアクセス履歴を残しません。

２．Google Chrome のインストール

説明に Google Chrome のインストール画面を掲載しています。まずいようでしたら削除します。

Google Chrome のサイトにアクセスして、「Google Chrome をダウンロード」をクリック。

Google Chrome のサイト

利用規約を読み、同意してよければ「同意してインストール」をクリック。オプションのチェックは任意です。

利用規約

セットアップファイルのダウンロードが開始されるので「保存」をクリックして、任意のフォルダにダウンロードします。

ダウンロード

ダウンロードしたセットアップファイルをダブルクリックして、「実行」をクリック。

セットアップ

Google Chrome のダウンロードが開始します。

Google Chrome のダウンロード開始

続けて、Google Chrome のインストールが開始します。

Google Chrome のインストール開始

「Google Chrome を起動」をクリック。これで、画面に表示されているショートカットの作成や、ブックマークなどのインポートが行われて、Google Chrome を起動します。

Google Chrome を起動

上の画面が表示されるとき、他のブラウザを起動していると警告が表示されます。開いているブラウザを閉じて「続行」をクリックするか、「インポートをスキップ」をクリックします。

Google Chrome が起動しました。右側には（インポート元ブラウザの）最近追加したブックマークが表示されます。

ブラウザ起動

３．Google Chrome の機能

アドレス入力欄はURLの入力だけでなく、検索フォームとして使えます。

Google Chrome はタブブラウザなので、＋マークをクリックすれば、

タブ起動

このように新しいページを表示するためのタブが開き、ひとつのウィンドウで複数のページを同時に表示できます。別のウィンドウを開くこともできます。

タブ起動

右側のメニューから「シークレットウィンドウ」を選択すると、「シークレットウィンドウ」が開きます。

シークレットウィンドウを選択

このウィンドウで開いたページは、ブラウザの履歴や検索履歴に記録されないようになっています。また、このウィンドウを閉じると Cookie も残りません。ただし、ダウンロードしたファイルやブックマークしたページは保存されます。

シークレットウィンドウ

右側のメニューから「履歴」を選択すると、ページにアクセスした履歴が表示されます。さらに検索することも可能です。

シークレットウィンドウ

４．不具合

いくつかのニュースサイトやブログを見ても、レンダリングに関する目立った不具合は報告されていないようですが、当ブログの「Movable Type テンプレート」では背景画像が表示されない（ページの下の方だけ表示）ことを確認しています。ページがかなり長い場合に発生します。

表示の不具合

他のページは正常に背景画像が表示されます。

表示の不具合

Comments [8] | Trackbacks [5]

Movable Type 4.1 と 4.2 の差分（コメント入力フォーム）

September 3,2008 12:55 AM
Category：[4.2, コメント, テンプレート]
Tag：[4.2, MovableType, Template]
Permalink

Movable Type 4.1 と 4.2 のコメント入力フォームの差分を掲載します。

Movable Type 4.2 では、インデックステンプレートの JavaScript（mt.js）の実装がほぼすべて新しくなり、それに伴い、コメント入力フォームのマークアップもかなり変更されています。

4.1 から 4.2 にアップグレードした場合、JavaScript（mt.js）やコメント入力フォームはそのままでも問題ないと思いますが、4.2 のコメント関連機能を活用するには、インデックステンプレートの JavaScript（mt.js）を初期化、つまり 4.2 の JavaScript（mt.js）を利用し、コメント入力フォームのテンプレートについては、以下に示す変更を行うと良いでしょう。

１．コメントプレビュー用データ

表示されているページがコメントプレビューであることを示すための情報を設定します。
コメントプレビューテンプレートに下記の青色のスクリプトを、mt.js が読み込まれる前に実行されるよう、挿入してください。

4.1

...前略...
<MTSetVarBlock name="html_head">
<script type="text/javascript" src="<$MTLink template="javascript"$>"></script>
</MTSetVarBlock>
...後略...

4.2

...前略...
<MTSetVarBlock name="html_head">
<script type="text/javascript">
/* <![CDATA[ */
var user = <mt:userSessionState />;
var is_preview = true;
/* ]]> */
</script>
<script type="text/javascript" src="<$MTLink template="javascript"$>"></script>
</MTSetVarBlock>
...後略...

この設定がもれていると、サインインしていないコメントでプレビューした場合、CAPTCHA フィールドがデフォルトで表示されないといった不具合が発生します。

２．メッセージ表示用エリアのマークアップ

「サインインできます」などのメッセージを表示するエリアのサブテンプレートは、4.1 で使われていた MTIfRegistrationAllowed タグがなくなり、(X)HTML の div 要素に変わりました。div 要素の id 属性値は comment-greeting としてください。

4.1

<MTIfRegistrationAllowed>
        <div id="comment-form-external-auth">
            <script type="text/javascript">
            <!--
            <MTIf name="comment_preview_template">is_preview = true;</MTIf>
            writeCommenterGreeting(commenter_name, <$MTEntryID$>, <$MTEntryBlogID$>, commenter_id, commenter_url);
            //-->
            </script>
        </div>
</MTIfRegistrationAllowed>

4.2

<div id="comment-greeting"></div>

３．form要素

onsubmit 属性値が変わりました。この変更を行わないと、コメント投稿時に「不正なエラーです」というエラーになります。

4.1

<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">

4.2

<form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">

４．hidden属性のinput要素

4つの input 要素が追加されています。parent_id は親コメントへの返信コメントのときの親コメントIDです。armor（よろい）はスパムコメント対策用のデータです。

4.1

<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<input type="hidden" name="__lang" value="<$MTBlogLanguage$>" />

4.2

<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
<input type="hidden" name="__lang" value="<$mt:BlogLanguage$>" />
<input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id" />
<input type="hidden" name="armor" value="1" />
<input type="hidden" name="preview" value="" />
<input type="hidden" name="sid" value="" />

4.2（コメントプレビュー）

<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
<input type="hidden" name="__lang" value="<$mt:BlogLanguage$>" />
<mt:IfCommentParent>
    <input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id">
</mt:IfCommentParent>
<input type="hidden" name="armor" value="1" />
<input type="hidden" name="preview" value="" />

５．input要素（名前・メール・URL）

名前・メール・URLの input 要素に、CAPTCHAを表示するための onfocus 属性が追加されています。onfocus 属性値はブログ記事／ウェブページまたはコメントプレビュー画面で起動する関数が異なります。ブログ記事／ウェブページでは入力フィールドをクリックするとCAPTCHAを表示し、コメントプレビューではデフォルトで表示します。

4.1

<input id="comment-author" name="author" size="30" value="<MTIf name="comment_preview_template"><$MTCommentAuthor encode_html="1"$></MTIf>" />
...中略...
<input id="comment-email" name="email" size="30" value="<MTIf name="comment_preview_template"><$MTCommentEmail encode_html="1"$></MTIf>" />
...中略...
<input id="comment-url" name="url" size="30" value="<MTIf name="comment_preview_template"><$MTCommentURL encode_html="1"$></MTIf>" />

4.2

<input id="comment-author" name="author" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentAuthor encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
...中略...
<input id="comment-email" name="email" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentEmail encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
...中略...
<input id="comment-url" name="url" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentURL encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />

６．input要素（情報を保存）

onclick 属性値が変わりました。またコメントプレビューでは非表示になるため、全体をMTUnlessタグで括ります。

4.1

<div id="comment-form-remember-me">
    <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
        <__trans phrase="Remember personal info?"></label>
</div>

4.2（コメントプレビューでは表示させない制御を追加）

<mt:Unless name="comment_preview_template">
    <div id="comment-form-remember-me">
        <input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="mtRememberMeOnClick(this)" value="1" accesskey="r" />
        <label for="comment-bake-cookie"><__trans phrase="Remember personal info?"></label>
    </div>
</mt:Unless>

７．返信表示用チェックボックス

コメント返信機能が標準装備されたので、返信用のチェックボックスが追加になりました。

4.1

なし

4.2

<div id="comments-open-data">
...中略...
</div>
<div id="comment-form-reply" style="display:none">
    <input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" />
    <label for="comment-reply" id="comment-reply-label"></label>
</div>

８．textarea要素

CAPTCHA表示用の onfocus 属性が追加されています。onfocus 属性値はブログ記事／ウェブページまたはコメントプレビュー画面によって内容が異なります。

4.1

<textarea id="comment-text" name="text" rows="15" cols="50"><MTIf name="comment_preview_template"><$MTCommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></MTIf></textarea>

4.2

<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>"><mt:If name="comment_preview_template"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></mt:If></textarea>

９．CAPTCHA用フィールド

4.1 で使われていたテンプレートタグがなくなり、div 要素だけになりました。

4.1

<MTIfNonEmpty tag="MTCaptchaFields">
<MTIfCommentsAccepted><MTIfRegistrationAllowed><MTElse><$MTCaptchaFields$></MTIfRegistrationAllowed></MTIfCommentsAccepted>
<div id="comments-open-captcha">
</div>
</MTIfNonEmpty>

4.2

<div id="comments-open-captcha"></div>

１０．確認用フォームボタン

name 属性値が変更になり、onclick 属性が追加されました。

4.1

<input type="submit" accesskey="v" name="preview" id="comment-preview" value="<__trans phrase="Preview">" />

4.2

<input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="<__trans phrase="Preview">" onclick="this.form.preview.value='1';" />

１１．投稿後、フォームボタンをdisableにするJavaScript（二重送信の防止）

コメントフォームの最後に script 要素が追加されました。

4.1

なし

4.2

<div class="comments-open" id="comments-open">
...中略...
</div>
<script type="text/javascript">
<!--
mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);
//-->
</script>

１２．4.1のテンプレート構成で4.2にバージョンアップする場合のコメント入力フォームサンプル

4.2 の「既定のブログ」テンプレートセットでは、「コメント入力フォーム」テンプレートモジュールがなくなり、ブログ記事・ウェブページ用のコメント入力フォーム（「コメント」テンプレートモジュール）とコメントプレビューのコメント入力フォーム（コメントプレビューテンプレートに直接記述）が独立してしまったので、4.1 の「既定のブログ」テンプレートセットの構成に対応できるよう、

ブログ記事
ウェブページ
コメントプレビュー

のテンプレートで使える「コメント入力フォーム」テンプレートモジュールを作ってみましたので、よければお使いください。
また、不具合がありましたらご連絡ください。

<mt:IfCommentsAccepted>
<div class="comments-open" id="comments-open">
    <h2 class="comments-open-header"><__trans phrase="Leave a comment"></h2>
    <div class="comments-open-content">
        <div id="comment-greeting"></div>
        <form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
            <input type="hidden" name="static" value="1" />
            <input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
            <input type="hidden" name="__lang" value="<$mt:BlogLanguage$>" />
            <mt:IfCommentParent>
                <input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id">
            </mt:IfCommentParent>
            <input type="hidden" name="armor" value="1" />
            <input type="hidden" name="preview" value="" />
            <div id="comments-open-data">
                <div id="comment-form-name">
                    <label for="comment-author"><__trans phrase="Name"></label>
                    <input id="comment-author" name="author" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentAuthor encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
                </div>
                <div id="comment-form-email">
                    <label for="comment-email"><__trans phrase="Email Address"></label>
                    <input id="comment-email" name="email" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentEmail encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
                </div>
                <div id="comment-form-url">
                    <label for="comment-url"><__trans phrase="URL"></label>
                    <input id="comment-url" name="url" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentURL encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
                </div>
                <mt:Unless name="comment_preview_template">
                    <div id="comment-form-remember-me">
                        <input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="mtRememberMeOnClick(this)" value="1" accesskey="r" />
                        <label for="comment-bake-cookie"><__trans phrase="Remember personal info?"></label>
                    </div>
                </mt:Unless>
            </div>
            <div id="comment-form-reply" style="display:none">
                <input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" />
                <label for="comment-reply" id="comment-reply-label"></label>
            </div>
            <div id="comments-open-text">
                <label for="comment-text"><__trans phrase="Comments">
                <mt:IfAllowCommentHTML><__trans phrase="(You may use HTML tags for style)"></mt:IfAllowCommentHTML></label>
                <textarea id="comment-text" name="text" rows="15" cols="50" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>"><mt:If name="comment_preview_template"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></mt:If></textarea>
            </div>
            <div id="comments-open-captcha"></div>
            <div id="comments-open-footer">
                <input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="<__trans phrase="Preview">" onclick="this.form.preview.value='1';" />
                <input type="submit" accesskey="s" name="post" id="comment-submit" value="<__trans phrase="Submit">" />
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
<!--
mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);
//-->
</script>
</mt:IfCommentsAccepted>

Comments [11] | Trackbacks [1]

Movable Type 4.2 テンプレートセット（フッタ付きリキッドレイアウト対応）

September 2,2008 1:55 AM
Category：[4.2, テンプレートセット]
Tag：[4.2, MovableType, TemplateSet]
Permalink

Movable Type 4.2 用のテンプレートセット（スタイル対応版）にフッタ付きリキッドレイアウトを追加したバージョンの配布を開始します。

これまで配布していたテンプレートセットのリキッドレイアウトは、CSSレイアウトの構造上、背景つきのフッタを表示させると、フッタの表示がサイドバーに重なってしまうという欠点があったため、簡易なテキストのみをフッタとして中央カラムに表示していました。

今回、リキッドレイアウトについては、ネガティブマージンを利用したCSSレイアウトに変更したので、背景つきのフッタもサイドバーに重ならずに表示させることができると思います。

今回追加したリキッドレイアウトは以下の 3 種類です。

3カラムリキッド（左右サイドバー）

3カラムリキッド（右サイドバー）

2カラムリキッド（右サイドバー）

表示は、Windows XP + IE6/Firefox 2/Oprea 9/Safari 3 で確認しています。

なお、ネガティブマージンによるリキッドレイアウトについてはファイルサイズが大きくなると動作が重たくなる可能性があります。以前、当ブログでもこの手法を用いたレイアウトで一度デザインを変更したのですが、IE6 でファイルサイズの大きなページでは実用に耐える表示ができなかったため、一週間ほどで取りやめた経緯があります。

そういう経緯に加え、CSSを作りこむ余裕もなく、リキッドレイアウト+ネガティブマージンによるフッタ付きのCSSレイアウトについては積極的ではなかったのですが、IE7 や FireFox、Safari などのモダンブラウザが主流になり、それらでは問題なく表示できるはずですので、公開することにします。
ただし、動作の保障は致しかねますので、ご利用に関してはご自身の責任でお願い致します。

１．テンプレートセットのダウンロード

「4.2 スタイル対応版（フッタ付きリキッドレイアウト対応）」のテンプレートセットアーカイブを、下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

２．テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

また、mt-static/plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の mt-static/plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

プラグインの一覧

３．テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

ブログ管理画面

右下にある「ブログのテンプレートを初期化」をクリック。

ブログのテンプレートを初期化

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

新しいテンプレートセットを適用

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

テンプレートセットの入れ替え開始

「テンプレートの初期化を完了しました。」が表示されれば完了です。

テンプレートの初期化完了

サイトの再構築アイコンをクリック。

サイトの再構築

「すべてのファイル」を選択して「再構築」をクリック。

再構築

「すべてのファイルを再構築しました。」が表示されたら再構築完了です。

再構築完了

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

サイト表示

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

４．スタイルの切り替え

ここではカラムレイアウトを切り替える方法を説明します。

ブログ管理画面より「デザイン」→「スタイル」をクリック。

ブログ管理画面

「既定のスタイル」の左側にある + マークのアイコンをクリック（「既定のスタイル」の部分は選択状態によって異なります）。

アイコンをクリック

開いたウィンドウに小粋空間テンプレートセットをインストールしたスタティックディレクトリのテーマURLを入力。

テーマURLを入力

具体的には、次のような URL になります。

http://[user-domain]/mt-static/plugins/KoikikukanTemplateSet/themes/

赤色の部分は、MT のスタティックディレクトリ（mt-static ディレクトリがある位置）までの URL を設定してください。

正しい URL であれば、次のような画面になるので、表示されたサムネイル画像をクリック。

サムネイル画像

右側に大きな画像が表示され、その下にレイアウト選択用のセレクトボックスが表示されます。

セレクトボックス

リキッドレイアウトは次のものから選択してください。

3カラムリキッド（左右サイドバー）：layout-three-column-liquid
3カラムリキッド（右サイドバー）：layout-three-column-liquid-right
2カラムリキッド（右サイドバー）：layout-two-column-liquid-right

テンプレート

選択後、「デザインを適用」をクリック。

デザインを適用1

「テーマを適用しました。レイアウトも変更されたので、再構築する必要があります。設定を有効にするために再構築してください。」と表示されるので、ブログ全体を再構築してください。

デザインを適用2

スタイルが切り替わりました。サイドバーの内容もテンプレート編集画面で入れ替える必要はありません。

切り替え後のテンプレート

５．スタイルの編集

スタイルを変更する場合は、インデックステンプレートにある、「スタイルシート（styles-site.css）」を編集してください。

Comments [31] | Trackbacks [2]

JavaScript を無効にしてコメント投稿を可能にする

September 1,2008 12:03 AM
Category：[JavaScript, コメント]
Tag：[Comment, JavaScript, MovableType]
Permalink

Movable Type 4.2 で JavaScript を無効にした状態でコメント投稿ができるようにするためのカスタマイズです。ご質問を頂いたので本エントリーにて情報展開致します。

単純にブラウザの JavaScript を無効にしてコメントを投稿すると、次のように「不正な要求です」というエラーになります。

コメント投稿エラー

JavaScript オフの状態でコメント投稿ができるようにするには、コメントフォームにある下記の1行を削除します。

<input type="hidden" name="armor" value="1" />

補足ですが、コメントを受け付けられる状態にしている場合、JavaScript を無効にすると、コメントフォームが無条件に表示されます。サインインやCAPTCHAも表示されません。登録/認証の設定で、「認証なしコメント」のチェックを外していても投稿可能です。

コメントフォーム

Comments [2] | Trackbacks [1]

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

CSS でヘッダーに画像を表示する for Movable Type 4

１．基本

１．１ ヘッダーの (X)HTML マークアップ

１．２ ヘッダーの CSS

１．３ プロパティの説明

２．デフォルトテンプレートに画像を表示する

２．配布テンプレートに画像を表示する

４．リキッドレイアウトの場合

５．画像が垂直方向に収まらない場合

６．ブログタイトルの位置を補正する

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

６．２ 配布テンプレートの場合

FeedBurner アカウントをGoogle アカウントに移行する

１．はじめに

２．アカウント移行までの経緯

３．アカウント移行の申請

４．アカウント移行後の FeedBurner について

５．アカウント移行後のフィード向け Adsense 設定

６．リダイレクトについて

７．広告の表示確認

渋谷・東急百貨店の「なにわ うまいもん市」

配列に

MTInclude タグによる SSI（サーバサイドインクルード）不要なインデックステンプレートのモジュール化

１．概要

２．メリット・デメリット

３．具体的なカスタマイズ例

4．デフォルトテンプレートで「最近のブログ記事」などをすべてのページに表示する

５．トラブルシューティング

週刊東洋経済「グーグル10年目の大変身」

システムテンプレートとその他のテンプレートを振り分ける

１．システムテンプレートとその他のテンプレートで処理を振り分ける

２．システムテンプレートをさらに振り分ける

WordPress逆引きデザイン事典[2.X対応]

Serene Bach カテゴリーのプルダウン化プラグイン v3.00

１．改善点

２．ダウンロード

課題表の

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。

RebuildIndexFilter プラグイン v0.06

Movable Type 4.2 テンプレートセット修正

１．問題点

２．原因

３．対処

VisibleCustomFieldImage プラグイン v0.10

１．プラグインのダウンロード

２．プラグインのアップロード

３．使い方

フォルダアーカイブとフォルダアーカイブ一覧を作る

１．フォルダアーカイブの作成

１．１ WriteToFile プラグインのダウンロード

１．１ フォルダアーカイブ用テンプレートの作成

１．２ フォルダアーカイブ用テンプレートの修正1

１．３ フォルダアーカイブ用テンプレートの修正2

２．フォルダアーカイブ一覧の作成

３．注意事項1

４．注意事項2

RebuildIndexFilter プラグイン v0.03

年別アーカイブを利用した月別アーカイブの年別表示

１．基本形

２．ツリー化 + 折りたたみ

３．参考・関連記事

４．その他

毎日コミュニケーションズから

RebuildIndexFilter プラグイン v0.02

CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）

１．ドロップシャドウの仕組み

２．配布テンプレートによるカスタマイズ

２．１ ドロップシャドウ用画像のダウンロード

２．２ テンプレートの修正

２．３ スタイルシートの修正

RebuildIndexFilter プラグイン

１．主な機能

２．プラグイン作成の経緯

２．価格

３．プラグインのダウンロード

４．インストール

５．使用方法（本格版）

６．使用方法（簡易版）

７．その他

１．１ヘッダーの (X)HTML マークアップ

１．２ヘッダーの CSS

１．３プロパティの説明

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

６．２配布テンプレートの場合

渋谷・東急百貨店の「なにわうまいもん市」

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。

１．１フォルダアーカイブ用テンプレートの作成

１．２フォルダアーカイブ用テンプレートの修正1

１．３フォルダアーカイブ用テンプレートの修正2

２．１ドロップシャドウ用画像のダウンロード

２．２テンプレートの修正

２．３スタイルシートの修正

チャレンジ！　Movable TypeをCMSとして使ってみよう！（第4回　テンプレートモジュールを読み込ませる／head要素の中身を作る）

３．１「MetaWeblogとAtomAPIのみ対応しています」というエラーになる

３．２「ログインが不正です。」というエラーになる

5位：統計数字を疑う　なぜ実感とズレるのか？

5位：パワーサポートエアーパッドソール for MX レボリューション PAS-71