最近の投稿「Recent Posts」の構築と自動生成するスクリプトのリスクについての考察

概要

最近の投稿「Recent Posts」は…「By Blogger」のガジェットはありません…

なので…自動生成するには…自作するか…サードパーティ製を使う事になります…

「メリット」は…手間が掛からない…という事以外ありません

「ul」リストで構築しても大した手間じゃないんですがね

「By Blogger」で用意されていない以上は…

「リスク」要因は多岐にわたりますが…最も懸念されるのは…

ページ読み込み遅延の元凶になり得る…という事ですね…

「投稿タイトル」のリンクのみのシンプルなものから…

「サマリー」「投稿日時」「ラベル」「サムネイル」など…

表示項目が増えるごとに…「リスク」要因は増大する訳ですね…

なので… 当サイトでは…手動で構築していますが…自動生成と…

どれ程の差があるのか…「Pingdom」「GTmetrix」で見てみましょう…

スピード＆パフォーマンステスト

「Pingdom Website Speed Test」では…
「Leverage browser caching」
「Specify a Vary: Accept-Encoding header」

「GTmetrix / YSlow」では…
「Add Expires headers」
「Use a Content Delivery Network (CDN)」…と…叱られます…

「0.248s」speed-up
「24.5KB」size-down

「0.470s」speed-up
「24.0KB」size-down

これらの「caution」は…

最近の投稿「Recent Posts」を…

手動で構築すると解消します…

「Pingdom」はサーバー違いですが…

「24.5KB」サイズダウンして…

「0.248」秒…読み込みが速くなり…

「GTmetrix」は「24.0KB」サイズダウンして…

「0.470」秒…読み込みが速くなります…

この程度ならシンプルなものを導入しよう…

…っていう方もいらっしゃるでしょうから

投稿タイトルのリンクのみのシンプルな「Recent Posts」の構築方法を…

深くは掘り下げずに…参考程度に軽く書いておきます…

投稿タイトルのリンクのみのシンプルな最近の投稿「Recent Posts」

「Recent Posts」の「CSS」

「Recent Posts」の「CSS」

<style type="text/css">
ul#recent li{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAMAAABA3o1rAAAArlBMVEUAAADX19cJCQmbm5vr6+v09PTh4eGHh4elpaXDw8MDAwO/v79xcXGRkZF8fHzNzc2AgIBYWFiYmJivr6+5ubmJiYmNjY1GRkbJycm8vLyrq6uioqLFxcWUlJSKioorKysSEhJoaGiurq6wsLAxMTF3d3eFhYUcHBxjY2NtbW3b29uzs7MiIiJfX19NTU3S0tI3NzfMzMxCQkLOzs49PT1SUlIZGRmfn5/k5OQ7Ozv1mrimAAAAAXRSTlMAQObYZgAAARJJREFUKM99zsl2gjAYhuGQtIYMBhKQUWZwQi0Fte3931j/07pwA8852Xx5Fz9CyKXzEAim93kJQip6W/BNEV0BQuCJ1avnAIEF3OJquWNmvfofIHAc51OW+CTPjCnZO9Jpjn2kYNxHHw4EjDFP4TZV+OSaBw4qrjTv6L7f4dOWQeD7PqmKg5ZFdCmr7qp4vD8red92P5bvQ+B5nnsJ84cMa805Dw3Ohiocg6TSkedBYNu2vB3Tcjgmw2Wapk1ZZIe2FM1BxbYNASFEt2565rvk1nbG3PFVaDxutakTQiBYA1ynkos0LzAPcl43a77r1ziAHwj+xBuaiQ3Nm1jQXASUCgMjBXDDIoqQEWzeFwJ0AUK/yjIddBwzL5UAAAAASUVORK5CYII=) no-repeat 0 2px;padding:0;list-style:none;display:block}#recent li{padding-left:0;list-style:none;display:block}#recent a{text-transform:none;padding-left:35px;font-size:11px;font-style:italic}#recent a:hover{color:#1e90ff}
</style>

使用している画像「」も「base64」変換して記述してあります…

黃文字部分が該当箇所です…ご自由に使って下さい…

画像をbase64エンコードするツール / Syncer  

「Recent Posts」の「HTML」&「JavaScript」

「Recent Posts」の「HTML」マークアップ &「JavaScript」

<ul id='recent'></ul>
<script type="text/javascript">
function getFeedList(h){var a=h.feed.entry,e="",g=[];for(var d=0,c=a.length;d<c;d++){var f=a[d];for(var b=0;b<f.link.length;b++){if(f.link[b].rel=="alternate"){e=f.link[b].href;break}}g.push('<li><span class="item-title"><a href="'+e+'">'+f.title.$t+"</a></span></li>")}document.getElementById("recent").innerHTML=g.join("")};
</script>
<script src="//ご自身のドメイン名.blogspot.com/feeds/posts/default?max-results=10&redirect=false&alt=json-in-script&callback=getFeedList"></script>

黃文字部分を…ご自身のドメイン名に変更して使用して下さい…

ガジェットのタイトル部分の「HTML」

ガジェットのタイトル部分の「HTML」

<b:widget id='HTML9' locked='false' title='Recent Posts' type='HTML'>
  <b:includable id='main'>
      <div class='widget-content' style='background:none;border:none;'>
        <h2 class='title'><span class='id23' title='最近の投稿'/></h2>
        <data:content/>
      </div>
  </b:includable>
</b:widget>

黃文字部分が該当箇所で…「CSS Sprites」で画像を設定しています…

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】

最近の投稿「Recent Posts」を手動で構築する

シンプルなパターンで構築する

【投稿タイトルのリンクのみのシンプルな最近の投稿「Recent Posts」】での…

「JavaScript」以外を…「テンプレート」「HTMLの編集」から設定して…

<ul id="recent">
<li><a href="#">投稿タイトル</a></li>
</ul>

…と記述すると…こんな感じで表示されます…

• 投稿タイトル

適宜…2行目を追加して下さい…

実装状態は…下部のフッターで確認して下さい…

全て入れ込んで構築する

タイトルリンクに「jQuery」の「Button」と…「投稿日時」「ラベル」に…

「Font Awesome」のアイコンを使ってデザインしてみましょう…

 「jQuery」「jQuery UI」第２回「Button」リンクとフォームをボタン化

 「Font Awesome」のCDNでアイコンをWebフォント機能を使ってBloggerに表示【CSS3】


通常のハイパーリンクにする場合やアイコンが不要な場合は書き換えて下さい…

Posted : 2014.07.10 ＊ Labels : Test
投稿タイトル
Lorem ipsum dolor sit amet, mei ne iriure omittam, erat platonem suavitate no eum. Eum everti fabulas conclusionemque ei, has eu quod eirmod. An vix dicant consulatu, veri probo oporteat eu sea. Vocibus constituto sit id, eam posse aliquip fierent ex.

上記…「Recent Posts」の「HTML」マークアップ

<div class="separator" style="clear: both;font-size:10px">
<img border="0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAASFBMVEX////h4eGwsLD09PSmpqaVlZWdnZ3+/v76+vr4+Pja2trv7++ioqK+vr7r6+uZmZm3t7fm5ubU1NSrq6uWlpbOzs7JycnExMTp0+MsAAAE7ElEQVRYw+2X2XLbMAxFzR1cwZ3//6cF3bpp1c5IHuupUz4ksTg8AQjcC+vxf11fxoK5kydGjg5u5OWgu563Ec2QpeSexV1ZA8+QePZ+wC3xGduC4xRfCf6O8FyFqJCLx6OEdAOvhgFFK16Ej018zPNT62pMDSo0Gar5vF9kQO0ob641r5/XxAWWImbzMKKUO7omIzMpZLD+nh40SzVWQyWltHpLD6amOi7XlMZQPq1HjVReX2NYredU9Ycl9llTbFSNErriWyXss35evC5UE6izObKHjVx8bQph3w4wLEiy9wFgJ9a0GvvFHHmL5c0LKFqX2kgmc7HadZBf9iqW5KhaeVciufBpZ1eyiNVyMhS1f7YSk9VWbOn6TIBExwGcrqSUyOhvu8NLXHpDwBmSyDzZwS7XFzEC2XRvJUf4eqyUTBuIK7f0sHmai/XVUvdsHywo1Ox1yLA4uGoUO8O+wYKPi7fHp3dBRQuV/+ovlHdpG2WjwpnSDOwSbkRZHrCJhYmDI5jUOiWbcscQwoRLxUWFw26fViHb47Ypm2jEbIFXe2l+hJhRD9LHQJ7MD4yA5y8wxhTeG2UgvD2piLU7vtiitRMpRjNevN0vOzvh1nLiGWNx9jTVOIF+dEWtYBd2OutfPM8VTqCnSnXuiahQ+lPedjsmpdKO+nii4i8efWoccTq5akTVvGEhsFMeYiWQF1kFIorQkvnaFWIghmgNVK0mMM7O7m+FoL7755MoWEy/H7EDVbRPlXBhvTmtLWO8v4hdt3UsIRG1nkQUUl6Z9duXfxK54unAM0ScGokIPF+0VsPadyLkI88yl8zOGmeq8vJkoRgVOgPCHXhihS4dbGLXcl73/meDjTzg9RmeYJgy8q43cXZZnrtvxPjL/ZXIvk/mAYmEzYwRa703SAzD9oveVNjE/czJTFnXZO0VirWvNCB+8SCSbCQDirCVvDxlLcu17weZrx8j0X7Vw9riUyaiMSkx0mPVrV7zvxBwy+2oxegf5juRnKwvH6OAE1QCyjdy5reXpsNURlXNi2hqxxacOfODrU0b9ngrQUU4BN6Khe1cmygihmnPeHr/y9S5eFY32KPfihntDyKIlOCMh31tFw64G9nycJQ8DN2zeE7jwNdpOQqvMRAKotJDGMv5MaPE2ya++vG8+Yydm+ibwjyW/MMyjRcu7HEPe/OEZn5Y3CamrFG3g4VAKcI8h3NOrJ7x/FiDJS9APGMUpbqDBdOGjmkTtZL8fB6hUqglz3NwTcQ/lp0ya8U3cfRwFh8srZXSqGj1rvAveiqyWocqk1bq6f09LKUb9WB15hZ2rM4c61V7tENSRZIr6YT3Yz5EEpIxIDwb83AERnW6pVYZCVJefZu16yVNY44JhCVYcVjMRHn95clGSUSAPy1WYtz9jk7E5Wn/DeJgix2fJlFGo2IsJblkb37LR+TpmC8XZAd1DxLU074FNBX5cV4OrauwK1siOvYej67pyDNOolJy1kOuV4HuiwceNpCiWrp3jct8+pYdYrE/0nYcVfAfAl1XOjthvguFLc4+fdVuqivk44fpgIAPgWaESZminMVaon6+vHSi6q56yDnaG4CwuI9trKDU9r8bViKlOYASbuI9TNYOdmsT757FQiGnFOlx17I8eiceN66qJU838gzDj+/vMEoa8W6NsJjHP7m+AYSiRX0xzGAjAAAAAElFTkSuQmCC" height="80" width="80" style="clear:left; float:left;margin-right:1em; margin-bottom:1em" /><i class="fa fa-pencil fa-lg fa-fw" title="Posted"></i><i>Posted : 2014.07.10</i> ＊ <i class="fa fa-tag fa-lg fa-fw" title="Labels"></i><i>Labels : Test</i>
<span class="buttons"><a class="east" href="#">投稿タイトル</a></span>
Lorem ipsum dolor sit amet, mei ne iriure omittam, erat platonem suavitate no eum. Eum everti fabulas conclusionemque ei, has eu quod eirmod. An vix dicant consulatu, veri probo oporteat eu sea. Vocibus constituto sit id, eam posse aliquip fierent ex.</div>

「NO Image Available」画像も「base64」変換して記述してあります…

黃文字部分が該当箇所です…ご自由に使って下さい…

「Recent Posts」に必要なだけ…適宜…全体を追加して下さい…

実装する場合は「div」に付与してあるクラス名「.separator」を使って…

「CSS」を構築しておく事をお薦めします…

「HTML」マークアップは定型文管理ソフトに登録しておくと…お便利ですね…

 Clibor / クリップボード履歴と定型文管理ソフト

おわりに…

「Popular Posts」は…「By Blogger」ですから無問題ですし…

「Related Posts」は…手動で構築するには…無理があります…

是非とも「By Blogger」ガジェットが実装される事を望みます…

「Recent Posts」は…その点…機械的に…

記事をアップした際に入れ替えるだけですから…

わざわざ…読み込み遅延というリスクを抱えてまで…

スクリプトを使って呼び出す必要があるのか…熟考する事を強くお薦めします…

以上です…最後までお読みいただきましてありがとうございます…

Tips Universal Header Sidebar Main Current-Label : Footer