小粋空間: ポップアップアーカイブ

Top ＞ Movable Type ＞カスタマイズ＞ポップアップ [全て開く]

2006年6月24日

画像のポップアップウィンドウをカスタマイズする

June 24,2006 1:53 AM
Tag：[Customize, MovableType, Popup]
Permalink

Movable Type の管理画面から画像をアップロードした後、次の画面のラジオボタンで「HTMLを表示」を選択し、「ポップアップ」をクリックすると、アップロードした画像をポップアップウィンドウで表示するためのHTMLコードが表示されます（スクリーンショット）。あとはこのコードをエントリーに貼り付ければOKです。

このHTMLコードによるポップアップウィンドウ、アップロードした画像のサイズにあわせてポップアップするのですが、ウィンドウのリサイズやスクロールが無効な状態で表示されるため、画像サイズがディスプレイサイズを超えている場合、（ポップアップウィンドウはディスプレイサイズより大きくならないため）画像を全て参照することができません。

このエントリーでは、ディスプレイより大きなサイズの画像を全部閲覧できるようにするためのカスタマイズを2つ紹介します。いずれかお好きな方をお選びください。これらは通常のポップアップのカスタマイズとしても利用することができます。

１．ポップアップウィンドウのスクロールやリサイズを有効にする方法

CMS.pm を任意のエディタで開き、「window.open」で検索すると下記の行がみつかります。
ちなみに、3.2 では3600行目あたり、3.3b2 では4700行目辺りです。

<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">$link</a>

この中の window.open? のカッコの部分がポップアップウィンドウの詳細設定になります。
赤色の部分を下記のように yes に修正します。

<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">$link</a>

scrollbars=yes

は、画面サイズにスクロールバーが表示する設定です。

resizable=yes

は、表示されたポップアップウィンドウのリサイズを可能にします。

なお、スクロールバーを表示する設定にした場合、スクロールバーが画像にやや被ってしまうので、下記のリストのように先程修正した行の少し上に青色の行を追加してください。

　　　　　　　　　　　：
        }
$width += 17;
        my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" alt="" />) : q{<MT_TRANS phrase="View image">};
        return $app->translate_templatized(<<"HTML");
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">$link</a>
　　　　　　　　　　　：

これでポップアップウィンドウの横幅がやや広くなります。17 という数値は場合は自分で試した結果ですので、修正してもらっても構いません。
高さをひろげたい場合は

$height += xx;

を同じように追加してください（xx には任意の値を設定します）。

修正したら元のディレクトリにアップロードしてください。これで画像の表示方法で「ポップアップウィンドウ」を指定した時にスクロールやリサイズが可能になったHTMLコードが表示されます。

２．ポップアップウィンドウに画像を縮小して表示する方法

画像サイズを自動的に縮小するカスタマイズが下記のサイトで紹介されています。

お気楽極楽ブログ：画像のポップアップ表示でサイズ制限する

以上です。「見れればいい（というのは語弊がありますが）」という場合は２項、原寸で閲覧させたい場合は１項をお勧めします。

Comments [2] | Trackbacks [3]

2005年3月19日

ポップアップウィンドウ追加

March 19,2005 8:37 PM
Tag：[Customize, MovableType, Popup, Template]
Permalink

本サイトにコメント用のポップアップウィンドウを数ヶ月ぶりに復活させました。ポップアップのリンクは、メインページ本文下にあるコメント数を表示している部分と、個別エントリーアーカイブの本文下です。メインページのリンク位置は直感的ではありませんが、Permalink のコメント欄リンクを残しておきたい＆横幅がこれ以上長くなるのを避けたい、の2つの理由からここに配置しました。暫定的な意味も含んでます。
ポップアップは、エントリーや頂いたコメントを確認しながら入力する時に便利なので以前より使いたいと思ってました（「コメントは表示順を逆にすればいいのでは？」というツッコミはなしで）。これでコメント入力の利便性が向上することを期待しています。

それに伴い、ポップアップしない場合のコメント・プレビュー／コメント・エラー画面のサイドバー表示をなくしました（3カラムは残してます）。また軽微な修正として、個別エントリーアーカイブの本文下にあった投稿月日が、タイトル上の投稿月日と重複していたので削除しました（投稿時間のみ表示）。

ポップアップ化に関しては下記のエントリーで公開しておりますので、興味のある方はご覧ください。

Comments [0] | Trackbacks [0]

2005年1月26日

ポップアップ画面を用いたコメント投稿（その5：その4の補足）

January 26,2005 3:00 PM
Tag：[]
Permalink

「その4：コメントフォームのカスタマイズ」で、コメント・プレビュー/コメント・エラー時のサイン・インおよびサイン・アウトについては、

<$MTRemoteSignInLink static="<$MTCommentPreviewIsStatic$>"$>

という記述がサポートされていないため「画面を誘導できません」と書きましたが、Ogawaさんのパッチを流用させて頂くという案がありましたので追記致します。

lib/MT/Context.pm

の1110?1140行目辺りにあるサイン・イン/サイン・アウト用リンクをハンドリングするプログラムに対して下記の通り、赤字を削除して青字を追加します。

sub _hdlr_remote_sign_in_link {
    my ($ctx, $args) = @_;
    my $cfg = MT::ConfigMgr->instance;
　　　　　　　：
    my $comment_script = $cfg->CommentScript;
    my $static_arg = $args->{static} ? "static=1" : "static=0";
    my $static_arg;
    if (defined($args->{static})) {
        $static_arg = $args->{static} ? "static=1" : "static=0";
    } else {
        $static_arg = $ctx->stash('comment_is_static') ? "static=1" : "static=0";
    }
    my $e = $_[0]->stash('entry');
　　　　　　　：
}
 
sub _hdlr_remote_sign_out_link {
    my ($ctx, $args) = @_;
    my $cfg = MT::ConfigMgr->instance;
　　　　　　　：
    my $static_arg = $args->{static} ? "static=1" : "static=0";
    my $static_arg;
    if (defined($args->{static})) {
        $static_arg = $args->{static} ? "static=1" : "static=0";
    } else {
        $static_arg = $ctx->stash('comment_is_static') ? "static=1" : "static=0";
    }
    my $e = $_[0]->stash('entry')
　　　　　　　：
}

これでコメント・プレビューおよびコメント・エラーテンプレートの MTRemoteSignInLink および MTRemoteSignOutLink を

<$MTRemoteSignInLink$>

<$MTRemoteSignOutLink$>

と static属性を省略して記述することで、コメント・リストまたは個別エントリーアーカイブの MTRemoteSignInLink または MTRemoteSignOutLink で設定された static値を引き継ぎます。具体的には、例えば <$MTRemoteSignOutLink$> がHTMLソースに展開されると

<a href="http://～/mt-comments.cgi?__mode=handle_sign_in&static=0&entry_id=3&logout=1">サイン・アウト</a>

のように　static値（0はポップアップ画面への誘導を示します）が query string に設定されます。またこれ以降の画面遷移にも引き継がれます。
誤りがありましたらご指摘よろしくお願い致します。

その5：その4の補足

Comments [7] | Trackbacks [0]

2005年1月13日

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

January 13,2005 11:58 PM
Tag：[]
Permalink

3回で終わらせるつもりでしたが追加内容がありましたので。
コメント・リスト/コメント・プレビュー/コメント・エラーのテンプレートに MTCommentFields を用いない、つまり個別エントリーアーカイブのフォーム部分を利用する場合の修正方法です。

具体的な作業としては、コメント・リストテンプレートの

<MTCommentFields static="1">

およびコメント・プレビュー/コメント・エラーテンプレートの

<MTCommentFields preview="1">

の部分を下記のソースにそれぞれ入れ替えます。ソースは個別アーカイブテンプレートから該当部分を切り出したもので、赤色および青色部分の修正を行います。赤色は本来の修正箇所、青色はフォーム情報を前ページから引き継ぐための修正です（Ogawa::memorandaさんからのアドバイスによるものです）。
繰り返しになりますが投稿されたコメントがポップアップ画面からのものか、非ポップアップ画面からのものかを次の画面に知らせる必要があります。それを引継ぐ情報としてstatic属性が使われています。赤色の

<$MTRemoteSignOutLink static="n"$>

または

<input type="hidden" name="static" value="n" />

の部分を適宜修正してください。n の意味は下記の通りです。必要な値を適宜設定してください。

0：サイン・イン/サイン・アウト/コメント投稿後、ポップアップ画面へ誘導

1：サイン・イン/サイン・アウト/コメント投稿後、非ポップアップ画面へ誘導

<$MTCommentPreviewIsStatic$>：前画面のstatic値を引き継ぐ

ただし、コメント・プレビュー/コメント・エラーで

<$MTRemoteSignOutLink static="<$MTCommentPreviewIsStatic$>"$>

という記述はサポートされていないようです。→ 2005.01.27追記：その5に対処方法を記しました。

コメント・リストテンプレート

<h2>コメントしてください</h2>
 
<MTIfRegistrationRequired>
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<div id="thanks">
<p>サイン・インを確認しました、
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script><script>document.write(commenter_name);</script>
さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)</p>
 
(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<p><label for="url">URL:</label><br />
<input tabindex="1" type="text" name="url" id="url" />
情報を登録する?
<input type="radio" id="remember" name="bakecookie" onclick="rememberMe(this.form)" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
 
</p>
 
<p><label for="text">コメント:</label><br />
<textarea tabindex="2" id="text" name="text" rows="10" cols="50"></textarea></p>
 
<div align="center">
<input type="submit" tabindex="3" name="preview" value=" 確認 " />
<input style="font-weight: bold;" tabindex="4" type="submit" name="post" value=" 投稿 " />
</div>
</form>
 
</div>
 
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.getElementById('thanks').style.display = 'block';
} else {
document.write('サイン・インしていません。このサイトにコメントをする前に登録してください。 <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a>');
document.getElementById('thanks').style.display = 'none';
}
// -->
</script>
 
<MTElse>
コメント登録機能が設定されていますが、TypeKey トークンが設定されていません。
</MTElse>
</MTIfNonEmpty>
 
<MTElse>
<MTIfNonEmpty tag="MTTypeKeyToken">
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.write('サイン・インを確認しました、', commenter_name, '. さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)');
} else {
document.write('TypeKey ID を使って <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a> してください。');
}
// -->
</script>
</MTIfNonEmpty>
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<div id="name_email">
<p><label for="author">名前:</label><br />
<input tabindex="1" id="author" name="author" /></p>
 
<p><label for="email">メールアドレス:</label><br />
<input tabindex="2" id="email" name="email" /></p>
</div>
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.getElementById('name_email').style.display = 'none';
}
// -->
</script>
</MTIfNonEmpty>
 
<p><label for="url">URL:</label><br />
<input tabindex="3" type="text" name="url" id="url" />
保存しますか?
<input type="radio" id="remember" onClick="rememberMe(this.form)" name="bakecookie" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
</p>
 
<p><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML><br/>
<textarea tabindex="4" id="text" name="text" rows="10" cols="50"></textarea></p>
 
<div align="center">
<input type="submit" name="preview" tabindex="5" 
value=" 確認 " />
<input style="font-weight: bold;" type="submit" name="post" 
tabindex="6" value=" 投稿 " />
</div>
</form>
 
</MTElse>
</MTIfRegistrationRequired>

コメント・プレビュー/コメント・エラーテンプレート

<h2>コメントしてください</h2>
 
<MTIfRegistrationRequired>
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<div id="thanks">
<p>サイン・インを確認しました、
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script><script>document.write(commenter_name);</script>
さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)</p>
 
(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="<$MTCommentPreviewIsStatic$>" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<p><label for="url">URL:</label><br />
<input tabindex="1" type="text" name="url" id="url" />
情報を登録する?
<input type="radio" id="remember" name="bakecookie" onclick="rememberMe(this.form)" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
 
</p>
 
<p><label for="text">コメント:</label><br />
<textarea tabindex="2" id="text" name="text" rows="10" cols="50"></textarea></p>
 
<div align="center">
<input type="submit" tabindex="3" name="preview" value=" 確認 " />
<input style="font-weight: bold;" tabindex="4" type="submit" name="post" value=" 投稿 " />
</div>
</form>
 
</div>
 
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.getElementById('thanks').style.display = 'block';
} else {
document.write('サイン・インしていません。このサイトにコメントをする前に登録してください。 <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a>');
document.getElementById('thanks').style.display = 'none';
}
// -->
</script>
 
<MTElse>
コメント登録機能が設定されていますが、TypeKey トークンが設定されていません。
</MTElse>
</MTIfNonEmpty>
 
<MTElse>
<MTIfNonEmpty tag="MTTypeKeyToken">
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.write('サイン・インを確認しました、', commenter_name, '. さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)');
} else {
document.write('TypeKey ID を使って <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a> してください。');
}
// -->
</script>
</MTIfNonEmpty>
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="<$MTCommentPreviewIsStatic$>" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<div id="name_email">
<p><label for="author">名前:</label><br />
<input tabindex="1" id="author" name="author" value="<$MTCommentPreviewAuthor encode_html="1"$>" /></p>
 
<p><label for="email">メールアドレス:</label><br />
<input tabindex="2" id="email" name="email" value="<$MTCommentPreviewEmail encode_html="1"$>" /></p>
</div>
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.getElementById('name_email').style.display = 'none';
}
// -->
</script>
</MTIfNonEmpty>
 
<p><label for="url">URL:</label><br />
<input tabindex="3" type="text" name="url" id="url" value="<$MTCommentPreviewURL encode_html="1"$>" />
保存しますか?
<input type="radio" id="remember" onClick="rememberMe(this.form)" name="bakecookie" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
</p>
 
<p><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML><br/>
<textarea tabindex="4" id="text" name="text" rows="10" cols="50"><$MTCommentPreviewBody convert_breaks="0" encode_html="1"$></textarea></p>
 
<div align="center">
<input type="submit" name="preview" tabindex="5" 
value=" 確認 " />
<input style="font-weight: bold;" type="submit" name="post" 
tabindex="6" value=" 投稿 " />
</div>
</form>
 
</MTElse>
</MTIfRegistrationRequired>

その4：コメントフォームのカスタマイズ

Comments [3] | Trackbacks [1]

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]