Blogger:「次の投稿・前の投稿」にページタイトルを付与する-Feedから情報取得-発生した困難

イントロダクション

Google のブログサービス「Blogger」において、「次の投稿・前の投稿」にページタイトルを付与する JavaScript コードを作成する際に発生した困難について、ここに書き記しておきます。




作成した JavaScript コードについては、以下のページをご覧ください。

Blogger:「次の投稿・前の投稿」にページタイトルを付与する-Feedから情報取得
http://upa-pc.blogspot.com/2014/12/blogger-prev-next-page-title-script.html

「次の投稿・前の投稿」にページタイトルを付与する JavaScript コードを作成する際に発生した困難

<data:newerPageUrl/>、<data:olderPageUrl/>は、ブログの投稿のガジェット内でしか機能しない

Blogger のテンプレート内で、前の投稿、次の投稿の URL を取得するために使用している、<data:newerPageUrl/>、<data:olderPageUrl/>は、ブログの投稿のガジェット内でしか機能しません。

詳しくは、次の参考文献の、グローバルに利用可能なデータとブログの投稿のデータを比較してみてください。

レイアウト データ タグ - Blogger ヘルプ
https://support.google.com/blogger/answer/47270?hl=ja#posts

そのため、今回作成した 「次の投稿・前の投稿」にページタイトルを付与する JavaScript コードでは、どこに記載しても正常に動作するプログラムを目指したため、それらのレイアウトデータタグを使用することはできませんでした。


その代案として、前の投稿、次の投稿の <a> タグの herf 属性から、ページの URL を取得することにしました。

//<![CDATA[, //]]> や <!--, //-->で囲うと、レイアウト データ タグが展開されない

ブログの URL を取得するために、レイアウトデータタグ <data:blog.homepageUrl/> を使用しようと考えていました。

しかし、レイアウトデータタグは、//<![CDATA[, //]]> や <!--, //-->で囲うと動作しないことが分かりました。


試しに、以下のコードを Blogger のテンプレート内に記載します。

<script type='text/javascript'>
<!--
var url = "<data:blog.homepageUrl/>";
//-->
</script>

<script type='text/javascript'>
//<![CDATA[
var url = "<data:blog.homepageUrl/>";
//]]>
</script>

<script type='text/javascript'>
var url = "<data:blog.homepageUrl/>";
</script>

上記のコードを、実際に Blogger で表示してみると、次のようなソースコードになります。

<script type="text/javascript">
<!-- var url = "<data:blog.homepageUrl/>"; //-->
</script>

<script type="text/javascript">
//<![CDATA[
var url = "<data:blog.homepageUrl/>";
//]]>
</script>

<script type="text/javascript">
var url = "http://upa-pc.blogspot.com/";
</script>

以上のように、//<![CDATA[, //]]> や <!--, //-->で囲ってあるものについては、<data:blog.homepageUrl/>のままになっています。

それらで囲っていないものは、<data:blog.homepageUrl/>がブログの URL に変換されています。


Blogger のテンプレートにて、JavaScript を //<![CDATA[, //]]> で囲む理由については、以下の参考文献を参照してください。

44attack: Blogger のテンプレートに JavaScript を記載するには
http://44attack.blogspot.jp/2011/04/blogger-javascript.html

新 Blogger テンプレートのエラーメッセージ一覧 | クリボウの Blogger Tips
http://www.kuribo.info/2007/01/blogger_29.html

JavaScript を<!--, //-->で囲む理由については、以下の参考文献を参照してください。

スクリプト内の<!--と//-->って何？
http://www.tohoho-web.com/lng/199910/99100166.htm

JavaScriptの中に書くhtmlコメントの意味は？ 【OKWave】
http://okwave.jp/qa/q4946871.html

//<![CDATA[, //]]> や <!--, //-->で JavaScript コードを囲まなくても、問題がないケースもあります。

しかしながら、可能であれば、それらで囲める方法を採用したいところです。


そこで、その代案として、JavaScript を使用して、ブログの URL を組み立てるようにしました。