ココログプロの上級テンプレートで「ココログからのお知らせ」を表示する方法

☆

2006年3月28日のココログの新システム移行前からココログプロの上級テンプレートを使っている場合、テンプレートは全く更新されません。そのおかげで、システム移行後に発生している各種デグレードの影響を受けにくいというメリットはあるものの、新しくサポートされることになった機能も反映されていません(利用できない状態になっています)。

例えば、「mp3プレイヤー」表示機能。この機能は、記事中に mp3 ファイルへのリンクがあれば、自動的にmp3プレイヤーが表示される機能ですが、2006年3月28日以前に生成した上級テンプレートの場合、そのままでは利用できません。他に、マイフォト関連、マイニフティ関連が変わっています。そして、もう1つ。ココログのロゴを表示すると、自動的にココログからのお知らせが表示されるようになりましたが、従来の「上級テンプレート」では表示されないままです。

既存の上級テンプレートのどこをどういじれば、新しい機能が使えるようになるのかを探るため、とりあえず、新しいテンプレートセットを生成し、上級テンプレートに変換してみました。

以下に、新しい上級テンプレートの例(sidebar)を示します。

<div class="sidebar-top"></div>
<div class="sidebar">
<div id="calendar" class="module-calendar module">
<div class="module-content">
<table summary="<$MTTrans phrase="Monthly calendar with links to each day's posts"$>">
<caption class="module-header"><$MTDate format_label="year_month"$></caption>
<tr>
<MTCalendarWeekDays>
<th><$MTCalendarWeekDay$></th>
</MTCalendarWeekDays>
</tr>

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

<td><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryPermalink$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

</table>
</div>
</div>
<div id="syndicate" class="module-syndicate module">
<div class="module-content link-note">
<a href="<$MTBlogURL$>index.rdf"><$MTTrans phrase="Syndicate this site (XML)"$></a>
</div>
</div>
<MTBlogIfArchives>
<div id="recent-entries" class="module-archives module">
<h2 class="module-header"><span><$MTTrans phrase="Recent Posts"$></span></h2>
<div class="module-top"></div>
<div class="module-content module-body">
<ul class="module-list">
<MTEntries lastn="10">
<li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle remove_html="1" generate="1"$></a></li>
</MTEntries>
</ul>
</div>
<div class="module-bottom"></div>
</div>
</MTBlogIfArchives>
<div id="recent-trackback" class="module-recent-trackbacks module">
<h2 class="module-header"><span><$MTTrans phrase="Recent Trackbacks"$></span></h2>
<div class="module-top"></div>
<div class="module-content module-body">
<ul class="module-list">
<MTPings lastn="10" sort_order="descend">
<li class="module-list-item"><a href="<$MTPingURL$>"><$MTPingTitle$></a> (<$MTPingBlogName$>)</li>
</MTPings>
</ul>
</div>
<div class="module-bottom"></div>
</div>
<div id="recent-comment" class="module-recent-comments module">
<h2 class="module-header"><span><$MTTrans phrase="Recent Comments"$></span></h2>
<div class="module-top"></div>
<div class="module-content module-body">
<ul class="module-list">
<MTComments lastn="10" sort_order="descend">
<li class="module-list-item"><MTCommentEntry><a href="<$MTEntryPermalink$>#c<$MTCommentID$>"><$MTCommentAuthor$></a> <$MTTrans phrase="on"$> <a href="<$MTEntryPermalink$>"><$MTEntryTitle generate="1"$></a></MTCommentEntry></li>
</MTComments>
</ul>
</div>
<div class="module-bottom"></div>
</div>

<MTBlogIfArchives>
<div id="archive-datebased" class="module-archives module">
<h2 class="module-header"><span><a href="<$MTBlogURL$>archives.html"><$MTTrans phrase="Archives"$></a></span></h2>
<div class="module-top"></div>
<div class="module-content module-body">
<ul class="module-list">
<MTArchiveList best_archive_type="1" lastn="10">
<li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
</MTArchiveList>
</ul>
</div>
<div class="module-bottom"></div>
</div>
</MTBlogIfArchives>
<div id="archive-category" class="module-categories module">
<h2 class="module-header"><span><$MTTrans phrase="Categories"$></span></h2>
<div class="module-top"></div>
<div class="module-content module-body">
<ul class="module-list">
<MTCategories>
<MTBlogIfArchives archive_type="Category">
<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
<MTElse>
<li class="module-list-item"><$MTCategoryLabel$></li>
</MTElse>
</MTBlogIfArchives>
</MTCategories>
</ul>
</div>
<div class="module-bottom"></div>
</div>
<div id="profile" class="module-about module">
<div class="module-content link-note">
<span><a href="<$MTUserSiteURL$>about.html"><$MTTrans phrase="About"$></a></span>
</div>
</div>
<div id="subscribe" class="module-subscribe module">
<div class="module-content link-note">
<a onclick="window.open(this.href, 'blogroll', 'width=500,height=600,scrollbars=yes'); return false;" href="<$MTCGIPath$><$MTAppScript$>/lists?__mode=quickpost&amp;is_qp=1&amp;type=1&amp;qp_href=<$MTBlogURL encode_url="1"$>"><$MTTrans phrase="Add me to your TypePad People list"$></a>
</div>
</div>
<div id="nifty_rss_reader" class="module-nifty-rss-reader module">
<div class="module-content link-note">
<a href="javascript:void(window.open('https://enter.nifty.com/my/weblogclip_confirm?cmd=add&adr='+encodeURI(location.href),'my_blogclip','scrollbars=yes,resizable=yes,width=810,height=550'))"><MTTrans phrase="Add me to your @nifty RSS Reader"></a>
</div>
</div>
<!--#include virtual="/photos/moblog/module.inc"-->
<$MTGalleriesInclude$>
<script type="text/javascript">var user_start_date = "<$MTUserStartDate format="%Y/%m/%d"$>";</script>
<script type="text/javascript" src="http://help.cocolog-nifty.com/sidebar/powered_n.js"></script>
<a href="http://www.cocolog-nifty.com/" title="ブログ:ココログ"><img src="http://updates.cocolog-nifty.com/images/nifty/logo_userpage.gif" alt="ブログ:ココログ" style="border:0px" /></a>
<script type="text/javascript" src="http://help.cocolog-nifty.com/sidebar/powered_n2.js"></script>

</div>
<div class="sidebar-bottom"></div>

よく見ると、今までとはかなり変わっているところや、見慣れない表記が見つかると思います。この辺をじっくり調べていくと、従来の「上級テンプレート」に新しい機能を取り込むには、どこをどういじればいいか、わかってきます。

以下では、「ココログのロゴ」を表示させたときに、「ココログからのお知らせ」も表示させるにはどうすればいいかを調べていきます。

ココログのロゴ

ブログを開設した年月日が入る設定での新旧の違いをみてみます。

まず、旧バージョン。(ちなみに、ココログプロが始まった直後はまだ「ブログを開設した年月日が入る設定」というのは存在しませんでした。設定が可能になったときに、今回と同様、新しい環境でテンプレートを作ってみて、どうやったら表示できるのか、調べたのでした。当時は解説記事は書きませんでしたが。)

<div id="powered">
<a href="http://www.cocolog-nifty.com/" title="ココログ:@nifty"><img src="http://updates.cocolog-nifty.com/images/nifty/logo_userpage.gif" alt="Powered by ココログ" style="border:0px" /></a><br />
<$MTUserStartDate format="%Y/%m/%d"$>
</div>

そして、新バージョン。

<script type="text/javascript">var user_start_date = "<$MTUserStartDate format="%Y/%m/%d"$>";</script>
<script type="text/javascript" src="http://help.cocolog-nifty.com/sidebar/powered_n.js"></script>
<a href="http://www.cocolog-nifty.com/" title="ブログ:ココログ"><img src="http://updates.cocolog-nifty.com/images/nifty/logo_userpage.gif" alt="ブログ:ココログ" style="border:0px" /></a>
<script type="text/javascript" src="http://help.cocolog-nifty.com/sidebar/powered_n2.js"></script>

かなり変わってますね。「ココログからのお知らせ」は JavaScript を使って表示していることがわかります。 http://help.cocolog-nifty.com/sidebar/powered_n.js が「ココログからのお知らせ」を表示する(JavaScript を読み込む)JavaScript、http://help.cocolog-nifty.com/sidebar/powered_n2.js が、「ブログを開設した年月日」を表示する(JavaScript を読み込む)JavaScript です。実際に「ココログからのお知らせ」を表示する JavaScript は http://help.cocolog-nifty.com/sidebar/ad2_n.js、 「ブログを開設した年月日」を表示する JavaScript は http://help.cocolog-nifty.com/sidebar/ad0_n.js です(ココログプロの場合)。

「XXX を表示する JavaScript」を直接テンプレートで指定せず、『「XXX を表示する JavaScript」を読み込む JavaScript』を指定しているのは、いろいろ理由が考えられます。このような2階建て構造にすると、ファイル構成が複雑になって保守容易性が低下するというデメリットがありますが、あえて2階建て構造にするということは、たぶんデメリットを上回るメリットがあるのでしょう。たぶん。きっと。だめ、絶対。

まとめ

新旧のテンプレートを比較することで、どこをどういじれば新しい機能を取り込むことができるのか調べることができます。この方法は、今回のココログのバージョンアップだけではなく、今後のバージョンアップのときにも使えるでしょう。

次回以降のココログのバージョンアップ時に、この方法を使えるようにするため、バージョンアップ前とバージョンアップ後のテンプレートを保存しておくようにしましょう。保存するテンプレートは、カスタマイズを行なっていない状態のものが好ましいです。カスタマイズを行なってしまうと、どこがオリジナルでどこが改変部分なのか見分けるのが大変ですし、単純に新旧比較できなくなってしまいます。必ず、カスタマイズを行なう前(上級テンプレートに変換した直後)にテンプレートを保存しておきましょう。