前の関連記事：Blogger:英語版(3)日本語ブログのテンプレートを復元して英語化
Blogger：レイアウト編集(9)各投稿の更新日時の表示をする（成功編）を英語化します。
「October 27, 2013 at 17:47 GMT+9」の形式で更新日時を表示させる
アイテムページでの更新日時の取り出しはjQueryの$.getJSONでフィードから得ています。
2013-08-29T22:07:35.965+09:00
この形式になります。
アイテムページ以外では<data:post.dateHeader/>と<data:post.timestamp/>から得ています。
これはLayout画面のBlog PostsのConfigure Blog PostのPost Page Optionsの一番上にある日付設定と3番目の時間設定で形式を選べます。
フィードの形式とそろうように日付は2013-08-29、時間は22:07を選択しておきます。
</head>の上でjquery.min.jsをロードして、その次に日付形式を変換するJavascript関数date_shoshikiを書いています。
正規表現で丸括弧「キャプチャする括弧」を使って日付書式を整形するでやったように正規表現で取り出します。
var date=feed_date.match(/\d+/g);これでdate配列の0番要素から年、月、日、時、分が入ります。
月は英語名に変換したいので英語名を入れた配列を作ります。
var en_month=["January", "February", "March", "April", "June", "July", "August", "September", "October", "November", "December"];これで数字の月date[1]からen_month[date[1]-1]で英語月名が得られます。
時差はフィードからは得られるのですが、<data:post.timestamp/>には含まれないので「GMT+9」は決め打ちしてしまいます。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script>
function date_shoshiki(feed_date){
var date=feed_date.match(/\d+/g) ;
return date[0]+"年"+date[1]+"月"+date[2]+"日"+date[3]+"時"+date[4]+"分";
}
</script>
</head>
これを以下のように書き換えます。 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script>
function date_shoshiki(feed_date){
var en_month=["January", "February", "March", "April", "June", "July", "August", "September", "October", "November", "December"];
var date=feed_date.match(/\d+/g) ;
return en_month[date[1]-1]+" "+date[2]+", "+date[0]+" at "+date[3]+":"+date[4]+" GMT+9"
}
</script>
</head>
あとは「公開」「更新」の日本語をそれぞれ「Published」「Last Updated」という英語に変更します。投稿タイトル下に表示させる場合はBlog1ウィジェットの中の<b:includable id='post' var='post'>の中の<div class='post-header-line-1'>の中に以下を入れます。
<!--公開更新日時の表示 開始-->
<div style='float:right;font-size: 0.9em;text-align:right;margin-left:20px'>
<b:if cond='data:blog.pageType == "item"'><!--アイテムページのとき-->
<div id='toko_nitiji'/>
<script>
$.getJSON("http://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",
function(json){
var kokaibi =date_shoshiki(json.feed.entry[0].published.$t);
var koshinbi=date_shoshiki(json.feed.entry[0].updated.$t);
$("#toko_nitiji").html("Published: "+kokaibi+"<br>"+"Last Updated: "+koshinbi+"<br>");
$("#label_hyoji").css('padding-top','15px');
});
</script>
<b:else/><!--アイテムページ以外のとき-->
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var post_dateHeader = "<data:post.dateHeader/>"</script>
</b:if>
<script>
var feed_date=post_dateHeader+"T"+"<data:post.timestamp/>"+":";
var kokaibi=date_shoshiki(feed_date);
document.write("Published: "+kokaibi+"<br>");
</script>
</b:if>
<data:top.authorLabel/> <data:post.author/>
</div>
<!--公開更新日時の表示 終了-->
このままテンプレートHTMLに書き込んでもエラーがでてきます。HTMLエンティティに変換しないといけません。
<script></script>の中の「&」は「&」に、「<」は「<」に置き換えます。
さらに保存すると以下のように自動的に「"」が「"」に、「'」が「'」に、「>」が「>」に置き換わります。
<!--公開更新日時の表示 開始-->
<div style='float:right;font-size: 0.9em;text-align:right;margin-left:20px'>
<b:if cond='data:blog.pageType == "item"'><!--アイテムページのとき-->
<div id='toko_nitiji'/>
<script>
$.getJSON("http://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",
function(json){
var kokaibi =date_shoshiki(json.feed.entry[0].published.$t);
var koshinbi=date_shoshiki(json.feed.entry[0].updated.$t);
$("#toko_nitiji").html("Published: "+kokaibi+"<br>"+"Last Updated: "+koshinbi+"<br>");
$("#label_hyoji").css('padding-top','15px');
});
</script>
<b:else/><!--アイテムページ以外のとき-->
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var post_dateHeader = "<data:post.dateHeader/>"</script>
</b:if>
<script>
var feed_date=post_dateHeader+"T"+"<data:post.timestamp/>"+":";
var kokaibi=date_shoshiki(feed_date);
document.write("Published: "+kokaibi+"<br>");
</script>
</b:if>
<data:top.authorLabel/> <data:post.author/>
</div>
<!--公開更新日時の表示 終了-->
こんな感じになりました。
モバイルサイトでは短縮型の英語名にする
<b:includable id='mobile-post' var='post'>にあるモバイルサイトでの表示も以下のように「公開」「更新」の日本語をそれぞれ「Published」「Last Updated」という英語に変更しました。
<!--公開更新日時の表示 開始-->
<div id='toko_nitiji' style='font-size: 0.9em;text-align: right;padding-bottom: 5px'/>
<script>
$.getJSON("http://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",
function(json){
var kokaibi =date_shoshiki(json.feed.entry[0].published.$t);
var koshinbi=date_shoshiki(json.feed.entry[0].updated.$t);
$("#toko_nitiji").html("Published: "+kokaibi+"<br>"+"Last Updated: "+koshinbi+"<br>");
});
</script>
<!--公開更新日時の表示 終了-->
<b:includable id='mobile-index-post' var='post'>にあるインデックスページの部分も「公開」の日本語を「Published」という英語に変更します。
<script>
var feed_date=post_dateHeader+"T"+"<data:post.timestamp/>"+":";
var kokaibi=date_shoshiki(feed_date);
document.write("Published: "+kokaibi+"<br>");
</script>
ところがこれだと長すぎて1行に収まりません。
アイテムページの表示
インデックスページの表示
そこでモバイルサイトのときは英語月名を短縮型にすることにします。
var en_month=["Jan.", "Feb.", "Mar.", "Apr.", "Jun.", "Jul.", "Aug.", "Sep.", "Oct.", "Nov.", "Dec."];とするだけなのですが、モバイルサイトのときだけそうなるように場合分けしないといけません。
Blogger:モバイルサイト(8)Bloggerのタグではウェブバージョンをモバイル端末からみていることを判別できずでみたようにモバイルサイトかどうかの判定は<b:if cond='data:blog.isMobile'>ですることにします。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script>
function date_shoshiki(feed_date){
var en_month=["January", "February", "March", "April", "June", "July", "August", "September", "October", "November", "December"];
var date=feed_date.match(/\d+/g) ;
return en_month[date[1]-1]+" "+date[2]+", "+date[0]+" at "+date[3]+":"+date[4]+" GMT+9"
}
</script>
</head>
を以下のように書き換えます。<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<b:if cond='data:blog.isMobile'>
<script>
var en_month=["Jan.", "Feb.", "Mar.", "Apr.", "Jun.", "Jul.", "Aug.", "Sep.", "Oct.", "Nov.", "Dec."];
</script>
<b:else/>
<script>
var en_month=["January", "February", "March", "April", "June", "July", "August", "September", "October", "November", "December"];
</script>
</b:if>
<script>
function date_shoshiki(feed_date){
var date=feed_date.match(/\d+/g) ;
return en_month[date[1]-1]+" "+date[2]+", "+date[0]+" at "+date[3]+":"+date[4]+" GMT+9"
}
</script>
</head>
<head></head>の中では<b:if cond='data:mobile'>は動きませんでした。
グローバル変数を使わなくても関数名を別にすればよいのですけど、あとで見たときにわかりにくいかな、と思って場合分けをしました。
あとはBlogger:ページナビの横に「上に戻る」ボタンを作るで導入した「記事タイトルに戻る」という部分をテンプレートで英語に置き換えてPCサイトの英語化は完了です。
0 件のコメント:
コメントを投稿