2005年04月08日

●「続きを読む」と「Comment」を両方折りたたむ

Movable Typeの改造の話です。

続きを読むとか、コメント部分を開いたり折りたたんだりできるblogが見つかるじゃないですか。自分のところでやってみたくなるわけです。

Google先生でちょろっと探すといっぱい見つかるのですが、これが結構動かない。

「続きを読む部分のみ」とか、「コメント部分のみ」とか、かたっぽが動くだけのものだったり、そもそもJavaScriptの変数のネーミングセンスが悪かったり、固定文字列がいっぱい入っていて気持ち悪いスクリプトだったりするわけです。


二週間ぐらい前からちょこちょこと格闘していたのですが、やっとどうにかなったのでスクリプトと汎用的な改造方法を公開。マネをしてくれとは言いませんが、もう少し賢いスクリプトがデファクトスタンダードになってくれないかなぁとか思っちゃいました。


1.開いたり閉じたりするスクリプト部

JavaScriptにて、cssのdisplay属性をいじるスクリプトです。


<script type="text/javascript" language="javascript">
function showMore(EntryID, FalseLocation, kind){
OpenArea_EntryID = 'Open_' + kind + EntryID;
CloseArea_EntryID = 'Close_'+ kind + EntryID;
if( document.getElementById ) {
if( document.getElementById(OpenArea_EntryID).style.display ) {
if( FalseLocation != 0 ) {
document.getElementById(OpenArea_EntryID).style.display = "none";
document.getElementById(CloseArea_EntryID).style.display = "block";
} else {
document.getElementById(OpenArea_EntryID).style.display = "block";
document.getElementById(CloseArea_EntryID).style.display = "none";
}
} else {
location.href = FalseLocation; return true;
}
} else {
location.href = FalseLocation; return true;
}
}
</script>

以上のソースを、メインページのテンプレートの、<head>~</head>タグ内に追加してください。

EntryID:閉じたり開いたりする部分をエントリ単位で識別するためのIDです。通常、'<$MTEntryID$>' が引数として渡されます。
FalseLocation:ブラウザごとにcssの属性をいじるJavaScriptの実装具合が違っていたりして、正常にdisplay属性が取得できなかった場合に、通常のリンクで個別エントリのページに飛ぶためのリンク先です。通常、「開く」操作の場合には '<$MTEntryLink$>#<$MTEntryID pad="1"$>' が、「折りたたむ」操作の場合には 0 が、引数として渡されます。
kind:閉じる部位を識別するための文字列です。"続きを読む"の場合には 'entry'、"Comment"の場合には'comments'等、折りたたみたい部位ごとにユニークな文字列を指定します。

2.「続きを読む」部を折りたたむ場合の改造個所


<MTEntryIfExtended>
<div class="more" id="Open_entry<$MTEntryID$>" style="display:block">
<a title="続きを読む" href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>','entry');return false;">≫続きを読む</a></div>
<div id="Close_entry<$MTEntryID$>" style="display:none">
<$MTEntryMore$>
<span class="more">
<a title="元に戻す" href="#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0,'entry');return true;">≪元に戻す</a></span></div>
</MTEntryIfExtended>

以上のソースを、メインページのテンプレートの<MTEntryIfExtended>~</MTEntryIfExtended>部分と入れ替えてください。そのあたりの文字列を画像で代用していたりする場合には、ソースの改造が必要です。

3.「Comments」部を折りたたむ場合の改造個所


<MTEntryIfAllowComments>
<span class="extended" id="Open_comments<$MTEntryID$>" style="display:block"><a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>','comments');return false;">≫show comments</a><br /></span>
<span id="Close_comments<$MTEntryID$>" style="display:none">
<a href="#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0,'comments');return true;">≪ hide comments</a><br />
<MTComments>
<$MTCommentBody$>
<p>Posted by <$MTCommentAuthorLink$> at <$MTCommentDate$></p><br /><br />
</MTComments>
</span>
</MTEntryIfAllowComments>

以上のソースを、メインページのテンプレートのPosted by~Trackbacksあたりのエントリのフッター部分が書いてある直下に挿入してください。

4.その他

・同一span内にclass, id, styleが並んでるソースが気持ち悪いです。
→htmlとして正しいのかさっぱりです(´ー`)あんまりよろしくないような気がします。

・onclickイベントの後ろに「return false;」とか「return true;」とか入ってるのってなんですか。
→よく分かりませんが、return falseって書くと、マウスクリックイベントがonclickイベントハンドラ内で異常終了した扱いになるらしく、return true後に通常行われるはずのa hrefタグによるリンクジャンプ処理が行われないようです。


…最初に綺麗に作らないと、その後の改造で、綺麗になることはそうそうないんですよ。リファクタリングって難しいよね。

Posted by youten at 2005年04月08日 18:35
トラックバックURL

このエントリーのトラックバックURL:
http://b2hs.netgamers.jp/mty-tb.cgi/25

コメント