イントロダクション
Google のブログサービス「Blogger」に投稿したページのタイトルと、そのページの投稿時間を一覧表示したい場合があります。作りたいもののイメージ：
| 投稿タイトル（ヘッダ） | 投稿日時（ヘッダ） |
| 投稿タイトル1 | 投稿日時1 |
| 投稿タイトル2 | 投稿日時2 |
| ・ ・ ・ | ・ ・ ・ |
| 投稿タイトルn | 投稿日時n |
そこで、Blogger の Feed の情報を取得し、ブログ内の全投稿に対して、投稿タイトルと投稿時間の一覧表を作成する JavaScript コードを作成しました。
コード
<div id="post-list-container">
記事一覧生成中...
</div>
<div id="post-list-gen-time">
</div>
<script type="text/javascript">
<!--
// --- Util ---
// JavaScript動的挿入
function addScript(src) {
var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute("src", src);
header_setChild(script);
}
// <head>取得
function getHeader() {
return document.getElementsByTagName("head")[0];
}
// <head>に子要素を追加
function header_setChild(child) {
var head = getHeader();
head.appendChild(child);
}
// --- Main ---
var feedDataArray = []; // フィードのデータ
var max_results = 500; // フィード取得件数(最大500）
var blogger_url = location.protocol + "//" + location.hostname; // Blogger の URL
// 記事一覧作成のトリガー
(function () {
loadFeed();
})();
// Feed の読み込み
function loadFeed() {
addScript(blogger_url + "/feeds/posts/summary?alt=json-in-script&callback=loadtoc&max-results=" + max_results + "&start-index=" + (max_results * feedDataArray.length + 1) + "&redirect=false");
}
function loadtoc(data) {
// エントリーがある場合は、エントリーをストックし、次の記事の読み込み処理を実行
if (data.feed.entry) {
if (data.feed.entry.length > 0) {
feedDataArray.push(data);
// フィードの上限件数取得できていた場合、まだ投稿が残っている可能性があるので次のフィードを取得する
if (data.feed.entry.length == max_results) {
// 次の feed の読み込み
loadFeed();
return;
}
}
}
// エントリーが無い・最後のエントリーまで読み込んだ場合
// 全てのデータを読み込み終わったので、記事一覧を作成
createPostsIndex();
}
function createPostsIndex() {
// 処理時間計測
var start_time = new Date();
var html = "";
html += "<table>";
html += "<tr><td>投稿タイトル</td><td>投稿日時</td></tr>";
for (var feedCount = 0; feedCount < feedDataArray.length; feedCount++) {
var data = feedDataArray[feedCount]; // 処理対象のフィードの取り出し
for (var i = 0; i < data.feed.entry.length; i++) {
// リンク先の探索
var href = "javascript:void(0);";
for (var j = 0; j < data.feed.entry[i].link.length; j++) {
if (data.feed.entry[i].link[j].rel == "alternate") {
href = data.feed.entry[i].link[j].href;
}
}
html += "<tr>" +
"<td><a href=\"" + href + "\">" + escapeHTML(data.feed.entry[i].title.$t) + "</a></td>" +
"<td>" + data.feed.entry[i].published.$t + "</td>" +
"</tr>";
}
}
html += "</table>";
var obj_output = document.getElementById("post-list-container");
obj_output.innerHTML = html;
// 処理時間計測
var end_time = new Date();
var process_span = end_time - start_time; // 処理時間(ms)
document.getElementById("post-list-gen-time").innerHTML = "<br />記事一覧の作成にかかった時間は " + process_span + " ms です。<br />";
// テキストをエスケープ処理する
function escapeHTML(html) {
var div = document.createElement("div");
if (div.innerText !== void 0) div.innerText = html; // innerText が定義されていれば innerText へ設定
else div.textContent = html; // Firefox のように innerText がないブラウザ向け
return div.innerHTML;
}
}
//-->
</script>
上記のコードを、Blogger の新規作成したページの HTML に挿入します。
なお、HTML を挿入した後は「作成」には戻らず、そのまま「公開」ボタンを押して公開します。
（HTMLから、作成へ戻ると、JavaScript 内に不要な改行が自動的に挿入され、正常に JavaScript を実行できなくなる場合があります。）
結果
上記のコードを張り付けたページを表示すると、次のような投稿タイトルと投稿時間の一覧表（ブログ内の全投稿）が作成されます。 |
| 投稿タイトルと投稿時間の一覧表（ブログ内の全投稿） |
なお、このブログの投稿タイトルと投稿時間の一覧表（ブログ内の全投稿）は、次のページで閲覧できます。
Dr.ウーパのコンピュータ備忘録: 投稿タイトルと投稿時間の一覧表（ブログ内の全投稿）
http://upa-pc.blogspot.jp/p/post-date-time.html
http://upa-pc.blogspot.jp/p/post-date-time.html
まとめ
このように、Blogger の Feed を使用すれば、Blogger に投稿したデータに対して、様々な処理を行うことができます。
次回は、投稿時間をExcelやGoogle Driveのスプレッドシートで日時として認識できる形式で表記した「投稿タイトルと投稿時間の一覧表（ブログ内の全投稿）を作成する JavaScript コード」を作成します。
次回：投稿時間をExcelやGoogle Driveのスプレッドシートで日時として認識できる形式で表記-Blogger:投稿タイトルと投稿時間の一覧表（ブログ内の全投稿）を作成する
http://upa-pc.blogspot.com/2014/12/blogger-post-title-date-table-2.html
コメントを投稿
コメント投稿機能について