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

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

Posted at December 30,2004 2:38 AM
Tag:[]

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

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.ポップアップ用テンプレート設定(必須)

Movable Type 3.11-ja/3.121-ja 3カラム テンプレート(サイズ可変)
Movable Type 3.11-ja/3.121-ja 3カラム テンプレート(サイズ固定)

より

コメント・リスト(ポップアップ用)
コメント・プレビュー(ポップアップ用)
コメント・エラー(ポップアップ用)
コメント・保留(ポップアップ用)

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

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:カスタマイズ
その3:公開テンプレート修正方法
その4:コメントフォームのカスタマイズ
その5:その4の補足

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

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

なんとか年内にリリースできました。


おつかれさま! > 自分(笑)

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

今年最後のMTカスタマは! from 喜怒哀楽
コメントやトラックバックの文字をクリックした時に ホップアップウィンドウにて処理... [続きを読む]

Tracked on December 31, 2004 4:24 PM

A little hack for MTCommentFields from Ogawa::Memoranda
MTCommentFieldsはstaticオプションによって生成されるコメントフォームにstaticという名前のhiddenフィールドを生成します。 stat... [続きを読む]

Tracked on January 3, 2005 11:55 PM
コメント

ホントお疲れさまでした。シリーズ企画になっちゃいましたね。
ぴぃかぶぅのほうはポップアップにしましたが、やむやむは今のままにしようと思います。
せっかく二つブログを作ったので、見た目のデザインの違いだけじゃなく、こういった動作も
二つで異なるのも おもしろいかな・・・と思って。
あとは、今のところ、内容的に 二つブログがある意味がない感じなので、
(どちらも、同じような内容になってしまってるので)
じょうずに使い分けてくのが、来年以降の課題です。
初心者にもわかりやすい親切なyujiroさんのサポート、ホントいつも助かってます。
来年も よろしくお願いします。ぺこり <(_ _)>

[1] Posted by さえら : December 30, 2004 9:07 AM

こんにちは。
労いのお言葉ありがとうございます。
また色々ご利用&ご指摘ありがとうございました。大変感謝しております。

このシリーズは予定通り年内に終えられてホッとしています。
自分の環境では期待通りに動作するようになったので(すいません)満足です。
あとはご要望くださったミッチさんが導入されることを願って止みません(笑)。
あ、Ogawaさんにも大感謝です。

それにしてもさえらさんのブログ2つ+エントリー&カスタマイズ満載で…感服致しました。
来年もそのペースでぐいぐい引っ張っていってやってください。
こちらこそ来年もよろしくお願い致します。

[2] Posted by yujiro : December 30, 2004 12:25 PM

あの、コーヒー飲んでたんですが、名指しだったもので、思わず噴出してしまいました(爆)。

夕飯どきに、家事そっちのけでこちらのコメント&トラックバックのホップアップウィンドウ、無事に導入いたしました!

動作もうまく動いてるもようですvvv

これで、スッキリした気分で新年を迎えられそうです?♪
今夜は、祝い酒だ!

これも、一重にyujiroさんのお陰ですねぇ。
本当にありがとうございました!

そして、また来年もひとつ、よろしくお願いいたしますです。

後ほど、記事にしたいと思います。その際はトラバさせてくださいませ。

[3] Posted by ミッチ : December 30, 2004 5:35 PM

はじめまして。
ポップアップに慣れ親しんでしまったので、3.121でも使いたいと思いました。
早速上記に直し(12/30以前のテンプレートです)、テストコメントをしようと試してみました。
そこで文字化けの件で質問です。
1.TypeKeyでサインインしないでコメントを残すと、全角の名前が文字化けしてフォームに記憶されてしまう。
2.TypeKeyでサインイン後、サインアウトすると「1」とは違う文字化けで名前がフォームに記憶されてしまう。
どこをどのように直せばよろしいでしょうか。

[4] Posted by けいこ : December 30, 2004 6:21 PM

>ミッチさん
こんばんはー。
服、汚れませんでしたか(笑)。

完璧に動作しているみたいですね。
おめでとうございます!!
こちらからも記事にポップアップ画面でコメントさせていただきます。
こうやって喜んで頂けるのが何より嬉しいです。
苦労した甲斐がありました(笑)。

こちらこそお世話になりました。
来年もどうぞよろしくお願い致します。

[5] Posted by yujiro : December 31, 2004 1:36 AM

>けいこさん
はじめまして。
テンプレートご利用ありがとうございます。

ご質問の件ですが、3項を追加いたしましたのでそちらを参照くださいますでしょうか。
なお3項については暫定対処です。根本的な修正は個別アーカイブ含めた対処が必要ですが、確認する時間がないのでお許しください。
確認できしだい改めて記事を修正したいと思います。

解消されないようでしたら、再度ご連絡頂ければ幸いです。
それではよろしくお願い致します。

[6] Posted by yujiro : December 31, 2004 2:53 AM

おはようございます!
早速の訂正をありがとうございます。
試してみましたところ、今のところ無事に全角文字が残りました。
年末の忙しい時にありがとうございます。
ポップアップがなくなったのがイヤで3.xxにするのを躊躇っていたので、とても嬉しいです。
良いお年をお迎え下さい!

[7] Posted by けいこ : December 31, 2004 9:25 AM

>けいこさん
こんにちは。
無事に動作してよかったです。安心しました。
もし差し支えなければURLお教え頂けますでしょうか。

それではどうぞ良いお年をお迎えください!

[8] Posted by yujiro : December 31, 2004 3:37 PM

またまたたびたびおじゃまします。

ポップアップウィンドウでのコメント入力エリアのサイズ変更は、どの部分の数値を変更すればよろしいでしょうか。もう少しだけ広げたいな・・・と。

先ほどから睡魔と格闘しつつそれらしき部分を変更&チェックしているのですが、どうも間違っているらしく反映されません。お恥ずかしい質問だとは思うのですが、どうぞアドバイスをお願い致します。

[9] Posted by toycozy : January 10, 2005 2:53 AM

>toycozyさん
こんばんはー。
ご質問の件ですが、

lib/MT/Template/Context.pm

の(パッチをあてて何も削除していない状態)1345行目辺りにある

<textarea tabindex="4" name="text" rows="10" cols="50" id="text">comment_text</textarea></p>

の部分を変更してやってください。
このファイルには cols の設定が1255行目辺りにもありますが"cols"で検索して後方のものが対象になるみたいです。

以上です。
それではどうぞよろしくお願い致します。

[10] Posted by yujiro : January 10, 2005 11:38 PM

早々に御丁寧な御回答をいただき有り難うございます。

無事解決しました。テキストエディタでファイルを開いたら、“cols”で検索した跡があったので、ひょっとしたら前のヤツを変更して反映されなかったので、あきらめていたのかもしれません。・・・というか、それすらよく覚えていないって・・・一体・・・(笑)。

いずれにせよ、感謝です。

[11] Posted by toycozy : January 11, 2005 1:15 AM

>toycozyさん
こんにちは。
実は私も一瞬反映されなくて…(笑)。

[12] Posted by yujiro : January 11, 2005 5:22 PM

yujiroさん、こんばんは!
ご無沙汰しております。

今日は、こちらの記事を参照させていただいて、カスタマイズに挑戦してみました。
こちらのカスタマイズ、ずっとやりたいなと思っていたのです。
でも、なかなか時間が無くて、先延ばしになっていました。

yujiroさんの分かりやすい解説のお陰で、無事、コメント欄が別窓になって現れてくれました!ポップアップウィンドウ、便利です♪
嬉しくて、意味も無く、コメントやトラックバックをクリックしています^^;

どうもありがとうございました。

[13] Posted by ポムポム : January 15, 2005 5:49 PM

>ポムポムさん
こんばんはー。
ポップアップご利用ありがとうございます!
うまくできたようで良かったです。

苦労してできたので、この機能は結構気にいってます。
ということで、どしどしクリックしてやってください(笑)。

[14] Posted by yujiro : January 16, 2005 2:24 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)