「Webデザインの新しいルール Movable Type 4.x」について(その3:カスタマイズ)
半月に一度ペースでお送りしている「Webデザインの新しいルール Movable Type 4.x」の第3回目のプロモーションです。
現在、校正の真っ只中で、丸1日家に閉じこもってゲラと睨めっこしています。
執筆時点でキャプチャした画面は Beta7 辺りのもので、正式版の管理画面と微妙に異なっているので、ほぼ全ての画面を再キャプチャしている状態です。また MT4 が出る前に書いた部分は MT3 の内容になっているので、ほぼ全面見直しという状態です。
私が担当させて頂いたページは約200ページあり、先週の土曜日から開始して、1日20~30ページのペースで進んでます。来週月曜日が初校の締め切りで、今のペースではギリギリになりそうです。
ちなみに現在の発売予定は10月16日(火)です。また、他に数冊併せてシリーズで出版されると以前書きましたが、今のところこの1冊のみです。
その3:カスタマイズ
書籍のメインコンテンツのひとつであるテンプレートのカスタマイズは、どちらかと言えば実用的なものを主体にしています。ページのナビゲーションやユーザビリティに着目したものが多く含まれています。
企業サイトにも適用できるカスタマイズを松永さんが担当され、私はその路線で、企業サイト・個人サイトどちらでも使えそうな具体的なカスタマイズを担当しています(デザインはブログから離れていませんが)。
またテンプレートタグがMT4でかなり機能拡張されたので、PHP や JavaScript でこねくりまわしている部分を MT タグオンリーに直したりして、新しいタグの使い方も少しだけ披露させて頂いてます。
また、PHP化やダイナミック・パブリッシング、モジュール化といったパフォーマンスに関する内容もあり、さらに、MT4 で追加された管理画面での分かりにくいところ等もできるだけ噛み砕いて解説しているつもりです。途中でバージョンが上がって画面が変わらないことを祈ってます。
またスタイルを変更するカスタマイズでは、CSSの変更前後のコードを掲載しているだけですが、編集者の方と打ち合わせて、プロパティに対応する画面も掲載して分かりやすくしようと、この期に及んで企んでいます。
そういう訳で、おそらくここ数日が佳境なので、コメントのご返事は全くできないと思います。申し訳ありません。
関連記事:
Movable Type 4 のバックアップ機能
Movable Type 4 ではブログ全体をバックアップできる「バックアップ機能」が搭載されました。現在校正中の「Webデサインの新しいルール Movable Type(仮称)」でも詳しく解説していますが、設定項目がやや分かりにくいので、本エントリーで少しだけ触れておきます。
1.ブログのバックアップとシステム全体のバックアップ
バックアップは、ブログのバックアップとシステム全体(複数ブログを運営している時に一度でバックアップできる)のバックアップのいずれかを選択することができます。
どちらも、システムメニューの「ツール」→「バックアップ」を選択し、ブログを特定したい時は、「バックアップするブログを選択」でブログを選択します。

が、ブログ単体のバックアップをするのであれば、ブログの管理メニューにある「バックアップ」を利用した方がいいと思っています。こちらであればブログを選択する必要はありません。

このメニューに辿り着くにはダッシュボード右にある「ショートカット」の「インポート」→「バックアップ」で進んでください。
ベータ版の途中までは、このメニューには一番下の「ツール」から進めたのですが、正式版では意図的に進めなくなっています(ツールで進めるのはログのみ)。復元がシステムメニューからしか行えないので、もしかしたらブログ単体のバックアップメニューはなくなるのかもしれません。
2.圧縮フォーマットと出力ファイルのサイズについて
「圧縮フォーマット」と「出力ファイルのサイズ」の関係がちょっと分かりにくいので、先に解説しますと、「出力ファイルのサイズ」は「圧縮しない」を選択した時のみ有効になります。この設定項目についてはユーザビリティがいずれ改善されるでしょう。
さて、圧縮フォーマットは OS によって異なり、Linux では tar.gz、Windows では zip になるみたいです。
ラジオボタンから「圧縮フォーマット」を選択した場合、つまりバックアップデータを圧縮する場合は、全てのバックアップデータをひとつのアーカイブファイルにしてダウンロード画面に移行します。
復元する時はこのアーカイブファイルを指定するだけで、解凍する必要はありません。
「圧縮しない」を選択した場合は、「出力ファイルのサイズ」にかかわらず、バックアップデータが /tmp に作成され、画面下にバックアップされたファイルの一覧が表示されます(下)ので、それらをローカル PC にダウンロードします。「ファイルのアップロード」機能を利用してアップロードしたアイテム(ここでは jpg/png)等もバックアップされます。

アイテム類がなければ、ここで生成されるのは、マニフェスト(manifest)ファイルとXMLファイルのみです。バックアップの実体はXMLに含まれ、マニフェストファイルはバックアップファイルのXMLの一覧が記述されているだけです。
XML ファイルがひとつしかないとマニフェストの意義がわかりづらいのですが、上記は、「出力ファイルのサイズ」で「分割しない」を選択した動作で、下が、「出力ファイルのサイズ」で「300KB」を選択したものです(上記と異なるブログなのでアイテムの表示が異なりますが無視してください)。

この例では(画面上は分かりませんが)XML ファイルが 300KB 単位に分割されています。分割対象となるファイルは XML のみで、サイズは 300KB ぴったりではなく大体です。
また XML ファイルが指定したサイズを超える場合のみ分割されます。

マニフェストファイルには、このXMLファイルの一覧が記述されています(下はマニフェストファイルの中身)。
<manifest xmlns='http://www.sixapart.com/ns/movabletype'>
<file type='backup' name='Movable_Type-2007-08-29-16-55-32-Backup-1.xml' />
<file type='backup' name='Movable_Type-2007-08-29-16-55-32-Backup-2.xml' />
<file type='backup' name='Movable_Type-2007-08-29-16-55-32-Backup-3.xml' />
<file type='asset' name='tea.jpg' asset_id='5' />
</manifest>
このファイルは何に使うのか?という話ですが、「圧縮しない」を選択して作ったバックアップで復元する時には、最初にこのマニフェストファイルを指定します。
指定されたマニフェストファイルには XMLの一覧、つまりバックアップの実体が書かれているので、システムがこの内容を読み取り、復元時に「次はこのXMLファイルをアップロードしてください」というウィザードのように進めることができる、という訳です(下)。

圧縮した場合は、これらの面倒な作業はシステムが勝手に行ってくれます。またどちらも含まれる内容は全く同じものです(アーカイブする・しないの違いだけ)。
3.一時ディレクトリの変更について
「圧縮しない」でバックアップすると、/tmp 配下にバックアップが作成されます。バックアップ機能のメッセージにも書かれていますが、公開すべきではない情報も含まれています。言い換えると、XML ファイルはテキスト形式なので、管理情報が丸見えです(パスワードは暗号化されている模様)。

このメッセージでは「一覧に表示されたファイルを/tmpディレクトリからダウンロードした後、すぐに削除することを忘れないでください。」と書かれていますが、サーバによってはアクセス制限で FTP ツールでは /tmp に移動できない場合があります(ただしこのエリアは周期的に削除されるはず)。
その問題とは別に、バックアップファイル名が全世界でユニークな名称ではないようなので、共有タイプのサーバの場合、衝突する可能性がないとは言い切れません(権限はオーナーだけなのでどのような動作になるか分かりませんが)。
上記を踏まえて、バックアップを分割しない方法で保存する場合は、事前に mt-config.cgi の末尾の行に、一時ディレクトリを自身のディレクトリにする設定(下記)を追加することをお勧めします。
TempDir [一時ディレクトリのパス]
[一時ディレクトリのパス]にはサイトパスの末尾に /tmp を加えた内容を記述すると良いでしょう。/temp とかでは、ルートのディレクトリにアクセスしようとするため、エラーになります。
また、mt-config.cgi の設定だけではディレクトリは自動生成されません。FTP ツールで tmp ディレクトリを追加しましょう。
tmp ディレクトリは Movable Type 4 のフォルダ機能を使って作成していいかもしれませんが、ディレクトリの性質が異なる(tmpはバックアップすべきエリアではない)ので、その辺りはご自身で見極めてください。
4.その他
バックアップ機能は大変良いと思っているのですが、このエントリーはバックアップ機能を保証するものではありません。
バックアップ機能のご利用に際してはご自身の責任で行ってください(可能であれば他のバックアップ方法と併用することを推奨します)。
Movable Type 4 にアップグレードするメリット
Movable Type 3.x を使っている方対象に、Movable Type 4 へアップグレードするメリットをまとめてみました(今更感がありますが)。
主観的な見解で、これはいいと思ったものから順に並べています。
1.バックアップ/復元機能
Movable Type 3 まではエントリーの書き出しや、データベースのバックアップ等で、ブログのバックアップを行っていましたが、Movable Type 4 ではブログ全体のバックアップ&復元機能が追加されました。
執筆のために何度かバックアップ機能については動作を確認しましたが、エントリーからテンプレート、アイテム等、全てのデータを完璧に復元してくれます。
私のブログはまだ 3.21-ja で、データベースのバックアップも正常に行えないため、エントリーの書き出しを周期的に行っている状態ですが、この機能さえあれば万が一の時も安心ですし、アップグレードする代わりに「新規インストール+復元」という選択肢も使えるので、時間に余裕ができれば Movable Type 4 にアップグレードしたいと思います。
2.ウェブページ作成
Movable Type 3 までは単一のウェブページを作るには、インデックステンプレートを利用するか、カテゴリーを割り当てる(そして、そのカテゴリーを全カテゴリーから除外する)るしか方法がありませんでした。
私はインデックステンプレートを利用しているのですが、テンプレート内に直接コンテンツを書く必要があり、エントリーの自動改行機能も使えず、全て手動で(X)HTMLマークアップを記述するという面倒さがありました。
Movable Type 4 では「ウェブページ」という機能が追加されたので、エントリーと同じ環境でコンテンツを作成できるのが魅力です。
3.コメント返信機能
Movable Type 3 までは運営者自身がコメントする時にはブログのエントリーアーカイブから投稿する必要がありましたが、Movable Type 4 では管理画面から返信することができます。
実際の運用では使っていませんが、かなり便利な機能ではないかと思います。
4.アイテム管理
Movable Type 3 までのファイルのアップロード機能は、アップロードはできましたがその後の管理はできません。したがって不要になるとFTPツールで削除するといった手間がありました。
Movable Type 4 では「アイテム」という機能が追加され、Movable Type を利用してアップロードしたアイテム(ファイル)は Movable Type の管理下に置かれます。ファイル名を変更することはできませんが、削除やタグの付与が可能です。
またテンプレート・タグを使うことでアイテム表示を制御することもできるようになりました。感覚的ですが、もしかしたらフォトログがかなり作りやすくなるかもしれません。
5.フォルダ管理
Movable Type 3 まではフォルダ(ディレクトリ)の管理機能はありませんでしたが、4項のアイテムと同様、Movable Type で作成したフォルダは Movable Type で制御できるようになります。
フォルダにも、対応するテンプレート・タグが追加されたので、これも感覚的ですが、ディレクトリ一覧およびファイル一覧によるナビゲーションのサイトを作れるかもしれません。
6.ブログ記事削除時の動作
Movable Type 3 ではブログ記事の削除やファイル名変更で、対応する(X)HTMLファイルの削除が完璧でなかったのですが、Movable Type 4 ではかなり改善されています。全自動とまではいきませんが、再構築が必要なものについては必ず再構築を促すようになっています(多分)。
7.ポータル・ブログ
MultiBlog プラグインがプリインストールされ、Movable Type Enterprise のポータル・ブログ(複数のブログをまとめて表示する代表ブログ)機能が MT4 にも搭載されました。MT4 のドキュメントにはまだ掲載されていないので Enterprise マニュアルの名称で「ポータル・ブログ」と書いてます。
8.テンプレート・タグ
Movable Type 4 では、上記のウェブページやアイテム・フォルダ関連のタグを含め、約150近いタグが追加されています。
特に条件判定タグの拡張と、いわゆる Getter/Setter 系 MT タグの組み合わせで、これまでテンプレート・タグだけではできなかった(=PHP や JavaScript に依存していた)処理ができるようになったことが大きなメリットではないかと感じています。
Google マップの埋め込み HTML でふきだしを消す方法
「Google マップの貼り付け用 HTML でふきだしを消す方法はありませんか?」というご質問を頂きましたので、紹介致します。
2009.01.07 「Google マップの埋め込み HTML でふきだしを消す方法(新)」をエントリーしました。
ちなみに、ふき出しの右上にある×印をクリックして、ふき出しを消した状態でHTMLコードを取得しても、貼り付けたブログではふき出しが表示されてしまいます。
これを消す方法は簡単で、まず Google マップで検索結果が表示されます。

表示結果の中央地点にある緑色の矢印を右クリックして「検索結果をクリア」を選択。

これでふき出しが非表示になったので、この状態で右上の「このページのリンク」をクリック。

このHTMLコードを取得してご自身のブログに貼り付ければふき出しは表示されません。

ふき出し以外のマークも、このワザを使えば消すことができます。

宣伝ですが、埋め込みHTMLのマークアップが気にいらない方は「Google マップの貼り付け用 HTML を valid にする」スクリプトをご利用ください。
このスクリプトにも適用しようと企んだのですが、URIに含まれるクエリーがかなり異なるので挫折しました。
Movable Type 4 テンプレート不具合と修正のお知らせ
現在配布中の Movable Type 4 テンプレートに不具合がありました。
事象は「Safari でブログ記事アーカイブ(エントリーアーカイブ)を表示すると、表示が崩れる(フッタがヘッダの直下に表示され、サイドバーがコンテンツの下に表示される)」というものです。
原因はテンプレートモジュール「コメント入力フォーム」の(X)HTMLマークアップ誤りです。ご利用中の皆様には大変ご迷惑をおかけして申し訳ございません。この場をお借りしてお詫び申し上げます。
また情報を提供下さった皆様にお礼申しあげます。ありがとうございました。
現在当サイトで配布中の Movable Type 4 用のテンプレートをご利用の方は、
- 「コメント入力フォーム」テンプレートをダウンロードして差し替え
- 「コメント入力フォーム」テンプレートを手修正
のいずれかを行ってください。
なお「Movable Type テンプレート」にあるダウンロードアーカイブは修正済です。
1.「コメント入力フォーム」テンプレートをダウンロードして差し替える場合
下記のリンクをクリックして「コメント入力フォーム」テンプレートをダウンロードし、解凍した内容を、現在設定されているテンプレートモジュール「コメント入力フォーム」の内容と入れ替えてください。
2.「コメント入力フォーム」のテンプレートを手修正する場合
「コメント入力フォーム」テンプレート編集画面で下記の修正を行ってください。
修正前
:
<div id="comment-form-remember-me">
<p>
<label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="4" accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" />
ログイン情報を記憶</label>
</p>
:
修正後(青色で示す div 終了タグを追加)
:
<div id="comment-form-remember-me">
<p>
<label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="4" accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" />
ログイン情報を記憶</label>
</p>
</div>
:
ミニブログ「フィークル」
最近流行のミニブログ「フィークル(Feecle)」の紹介です。
フィークルは2009年6月30日にサービスを終了致しました。
以前、メールで日本サイワールド株式会社の方より「フィークル」のご案内を頂いていたのですが、ご返事も差し上げておらず、大変失礼致しました。この場をお借りしてお詫び申しあげます。
私よりご存知の方が多いと思いますが、ミニブログという名前の通り、仰々しい記事を投稿するのではなく、ひとりごとみたいな短い文章を投稿し、それに対して一言コメントをつけられるという、ゆるやかなコミュニケーションを得られるサービスです。

ミニブログサービスとしては、他に「Haru.fm」や「Timelog」「もごもご」等があり、いずれも日本語版「twitter」といったところでしょうか。
サイトのトップページ(上)を拝見すると、投稿量の多さはもちろんですが、それよりも投稿に対するコメントの量が半端ではありません。最新の投稿をみても、コメントがついていない記事がほとんど見当たりません。皆さん待ち構えているのでしょうか。(笑)
いずれにしても、反応があるという意味では投稿する楽しみはありそうです。
自分のブログで手一杯という状態なので、あまりあれこれ手を出してないのですが、フィークルの印象は「mixi 日記」を不特定多数に公開しているようなイメージです。
会員登録に必要なのはメールアドレスとIDとパスワードのみなので誰でも簡単に始めることができます。
私も一応登録させて頂いてますので、いずれ軽くつぶやいてみたいと思います。
ジレットの男性用カミソリ「フュージョン5+1」
「舌でなぞるような優しい剃り心地」の「ジレット・フュージョン5+1」の宣伝です。
剃り心地の秘密は、5枚刃に加えた微小波動により肌への摩擦を和らげ、刃の滑りをなめらかにしているところにあるようです。
85%の人が「以前使ったものより肌に優しい」というアンケートの結果も出ています。
下記の再生ボタンをクリックするとネットCMを見ることができます(音声つきですのでご注意ください)。再生後に公式サイトへジャンプすることができます。
動画を見終わった後の Flash が凝ってますね(私の趣味ではありませんが…)。
Movable Type 4 におけるインポート・エクスポート機能の改善
Movable Type 4 のインポート・エクスポート機能では、新たに下記のデータが引き継がれるようになりました。
- ファイル名(BASENAME)
- タグ(TAGS)
特にファイル名が引き継がれるようになったのは大きなメリットです。
1.Movable Type 3.x での問題
Movable Type 3.x でのエクスポート(書き出し)機能ではファイル名が書き出されないため、インポート(読み込み)時にエントリー・アーカイブ(MT4ではブログ記事アーカイブ)のファイル名が付与され直されます。
デフォルトのアーカイブファイル名は、エントリータイトルにしたがってファイル名を付与することになっているため、エントリータイトルが全て日本語の場合は post.html、post_1.html、post_2.html … というファイル名が付与されます。
また、一度公開したエントリーを削除し、その後新たに公開したエントリーには削除したファイル名が付与されます。例えば、post_3.html までファイルがある状態で、post_2.html を削除すると、次の(タイトルが全て日本語の)エントリーに付与されるファイル名は post_4.html ではなく、post_2.html となります。
このような運用状態で「エクスポート(書き出し)→インポート(読み込み)」を実施すると、過去の(タイトルが全て日本語の)エントリーに対し、post.html、post_1.html、post_2.html …と付与されるため、バックアップ前と同一のファイル名を付与できないという問題がありました。
そういう訳で、Movable Type 3.x では「ファイル名にはタイムスタンプを利用する」という手法が一般的だった訳です(DBのバックアップを利用するのであればこのような考慮は不要)。
2.Movable Type 4 でのファイル名
ファイル名がインポート・エクスポート機能で引き継がれるようになったことと、それ以前にブログのバックアップ機能が盛り込まれたので、Movable Type 4 ではタイムスタンプを利用する作戦は不要になり、任意のファイル名を自由に付与できるようになります。
余談ですが、Movable Type 4 では、ブログ自体のバックアップはバックアップ機能を利用し、インポート・エクスポート機能は異なるブログ間の移行用、というのが本来となるでしょう。
とはいえ、エントリーデータはバックアップとあわせて周期的にエクスポートしておいた方が安全かもしれません。
3.Movable Type 4 でのエクスポートファイルフォーマット
参考までに、Movable Type 4 でエクスポートされる1つのブログ記事のフォーマットは以下のようになります。青色部分が新たに追加されたフォーマット(ファイル名/タグ)です。
フォーマット(CONVERT BREAKS)も種別が増えています。サブカテゴリーは残念ながら引き継がれません。
AUTHOR: hogehoge
TITLE: Movable Type 4.0 へようこそ!
BASENAME: movable_type_40
STATUS: Publish
ALLOW COMMENTS: 0
CONVERT BREAKS: richtext
ALLOW PINGS: 0
PRIMARY CATEGORY: カスタマイズ
CATEGORY: movable type
CATEGORY: カスタマイズ
DATE: 08/09/2007 12:41:09 AM
TAGS: 4.0,mt
-----
BODY:
このブログ記事は、Movable Type 4のインストール完了時に、システムによって自動的に作成されたブログ記事です。 新しくなったMT4の管理画面で、早速ブログを更新してみましょう。
-----
EXTENDED BODY:
-----
EXCERPT:
-----
KEYWORDS:
-----
COMMENT:
AUTHOR: mtbook
EMAIL:
IP:
URL:
DATE: 08/09/2007 12:41:09 AM
このコメントは、Movable Type のインストール完了時に、システムによって自動的に投稿されたコメントです。MT のブログに投稿されたコメントが、どのように表示されるのかを、ご確認いただけます。
-----
4.MT3 → MT4 の移行でエクスポート・インポートを利用する場合
MT3 → MT4 を通常の手順でアップグレードする場合は問題ありませんが、(デフォルト設定のファイル名で)エクスポート・インポートによって MT4 に移行する場合、MT3 のエクスポートフォーマットではファイル名が引き継がれません。
ファイル名を引き継ぐには下記の記事を参考にすると良いでしょう。
5.注意事項
Movable Type のエクスポートデータフォーマットのセパレータ(フィールドの区切り文字)には連続したハイフンが使われています。
したがって連続したハイフンを本文で用いると正常にインポートできなくなる可能性があります。本文には連続したハイフンを使わないようにしましょう。
なお、この記事ではハイフンを「-」で実体参照しています。
このサイトでも、頂いたコメントに連続したハイフンが含まれていたことがあり、そのため正常にバックアップできない事象が何度かありました。
ということで、コメントにもハイフンはご使用にならないでください。
Movable Type 4.01 Beta リリース
Movable Type 4.01 Beta がリリースされました。
So we are happy to announce the release of Movable Type 4.01 Beta 1 which has three primary goals:
- To address high priority issues found by users following the release of Movable Type 4.0; the majority of these issues revolving around issues users faced with upgrading from previous versions of Movable Type and migrating to MT4 from other blogging platforms.
- To make the necessary changes to the core application in support of the upcoming availability of the Movable Type Enterprise Solution.
- To support developers who are in the process of upgrading their existing plugins and developing entirely new plugins for the MT4 platform.
ダウンロードのページより日本語対応版もダウンロードできます。
差分をみたところ変更ファイルが多い(約90)ことと、ベータ版であることから差分の公開は見送りたいと思います。
Google マップの貼り付け用 HTML を valid にする
Google マップをブログ等に貼り付ける「埋め込み HTML」の提供が開始されましたが、その HTML を valid にするスクリプトを公開します。
1.埋め込み HTML の利用方法
埋め込み HTML 自体の利用方法ですが、まず Google マップで任意の地図を表示させ、「このページへのリンク」をクリックします(スクリーンショット右上)。
リンクをクリックすると、HTMLコードがすぐ下に表示されます(下)ので、
「HTML を貼り付けてサイトに地図を埋め込みます」の下に表示されている、
<iframe width="425" height="350" ~
のコードをマウスコピーして、それをブログの投稿画面に貼り付ければOKです。
2.問題点
埋め込み HTML で使われている iframe タグは HTML4.01 Strict・XHTML1.0 Strict では未定義、XHTML1.1 では廃止されていることと、以下に示す問題のため、この HTML をブログに埋め込むと not Valid になる可能性があります。
- & が実体参照(&)されていない
- br 要素の"/"の前に空白がない
3.変換スクリプト
ということで、埋め込み用 HTML を valid にするスクリプトを作成してみました。
上のテキストエリアに Google マップ埋め込み用 HTML を貼り付けて、 object または iframe + object のボタンをクリックすると下のテキストエリアに valid な HTML が表示されますので、それをブログ等に貼り付けてください。
object 要素だけではどうもクロスブラウザにならないようです(IE で正常に表示されない等)ので、現状では iframe + object(条件付きコメント利用)を推奨します。
Windows XP + IE6/IE7/FireFox2/Opera9/Safari3で動作確認し、Markup Validation Service で valid になることを確認していますが、不具合等ございましたらご連絡ください。
参考までに、このスクリプトでは下記の変換を行っています。
- iframe 要素を object 要素に変更
- src 属性を data 属性に変更
- object 要素で不要な属性(frameborder/scrolling/marginheight/marginwidth)を削除
- object 要素に type="text/html" を追加
- object 要素の「要素の内容」に「non data」を挿入
& を & に置換(object要素内のみ)br 要素に半角空白を付与
4.関連・参考
2008.09.29 Google の出力コードが変更されていたので、ツールを修正しました(frameborder/scrolling/marginheight/marginwidthが削除されない不具合の対処、&の変換削除など)。 2009.02.07 IEでGoogle マップ以降が表示されなくなる不具合を修正しました。クリスタルガイザースパークリング
「クリスタルガイザースパークリング」はミネラルウォーターで有名な「クリスタルガイザー」の炭酸版、いわゆる「炭酸水」です。
炭酸水の有名どころとしてはキリン「NUDA」がありますが、個人的に「クリスタルガイザースパークリング」の味が気に入って、ここ数ヶ月愛飲しています。
飲み続けている理由には「美味しい」「飽きない」ということの他に、元々コーラやサイダー等の炭酸は苦手(胃が膨れる感じ)だったのですが、炭酸水はなぜか全く苦になりません。かといって炭酸が弱い訳ではなく、爽快な喉ごしです。
「1日の水分摂取量は多い方が良い」と言われる昨今、ミネラルウォーターで長続きしない時は炭酸水がいいかもしれません。
さて本題はここからで、スーパーやコンビニで売っている「クリスタルガイザースパークリング」はレモン味(下)が大半です。自宅近辺や出先のコンビニ等、探してみましたが、どこもレモン味オンリーでした。
![]() | (お徳用ボックス) クリスタルガイザースパークリングレモン 500ml ×24本 大塚ベバレジ 売り上げランキング : 24 Amazonで詳しく見る by G-Tools |
実はこのシリーズにはライム味(下)があります。味はレモン味よりもあっさりとした印象です。ラベルはレモン味がイエロー系、ライム味はグリーン系ですが、パッと見はかなり紛らわしいです。
![]() | (お徳用ボックス) クリスタルガイザー スパークリングライム 500ml×24本 クリスタルガイザー 売り上げランキング : 336 Amazonで詳しく見る by G-Tools |
最初に飲んだ炭酸水がたまたまこれだったというのもありますが、私はこのライム味が大変気に入っています。
両者の「売り上げランキング」から、レモン味が美味しいのか、ライム味が知られていないのかは定かではありませんが、興味のある方は是非一度お試しになってみてください。
ショッピングセンターでは千葉・海浜幕張の「カルフール幕張」で取り扱ってます。もしかしたらイオンなら扱っているのでしょうか(探していないので分からず)。
Movable Type のスケジュール・タスク実行(Windows 編)
Windows のタスク・スケジューラを利用した、Movable Type のスケジュール・タスク実行方法を紹介します。スケジュールタスクを実行することで、MT4 であれば指定日投稿・迷惑コメント(トラックバック)削除・公開キュー等のスケジュール処理が可能になります。
MT3 も同じ設定方法です(公開キューはMT4のみ)。
この設定は自宅サーバで Windows XP 等を利用している場合の設定方法です。レンタルサーバの場合は Linux 上で同様の設定を行います。
以下、設定手順です。
「スタート」→「設定」→「コントロール パネル」→「タスク」→「スケジュールされたタスクの追加」を選択。

タスク ウィザードで「次へ」をクリック。

「参照」をクリック。

perl プログラム(ここでは C:¥usr¥bin¥perl.exe)を選択して「開く」をクリック。拡張子を表示しない設定の場合は「perl」を選択。

日単位を選択して「次へ」をクリック。

開始時刻を設定し、このタスクの実行から「毎日」を選択して「次へ」をクリック。

表示されたユーザーのパスワードを設定して「次へ」をクリック。

「[完了]をクリックしたときに詳細プロパティを開く」をチェックして、「完了」をクリック。

ここからの設定が重要です。開いたプロパティ画面で
- 実行するファイル名:C:¥usr¥bin¥perl tools¥run-periodic-tasks
- 開始:アプリケーション・ディレクトリのパス(例はC:¥web¥mt)に書き換える
を設定し、「OK」をクリック。実行するファイル名の tools¥run-periodic-tasks の前には半角空白を入れてください。「開始」のアプリケーション・ディレクトリとは、mt.cgi があるディレクトリです。

とりあえずこれで「OK」をクリックすれば設定完了です。
ただしこのままでは日に1回しか実行されないので、実行周期を短くする場合は「スケジュール」タブの詳細設定をクリック。

オプションの詳細設定で「タスクを繰り返し実行」で間隔を設定します。継続時間は間隔より長く設定してください。
スケジュールを変更するとパスワードの設定が求められる場合があります。

作成したタスクは最初の「スタート」→「設定」→「コントロール パネル」→「タスク」→「XX」で起動することができます。

Movable Type 4 のデフォルトテンプレートで @import が表示される問題
いくつかのブログで「Movable Type 4 のデフォルトテンプレートを使用すると @import が上部に表示される」という事象が発生しているようです。
原因はデフォルトテンプレートの「ヘッダー」の7行目にある、
<$MTInclude identifier="styles" trim_to="0"$>
が展開されてしまうためですが、当サイトでは再現しませんでした。
検索してみたところ、Perl 5.8.0 のバグのようです。
この行は styles、つまり「スタイルシート(メイン)」をインクルードするのですが、「最初のN文字を取り出す」という trim_to 属性の値が 0 になっているということは、このタグでは何も表示されないのが正しい動作のところ、Perl 5.8.0 では表示されてしまうようです(7行目が何故必要かについては理解できていませんStyleCatcherで必要らしいです)。
ちなみに、8行目で、
<link rel="stylesheet" href="<$MTLink template="styles"$>" type="text/css" />
と、「スタイルシート(メイン)」を取得しているので、7行目は style 要素で括るのではなく、参照元サイトにある通り、
<MTSetVarBlock name="__null__">
<$MTInclude identifier="styles"$>
</MTSetVarBlock>
が良いでしょう。
追記:あんちもん2.Labさんの MTVoid プラグインでも同様の結果を得られます。
VOLVO「C30」
VOLVOの新型車「C30」が登場しました。
VOLVO(ボルボ)と言えば、セダンやステーションワゴンというイメージ(というか、実際にそういったラインナップしかありません)でしたが、この「C30」は2ドア+ガラスハッチゲートというリアの独特なデザインと、VOLVO伝統の安全性を両立している車、だそうです。
下記の再生ボタンをクリックするとネットCMを見ることができます(音声つきですのでご注意ください)。再生中または再生後に動画をクリックすると公式サイトへジャンプできます。
おおざっぱですいませんが、C30のラインナップは
- C30 2.4i Aktiv(285万~)
- C30 2.4i SE(348万~)
- C30 T-5(387万~)
となっています。詳細は公式サイトをご覧ください。
この動画は広告として掲載を依頼されたものです。
Ajax 月送りカレンダー(MT4版)
Movable Type 4 版の Ajax 月送りカレンダーのカスタマイズです。リアルタイムカレンダー(本日の日付の装飾)および土・日・休日表示も盛り込まれています。 |
MT4 では、MT3 で紹介した「Ajax 月送りカレンダー」とは、アーカイブマッピングの方法が異なっており、「MT4でのカスタマイズ方法が分かりません」というリクエストを頂きましたので、本エントリーにて説明致します。
Ajax 月送りカレンダーの概要は割愛します(「Ajax 月送りカレンダー」をご覧ください)。
ここではデフォルトテンプレートおよび公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。
1.スクリプトのダウンロード・アップロード
下記のスクリプトをダウンロードします。
prototype.js("Download the latest version" のリンクをクリック)ajaxCalendar.jsdayChecker.js(「2.ダウンロード」にある dayChecker.js をクリック)
ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また prototype.js も、ダウンロードしたスクリプトをメインページと同じディレクトリにアップロードしてください。
2.カレンダーテンプレート作成
注:ブログの文字コードが UTF-8 以外で運用されている場合は、2.1項のカスタマイズも併せて行ってください。
管理メニューの「デザイン」→「テンプレート」→「アーカイブテンプレート」→「アーカイブテンプレートを作成」の「ブログ記事リスト」をクリック。

次画面で下記を設定してください。
- テンプレート名(一番上のテキストフィールド):カレンダー
- ファイルへのリンク:(設定不要)
- テンプレートの内容(テキストエリア):下記のいずれか
注:テキストエリアにペーストする際はテキストエリア右上にある構文強調表示切替を「強調表示なし」を選択してから作業を行ってください。「構文強調表示」の状態でペーストするとテンプレートの内容の改行が失われます。
デフォルトテンプレートの場合
<div class="widget-calendar widget">
<h3 class="widget-header"><MTArchivePrevious><a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');"><</a> </MTArchivePrevious><$MTArchiveDate format="%B %Y"$><MTArchiveNext> <a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >></a></MTArchiveNext></h3>
<div class="widget-content">
<table summary="<MTArchiveDate format="%Y/%m">">
<tr height="15">
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
公開テンプレートの場合
<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');"><</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$>
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >></a>
</MTArchiveNext>
</caption>
<tr height="15">
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
設定後は次のような感じになります。

設定が終わったら「保存」をクリックしてください。
2.1 ブログの文字コードがUTF-8以外の場合
Ajax(XMLHttpRequest)は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1
ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。
まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。
そして、2項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。
<MTEncodeText to="utf8">
:
(カレンダーテンプレート)
:
</MTEncodeText>
本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。
3.カレンダーテンプレートを月別アーカイブに関連付け
テンプレートを保存すると、同じページの下に「アーカイブマッピング」の項目が表示されるので、「新しいアーカイブマッピングを作成」をクリック。

「種類」から「月別」を選択して「追加」をクリック。

これでカレンダーテンプレートが月別アーカイブとして定義され、カレンダー用の「パス」が表示されます。
注:「月別」欄の右側にあるチェックボックスは絶対にチェックしないでください。

次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択。

「パス」欄に下記の内容を設定して、「保存」をクリックしてください。
calendar/%y/%m/%i

下のようになればアーカイブマッピングの設定完了です。

4.日別アーカイブの追加
この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。
注:この設定を行わないと月別アーカイブの再構築で下記のエラーが表示されます。

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択。

アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

「日別」を選択して「追加」をクリック。

これで日別アーカイブが追加されました。

5.テンプレート修正
5.1 外部ファイルのインクルード
「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」をクリックし、<head>~</head> の間に下記を追加して「保存」をクリック。
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>
5.2 カレンダー表示部分の設定
「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2(またはサイドバー)」をクリックし、カレンダーを表示させたい位置に下記を追加して「保存」をクリック。
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogArchiveURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>
div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。
6.CSS修正
「デザイン」→「テンプレート」→「スタイルシート(メインまたはベーステーマ)」を選択し、下記を追加して「保存および再構築」をクリックします。
デフォルトテンプレートの場合
確認中
公開テンプレートの場合
#calendar {
margin: 5px 0 10px;
color: #444444;
}
.calendarhead {
padding-bottom: 5px;
font-size: 9px;
letter-spacing: 0.2em;
}
#calendar table {
padding: 0;
border-collapse: collapse;
}
#calendar th {
padding-bottom: 3px;
text-align: center;
font-size: 9px;
width: 23px;
}
#calendar td {
padding: 2px 0;
text-align: center;
font-size: 10px;
line-height: 120%;
}
.today {
display: block;
border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
color: #0000ff;
}
公開テンプレートの場合、すでにカレンダー関係のスタイル設定が行われており、設定の競合を避けるため、古い設定(下)を削除またはコメントアウトしてください。
/* カレンダー */
.calendarhead {
padding-bottom: 5px;
text-align: center;
color: #333;
font-size: 9px;
background: none;
letter-spacing: 0.2em;
}
#calendar table {
text-align: center;
padding: 0px;
border-collapse: collapse;
}
#calendar th {
padding-bottom: 3px;
font-size: 8px;
width: 23px;
}
#calendar td {
padding: 2px 0;
font-size: 9px;
line-height: 120%;
}
span.day {
text-align: center;
font-size: 9px;
}
span.saturday {
color: blue;
}
span.sunday {
color: #e50003;
}
td.today {
display: block;
border: 1px solid #333;
}
7.再構築
全てのページを再構築します。これでメインページ等を表示してカレンダーが表示されれば完成です。
8.ページ表示時にローディング状態を表示する場合
インチキっぽいですが、4.2項で設定した
<div id="calendar"></div>
に、例えば青色の
<div id="calendar">loading ...</div>
を追加することで、ページ描画でカレンダーが表示されるまでローディング状態を示すことができます。img タグを設定すれば画像を表示することも可能です。
月送り時は挿入した文字は表示されません。またカレンダー取得失敗の場合は表示が消えます(これは7項の設定と関連します)。
9.カレンダー取得失敗時にメッセージ等を表示する
Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。
このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ
File Not Found
を表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。
function errorProcess() {
$('calendar').innerHTML = 'File Not Found';
}
メッセージを変更したい場合はこの青色部分を修正してください。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、6項の表示がそのまま残りますのでご注意ください。
「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、6項の「loading ...」というメッセージの代わりに、カレンダータグ(通常のカレンダータグ)を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。
10.トラブルシューティング
10.1 一度も表示されない場合
カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます(全てではありませんが思いついたものを挙げておきます)。
- カレンダーアーカイブの再構築ができていない
- カレンダーアーカイブページへのパス設定が誤っている
- テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
- カレンダーアーカイブが UTF-8 で出力されていない
ご質問の前に確認していただきたいのは、
- ブラウザの[表示]-[ソース](あるいは「ソースの表示」)で、カレンダーを設定しているページのソースを表示
- 表示されたソースから下記のタグをみつけ、
getCalendar()の3番目のパラメータに設定されている URL(赤色)をブラウザに設定して実行
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/", "1", "http://user-domain/calendar/yyyy/mm/");
</script>
何も表示されない場合(404 Not Found)はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。
逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。
10.2 一度表示され、リロードすると表示されなくなる場合
クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、2項のテンプレートに埋め込んでいるアーカイブパスが誤っている可能性があります。よくあるのは次のように最後の"/"が抜けているケースです。
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/archives", "1", "http://user-domain/archives/calendar/yyyy/mm/");
</script>
これは、管理画面の [設定] - [公開] で「アーカイブの設定」にチェックをつけていて、 [アーカイブURL] の最後に "/" がない場合に発生します。
2007.08.21
2項と4項の「ブログ記事」を「ブログ記事リスト」に修正しました。
2007.11.08
5.2項のタグに一部誤りがありましたので修正致しました。
2008.02.04
typo を修正しました(Wen → Wed)。
2009.02.24
手順4の2枚目の画像を追加しました。
*1:文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。
「Webデザインの新しいルール Movable Type 4.x」について(その2:タグリファレンス)
以前お知らせした、現在執筆中の「Webデザインの新しいルール Movable Type 4.x(仮)」のプロモーション第2回目です。
その2:MTタグリファレンス
本書では、MT4で新しく追加されたテンプレート・タグを含め、約400近くあるほぼ全てのタグの簡易なリファレンスを掲載する予定です(厳密には「掲載させてください」と、出版社の担当の方にお願いをしている状態)。
MT3.35 をターゲットに執筆を開始した時、例えばエントリーの各フィールドがどの MT タグに該当するかといったような構成は考えていたのですが、「リファレンス」という壮大な計画は全く念頭にありませんでした。
ところがMT4でUIが大きく変わってしまい、その時考えていたタグ対応表がうまく適用できなくなり、それをどこかに掲載したいと考え始めたのがきっかけです。
また書籍の中では、MTタグの概要や種類、カスタマイズの章ではそこで利用しているMTタグの説明を入れていますが、執筆を進めてみると全般的にMTタグ解説のボリュームが少ないことに気づき、「どうせなら(前の対応表を発展させて)MTタグを全部掲載させよう」という考えに至りました。
全てのMT関連書籍を読破している訳ではないのですが、カスタマイズ本でタグリファレンスが掲載されているものは意外に多くないようです。かといってタグリファレンス専用の書籍ほど詳しいものが欲しい訳ではありません(というか、そんなスペースはない)。
それで、「どういうタグが書ける」とか、「あのMTタグのスペルは何だっけ?」といったレベルの要求に対応できる、概略的な情報を紙媒体で俯瞰できるものにしようと企んでます。
ちょっと残念なのは、公式サイトのタグリファレンスのMT4版が準備されていないため、正確な情報がないことです(脱稿が8月20日予定なので、それまでに公式サイトの情報が更新される見込みがなさそう)。
そんな状況で、新しいタグの多くについてはひたすらMT4のテンプレート画面にひたすら打ち込み、あるいは管理画面の設定を変更をひたすら繰り返しながら動作確認しています。それでもよく分からないものはソースコードと睨めっこしながら執筆しています。もちろん他のブログの情報も参考にさせて頂いてます。
MTを長年使っている割には動作をよく理解できていなかったものもあり(バカ)、執筆に相当時間がかかりました。そのおかげで、例えば MTIfCommentsAccepted と MTIfCommentsActive と MTIfCommentsAllowed の違い等も明確になりました。
なお公式サイトではどのようなカテゴリーでタグ振り分けられるのか分からないので、「ブログ記事」「コメント」「カテゴリ」「ウェブページ」「アイテム」「フォルダ」等、主観的に分類しています。
限られたページ数しかないため、場合によっては一部割愛されるかもしれませんが、他のページと同様、かなり力を注いだ内容になる予定です。
誌面の都合上、タグ・アトリビュートまでは無理ですが、説明の中に少しでも入れるように心がけました。
ホームページやBlogが生まれ変わる お手軽Ajaxパーツ集
「The blog of H.Fujimoto」の藤本壱さんが Ajax 本を執筆されました。
![]() | ホームページやBlogが生まれ変わる お手軽Ajaxパーツ集 藤本 壱 技術評論社 2007-08-21 Amazonで詳しく見る by G-Tools |
内容は、
- Movable Type 3.3
- Movable Type 4
- WordPress
- Serene Bach
の各ブログツールをターゲットにして、Google・Yahoo・Amazon・楽天から、はてなブックマーク・del.icio.us・Flickr・Twitter・YouTubeといった最近流行の各サービスまでを「Ajax パーツ」として組み込むカスタマイズ手順が記されたものです。
Ajax の基礎からライブラリの設定、カスタマイズの内容がブログ別に丁寧に記されているので、ビギナーの方でも設定できると思います。
- 第1章 Ajax パーツの基礎
- 1.1 Ajax の概要
- 1.2 Ajax パーツ関連のファイルをセットアップする
- 1.3 Ajax パーツの基本的な使い方
- 1.4 Movable Type 3.3 のブログで Ajax パーツを使う
- 1.5 Movable Type 4 のブログで Ajax パーツを使う
- 1.6 WordPress のブログで Ajax パーツを使う
- 1.7 Serene Bach のブログで Ajax パーツを使う
- 第2章 テンプレートのカスタマイズ方法の基本
- 2.1 テンプレートのカスタマイズの基本
- 2.2 テンプレートの基本的な記法
- 2.3 よく使う関数
- 2.4 よく使う修飾子
- 第3章 自分サイトに関する情報を表示する
- 3.1 Google PageRank を表示する
- 3.2 はてなブックマークと del.icio.us の被ブックマーク状況を表示する
- 3.3 Yahoo! の検索欄をサイトに付加する
- 3.4 ゲストブックを設置する
- 3.5 複数の Ajax パーツを組み込む
- 第4章 各種の情報を自分の Web ページに表示する
- 4.1 さまざまなサイトの RSS を読み込んで表示する
- 4.2 Google Maps を表示する
- 4.3 Flickr の写真を表示する
- 4.4 YouTube の動画を表示する
- 4.5 Twitter の情報を表示する
- 第5章 アフィリエイト等の情報を表示する
- 5.1 Yahoo! オークションに出品中の商品を表示する
- 5.2 楽天の商品を検索して表示する
- 5.3 Amazon の広告を表示する
- 5.4 ブログの記事に合った商品を表示する
こういったパーツ類は Ajax で表示することでページのレスポンスが良くなるのでお勧めです。私もサイドバーの情報の多くは Ajax を利用して表示してますので、是非お試しになってください。
実は、この本の Movable Type 3.3 / Movable Type 4 の説明で私のテンプレートをサンプルとして取り上げていただいてまして、さらに献本頂きました。
この場をお借りしてお礼申しあげます。ありがとうございました。
FiveStarRating プラグイン
Movable Type 4 のサンプルプラグイン FiveStarRating を試してみました。
確認できたところまでご紹介致します。
1.プラグインのインストール
extras/examples/plugins/FiveStarRating/mt-static/plugins/FiveStarRating をフォルダごとスタティック・ディレクトリ(mt-static)の plugins ディレクトリへコピー。
extras/examples/plugins/FiveStarRating/plugins/FiveStarRating をフォルダごとアプリケーション・ディレクトリの plugins ディレクトリへコピー。
ブログ管理画面より「システム」→「プラグイン」を選択し、Five Star Rating sample 0.1 が表示されればOKです。

2.テンプレートの修正
ブログ管理ページより「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事」を選択し、MTFiveStarRatingThunk タグを設定。
:
<$MTInclude module="コメント"$>
<$MTFiveStarRatingThunk$>
<$MTInclude module="フッター"$>
設定後、再構築します。
3.投票する
ブログ記事の MTFiveStarRatingThunk タグを設定した位置に投票用画像が表示されてます。

黒丸(・)をマウスポイントして★マークにし(星の数が多い方がスコアが高い)、クリックすると投票されます。

投票データはデータベースに登録され、画像は Ajax によって黒いマークに置き変わります。左端の禁止マークをクリックすると投票が取り消されます。
ブラウザをリロードすると投票結果が反映されなくなります(ロード時にデータを取得するスクリプトがない模様)が、左端の禁止マークをクリックした時はそれ以前の記録が表示されるようです。

なお、Mozilla 系ブラウザではサインインしないと投票が有効にならないようです。
4.データを表示する
ブログ記事用MTタグは下記が対応しています。
| タグ | 意味 |
|---|---|
| MTEntryRank | ブログ記事のランク |
| MTEntryScore | ブログ記事のスコア(★)の合計 |
| MTEntryScoreAvg | ブログ記事のスコア平均 |
| MTEntryScoreCount | ブログ記事への投票合計数 |
| MTEntryScoreHigh | ブログ記事に投票された一番高いスコア |
| MTEntryScoreLow | ブログ記事に投票された一番低いスコア |
タグには namespace="FiveStarRating" を付与してください。取得しないとデータを取得することができません。
他にも
MTAssetRank MTAssetScore MTAssetScoreAvg MTAssetScoreCount MTAssetScoreHigh MTAssetScoreLow MTCommentRank MTCommentScore MTCommentScoreAvg MTCommentScoreCount MTCommentScoreHigh MTCommentScoreLow MTPingRank MTPingScore MTPingScoreAvg MTPingScoreCount MTPingScoreHigh MTPingScoreLow
が対応していると思います(動作未確認)。
5.関連する Perl モジュール
関連する Perl モジュールはプラグインの FiveStarRating.pm の他、
lib/MT/ObjectScore.pm lib/MT/Scorable.pm
があります。
Movable Type 4 の透過 PNG ロゴを IE6 以下のブラウザで透過する
デフォルトテンプレートで新しく表示されている Movable Type 4 のロゴは透過PNGのため、IE6以下のブラウザでは透過されず、2色で表示されてしまいます(下)。

ここでは pngfix.js を利用して透過する方法を紹介します。
他にも透過PNGライブラリは色々出回ってます。
- AlphaLoader - Public Amachang
- to-R:アルファ画像を扱うalphafilter.jsライブラリ
- ユンサンの/융상의/YungSang's:透過PNG と IE と IE7
1.スクリプトのダウンロード・アップロード
PNG in Windows IE: How To Use の中間辺りにある pngfix.js のリンクをクリックして、pngfix.js をダウンロード。
ダウンロードした pngfix.js をサーバのブログ・ディレクトリ(index.html があるディレクトリ)にアップロード。
2.テンプレート修正
ブログ管理ページより「デザイン」→「テンプレートモジュール」→「ヘッダ」を選択し、head 終了タグの直前に下記を追加。
MT3以前のテンプレート構成を利用している場合(で新しいロゴを使っている場合)は、各テンプレートの head 終了タグの前に下記を追加。
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<$MTBlogURL$>pngfix.js"></script>
<![endif]-->
これで再構築をすれば下記のように透過されます。この設定は他の透過PNGにも有効です。

Movable Type 4 テンプレート配布再開
Movable Type 4 テンプレートの公開を再開します。下記のリンク先よりテンプレートアーカイブをダウンロードし、解凍した中にある .mtml ファイルを任意のエディタで開き、該当するテンプレート編集画面のテキストエリアにペーストしてお使いください。
再掲になりますが、MT3テンプレートとの差分を掲載しておきます。その他の注意事項については「Movable Type テンプレート」をご覧ください。
1.3.3x テンプレートからの変更点
1.1 テンプレート構成
「Movable Type 4 のテンプレート構造」「Movable Type 4 のテンプレート構造(その2:MTInclude に着目したテンプレート関係図)」でお知らせしている通り、MT4 ではテンプレート構成が大きく変更されています。3.3 からアップグレードした場合は以前の構成が引き継がれますが、新規インストールの場合は、MT3 とかなり異なった構成になります。
今回は新規インストールの方をターゲットにした構成(下記)で配布しています。
ダウンロードアーカイブの内容は下記のようになっています。
/Archives
entry.mtml
entry_listing.mtml
page.mtml
/Indexes
styles.mtml
main_index.mtml
/Modules
categories.mtml
comment_detail.mtml
comment_form.mtml
comments.mtml
entry_detail.mtml
entry_metadata.mtml
entry_summary.mtml
footer.mtml
header.mtml
page_detail.mtml
sidebar.mtml
sidebar2.mtml
tags.mtml
trackbacks.mtml
/System
comment_error.mtml
comment_response.mtml
search_results.mtml
各ファイルは下記の対応にしたがって、デフォルトテンプレートと入れ替えてください。
| 種類 | 名前 | 対応ファイル |
|---|---|---|
| インデックス | メインページ | main_index.mtml |
| スタイルシート(メイン) | styles.mtml | |
| アーカイブ | ウェブページ | page.mtml |
| ブログ記事 | entry.mtml | |
| ブログ記事リスト | entry_listing.mtml | |
| モジュール | ウェブページの詳細 | page_detail.mtml |
| カテゴリ | categories.mtml | |
| コメント | comments.mtml | |
| コメント詳細 | comment_detail.mtml | |
| コメント入力フォーム | comment_form.mtml | |
| サイドバー * | sidebar.mtml | |
| サイドバー2 * | sidebar2.mtml | |
| タグ | tags.mtml | |
| トラックバック | trackbacks.mtml | |
| フッター | footer.mtml | |
| ブログ記事のメタデータ | entry_metadata.mtml | |
| ブログ記事の詳細 | entry_detail.mtml | |
| ブログ記事の概要 | entry_summary.mtml | |
| ヘッダー | header.mtml | |
| システム | コメントプレビュー | comment_preview.mtml |
| コメント完了 | comment_response.mtml | |
| 検索結果 | search_results.mtml |
*:テンプレートモジュールを新規作成する必要があります(2項参照)。
1.2 投稿者情報(entry_metadata.mtml)
パーマリンクをタイムスタンプから「Permalink」に変更しました。
1.3 コメントフォーム(comment_form.mtml)
認証機能を使用しない場合はコメントフォームが非表示になるようにしました(デフォルトテンプレートと同じ)。
1.4 コメント完了(comment_response.mtml)
コメント投稿が受け付けられた場合、コメント完了画面に遷移する設定が可能ですので、その場合、「受け付けました」という旨のメッセージを表示するようにしました。
2.利用時の注意1
本テンプレートはデフォルトを3カラム固定レイアウトにしており、「サイドバー」「サイドバー2」というテンプレートモジュールを新規作成する必要があります。「サイドバー」は右サイドバー用、「サイドバー2」は左サイドバー用です。
上記の2つのテンプレートモジュールは、下記のタグでインデックス・テンプレート/各アーカイブテンプレートに事前に埋め込んでいます。
<$MTInclude module="サイドバー"$>
<$MTInclude module="サイドバー2"$>
この2つのテンプレートモジュールを作成しておかないと、作業途中でエラーが発生する可能性がありますのでご注意ください。
この説明で分からない場合は、「テンプレートの再構築で「モジュールというテンプレートが見つかりませんでした」というエラーになる場合の対処」を参照ください。
3.利用時の注意2
テンプレートの内容をペーストする際は、テキストエリア右上にある「構文強調表示/強調表示なし」から「強調表示なし」」を必ず選択してください。「構文強調表示」のままペーストすると元ファイルの改行が反映されません。機能が改善されていますので、どちらでも問題なくペーストできます。

4.その他
本テンプレートはベータ版という位置づけでご利用ください。動作の不具合は随時お知らせ頂ければ幸いですが、問題内容によってはフィードバックできない場合があります(本体にバグがある場合等)。
また、インデックス・テンプレートの「スタイルシート(ベーステーマ)」は使用しておりません。アーカイブインデックスは別途作成したいと思います。
2ちゃんねるはなぜ潰れないのか?
遅ればせながら読みました。売れ行き好調のようで、私が購入したのは第三刷です。
![]() | 2ちゃんねるはなぜ潰れないのか? 西村 博之 扶桑社 2007-06-29 売り上げランキング : 75 Amazonで詳しく見る by G-Tools |
ご存知の方も多いと思いますが、内容はタイトルの2ちゃんねるに限らず、ネット上の各サービス(Google・mixi・はてな・ライブドア・ソフトバンク・マイクロソフト・YouTube・セカンドライフ・ウィニー等)や、ネットと日本の法律の関係等、様々な事象がひろゆき氏の現実的・悲観的な視点で鋭くえぐられたものです。
また、佐々木俊尚氏との対談は終始緊張感にあふれ、さらに誌面の1/4を割いた小飼弾氏との対談では両者の思考能力の凄さ垣間見ることができます。
本編でのひろゆき氏の「身も蓋もない」発言(佐々木俊尚氏の言葉より)は読み応え十分ですが、個人的に一番面白かったのは「あとがき」の冒頭10行位。まさに「身も蓋もない」1冊と言えるでしょう。
Movable Type 3 から Movable 4 へのアップグレード(コメント関連テンプレート差分)
Movable Type 3 から Movable 4 へアップグレードした場合、MT4 で新しく追加・変更されたコメント関連のMTタグは反映されません。
ということで机上での確認ですが、MT4 の機能を利用する場合のテンプレートの差分を示します。
なお本エントリーの反映を行う場合、インデックステンプレートの mt.js(MT3 の mt-site.js の後継) の利用が前提となりますが、アップグレードでは mt.js がインデックステンプレートに生成されません。
mt.js を取得するには、新しいブログをひとつ作成し(再構築はしない)、そこからインデックステンプレートにある「JavaScript(mt.js)」の内容をコピーし、元ブログのインデックステンプレートに新しいテンプレートとして追加してください(他に良い方法があればご教示ください)。
また、mt-site,js を読み込んでいる script 要素も適宜 mt.js を読み込むように変更してください。
以下、エントリー・アーカイブテンプレートとコメント・プレビューテンプレートのMT3/MT4の差分です。
1.認証表示用JavaScript
MT3 まで TypeKey 認証のみでしたが、MT4 から Movable Type/OpenID/LiveJournal/Vox/TypeKey と複数認証に対応するようになったので、TypeKey 認証表示用の JavaScript をそれに対応したものに変更してください。
また、コメントプレビューテンプレートには is_preview = true; を追加してください。
MT3
<script type="text/javascript">
writeTypeKeyGreeting(commenter_name, <$MTEntryID$>);
</script>
MT4
<MTIfRegistrationAllowed>
<div id="comment-form-external-auth">
<script type="text/javascript">
<!--
writeCommenterGreeting(commenter_name, <$MTEntryID$>, <$MTEntryBlogID$>, commenter_id, commenter_url);
//-->
</script>
</div>
</MTIfRegistrationAllowed>
MT4(コメントプレビュー)
<MTIfRegistrationAllowed>
<div id="comment-form-external-auth">
<script type="text/javascript">
<!--
is_preview = true;
writeCommenterGreeting(commenter_name, <$MTEntryID$>, <$MTEntryBlogID$>, commenter_id, commenter_url);
//-->
</script>
</div>
</MTIfRegistrationAllowed>
注:この JavaScript は MT3 では form 要素の中にありましたが、MT4 では form 要素の直前に移動してください。
理由は、MT4 ではコメントフォームがデフォルトで非表示になり、認証コメントの場合はサインインすることによってコメントフォームが表示されます。
またブログ管理画面の「設定」→「登録・認証」で「認証なしコメント」をチェックすれば認証なしのコメントも可能ですが、その際はコメントフォームの代わりに「匿名でコメントすることもできます。 」というリンクが表示され(下)、それをクリックすればコメントフォームが表示されます。

この JavaScript では、インデックステンプレートの JavaScript(mt.js)の生成条件にしたがって、そういった制御を行っています。
2.form 要素
コメントフォームの form 要素の id 属性 comments-form を追加してください。
また input 要素をひとつ追加してください。
MT3
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
MT4
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<input type="hidden" name="__lang" value="<$MTBlogLanguage$>" />
3.コメントフォーム
(X)HTMLが変更されています。MT3 までは「名前」と「メールアドレス」を div 要素で括り、TypeKey サインインの場合に id 属性 name-email を狙って非表示にしていましたが、
MT4では「名前」と「メールアドレス」に与えられた id 属性 comment-form-name と comment-form-email で表示・非表示を切り替えています。
MT3
<div id="comments-open-data">
<div id="name-email">
<p>
<label for="comment-author">名前:</label>
<input id="comment-author" name="author" size="30" />
</p>
<p>
<label for="comment-email">メールアドレス:</label>
<input id="comment-email" name="email" size="30" />
</p>
</div>
<p>
<label for="comment-url">URL:</label>
<input id="comment-url" name="url" size="30" />
</p>
<p>
<label for="comment-bake-cookie"><input type="checkbox"
id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
この情報を登録しますか?</label>
</p>
</div>
MT4
<div id="comments-open-data">
<div id="comment-form-name">
<label for="comment-author">名前</label>
<input id="comment-author" name="author" size="30" />
</div>
<div id="comment-form-email">
<label for="comment-email">メールアドレス</label>
<input id="comment-email" name="email" size="30" />
</div>
<div id="comment-form-url">
<label for="comment-url">URL</label>
<input id="comment-url" name="url" size="30" />
</div>
<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" />
ログイン情報を記憶</label>
</div>
</div>
MT4(コメントプレビュー)
<div id="comments-open-data">
<div id="comment-form-name">
<label for="comment-author">名前</label>
<input id="comment-author" name="author" size="30" value="<$MTCommentAuthor encode_html="1"$>" />
</div>
<div id="comment-form-email">
<label for="comment-email">メールアドレス</label>
<input id="comment-email" name="email" size="30" value="<$MTCommentEmail encode_html="1"$>" />
</div>
<div id="comment-form-url">
<label for="comment-url">URL</label>
<input id="comment-url" name="url" size="30" value="<$MTCommentURL encode_html="1"$>" />
</div>
<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" />
ログイン情報を記憶</label>
</div>
</div>
4.CAPTCHA 入力フィールド
MT4 で追加された CAPTCHA の入力フィールドを表示する場合は下記の青色部分を追加してください。
この設定とは別に、ブログ管理画面の「設定」→「コメント」で、CAPTCHA プロバイダの設定が必要です。
:
<p id="comments-open-text">
<label for="comment-text">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50"></textarea>
</p>
<MTIfNonEmpty tag="MTCaptchaFields">
<MTIfCommentsAccepted><MTIfRegistrationAllowed><MTElse><$MTCaptchaFields$></MTIfRegistrationAllowed></MTIfCommentsAccepted>
<div id="comments-open-captcha">
</div>
</MTIfNonEmpty>
<div id="comments-open-footer" class="comments-open-footer">
:
5.表示・非表示で使われる id 属性
下の5つの id 属性値は mt.js で参照されるものです。変更しないようにしましょう。
comment-form-name
comment-form-email
comments-open-data
comments-open-text
comments-open-footer;
Movable Type 3 から Movable Type 4 へのアップグレード方法
Movable Type 4 がリリースされましたので、Movable Type 3 からのアップグレード方法を紹介致します。
アップグレードはこれまでの MT3.x → MT3.x の方法と若干異なっています。おおざっぱに申し上げますと、データベースと構成ファイル(mt-config.cgi)以外、全て潔く削除します。
以下、Movable Type 4 のドキュメントを参考に、順を追って説明します。メジャーバージョンアップということで事前準備が色々ありますので、作業内容をしっかり把握してから実施してください。
また本エントリーはアップグレードの正常性を100%保証するものではありませんので、ご自身の責任で行ってください。
注意事項
- MT3管理画面系のプラグインはMT4ではエラーになります。
- MT3のMTタグ拡張プラグインで一部利用できないものがあります(
MTPaginate/MTCollate/MTTagInvoke等)。 - インデックステンプレート等で MTSubCategories タグは動作しません(カテゴリー・アーカイブのみで有効)
1.バックアップの取得
下記のバックアップを取得(FTPツールでダウンロード)します。
- アプリケーションディレクトリ(mt.cgi があるディレクトリ)
- スタティックディレクトリ(mt-static)
- ブログディレクトリ(index.html があるディレクトリ)
- データベースディレクトリ(SQLite / Berkeley DBを利用している場合のみ)
アップグレード作業では、ダウンロードしたアプリケーションディレクトリの中にある mt-config.cgi と(サーバ上の)データベースディレクトリ(SQLite / Berkeley DBを利用している場合のみ)を使用します。
注:4項にも記していますが、FTPツールでダウンロードする手段の他、アプリケーションディレクトリとスタティックディレクトリのディレクトリを変更するだけでもいいかもしれません(その場合は3項までの作業を先に実施してください)。ただしこの場合も、データベースディレクトリ(SQLite / Berkeley DBを利用している場合のみ)・ブログディレクトリはローカルPCにダウンロードしてください。
2.データベースのバックアップ
データベースのバックアップを取得します。データベースのバックアップがあれば、アップグレードに失敗しても全てを復旧できます。
MySQL や PostgreSQL を利用している場合、レンタルサーバで提供されているバックアップ方法やシェルを利用したバックアップを行ないます。
「MySQL + phpMyAdmin によるバックアップ」も参考にしてください。
3.エントリー・コメント・トラックバックのエクスポート
データベースのバックアップが分からない場合、エクスポート機能を利用して、エントリー・コメント・トラックバックをバックアップします。
この方法では、テンプレートやログ等、全ての情報は取得できませんが、エントリー・コメント・トラックバック・カテゴリーの基本的な情報を取得できます(サブカテゴリは反映されません)。
操作方法は管理画面より「読み込み/書き出し」をクリックし、「エントリーの書き出し」をクリック。後は「XXからエントリーを書き出す」をクリックすればファイルのダウンロードに進みます。

2項が実施できない&テンプレートをバックアップしたい場合は、テンプレートの内容をテキストファイルに保存するか、「「このテンプレートにリンクするファイル」の使い方 for Movable Type」を使ってください。
4.旧バージョンのデータ削除
バックアップを作成した後、FTP ツールで、アプリケーションディレクトリとスタティックディレクトリの内容を空にします。ドキュメントによると「以前のバージョンとの混在を防ぐため」のようです。
ドキュメントにしたがって潔く削除してもいいのですが、自信がない・恐い方は、アプリケーションディレクトリとスタティックディレクトリのディレクトリ名を変更するだけでもいいのではないかと思います。変更した場合は、前と同じ名前の空のディレクトリを作っておいてください。
スタティックディレクトリがアプリケーションディレクトリ配下にある場合、つまり Movable Type のディレクトリ構成をそのまま使っている場合は、空のアプリケーションディレクトリのみ作成しておきましょう。
注:ブログディレクトリとデータベースディレクトリ(SQLite / Berkeley DBを利用している場合のみ)は削除、あるいはリネームしないでください。
5.Movable Type 4 のアップロード
予めダウンロードしておいた Movable Type 4 を以前と同じように、アプリケーションディレクトリにアップロードします。
6.構成ファイル (mt-config.cgi) の復旧
1項のバックアップから、構成ファイル (mt-config.cgi) を元の位置にアップロードします。
旧バージョンで mt-config.cgi が存在せず、mt.cfg の場合は、mt-config.cgi にリネームしたものをアップロードします。また、MySQL や PostgreSQL 利用の場合、データベースパスワード等が含まれる mt-db-pass.cgi ファイルの内容は mt-config.cgi に反映させてください。
また、MT3.3 以前のバージョンからアップグレードする場合、「3.3の新機能の1つであるログ・フィード機能で、検索の結果のフィードを出力するために、mt-config.cgi に以下を追記してください。」とドキュメントに記されています。
AltTemplate feed results_feed.tmpl
7.カスタマイズの反映 (オプション)
「default_templatesディレクトリやsearch_templatesディレクトリ内のテンプレートをカスタマイズしていた場合は、ローカル側に作成したバックアップから、それらをアップロードします。」とドキュメントに書かれています。
8.mt.cgi にアクセスしてアップグレード
これでアップグレードが開始します。ここでは MT-3.35-ja からのアップグレードした実績で説明します。
「アップグレード開始」をクリック。

ユーザー名・パスワードを入力。

アップグレードが開始します。

アップグレードが完了しました。「Movable Type に戻る」をクリック。

これで MT4 のダッシュボードが表示されれば完了です。

一定期間運営して問題がないようでしたら、4項をディレクトリ名変更作戦で作業を進めた方は、旧ディレクトリをFTPツールで削除してください。
ちなみに MT3.35-ja のアプリケーションディレクトリ・スタティックディレクトリの内容が残った状態から上書きしても、アップグレードは成功しました。参考まで。
2007.08.09
注意事項を追記しました。
2007.08.09
プラグインから MTPaginate を削除しました。
2007.08.11
注意事項に MTSubCategories を追加しました。
Movable Type 4 リリース
Movable Type 4 がリリースされました。
Movable Type 4.0 を本日、製品版として出荷させていただきます。6月5日のベータテスト開始以降、多くのユーザー様から、沢山のフィードバックをいただきました。皆様のサポートのおかげで、正式版をリリースできましたことを、心から感謝申し上げます。 前バージョンのMT 3.3 (2006/07/11)からは約1年、MT 3.0(2004/05/13)からは実に3年ぶりとなるメジャー・バージョンアップとなります。Movable Typeが生まれた2001年以降、ブログの驚異的な普及と共に進化を遂げてきましたが、このバージョン4.0で、Movable Type は新たなステージにチャレンジをします。
すでにライセンス登録をされている方はユーザーサイトよりMovable Type 4のダウンロード可能です。
また当初、90日間の予定だったテクニカルサポートが1年間に変更されています。
Movable Type 4 の PHP 化で XML 宣言を自動的に切り替える
PHP化を行う時にいつも面倒に思うのは、1行目の XML 宣言を PHP スクリプトに変更するか、削除しなければならいという手間が発生することです。
Movable Type 4 では MTIf タグで色々制御できるようになったので、PHP化、つまり拡張子を .html から .php に切り替えた時(あるいはその逆)に、XML 宣言を書き換えなくて良い MT タグ構成を考えてみました。
注:デフォルトテンプレートには XML 宣言は記述されていないので、XML 宣言を記述した状態を前提にしています。
1.カスタマイズ
テンプレートモジュールの「ヘッダー」の先頭に下記の青色部分を追加すればOKです。
注:分かりやすいように改行していますが、使用時は青色部分の改行・空白を削除して1行に丸めてください。
<MTIf name="entry_template">
<MTSetVarBlock name="extension"><$MTBlogFileExtension$></MTSetVarBlock>
<MTElse>
<MTIf name="main_index">
<MTSetVarBlock name="extension"><$MTIndexBasename extension="1"$></MTSetVarBlock>
<MTElse>
<MTSetVarBlock name="extension"><$MTBlogFileExtension$></MTSetVarBlock>
</MTIf>
</MTIf>
<MTIf name="system_template">
<MTSetVarBlock name="extension">html</MTSetVarBlock>
</MTIf>
<MTIf name="extension" like=".php"><?php echo('<?xml version="1.0" encoding="utf-8"?>'); ?><MTElse><?xml version="1.0" encoding="utf-8"?></MTIf>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
ウェブページにも対応させるのであれば、ウェブページテンプレートに
<MTSetVar name="page_template" value="1">
を追加して、ヘッダに下記の青色部分を追加すればOKです。
<MTIf name="entry_template">
<MTSetVarBlock name="extension"><$MTBlogFileExtension$></MTSetVarBlock>
<MTElse>
<MTIf name="main_index">
<MTSetVarBlock name="extension"><$MTIndexBasename extension="1"$></MTSetVarBlock>
<MTElse>
<MTIf name="page_index">
<MTSetVarBlock name="extension"><$MTPageBasename extension="1"$></MTSetVarBlock>
<MTElse>
<MTSetVarBlock name="extension"><$MTBlogFileExtension$></MTSetVarBlock>
</MTIf>
</MTIf>
</MTIf>
<MTIf name="system_template">
<MTSetVarBlock name="extension">html</MTSetVarBlock>
</MTIf>
<MTIf name="extension" like=".php"><?php echo('<?xml version="1.0" encoding="utf-8"?>'); ?><MTElse><?xml version="1.0" encoding="utf-8"?></MTIf>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
2.テンプレート修正
「追加部分を1行に丸めてください」と書きましたが、理由は、XML宣言が文書の1行目になければならないためです。
が現状のデフォルトテンプレート(XML宣言なし)では DOCTYPE 宣言が文書の1行目に表示されません(数行空きます)。
例えば、インデックスページではヘッダ情報を取得 MTInclude タグの前に MTSetVar タグが記述されており(下記赤色)、タグの末尾にある改行がそのままページに反映されてしまうためです。
<MTSetVar name="body_class" value="mt-main-index">
<MTSetVar name="main_template" value="1">
<MTSetVar name="main_index" value="1">
<MTSetVar name="sidebar" value="1">
<MTSetVar name="module_recent_entries" value="1">
<MTSetVar name="module_category_archives" value="1">
<MTSetVar name="module_author_archives" value="1">
<MTSetVar name="module_monthly_archives" value="1">
<$MTInclude module="ヘッダー"$>
かといって、MTSetVar を MTInclude の後に移動すると、ヘッダで MTIf を用いた判定処理ができなくなります。
ということで、先程と同様、これらも MTSetVar タグの改行を取り除き、MTInclude タグを含めて1行に丸めてください(視認性は落ちます)。他のアーカイブテンプレートも同様です。
3.注意事項
アーカイブインデックス(archievs.html/archives.php)の判断はできていません。インデックステンプレートの拡張子の判断には MTIndexBasename を用いていますが、これはメインページのファイル名しか取得されないためです。
4.その他
アーカイブの拡張子を php にすると、ウェブページは .html と .php の両方が選択できるようです。が、ウェブページ新規作成画面の出力ファイル名には php しか表示されません(フィードバック済)。
2007.09.18
リストに extension="1" を追加しました。
2007.10.28
システムテンプレートに対する考慮漏れを対処しました。
Movable Type 4 のリリース候補第4版を公開
Movable Type 4 のリリース候補第4版が公開されました。ニュースには出てませんがダウンロードページのバージョンが上がっています。
なお、ブログ別管理メニュー下にある「ツール」のリンクからはログのページしか表示されません(フィードバック済)。ダッシュボード右の「ショートカット」の「インポート」のリンクから辿っていけば、システム情報・バックアップ・エクスポートのメニューに進めます。
Movable Type 4 のリリース候補第3版を公開
Movable Type 4 のリリース候補第3版が早くも公開されました。リリース候補第2版から4日しか経ってません。
Movable Type 4.0 Release Candidate 3
Earlier this evening we released Movable Type 4.0 RC3, and we have updated our change log and list of known issues according. This change log is shorter then usual as we begin to converge on a release.
ちなみに第1版、第2版でもマイナーバージョンアップされており、短いスパンでバグフィックスが反映されているようです。延期しなければ明日には正式版がリリースされるでしょう。
第2版で発生していた、ブログ単位のバックアップが正常に行われない不具合が解消されています。

これは第2版からですが、TypeKey設定がチェックボックスからリンクに代わって、設定を促すように変更されています(トークンが変更された後はチェックボックスに切り替わる)。

Ajax でキャッシュさせない方法
先日エントリーした、「Ajax によるモジュール化」で「Ajax を利用した時にキャッシュから取得しないようにしています」と書きましたが、最初にみつけた参考サイトが見つかりました。
他にも、キャッシュの問題回避について、結構情報ありました。
- How to stop IE from caching AJAX requests
- via:PHPプロ!ニュース:IEでAjaxリクエストをキャッシュさせない方法
- msanolog:XMLHttpRequest と If-Modified-Since
- 同:If-Modified-Sinceヘッダを利用してWebページのキャッシュを行うXMLHttpRequestラッパー
- 実践Web2.0 Ajax プログラミング入門:キャッシュされないようにしよう
まとめると、
- POSTメソッドを用いる
- ランダムなクエリーを与える
- If-Modified-Sinceヘッダを用いる
の3パターンのようです。
クエリーにはタイムスタンプがいいみたいですね。
「Movable Type4 無償バージョンアップキャンペーン」まもなく終了
まもなく製品版がリリースされますが、Six Apart が Movable Type 4 を定価52.500円より21000円も安い、31500円で購入できるキャンペーンを実施中です。*1
Movable Type4 無償バージョンアップキャンペーン
Movable Typeのメジャーバージョンアップを控え、期間限定でオトクなキャンペーンを実施します。いま購入すると、新バージョンのMovable Typeに無償でバージョンアップができるだけでなく、21,000円も安くお求めいただけます※。この機会を、ぜひお見逃しなく!
購入ページをみると、追加ライセンスも無償バージョンアップ対象のようです。
ちなみに、Movable Type 3を2007年3月31日までにダウンロード購入またはライセンス登録されている方々には「先行バージョンアップキャンペーン」を実施中で、バージョンアップ基本ライセンスパック(1サーバー・5ユーザー)21,000円(税込)を15,750円(税込)、Movable Type 4からは別売(税込1年間10,500円)となるオンラインサポートを90日間無償で添付、となっています(Six Apart メールより抜粋)。
予定通りリリースされれば、キャンペーンはいずれも8月7日までです。
*1:1サーバ・5ユーザーの場合
Movable Type 4 リリース候補第2版を公開
Movable Type 4 のリリース候補第2版が公開されました。
Movable Type 4 のリリース候補第2版を公開しました。
それぞれにあわせて設定の既定値をカスタマイズしてある、各国語ビルドを用意してあります。ダウンロードページでドロップダウンリストからJapaneseを選択してダウンロードすれば、日本語環境向けのビルドを取得できます。日本語環境向けのビルドでは、これまでのベータで必要だったmt-config.cgiへの追加(DefaultLanguageなど)は必要ありません。お試しください。
ようやく日本語環境向け(「日本語版」というのはないそうです)がリリースされ、「ようこそ」画面が日本語になりました。

ダイナミックパブリッシングで「キャッシュ」と「条件付き取得」のチェックが有効にならなかった不具合が解消されています。
「キャッシュ」と「条件付き取得」の設定は、MT3ではテンプレートの編集やディレクトリの作成が必要でしたが、管理画面だけの設定に変更されました(「cache」ディレクトリも自動生成)。これでこの設定に関しては敷居がかなり低くなったのではないでしょうか(粒度の細かい設定ができなくなったのかもしれませんが)。

ちなみに静的なファイルを生成しない場合は再構築アイコンが非表示になります。

下は再構築ありの場合。細かいところですがユーザビリティが考えられています。

Movable Type 再構築の本当の問題
最近、「Junnama Online (Mirror)」さんのところで再構築ネタが多く上がっているのですが、「再構築の問題の本質は何だろう」と思っていたところ、タイムリーに下記のエントリーがあがっていたので、再構築の問題について記してみたいと思います。
おそらく1番の問題は、「再構築時の500エラー」ではないでしょうか。具体的には、再構築の途中で500エラーが発生するため、ページを最後まで再構築をすることができないという事象が過去、多く発生していました。「再構築 500」で検索すると、Movable Type の500エラーに関するかなりの記事がヒットします。
原因の一端にはサーバ環境もあると思いますが、個人ユーザの Movable Type の評価を下げる一因になっています。
2番目の問題は、再構築速度(エントリー数に比例して再構築時間が増大)。ただし個人的には、時間がかかってもきちんと再構築できれば1番目の問題ほど深刻ではないと思ってます(早いに越したことはありませんが)。
ちょっと前に「MovableTypeからWordPressへパーマリンクを引き継いで移行する方法」で「16000エントリー(の再構築)に2時間」というくだりがありましたが、当サイトは現在1/10の1600エントリー位で、インデックス/エントリー・アーカイブ/カテゴリー・アーカイブ/月別アーカイブ/日別アーカイブ全ての再構築を計ってみると、なんと20分強かかりました。
もしかしたらサーバ環境によってはその位かかるのが普通かもしれません(当サイトはさくらのスタンダードプラン+MySQL)。カスタマイズ内容にもよりますが、「16000エントリーで2時間」は結構早いかも。
話は変わって、再構築の目的は、「テンプレートやスタイルシートの変更を反映させたい」ことです。サイト全体の再構築が1~2分で終わるのであれば何も考えずに全再構築をしますが、膨大なエントリーがある状況では、個人的には下記の手順を踏みたくなります。
- 変更の反映について、トップページと各アーカイブで数ページを確認(NGであれば繰り返す)
- OKであれば一気に再構築
そういう意味では、ダイナミック・パブリッシングや WordPress では再構築時間云々よりも、変更が即座に反映されたページを閲覧できるのが魅力なのではないかと思います(ページ表示時の再構築のコストはおいといて)。
「変更が即座に反映されること」をもう少し突き詰めて考えると、ミスのないデザインが公開できる仕組み(あるいはミスを即座に修正できる仕組み)が最も重要なのではないかと思いました。
もし16000エントリーを全て再構築してしまった後で何らかの不具合が発覚した場合、一番最後に再構築されるエントリーは修復までに2時間かかる訳ですので。
ということで、当サイトでは「エントリーのプレビューを行うプラグイン(MT3.2/3.3対応版)」を使って事前にページを確認してから再構築するようにしています。「StylePreview」でも同様の効果を得られます。
またMT4では「ブログ記事の確認(ウェブページの確認)」で公開デザインでの見栄えを確認できるようになっているので、あとは最重要問題である500エラーの解消と、再構築のさらなる進化の追求(下記)でしょうか。
「Webデザインの新しいルール Movable Type 4.x」について(その1:テンプレートデザイン)
以前お知らせした、現在執筆中の「Webデザインの新しいルール Movable Type 4.x(仮)」ですが、以前お知らせした通り、数回に分けてプロモーションさせてください。
その1:テンプレートデザイン
この書籍で私が執筆担当している部分にテンプレートのカスタマイズに関する節がいくつかあり、ご想像の通り、当サイトのテンプレートを元ネタにしています。
その中で一番の特徴は、テンプレートのデザインを書籍の中で大きく変更している点です。
吉野家の牛丼並・大程度のバリエーションしかないシンプルなテンプレートを、各節のカスタマイズにしたがってデザインを少しずつ変更していき、完成形は異なった見栄えになる、というストーリーになっています。
ブログ上では、テンプレートの記事やカスタマイズに関するご質問を頂いても、テンプレートは部分的、あるいは些細な変更しか行っていませんでした。そういう意味で、この本は公開テンプレートを自らデザインを変更するという初の試みを行ったものです。
またビギナーの方にとっては、本書をお読み頂いて「当サイトのテンプレートがこの程度まで変更できます」というサンプルになれば幸いと思っています。
デザインは色々なサイトを拝見させて頂いたものを私の頭の中でアレンジして(というか単にごちゃまぜにして)なんとなく今風のものにしたつもりです。
元になるテンプレートの(X)HTMLマークアップはこれまで公開してきたカスタマイズが使えるように大きな変更はしておりませんが、CSS は書籍を何冊か購入しまして、目についた新しい手法も取り入れさせて頂いてます。
業界の方からすれば、(X)HTMLもCSSもまだまだという感は否めないかもしれませんが、現状の私の持ち得る知識の中で最善を尽くしたつもりです。
余談ですが、お世話になっている重鎮的存在のギタリストの先生と話をしている時に、「ある人が出す(ギターの)音色は、その人が持つ美意識の中から出るもの(=美意識を超える音は出さない)」という言葉がとても印象に残っています。
多分デザインも同じで、私が「テンプレートのデザインを大きく変更しました」と言っても、それはその人が持つ美意識の範疇でしかなく、どのようなデサインに変化しても、それが私の持つ「美」の現われなのだと思います。
ちょっと大げさな表現ですが、私がどのような美意識を持っているのか、乞うご期待ください。
ちなみに現在の状況ですが、私の担当は全6章のうち4章(うち2章は二人で分担)で、あと1章弱を残すところとなりました。
概要と本文を切り替える(公開テンプレート版)
当サイトで利用している、トップページのエントリー概要とエントリー本文の表示を切り替えるカスタマイズです。
概要に本文の先頭から指定文字数を表示する設定になっている(=概要フィールドに何も書いていない)場合、デフォルトで概要を表示し、タイトルまたは概要の末尾にあるリンクをクリックすることで、ページ遷移をせずに全文を表示することができます。
このエントリーでは公開テンプレートのトップページおよびカテゴリーアーカイブ/日付アーカイブに適用する例を紹介します。
なお先日紹介したデフォルトテンプレート版のカスタマイズ手順に一部誤りがありましたので修正しています(本エントリーは修正済)。
1.スクリプトのダウンロード・アップロード
下記のリンクより menufolder.js をダウンロード(本カスタマイズ用に機能追加しています)
ダウンロードしたスクリプトは、ブログの index.html と同じディレクトリにアップロードしてください。
2.script 要素の追加
カスタマイズを適用するテンプレートに下記の script 要素を追加。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>
3.エントリータイトルに折りたたみのリンクを与える
エントリータイトルのタグ
<h2 id="a<$MTEntryID pad="1"$>" class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></h2>
を下記のように変更します。a 要素を削除して h2 の id 属性を書き換えます。
<h2 id="content<$MTEntryID$>name" class="entry-header"><$MTEntryTitle encode_html="1"$></h2>
4.概要を追加する
エントリーを表示するタグ
<!-- エントリー -->
<div class="entry-content">
<$MTEntryBody$>
<!-- 追記 -->
<MTIfNonEmpty tag="EntryMore">
<p class="entry-more"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle encode_html="1"$>"</a></p>
</MTIfNonEmpty>
に対し、青色のタグを追加します。
<!-- エントリー -->
<div class="entry-content">
<div id="content<$MTEntryID$>list2">
<p><$MTEntryExcerpt$> <a class="foldmark" href="./" onclick="FoldNavigation('content<$MTEntryID$>','chng',''); return(false);" onkeypress="FoldNavigation('idName', 'chng',''); return(false);" title="全部読む">[ all ]</a></p>
</div>
<div id="content<$MTEntryID$>list">
<$MTEntryBody$>
<!-- 追記 -->
<MTIfNonEmpty tag="EntryMore">
<p class="entry-more"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle encode_html="1"$>"</a></p>
</MTIfNonEmpty>
</div>
また、MTEntries の終了タグ直前にスクリプト起動用の script 要素を追加します。
<script type="text/javascript">
//<![CDATA[
FoldNavigation('content<$MTEntryID$>','off',false);
//]]>
</script>
</MTEntries>
これでテンプレートを再構築すれば、概要と本文の切り替えができるようになります。
5.注意事項
概要の表示文字数より本文の文字数が少ないと効果ありません。


Movable Type 4 版の Ajax 月送りカレンダーのカスタマイズです。リアルタイムカレンダー(本日の日付の装飾)および土・日・休日表示も盛り込まれています。


