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

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

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

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

2004年12月30日以前に取得された方：１、２、３、４．２、５、６

2004年12月30日以降に取得された方：１、２、３、４．１

となっています。どちらか分からない場合は４項のテンプレートの内容で判断してみてください。

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

１．ポップアップ用テンプレート設定（必須）

Movable Type 3.11-ja/3.121-ja 3カラム テンプレート（サイズ可変）

Movable Type 3.11-ja/3.121-ja 3カラム テンプレート（サイズ固定）

より

コメント・リスト（ポップアップ用）

コメント・プレビュー（ポップアップ用）

コメント・エラー（ポップアップ用）

コメント・保留（ポップアップ用）

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

２．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属性が指定されていない場合、個別エントリーアーカイブまたは３項のコメントリストに設定した static 属性値を自動的に取得してくれるもので、投稿後の画面遷移がその１の通りになります。

３．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の削除」）してみてください。

４．各アーカイブテンプレート変更（その１：リンク先変更）
ポップアップしたい各アーカイブテンプレート（メインページ／カテゴリー・アーカイブ／日付アーカイブ等）の個別エントリーアーカイブへのリンクを、ポップアップ画面へのリンクに変更します。

４．１ 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>

４．２ 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>

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

５．各アーカイブテンプレート変更（その２：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>

６．スタイルシート修正（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: "ＭＳゴシック", 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;
    }

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

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