イントロダクション
Google のブログサービス「Blogger」にて、サムネイル付きの新着情報の一覧を任意の件数表示できる「新着情報ガジェット」を作成していくことにしました。前回：
Blogger:JavaScript:新着情報を表示するガジェットを作成(2)-記事タイトルのみの一覧を作成
http://upa-pc.blogspot.com/2015/03/blogger-new-post-list-gadget-javascript-2.html
今回は、前回作成した「記事タイトルのみの一覧」を作成する「新着情報ガジェット」にたいして、スタイルシート(CSS)によりデザインを指定しやすいように、class 属性を付与します。
新着情報を表示するガジェットを作成(3)-css用のクラス名を追加
css用のクラス名を追加した、記事タイトル（記事へのリンク付き）のみの一覧を作成する、新着情報ガジェットの HTML/JavaScript コードは次のようになります。
コード：
<div id="new-post-list-container">
新着読み込み中...
</div>
<script type="text/javascript">
<!--
(function () {
// --- 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 max_results = 5; // 新着記事を表示する件数
// 上限は 500 件です
// *** 設定可能なパラメータ ここまで ***
// 記事一覧作成のトリガー
loadFeed();
// Feed の読み込み
function loadFeed() {
var blogger_url = location.protocol + "//" + location.host;
addScript(blogger_url +
"/feeds/posts/summary?alt=json-in-script&callback=newpost_loader&max-results=" + max_results +
"&start-index=1&redirect=false");
}
})();
function newpost_loader(data) {
// エントリーがある場合は、新着記事一覧の生成開始
if (data.feed.entry) {
if (data.feed.entry.length > 0) {
createNewPostsList(data);
}
}
// 新着記事一覧生成
function createNewPostsList(data) {
var obj_newPostList = document.createElement("div");
obj_newPostList.setAttribute("class", "new-post-list-items");
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;
}
}
// 全体の要素作成
var obj_item = document.createElement("div");
obj_item.setAttribute("class", "new-post-list-item");
// 全体のリンク要素
var obj_link = document.createElement("a");
obj_link.setAttribute("href", href);
obj_link.setAttribute("class", "new-post-list-item-link");
obj_item.appendChild(obj_link);
// 記事タイトル用要素作成
var obj_title = document.createElement("div");
obj_title.appendChild(document.createTextNode(data.feed.entry[i].title.$t));
obj_title.setAttribute("class", "new-post-list-item-title");
obj_link.appendChild(obj_title);
// 項目を連結
obj_newPostList.appendChild(obj_item);
}
// 画面上へ反映
var obj_output = document.getElementById("new-post-list-container");
obj_output.innerHTML = "";
obj_output.appendChild(obj_newPostList);
}
}
//-->
</script>
実行結果：
作成された HTML 構造
<div id="new-post-list-container">
<div class="new-post-list-items">
<div class="new-post-list-item">
<a href="http://upa-pc.blogspot.com/2015/03/slideshare-transcript.html" class="new-post-list-item-link">
<div class="new-post-list-item-title">
SlideShare:時間が無い時には、Transcript が便利！ - スライドの内容をざっとチェックできます!</div>
</a>
</div>
～以後、新着記事の数だけ繰り返しのため、省略～
</div>
</div>
このように、新着情報ガジェットの HTML 構造に、クラス名が付与されていることが分かります。
設置方法
(1) Blogger の設定のレイアウトにて、「ガジェットを追加」を行います。(2) 追加するガジェットとして「HTML/JavaScript」ガジェットを選択します。
(3) タイトルに「新着情報」などと入力します。
(4) コンテンツに、上記の HTML/JavaScript コードを張り付けます。
(5) 「保存」をクリックします。
(6) プレビューを行い、期待通りの動作になっているか確認します。
(7) 新着情報ガジェットを配置したい位置へ移動した後、「配置を保存」をクリックします。
オプション設定
表示件数の変更
プログラム中の max_results の値を変更します。例）10 件分の新着情報を表示する場合：
var max_results = 10; // 新着記事を表示する件数
まとめ
今回は、前回作成した「記事タイトルのみの一覧」を作成する「新着情報ガジェット」にたいして、スタイルシート(CSS)によりデザインを指定しやすいように、class 属性を付与してみました。次回は、遅延して Feed の読み込み処理が実施できるように、遅延実行機能を実装したいと思います。
次回：
Blogger:JavaScript:新着情報を表示するガジェットを作成(4)-遅延実行機能を追加http://upa-pc.blogspot.com/2015/03/blogger-new-post-list-gadget-javascript-4.html
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について