前の関連記事:Blogger：レイアウト編集(7)WordPressみたいに更新日を表示する方法はないみたい
以前更新日の表示はできそうにない、と書きましたがフィードの情報には更新日時の情報が含まれておりそれを利用して更新日が表示できることがわかりました。
フィードには更新日時の情報が含まれていた
Bloggerで記事に最終更新日を付ける方法 | 某氏の猫空にヒントをいただきました。
Blogger:JSONPを使ってJSON形式でブログの情報を引き出すの最後に付け足しましたが個別の投稿のURLを元にその投稿のフィードを得る方法がわかりました。
あれこれ検索してみましたが某氏の猫空さんの記事以外にatom.xmlの「path=」のパラメーターの記載は見つけられませんでした。
http://Bloggerのドメイン/atom.xml?path=投稿へのパス&alt=json-in-script
例えばこの記事のフィードはhttp://p--q.blogspot.jp/atom.xml?path=投稿へのパス&alt=json-in-scriptで得られます。
あとはそのフィードから更新日時の情報を取り出します。
フィード情報を使うので非公開ブログでは動きません。
jQueryでやってみます。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/></script>
<script>
$.getJSON("http://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",
function(json){
$("#saisyu_koushin").html("最終更新日時: "+json.feed.entry[0].updated.$t+"<br/>");
}
);
</script>
<div id="saisyu_koushin"></div>
これだと「最終更新日時: 2013-08-29T22:07:35.965+09:00」と表示されてしまいます。これを「2013年08月29日22時31分」とすればよいならjson.feed.updated.$tを以下のように整形します。
json.feed.updated.$t.slice(0,17).replace("-","年").replace("-","月").replace("T","日").replace(":","時").replace(":","分")
location.pathnameで個別投稿ページへのパスを得ているのでアイテムページのときしか動きません。公開日時、更新日時を並べて表示させる方法(失敗編）
Blogger:投稿タイトルの下に「年月日 曜日 時刻」を表示させるでやった公開日時も一緒に含めて表示させるようにしました。
更新日時は個別投稿のフィードから情報を得ているのでアイテムページのときしか表示できません。
公開日時はインデックスページでも表示させたいのでテンプレートのdataタグを使っています。（Blogger：テンプレート編集(2)インクルードincludeは関数に相当参照）
そのために管理画面→設定→言語と形式、フォーマットで日付ヘッダーフォーマットと時刻のフォーマットは以下のようにしておきます。
他の形式でもreplaceする文字を変更すれば対応できると思います。
（正規表現で丸括弧「キャプチャする括弧」を使って日付書式を整形するのように正規表現を使えばもっと自由に設定できます。）
テンプレートのデータタグは""で挟むとそのままJavaScriptのオブジェクトとして処理できました。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>まずjQueryを</head>の上行でロードしておきます。
<div class='post-header-line-1'/>にコードをいれました。
テンプレートで<div class='post-header-line-1'/></div>を探してそこに入れたということです。
BloggerのテンプレートのHTMLでは<script></script>の中の「&」は「&」に、「<」は「<」に置き換えないとエラーが出てきて保存ができません。
さらに保存すると自動的に「"」が「"」に、「>」が「>」に置き換わってとても見にくくなっています。
<div class='post-header-line-1'/>
<div class='toko_nitiji' style="text-align:right"></div>
<b:if cond='data:blog.pageType == "item"'><!--アイテムページのとき-->
<script>
kokaibi="<data:post.dateHeader/>".replace("-","年").replace("-","月")+"日"+"<data:post.timestamp/>".replace(":","時")+"分"
$.getJSON("http://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",
function(json){
var koshinbi=json.feed.entry[0].updated.$t.slice(0,17).replace("-","年").replace("-","月").replace("T","日").replace(":","時").replace(":","分")
$(".toko_nitiji").html(kokaibi+"公開"+"<br/>"+koshinbi+"更新"+"<br/>");
});
</script>
<b:else/><!--アイテムページ以外のとき-->
<script>
kokaibi="<data:post.dateHeader/>".replace("-","年").replace("-","月")+"日"+"<data:post.timestamp/>".replace(":","時")+"分"
$(function() {
$(".toko_nitiji").html(kokaibi+"公開"+"<br/>");
});
</script>
</b:if>
</div>
置き換わる前の見やすいコードは以下になります。<div class='post-header-line-1'/>//ヘッダーの1行目に表示されます。
<div class='toko_nitiji' style="text-align:right"></div>//ここに代入されます。右詰めにしています。
<b:if cond='data:blog.pageType == "item"'><!--アイテムページのとき-->
<script>
kokaibi="<data:post.dateHeader/>".replace("-","年").replace("-","月")+"日"+"<data:post.timestamp/>".replace(":","時")+"分"//公開日時の書式を設定。
$.getJSON("http://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",//投稿のフィードをJSON形式で取得。
function(json){
var koshinbi=json.feed.entry[0].updated.$t.slice(0,17).replace("-","年").replace("-","月").replace("T","日").replace(":","時").replace(":","分")//JSON形式から得た更新日時の書式を設定。
$(".toko_nitiji").html(kokaibi+"公開"+"<br/>"+koshinbi+"更新"+"<br/>");
});//toko_nitijiクラスのdivに代入。
</script>
<b:else/><!--アイテムページ以外のとき-->
<script>
kokaibi="<data:post.dateHeader/>".replace("-","年").replace("-","月")+"日"+"<data:post.timestamp/>".replace(":","時")+"分"//公開日時の書式を設定。
$(function() {
$(".toko_nitiji").html(kokaibi+"公開"+"<br/>;");//toko_nitijiクラスのdivに代入。
});
</script>
</b:if>
</div>
アイテムページのときはこのように表示されます。
インデックスページのときは公開日時のみの表示になります。
インデックスページで全て同じ公開日時になってしまっていた
これで完成と思ったらアイテムページは問題ないのですが、インデックスページで表示される公開日時が全て同一であることに気づきました。
これは公開日時の表示にjQueryでtoko_nitijiクラスを置き換えているのが原因でした。
インデックスページでは各投稿いずれも同じクラス名になっているので全て最後の投稿の投稿日時に置き換えられているからでした。
$(".toko_nitiji").html(kokaibi+"公開"+"<br/>;");//toko_nitijiクラスのdivに代入。
この部分ですね。インデックスページで複数でてくる同一タグを各投稿別に置き換える方法は見つけられませんでしたのでこの部分はdocument.write()で書くことにしました。
こんどは"<data:post.dateHeader/>"の値の取得に苦戦しました。
Blogger：日付ヘッダーを必ず表示させる方法では以下のようにして取得しています。
<b:if cond='data:post.dateHeader'> <script type='text/javascript'>var hiduke = "<data:post.dateHeader/>"</script> </b:if>
テンプレートのタグでJavaScriptのコードを場合わけしているのでコードが冗長になっています。
こういうのをみて「つたないコードを書いてたなあ」なんて思って三項演算子を使って以下のようにしてみました。
"<data:post.dateHeader/>"が空っぽのときの値を見てやろうとdocument.write("["+"<data:post.dateHeader/>"+"]");としてみましたが括弧すら表示されませんでした。
ということで素直に元の通りテンプレートタグのb:ifを使って"<data:post.dateHeader/>"の値を取得することにしました。
ちなみに<data:post.dateHeader/>という"をつけない値をみてみるとこれは4桁の整数でした。
日付のシリアル値でしょうかね。でもそれで演算できそうな感じではなかったです。
成功編は次の記事で。
こういうのをみて「つたないコードを書いてたなあ」なんて思って三項演算子を使って以下のようにしてみました。
<script type='text/javascript'> hiduke =( "<data:post.dateHeader/>"=="")?hiduke:"<data:post.dateHeader/>"; </script>これならJavaScriptだけでいけると思ったのですけどこれが"<data:post.dateHeader/>"==""のときの値が取得できないのです。
"<data:post.dateHeader/>"が空っぽのときの値を見てやろうとdocument.write("["+"<data:post.dateHeader/>"+"]");としてみましたが括弧すら表示されませんでした。
ということで素直に元の通りテンプレートタグのb:ifを使って"<data:post.dateHeader/>"の値を取得することにしました。
ちなみに<data:post.dateHeader/>という"をつけない値をみてみるとこれは4桁の整数でした。
日付のシリアル値でしょうかね。でもそれで演算できそうな感じではなかったです。
成功編は次の記事で。
参考にしたサイト
個別の投稿のフィードから取り出す方法を教えていただきました。
0 件のコメント:
コメントを投稿