小粋空間: ポップアップ: 2004年12月アーカイブ

Top ＞ Movable Type ＞カスタマイズ＞ポップアップ＞ 2004年12月

2004年12月30日

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

December 30,2004 2:38 AM
Tag：[]
Permalink

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

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;
    }

その3：公開テンプレート修正方法

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

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

続きを読む ≫

Comments [14] | Trackbacks [2]

2004年12月26日

ポップアップ画面を用いたコメント投稿（その2：カスタマイズ）

December 26,2004 2:10 AM
Tag：[]
Permalink

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

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

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

<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追加）
ポップアップを利用したいテンプレートの <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>

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

<MTCommentFields static="0">

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

５．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」の有無は設定環境によって異なります。

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

その2：カスタマイズ

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

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

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

Comments [34] | Trackbacks [3]

2004年12月19日

ポップアップ画面を用いたコメント投稿（その1：基本動作）

December 19,2004 1:05 AM
Tag：[]
Permalink

ポップアップ画面を利用したコメント投稿の仕組みについてご説明致します（分かる範囲で）。このエントリーを投稿した段階ではテンプレートおよびカスタマイズ方法を公開しておりません。予めご了承ください。

最初に Movable Type ユーザー・マニュアルよりポップアップの定義を引用します。

アーカイブの1ページに2つ以上のエントリーを持つような種類のアーカイブを使う場合、コメントをインラインにするのはあまり意味がありません。 そのような場合のために、Movable Typeでは動的に生成されるコメント用ポップアップ・ウィンドウを利用できます

つまり、デフォルトテンプレートあるいはデフォルトの設定で再構築した状態ではメインページやカテゴリー・アーカイブページ・月別アーカイブページ等からのコメント投稿（あるいは参照）では個別エントリーアーカイブページにジャンプしますが、ページ遷移せずにコメント投稿（あるいは参照）できることがポップアップの目的と考えられます。トラックバックリスト表示も同様です。

次に図を用いてポップアップを利用したメインページからのページ遷移について示します。図および説明はデフォルトテンプレートおよびデフォルト設定を前提にしています。またポップアップを利用する場合でも個別エントリーアーカイブからのコメント投稿は有効という前提です。
通常のコメント投稿は、メインページや各アーカイブページからエントリー下に表示される時間のリンクをクリックすると、個別エントリーアーカイブ（図の左側）にジャンプします。そこでコメントを入力し「確認」をクリックすればコメント・プレビュー画面（図の左下）に遷移します。コメント・プレビュー画面で「投稿」をクリックするとコメントが反映された個別エントリーアーカイブにリダイレクトします。個別エントリーアーカイブで「投稿」をクリックすれば、同じようにコメントが反映された個別エントリーアーカイブにリダイレクトします。

ポップアップを利用したコメント投稿の場合、メインページや各アーカイブページのエントリー下にある"Comments"のリンクをクリックするとポップアップするように予め設定することを前提とします（設定方法は別途）。ポップアップしたコメント・リスト上でコメントを入力し、「確認」をクリックすればコメント・プレビュー画面（ポップアップ：図の右側）に遷移します。その画面で「投稿」をクリックするとコメントが反映されたコメント・リスト（図の右下）にリダイレクトします。コメント・リストで「投稿」をクリックすれば、同じようにコメントが反映されたコメント・リストにリダイレクトします。

上記の動作を実現するためには、個別エントリーアーカイブからのリダイレクト先とポップアップ画面からのリダイレクト先をダイナミックに変更させる仕組みが必要になります。なぜなら「コメント・リスト」テンプレートはどちらも同じものが使われているためです。

当初このサイトではポップアップ画面を利用していたのですが、ポップアップ画面からの投稿後のリダイレクト先が図のような遷移にならずメインページになる、つまり狭いポップアップ画面に3カラムのページが表示されてしまうため途中からポップアップしない設定に変更しました。
当時は設定方法に問題があったためそうなっていました。今回はリダイレクト先の設定方法を含めてテンプレートおよびカスタマイズ方法を次回以降にご説明する予定です。

ポップアップ画面利用についてはひとつ制約があります。前述の通りコメント・プレビュー画面は個別エントリーアーカイブおよびコメント・リスト、いずれからの遷移においても同一のテンプレートを使用します。つまりポップアップの利便性を考慮すると、コメント・プレビュー画面は必然的に1カラムになります。ポップアップは画面サイズを任意に指定できますので情報量をコントロールする（例えばマルチカラム化等）ことも可能ですが、使用目的から考えると必要最低限の情報を表示することが好ましいでしょう。

その1：基本動作

Comments [5] | Trackbacks [0]

Now loading...

Introduction