2005年01月11日

●選択されたアーカイブリンクを強調表示する

サイドメニューにある Monthly Archives および Categories のリンクをクリックした時に該当のリンクを強調表示させるカスタマイズです。
本カスタマイズは下記の記事を参考にさせて頂きました。ありがとうございました。

ここではカスタマイズ方法のみ記しておりますので機能の詳細につきましては参照元の記事をご覧ください。


以下カスタマイズ方法です。なおオリジナルは PerlScript プラグインを利用されていますがここでは php を使ってみました。したがって利用するアーカイブファイルの拡張子が .php になっていることが前提となります。またモジュール化されている場合は正常に動作しませんので予めご了承ください。PerlScriptプラグインを利用される場合は拡張子の制約はありませんので必要な箇所を適宜修正ください。


1.MTTagInvoke のダウンロード
MTExtensions のページより MTTagInvoke をダウンロードしてください(ページ左上に「Download」のリンクがあります)。ダウンロードしたファイルを解凍して MTTagInvoke.pl を plugins フォルダに配置(FTP等によるアップロードを含む)します。


2.Monthly Archives を変更する場合
日付アーカイブテンプレートにあるサイドメニューの Monthly Archives のタグ(下のリスト)の下線部分を削除して、青色のタグを追加してください。例は公開テンプレートのものを利用しています。

<div class="sidetitle">
Monthly Archives
</div>

<MTTagInvoke tag_name="MTSetVar" name="thismonth">
<MTTagAttribute name="value"><$MTArchiveDate format="%Y%m"$></MTTagAttribute>
</MTTagInvoke>


<div class="side">
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>">
<a href="<$MTArchiveLink$>"<?php $a ="<$MTGetVar name="thismonth"$>"; $b = "<$MTArchiveDate format="%Y%m"$>"; if ($a == $b) print " style=\"font-weight:bold;\""; ?>>
<$MTArchiveTitle$></a> [<$MTArchiveCount$>]<br/>
</MTArchiveList>
</div>

本設定は日別アーカイブページにも適用されます。例えば月別アーカイブと日別アーカイブが同じ「日付アーカイブテンプレート」を利用する設定になっていて(デフォルトではそのようになっています)、カレンダーのリンクが日別アーカイブページになっている場合、カレンダーのリンクをクリックした先のページで該当月が強調表示されます。


3.Categories を変更する場合
カテゴリー・アーカイブテンプレートにあるサイドメニューの Categories のタグ(下のリスト)の下線部分を削除して、青色のタグを追加してください。同じく公開テンプレートのものを例にしています。


3.1 一括表示

<div class="sidetitle">
Categories
</div>

<MTTagInvoke tag_name="MTSetVar" name="thiscategory">
<MTTagAttribute name="value"><$MTArchiveTitle$></MTTagAttribute>
</MTTagInvoke>


<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<a href="<$MTCategoryArchiveLink$>" <?php $a ="<$MTGetVar name="thiscategory"$>"; $b = "<$MTArchiveTitle$>"; if ($a == $b) print "style=\"font-weight:bold;\""; ?>>
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>


3.2 サブカテゴリー表示

<div class="sidetitle">
Categories
</div>

<MTTagInvoke tag_name="MTSetVar" name="thiscategory">
<MTTagAttribute name="value"><$MTArchiveTitle$></MTTagAttribute>
</MTTagInvoke>


<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>">
<a href="<$MTCategoryArchiveLink$>" <?php $a ="<$MTGetVar name="thiscategory"$>"; $b = "<$MTArchiveTitle$>"; if ($a == $b) print "style=\"font-weight:bold;\""; ?> title="<$MTCategoryDescription$>">
<MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>

サブカテゴリーについては MTTopLevelCategories で括られているか、モジュール化されていないとクリックしたカテゴリー自体が表示されませんのでご注意ください。


いずれも表示部分を、

style=\"font-weight:bold;\"

に統一していますが、
class=\"hogehoge\"

に変更し、スタイルシートへ
.hogehoge {
    font-weight:bold;
}

と設定することも可能です。


2005.01.11 追記
モジュール化されている場合は正常に動作しない旨を追記しました。


2005.01.12 追記
モジュール化対応版を公開しました。

17:10 | Comments [3] | Trackbacks [2]

2005年01月04日

●リアルタイムカレンダー(改)

Movable Type がサポートするカレンダーでは、エントリー投稿やコメント投稿が行われないとカレンダー(のリンク)は更新されません。したがって MTCalendarIfToday タグを利用して本日の日付を装飾するカスタマイズを行っている場合も、先の動作がない限りカレンダーの本日表示は更新されません。
本カスタマイズは仕様に依存せず、リアルタイムに日付を更新させます(ブラウザの更新等は必要です)。本日の日付がリアルタイムに更新されることを指して「リアルタイムカレンダー」と(勝手に)命名しました。なおカレンダー自体が存在しない月跨りについては機能の対象外ですので予めご了承ください。


このカスタマイズを行う前提条件はPHPが利用可能なこと、つまりカレンダータグを利用するテンプレートのファイル名の拡張子が .php になっていることです。オリジナルサイトは下記です。ありがとうございました。

また記事のURLは以前よりこのカスタマイズを利用されていた Magic White さんより教えて頂きました(自力で発見できず…)。併せてありがとうございました。


タイトルの「改」は下記を指しています。

  • 文字自体のスタイル設定だったオリジナルからテーブルのカラムにスタイルを与えられるように変更

  • 本日であることを日でしか判定していなかったので年月日判定を追加(月送りカレンダー用)
ここでは拡張子がすでに .php になっている場合とそうでない場合、および月送りカレンダー利用の場合の3つのケースについて説明しています。それぞれに必要な項目は下記の通りです。
    拡張子が .php になっている場合:1、2.1
    拡張子が .php になっていない場合:1、3、4
    月送りカレンダーの場合:1、2.2
1.スタイルシートにカレンダー用スタイルの追加(共通)
スタイルシートのcalendar設定の下辺りに下記の青色部分を追加します。リストは公開テンプレートを例にしています。設定部分は2パターン掲載していますので不要な部分を削除して設定内容を適宜修正してください。
.calendar table {
    padding: 0px;
    border-collapse: collapse;
}

.today {
    background : #000000; /* 背景色をつける設定 */
    border : 1px solid #000000; /* 枠線をつける設定 */
}

注:月送りカレンダーの方はカレンダー用のスタイルシートの一番下に追加してください。


2.カレンダー関連タグの変更(拡張子が .php になっている場合/月送りカレンダーの場合)
カレンダーの設定がされている各テンプレートの <MTCalendar>~</MTCalendar> の部分を下記のスクリプトに変更します。利用中のカレンダーによって2種類のテンプレートを用意していますので該当する方をお使いください。


2.1 通常の1ヶ月表示の場合

<?php $day = date(j);?>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries><?php $d="<$MTCalendarDay$>"; if($day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?><td align="center"<?php print "$style"; ?>><span class="calendar"><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></span></td></MTCalendarIfEntries>
<MTCalendarIfNoEntries><?php $d="<$MTCalendarDay$>"; if($day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?><td align="center"<?php print "$style"; ?>><span class="calendar"><$MTCalendarDay$></span></td></MTCalendarIfNoEntries>
<MTCalendarIfBlank><td>&nbsp;</td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

2.2 月送りカレンダーの場合
月送りカレンダーご利用の方は「アーカイブ・テンプレート」の「Calendar」にある該当部分を変更してください。
<?php $day = date(j); $year = date(Y); $month = date(m); ?>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries>
<?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?>
<td align="center"<?php print "$style"; ?>><span class="calendar"><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></span></td>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?>
<td align="center"<?php print "$style"; ?>><span class="calendar"><$MTCalendarDay$></span></td>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank><td>&nbsp;</td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

ちなみに両者の違いですが、月送りカレンダー/複数月表示の場合は本日の判定に年月日を取得しています。1ヶ月表示の場合は日のみの判定なので若干軽いです。月送りカレンダーで1ヶ月用のタグを使うと毎月同じ日に印がつきますのでご注意ください。


3.カレンダー用インデックステンプレートの作成(拡張子が .php になっていない場合)
「管理メニュー」の「テンプレート」をクリック→次ページ右上の「新しいインデックス・テンプレートを作る」をクリックし、下記を設定してください。

    テンプレートの名前:カレンダー(何でも良い)
    出力ファイル名:calendar.php
    インデックス~自動的に再構築する:チェック
    テンプレートの中身:下記リストをコピー&ペースト(公開テンプレート用に合わせてますのでそれ以外の方はクラス名等を適宜修正してください)
<div class="side">
<div class="calendar">
<div class="sidetitle">
Calendar of <$MTDate format="%B %Y"$>
</div>
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
<tr>
<th abbr="Sunday"><span class="calendar"><font color="#e50003">Sun</font></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><font color="blue">Sat</font></span></th>
</tr>

<?php $day = date(j);?>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries><?php $d="<$MTCalendarDay$>"; if($day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?><td align="center"<?php print "$style"; ?>><span class="calendar"><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></span></td></MTCalendarIfEntries>
<MTCalendarIfNoEntries><?php $d="<$MTCalendarDay$>"; if($day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?><td align="center"<?php print "$style"; ?>><span class="calendar"><$MTCalendarDay$></span></td></MTCalendarIfNoEntries>
<MTCalendarIfBlank><td>&nbsp;</td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>
</div>


設定終了後、保存・再構築してください。


4.calendar.phpのインクルード(拡張子が .php になっていない場合)
各テンプレートの カレンダー設定部分(赤色)をごっそり削除して青色のタグに置き換えてください。

<div class="side">
<div class="calendar">
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday"><span class="calendar"><font color="#e50003">Sun</font></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><font color="blue">Sat</font></span></th>
</tr>

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center" <MTCalendarIfToday>bgcolor="#ffffe0"</MTCalendarIfToday>><span class="calendar">
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>


<$MTInclude file="calendar.php"$>

設定終了後、保存・再構築してください。


2004.01.05 追記
月送りカレンダー用のタグにtypoがありましたので修正しました。また同タグのリンクにターゲット指定を追加しました。

18:10 | Comments [35] | Trackbacks [10]

2004年12月30日

●ポップアップ画面を用いたコメント投稿(その3:公開テンプレート修正方法)

このシリーズの(多分)最後は、公開テンプレートの修正方法についての説明です。


2004年12月30日、本エントリー投稿に伴いまして公開テンプレートにもポップアップ機能を追加致しました。そのためテンプレート取得日によってカスタマイズ方法が若干異なります。これにつきましては各項目の右側に対応するテンプレートを記しましたので必要な方を適宜参照ください。念のため

    2004年12月30日以前に取得された方:1、2、3、4.2、5、6
    2004年12月30日以降に取得された方:1、2、3、4.1
となっています。どちらか分からない場合は4項のテンプレートの内容で判断してみてください。


Movable Type 3.121を新規インストール、公開テンプレートの内容に差し替えた後、下記の手順を実施して動作確認しています。その中で個別エントリーアーカイブよりコメント・プレビューまたはコメント・エラー画面にジャンプした後でTypeKeyサインインした場合、個別エントリーアーカイブにリダイレクトされずにコメント・リストにリダイレクトされるという事象が発生しています。この点につきましては予めご容赦ください。また日本語のTypeKeyニックネームでサイン・インした場合、どの画面からのサイン・インも文字化けしないことを確認しておりますが、文字化けする場合はご連絡ください。


1.ポップアップ用テンプレート設定(必須)

より
    コメント・リスト(ポップアップ用)
    コメント・プレビュー(ポップアップ用)
    コメント・エラー(ポップアップ用)
    コメント・保留(ポップアップ用)
の各テンプレートを、該当するテンプレートの内容に上書きしてください(どちらのエントリーも同じ内容です)。
なお、コメント・プレビュー/コメント・エラー/コメント・保留テンプレートについては現在お使いのテンプレートを上書き致しますので、予め任意のファイル名でバックアップされることをお勧め致します。


2.Context.pm修正・その1(必須)
Ogawa::Memorandaさんの提供のパッチ

    lib/MT/Template/Context.pm
の1170行目辺りに設定します。赤色部分を削除して青色部分を追加してください(念のためバックアップを保存しておきましょう)。
    my $allow_comment_html_note = (($blog->allow_comment_html)
                   ? ($args->{html_ok_msg} ||
                                      MT->translate("(You may use HTML tags for style)")) : "");
    my $lang = ($cfg->DefaultLanguage eq 'ja') ? "&lang=ja" : '';
    my $needs_email = $blog->require_comment_emails ? "&need_email=1" : "";
    my $registration_required = ($blog->allow_reg_comments
                 && !$blog->allow_unreg_comments);
    my $registration_allowed = $blog->allow_reg_comments;
    my $unregistered_allowed = $blog->allow_unreg_comments;

    my $static_arg = $args->{static} ? "static=1" : "static=0";
    my $static_field = ($args->{static} || !defined($args->{static}))
    my ($static_arg, $static_field);
    if (defined($args->{static})) {
    $static_arg = $args->{static} ? "static=1" : "static=0";
    $static_field = $args->{static}
            ? (q{<input type="hidden" name="static" value="1" />})
            : (q{<input type="hidden" name="static" value="0" />});
    } else {
    $static_arg = $ctx->stash('comment_is_static') ? "static=1" : "static=0";
    $static_field = $ctx->stash('comment_is_static')
            ? (q{<input type="hidden" name="static" value="1" />})
            : (q{<input type="hidden" name="static" value="0" />});
    }
    my $typekey_version = $cfg->TypeKeyVersion;


このパッチはコメント・プレビュー/コメント・エラーテンプレートの MTCommentField タグに static属性が指定されていない場合、個別エントリーアーカイブまたは3項のコメントリストに設定した static 属性値を自動的に取得してくれるもので、投稿後の画面遷移がその1の通りになります。


3.Context.pm修正・その2(必須)
MTCommentField タグを利用する場合、展開されるソースに getCookie 関数が含まれます。実はコメント用各テンプレートの「Remember Me」またはHTMLの head タグ内にも同じ関数が存在しており、同一名称の関数が重複する場合は後方に定義されたもの(つまり MTCommentField での getCookie)が有効になります。
これにより、ポップアップ画面で日本語のTypeKeyニックネームが文字化けする場合等は

    lib/MT/Template/Context.pm
の(3.121の場合は)1210行目あたりにある下記のスクリプトについて、青色部分を追加してコメントアウトしてください(if文もろとも削除しても良いでしょう)。
    if ($registration_allowed || $unregistered_allowed) {
        $javascript = <<JAVASCRIPT;
<script language="javascript">
//function getCookie (name) {
//    var prefix = name + \'=\';
//    var c = document.cookie;
//    var nullstring = \'\';
//    var cookieStartIndex = c.indexOf(prefix);
//    if (cookieStartIndex == -1)
//        return nullstring;
//    var cookieEndIndex = c.indexOf(";", cookieStartIndex + prefix.length);
//    if (cookieEndIndex == -1)
//        cookieEndIndex = c.length;
//    return unescape(c.substring(cookieStartIndex + prefix.length, cookieEndIndex));
//}
</script>
JAVASCRIPT
    }

テンプレートモジュール「Remember Me」の有無は設定環境によって異なります。修正しても文字化けが解消しない場合は cookie を一旦削除(IEであれば「ツール」→「インターネットオプション」→「Cookieの削除」)してみてください。


4.各アーカイブテンプレート変更(その1:リンク先変更)
ポップアップしたい各アーカイブテンプレート(メインページ/カテゴリー・アーカイブ/日付アーカイブ等)の個別エントリーアーカイブへのリンクを、ポップアップ画面へのリンクに変更します。


4.1 2004年12月30日以降にテンプレートを取得された場合
赤色部分を削除(非ポップアップへのリンクをコメントアウト)して青色部分を追加(ポップアップへのリンクを有効化)してください。よく分からない場合は「ポップアップ用」という行のコメントに括られた部分だけを残して、他(「ポップアップ用」という行も含めて)はごっそり削除してください。

<MTEntryIfAllowComments>
<!-- コメント・非ポップアップ用 -->
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">Comments</a> [<$MTEntryCommentCount$>]
<!-- コメント・非ポップアップ用 -->
<!-- コメント・ポップアップ用 -->
| <a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments</a> [<$MTEntryCommentCount$>]
<-- コメント・ポップアップ用 -->
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
<!-- トラックバック・非ポップアップ用 -->
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">Trackbacks</a> [<$MTEntryTrackbackCount$>]
<!-- トラックバック・非ポップアップ用 -->
<!-- トラックバック・ポップアップ用 -->
| <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">Trackbacks</a> [<$MTEntryTrackbackCount$>]
<-- トラックバック・ポップアップ用 -->
</MTEntryIfAllowPings>


4.2 2004年12月30日以前にテンプレートを取得された場合
赤色部分を青色部分の内容に修正してください。よく分からない場合は青色のリストを丸ごとコピーして赤色のリストと入れ替えてやってください。

<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">Comments (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">Trackbacks (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>

<MTEntryIfAllowComments>
| <a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">Trackbacks (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>

各リストの
<MTEntryIfAllowComments>~</MTEntryIfAllowComments>

で括られた部分がコメント、
<MTEntryIfAllowPings>~</MTEntryIfAllowPings>

で括られた部分がトラックバックに該当します。


5.各アーカイブテンプレート変更(その2:JavaScript追加)(2004.12.30以前にテンプレート取得された場合)
ポップアップを利用したいテンプレートの <head> ~ </head> の間(</head> の直前がいいです)に下記のスクリプトを追加します。先のリンクがクリックされるとこの JavaScript が起動し、ポップアップ画面を表示します。width(画面の幅) および height(画面の高さ) は任意の値を指定できます。OpenComments はコメントポップアップ用、OpenTrackback はトラックバックポップアップ用です。

<script language="javascript" type="text/javascript">
<!--
// コメント・リスト用
function OpenComments (c) {
window.open(c, 'comments', 'width=480,height=480,scrollbars=yes,status=yes');
}

// トラックバック・リスト用
function OpenTrackback (c) {
window.open(c, 'trackback', 'width=480,height=480,scrollbars=yes,status=yes');
}
//-->
</script>


6.スタイルシート修正(2004.12.30以前にテンプレート取得された場合)
スタイルシートに下記の青色部分を追加または修正してください(現状のスタイルシートはポップアップ用の設定を行っていましたが、見直したところ一部不具合がありましたので、その修正です)。なお現在ご使用のタイプが固定/可変で設定内容が若干異なりますのでご注意ください。また設定内容はデフォルト状態のものですので、デザインにあわせて適宜修正してくださって結構です。


可変3カラム/固定3カラム共通

/* ポップアップウインドウのタイトル部分 */
    #banner-commentspop {
        z-index: 1;
        color:#999999;
        background:#ffffe0;
        background-position:right top;
        background-repeat:repeat-y;
        background-repeat:no-repeat;
        background-image: url("画像を置くURl/ファイル名.gif");
        padding-left:10px;
        padding-top:10px;
        padding-bottom:10px;
        text-align: left;
        border: 1px solid #666699;
    }

    #banner-commentspop h1 {
        color: #999999;
        font-family: "MSゴシック", Arial, sans-serif;
        font-weight: normal;
        font-size: 32px;
    }


固定3カラムご使用の場合は上記の設定の直前にさらに下記を追加
    #box-commentspop {
        width: auto;
        border-bottom: 1px solid #666699;
        border-left: 1px solid #666699;
        border-right: 1px solid #666699;
        background-color: #FFFFFF;
    }

その1:基本動作 | その2:カスタマイズ | その4:コメントフォームのカスタマイズ


2004.12.30 追記
2項のパッチ表示が誤っておりました。本日10:05に修正致しましたので、それ以前に本画面より直接コピーされた方は差し替えくださいますようお願い致します。またコメント・プレビュー/コメント・エラーでサイン・インしても問題ないことを確認しましたので記述を削除しました。


2004.12.31 追記
投稿後に日本語全角の名前が文字化けする問題が解消されていなかったため3項を追加しました。それに伴い以降の項番をシフトしました。

02:38 | Comments [23] | Trackbacks [2]

2004年12月29日

●コメント投稿者の情報表示をカスタマイズする

コメント投稿者の情報表示のカスタマイズについてご説明致します。
表示に使用される変数タグは MTCommentAuthorLink / MTCommentPreviewAuthorLink の2種類で、表示方法の詳細設定にタグアトリビュート(属性)を用います。これによりコメントに入力されたコメント投稿者の情報(URL・メールアドレス等)の表示・非表示やを表示方法等をコントロールすることができます。


カスタマイズ方法です。まず MTCommentAuthorLink / MTCommentPreviewAuthorLink は、下記の各テンプレートの赤色部分に存在します(デフォルトテンプレートで示しています)。カスタマイズされる場合はこれらが一律対象となります。


個別エントリーアーカイブ

<MTComments>
<div id="c<$MTCommentID$>">
<$MTCommentBody$>
</div>
<p class="posted">投稿者 <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> <MTCommentAuthorIdentity> : <$MTCommentDate$></p>
</MTComments>

コメント・プレビュー
<$MTCommentPreviewBody$>
<p class="posted">投稿者 <$MTCommentPreviewAuthorLink spam_protect="1"$> : <$MTCommentPreviewDate$></p>
    :
<MTComments>
<$MTCommentBody$>
<p class="posted">投稿者 <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> : <$MTCommentDate$></p>
</MTComments>

コメント・リスト(本テンプレートを使用している場合)
<MTComments>
<$MTCommentBody$>
<p class="posted">投稿者 <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> : <$MTCommentDate$></p>
</MTComments>

次にタグアトリビュート一覧を示します。


名前の入力がない場合のデフォルト名を設定する

default_name="Anonymous"

これは管理メニュー左の「ウェブログの設定」をクリック→次ページ右上の「設定」をクリック→次ページ下の方にある「コメント」の「名前とURLを必須にする」にチェックがついていない場合に有効になります。デフォルトテンプレートではこの属性が付与されていますが、先のチェックがついていれば気にする必要はありません。この属性の設定がなく「名前とURLを必須にする」チェックがついていない状態で名前なしのコメントが投稿されると、コメント欄に投稿者名が表示されません。
なお設定した場合(および無効にした場合)は以前の名無しコメント全てに適用されます。


メールアドレスにリンクしない

show_email="0"

コメントのメールアドレス欄にメールアドレスが入力されてもリンクしません。デフォルトテンプレートではリンクする状態になっています。


URLにリンクしない

show_url="0"

コメントのURL欄にURLが入力されてもリンクしません。デフォルトテンプレートではリンクする状態になっています。


URLをリダイレクトしない

no_redirect="1"

コメントスパムの目的は、リンクがクリックされることにより検索エンジンのランクを向上させることです。この部分でURLをリダイレクトする意味は、コメント投稿者のURLを検索エンジンから直接見えないようにするためです。そうすることでコメント・スパムの検索エンジンでのランク向上を抑制する効果があります。
デフォルト状態ではこのリダイレクト機能を有効にしていますが、リダイレクトを使いたくない場合は上記の設定を追加してください。


メールアドレスをスパム・ボット対策されたアドレスに変更する

spam_protect="1"

スパマーはHTMLソースに記述されるメールアドレスのフォーマットを見つけてスパムメールを送ります。
spam_protect アトリビュートを設定すればメールアドレスのリンクは表示されますが、スパム・ボット対策されたアドレスに変更されます。つまりブラウザ上では正しいメールアドレスとして表示され、実際のHTMLソースには「@」や「.」を含みません。例えばメールアドレスが
    foo@bar.com
であれば、HTMLでは
    foo&#64;bar&#46;com
となります。
デフォルトテンプレートではこの設定になっていますが、先の show_email="0" を指定した場合はメールアドレスにリンクしなくなるため冗長な設定となります。ただし設定が残っていても問題はありません。


下記に設定例を示します。最もポピュラーと思われるケースで「メールアドレスをリンクしない&メールアドレスをスパム・ボット対策されたアドレスに変更する」の設定は、

<$MTCommentAuthorLink show_email="0" spam_protect="1"$>

または
<$MTCommentPreviewAuthorLink show_email="0" spam_protect="1"$>

となります。
属性を記述する場合はその前後に半角空白を挿入します(変数タグの終了を示す"$"との間はなくても大丈夫です)。属性の記述順序に制約はありません。

15:20 | Comments [0] | Trackbacks [0]

2004年12月28日

●ユーザー・マニュアルのテンプレート

たいしたものではありませんが、以前投稿したサイドメニュー用「Movable Type ユーザー・マニュアル」のテンプレートを公開します。

利用方法は、本テンプレートを貼り付けたいテンプレートのサイドメニュー部分の任意の位置にコピー&ペーストしてください。メニュータイトルもセットになっています。公開テンプレートのスタイルシートをお使いの方は(多分)そのまま使えます。それ以外の方や変更されている方はクラス名等を適宜修正してください。また <$MTBlogURL$> の部分は docs の配置先によって適宜変更してください。
またサイドメニューの折りたたみおよび、サブカテゴリーの折りたたみもデフォルトで設定していますので、折りたたみを利用されている方は(これも多分)折りたたみ状態になります。折りたたみ用の id 属性名は「manual」にしています。折りたたみを利用されていない方も既に使用中の id 属性名と重複していないか確認してください。

ユーザー・マニュアル


各サブメニューはトップページと同じインデントにしています。トップページのサブカテゴリーに変更したい場合は赤色部分のコメントマークを全て削除してください。
       :
<li><!--<div class="subcategories" id="subcategories100name">--><a href="<$MTBlogURL$>docs/mtmanual.html" target="_blank">トップ</a> <!--</div>-->

<!--<div id="subcategories100list">-->
<!--<ul>-->
    <li><a href="<$MTBlogURL$>docs/mtmanual_about.html" target="_blank">Movable Type について</a></li>
       :
    <li><a href="<$MTBlogURL$>docs/mtmanual_configuration.html" target="_blank">mt.cfg 設定ガイド</a></li>
<!--</ul>-->
<!--</div>-->
       :

2004.12.28 追記
タグ内の id 属性が公開テンプレートにないものを指定していましたので修正しました。すいません。またパスの設定について補足を追記しました。
12:15 | Comments [11] | Trackbacks [1]

2004年12月26日

●ポップアップ画面を用いたコメント投稿(その2:カスタマイズ)

今回はコメント・トラックバックのポップアップ化のカスタマイズ方法をご説明致します。
ここではデフォルトテンプレートにもとづいたカスタマイズ方法について記しています。当サイトの公開テンプレート用のポップアップ対応版につきましては本シリーズ次回のエントリーでお知らせする予定です。お待たせして申し訳ございませんがもう少々お待ちください。


以下カスタマイズ方法です。なおポップアップはコメントおよびトラックバックについて有無を選択できます。いずれか片方のみをポップアップにする場合は必要な箇所を適宜お読みになってください。


1.各アーカイブテンプレート変更(その1:リンク先変更)
ポップアップしたい各アーカイブテンプレート(メインページ/カテゴリー・アーカイブ/日付アーカイブ等)の個別エントリーアーカイブへのリンクを、ポップアップ画面へのリンクに変更します。

<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">Comments (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">Trackbacks (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>

<MTEntryIfAllowComments>
| <a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">Trackbacks (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>

各リストの
<MTEntryIfAllowComments>~</MTEntryIfAllowComments>

で括られた部分がコメント、
<MTEntryIfAllowPings>~</MTEntryIfAllowPings>

で括られた部分がトラックバックに該当します。


2.各アーカイブテンプレート変更(その2:JavaScript追加)
ポップアップを利用したいテンプレートの <head> ~ </head> の間(</head> の直前がいいです)に下記のスクリプトを追加します。先のリンクがクリックされるとこの JavaScript が起動し、ポップアップ画面を表示します。width(画面の幅) および height(画面の高さ) は任意の値を指定できます。OpenComments はコメントポップアップ用、OpenTrackback はトラックバックポップアップ用です。

<script language="javascript" type="text/javascript">
<!--
// コメント・リスト用
function OpenComments (c) {
window.open(c, 'comments', 'width=480,height=480,scrollbars=yes,status=yes');
}

// トラックバック・リスト用
function OpenTrackback (c) {
window.open(c, 'trackback', 'width=480,height=480,scrollbars=yes,status=yes');
}
//-->
</script>


3.コメント・リストテンプレート修正
コメント・リストがポップアップ画面であることを示す MTCommentFields フィールドタグの static 属性に "0" を追加します。コメント投稿後の画面をコメント・リストに誘導する場合はこの指定を行ってください。

<MTCommentFields static="0">


4.Context.pm修正(その1:static属性値取得用パッチ)
Ogawa::Memorandaさんの提供のパッチ

    lib/MT/Template/Context.pm
の1170行目辺りに設定します。赤色部分を削除して青色部分を追加してください(念のためバックアップを保存しておきましょう)。
    my $allow_comment_html_note = (($blog->allow_comment_html)
                   ? ($args->{html_ok_msg} ||
                                      MT->translate("(You may use HTML tags for style)")) : "");
    my $lang = ($cfg->DefaultLanguage eq 'ja') ? "&lang=ja" : '';
    my $needs_email = $blog->require_comment_emails ? "&need_email=1" : "";
    my $registration_required = ($blog->allow_reg_comments
                 && !$blog->allow_unreg_comments);
    my $registration_allowed = $blog->allow_reg_comments;
    my $unregistered_allowed = $blog->allow_unreg_comments;

    my $static_arg = $args->{static} ? "static=1" : "static=0";
    my $static_field = ($args->{static} || !defined($args->{static}))
    my ($static_arg, $static_field);
    if (defined($args->{static})) {
    $static_arg = $args->{static} ? "static=1" : "static=0";
    $static_field = $args->{static}
            ? (q{<input type="hidden" name="static" value="1" />})
            : (q{<input type="hidden" name="static" value="0" />});
    } else {
    $static_arg = $ctx->stash('comment_is_static') ? "static=1" : "static=0";
    $static_field = $ctx->stash('comment_is_static')
            ? (q{<input type="hidden" name="static" value="1" />})
            : (q{<input type="hidden" name="static" value="0" />});
    }
    my $typekey_version = $cfg->TypeKeyVersion;


このパッチはコメント・プレビュー/コメント・エラーテンプレートの MTCommentField タグに static属性が指定されていない場合、個別エントリーアーカイブまたは3項のコメントリストに設定した static 属性値を自動的に取得してくれるもので、投稿後の画面遷移がその1の通りになります。


5.Context.pm修正(その2:重複関数の修正)
MTCommentField タグを利用する場合、展開されるソースに getCookie 関数が含まれます。実はコメント用各テンプレートの「Remember Me」またはHTMLの head タグ内にも同じ関数が存在しており、同一名称の関数が重複する場合は後方に定義されたもの(つまり MTCommentField での getCookie)が有効になります。
これにより、ポップアップ画面で日本語のTypeKeyニックネームが文字化けする場合等は

    lib/MT/Template/Context.pm
の(3.121の場合は)1210行目あたりにある下記のスクリプトを、前方のスクリプトの内容をコピーして一致させる(多分赤色の1行が問題)か、
    if ($registration_allowed || $unregistered_allowed) {
        $javascript = <<JAVASCRIPT;
<script language="javascript">
function getCookie (name) {
    var prefix = name + \'=\';
    var c = document.cookie;
    var nullstring = \'\';
    var cookieStartIndex = c.indexOf(prefix);
    if (cookieStartIndex == -1)
        return nullstring;
    var cookieEndIndex = c.indexOf(";", cookieStartIndex + prefix.length);
    if (cookieEndIndex == -1)
        cookieEndIndex = c.length;
    return unescape(c.substring(cookieStartIndex + prefix.length, cookieEndIndex));
}
</script>
JAVASCRIPT
    }

青色部分を追加してコメントアウトしてください(if文もろとも削除しても良いでしょう)。
    if ($registration_allowed || $unregistered_allowed) {
        $javascript = <<JAVASCRIPT;
<script language="javascript">
//function getCookie (name) {
//    var prefix = name + \'=\';
//    var c = document.cookie;
//    var nullstring = \'\';
//    var cookieStartIndex = c.indexOf(prefix);
//    if (cookieStartIndex == -1)
//        return nullstring;
//    var cookieEndIndex = c.indexOf(";", cookieStartIndex + prefix.length);
//    if (cookieEndIndex == -1)
//        cookieEndIndex = c.length;
//    return unescape(c.substring(cookieStartIndex + prefix.length, cookieEndIndex));
//}
</script>
JAVASCRIPT
    }

テンプレートモジュール「Remember Me」の有無は設定環境によって異なります。


以上です。例によって不具合等ございましたらご連絡ください。


その1:基本動作 | その3:公開テンプレート修正方法 | その4:コメントフォームのカスタマイズ


2004.12.26 追記
MTCommentFiled を利用する場合、getCookie 関数による不具合が生じる可能性があるため、記述を追加しました。


2004.12.27 追記
Ogawa::Memorandaさんより提供くださったパッチの適用により、4項以降の記述を全面修正致しました。


2004.12.30 追記
4項のパッチ表示が誤っておりました。本日10:00頃に修正致しましたので、それ以前に本画面より直接コピーされた方は差し替えくださいますようお願い致します。

02:10 | Comments [34] | Trackbacks [1]

2004年12月24日

●menufolder.js 3.01 リリース

折りたたみスクリプトの menufolder.js をマイナーバージョンアップしました。
今回の修正は MacIE 用の対処です。3.00での MacIE で折りたたみが正常に動作しない問題について修正致しました。MacIE をご使用の方は多くないかも知れませんが、折りたたみ可能なブラウザが拡大されますのでアップグレードされることをお勧めします。
なお今回の修正は TOY COZY MUSEUM:toycozy さんおよび、Mellout,inc.:mellout さんのご助言およびご協力によりリリースすることができました。この場をお借りしてお礼申し上げます。


アップグレードされる場合は下記のリンクでスクリプトのページ(あちこちにリンクを貼るとメンテナンスが大変なので新しく作りました)へジャンプし、そこからダウンロードしてください。

なお 3.00 のスクリプトから修正される場合は下記の変更を行ってください。
まず95行目あたりにある赤色部分の行を青色のものに入れ替えます。
for(var x = 0; x < list.length; x++) {
    if (list[x] != name) {
        newData.push(list[x]);
    }
}

for(var x = 0; x < list.length; x++) {
    if (list[x] != name) {
        newData[newData.length] = list[x];
    }
}

次にスクリプト冒頭に配している各設定データ(赤色部分)
//--------------------------------------------------------
// Configuration
//--------------------------------------------------------

// サイドメニュー用折りたたみマーク
var openMarkForSideBarMenu = '▽';
var closeMarkForSideBarMenu = '△';
        :
      (中略)
        :
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories = '▽';
var closeMarkForSubCategories = '△';

//--------------------------------------------------------


をごっそり切り取り、下記の位置(切り取り前の行数で言うと172行と173行の間)に移動します。
        :
        :
function FoldNavigation(idName,initMode,viewNum) {

//--------------------------------------------------------
// Configuration
//--------------------------------------------------------

// サイドメニュー用折りたたみマーク
var openMarkForSideBarMenu = '▽';
var closeMarkForSideBarMenu = '△';
        :
      (中略)
        :
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories = '▽';
var closeMarkForSubCategories = '△';

//--------------------------------------------------------

    var openMark; // The mark for opening, when having closed
    var closeMark; // The mark for closing, when open
    var preMark; // The insertion position of a mark.
        :
        :


具体的な修正内容は下記の通りです。
  • 現状のスクリプトで用いている push 関数が MacIE では期待する動作とならないため、push 関数による処理を配列の代入処理に変更。

  • グローバル変数として設定している各設定値用の変数のスコープが正常に認識できないため、ローカル変数として配置するように変更。

12:00 | Comments [8] | Trackbacks [3]

2004年12月22日

●MTCommentPreviewIsStatic の振る舞いについての改善案

コメントのポップアップ化に関する事項で、投稿後の表示画面選択情報を保持する MTCommentPreviewIsStatic の振る舞いについて改善案を記します。


MTCommentFields タグで MTCommentPreviewIsStatic が指定できない

MTCommentFields はコメント・リスト/コメント・プレビュー/コメント・エラーの各テンプレートでコメント入力フォームを指定するコンテナタグです。MTCommentPreviewIsStatic は、ユーザー・マニュアルでは

特別な秘匿タグで、Comment Preview and Comment Error テンプレートで使います。システムは、コメントを投稿後、どのページを表示したらよいか知るために、このタグを利用します。このタグを使うときは Comment Preview と Comment Error テンプレートの中の HTML フォーム の INPUT HIDDEN の中に埋め込みます。

という説明になっています。これは変数タグで、値と意味は次の通りと考えられます。
    0:ポップアップ・ウィンドウ
    1:非ポップアップ・ウィンドウ
MTCommentPreviewIsStatic の元となる情報は、個別エントリーアーカイブではコメントフォームに埋め込まれた
<input type="hidden" name="static" value="1">

またはコメント・リストの
<MTCommentFields static="0">

より取得します。


この値の取得方法は Movable Type ユーザー・マニュアルによると、コメント・プレビュー/コメント・エラーテンプレートのコメントフォーム内に

<input type="hidden" name="static" value="<$MTCommentPreviewIsStatic$>">

を指定するようになっています。
input タグを用いるということは、デフォルトテンプレートで使われている MTCommentFields が適用できないということを暗黙的に指しており、コメント用テンプレートに 個別エントリーアーカイブと同じ(膨大な)テンプレートを貼り付ける必要があります。
これは大きな問題ではありませんが面倒です。また直感的およびポップアップ化によるテンプレート変更の容易性から、コメント・プレビュー/コメント・エラーテンプレートで
<MTCommentFields preview="1" static="<$MTCommentPreviewIsStatic$>">

という指定ができても良いのではないでしょうか(実験しましたが×)。


という訳で上記は改善案として記させて頂きました。またこの指定が可能となるパッチが Orgawa::memoranda さんより公開されることを密かに期待しております。


なお MTCommentPreviewIsStatic 値の取得は、MTCommentFields を残した状態で下記のスクリプト(青色部分)を追加することで実現できます。

<MTCommentFields preview="1">
<script language="javascript" type="text/javascript">
<!--
if (document.comments_form.static)
    document.comments_form.static.value = '<$MTCommentPreviewIsStatic$>';
//-->
</script>

この方が、個別エントリーアーカイブよりコメント用フォームをコピー&ペーストし、その中の input タグの指定を変更するという作業を行うよりはるかに簡単です。


コメント・プレビュー/コメント・エラー画面でフォーム情報が引き継がれない

真面目に input タグから MTCommentPreviewIsStatic 値を取得した場合の問題です。
現状の仕様により、MTCommentPreviewIsStatic を使用するためにコメント・プレビュー/コメント・エラーテンプレートの

<MTIfCommentsAllowed>
        :
</MTIfCommentsAllowed>

を個別エントリーアーカイブのもの(厳密にはcookie取得用のJavaScriptを含む)に入れ替える必要がありますが、そのままではフォーム入力がプレビュー画面に引き継がれないという問題(カスタマイズ不足?)が発生します。
これについては入れ替えた部分の下記の input タグにvalue 属性等(青色部分)を追加することで解決します。
<input tabindex="1" id="author" name="author" value="<$MTCommentPreviewAuthor encode_html="1"$>"/>
             :
<input tabindex="2" id="email" name="email" value="<$MTCommentPreviewEmail encode_html="1"$>"/>
             :
<input tabindex="3" type="text" name="url" id="url" value="<$MTCommentPreviewURL encode_html="1"$>"/>
             :
<textarea tabindex="4" id="text" name="text" rows="10" cols="50"><$MTCommentPreviewBody convert_breaks="0" encode_html="1"$></textarea>

また入れ替えたタグの直後に下記のスクリプト(Ogawa::memorandaMovable Type 3.0のMTCommentFields tagより引用)を追加する方法もあります。
<script language="javascript" type="text/javascript">
<!--
if (document.comments_form.author)
document.comments_form.author.value =
'<$MTCommentPreviewAuthor encode_js="1"$>';
if (document.comments_form.email)
document.comments_form.email.value =
'<$MTCommentPreviewEmail encode_js="1"$>';
if (document.comments_form.url)
document.comments_form.url.value =
'<$MTCommentPreviewURL encode_js="1"$>';
if (document.comments_form.text)
document.comments_form.text.value =
'<$MTCommentPreviewBody convert_breaks="0" encode_js="1"$>';
//-->
</script>

仮にこれが不具合であったとしてもシステムとして修正されることは考えにくいので、やはりコメント・プレビュー/コメント・エラーテンプレートでは MTCommentFields の利用が前提ではないかと推測しています。


動作および振る舞いについて認識誤り等ございましたらご指摘ください。


2004.12.23 追記
フォーム情報が引き継がれない問題について、(o)さんよりアドバイス頂いた方法(inputタグに挿入)に修正しました。先に書いたのもとりあえず残してます。
またスクリプトの引用がもれていたので追記しました。
さらにcookie取得用のJavaScriptは不要ですので削除しました(ポップアップでこれが必要なのはコメント・リストテンプレートのみ)。

15:08 | Comments [8] | Trackbacks [0]
 1  |  2  |  3  | All pages