Movable Type 4.2x 書籍のまとめ
Movable Type 4.2x の書籍のまとめです。
Movable Type 4.2x の書籍は、これまでのバージョンに比べかなり多く刊行されています。ということで、自著を含め、購入した 4.2x 本について、それぞれの特徴などをまとめてみました。主観的な感想になりますが、書籍を購入される時の参考になれば幸いです。
出版日の古い順に紹介します。掲載されていないものは順次追加します。
| 書籍情報 | 詳細 |
|---|---|
 ブログ簡単パワーアップ Movable Type4 スーパーカスタマイズテクニック 藤本 壱 技術評論社 2008-07-02 |
|
 Movable Type 4.2 パーフェクトガイド 荒木 勇次郎 毎日コミュニケーションズ 2008-07-31 |
|
 Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。 加藤 善規/平澤 隆/両見 英世 インプレスジャパン 2008-09-12 |
|
 基本からしっかりわかる Movable Type 4.2 カスタマイズブック（Web Designing Books） 大藤 幹 毎日コミュニケーションズ 2008-09-20 |
|
 Movable Typeデザインカスタマイズブック MT4.2対応 クリエイターのためのValue Design 下野 宏/岡下 明宏/下野 理子/伊野 亘輝 ソフトバンククリエイティブ 2008-09-27 |
|
 Movable Typeで今日から始めるカスタムブログ 4.2完全対応 岡田 庄司 秀和システム 2008-10 |
|
 Movable Typeで作る絶妙なブログサイト 4.2対応 蒲生 睦男 シーアンドアール研究所 2008-11-26 |
|
 これからはじめる MovableTypeの本 <MovableType4.2対応版> (自分で選べるパソコン到達点) #fc0 やまもと いずみ+ふじかわ まゆこ 技術評論社 2009-01-07 |
|
 MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現! 藤本 壱 ラトルズ 2009-02 |
|
 DreamweaverとMovableTypeで作る テンプレートカスタマイズレッスン 森 和恵 技術評論社 2009-03-27 |
|
 Movable Typeプラグイン開発入門 関根 元和 ラトルズ 2009-04 |
|
![Movable Type逆引きデザイン事典[4.2/4.1対応]](http://ecx.images-amazon.com/images/I/51p0cmzoLLL._SL160_.jpg) Movable Type逆引きデザイン事典[4.2/4.1対応] 荒木 勇次郎/高山 一登/菱川 由理 翔泳社 2009-04-21 |
|
 即戦プロ技 Movable Typeデザインテンプレートコレクション エクストラコミュニケーションズ 毎日コミュニケーションズ 2009-05-13 |
|
ヘルシアスパークリング
ペットボトル飲料は、以前から「クリスタルガイザースパークリング」を好んで飲んでます。
基本的にスパークリング系が好きなので、クリスタルガイザースパークリング以外のものもときどき試していますが、5月頃に発売された「ヘルシアスパークリング」が最近は結構気に入ってます。
「ヘルシア」といえば、やや割高感のある小さいペットボトルのお茶を思い出しますが、こちらは 500ml のペットボトルです。レモン味で、お茶の苦味はありません。茶カテキンは540ml 含んでいます。
 | ヘルシアスパークリング 花王 売り上げランキング : 20441 Amazonで詳しく見る by G-Tools |
| (お徳用ボックス) ヘルシア スパークリング 500ml×24本 花王 売り上げランキング : 20441 Amazonで詳しく見る by G-Tools |
スパークリング系が好きな方は一度お試しください。コンビニではあまりみかけないのですが、ミニストップにはありました。
スパークリング系が苦手な方は「ヘルシアウォーター」がお勧めです。最近は期間限定でウメ味も出ています。
 | ヘルシアウォーター 500mL ×24本セット 花王株式会社 売り上げランキング : 47239 Amazonで詳しく見る by G-Tools |
Movable Type のブログ記事に表示する画像のサイズを制御する
Movable Type のブログ記事に挿入した画像の表示サイズを制御するカスタマイズです。
ここでは次のようなサンプルを提供します。
- 元画像の幅が 200px 以上であれば、200px のサムネイルを表示
- 元画像の幅が 200px 未満であれば元画像を表示
完成イメージ
１．基本
画像の幅は MTAssetProperty タグに property="image_width" を与えることで取得できます。ここでは取得した値を変数 width に保存し、MTIf タグで判定します。
元画像の表示は、img 要素の src 属性に MTAssetURL タグを与えます。サムネイル画像の場合は、img 要素の src 属性に MTAssetThumbnailURL タグを与えます。サムネイルは事前に作成する必要はなく、このサブテンプレートが実行された時点で自動的に作成します。
なお、サムネイルを生成するには ImageMagick の利用が必要です。
<mt:SetVar name="size" value="200" />
<mt:Entries>
<mt:EntryAssets>
<mt:AssetProperty property="image_width" setvar="width" />
<mt:If name="width" lt="$size">
<p><img src="<mt:AssetURL />" alt="<mt:AssetFileName />" /></p>
<mt:Else>
<p><img src="<mt:AssetThumbnailURL width="$size" />" alt="<mt:AssetFileName />" /></p>
</mt:If>
</mt:EntryAssets>
</mt:Entries>２．サムネイルの場合は元画像へのリンクを表示する場合
サムネイルに元画像へのリンクを表示する場合は、１項の MTAssetThumbnailURL タグ（と img 要素）の代わりに、MTAssetThumbnailLink タグを利用します（青色部分）。MTAssetThumbnailLink タグを使わずに、MTAssetThumbnailURL タグと MTAssetURL タグを組み合わせても構いません。
<mt:SetVar name="size" value="200" />
<mt:Entries>
<mt:EntryAssets>
<mt:AssetProperty property="image_width" setvar="width" />
<mt:If name="width" lt="$size">
<p><img src="<mt:AssetURL />" alt="<mt:AssetFileName />" /></p>
<mt:Else>
<p><mt:AssetThumbnailLink width="$size" alt="<mt:AssetFileName />" /></p>
</mt:If>
</mt:EntryAssets>
</mt:Entries>いずれも、赤字の値を変更すれば、表示する画像の幅を変更できます。また、(X)HTML のマークアップは適宜変更してください。
DoCoMo T-01A 購入
約2年ぶりに携帯を買い替えました。新しい機種は DoCoMo T-01A です。
１．経緯
これまで使っていた P503i のカメラが壊れて数ヶ月が経ち、いい加減、買い換えようと思い始めました。
キャリアは DoCoMo のままで、当初 P503i 同様、ワンセグ付きのものを考えていましたが、よく考えると移動中などはワンセグよりもネットを見ることが多いので、いっそのことスマートフォンにしようと思い立った次第です。
世間では iPhone が流行っているので、私自身、T-01A についてよく知らなかったのですが、ネットで色々調べてみると「iPhone に対抗できる機種はこれだけ」みたいなことも書かれており、なかなかよさそうだという感触を得られました。iPhone と戦う気はありませんが。
２．T-01A のメリット
まず一番に挙げられるのは画面の大きさで、4.1 インチ・480×800 のワイドVGA です。
本体サイズはiPhone よりやや大きく、やや薄いという感じです。重さは iPhone とほとんど変わりません。
タッチパネルは感圧式です。iPhone は静電式で、指の腹や静電式用のスタイラスが必要ですが、感圧式は爪やペンなどでも反応します。私はギターを弾く関係で右手の爪を少し伸ばしており、静電式だと右指ではうまく押せないので、購入にあたってこれは大きなアドバンテージになりました。
購入してからも、指の腹で操作するより、ほとんど爪を使ってます。やや小さいキーもうまくタッチでき、大変重宝しています。
あと、T-01A の OS は Windows Mobile なので、Excel や Word など、Office 系のアプリケーションが使えます。また、まだ使っていませんがワイヤレスLAN、Bluetooth も装備されています。
３．T-01A のデメリット
これまでの携帯から変更するにあたって一番の大きな違いは、iモードメールをそのまま使えなくなることです。iモードメール自体は残すことができますが、iモード.net に加入し、ウェブメールのような方法でアクセスすることになります。
また通常の携帯のようにプッシュ式のメールを受信するには mopera に加入する必要があります（iモードメールとは別に mopera のアドレスを取得す、そのメールアドレスを利用）。
ネットで調べると、iモードメールをプッシュする裏技もあるようです。
また、「おさいふケータイ」も使えません。
４．購入価格
バリューコース（現金一括払い）+端末購入サポート（=2年縛り）で、定価（約66000円）から31500円引きになり、さらにポイント4000点ほどと、よく分からない「機種変更限定クーポン（5000円引き）」で、3万は超えるだろうと思っていたら、25000円ほどで変えました。
「機種変更限定クーポンって何ですか？」と店員さんに聞いたら、「DoCoMo から情報が公開されていないのでよくわかりませんが、10人に一人くらい該当するようです」という回答でした。とりあえず何かに当選したようです。
５．使用感
購入して2日経った状態での感想です。
一番多い利用はインターネットのアクセスで、ニュース、はてなブックマーク、Twitter 等を眺めています。ブラウザは Windows Mobile 6 ですが、CSSはもちろん、JavaScript や Ajax もかなり正確に表現してくれます。YouTube も PC で眺めるのと同様に楽しめます。
さすがにダウンロードは ADSL や Bフレッツ並にはいきませんが、7.2M（HSDPA）なので、それほどストレスにはなりません。1GHzCPUを搭載しているおかげで、閲覧時のスクロールなどの操作は非常に快適です。PC 版 IE6 と同じく文字サイズ変更（最大・大・中・小・最小）もできるので、拡大すれば読むのに不便は感じません。
「フローティングパッド」というものを使えばカーソルでの移動も可能です（ほぼ爪ですべての操作ができるので使っていませんが）。なお、スタイラスは付属しています。
６．T-01AにできてiPhoneにできないこと
スマートフォン、ﾄﾞｺﾓT-01Aとi Phoneの比較からの抜粋です。
- キーボード、マウスなど外部入力装置の接続
- microSD、USBメモリなど外部メモリの接続
- インターネットブラウザ（IE）上でYouTubeを再生
- マルチタスク（複数アプリケーションの同時立ち上げ）
- ユーザーによるバッテリーの交換
T-01A はヘッドホンのミニプラグはそのまま挿せません（変換プラグが付属しています）。その代わり、Bluetooth のワイヤレスヘッドホンが使えます。
７．その他
価格.com の口コミ掲示板を読むと、「Security Scan」を起動していると結構な確率でフリーズするようなので、使用開始と同時に無効にしました。また付属のマイクロSD（8GB）も問題らしく、16GBのものに交換した方がいいみたいですが、今のところ8GBのもので不具合は発生していません。
８．関連記事
ReTweet プラグイン
Movalbe Type のブログ記事に Twitter の Retweet 用のリンクを表示する「ReTweet プラグイン」を紹介します。例えば「Movable Type 4.31 リリース」の記事にある Retweet 用のリンクをクリックすれば、次のような画面に移動します。
ここでは、プラグイン配布元の「BSDあれこれ」さんの記事を参考に、以下カスタマイズ方法を紹介します。
１．プラグインのダウンロード
下記のページの後方にある「ReTweetMaker 0.2 (WWW::Shorten::Bitlyなし）」のすぐ下にあるリンクからプラグインアーカイブをダウンロードし、任意のフォルダに保存してください。
２．プラグインのインストール
プラグインアーカイブを解凍し、それぞれのファイルを次のようにアップロードしてください。
- retweetmaker.cgi をアプリケーションディレクトリにアップロードし、ファイルのパーミッションに実行権を付与
- lib フォルダ配下の ReTweetMaker.pm だけをアプリケーションディレクトリの lib にアップロード
- plugins フォルダ配下の ReTweet フォルダを丸ごと plugins ディレクトリにアップロード
ブログ管理画面より「システム」→「プラグイン」でプラグイン一覧を表示し、次のように表示されればOKです。
３．プラグインの設定
ブログ管理画面（システム管理画面ではありません）の「ツール」→「プラグイン」でプラグイン一覧画面を表示し、「Retweet」→「設定」をクリックして、プラグインの設定を行ないます。
設定項目の意味はそれぞれ次の通りです。
- Your Twitter name
- Twitter のユーザー名
- Your bit.ly name
- bit.ly のユーザー名（アカウントを持っていない場合はbit.lyの右上にある Sign Up をクリックして、次の画面（下）でアカウントを作成してください）
- Your bit.ly API
- bit.ly の API Key を設定します（API Key は bit.ly にサインイン後、画面右上の account をクリックした次の画面（下）に表示されます）
参考：bit.lyサインアップ画面
参考：bit.ly API Key
４．動作確認
ここまでの設定で、プラグインが正常に動作する（=記事冒頭の画面に遷移する）ことを確認します（必須の作業ではありません）。
Twitter にログイン後、アプリケーションディレクトリにアップロードした retweetmaker.cgi に、任意のブログ記事番号（公開されているもの）を付与した URL でアクセスします。
http://<アプリケーションディレクトリURL>/retweetmaker.cgi/<ブログ記事ID>- 当サイトの例：
- http://www.koikikukan.com/cgi-bin/koikikukan/retweetmaker.cgi/2822
アクセスした後、Twitter の力フォームに、
RT @<Twitterのユーザー名> "<ブログ記事タイトル>" <bit.lyのURL>が表示されればOKです。
私の場合は、最初の設定で「bit.ly のURL」が表示されなかったので、API Key を一度Reset したら正常に表示されるようになりました。
５．テンプレートの修正
ブログ記事ページに Retweet 用リンクを表示するため、テンプレートの修正を行ないます。
「既定のブログ」であれば、ブログ記事管理画面の「デザイン」→「テンプレート」をクリックし、アーカイブテンプレートの「ブログ記事」をクリックし、青色の部分を追加します。
...前略...
<span class="separator">|</span> <a href="<$mt:EntryPermalink$>#trackbacks"><$mt:EntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)" none="トラックバック(0)"$></a>
</mt:IfPingsActive>
| <a href="<mt:CGIPath />retweetmaker.cgi/<mt:EntryID />" target="_blank" title="この記事をretweetする">ReTweet This!</a>
</div>
</div>
...後略...これで次のように表示されます。
あとはブログ記事を再構築すれば完成です。メインページやアーカイブページに表示する場合も同じテンプレートタグで大丈夫です。
PowerEdit プラグイン v0.08
公開中の「PowerEdit プラグイン」に不具合があったため、バージョンアップしました。
１．改善内容
- ウェブページの一括編集画面で、プラグインで追加したフィールドの変更内容が保存されない不具合を修正しました。
２．ダウンロード
最新版のプラグインは下記のページよりダウンロードしてください。今回入れ替えるのは、５項の「PowerEdit.zip」のみです。
Movable Type のページ分割によるナビゲーションの前後ページ表示を絞り込む（改）
以前公開した「Movable Type のページ分割によるナビゲーションの前後ページ表示を絞り込む」で、表示するページ数を常に一定にできるよう、機能を追加しました。
１．比較
以下、offset モディファイアに「2」を設定した場合の、機能追加前と機能追加後の表示です。offset モディファイアとは、現在表示中のページから前後に表示するページ数を指定するためのものでます。「2」を設定すれば、現在のページと前後ページ含め最大5ページ分が表示されますが、機能追加前では、末端のページのオフセットは切り捨てられます。
機能追加前
1ページ目
2ページ目
5ページ目
9ページ目
10ページ目
機能追加後
機能追加後は、切り捨てられた分のオフセットを反対側のオフセットに加えることで、常に同じページ数を表示することができます。
1ページ目
2ページ目
5ページ目
9ページ目
10ページ目
以下、カスタマイズ方法です。機能追加後の表示を行いたい場合は必ず４項の設定を行なってください。
２．MTPaginate プラグインによるページ分割の設定
下記の記事を参考にして、MTPaginate プラグインを Movable Type に設定してください。
注：２項を実施する前に、必ずページ分割が正常に動作することを確認してください。すべてを一気に行うと、正常に動作しなかった場合の切り分けができなくなります。
３．プラグインファイルの修正
MTPaginate/lib/MTPaginate.pm を任意のエディタで開き、赤色部分（v1.28 では 497行～506行辺り）を削除し、青色部分を追加します。
$format_title = " . sprintf(' title=\"$format_title\"', \$i)" if $format_title;
$res .=<<PHP;
for(\$i = $start; \$i <= $end; \$i++) {
if(\$i > $start)
echo '$separator';
if(\$i == \$paginate_current_page) {
echo sprintf("$format_current", \$i);
} else {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
}
PHP
if ($format_all && $place_all eq 'after') {下が置き換えた後のリストです。
$format_title = " . sprintf(' title=\"$format_title\"', \$i)" if $format_title;
my $offset = $args->{offset} || 2;
my $fixed_offset = $args->{fixed_offset} || 0;
$res .=<<PHP;
if ($fixed_offset) {
if (($end - \$paginate_current_page) <= $offset) {
\$before_offset = $offset + ($offset - ($end - \$paginate_current_page));
\$after_offset = $offset;
} else if ((\$paginate_current_page - $start) <= $offset) {
\$before_offset = $offset;
\$after_offset = $offset + ($offset - (\$paginate_current_page - $start));
} else {
\$before_offset = $offset;
\$after_offset = $offset;
}
} else {
\$before_offset = $offset;
\$after_offset = $offset;
}
for (\$i = $start; \$i <= $end; \$i++) {
if (\$paginate_current_page == 'all') {
if(\$i > $start)
echo '$separator';
if(\$i == \$paginate_current_page) {
echo sprintf("$format_current", \$i);
} else {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
} else {
if (\$i > $start) {
if (\$i == \$paginate_current_page && \$i != 1) {
echo '$separator';
} else if (\$i < \$paginate_current_page) {
if (\$paginate_current_page - \$i < \$before_offset) {
echo '$separator';
}
} else {
if (\$i - \$paginate_current_page < (\$after_offset+1)) {
echo '$separator';
}
}
}
if (\$i == \$paginate_current_page) {
echo sprintf("$format_current", \$i);
} else {
if(\$i < \$paginate_current_page) {
if(\$paginate_current_page - \$i < (\$before_offset+1)) {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
} else {
if(\$i - \$paginate_current_page < (\$after_offset+1)) {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
}
}
}
}
PHP
if ($format_all && $place_all eq 'after') {４．offset モディファイアの指定
テンプレートに記述している MTPaginateNavigator タグに offset モディファイアを与えれば、前後に表示するページ数を指定できます。
指定しない場合のデフォルト値は2になっているので、前後2ページを表示します。
<MTPaginateNavigator offset="3">とすれば、表示ページの前後3ページのナビゲーションを表示します。
５．fixed_offset モディファイアの指定
テンプレートに記述している MTPaginateNavigator タグに fixed_offset="1" を与えれば、末端のページでも、offset モディファイアで設定した値になるように表示します。指定しない場合のデフォルト値は 0 です。
<MTPaginateNavigator offset="2" fixed_offset="1">とすれば、表示中のページにかかわらず、常に5ページのナビゲーションを表示します（ページ分割数が5ページ以下の場合を除く）。
Movable Type 4.31 リリース
アナウンスが1日遅れましたが、Movable Type 4.31 がリリースされました。
Movable Type 4.31 Release Notes
Movable Type 4.31 では、PHP/ASPでページ分割機能を利用する場合のセキュリティ対策等に加え、いくつかのバグが修正されています。
セキュリティ対策については、archive_type パラメータが存在する場合のみ、template_id パラメータを許容し、拡張子が php かasp である場合は、template_id パラメータの使用を許可しないようになりました。ただし、新たに追加された環境変数 SearchAlwaysAllowTemplateID により、常に template_id を使用することも可能です。
また、ブログ記事編集画面のアイテム管理部分がなんとなくローカライズされました。
GD を利用するときのサムネイル画像が、8ビットカラーから24ビットカラーになっています。MTIfArchiveTypeEnabled タグは、「公開しない」を設定したアーカイブマッピングで true を返却しません、などなどです。
最新版はそれぞれ以下のページからダウンロードできます。
末端で
Movable Type 4.261 でのダイナミックパブリッシングエラーについて
Category：[トラブルシューティング]
Tag：[DynamicPublishing, MovableType, TroubleShooting]
Permalink
Movable Type 4.261 で、特定のケースでダイナミックパブリッシングが正常に動作しないケースがありました。ご質問を頂きましたので、本エントリーにて情報展開致します。
１．事象
Movable Type 4.261で、新規作成したアーカイブテンプレート（確認したのはブログ記事リストのみ）でダイナミックパブリッシングを行ない、該当のページにアクセスすると、以下のエラーとなります。
エラーとなるのは新規追加分のみで、以下の場合は正常に動作します。
- 既存のアーカイブテンプレートのダイナミックパブリッシング
- 既存のアーカイブテンプレートにアーカイブマッピングを追加した場合（例えば「既定のブログ」テンプレートセットの「月別ブログ記事リスト」に日別アーカイブを追加）のダイナミックパブリッシング
ダイナミックパブリッシングの変更方法は、
- 公開プロファイルによる設定
- アーカイブテンプレートのテンプレートマッピング設定画面による個別の設定
で同様の事象となるようです。Windows/Linuxいずれも同様です。データベースはMySQLで動作確認しています。すべての環境で同様の事象が発生するかどうかは不明です。
4.25では正常に動作しました。4.3 も Windows では正常に動作することを確認しました。
２．原因
MT 4.3 のリリースノートを見ていると、以下が該当するように思われます。
[PATCH] Dynamically published weblog pages display "Page not found" error
Fixed an error where viewing a dynamically published weblog page results in a "Page not found" error being displayed if the template which publishes the page has a template_identifier field value of "NULL" in the mt_template table in the Movable Type database.
これを見る前にとりあえずシックスアパートにフィードバックしてしまいました。既知のバグでしたらすいません。
３．対処方法
2009.08.22 追記しました。「うろうろ...」さんの「MTOS導入日誌 2009年07月29日」に対処方法がありました。
php/lib/mtdb_base.php の 90行目を以下のように修正します。
変更前
and template_identifier != 'backup'変更後
and template_type != 'backup'グーグルに依存し、アマゾンを真似るバカ企業
ネット関連新書の紹介です。
 | グーグルに依存し、アマゾンを真似るバカ企業 (幻冬舎新書) 幻冬舎 2009-07 売り上げランキング : 1006 Amazonで詳しく見る by G-Tools |
本書では、ネットビジネスがうまくいかない理由・儲からない理由を「当たり前にできていない」と説いています。
著者の夏野 剛さんは、NTTドコモの「iモード」を立ち上げたメンバーの一人で、現在は慶應義塾大学政策メディア研究科特別招聘教授となっています。また、ドワンゴ顧問に就任し、ニコニコ動画の黒字化も目指しており、書籍の中でもそのことについて触れられています。
釣り的なタイトルのため、Amazon での評価はあまりよくないのですが、「商品購入前にユーザー登録をさせるサイトはダメ」「（薬事法改正について）自分たちが実生活でやらないことを制度にしてはいけない」「iモードのコンテンツはアウトソーシングして、コンテンツ制作の人材やノウハウがないドコモは一切タッチしない」とか、うなずける内容が色々あり、楽しめました。
- 第1章 日本のウェブビジネスはなぜ儲からないのか
- 第1節 ウェブビジネスに対する幻想を捨てよ!
- ウェブ2.0とはなんだったのか
- ウェブ2.0はフリーマーケットである
- SNSは社会的インフラになり得ない？
- 新しい価値とビジネスモデルを
- 当たり前のことを当たり前にやる
- リアルビジネスでダメな人はウェブでもダメ
- まずは、実店舗でやっていることから着手する
- 第2節 あなたのウェブサイトがダメな理由
- まず登録をさせるサイトはダメ
- 一見とリピーターは、対処を異にすべき
- ユーザーインターフェースを真剣に考える
- ビジネスチャンスを損なう供給者主義
- ウェブビジネスをリアルビジネスに合わせるという愚策
- ネットだけの付加価値を追求すべし
- 官製不況？薬のネット販売規制
- 第3節 ウェブビジネスを停滞させているものの正体
- カニバライゼーションの意味のなさ
- 企業トップのネットに関する無理解
- 日本企業がウェブをうまく使いこなせない最大の理由
- 日本でiPodが生まれなかった理由
- ネットユーザーに建前は通じない
- ウェブとは、単なるツールであることを認識せよ
- 第2章 ウェブビジネスを成功させる鉄則
- 第1節 寡占になりやすいウェブビジネス
- 寡占を引き起こしやすいネットビジネス
- クリティカルマスへの到達が安定をもたらす
- 「後方追い抜き型」のパターン
- ポジティブフィードバックの加速で求められるもの
- 先行逃げ切り型と後方追い抜き型、経営スタイルの違い
- 第2節 ウェブビジネスの本質とは何か
- ウェブビジネスは、裸での勝負
- 企業戦略が世界に晒される時代
- 参入障壁が低いからこそ手抜きはできない
- スタッフの「興味」が生み出す付加価値
- 身の丈に合ったビジネスを
- 第3節 まだまだ伸びる、Eコマース
- Eコマースがもたらした小売業界の構造改革
- 中間取次業者の役割が希薄化
- 顧客リレーションの変化
- 二八の法則とEチケットのいい関係
- Eコマースに向く商品と今後の可能性
- Eコマースがフォローしきれない分野
- 人間が介在しなければ成立しないビジネスに弱い
- 購買喚起のためのアプローチをインターネットが変えた
- ケータイをも巻き込んだEコマース市場のさらなる拡大
- 周りに惑わされず、ビジネスの本質をつかめ
- 第4節 プライシングとユーザーマネージメント
- 課金モデルと広告モデル、どちらがウェブ向きか？
- プライシングの重要性を考える
- コンテンツビジネスのプライシング
- 成功のカギはクオリティとプライシングのバランス
- プライシングのうまさで注目するサービス
- ケータイとパソコン、ビジネスモデルに違いは出ない
- ウェブコンテンツで儲けようとすることへの反発
- ネットユーザーは、企業に対して容赦ない
- 第3章 ウェブビジネスの未来
- 第1節 ウェブ広告の未来
- ウェブと他メディアのマーケティングが根本的に異なる点
- ウェブ広告の身上は確実な効果測定
- ネット広告がこれまで伸びなかったワケ
- 「ネット・ジャック」でブランド力を高める
- マス広告を、ウェブ広告は確実に超える
- ケータイでターゲットにリーチしたモスバーガー
- 未来の広告のカタチ～個人最適化
- 第2節 仮想通貨がウェブビジネスを加速させる ほか
- 電子マネーの成長度
- 電子マネーのビジネスモデルとマーケティング
- 電子マネーとリアルマネーが交錯する
- 電子マネーの普及は衝突の連続
- 「使えていない人」を言い訳にするな
- 第3節 ネットメディアとデジタルコンテンツ
- アメリカメディアのウェブ動画サービス連携例
- ニコニコ動画には政治家も参入
- 回線速度向上に対する無用の期待
- テレビ局にとって、ウェブは本当に脅威なのか
- 新しい価値への恐れが、コンテンツを宝の持ち腐れ状態に
- 若者離れ・広告減のテレビを救うのはITだ
- 新聞社こそ、ウェブの特性を生かせる
- 第4章 旧来型日本企業への提言
- 第1節 ウェブビジネスと現代の日本社会
- ウェブとは、ビジネス戦線を勝ち抜くための"武器"である
- ポリシーなき経営者が会社を潰す
- 権限と責任を与えて初めて生まれる、新しい付加価値
- 『釣りバカ日誌』のハマちゃんが社長になる悲劇
- 多様性のあるところで"和"は機能しない
- インターネットが多様化に拍車をかけた
- ネットリテラシーの低い顧客にビジネスを合わせてどうする！
- 高度成長期の後進国根性は、現代日本をダメにする
- いますぐ英断を！
- 第2節 本当は限りなく高い日本のポテンシャル
- 日本の強みを再確認しよう
- 日本が世界をリードするためにいま、すべきこと
- 日本の将来は明るい
CommentCustomField プラグイン + HighSlide JS
Category：[Highslide JS, コメント, 拡張テンプレートタグ]
Tag：[Comment, CommentCustomField, MovableType, Plugin]
Permalink
Movable Type のコメントにカスタムフィールドを追加する CommentCustomField プラグインと HighSlide JS を組み合わせて、アップロードした画像をズームアップするカスタマイズを紹介します。
以下のサンプルページで画像をクリックして動作を確認してください。
ここでは CommentCustomField プラグインの解説にしたがって、ブログ記事ページにアップロード画像を表示するカスタマイズを行なっていることを前提に説明を進めます。
１．HighSlide JS の設定
HighSlide JS の設定方法は、「Highslide JS でサムネイル画像を拡大表示する 」を参照してください。本エントリーでの解説は省略します。
２．テンプレートの修正
ブログ管理画面の「デザイン」→「テンプレート」をクリックし、「既定のブログ」の場合は「コメント」テンプレートモジュールをクリック、当ブログの配布テンプレートの場合は「コメント詳細」テンプレートモジュールをクリックし、赤色部分を青色の内容に変更します。
変更前
...前略...
<mt:Comments>
...中略...
<div class="comment-content">
<$mt:CommentBody$>
<mt:if tag="CommentCustomFieldAsset">
<p>
<mt:CommentCustomFieldAsset>
<mt:AssetThumbnailLink width="200" />
</mt:CommentCustomFieldAsset>
</p>
</mt:if>
...中略...
</div>
</mt:Comments>
...後略...変更後
...前略...
<mt:Comments>
...中略...
<div class="comment-content">
<$mt:CommentBody$>
<mt:if tag="CommentCustomFieldAsset">
<p>
<mt:CommentCustomFieldAsset>
<a href="<mt:AssetURL />" class="highslide" onclick="return hs.expand(this)"><img src="<mt:AssetThumbnailURL width="100" />" /></a>
</mt:CommentCustomFieldAsset>
</p>
</mt:if>
...中略...
</div>
</mt:Comments>
...後略...ズーム前のサイズを変更する場合は、width="100" の部分を書き換えてください。
ブログ記事ページのサイドバーにブログ記事のコメント一覧を表示する
ブログ記事ページ・ウェブページに、その記事に投稿されたコメント一覧をサイドバーに表示するカスタマイズです。
そもそもコメント一覧はブログ記事本文下に表示されるようになっていますが、記事本文が長文の場合、スクロールせずに最近投稿されたコメントを見たい場合に便利です。また、コメント投稿者名をクリックすれば、該当のコメントまで移動します。
デフォルトテンプレートの設定例
公開テンプレートの設定例
以下、設定方法です。
１．設定方法
ブログ管理画面の「デザイン」→「ウィジェット」をクリックし、次の画面で「ウィジェットテンプレートを作成」をクリック。
以下の内容を設定。
- ウィジェットの名前：ブログ記事のコメント
- ウィジェットの内容：以下のいずれかをペースト
デフォルトテンプレート
<mt:if name="entry_archive">
<mt:if tag="EntryCommentCount">
<mt:Comments lastn="10" sort_order="descend">
<mt:CommentsHeader>
<div class="widget-recent-comments widget">
<h3 class="widget-header">最近のコメント</h3>
<div class="widget-content">
<ul>
</mt:CommentsHeader>
<li><a href="<$mt:CommentLink$>" title="<mt:CommentEntry><$mt:EntryTitle$></mt:CommentEntry>へのコメント"><$mt:CommentAuthor$></a> <mt:commentDate format="%m/%d"$></li>
<mt:CommentsFooter>
</ul>
</div>
</div>
</mt:CommentsFooter>
</mt:Comments>
</mt:If>
</mt:If>公開テンプレートの場合
<mt:if name="entry_archive">
<mt:if tag="EntryCommentCount">
<mt:Comments lastn="10" sort_order="descend">
<mt:CommentsHeader>
<dt class="sidetitle">
Entry Comments
</dt>
<dd class="side">
<ul>
</mt:CommentsHeader>
<li>
<a href="<mt:entryLink$>#c<mt:commentID$>" title="c<mt:commentID$>"><mt:commentAuthor default="Anonymous"></a> <mt:commentDate format="%m/%d"$>
</li>
<mt:CommentsFooter>
</ul>
</dd>
</mt:CommentsFooter>
</mt:Comments>
</mt:if>
</mt:if>設定後、「保存」をクリック。
ブログ管理画面の「デザイン」→「ウィジェット」をクリックし、コメント一覧を表示させたい（任意の）ウィジェットセットの名前をクリック。ここでは例として「3カラムのサイドバー(サブ)」をクリックします。
「利用可能」にある「ブログ記事のコメント」を「インストール済み」にドラッグします。
設定後、「変更を保存」をクリックして全体を再構築すれば完了です。
CommentCustomField プラグイン v0.02（画像のアップロード対応）
Category：[コメント, 拡張テンプレートタグ, 自作プラグイン]
Tag：[Comment, CommentCustomField, Image, MovableType, Plugin]
Permalink
配布中の CommentCustomField プラグインをバージョンアップしました。
１．追加機能
追加した機能は次の通りです。
- 画像のアップロード機能を追加
- 画像情報を表示するテンプレートタグの追加
この機能追加によって、次のように、コメント投稿者がアップロードした画像をコメント一覧に表示できるようになります。
ブログ管理画面では、画像のアップロード先やアップロード可能なファイルサイズの設定も可能です。
また、画像はアイテムとしての管理対象になり、本プラグインで追加した画像情報表示のためのブロックタグ MTCommentCustomFieldAsset で MTAsset 関連タグを組み合わせれば画像情報を自由に表示することができます。
２．ダウンロード
ダウンロードは下記のリンクからどうぞ。
３．追加機能に伴う注意事項
配布元のページでも解説を追加していますが、画像に対応させるために、コメントフォームの form 要素に enctype 属性を追加してください。
変更前
<form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">変更後
<form method="post" enctype="multipart/form-data" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">コメント投稿フォームには、次のサブテンプレートを追加します。input 要素の name 属性と id 属性は変更しないでください。
<div class="field-inner">
<label for="comment-custom-image">画像</label>
<input type="file" name="comment-custom-image" id="comment-custom-image" class="fi" />
</div>また、コメントプレビュー画面には、前の画面で設定した画像のアップロード情報は引き継げません。
Twitter を Google トレンドで見る
ネットで大盛り上がりの Twitter について、Google トレンドでどのくらい検索数の推移があったのか、調べてみました。
本題に入る前の宣伝で恐縮ですが、私もつぶやいてますのでフォローお待ちしています。
１．全世界のTwitter
まずは全世界です。掲載しているグラフはクリックしたら拡大し、もう一度クリックすると元に戻ります。拡大した画像はドラッグすることもできます（以下同様）。
[全世界]
Twitter が始まったのは2006年7月ですが、2007年3月、米国で開催されたイベントSouth by Southwest（SXSW）でのブログ関連の賞の受賞をきっかけに注目されるようになり、2007年の前半から検索が上昇し始めているのが分かります。
そして、今年初めからのユーザーの増加（米国発のマイクロブログサービス「Twitter」の利用者が日本でも順調に増加）とともに、2009年前半から急上昇しているのが分かります。
旗が立っているところのニュースは次のようになっています。
全世界で調べて国内のニュースしか表示されないのは設定不足でしょうか（http://www.google.com/trends で調べても同じ結果でしたが、「その他のニュース記事」をクリックすると海外のニュースも表示されました）。
２．国内のTwitter
次は日本です。
[日本]
全世界とほぼ同じカーブを描いてますが、2007年の第2四半期に検索数がググッと上がるも、一旦落ち着いてしまったのが分かります。また、この初期のヒットに乗じて Twitter 関連書籍が何冊か出版されました。
また、グラフの推移が全世界より1～2ヶ月ほど遅れていることも分かります。
３．地域別のTwitter
地域別も調べてみました。
[東京]
東京は日本の検索数を反映しているといっても過言ではないでしょう。
[大阪]
大阪も東京に近い推移を示していますが、検索の有無の時期がはっきりと分かれています。大阪人気質なんでしょうか（冗談です）。
以下、グラフが生成できた都道府県をずらっと並べました。検索ボリュームが不足しているためか、多くの地域では東京のような2007年からの検索数は出ておらず、ここ最近の流行でようやく上昇してきているのが如実に分かります。
個人的には千葉県だけ大都市と肩を並べて2007年に突出しているのが特筆すべき点と思います。
[北海道]
[宮城]
[群馬]
[茨城]
[千葉]
[埼玉]
[神奈川]
[長野]
[新潟]
[静岡]
[愛知]
[京都]
[兵庫]
[広島]
[福岡]
４．Twitter関連書籍
Twitter!―Twitter APIガイドブック（1,995円）
 | Twitter!―Twitter APIガイドブック 九天社 2007-09 売り上げランキング : 208452 Amazonで詳しく見る by G-Tools |
twitterコミュニケーション・バイブル（1,260円）
 | twitterコミュニケーション・バイブル 秀和システム 2007-11 売り上げランキング : 107511 Amazonで詳しく見る by G-Tools |
Twitter活用ガイド
 | Twitter活用ガイド 河出書房新社 2008-02 売り上げランキング : 49647 Amazonで詳しく見る by G-Tools |
Twitterの本
 | Twitterの本 インプレスジャパン 2009-02-26 売り上げランキング : 107979 Amazonで詳しく見る by G-Tools |
佐渡へ
CommentCustomField プラグイン
Category：[コメント, 拡張テンプレートタグ, 自作プラグイン]
Tag：[Comment, CommentCustomField, MovableType, Plugin]
Permalink
Movable Type のコメント投稿フォームに、テキストフィールド・テキストエリアのフィールド追加や、画像のアップロードを可能にするプラグインを公開します。
下の画像は、コメントに画像のカスタムフィールドを追加し、アップロードされた画像をブログ記事のコメントエリアに表示した例です。
１．機能
コメントに以下のフィールドの追加や追加したフィールドの表示がそれぞれ1つずつ可能です。
- テキストフィールド
- テキストエリア
- 画像のアップロード
- ラジオボタン
- チェックボックス
- セレクトボックス
画像の一番下にある「テキストフィールド」が、CommentCustomField プラグインで追加したフィールドです。コメントプレビュー画面にも対応します。
次のように、テキストエリアを表示することもできます（テキストエリアのみの表示も可能）。
画像のアップロードは次のようになります。
ラジオボタンは次のようになります。
チェックボックスは次のようになります。
セレクトボックスは次のようになります。
コメント編集画面は次のように表示します。画面はテキストフィールドのみですが、テキストエリアを表示することもできます。
本プラグインでは次の拡張テンプレートタグを提供します。
- MTCommentCustomFieldText
- 追加したテキストフィールドの内容を出力するファンクションタグ
- MTCommentCustomFieldTextarea
- 追加したテキストエリアの内容を出力するファンクションタグ
- MTCommentCustomFieldAsset
- アップロードした画像の情報を出力するブロックタグ。タグブロック内ではMTAsset関連のタグを利用できます
- MTPreviewCommentCustomFieldText
- コメントプレビュー画面で投稿前のテキストフィールドの内容を出力するファンクションタグ
- MTPreviewCommentCustomFieldTextarea
- コメントプレビュー画面で投稿前のテキストエリアの内容を出力するファンクションタグ
- MTCommentCustomFieldRadioInputValue
- ブログ管理画面で入力したラジオボタンの値をXHTMLで出力するファンクションタグ
- MTCommentCustomFieldCheckboxInputValue
- ブログ管理画面で入力したチェックボックスの値をXHTMLで出力するファンクションタグ
- MTCommentCustomFieldSelectInputValue
- ブログ管理画面で入力したセレクトボックスの値をXHTMLで出力するファンクションタグ
- MTPreviewCommentCustomFieldRadioInputValue
- ブログ管理画面で入力したラジオボタンの値とユーザの選択状態をコメントプレビュー画面でXHTMLで出力するファンクションタグ
- MTPreviewCommentCustomFieldCheckboxInputValue
- ブログ管理画面で入力したチェックボックスの値とユーザの選択状態をコメントプレビュー画面でXHTMLで出力するファンクションタグ
- MTPreviewCommentCustomFieldSelectInputValue
- ブログ管理画面で入力したセレクトボックスの値とユーザの選択状態をコメントプレビュー画面でXHTMLで出力するファンクションタグ
- MTCommentCustomFieldRadio
- コメント投稿フォームで選択したラジオボタンの値を出力するファンクションタグ
- MTCommentCustomFieldCheckbox
- コメント投稿フォームで選択したチェックボックスの値を出力するファンクションタグ
- MTCommentCustomFieldSelect
- コメント投稿フォームで選択したセレクトボックスの値を出力するファンクションタグ
次期バージョンの Movable Type 5 では、コメントのカスタムフィールドの機能追加があると思われますので、このプラグインは Movable Type 4 で使うことを想定しています。Movable Type 5 ではコメントのカスタムフィールドが機能追加されましたが、画像のアップロードは行えないため、画像のアップロードを行いたい場合は本プラグインをご利用ください。また、MTOSでコメントのカスタムフィールドを使いたい場合も本プラグインをご利用ください。
２．価格
本プラグインの価格は次の通りです。
- 個人ライセンス（無償）：無償
- 上記以外のライセンス：10000円/1サーバ
なお、個人ライセンスの方も、プラグインのご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。
個人ライセンス以外でご利用の場合、プラグインの動作確認後、下記から指定の金額をお支払いください。お支払い後に不具合が発覚しても払い戻しは致しかねますのでご注意ください。なお、銀行振り込みをご希望の場合は、大変ご面倒ですが、お問い合わせからご連絡ください。折り返し振り込み口座をご連絡致します。
３．プラグインのダウンロード
下記のリンクからプラグインアーカイブをダウンロードし、任意のフォルダに保存してください。
変更履歴
2009.08.14 初版 2009.08.17 v0.02 画像のアップロード機能を追加 2009.09.10 v0.03 画像のアップロード機能の不具合を修正 2009.10.02 v0.04 ラジオボタン・チェックボックス・プルダウンメニュー対応 2010.10.01 v0.10 MT5対応（プラグイン設定画面修正）、プラグイン定義ファイル変更（Perl→YAML）
４．インストール
プラグインアーカイブを解凍し、中にある CommentCustomField フォルダを plugins ディレクトリにアップロードしてください。
アップロードした後に管理画面にアクセスすると、次のようなアップグレード画面になりますので、「アップグレード開始」をクリックします。
サインインします。この後、アップグレードが開始します。
アップグレードが正常に完了すると次の画面になるので、「Movable Typeに戻る」をクリックし、管理画面に移動します。
ブログ管理画面より「システム」→「プラグイン」でプラグイン一覧を表示し、次のように表示されればOKです。
５．プラグインの設定
ブログ管理画面（システム管理画面ではありません）の「ツール」→「プラグイン」でプラグイン一覧画面を表示し、「CommentCustomField」→「設定」をクリックして、プラグインの設定を行ないます。
管理画面の表示
- コメント編集画面にテキストフィールドを表示する
- チェックすればコメント編集画面にテキストフィールドを表示します
- コメント編集画面にテキストエリアを表示する
- チェックすればコメント編集画面にテキストエリアを表示します
- コメント編集画面にラジオボタン（入力値）を表示する
- チェックすればコメント編集画面にラジオボタン（入力値）を表示します
- コメント編集画面にチェックボックス（入力値）を表示する
- チェックすればコメント編集画面にチェックボックス（入力値）を表示します
- コメント編集画面にセレクトボックス（入力値）を表示する
- チェックすればコメント編集画面にセレクトボックス（入力値）を表示します
アップロード画像
- 画像のアップロード先
- 画像のアップロード先のパスを指定します。指定したパスはサイトパス配下にディレクトリが作成され、その配下に画像がアップロードされます。パスを設定しない場合はサイトパス直下に画像をアップロードします。また、記述したパス末尾にスラッシュはあってもなくても大丈夫です。
- 画像の最大サイズ
- アップロード可能な画像の最大サイズをKB単位で設定します。デフォルトは300KBです。このサイズを超えた画像はアップロードされません（コメントは投稿されます）。
- アップロードファイル名にタイムスタンプを付与
- アップロードした画像ファイル名に「_comment+タイムスタンプ（年月日時分秒）」を付与します。このプラグインでは同名の画像の上書きチェックを行なわないので、先にアップロードした画像ファイルを後から投稿した同名の画像ファイルで上書きしたくない場合はチェックをいれてください。
アップロードした画像ファイルはアイテムとして管理されます。アイテムに関連つけたコメントを削除してもアイテムは削除されません。
初期値の設定
- ラジオボタンの初期値（半角カンマで区切って設定）
- ラジオボタンに表示する初期値を設定します。選択状態にしたい値は、値の直後にアスタリスクを記述してください。
- チェックボックスの初期値（半角カンマで区切って設定）
- チェックボックスに表示する初期値を設定します。選択状態にしたい値は、値の直後にアスタリスクを記述してください。
- セレクトボックスの初期値（半角カンマで区切って設定）
- セレクトボックスに表示する初期値を設定します。選択状態にしたい値は、値の直後にアスタリスクを記述してください。
６．テンプレートの修正（コメント投稿に必要な設定）
「既定のブログ」テンプレートセットを例に修正内容を解説します。
６．１ コメント（テンプレートモジュール）
ブログ管理画面の「デザイン」→「テンプレート」→「コメント」テンプレートモジュールをクリックし、以下の青色のサブテンプレートを追加します。この作業はコメント投稿フォームに、追加したいカスタムフィールドのPOSTデータを設定するためのものです。
テキストフィールドは次のようになります。追加する部分の input 要素の name 属性と id 属性は変更しないでください。
...前略...
<div id="comments-open-text">
<label for="comment-text">コメント
<mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
</div>
<div id="comment-form-custom-text">
<label for="comment-custom-text">テキストフィールド</label>
<input id="comment-custom-text" name="comment-custom-text" size="30" value="" onfocus="mtCommentFormOnFocus()" />
</div>
<div id="comments-open-captcha"></div>
...後略...テキストエリアは次のようになります。追加する部分の textarea 要素の name 属性と id 属性は変更しないでください。
...前略...
<div id="comments-open-text">
<label for="comment-text">コメント
<mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
</div>
<div id="comment-form-custom-textarea">
<label for="comment-custom-textarea">テキストエリア</label>
<textarea id="comment-custom-textarea" name="comment-custom-textarea" rows="5" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
</div>
<div id="comments-open-captcha"></div>
...後略...テキストフィールドとテキストエリアを両方表示させたい場合は、それぞれの青色部分を並べて記述してください。
画像の場合は次のようになります。form 要素にも enctype 属性の設定が必要です。追加する部分の input 要素の name 属性と id 属性は変更しないでください。
...前略...
<form method="post" enctype="multipart/form-data" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
...中略...
<div id="comments-open-text">
<label for="comment-text">コメント
<mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
</div>
<div class="field-inner">
<label for="comment-custom-image">画像</label>
<input type="file" name="comment-custom-image" id="comment-custom-image" class="fi" />
</div>
<div id="comments-open-captcha"></div>
...後略...ラジオボタンの場合は次のようになります。
...前略...
<div id="comments-open-text">
<label for="comment-text">コメント
<mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
</div>
<div id="comment-form-custom-radio" class="field-inner">
<div>この記事は役に立ちましたか？</div>
<mt:CommentCustomFieldRadioInputValue />
</div>
<div id="comments-open-captcha"></div>
...後略...チェックボックスの場合は次のようになります。
...前略...
<div id="comments-open-text">
<label for="comment-text">コメント
<mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
</div>
<div id="comment-form-custom-checkbox" class="field-inner">
<div>趣味は何ですか？（複数回答可）</div>
<mt:CommentCustomFieldCheckboxInputValue />
</div>
<div id="comments-open-captcha"></div>
...後略...セレクトボックスの場合は次のようになります。
...前略...
<div id="comments-open-text">
<label for="comment-text">コメント
<mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
</div>
<div id="comment-form-custom-select" class="field-inner">
出身地：<mt:CommentCustomFieldSelectInputValue />
</div>
<div id="comments-open-captcha"></div>
...後略...追加するサブテンプレートの挿入位置は既存のテキストエリアの直後でなくても構いませんが、サインイン時に表示される位置になるよう、気をつけてください。
６．２ コメントプレビュー（システムテンプレート）
ブログ管理画面の「デザイン」→「テンプレート」→「コメントプレビュー」システムテンプレートクリックし、以下の青色のサブテンプレートを追加します。この作業はコメントプレビュー画面にPOSTデータを引き継ぐためのものです。
テキストフィールドは次のようになります。
...前略...
<div id="comments-open-text">
<label for="comment-text">コメント <mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtShowCaptcha()"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></textarea>
</div>
<div id="comment-form-custom-text">
<label for="comment-custom-text">テキストフィールド</label>
<input id="comment-custom-text" name="comment-custom-text" size="30" value="<$mt:PreviewCommentCustomFieldText encode_html="1"$>" onfocus="mtShowCaptcha()" />
</div>
<div id="comments-open-captcha"></div>
...後略...テキストエリアは次のようになります。
...前略...
<div id="comments-open-text">
<label for="comment-text">コメント <mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtShowCaptcha()"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></textarea>
</div>
<div id="comment-form-custom-textarea">
<label for="comment-custom-textarea">テキストエリア</label>
<textarea id="comment-custom-textarea" name="comment-custom-textarea" rows="5" cols="50" onfocus="mtShowCaptcha()"><$mt:PreviewCommentCustomFieldTextarea encode_html="1"$></textarea>
</div>
<div id="comments-open-captcha"></div>
...後略...テキストフィールドとテキストエリアを両方表示させたい場合は、それぞれの青色部分を並べて記述してください。
画像データはプレビュー画面に引き継ぐことはできません。
ラジオボタンの場合は次のようになります。
...前略...
<div id="comments-open-text">
<label for="comment-text">コメント <mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtShowCaptcha()"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></textarea>
</div>
<div id="comment-form-custom-radio" class="field-inner">
<div>この記事は役に立ちましたか？</div>
<mt:PreviewCommentCustomFieldRadioInputValue />
</div>
<div id="comments-open-captcha"></div>
...後略...チェックボックスの場合は次のようになります。
...前略...
<div id="comments-open-text">
<label for="comment-text">コメント <mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtShowCaptcha()"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></textarea>
</div>
<div id="comment-form-custom-checkbox" class="field-inner">
<div>趣味は何ですか？（複数回答可）</div>
<mt:PreviewCommentCustomFieldCheckboxInputValue />
</div>
<div id="comments-open-captcha"></div>
...後略...セレクトボックスの場合は次のようになります。
...前略...
<div id="comments-open-text">
<label for="comment-text">コメント <mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtShowCaptcha()"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></textarea>
</div>
<div id="comment-form-custom-select" class="field-inner">
出身地：<mt:PreviewCommentCustomFieldSelectInputValue />
</div>
<div id="comments-open-captcha"></div>
...後略...追加するサブテンプレートの挿入位置は既存のテキストエリアの直後でなくても構いませんが、サインイン時に表示される位置になるよう、気をつけてください。
６．３ スタイルシート（インデックステンプレート）
ブログ管理画面の「デザイン」→「テンプレート」→「スタイルシート」インデックステンプレートクリックし、以下の内容を追加します。
#comment-form-custom-text,
#comment-form-custom-textarea {
margin-bottom: 0.75em;
}
#comment-custom-text,
#comment-custom-textarea {
width: 80%;
}参考までに、デフォルトテンプレートの場合、次のような設定を行なえばきれいに表示されます。
.comments-open .input_radio_label,
.comments-open .input_checkbox_label {
display: inline;
}
.comments-open .input_radio_value,
.comments-open .input_checkbox_value {
margin-left: 3px;
}
.comments-open .input_radio,
.comments-open .input_checkbox {
vertical-align: middle;
}
#comment-form-custom-radio,
#comment-form-custom-checkbox,
#comment-form-custom-select {
margin: 10px 0;
}７．テンプレートの修正（追加したカスタムフィールド表示に必要な設定）
「既定のブログ」テンプレートセットを例に、修正内容を解説します。
ブログ管理画面の「デザイン」→「テンプレート」→「コメント」テンプレートモジュールをクリックし、以下の青色のサブテンプレートを追加します。この作業はブログ記事ページやウェブページのコメント一覧に、追加したカスタムフィールドのデータを表示するためのものです。
テキストフィールドは次のようになります。
...前略...
<mt:Comments>
...中略...
<div class="comment-content">
<$mt:CommentBody$>
<mt:if tag="CommentCustomFieldText">
<$mt:CommentCustomFieldText$>
</mt:if>
...中略...
</div>
</mt:Comments>
...後略...テキストエリアは次のようになります。
...前略...
<mt:Comments>
...中略...
<div class="comment-content">
<$mt:CommentBody$>
<mt:if tag="CommentCustomFieldTextarea">
<$mt:CommentCustomFieldTextarea$>
</mt:if>
...中略...
</div>
</mt:Comments>
...後略...画像は次のようになります。画像の表示バリエーションは色々ありますが、ここでは横幅200pxのサムネイル画像で表示する例です。
...前略...
<mt:Comments>
...中略...
<div class="comment-content">
<$mt:CommentBody$>
<mt:if tag="CommentCustomFieldAsset">
<p>
<mt:CommentCustomFieldAsset>
<mt:AssetThumbnailLink width="200" />
</mt:CommentCustomFieldAsset>
</p>
</mt:if>
...中略...
</div>
</mt:Comments>
...後略...ラジオボタンは次のようになります。
...前略...
<mt:Comments>
...中略...
<div class="comment-content">
<$mt:CommentBody$>
<mt:if tag="CommentCustomFieldRadio">
この記事は役にたった:<mt:CommentCustomFieldRadio />
</mt:if>
...中略...
</div>
</mt:Comments>
...後略...チェックボックスは次のようになります。
...前略...
<mt:Comments>
...中略...
<div class="comment-content">
<$mt:CommentBody$>
<mt:if tag="CommentCustomFieldCheckbox">
趣味:<mt:CommentCustomFieldCheckbox />
</mt:if>
...中略...
</div>
</mt:Comments>
...後略...セレクトボックスは次のようになります。
...前略...
<mt:Comments>
...中略...
<div class="comment-content">
<$mt:CommentBody$>
<mt:if tag="CommentCustomFieldSelect">
出身地:<mt:CommentCustomFieldSelect />
</mt:if>
...中略...
</div>
</mt:Comments>
...後略...コメントとトラックバックを分けて表示する for WordPress（改）
WordPress のデフォルト状態は、投稿情報や個別記事でのコメントとトラックバック（およびピンバック）が別々に表示されない仕様になっています。
個別記事では次のようにトラックバックとコメントが混在して表示されます。
変更前
それを踏まえて、以前「コメントとトラックバックを分けて表示する for WordPress（その1）」をエントリーしました。
これにより、次のようにコメントとトラックバックを分けて表示できるようになります。
変更後
また、メインページ等の投稿情報もコメントとトラックバックを分割表示できます。
変更後
以前紹介したカスタマイズでは「トラックバックが表示されません」とのご質問を頂きましたので、本エントリーで改修した内容を改めて紹介致します。
１．プラグインのダウンロード
下記のサイトよりの「Download」にある Trackping Separator. をクリックし、移動先のページ右側にある赤い「Download」をクリックして、プラグインアーカイブをダウンロードします。
２．プラグインのアップロード・有効化
ダウンロードしたアーカイブを展開し、中にある trackpings.php を /wp-content/plugins 配下にアップロードします。その後、WordPress の管理画面の「プラグイン」に移動し、Trackping Separator が表示されているので、「使用する」のリンクをクリックし、有効化します。
３．テンプレートの修正
WordPress 管理画面の「外観」→「編集」で、以下の各テンプレートを修正します。
３．１ メインインデックス／アーカイブ／検索結果／単一記事の投稿
インデックス／アーカイブ／検索結果／単一記事の投稿の各テンプレートに投稿者情報（投稿時間・カテゴリー等）がある場合は、 comments_popup_link で検索し、
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>というタグを見つけ、下記の内容に変更します。変更前のタグの内容はご利用のテンプレートによって若干異なりますのでご注意ください。
<?php comments_popup_link('Comments (0)', 'Comments (1)', 'Comments (%)'); ?> | <a href="<?php the_permalink() ?>#trackback" title="Trackback" class="trackacklink">Trackbacks (<?php echo trackpings('count'); ?>)</a>個別記事ページにはコメント本文とトラックバック本文が表示されるので、当サイトでの配布テンプレートのように投稿者情報を本文下に表示している場合は、投稿者情報からコメント・トラックバックの表示自体を削除しても良いかもしれません。
３．２ コメント
ここでは当サイトで配布しているテンプレートを元に解説します。変更する箇所はコメント一覧を表示する部分だけなので、他のテンプレートをご利用の場合も適用可能と思います。
コメントテンプレートの下記の赤色部分を削除し、削除した部分に、その下にある「入れ替える内容（１）」または「入れ替える内容（２）」の内容を貼り付けてしてください。
（１）はトラックバックの表示部分に Trackping Separator プラグインで用意された関数 listtrackpings を利用したものです。（２）は listtrackpings を使わず、PHPを書き下してトラックバック部分を表示しています。表示内容は（２）の方がきめ細かく制御でき、編集用のリンクも表示できますが、構造が複雑です。PHPが書ける方は（２）を選択して自分好みの表示にしてください。
本項のテンプレート編集方法が分からない場合は、４項に進んでください。
<?php // Do not delete these lines
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie
?>
<p class="nocomments">This post is password protected. Enter the password to view comments.<p>
<?php return;
}
}
?>
<div id="comments">
<?php if ('open' == $post->ping_status) : // comment close ?>
<h3 class="comments-head">Trackback URL</h3>
<input type="text" value="<?php trackback_url(true); ?>" size="60" readonly="readonly" id="trackbackurl" tabindex="1" accesskey="t" onfocus="this.select()" />
<?php endif; ?>
<h3 class="comments-head">Comment & Trackback<!-- [<?php comments_number('No Responses', 'One Response', '% Responses' );?>]--></h3>
<?php if (!('open' == $post->comment_status) && ('open' == $post->ping_status)) : // comment close ?>
<p class="nocomments">Comments are closed.</p>
<?php elseif (('open' == $post->comment_status) && !('open' == $post->ping_status)) : // trackback close ?>
<p class="nocomments">Trackback are closed.</p>
<?php elseif (!('open' == $post->comment_status) && !('open' == $post->ping_status)) : // comment and trackback close ?>
<p class="nocomments">Comments and Trackback are closed.</p>
<?php endif; ?>
<?php if ($comments) : ?>
<div class="commentlist">
<?php foreach ($comments as $comment) : ?>
<div id="comment-<?php comment_ID() ?>" class="comment">
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<div class="comment-content"><?php comment_text() ?></div>
<p class="comment-footer">Posted at <a href="#comment-<?php comment_ID() ?>"><?php comment_date('Y.m.j') ?> <?php comment_time() ?></a> by <?php comment_author_link() ?><?php if ( $user_ID ) : ?> | <?php edit_comment_link('edit','',''); ?><?php endif; ?></p>
</div>
<?php endforeach; /* end for each comment */ ?>
</div>
<?php else : // this is displayed if there are no comments so far ?>
<p class="nocomments">No comments.</p>
<?php endif; ?>
<?php if (('open' == $post->comment_status) && ('open' == $post->ping_status)) : // open ?>
<p><?php comments_rss_link('Comment feed'); ?></p>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<h3 class="comments-head">Comment</h3>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" name="commentform" id="commentform">
<div id="comments-open-data">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. (<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout</a>)</p>
<?php else : ?>
<p><label for="author">Name:<?php if ($req) echo "(required)"; ?></label><br />
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="2" accesskey="n" />
</p>
<p><label for="email">Mail: (will not be published) <?php if ($req) echo "(required)"; ?></label><br />
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="3" accesskey="m" />
</p>
<p><label for="url">Website:</label><br />
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="4" accesskey="w" />
</p>
<?php endif; ?>
<p><label for="url">Comment:</label><br />
<textarea name="comment" id="comment" cols="40" rows="8" tabindex="5" accesskey="c" onfocus="if (this.value == 'Please comment') this.value = '';" onblur="if (this.value == '') this.value = 'Please comment';">Please comment</textarea>
</p>
<p>XHTML: You can use these tags:<br /><?php echo allowed_tags(); ?></p>
<p><input name="submit" type="submit" id="submit" tabindex="6" value="Submit" accesskey="s" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</div>
</form>
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>
</div><!-- comments -->入れ替える内容（１）
<h3 class="comments-head">Trackbacks</h3>
<div class="tarckbacktlist">
<?php listtrackpings('', '<div id="comment--%id" class="comment"><div class="comment-content"><p>%content</p></div><a href="%url"></a><p class="comment-footer">Tracked on <a href="#comment-%id">%date</a> by %origin</div>','Y.m.j'); ?>
</div>
<h3 class="comments-head">Comments</h3>
<div class="commentlist">
<?php foreach ($comments as $comment) : ?>
<? if ($comment->comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("<pingback />", $comment->comment_content) && !ereg("<trackback />", $comment->comment_content)) { ?>
<div id="comment-<?php comment_ID() ?>" class="comment">
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<div class="comment-content"><?php comment_text() ?></div>
<p class="comment-footer">Posted at <a href="#comment-<?php comment_ID() ?>"><?php comment_date('Y.m.j') ?> <?php comment_time() ?></a> by <?php comment_author_link() ?><?php if ( $user_ID ) : ?> | <?php edit_comment_link('edit','',''); ?><?php endif; ?></p>
</div>
<? } ?>
<?php endforeach; /* end for each comment */ ?>
</div>（１）を適用した場合の表示
入れ替える内容（２）
<h3 class="comments-head">Trackbacks</h3>
<div class="tarckbacktlist">
<?php if ($trackbacks = trackpings("", 'both')) {
foreach ($trackbacks as $trackback) : ?>
<div id="comment-<?php echo($trackback->comment_ID); ?>" class="comment">
<div class="comment-content">
<?php $tmp_content = ereg_replace("(<strong>.*</strong>)(.*)","<p>\\1</p><p>\\2</p>",$trackback->comment_content); echo($tmp_content); ?>
</div>
<p class="comment-footer">Tracked on <a href="#comment-<?php echo($trackback->comment_ID); ?>">
<?php echo(mysql2date('Y.m.j h:m A', $trackback->comment_date)); ?>
</a> by
<a href="<?php $tmp_url = esc_url($trackback->comment_author_url, array('http', 'https')); echo($tmp_url); ?>"><?php echo($trackback->comment_author); ?></a>
<?php if ( $user_ID ) : ?> | <a class="comment-edit-link" href="<?php echo(admin_url('comment.php?action=editcomment&c=')); ?><?php echo($trackback->comment_ID); ?>">edit</a>
<?php endif; ?></p>
</div>
<?php endforeach;
} ?>
</div>
<h3 class="comments-head">Comments</h3>
<div class="commentlist">
<?php foreach ($comments as $comment) : ?>
<? if ($comment->comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("<pingback />", $comment->comment_content) && !ereg("<trackback />", $comment->comment_content)) { ?>
<div id="comment-<?php comment_ID() ?>" class="comment">
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<div class="comment-content"><?php comment_text() ?></div>
<p class="comment-footer">Posted at <a href="#comment-<?php comment_ID() ?>"><?php comment_date('Y.m.j') ?> <?php comment_time() ?></a> by <?php comment_author_link() ?><?php if ( $user_ID ) : ?> | <?php edit_comment_link('edit','',''); ?><?php endif; ?></p>
</div>
<? } ?>
<?php endforeach; /* end for each comment */ ?>
</div>（２）を適用した場合の表示
４． comments.php
３．２項の作業が分からない場合、comments.php ファイルへのリンクをおきましたので、ファイルをダウンロードして、展開した中にある内容を「コメント」の内容と入れ替えてください。
- comments1.zip（３．２項の（１）を反映）
- comments2.zip（３．２項の（２）を反映）
５．プラグインを利用しない方法
ネットで調べていたら、以下のページでプラグインを利用せずにコメントとトラックバックを分けて表示するカスタマイズが紹介されていました。
Movable Type 4.2 のダイナミックパブリッシングでプロフィール画像関連のテンプレートタグが動作しない不具合について
Category：[ダイナミックパブリッシング, トラブルシューティング]
Tag：[MovableType, TroubleShooting, UserPic]
Permalink
Movable Type 4.2（動作確認は4.261）でダイナミックパブリッシングを使用している場合、プロフィール画像関連のテンプレートタグが正常に動作しないケースがあります。
ご質問を頂きましたので、本エントリーにて情報展開致します。
１．事象
例えば、プロフィール画像を登録しているユーザーがコミュニティブログに記事を投稿した場合、スタティックパブリッシングではメインページで次のようにプロフィール画像が表示されます。
スタティックパブリッシング
このページをダイナミックパブリッシングにするとデフォルトの画像になります。
ダイナミックパブリッシング
なお、いくつかのテンプレートタグを試したところ、以下のテンプレートタグから正常な出力を得られませんでした。
- MTAuthorUserpic
- MTAuthorUserpicURL
- MTEntryAuthorUserpic
- MTEntryAuthorUserpicURL
２．原因
php のソースをトレースしたところ、上記の各テンプレートタグの処理で php/lib/MTUtil.php の userpic_url という関数を起動しています。この関数はプロフィール画像のURLを返却するもので、その中で次の処理がありました。
if (!$thumb->get_thumbnail($dest, $thumb_w, $thumb_h, $asset['asset_id'], $scale, $thumb_name, 'png', true)) {
return '';
}赤字の部分が示すように、png 画像に限定した処理になっています。テストしたプロフィール画像は jpg だったため、この処理でエラーとなり、テンプレートタグで何も表示されなかったようです。最初に png 画像で実験していたら、この原因には気がつかなかったと思います。
ちなみに、冒頭に示した画像がデフォルトのプロフィール画像になるのは、次のように MTIf タグで MTEntryAuthorUserpicURL タグを判定しているためです（分かりやすくするため改行しています）。
<img src="
<mt:If tag="EntryAuthorUserpicURL">
<$mt:EntryAuthorUserpicURL$>
<mt:Else>
<$mt:StaticWebPath$>images/default-userpic-90.jpg
</mt:If>
" width="<$mt:Var name="userpic_size"$>" height="<$mt:Var name="userpic_size"$>" alt="user-pic" />３．対処
根本的な解決ではありませんが、とりあえずプロフィール画像に png を利用すれば、ダイナミックパブリッシングでも正常に画像が表示されます。
４．Windows での挙動
Windows（XPなので公式のインストール環境ではありません）では、パスのセパレータが「¥」になるのですが、png 画像を利用しても、次のようにプロフィール画像のパスに「/」と「¥」が混在してしまって正常に画像が表示できないようです。
/mt-static/support/assets_c¥userpics/userpic-1-100x100.pngとりあえず、php/lib/MTUtil.php の userpic_url の処理を一部書き換えると正常に表示できるようになりました。赤字を削除して青字の内容に書き換えます。
...前略...
function userpic_url($asset, $blog, $author) {
global $mt;
$format = $mt->translate('userpic-[_1]-%wx%h%x', array($author['author_id']));
$max_dim = $mt->config('UserpicThumbnailSize');
# generate thumbnail
$src_file = asset_path($asset['asset_file_path'], $blog);
$cache_path = $mt->config('AssetCacheDir');
$image_path = $cache_path . DIRECTORY_SEPARATOR . 'userpics';
$image_path = $cache_path . '/' . 'userpics';
$static_file_path = static_file_path().'support';
...後略...忍者ブログ テンプレート
忍者ブログ用のテンプレートを作成しました。デフォルトの3カラム固定レイアウトの完成例は次のようになります。
１．テンプレート設定方法
忍者ブログのブログ管理ページの上部メニューから「新規テンプレート作成」をクリックします。
次の画面の右上のテキストエリアの上に、このエントリーに掲載しているHTMLの内容、その下のテキストエリアにCSSの内容を貼り付けてください。
HTML
スタイルシート
設定後、画面左上の「テンプレート保存」をクリック。
ダイアログが表示されるので、「テンプレートの名称」に適当な名前（ここでは「koikikukan」）を設定し、「送信」をクリック。
「OK」をクリック。
「このWINDOWを閉じる」をクリックして、ダイアログを閉じます。
元の画面のメニューから「テンプレート設定/編集」をクリック。
「お気に入りテンプレート」にさきほど新規追加したテンプレート名が表示されているので、「このテンプレートに設定」をクリック（これでブログに適用するテンプレートが切り替わります）。心配な場合は、その右にある「プレビュー」をクリックして表示を確認してからでもよいでしょう。
２．その他
すべての動作・表示を確認できていないので、不具合がありましたらご連絡ください。
Movable Type のブログ記事にフラグメント識別子（ページ内リンク）を設定する
Movable Type のブログ記事の中でフラグメント識別子（ページ内リンク）を設定する方法を紹介します。
１．フラグメント識別子について
「フラグメント識別子」とは「文書の特定の場所へのリンク」のことです。例えば次の画面の「注1」～「注3」が、フラグメント識別子つきのリンクです。
下の例の青色部分がフラグメント識別子です。
<a href="post.html#note1">注1</a>上記のリンクをクリックすれば、post.html 文書の、次のように id 属性値が note1 という位置の内容を先頭になるようにを表示します。
<p id="note1">注1：～</p>以前は、この id 属性の代わりに name 属性を用いて、
<a name="note1">注1：～</a>という形式が一般的でしたが、現在は a 要素に特定しない、id 属性による設定が一般的です（a 要素の name 属性は XHTML1.1 以降では廃止されます）。
２．ブログ記事のフラグメント識別子について
Movable Type のブログ記事で「注1」のようなページ内リンクを付与するときに気をつけないといけないのは、「メインページ・アーカイブページで id 属性値が重複しないこと」です。ブログ記事ページでは他のブログ記事ページが表示されないので、id 属性を気にする必要がありませんが、メインページ・アーカイブページでは他のブログ記事も表示されるので、ブログ内のすべてのブログ記事で一意となる id 属性値を設定する必要があります。id 属性値を重複させないためには、ブログ記事の ID 番号を用いるのが簡単です。
つまり、ブログ記事内のフラグメント識別子は次のような形式が例として望ましいと考えます。
<a href="#note[ブログ記事ID]">～</a>具体的には、次のようにMTEntryID タグをフラグメント識別子に設定します。
<a href="#note<$mt:EntryID$>">～</a>1つのブログ記事に複数のフラグメント識別子を付与する場合は、さらに一意となる番号を付与します。
<a href="#note<$mt:EntryID$>1">～</a>なお、ブログ記事内でテンプレートタグを利用するには、予め各テンプレートの MTEntryBody タグに mteval モディファイアを追加しておきます。
<$mt:EntryBody mteval="1"$>３．番号付与を自動化する
ブログ記事内でフラグメントを複数設定する場合、２項で説明した「一意となる番号」についても、テンプレートタグを用いて次のようにを自動化する方法が考えられます。
まず、下の内容を「フラグメント」というテンプレートモジュールで保存します。
<mt:SetVarTemplate name="fragment"><mt:SetVar name="fragment_number" op="++" /><mt:GetVar name="fragment_number" /></mt:SetVarTemplate>
<mt:SetVar name="fragment_number" value="0" />そして、ブログ記事の初回のフラグメント識別子は次のように設定します。リッチテキストでは適正に保存できないため、リッチテキストで編集した後、フォーマットを「なし」または「改行を変換」に変更してから追加してください。
<a href="#note<$mt:EntryID$><mt:include module="フラグメント" /><mt:GetVar name="fragment" />">注1</a>動作概要は、MTInclude タグで、「フラグメント」テンプレートモジュールを呼び出し、変数 fragment の利用と、変数 fragment_number を初期化します。そして、MTGetVar タグで変数 fragment を取得することで、MTSetVarTemplate タグの内容が評価されます。つまり、変数 fragment_number をインクリメントし、fragment_number の値を出力します。これでフラグメント識別子の最後に 「1」が表示されます。また、MTInclude タグを別の行に記述すると冗長な空行が発生するため、フラグメント識別子に含めています。
2回目以降のフラグメント識別子は次のように MTGetVar タグで変数 fragment を取得するだけです。これでフラグメント識別子の最後に 「2」が表示されます。
<a href="#note<$mt:EntryID$><mt:GetVar name="fragment" />" />注2</a>このように、フラグメント識別子を付与するテンプレートモジュールを予め用意しておくことで、フラグメント設定の手間を省くことができます。
ちなみに、リンク先も次のようにしておけば、番号の対応を気にする必要がなくなります。
<div id="<mt:SetVar name="fragment_number" value="0" />note<$mt:EntryID$><mt:GetVar name="fragment" />">注1</div>
<div id="note<$mt:EntryID$><mt:GetVar name="fragment" />">注2</div>４．テキストも自動化する
「注n」の n の部分も、MTGetVar タグで変数 fragment_number の値を表示する手もあります。３項を例に書き直したものが以下です。
フラグメント識別子
<a href="#note<$mt:EntryID$><mt:include module="フラグメント" /><mt:GetVar name="fragment" />">注<mt:GetVar name="fragment_number" /></a>
<a href="#note<$mt:EntryID$><mt:GetVar name="fragment" />" />注<mt:GetVar name="fragment_number" /></a>リンク先
<div id="<mt:SetVar name="fragment_number" value="0" />note<$mt:EntryID$><mt:GetVar name="fragment" />">注<mt:GetVar name="fragment_number" /></div>
<div id="note<$mt:EntryID$><mt:GetVar name="fragment" />">注<mt:GetVar name="fragment_number" /></div>ただし、編集画面でリンク元とリンク先の対応が分かりにくくなるのが欠点です。
５．ウェブページについて
ウェブページは1つのアーカイブページに単一のウェブページしか表示しないので、ウェブページ内で id 属性が一意となっていれば大丈夫です。
休日表示付リアルタイムカレンダープラグイン for Serene Bach 修正
配布中の Serene Bach 用・休日表示付リアルタイムカレンダープラグインを修正しました。
修正内容は次の通りです。
- 土・日・休日・本日表示が反映されない月がある不具合を修正
原因は、カレンダーの表示月を前月のナビゲーションリンクから取得しているのですが、正常に取得できないURLのパターンがありました。
取得するURL
http://user-domain/sb.cgi?month=200907
取得できなかったURL
http://user-domain/log/200907.html
ということで、プラグインに含まれる JavaScript を一部修正しました。修正内容は次の通りです。
変更前
...前略...
var ym = link.split("=")[1];
var year = ym.substring(0, 4);
var month = ym.substring(4);
month++;
if(month == 13){
month = 1;
year++;
}
...後略...変更後
...前略...
var ym;
var year;
var month;
if (link.match(/=/)) {
ym = link.split("=")[1];
year = ym.substring(0,4);
month = ym.substring(4);
} else {
ym = link.match(/\\d\\d\\d\\d\\d\\d\\.html/);
year = ym.toString().substring(0,4);
month = ym.toString().substring(4,6);
}
month++;
if(month == 13){
month = 1;
year++;
}
...後略...プラグインは下記のリンクから取得してください。
コーチが
Movable Type 4.2 テンプレートセット（コミュニティブログ対応版）修正
現在配布中の「Movable Type 4.2 用のテンプレートセット（コミュニティブログ対応版）」にいくつか不具合があったため修正しました。修正内容は次の通りです。
- サインインした状態でコメント投稿および確認ができない不具合を修正
- サインイン時に実行中のローディング画像が表示されない不具合を修正
- ページ右上のサインインリンクによるサインイン中のフォントサイズが大きくなる不具合を修正
１．サインインした状態でコメント投稿および確認ができない不具合について
この不具合は、具体的には、「投稿」または「確認」をクリックすると、ボタンが disabeled 状態になるところまでは正常なのですが、その後、それぞれの CGI が起動しません。
原因は、このテンプレートセットは、MT4.2（通常版）の配布テンプレートを流用して作っており、コメント投稿フォーム部分を XHTML valid にするために、form 要素の name 属性を削除したマークアップにしていたのですが、コミュニティブログではグローバルテンプレートの mt.js を利用するため、name 属性がないと正常に動作しません。
以下の name 属性を追加することでこの不具合は解消します。
<form method="post" action="<mt:CGIPath /><mt:CommentScript />" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">２．サインイン時に実行中のローディング画像が表示されない不具合について
サインイン時にローディング画像が表示されないため、画面が停止したように見えます。
コミュニティブログのサインイン（変更前）
コメントのサインイン（変更前）
原因はローディング画像をテンプレートセットに含んでませんでした。修正後のサインイン時の画面は、次のようになります。
コミュニティブログのサインイン（変更後）
コメントのサインイン（変更後）
３．ページ右上のサインインリンクによるサインイン中のフォントサイズが大きくなる不具合を修正
サインイン中だけフォントサイズが大きくなる不具合です。違いは２項の画像を参照してください。該当のスタイルシートを下記のように修正しました。
変更前
#header div.widget-sign-in #signin-widget-content {
color: #fff;
font-size: 14px;
}
#header div.widget-sign-in #signin-widget-content a {
font-size: 83%;
}変更後
#header div.widget-sign-in #signin-widget-content {
color: #fff;
font-size: 83.3%;
}
#header div.widget-sign-in #signin-widget-content a {
font-size: 100%;
}４．ダウンロード
テンプレートセットは下記のページからダウンロードしてください。このテンプレートセットは「スタイル対応版（フッタ付きリキッドレイアウト対応）」にコミュニティ用のテンプレートを追加したものです。
ダイナミックパブリッシングによるページ分割
Category：[ダイナミックパブリッシング, ページ分割]
Tag：[Customize, DynamicPublishing, MovableType, Paginate]
Permalink
Movable Type 4.2 ではダイナミックパブリッシングによるページ分割が行なえます。
カテゴリーアーカイブのページナビゲーション
月別アーカイブのページナビゲーション
メインページのページナビゲーション
本エントリーでは、以下の解説を元に「既定のブログ」へのページ分割設定方法を紹介します。
１．.htaccess の変更（4.2 以前からダイナミックパブリッシングを導入している場合）
参考とした元記事では 以下のように .htaccess の変更を行なっていますが、4.2 からダイナミックパブリッシングの運用を開始している場合は設定不要です。
変更前
RewriteRule ^(.*)$ $mtview_server_url [L,QSA]変更後
RewriteRule ^(.*)(\?.*)?$ $mtview_server_url$2 [L,QSA]２．「ブログ記事リスト」アーカイブテンプレートにページナビゲーションの追加
ブログ記事管理画面の「デザイン」→「テンプレート」→「カテゴリ別ブログ記事リスト（または月別ブログ記事リスト）」をクリックし、以下のサブテンプレート（青色部分）を追加します。
...前略...
<div class="content-nav">
<mt:ArchivePrevious><a href="<$mt:ArchiveLink$>">« <$mt:ArchiveTitle$></a> |</mt:ArchivePrevious>
<a href="<$mt:Link template="main_index"$>">メインページ</a> |
<a href="<$mt:Link template="archive_index"$>">アーカイブ</a>
<mt:ArchiveNext>| <a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle$> »</a></mt:ArchiveNext>
</div>
<div class="content-nav">
<mt:IfPreviousResults><a href="<mt:PreviousLink encode_html="1">" rel="prev">« Previous</a> </mt:IfPreviousResults>
<mt:PagerBlock>
<mt:IfCurrentPage><mt:Var name="__value__"><mt:Else><a href="<mt:PagerLink encode_html="1">"><mt:Var name="__value__"></a></mt:IfCurrentPage>
<mt:unless name="__last__"> </mt:unless>
</mt:PagerBlock>
<mt:IfMoreResults> <a href="<mt:NextLink encode_html="1">" rel="next">Next »</a>
</mt:IfMoreResults>
</div>
</div>
...後略...３．アーカイブテンプレートの修正
１項の編集画面を開いた状態で、MTEntries タグに offset="auto" を追加し、limit="xx" でページ単位の表示数を設定します。$limit はそのまま使っても構いません。
変更前
<mt:Entries limit="$limit">変更後
<mt:Entries limit="10" offset="auto">これでアーカイブページにアクセスすればページ分割が行なえると思います。
なお、カテゴリアーカイブについては、MTEntriesWithSubCategories タグでも動作確認できました。
４．メインページについて
メインページもブログ記事リストのアーカイブページと同様の方法でページ分割可能ですが、ブログ内のすべてのブログ記事がページ分割対象となるため、カスタマイズが必要です（別の機会にエントリーしたいと思います）。
Movable Type で簡単に valid な XHTML 文書を作る
Movable Type のブログ記事作成・編集画面やウェブページ作成・編集画面にある、本文・追記のリッチテキストは、強調文字や下線、リンクあるいは画像など、いわゆる WYSWYG による編集ができるフォーマットです。
例えば、Amazon アフィリエイトのリンクも次のように、実際に表示されるイメージで編集できたりします。
私は普段、Movable Type でブログ記事を書くときにリッチテキストを使ってないので（すいません）、あまり機能把握ができていなかったのですが、リッチテキストを使用すると、valid でない XHTML を valid にできるそうで、全く知りませんでした。教えて頂いたヲレサイトさん、ありがとうございました。
上に貼り付けた Amazon アフィリエイトのリンクも、元のマークアップは一部 valid でないのですが、この状態で保存するだけでかなり valid な XHTML になります。
ということで、どこまで valid な XHTML にできるのか、色々試してみました。動作は Firefox 3.5.1 で確認しています。
ここで試している方法は、以下の手順で行なっています。
- フォーマットから「なし」を選択する
- valid でない(X)HTMLマークアップ等を記述
- フォーマットを「リッチテキスト」を選択する
- 再び「なし」を選択して(X)HTMLマークアップを確認する
実際の利用では、4.を実施せず、3.の「リッチテキスト」の状態で保存すれば、以下に示す変換が行なわれた状態で保存されます。変換を確認したい方は4.まで行なっても良いでしょう。
また、XHTML に不慣れな方で、生のマークアップを行いたい方は、フォーマットを「なし」にした状態で、マークアップを書き、そのあと上の変換作業を行なえば、正しいマークアップの勉強にもなります。
１．空要素タグでスラッシュの前に空白がない場合
br 要素のスラッシュの前に半角スペースがない場合、半角スペースを挿入してくれます。
変換前
変換後
img 要素のように属性がある場合も変換可能です。
変換前
変換後
２．空要素タグでスラッシュがない場合
br 要素にスラッシュがない場合、半角スペースとスラッシュを挿入してくれます。
変換前
変換後
３．終了タグがない場合
p 要素の終了タグがない場合、終了タグを付与してくれます。
変換前
変換後
親子関係のある順不同リストでも変換可能です。
変換前
変換後
定義リストも可能です。
変換前
変換後
４．実体参照
& は & に変換してくれます。
変換前
変換後
ちなみに &は&amp; には変換されません。
< と > も、<lt; および >gt; に変換してくれます。
変換前
変換後
ダブルクォーテーションは実体参照に変換されません。
５．実体参照の解除
これまでとは逆に、「～」や「¥」などを実体参照した状態で設定し、同じ手順で変換すると、実体参照が解除されます。
変換前
変換後
<lt;/>gt;/& は解除されませんでした。
６．関連サイト
下記です。ありがとうございました。
Amazon 2009年7月の注文ランキング
2009 年 7 月の Amazon 注文ランキングです。
今月は「MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現!」が2ヶ月連続で1位になりました。
あと個人的には、最後の「プロテック iPod&iPhone対応 ボイスレコーダー用超小型マイク CAPSULE VOICE PCV-WH ホワイト (対応機種:iPod nano 4G、touch 2G、classic 120GB、iPhone 3G)」がちょっと気になりました。現在1980円が51%引きの980円です。モノラルですが音質もなかなかよさそうです。
1位：MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現!
| MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現! 藤本 壱 ラトルズ 2009-02 売り上げランキング : 8891 Amazonで詳しく見る by G-Tools |
2位：Movable Type逆引きデザイン事典[4.2/4.1対応]
![Movable Type逆引きデザイン事典[4.2/4.1対応]](http://www.koikikukan.com/img/amazon/51p0cmzoLLL._SL160_.jpg) | Movable Type逆引きデザイン事典[4.2/4.1対応] 荒木 勇次郎 翔泳社 2009-04-21 売り上げランキング : 2457 Amazonで詳しく見る by G-Tools |
2位：「勝負強い人間」になる52ヶ条―20年間勝ち続けた雀鬼がつかんだ、勝つための哲学
 | 「勝負強い人間」になる52ヶ条―20年間勝ち続けた雀鬼がつかんだ、勝つための哲学 (知的生きかた文庫) 三笠書房 2006-12 売り上げランキング : 15759 Amazonで詳しく見る by G-Tools |
4位：DreamweaverとMovableTypeで作る テンプレートカスタマイズレッスン
| DreamweaverとMovableTypeで作る テンプレートカスタマイズレッスン 森 和恵 技術評論社 2009-03-27 売り上げランキング : 70456 Amazonで詳しく見る by G-Tools |
4位：Movable Type サイトデザイン&レシピ事典 Movable Type4.2対応
 | Movable Type サイトデザイン&レシピ事典 Movable Type4.2対応 毎日コミュニケーションズ 2009-02-17 売り上げランキング : 215318 Amazonで詳しく見る by G-Tools |
4位：WordPress逆引きデザイン事典[2.X対応]
![WordPress逆引きデザイン事典[2.X対応]](http://ecx.images-amazon.com/images/I/51wvZ9nbUSL._SL160_.jpg) | WordPress逆引きデザイン事典[2.X対応] 翔泳社 2008-09-11 売り上げランキング : 31974 Amazonで詳しく見る by G-Tools |
4位：即戦プロ技 Movable Typeデザインテンプレートコレクション
| 即戦プロ技 Movable Typeデザインテンプレートコレクション エクストラコミュニケーションズ 毎日コミュニケーションズ 2009-05-13 売り上げランキング : 37226 Amazonで詳しく見る by G-Tools |
4位：GriffinTechnology iTalk Pro GRI-IP-000063
 | GriffinTechnology iTalk Pro GRI-IP-000063 Griffin Technology 2006-11-10 売り上げランキング : 3768 Amazonで詳しく見る by G-Tools |
4位：プロテック iPod&iPhone対応 ボイスレコーダー用超小型マイク CAPSULE VOICE PCV-WH ホワイト
 | プロテック iPod&iPhone対応 ボイスレコーダー用超小型マイク CAPSULE VOICE PCV-WH ホワイト (対応機種:iPod nano 4G、touch 2G、classic 120GB、iPhone 3G) プロテック 2009-03-09 売り上げランキング : 784 Amazonで詳しく見る by G-Tools |
Youtube の貼り付け用 HTML を valid にするスクリプト
Youtube の貼り付け用 HTML を valid にするスクリプトです。
１．使い方
YouTube のページ右にある「埋込み」のテキストフィールドの内容（object要素）をコピー。
コピーした内容を、このページの上側のテキストエリアにペーストして、すぐ下にある「Valid XHTML」をクリックします。
下側のテキストエリアに変換したマークアップが表示されます。テキストエリアを一度クリックすれば表示されている内容が全選択されるので、コピーして、ブログなどに貼り付けてお使いください。「Clear」をクリックすれば、上下のテキストエリアの内容を消去します。
２．機能
このスクリプトでは以下の変換を行なっています。
- object 要素に data 属性を追加し、属性値に embed 要素の src 属性値を記述
- object 要素に type 属性を追加し、属性値に embed 要素の type 属性値（application/x-shockwave-flash）を記述
- param 要素の終了タグを削除し、開始タグを空要素タグ（末尾に " /" を付与）に変更
- embed 要素を削除
- URLに含まれる & を実体参照
なお、object 要素は、要素の内容に適当な説明を書くように求められていますが、元のマークアップに説明に該当する内容がないため、変換後、適宜設定してください。
ちなみに、スクリプトを作成した経緯は、以前、Youtube の貼り付け用 HTML を valid にする件について、変換スクリプトのページ「YouTube -> Valid」を紹介していましたが、随分前にデッドリンクになっていたので自作した次第です。ブックマークレットや GreeseMonkey スクリプトなども既出であると思いますが、とりあえず。
Web creators (ウェブクリエイターズ) 2009年 09月号
遅ればせながら、Web creators 2009 年 9 月号が発売中です。
![Web creators (ウェブクリエイターズ) 2009年 09月号 [雑誌]](http://ecx.images-amazon.com/images/I/51sM7gezzsL._SL160_.jpg) | Web creators (ウェブクリエイターズ) 2009年 09月号 [雑誌] インプレスコミュニケーションズ 2009-07-29 売り上げランキング : Amazonで詳しく見る by G-Tools |
この号から、デザインユニット「linker」の三人による連載が始まりました。
雑誌「web creators」でlinkerの連載がはじまりました。
毎月29日発売のWeb制作総合情報誌「web creators」（MdN）にて、linker3人が連載をスタートしました。2009年9月号では78ページから81ぺーじにあたる「WEBデザインスタイルアップTips」のコーナーです。
今月号は下記の Tips が掲載されています。
- カラムを等間隔に並べたい
- line-heightを自動変換したい
- コンテンツをフィルタリングして表示したい
- キー操作で動作させたい
- 多彩な角の装飾を簡単に実現したい
- 複数行のテキストを天地左右中央に配置したい
- メニューを固定位置に追随させたい
ということで、興味のある方は是非ごらんください。
＃ちょっと宣伝が足リンカー？（笑）。
