イントロダクション
Google のブログサービス「Blogger」にて、サムネイル付きの新着情報の一覧を任意の件数表示できる「新着情報ガジェット」を作成していくことにしました。前回：
Blogger:JavaScript:新着情報を表示するガジェットを作成(7)-記事の冒頭を追加
http://upa-pc.blogspot.com/2015/04/blogger-new-post-list-gadget-javascript-9.html
Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/04/blogger-new-post-list-gadget-javascript-9.html
Dr.ウーパのコンピュータ備忘録
今回は、前回新着情報ガジェットへ追加した記事の冒頭部分の文字数を制限します。
Blogger:JavaScript:新着情報を表示するガジェットを作成(8)-記事の冒頭の文字数を制限
概要
記事の冒頭部分に対して、指定した文字数を超えた文字を削除してから、新着情報ガジェットへ追加します。スタイルシート：
/* 新着記事の項目 */
.new-post-list-item
{
clear:both;
}
/* 新着記事の最下部 */
.new-post-list-items-end
{
clear:both;
}
/* 新着記事のサムネイル画像 */
.new-post-list-item-img
{
width:100px;
height:100px;
float:left;
margin-right:1em;
}
/* 新着記事の投稿日 */
.new-post-list-item-post-date
{
text-align:right;
color:#999999;
}
HTML/JavaScript コード：
<div id="new-post-list-container">
新着読み込み中...
</div>
<script type="text/javascript">
<!--
setTimeout(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 ---
// *** 設定可能なパラメータ (Feed 関連) ここから ***
// 新着記事を表示する件数
// 上限は 500 件です
var max_results = 5;
// *** 設定可能なパラメータ (Feed 関連) ここまで ***
// 記事一覧作成のトリガー
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");
}
}, 2000); // 遅延実行(ミリ秒)
function newpost_loader(data) {
// *** 設定可能なパラメータ (見た目 関連) ここから ***
// サムネイル画像を表示するかどうか
var show_thumbnail = true;
// サムネイルがない場合に使用するイメージ
// デフォルト：1x1 の透明png画像(base64エンコード)
var not_thumbnail_img_src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAEElEQVR42mL4//8/A0CAAQAI/AL+26JNFgAAAABJRU5ErkJggg==";
// 投稿日を表示するかどうか
var show_post_date = true;
// 投稿日のラベル
var post_date_label = "post : ";
// 記事の冒頭を表示するかどうか
var show_post_summary = true;
// 記事の冒頭の長さ
var post_summary_length = 64;
// 記事の冒頭の末尾のテキスト
var post_summary_text_end = "...";
// *** 設定可能なパラメータ (見た目 関連) ここまで ***
// エントリーがある場合は、新着記事一覧の生成開始
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);
if (show_thumbnail) {
// サムネイル用イメージ要素作成
var obj_img = document.createElement("img");
obj_img.setAttribute("class", "new-post-list-item-img");
var img_src = not_thumbnail_img_src; // サムネイル画像
if (data.feed.entry[i].media$thumbnail) {
if (data.feed.entry[i].media$thumbnail.url) {
img_src = data.feed.entry[i].media$thumbnail.url;
}
}
obj_img.setAttribute("src", img_src);
obj_link.appendChild(obj_img);
}
// 記事タイトル用要素作成
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);
if (show_post_date) {
// 投稿日時
var post_date = new Date(data.feed.entry[i].published.$t);
var post_date_text = post_date_label + post_date.getFullYear() + "/" +
(post_date.getMonth() + 1) + "/" +
post_date.getDate() + "";
var obj_post_date = document.createElement("div");
obj_post_date.setAttribute("class", "new-post-list-item-post-date");
obj_post_date.appendChild(document.createTextNode(post_date_text));
obj_link.appendChild(obj_post_date);
}
if (show_post_summary) {
// 記事の要約
// 要約のテキスト
var summary_text = data.feed.entry[i].summary.$t;
// 要約の冒頭部分のみ取り出し
var summary_top_text = summary_text.substr(0, post_summary_length) + post_summary_text_end;
var obj_summary = document.createElement("div");
obj_summary.appendChild(document.createTextNode(summary_top_text));
obj_summary.setAttribute("class", "new-post-list-item-summary");
obj_link.appendChild(obj_summary);
}
// 項目を連結
obj_newPostList.appendChild(obj_item);
}
// 最下部の要素
obj_end = document.createElement("div");
obj_end.setAttribute("class", "new-post-list-items-end");
obj_newPostList.appendChild(obj_end);
// 画面上へ反映
var obj_output = document.getElementById("new-post-list-container");
obj_output.innerHTML = "";
obj_output.appendChild(obj_newPostList);
}
}
//-->
</script>
実行結果：
解説
記事の冒頭の文字数を制限
記事の冒頭の文字数を制限して表示する処理は次のコードで行っています。 if (show_post_summary) {
// 記事の要約
// 要約のテキスト
var summary_text = data.feed.entry[i].summary.$t;
// 要約の冒頭部分のみ取り出し
var summary_top_text = summary_text.substr(0, post_summary_length) + post_summary_text_end;
var obj_summary = document.createElement("div");
obj_summary.appendChild(document.createTextNode(summary_top_text));
obj_summary.setAttribute("class", "new-post-list-item-summary");
obj_link.appendChild(obj_summary);
}
substr を使用して、記事の要約の冒頭を post_summary_length 分、取り出しています。
そして、記事の冒頭が省略されていることを示すために、post_summary_text_end（デフォルトで"..."）を文字列の最後に付与しています。
設置方法
スタイルシートの設置：
(1) Blogger の設定のテンプレートにて、「カスタマイズ」をクリックします。(2) Blogger テンプレートデザイナーにて、「上級者向け」をクリックします。
(3) 「CSSを追加」をクリックします。
(4) カスタム CSS を追加の部分に、スタイルシートを追加します。
(5) 「ブログへ適用」ボタンをクリックします。
HTML/JavaScript コードの設置：
(1) Blogger の設定のレイアウトにて、「ガジェットを追加」を行います。(2) 追加するガジェットとして「HTML/JavaScript」ガジェットを選択します。
(3) タイトルに「新着情報」などと入力します。
(4) コンテンツに、上記の HTML/JavaScript コードを張り付けます。
(5) 「保存」をクリックします。
(6) プレビューを行い、期待通りの動作になっているか確認します。
(7) 新着情報ガジェットを配置したい位置へ移動した後、「配置を保存」をクリックします。
オプション設定
表示件数の変更
プログラム中の max_results の値を変更します。例）10 件分の新着情報を表示する場合：
var max_results = 10; // 新着記事を表示する件数
遅延実行時間
先頭の setTimeout 関数にしている、ミリ秒数を変更します。例) 5000ミリ秒(5秒) 後に、処理を開始する場合：
setTimeout(function () {
...
}, 5000); // 遅延実行
サムネイル画像を表示するかどうか
プログラム中の show_thumbnail の値を変更します。例）サムネイル画像を表示しない場合：
// サムネイル画像を表示するかどうか
var show_thumbnail = false;
サムネイル画像が記事に設定されていない場合に、代わりに使用する画像
プログラム中の show_thumbnail の値を変更します。base64エンコードされた画像や、web上の画像ファイルの URL を指定します。
// サムネイルがない場合に使用するイメージ
// デフォルト：1x1 の透明png画像(base64エンコード)
var not_thumbnail_img_src = "";
投稿日を表示するかどうか
プログラム中の show_post_date の値を変更します。例）投稿日を表示しない場合：
// 投稿日を表示するかどうか
var show_post_date = false;
投稿日のラベル
投稿日のラベルを変更する場合には、 プログラム中の show_post_date の値を変更します。例）投稿日のラベルを"投稿日：" とする場合：
// 投稿日のラベル
var post_date_label = "投稿日：";
記事の冒頭を表示するかどうか
プログラム中の show_post_summary の値を変更します。例）記事の冒頭を表示しない場合：
// 記事の冒頭を表示するかどうか
var show_post_summary = false;
記事の冒頭の長さ
プログラム中の post_summary_length の値を変更します。例）記事の冒頭の長さを 32 文字にする場合：
// 記事の冒頭の長さ
var post_summary_length = 32;
記事の冒頭の末尾のテキスト
プログラム中の post_summary_text_end の値を変更します。例）記事の冒頭の末尾のテキストを"(省略) 続きを読む"にする場合：
// 記事の冒頭の末尾のテキスト
var post_summary_text_end = "(省略) 続きを読む";
まとめ
今回は、前回の新着情報ガジェットに対して、記事の冒頭の部分の文字数を制限できるようにしてみました。 |
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について