サイドバーの折りたたみ方式変更
本サイトのサイドバー折りたたみ方式を変更しました。具体的には display: block によるリンクに変更しています。本当はカスタマイズ方法を今日公開する予定でしたが不具合が残っていることが発覚しましたので、すいませんがお披露目だけに留めさせてください。
デバグが完了次第、カスタマイズ方法を公開致しますのでしばしお待ちください。
IE5.xでのボックス表示を修正する
IE5.x（Netscape4.xも）やIE6の後方互換モードではCSSの width, padding, border の解釈にバグがあるというのは巷で有名みたいで、ブログでCSSに関わりだした私は
の記事で初めてこの事実を知りました。それ以来随分と気になってましたが、関連の話題をエントリーします。
 この問題について気になりながら放置していたのは、そもそも確認する IE5.x のブラウザがないのでモチベーションが上がらないという状態でした（IE6後方互換モードでやれば？というのはおいといて）。が最近になって昔使っていた（というか今も時々使っている）古いノートPCに Windows Update を全くやったことがないIEが搭載されているのを思い出し、即着手。Windows Update をしたことがない理由は、そのPCをメインに使っている当時、ブラウザはNetscape4.7しか使っていなかったためです。まさに「灯台下暗し」で、全く素の状態のIE5.0が目の前に転がってました。セキュリティの問題はありますがそこはそれということで。
で、私のサイトに固定3カラムのスタイルシートを入れてIE5で表示させてみました。画像のようにサイドバーの width と padding で表示が崩れているのがお分かりになると思います。 |
以下、Ie5.xでボックス表示を変更させる方法を紹介します。できる！CSSさんのWin IE5xだけ別のCSS 2経由で
と呼ばれるものを発見。具体的な方法は下記の記述を加えて外部スタイルシートを読み込むというものです。中に記述されtている hogehoge.css はIE5.x系しか読み込まないので、ここでIE5.x用の記述をして上書きをするという仕組みです。
@media tty {
i{content:"\";/*" "*/}} @import 'hogehoge.css'; /*";}
}/* */コードの意味はともかく、上記サイトのサンプルを見てもどこにどう書けばよく分からなかったのですが、下のようにHTMLのhead部分に記述することでOKとなりました（上記サイトのページソースがこのようになっていました）。
<link rel="stylesheet" href="styles-site.css" type="text/css" title="Default" />
：
<style type="text/css"/>/*<![CDATA[*/
@media tty {
i{content:"\";/*" "*/}} @import 'hogehoge.css'; /*";}
}/* */
/*]]>*/</style/>このように記述することで、最初に link タグの外部CSS（styles-site.css）を読み込み、その後でIE5.x用のスタイルシート（hogehoge.css）が読み込まれます。全体をCDATAセクションで括っているのはおそらく xml として Valid にするための対処と推測されます（間違ってたらお許しを）。
 この設定を追加したところ、画像のようにIE5でも正常に表示されるようになりました。 |
追記
このサンプルページでIE5.x用に用意した外部スタイルシートの内容は、
/* 右カラム */
#links-right{
float: left;
color: #ffffff;
width : 185px ;
padding-top : 15px;
padding-left : 15px;
padding-right : 15px;
}
/* 左カラム */
#links-left{
float: left;
color: #ffffff;
width : 185px ;
padding-top : 15px;
padding-left : 15px;
padding-right : 15px;
}としています。変更したのは width で、元々 155px だったものを、左右 padding 分の 30px を足して 185px にしています。width 以外は元スタイルシートの設定と重複しているので不要かも知れません。
テレビ電話付き携帯
月送りカレンダー（横型・リアルタイム版）可変3カラム用
最近投エントリーした「月送りカレンダー（横型・リアルタイム版）」は固定カラムしか考慮しておりませんでした（というのは喜怒哀楽さんより頂いたコメントで判明）。可変3カラムの場合は左右カラムの上部開始位置が絶対値指定のため、これも制御する必要があります。
ということで可変3カラムにも対応できるように修正しました（この方法が妥当かどうかは別として）。詳細は下記のエントリーを参照ください。
併せて util.js もバージョンアップしました。
マウスの掃除
PCのマウスはボール式マウスを使ってます。最近カーソルの動きがやや悪くなってきたので掃除しました。すでに皆さんご存知と思いますが日記ということで。
まずボールを押さえている裏蓋を手で回して開けます。ボールをコロンと取り出すと、中にローラーと呼ばれるものが計3ヶ所あります（図中矢印）。ボール自体は結構綺麗なのですが、このローラーの方にゴミがこびりついておりまして、これがカーソルの動きを悪くしている原因のひとつです。
このこびりついたゴミを爪楊枝等の細い棒を使って取り除きます。私はギターを弾くために右手の爪を伸ばしているので、ローラーを少しずつ回しながら中心部分を爪で引っ掻くといい具合にとれてくれます。マウスの上部を下にして作業するとゴミが中に落ちてしまうので、ボール面をやや下向きにすると良いでしょう。
こびりついたゴミがあらかた取れたら、ティッシュか指（笑）でローラーをごしごしと回しながら拭きます。ボールを元に戻し、フタを閉めて作業完了。滑らかな動きが蘇ってスッキリです。
こういうのって他の方が掃除しているのを見たことがないのですが皆さんどうやって掃除されているのでしょうか。
Dila西船橋
JR総武線・西船橋駅で久しぶりに下車してみると、噂に聞いていたショッピングモール「Dila西船橋」が完成していました。
以前はゴミゴミした感じの駅がイメージを一新する佇まいで、相当垢抜けました。Webで調べたところ1月にオープン、昨日残りの9店舗がオープンしたばかりのようで、お祝いのスタンド花が立ち並び、駅員さん達もお客さんのご案内等で対応されたりと、かなりの賑わいをみせていました。
ということでちょっと散策。改札口のある2Fの一角にはスイーツやフードのお店が15店舗ほど。そこからエスカレーターで3Fに上がると、書店・ドラッグストア・リラクゼーションサービス等。個人的にはこの階にある「西船珈琲研究所」という、ベタながらかなり気になるネーミングのカフェに入ってみたかったです（満員でした）。改札を出た1Fは食品スーパーがあります。
他の駅でも似たようなショッピングモールがありますが、ここの特徴はほとんどのお店が改札内にあること。ホームと直結している空間にこれだけの店舗が充実しているのは珍しいかもしれません。西船橋駅はJR総武線、JR武蔵野線、JR京葉線、東京メトロ東西線、東葉高速鉄道の5路線が乗り入れているので、改札を出なくて良い構造にして利便性を高めているのではないかと推測します。個人的にはそのうち駅の中に百貨店ができるのではないかと思ってまして、本当にそういう時代がくるかもしれません。
駅が変わると街自体も変わったような気がするので不思議です。そういうわけで近辺の方は一度お立ち寄りください。
MTCollate を使って「最近のコメント」を表示する
デフォルトテンプレートや公開テンプレートのサイドバーメニューにある「最近のコメント」は、MTEntries タグや MTComments タグ等を用いて、表示するエントリー数と各エントリーに表示するコメント数を制御しています。この方法はスタンダードながら過去のコメントが含まれてしまうケースが少なくありません。
|
例えば、左図では各エントリーに対して最大3コメントを表示する設定にしています。この例でお分かりの通り、「記事３」のコメントには既に読み終わった古いコメントが含まれています。
|
MTCollate は Google で日本語ページを検索しても80件ほどしかヒットしない、どちらかといえば陽の目をみないプラグインです。最近 MTPingEntry との併用によるトラックバックのツリー表示で活躍していますが、それ以外の用途ではほとんど利用されていないようです。と、偉そうに書きましたが、実は Ogawa::Memoranda さんの最近のトラックバックをエントリごとにまとめて表示にあった MTCollate タグを「最近のコメント」用に修正しただけです。すいません。
以下カスタマイズ方法です。
１．MTCollate のダウンロード
MT Extensions より MTCollate をダウンロード（ページの最初の方にある「Download」をクリック）してください。
２．プラグインの配置
ダウンロードしたアーカイブを解凍して、その中の MTCollate.pl を plugins フォルダに配置またはアップロードします。
３．「最近のコメント」のMTタグを変更
公開テンプレートを例に挙げると、本カスタマイズを利用したいテンプレートに設定されている
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br/>
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>
</div>をばっさり削除して、下のタグに置き換えてください。ここでは2つのパターンを挙げておきますのでいずれかお好きな方をお選びください。３．１は貼り付けるだけ（再構築は必要）ですぐ使えます。３．２はスタイルシートで ul タグと li タグの設定が必要です。ツリー化スクリプトを利用される場合は３．２をお使いください。
３．１ br タグと "└" で表示
<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1" default="Anonymous"$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><br /></MTCollateIfHeader>
└ <a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$><br />
</MTCollateList>
</div>３．２ ul タグと li タグで表示
<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1" default="Anonymous"$> </MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><ul></MTCollateIfHeader>
<li><a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$></li>
<MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>設定が終わったら保存・再構築してください。
４．さらにカスタマイズ
表示したいコメント件数を変更するには、リスト中に赤字で示した数字を変更してください。デフォルトは10件表示するようにしています。
<MTComments lastn="10">またデフォルトでは、エントリー表示順序は新しいものを上に、エントリー内のコメントは古いものを上に表示する設定にしています。
エントリーの表示順を、古いものを上にする場合は以下のように変更してください。
<MTCollateList sort="entry_key:#:+ comment_id:#:+">エントリー内のコメントの表示順を、新しいものを上にする場合は以下のように変更してください。
<MTCollateList sort="entry_key:#:- comment_id:#:-">またエントリーの表示順序は最新コメントを受け取った順番で表示するようにしています。
2006.11.13
リストに encode_html 属性を追加しました。
2007.05.28
投稿者名が無記名の時に「Anonymous」を表示するよう変更しました。
そういえば
ダジャレ・トラックバック・ピープル始めました
大変長らくお待たせ致しました。タイトルの通り「ダジャレ・トラックバック・ピープル」を開始致しました。
トラックバック・ピープルの仕組みを一応説明しておきますと、予め作成した特定の話題（ここではダジャレ）のトラックバック用URLに対して記事をトラックバックすると、予めサイト内に設定したスクリプトを通じて新着10件が表示されるというものです。私のサイトはとりあえずトップページ右カラムに「Trackback People」というタイトルでスクリプトを設定してみました。
以下、スクリプトの取得方法です（ご存知の方は読み飛ばしてください）。スクリプト取得はBlogPeopleの会員であることが前提です。
- BlogPeopleトップページより「新着トラックバック・ピープル」の最後にある「トラックバック・ピープル トップへ」をクリック
- トラックバック・ピープル内話題検索のテキストボックスに「ダジャレ」を設定して「検索」をクリック
- TB URLの「JS/RSS」という赤いバナーをクリック（要ログイン）
- ページ下にある3つのバナーより表示したいもののラジオボタンを選択し、その下の「生成」をクリック
- スクリプトが表示されるのでコピーして表示したいテンプレートにペースト
または
- BlogPeopleの会員ページの左メニュー「その他サービス/ツール」をクリック
- 「3.トラックバック・ピープル」の「（詳細へ）」をクリック
- 「トラックバックする話題を探す」欄の「IDを指定」のテキストボックスに"2155"を指定して「Go」をクリック
で先の4項にジャンプします。
トラックバックURLは
- http://member.blogpeople.net/tback/02155
です（上記手順の途中でも表示されます）。ネタの内容にかかわらずダジャレ記事を書いたら上記のURLにトラックバックを飛ばしてやってください。
   | また以前より募集しておりました「ダジャレ・トラックバックピープル用バナー」を適当に締め切りまして、Stupid Excuseさん（上）および我楽さん（中）のバナーを採用させて頂きました。運用開始が大変遅くなりましたことお詫びするとともに応募くださったことに感謝致します。本当にありがとうございました。 でトラックバックピープル紹介ページに表示されるバナーをどちらにしようかと3日ほど悩みましたが決められなかったので、自分で作った（下）のを設定しました（おいおい…）。という訳で計3つをローテーションで使いたいと思います。 |
このツナ缶
Gateway707JP 購入
自宅サーバはOS：Windows2000/CPU：Pen? 2.8GHz/メモリ：512MB/ハードディスク40GBという、まあまあのスペックですが、諸事情でカスタマイズ用の作業マシンは5年ほど前に購入したCompaq Presario 3st224（CPU：Celeron 663MHz/メモリ256MB等）というものを使っておりました。ウェブサイト閲覧くらいなら問題ないにしても、Movable Type の再構築時間等を行うとレスポンスが悪く、結構ストレスかかります。ポップアップもサクッと開かなかったり。
その話とは別に、「BTX」という規格を昨年末辺りに某雑誌で知り、かなり気になっていました。
BTX（Balanced Technology eXtended）とは、Intel社が2003年秋に発表したPC/AT互換機用のマザーボードのフォームファクタで、現在の主流であるATXの後継規格と言われています。
BTXの大きな特徴は、パーツの配置変更による効率的な冷却、つまり発熱対策です。ATXでは発熱の多い個々のパーツにファンを装着する必要があったのですが、BTXでは部品全体が平行に並ぶようにCPUや拡張スロット等の配置を変更しています。これでケース前後に大型のファンを装着するだけでケース内の空気の流れがスムーズになるという訳です。
で「次にPCを購入するならこの規格かな」と思っていたら、Gateway よりBTX規格のデスクトップが早々に登場しました。最初 705JP が登場、その後ドライブがDVDスーパーマルチになった 707JP が1万円高で登場。先に述べた精神衛生上良くない環境も後押ししてくれて、無駄遣いと思いつつ購入しました。
 |
スペックは CPU：Pen4 550（3.4GHz）/メモリ：1024MB DDR/ハードディスク：250GB/ドライブ：スーパーマルチDVD±R/RW/OS：Windows XPと、目的から考えると過剰スペックですが、他機種と比較したところコストパフォーマンス的にもかなり優れているようです。また気になるBTX効果については「PCのファンは通常より40パーセント遅い速度で回転するので放熱性と静音性に優れている」とのこと。ちなみに立ち上げたところ最初だけファンが唸りますが、すぐに回転数が落ちて静かに回ってくれてます。
一度日本から撤退した実績のある Gateway なのでサポートがやや心配なところですが、ひとまず快適なPC環境を得られたといったところです。ちなみに購入したのは2月ですがエントリーがのびのびになってしまいました。
このマシンで数年耐えてくれることを期待しています。
ポップアップウィンドウ追加
本サイトにコメント用のポップアップウィンドウを数ヶ月ぶりに復活させました。ポップアップのリンクは、メインページ本文下にあるコメント数を表示している部分と、個別エントリーアーカイブの本文下です。メインページのリンク位置は直感的ではありませんが、Permalink のコメント欄リンクを残しておきたい＆横幅がこれ以上長くなるのを避けたい、の2つの理由からここに配置しました。暫定的な意味も含んでます。
ポップアップは、エントリーや頂いたコメントを確認しながら入力する時に便利なので以前より使いたいと思ってました（「コメントは表示順を逆にすればいいのでは？」というツッコミはなしで）。これでコメント入力の利便性が向上することを期待しています。
それに伴い、ポップアップしない場合のコメント・プレビュー／コメント・エラー画面のサイドバー表示をなくしました（3カラムは残してます）。また軽微な修正として、個別エントリーアーカイブの本文下にあった投稿月日が、タイトル上の投稿月日と重複していたので削除しました（投稿時間のみ表示）。
ポップアップ化に関しては下記のエントリーで公開しておりますので、興味のある方はご覧ください。
男前豆腐
この「男前豆腐」、ブログを始めた昨年の6?7月頃にとあるサイトで見かけて以来、一度食べてみようと思っていたのですが購買意欲にいまひとつ勢いがつかず、そのまま時間だけが流れていきました。
今日、スーパーで買い物をしている時、たまたま一つだけ残っているのを発見。「そういえば食べてなかったな…」と思い出したように衝動買い。苦節9ヶ月（笑）、ようやく購入に漕ぎ着けました。
陳列されている状態では派手な上部のデザインにしか目がいかないのですが、手にとってみるとパッケージの下は上げ底ならぬ「下げ底」のようなスペースが設けられており、ここに豆腐に含まれている余分な水分が溜まる仕組みになっています。これが豆腐の味をさらに良くする工夫のようです。
手で簡単に開くパッケージを開けると、不敷布のようなもので中身がすっぽりと包まれており、布を広げると手作りの雰囲気溢れる美味しそうな豆腐が姿を現します。
とりあえず何もつけずに試食（というか本食）。買った時は「ちょっと大きいか？」と思いましたが、豆腐本来の旨みがあり、そのままでいくらでも食べられました。途中で「食べ飽きる」ということがありません。
味が良いのはもちろんですが、驚いたのは箸をつけた時のその滑らかな感触。いつも食べる豆腐に箸をいれると「切る」「割る」という感じであるのに対し、この豆腐は「箸が豆腐に優しく包み込まれる」という印象です。程よい弾力がお箸に心地よく伝わってきて、それだけでもこの豆腐の質の良さを実感することができるでしょう。
購入したのは「男前豆腐ミニ」。300gで約200円。また機会があれば購入したいと思います。
月送りカレンダー（横型・リアルタイム版）
 月送りカレンダーの横型・リアルタイム版です（画像は完成イメージ）。これまでにエントリーしたタイプと設定内容が若干異なるのため別エントリーにしました。PHPが利用できることが前提です。スタイルは公開テンプレート（2カラム）のデザインに合わせています。3カラム版等、他のテンプレートをお使いの方はテンプレート・スタイルシートのサイズに関する設定を適宜変更してください。なお今回のデザインは体験手記レポート部さんのサイトを参考にさせて頂きました。ありがとうございました。 以下設定方法です。 |
０．カレンダー用ディレクトリ設定
Movable Type のバージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、その下に表示されたフォームに下記の内容を設定します。
- アーカイブURL：http://ブログURL/archives/
- アーカイブパス：アーカイブURLまでのパス
例えば当サイトであれば
- アーカイブURL：http://www.koikikukan.com/archives/
- アーカイブパス：/home/koikikukan/public_html/archives
という具合になります。
バージョンが 3.1x-ja 以前の場合は、管理メニューの「ウェブログの設定」→「基本設定」の「ローカル・アーカイブ・パス」と「アーカイブのURL」に、上記と同様、
- ローカル・アーカイブ・パス：アーカイブURLまでのパス
- アーカイブのURL：http://ブログURL/archives/
を設定します。
１．カレンダー用アーカイブテンプレートの設定
バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。 次画面で下記を設定してください。
- テンプレート名：カレンダー（名称は何でもOKです）
- このテンプレートにリンクするファイル：（設定不要）
- テンプレートの内容：下記
設定が終わったら「保存」をクリックしてください。
２．カレンダー用スタイルシートの設定
バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「インデックス」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「インデックステンプレート」右の「新しいインデックステンプレートを作る」をクリック。 次画面で下記を設定してください。
- テンプレート名：カレンダー用スタイルシート（名称は何でもOKです）
- 出力ファイル名：calendar.css
- このテンプレートにリンクするファイル：（設定不要）
- テンプレートの内容：下記
設定が終わったら「保存」をクリックし、次の画面で「このテンプレートを再構築する」をクリックしてください。
３．カレンダーテンプレートを月別アーカイブに関連付け
バージョンが 3.2-ja 以降の場合、予め、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成 」をクリックして下記の設定を実施してください。 バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。
- アーカイブの種類：月別
- テンプレート：カレンダー（←１項で設定した「テンプレート名」です）
「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、１項で付与した「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「アーカイブ・ファイルのテンプレート（3.1x 以前）」または「出力フォーマット（3.2-ja 以降）」に下記を設定してください。
- アーカイブ・ファイルのテンプレート（3.1x-ja 以前）：下記
<$MTArchiveDate format="calendar/%Y/%m/index.php"$>- 出力フォーマット（3.2-ja 以降）：下記
calendar/%y/%m/index.phpこれがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。
４．各テンプレートの修正
カレンダーを利用するテンプレート（メインページ・カテゴリーアーカイブ・日別アーカイブ・個別エントリーアーカイブ等）のタイトル設定の下に下記のタグ（青色部分）を追加してください。テンプレートの拡張子は .html のままで問題ありません。
<!-- タイトル開始 -->
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
<!-- タイトル終了 -->
<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="698" height="20" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>またサイドバーに設定されているカレンダータグ（赤字部分）を削除してください。コメントアウトをされても構いませんが、その場合でも再構築の対象になります（つまりその分再構築時間がかかります）ので、削除されることをお勧めします。
<div class="side">
<div class="calendar">
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
：
（省略）
：
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>５．スタイルシート設定
スタイルシート（styles-site.css）に、カレンダー外側のスタイルを示す設定（青色部分）を追加してください。リストは .description の下に追加した例です。
/* サイト説明文 */
.description {
color: #999999;
font-size: 12px;
}
#globalnavi {
text-align: center;
padding-bottom: 5px;
border-bottom : 1px solid #666699;
} ここまでの設定が終わったらすべてを再構築して、カレンダーがタイトル下に表示されることを確認してください。
ここまでの設定で一応表示されるようになりますが、Mozilla系ブラウザでは iframe のサイズ認識がIE系ブラウザより若干狭くなるため、カレンダーの表示が欠けてしまいます。HTMLタグまたはスタイルシートの設定で回避できれば良いのですが、現状はその方法が不明ですので、JavaScriptを使用して回避することにします。その方法を６?８項で説明します。なお、iframe の幅（４項の height 属性）をやや大きい値で設定しておけばこの設定は不要です。
６．util.jsのダウンロード
下記の download をクリックして「スクリプトのページ」にジャンプし、一番下にある util.js のリンクをクリックして、ローカル・サイト・パスにアップロードしてください。なお今回のカスタマイズには 1.011.02 以上が必要ですのでご注意ください。
７．スクリプト設定
JavaScriptを起動することによってブラウザによる表示の違いを吸収します。固定3カラムの場合は７．１のみ、可変3カラムの場合は７．１と７．２を実施してください。
７．１ iframe幅を調整するスクリプトを追加
iframeタグの幅を調整します。４項で設定したMTタグのすぐ下に下記の設定（青字部分）を追加してください。
<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="698" height="19" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>
<script type="text/javascript">
<!--
setAttributeByTagNameAndAttribute(1, 'iframe', 0, 'height', '27');
-->
</script>setAttributeByTagNameAndAttribute 関数は指定したタグの属性値を変更するためのものです。タグ名で指定するため、複数のタグが取得されるケースを考慮して何番目のタグかを指定できます。
赤字に示したパラメータでタグ等を指定します。左から、
- ブラウザ種別（0：IE系／1：Mozzila系）
- タグ名（iframe タグ）
- タグの出現順（ページの中で最初に出現する場合は"0"）
- 属性名（height 属性）
- 属性値（27）
です。リストはMozilla系のブラウザに対して設定を有効にする例です。IE系のブラウザに対して設定を有効にしたい場合は、最初のパラメータに "0" を指定してください。他の ifame タグ（広告等）が今回設定したタグの位置より前に出現する場合は、例で設定している "0" を "出現順 - 1" に変更してください。例えばカレンダーの iframe タグが2番目に出現するのであれば設定値は "1" になります。
７．２ top からの表示開始位置を調整するスクリプトを追加
可変3カラムの左右サイドバーの開始位置（縦方向）は絶対値指定です。つまりブラウザによってカレンダーの表示幅が変化することで左右カラムの開始位置がずれたように見えてしまうため、このずれを調整します。
左カラム終了および右カラム終了タグの後ろにそれぞれ下記の設定（青字部分）を追加してください。
：
</div>
<!-- 左サイドバー終了 -->
<script type="text/javascript">
<!--
setStyleById(1, 'links-left', 'top', '125px');
-->
</script>
：
：
</div>
<!-- 右サイドバー終了 -->
<script type="text/javascript">
<!--
setStyleById(1, 'links-right', 'top', '125px');
-->
</script>
：setStyleById 関数は指定した id 属性のスタイルを変更するためのものです。赤字に示したパラメータでスタイルおよび値を指定します。左から、
- ブラウザ種別
- id 属性名（links-left/links-right タグ）
- スタイル（top）
- 値（125px）
です。リストはMozilla系のブラウザに対して設定を有効にする例です。IE系のブラウザに対して設定を有効にしたい場合は、最初のパラメータに "0" を指定してください。
８．JavaScriptのインクルード
４項で修正したテンプレートの <head>～</head> の間に下記を追加してください。
<script type="text/javascript" src="<$MTBlogURL$>util.js" charset="utf-8"></script>９．注意事項
毎月1日、カレンダーが存在しない状態でブラウザの更新を行ったりコメント投稿があると正常に表示されなくなります（File Not Found になります）のでご注意ください。なおカレンダーを生成するにはエントリーの投稿が必要です（一旦公開投稿すればエントリーを後で削除してもカレンダーは残ります）。 この不具合を解消する場合は、月送りカレンダー・毎月1日に表示されない不具合を改善を参照してください。
2005.03.20 追記
カレンダーテンプレートの </span> の制御に修正もれがありましたので修正しました。Luna's*PaPaさん、ご指摘ありがとうございました。
2005.03.28 追記
可変3カラム使用時の説明を追加しました。またスタイルシートの #globalnavi に text-align: center; を追加しました。
2005.04.03 追記
月跨り時の動作について注意事項を追記しました。
2005.06.05 追記
月跨り時の不具合を改善する記事へのリンクを追記しました。
2005.06.23 追記
記事の内容についての不備等を見直しました。
2005.06.27 追記
日付の枠が右寄りになる不具合を修正しました。
2005.08.23 追記
calendar.css について再構築を行うことを追記しました。
2005.10.31 追記
3.2-ja 用の記述を追加しました。
Creative Commons ライセンス更新
creative commons japan blogged の記事より、Creative Commons のライセンスが更新されたようです。
日本法準拠版ライセンスが2.0から2.1に更新されました。こちらからライセンスを選択すると自動的に2.1になります。バージョン・アップの内容は、表記ミスの修正のみで、大枠に変更はありません。
Magic White さんが早々に記事をあげられていました。
Creative Commons Licenseが2.0→2.1へ
また書籍も出版されたようです。
 クリエイティブ・コモンズ―デジタル時代の知的財産権 posted with amazlet at 05.03.15 ローレンス・レッシグ 林 紘一郎 椙山 敬士 若槻 絵美 上村 圭介 土屋 大洋 クリエイティブ・コモンズ・ジャパン NTT出版 (2005/03) 売り上げランキング: 5,678 通常4日間以内に発送 |
Movable Type 3.1x 2カラム テンプレート（サイズ固定・右メニュー）
Movable Type 3.1x用の2カラムテンプレートで、サイズ固定の右メニュー版です（左メニュー版はこちらからどうぞ）。日本語版での動作確認バージョンは、3.151-ja/3.17-ja/3.171-jaです。ご利用の前にテンプレートのページをご覧くださいますよう、お願い致します。
画像の通り、デフォルトテンプレートと同じようにカラムの両脇および下に背景が存在します（画像をクリックすると原寸大の画面がポップアップします）。
サイドメニューのカテゴリーリストはデフォルトテンプレートではツリー表示になっていますが、本テンプレートでは一覧表示する設定に変更しています（カテゴリーのページにジャンプした時に該当カテゴリー配下しか表示されないため）。なおツリー表示の設定もカスタマイズした状態でコメントアウトしていますので適宜入れ替えてください。
テンプレートご利用時、下記に示すスタイルシート1行目の文字コード（青色部分）をウェブログの文字コード（mt.cfgのPublishCharsetに指定された文字コード）に合わせてください。初期値は Movable Type デフォルトの"UTF-8"に設定しています。他の文字コードを設定されている場合は"euc-jp"または"Shift_JIS"に変更してください。
@charset "utf-8"; /* 文字コード */カレンダーは日別アーカイブにリンクさせていますので、テンプレート入れ替え後（前でもいいです）に管理メニュー左下の「ウェブログの設定」をクリック→次ページ右上の「アーカイブの設定」をクリック→次ページの真中あたりの「アーカイブ」欄の「日別」にチェックを入れて再構築してください。
カラム幅を変更する場合はスタイルシートの下記の部分を適宜変更してください。
#box {
width: 700px; ←2カラム全体の幅
}
#content {
width: 514px; ←中央カラムの幅（右border分の1px差し引く）
}
#links-left{
width : 155px ; ←右カラムのテキスト幅
}値は、
- 全体の幅 = (中央カラム幅 + 1) + (右カラムのテキスト幅 + (15*2))
となるように設定してください。右カラムの15*2はメニューカラム全体とテキストとのパディングです。右辺が左辺の値を超えるとカラムがずれますのでご注意ください。
個別エントリーアーカイブ等を1カラムにされる場合やポップアップを利用される場合は下記のエントリーにあるテンプレートを抜粋してご利用ください。
不明な点または不具合等ございましたらご連絡ください。なお本テンプレートはスタティックページでのみ確認しています（ダイナミックページ動作環境が構築できておりません）。ダイナミックページに関する問題については他のサイトにてご確認ください。
スタイルシート
メインページ
カテゴリーアーカイブ
日付アーカイブ
個別エントリーアーカイブ（1カラム：3.17-ja以降）
3.17-ja より Typekey 関連のタグが変更になっています。
変更箇所の詳細は「Movable Type 3.17-ja 個別エントリーアーカイブの変更点について」をご覧ください。
個別エントリーアーカイブ（1カラム：3.151-ja以前）
コメント・プレビュー
コメント・エラー
2005.08.11 追記
個別エントリーアーカイブに3.17-ja?用を追加しました（1カラム用）。またIE6の後方互換モードによる解釈誤り（text-align および width と padding の分離）を対処しました。
Movable Type 3.1x 2カラム テンプレート（サイズ固定・左メニュー）
Movable Type 3.1x用の2カラムテンプレートで、サイズ固定の左メニュー版です（右メニュー版はこちらからどうぞ）。日本語版での動作確認バージョンは、3.151-ja/3.17-ja/3.171-jaです。ご利用の前にテンプレートのページをご覧くださいますよう、お願い致します。
画像の通り、デフォルトテンプレートと同じようにカラムの両脇および下に背景が存在します（画像をクリックすると原寸大の画面がポップアップします）。
サイドメニューのカテゴリーリストはデフォルトテンプレートではツリー表示になっていますが、本テンプレートでは一覧表示する設定に変更しています（カテゴリーのページにジャンプした時に該当カテゴリー配下しか表示されないため）。なおツリー表示の設定もカスタマイズした状態でコメントアウトしていますので適宜入れ替えてください。
テンプレートご利用時、下記に示すスタイルシート1行目の文字コード（青色部分）をウェブログの文字コード（mt.cfgのPublishCharsetに指定された文字コード）に合わせてください。初期値は Movable Type デフォルトの"UTF-8"に設定しています。他の文字コードを設定されている場合は"euc-jp"または"Shift_JIS"に変更してください。
@charset "utf-8"; /* 文字コード */カレンダーは日別アーカイブにリンクさせていますので、テンプレート入れ替え後（前でもいいです）に管理メニュー左下の「ウェブログの設定」をクリック→次ページ右上の「アーカイブの設定」をクリック→次ページの真中あたりの「アーカイブ」欄の「日別」にチェックを入れて再構築してください。
カラム幅を変更する場合はスタイルシートの下記の部分を適宜変更してください。
#box {
width: 700px; ←2カラム全体の幅
}
#content {
width: 514px; ←中央カラムの幅（左border分の1px差し引く）
}
#links-left{
width : 155px ; ←左カラムのテキスト幅
}値は、
- 全体の幅 = (中央カラム幅 + 1) + (左カラムのテキスト幅 + (15*2))
となるように設定してください。左カラムの15*2はメニューカラム全体とテキストとのパディングです。右辺が左辺の値を超えるとカラムがずれますのでご注意ください。
個別エントリーアーカイブ等を1カラムにされる場合やポップアップを利用される場合は下記のエントリーにあるテンプレートを抜粋してご利用ください。
不明な点または不具合等ございましたらご連絡ください。なお本テンプレートはスタティックページでのみ確認しています（ダイナミックページ動作環境が構築できておりません）。ダイナミックページに関する問題については他のサイトにてご確認ください。
スタイルシート
メインページ
カテゴリー・アーカイブ
日付アーカイブ
個別エントリーアーカイブ（3.17-ja以降）
3.17-ja より Typekey 関連のタグが変更になっています。
変更箇所の詳細は「Movable Type 3.17-ja 個別エントリーアーカイブの変更点について」をご覧ください。
個別エントリーアーカイブ（3.151-ja以前）
コメント・プレビュー
コメント・エラー
2005.08.11 追記
個別エントリーアーカイブに3.17-ja?用を追加しました（1カラム用）。またIE6の後方互換モードによる解釈誤り（text-align および width と padding の分離）を対処しました。
Creative Commons ライセンスの適用範囲
先日より適用している Creative Commons ライセンスの適用範囲をこのサイトについての一番下に記しています。範囲を明確にして他人の著作権に触れないようにすることが目的です（そもそもそのような記事をあげるのがいけないというツッコミはなしで）。
適用範囲を明確にしても実際に利用される部分は今まで通り変わりないと思います。意味がないようですが大変意味のある定義です。
あと、このライセンスがどの位利用されているのか、少し前の記事で Creative Commons ライセンスの利用統計が公開されていましたのでリンクしておきます。
リアルタイムカレンダー（横型）
Category：[カレンダー]
Tag：[Calendar, Customize, Information, MovableType]
Permalink
突然ですがリアルタイムカレンダーに横型用を作りました。下記のエントリーに追加しましたのでご利用ください。
なお table タグを使わないケースを想定して書いてます。動作は一応確認しておりますが不具合等ございましたらご連絡ください。
フォントに Verdana が使われている理由
このブログや公開テンプレート（というか「すちゃらかCSS素材集」より頂いた時の設定をそのまま使ってます）のスタイルシートのフォントには
font-family: Verdana, Arial, sans-serif;という指定がされています。各フォントがカンマで区切られて3つ並んでいるのは、優先順位（最初のフォントがみつからなかった場合、次のフォントを使用）を示しています。
このエントリーでは青字で示している Verdana という、よくみかけながらもその存在についてあまりよく分かっていなかったフォントについて調べてみました。
欧文フォントは主に2種類の書体が用いられます。デザイン関係の方ならご存知と思いますが、1つはセリフ（Serif）体、もう1つはサンセリフ（Sans Serif）体です。「セリフ」とは「活字の始点または終点にあるひげ飾り」という意味で、サンセリフは「セリフがない」という意味です。前者の代表的なフォントは Times New Roman や Century、後者の代表的なフォントには Helvetica やスタイルシートで設定している Arial があります。日本語で言えば明朝体がセリフ、ゴシック体がサンセリフに似ています。違いは下記のページをご覧頂ければ一目瞭然です。
ということで、Verdana はサンセリフに属します。
さて、Verdana についてWebを検索してみたところ以下の記事を発見しました。
- ARTIFACT ―人工事実―：font-familyに指定する英語フォント
- Hotwired Japan：ウェブ・タイポグラフィー・チュートリアル：でしゃばりのピクセル
- Radium Software Development：Verdana
このフォントはヒンティング ?書体のアウトラインをそのまま少ないピクセル数の文字に変換せずに、できるだけ元の書体に近い、変な形にならないように調整を加える?という技術が使われています。下記のページでヒンティングの仕組みが分かりやすく説明されています。
ということで、Verdana はスクリーン上で読むのに非常に適しています。今更ながらこのフォントが使われている理由がよくわかりました。
それとは別に、他によく使われているフォントとしては Tahoma/Trebuchet MS/Comic Sans MS 等があるようで、右上でオブジェと化している stylesheet にフォント切り替え用リンクを追加してみました。それぞれのフォントの特徴や他フォントとの違いが確認できると思います。サイズ等の微調整や状態保持はしておりませんのであしからず。
今のところお遊び用ですがご要望あれば util.js に追加します。
2005.08.19 追記
現在はリンクを外しています。
Movable Type の PHP モジュール化の仕組みについて（その4：再構築オプション利用方法）
この回ではモジュール化による再構築オプションの有効な利用方法について説明します。
「再構築オプション」は各テンプレート編集画面の右上にあるチェックボックスを指します。このオプションはユーザー・マニュアル：テンプレートの編集にある通り、チェックボックスにチェックをつけるとエントリー投稿時等に再構築対象となり、逆にチェックを外すとテンプレート編集画面等から再構築をしない限り情報は更新されません。つまりモジュール化において「再構築オプション」にチェックをする・しないが、再構築時間短縮の重要なポイントになります。
ということでチェックするための目安となる表を作ってみました。
| モジュール化対象データ | 再構築が必要な契機 | チェック要否 |
| ブログタイトル・バナー・バージョン等 | 管理画面等からの変更時 | 不要 |
| カレンダー | 次表参照 | |
| 最近のエントリー | ||
| カテゴリーリスト | ||
| 月別アーカイブリスト | ||
| 最近のコメント | コメント投稿時 | 要 |
| 最近のトラックバック | トラックバック受信時 | |
チェック要否の要・不要は主観的な判断です。タイトル等の恒常的に普遍なモジュールは基本的に再構築対象とせず、「最近のコメント」「最近のトラックバック」のモジュールは「再構築オプション」にチェックをつけておかないとコメントが投稿された時にコメント内容がリアルタイムにページに反映されなくなります。
カレンダー?月別アーカイブリストについての再構築要否については再構築契機を細分化できるので、次表に分けてみました。
| データ | 再構築が必要な契機 |
| カレンダー | その日の最初のエントリー投稿時 |
| 最近のエントリー | エントリー投稿時（更新時は不要） |
| カテゴリーリスト | 件数表示：エントリー投稿時 件数非表示：新カテゴリーでのエントリー投稿時 |
| 月別アーカイブリスト | 件数表示：エントリー投稿時 件数非表示：月の最初のエントリー投稿時 |
カテゴリーリスト・月別アーカイブリストの「件数表示・非表示」の意味は次の通りです。
例えば月別アーカイブリストにエントリー件数を表示していない（=件数非表示）場合、ある月のリンク（月別アーカイブページへのリンク）を月別アーカイブリストに追加するためには、その月の最初のエントリー投稿後に「月別アーカイブリスト」のモジュールを一度だけ再構築すればよく、このモジュールは次月まで再構築する必要はありません。ただしエントリー件数を表示している（=件数表示）場合はエントリー投稿後に再構築しないと件数が反映されません。
カテゴリーリストも同様です。
基本的には、タイトル等のスタティックデータ用モジュールを除いた全てのモジュールに再構築オプションをチェックしておけば利便性が良いのですが、レンタルサーバ等で500エラーが頻発する場合、再構築オプションのチェックを外し、エントリー投稿後に必要なモジュールを個別に再構築するのが良いのではないかと思います。
削除動作については管理メニューから再構築が促されるので省略しています。
それぞれのモジュールを個別のインデックステンプレートとして登録すると、数が増えてメニューや管理が煩雑になるので、いくつかのモジュールをまとめてひとつのインデックステンプレートとするのもよいでしょう。またアーカイブページによってモジュールのレイアウトが異なる場合は、レイアウト用の中間的なモジュールを作ると個別モジュールが再利用できて便利です。
| その1：概要 |
| その2：具体的動作とMTIncludeとの違い |
| その3：変更方法 |
| その4：再構築オプション利用方法 |
Movable Type の PHP モジュール化の仕組みについて（その3：変更方法）
PHPモジュール化をする場合の具体的な変更方法です。
１．モジュールを引き込む元となるテンプレートの変更
これはメイン・ページや各アーカイブテンプレートが対象になり、以下の作業を行います。
１．１ インデックステンプレート（メインページ等）の場合
- 管理メニューの「テンプレート」をクリック
- インデックス・テンプレート欄より該当のテンプレートをクリックし、テンプレート内部のモジュール化したい部分を切り取ってメモ帳などにペースト（切り取った位置を忘れないようにコメントでマークしておくか、先に3を実施）
- テンプレートから切り出した部分を
に置き換え（filenameについては２、３項を参照）<?php readfile("filename"); ?> - XML宣言の修正
- 出力ファイル名の拡張子を .php に変更
- 保存・再構築
- .htaccess対処（必要に応じて）
- 拡張子が .html で配置されている旧ファイルを削除（必要に応じて）
4.は、テンプレートの1行目にXML宣言
<?xml version="1.0" encoding="<$MTPublishCharset$>"?>がある場合、5.で拡張子を index.php にして表示すると、ページが真っ白になるか
Parse error: parse error, unexpected T_STRING in [...] on line 1というようなエラーが表示されます。これはXML宣言がPHPとして誤解釈されてしまうための事象です。
これを回避するには、XML宣言を削除するか、
<? echo('<?xml version="1.0" encoding="<$MTPublishCharset$>"?>') ?>とPHPが解釈可能なフォーマットに変更してください。
5.は、例えばメインインデックスの場合
- index.html → index.php
に変更します。これを行わないと 3.でテンプレート内に記述したPHPスクリプトが動作しません。
6?8は２項の部品化が完了してから行ってください。6.は5.でファイル名を変更することによって検索エンジンからのアクセスや PageRank 等に影響を及ぼすため、必要に応じて .htaccess によるリダイレクト（?.html でアクセスされたら ?.php を表示すること）を行います。エントリーがある程度たまっている方は .htaccess を使われることをお勧めします。詳細については別の機会に記述します。
8.は、7.の対処が不要な場合、例えばファイル名が index.html かつURLにファイル名が指定されていない場合等に行います。index.html を削除する理由は、拡張子によってファイルアクセスの優先順位が異なるためです。
例えば、新しく index.php を生成しても同じディレクトリに index.html が残っていると、サーバは index.html に先にアクセスします。つまり一般的には .html や .htm が .php より優先される訳です（厳密にはサーバの設定に依存しますが一般的にはこのようになっています）。
なお index.html を削除する前に URLで http://～/index.php まで指定してファイルの正常性を確認されることをお勧めします。生成に失敗した状態で index.html ファイルを削除するとアクセスが全て index.php に流れてしまうためです。
１．２ カテゴリー・アーカイブ／日付アーカイブ／個別エントリーアーカイブの場合
下記の手順で変更します。
- 管理メニューの「ウェブログの設定」をクリック
- 次のページ右上の「アーカイブの設定」をクリック
- 「アーカイブ」欄にある「アーカイブ・ファイルのテンプレート」に青色部分
- 個別：<$MTArchiveDate format="%Y/%m/%d-%H%M%S"$>.php
- 日別：<$MTArchiveDate format="%Y/%m/%d/"$>index.php
- 月別：<$MTArchiveDate format="%Y/%m/"$>index.php
- カテゴリー：cat_<$MTCategoryID$>.php
- 変更後、保存・再構築します。
２．モジュールの作成
次に部品となる方のテンプレートを作成します。
- 管理メニューの「テンプレート」をクリック
- インデックス・テンプレートの右上にある「新しいインデックス・テンプレートを作る」をクリック
- 下記の項目を設定
- テンプレートの名前：任意
- 出力ファイル名：任意
- テンプレートの内容：アーカイブテンプレート等から切り出したメニューリスト等のMTタグをペースト
- 再構築オプション：チェック
以下は「最近のエントリー」をモジュール化する場合の例です。
- テンプレートの名前：最近のコメント
- 出力ファイル名：recentEntries.html
- テンプレートの内容：
<div class="sidetitle" id="entryname">
Recent Entries
</div>
<div class="side"id="entrylist">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>「テンプレートの名前」は管理メニュー上で表示するだけのものですので日本語でもOKです。「出力ファイル名」はこのテンプレートが再構築された時、ローカル・サイト・パスに出力されるファイル名です。一応拡張子として「.html」を付与していますが、このファイルに直接URL指定してアクセスする必要がなければ「.txt」でも大丈夫です。なおこのファイル名が１項の元テンプレートに埋め込む filename になります。
「再構築オプション」はモジュール化で重要なキーとなる部分です。ここでは「チェック」にしていますが、具体的な内容は次回詳しく説明したいと思います。
３．パスについて
１項の filename の補足ですが、ファイル名にはパスが必要です。パスは絶対パス（ルートとなるディレクトリからファイルが配置されているディレクトリまで）または相対パス（参照元のファイルがある位置からファイルが配置されているディレクトリまで）で記述します。テンプレートと同じ位置にあればパス名は不要ですが、モジュールは各アーカイブから利用されるのが一般的ですので、一律絶対パスを用いるのが良いでしょう。
４．コメント・プレビュー/コメント・エラーでのインクルードについて
この項目は我楽さんより頂いたご質問の反映ということで急遽追加致しました。これらのテンプレートは実体が存在しない（CGIプログラムによるHTTPレスポンス）ため、設定方法が異なります。また現状ではPHPスクリプトが評価できる方法が不明であるため（環境設定に依存？）、このファイルからインクルードする場合は
<$MTInclude file="filename"$>を用います。
５．PHPスクリプトをインクルードする場合
上記のサンプルではMTタグが記述され（て実体に展開され）ただけのファイルをインクルードしていますが、PHPスクリプトが記述されたファイルをインクルードする場合もあると思います。
例えば、いくつかのモジュールのインクルードをまとめた
<?php readfile("recentEntries.html"); ?>
<?php readfile("recentComments.html"); ?>
<?php readfile("recentTrackbacks.html"); ?>という内容の中間的なモジュール hogehoge.php を想定します。この hogehoge.php をさらにメインインデックス等からインクルードする場合には、
<?php include("hogehoge.php"); ?>と記述します。readfile はファイルを読み込むだけの関数ですが、include はファイルを読み込み、さらにそれをプログラムとして評価するための関数です。拡張子は実験したところ任意の名称で問題ないようですが、単体でPHPスクリプトの動作を確認する場合等を考慮して .php にする方が良いでしょう。
逆に言うと、PHPスクリプトが記述されていないファイルをインクルードする場合は
<?php readfile("?.html"); ?>で大丈夫ということです。インクルードが何段にもなる場合は、インクルード元に近い方から include 関数を用いて、一番末端だけ readfile 関数または include 関数を使用、という構造になります。
以上です。
当初、「PHPスクリプトでないファイルの拡張子は .html でOKです」というオチにするだけの予定だったのですが、最初のサンプルで、
<?php include("http://?.html"); ?>としていたところ、その1の Ogawa::Memoranda さんから頂いたコメントにある通り「PHPプログラムを含まないのであれば includeで読み込むのは得策ではありません」「サーバーサイドにあるファイルはURL指定する必要はありません」とのことで、記述を変更致しました。勉強不足、失礼致しました。あわせてご指摘感謝致します。
なお他のサーバにあるファイルを読み込む場合は上記のようなURL指定を行います。
ということでミイラ取りがミイラになりました。（つづく）
2006.03.17
XML宣言の修正について追記しました。
Movable Type が 2004 Best Product Award 受賞
 Movable Type ニュースに出てる通り、Movable Type3.0 がインプレス社の INTERNETmagazine ウェブクリエイション部門 2004 Best Product Award に選ばれたました。お世話になっているプロダクトが選ばれるというのは1ユーザとしても喜ばしいです。おめでとうございます！ |
Movable Type の PHP モジュール化の仕組みについて（その2：具体的動作とMTIncludeとの違い）
それではPHPモジュール化の具体的な動作です。ブログURLというほぼ不変なデータを例に、モジュール化を利用する場合・しない場合の動作の違いを踏まえて説明します。
まずモジュール化をしない場合です。私のサイトで DisplayURL というインデックステンプレートを作り、displayURL.html というファイルを生成するものとします。テンプレートには下記の内容が設定されています。
<html>
<body>
<$MTBlogURL$>
</body>
</html>このファイルを再構築すると
<html>
<body>
http://www.koikikukan.com/
</body>
</html>となり、MTBlogURL が本来のURLに解釈されたスタティックページ displayURL.html が出来上がります。仮にこのファイルがメインページであれば、MTBlogURL は再構築される度に変換されることになります。
次にモジュール化をした場合の例です。同じく DisplayURL というインデックステンプレートを作り、ファイル名は displayURL.php と設定します（拡張子の理由は後述）。テンプレートには下記の内容を設定します。
<html>
<body>
<?php readfile("blogURL.html"); ?> *1
</body>
</html>モジュール化の場合にはモジュール、つまり緑色で示した blogURL.html という部品を作っておく必要があります。そのために BlogURL という名称で別のインデックステンプレートを作り、blogURL.html を生成する設定を行います。テンプレートの中身は下記の1行です。
<$MTBlogURL$>予めこのモジュールを単体で再構築しておくと
http://www.koikikukan.com/という内容のスタティックページ blogURL.html が生成されます。
さて、この状態で先の displayURL.php を再構築しても
<html>
<body>
<?php readfile("blogURL.html"); ?>
</body>
</html>と、内容は変化しません（この「変化しない」ということが重要）。そしてこの後ブラウザで displayURL.php にアクセスすると、このページのHTMLソースは、
<html>
<body>
http://www.koikikukan.com/
</body>
</html>となり、ブラウザに
http://www.koikikukan.com/が表示され <?php ～ ?> の部分がページ表示時に初めて変化することがお分かりになると思います。つまり displayURL.php の再構築時、MTBlogURL を変換するオーバーヘッドが少なくなるということを示しています。
ここでは MTBlogURL という単純なデータで説明しましたが、これが「最近のエントリー」や「カテゴリーリスト」、「月別アーカイブリスト」等で、しかも各アーカイブページテンプレートに対し前者の形で設定されていると、結構なオーバーヘッドになると考えられます。
上記の説明をまとめると、MTタグは再構築時に解析され・実体に変換されますが、PHPスクリプトはページを表示する時に変換された実体をインクルードします。表に示すと下記のようになります。
| MTタグ | PHPスクリプト | |
| 再構築 | 実行 | － |
| ページ表示 | － | 実行 |
再構築によるオーバーヘッドを減少させるためには、赤字で実行される部分をできるだけ青字の部分で実行できるように移行する訳です。
前回のもうひとつのパターン
<$MTInclude module="hogehoge"$>との違いですが、これはを再構築時にモジュール hogehoge をインクルードしてスタティックページを生成するので、効果は再構築と同様という認識です。
なお、PHPがファイルを「phpプログラムである」と認識させるための条件があります。それはPHPスクリプトが記述されたファイルの拡張子が .php であるということです。*2
もしモジュール化したサンプルの拡張子が .html であれば、ブラウザに表示される際のHTMLソースは
<html>
<body>
<?php readfile("blogURL.html"); ?>
</body>
</html>となるでしょう（つまり何も変わりません）。（つづく）
| その1：概要 |
| その2：具体的動作とMTIncludeとの違い |
| その3：変更方法 |
| その4：再構築オプション利用方法 |
*1：<?php ? ?> は「PHPスクリプト」と呼ばれるもので、PHPはこの部分を「PHPのために書かれたプログラムである」と認識して（ページを表示するちょっと前に）処理を実行します。
*2：ApacheというHTTPサーバで「拡張子 .php であればPHPを実行させる」という設定をするので、厳密に言えば環境依存です（設定によっては .html のままPHPを動作させることも可能です）が、ここでは一般的な作法に基づいて説明しています。
タイムスリップグリコ・思い出のマガジン（その2）
2冊目は「平凡」でした。
この雑誌には「ビバビバ！ニューヒット」というヒットソング集の付録があるようで、それもミニチュア版でついていました。
Movable Type の PHP モジュール化の仕組みについて（その1：概要）
ブログでは「PHPモジュール化」という言葉を耳にされる機会が少なくないと思います。このサイトでもよく用いる言葉で用語集にも掲載していますが、PHPモジュール化についての具体的な説明がなかったので改めて書いてみたいと思います。
用語集の繰り返しですがモジュールは「部品」を指します。よく使われるのはサイドバーメニューのモジュール化です。具体的には「最近のエントリー」や「最近のコメント」等のメニューリストのMTタグ部分をメインインデックスやカテゴリーアーカイブ等のテンプレートから分割して、それらをひとつひとつの部品として新たなテンプレートを作ります。
メインインデックスやカテゴリーアーカイブ・日別アーカイブ・個別エントリーアーカイブには部品となった
メニューリスト本体は存在せず、部品をインクルードするタグ
<? readfile("/blog/koikikukan/hogehoge.html"); ?>を埋め込みます。
PHPモジュール化のメリットは、部品化による作業効率の向上に加え、再構築時の性能向上、つまり時間短縮が挙げられます。
性能の話の前に再構築について分かる範囲で説明致します。スタティックページ生成の場合、再構築を実行することによってテンプレート上の全てのMTタグがMovable Typeのプログラムで解釈され、HTML文書（スタティックページ）が生成されます。仮に半年分で100の記事があり、それらが10カテゴリーに振り分けられているとすれば、サイト全体の再構築を行った場合、計117（メインページ×1・月別アーカイブ×6・カテゴリーアーカイブ×10・個別エントリーアーカイブ×100）のHTMLページが一気に生成されることになります。
生成される情報の中にはリアルタイムな再構築が不要なデータ（ブログ名等）、あるいはエントリーやコメント投稿時のみ再構築されればよいものもあり、これらについては各アーカイブページの再構築と同時に新たに生成する必要はほとんどありません。
つまりPHPモジュール化とは、再構築を頻繁に行う必要がない情報を部品としてまとめておき、必要な時だけ再構築を実行することで時間短縮する手法と認識しています。ただし劇的な短縮を望むものではありません。
PHPを利用しない「テンプレート・モジュール（管理メニュー「テンプレート」の一番下）」を用いたモジュール化もありますが、これは単に情報を部品として分割するだけなので、性能向上というメリットはありません。もちろん作業効率向上やテンプレート編集時の視認性向上という意味ではPHPモジュール化と同様です。ちなみにテンプレートモジュールを用いる場合のインクルードタグは
<$MTInclude module="hogehoge"$>となります。両者の違いは次回ご説明致します。（つづく）
ユーティリティスクリプト（その1：フォントサイズ切り替え）
Category：[アクセシビリティ]
Tag：[Accessibility, Customize, FontSize, JavaScript]
Permalink
汎用的に使えそうなプログラムを集めていく予定のユーティリティスクリプトを作ってみました。第1弾はブラウザ種別でフォントサイズを自動的に切り替えるスクリプトです。
私はIE系のブラウザをメインブラウザで利用しているのですが、Netscape や Firefox の Mozilla系ブラウザではサイドバーのフォントサイズがやや小さくなります。
以前はスタイルシート切り替えを用いてフォントを切り替えられるようにしていたのですが、一度切り替えるという必要があり、ユーザビリティ上好ましくないのでとりやめました。
それ以降放置状態になっていましたが、最近 JavaScriptのスキルがあがり（？）、フォントサイズを切り替えられることが分かりましたので、これに古典的手法であるブラウザ判定を加えて実装しました。
とりあえず私のサイトではMozilla系ブラウザの場合、1pxだけフォントサイズを大きくするように設定しています。設定もれでページによってJavaScriptエラーが出ているかもしれませんが予めご容赦ください。
以下、設定方法です。
１．util.js ダウンロード
下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで util.js をクリックし、同じファイル名でご自身のPCに保存してください。
本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。
２．util.js 配置
util.js をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。
３．テンプレート修正
フォントサイズを変更したいMTタグが存在する各テンプレートに util.js 起動スクリプトを追加します。起動スクリプトに設定する項目については後述します。
ここではメニューリストを対象に記していますが適用範囲はこの限りではありません。またダウンロードしたファイルを修正する必要はありません。
３．１ タグ名＋クラス属性名による指定（changeFontSizeByTagNameAndClassName）
指定したタグおよびクラス属性部分に設定されているフォントサイズを変更します。
changeFontSizeByTagNameAndClassName(appId, 'tagName', 'tagAttribute', 'fontSize');使用例（最近のエントリー・id 属性なし）
<div class="sidetitle">
Recent Entries
</div>
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>
<script type="text/javascript">
<!--
changeFontSizeByTagNameAndClassName(1, 'div', 'side', '10px');
//-->
</script>タグ＋クラス属性指定なので、例えば div タグ＋class 属性値が side の場合、ページの一番最後（または最後の該当指定タグの直下）に指定すれば対象のものを全て一括変換します。この方法を用いると設定は楽ですが設定箇所が後方になるため、ページ表示からフォントサイズ変換までに若干遅延が発生する場合がありますのでご注意ください。
３．２ id 属性による指定（changeFontSizeById）
指定した id 属性のタグに設定されているフォントサイズを変更します。
changeFontSizeById(appId, 'id', 'fontSize');使用例（最近のエントリー・id 属性あり）
<div class="sidetitle" id="entryname">
Recent Entries
</div>
<div class="side" id="entrylist">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>
<script type="text/javascript">
<!--
changeFontSizeById(1, 'entrylist', '10px');
//-->
</script>id 属性はページに1つしか設定できないため指定箇所が増えますが、折りたたみ等の起動スクリプトが既に存在するのであればその中に1行追加すればOKです。
３．３ id属性＋内部タグ名による指定（changeFontSizeByIdAndTagName）
指定した id 属性のタグに括られたタグに設定されているフォントサイズを変更します。
changeFontSizeByIdAndTagName(appId, 'id', 'tagName', 'fontSize');使用例（サブカテゴリーリスト）
<div class="sidetitle">
Categories
</div>
<div class="side" id="category">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
<script type="text/javascript">
<!--
changeFontSizeByIdAndTagName(1, 'category', 'ul', '10px');
//-->
</script>例の通り、サブカテゴリーリスト等の再帰的にタグが現れる場合に用います。
設定項目
appId
- 名称：ブラウザ種別
- 用途：対象ブラウザを"0"または"1"で指定
- 設定値：0：IE系/1：Mozilla系
fontSize
- 名称：フォントサイズ
- 用途：変更するフォントサイズ
- 設定値：任意（em指定/px指定）
id
- 名称：id 属性名
- 用途：フォントサイズ変更対象の id 属性名
- 設定値：任意の id 属性名
tagAttribute
- 名称：属性名
- 用途：フォントサイズ変更対象のタグに属する class 属性名
- 設定値：任意の属性名
tagName
- 名称：タグ名
- 用途：フォントサイズ変更対象のタグ名
- 設定値：任意のタグ名
４．util.js インクルード文挿入
３項で設定した各テンプレートの <head>～</head> の間に下記のタグを追加してください。charset 属性は util.js の文字コードを指定してください。
<script type="text/javascript" src="<$MTBlogURL$>util.js" charset="utf-8"></script>本記事の転載は設定例含めご自由に行ってください。「私はこう設定しました」という使用例を書いて頂けるとありがたいです。記事からのプログラムファイルへの直リンクもOKですが、予告なしにリンクを変更する場合がありますのでこの記事またはスクリプトのページへのリンクをお勧めします。
ブログ等でプログラム改変の記事を投稿される場合は util.js に基づいていることと、改変内容を明記してください。
3Dウェブ検索実験新サービス
 以前ユーザ登録していた「3Dウェブ検索実験新サービス」よりメールが届きました。この実験は、NTTレゾナントとNTT情報流通プラットフォーム研究所（以下、NTT研究所）が2003年10月7日より2004年3月31日（延長で2005年3月31日まで）まで共同で実施しているもので、目的はNTT研究所が開発した「InfoLead（総覧型3Dウェブ検索サービス）」の商用環境での利用検証評価です。これはNTTレゾナントが運営するポータルサイト「goo」との連携により共同で行われています。*1 |
今回は3Dウェブ検索用ブラウザ「FieldExplorer」のバージョンアップのお知らせでした。バージョンアップの内容は
- マルチメディア検索
- シームレス（クリック不要な）検索が可能
- 検索結果ページをInternetExplorerのお気に入りに追加したり、お気に入りを3Dウェブ検索で参照が可能
ということです。
これまでは FieldExplorer を利用するために一旦ユーザ登録をしなければならなかったのですが、今回のバージョンアップでユーザ登録不要になりました。
このブラウザの特徴は、左上イメージのように検索結果が縮小画像で表示されるところ。検索結果はコントロールパレットというものを使って行い、かなり直感的に操作できるように工夫されています。表示された画像のレイアウトは何パターンからか選べるようになっており、表示結果を眺めながら操作するだけでも結構楽しめます。
欲を言えば画像がもう少し鮮明に見えてほしいこと、またハイスペックなマシンでないと動作がやや厳しいというのが難点ですが、これまでにない画期的なブラウザかと。なかなかお勧めの一品です。
ダウンロードは、先のリンクから進むか、FieldExplorerのダウンロードからダウンロードできます。インストールは簡単にできましたが、デスクトップのショートカットやスタートメニューの設定が正常にできませんでした（私だけ？）。デフォルトでインストールすれば
- C:\Program Files\InfoLead\FieldExplorer\fexplore.exe（またはfexplore）
が実行ファイルなので、これをクリックすればブラウザが開きます。
基本的な検索操作は、左上にあるテキストボックスに検索文字列を設定して、その右にある「ウェブ」をクリックすると検索結果が表示されます。実際に操作をする「コントロールパレット」という画面は「表示」→「コントロールパレット表示」で表示されます。「近づく」「遠ざかる」等で検索結果をスクロールします。
*1：gooラボ・3Dウェブ検索実験についてより引用
サイドバーにアフィリエイト広告表示
アクセストレードに登録して（以前の Linux World の記事もそうです）提携企業のアフィリエイト広告をトップ右に設置しました。
すでにご存知と思いますが、アフィリエイト広告のリンクには主にテキストリンクと画像リンクがあります。今回はテキストリンクを選択して Google Adsense 風にアレンジして配置してみました。IDGジャパンはテキストリンクがないので画像を使用しています。
配置・内容等は適宜見直していきたいと思います。
