BloggerでJavasciptを使って、さくっと「最近の投稿」と「更新された投稿」ウィジェットを作る (Recent Posts, Updated Posts)

以下の記事から発展して、「最近の投稿」と「更新された投稿」ウィジェットを作ってみました。

• BloggerでJavascriptを使って、簡単に記事を取得し表示する
  http://saskwave.blogspot.jp/2014/06/blogger-saskwave-feed-entry-collection.html
• Bloggerにsaskwave.jsを組み込んでみよう
  http://saskwave.blogspot.jp/2014/06/blogger-build-in-saskwave.html

基本的には以下の記事と同じことができますが、より無難な実装で、不具合も修正してあります。そして何より実装が簡潔になっています。

• Blogger単独で最近の投稿を表示する方法 (Recent Posts)
  http://saskwave.blogspot.jp/2014/06/blogger-recent-posts.html

 特徴としては、

• LatestPostsConfigで表示件数や表示の制御ができる
• jQueryとsaskwave.jsが必要
• saskwave.jsによって記事取得と表示が分離されているのでレイアウト設計が簡単
• jQueryによる簡易な記述
• 利用は自由(でも利用したらコメントください！)
• HTML/Javascriptガジェットに貼り付けるだけでOK
• 無名関数により極力グローバル変数を使わない実装

といったところです。

BloggerでJavascriptを使って、簡単に記事を取得し表示する

初めに

この記事では拙作のsaskwave.jsを使用しています。
利用する方で、まだsaskwave.jsを組み込んでない方は下記の記事をご覧ください。

•  Bloggerにsaskwave.jsを組み込んでみよう 
  http://saskwave.blogspot.jp/2014/06/blogger-build-in-saskwave.html

テンプレートに組み込み終わったら次の項目をどうぞ。

Javascriptで記事を簡単に取得してみよう

ただ単にフィードから記事を取得するだけなら、Saskwave.FeedEntryCollectionクラスを使うと簡単に取得できます。このクラスは以下のクラスメソッドを持ちます。

Saskwave.FeedEntryCollection クラス

クラスメソッド	説明
setNumEntries(num)	numに取得したい記事数を1～500の間の数字で指定する。記事が100しかない場合、500を指定しても最大記事数の100記事を返します。デフォルト(省略した場合)は、25です。
setOrderType(str)	strに文字列を指定する。記事の並びが日付降順なら'published'を、更新日順なら'updated'を指定します。デフォルト(省略した場合)は'published'です。
collect(callback)	callbackに引数を一つ持つコールバック関数を指定する。コールバック関数の引数は記事の配列となります。

Blogger単独で関連記事を表示する方法 (Related Posts)

Blogger単独で関連記事を表示する方法の模索をする (Related Posts) 
http://saskwave.blogspot.jp/2014/05/blogger-related-posts.html

この記事でBloggerにも外部サービスに依存しない関連記事ウィジェットを実装したいと書きましたが、実装しました。

テンプレートは弄らないで実装できないか検討しましたが、テンプレートを弄らないとそもそも個別記事のラベルを取得する方法がないので、結局テンプレートを弄ることにしました。そのかわり最小限の編集で済むような実装にしてあります。

この関連記事ウィジェットの特徴

• jQueryライブラリとsaskwave.jsを使ったシンプルな実装
• コードはテンプレートへ追加するだけ
• 関連記事の表示は即時反映されます
• 表示件数を任意の数にしたり、関連記事ウィジェットのタイトルを編集できます
• 基本的な表示の制御はCSS(スタイルシート)のみで行えるようなHTML構造
• 見た目重視でサムネイル画像を全面採用 (記事に画像を掲載していない場合、代替画像が表示されます)
• サムネイル画像は自動的に必要最低限の大きさにリサイズされるので、通信データ量を削減できる (通信が遅いモバイル端末に有利)
• デフォルトで用意されている関連記事ウィジェットの表示方式は4種類 (見た目については下記を参照)
• 記事のラベルから過去記事との関連度を測って記事を抽出するので、関連度が高い記事をリストアップできる (関連記事は【関連度＋日付降順】に並びます)
• 必要なコードだけあれば、外部サービスに依存しないので、Blogger単独で利用可能 (Blogger以外のサービスに影響されません)

たくさん書きましたが、こんなところです。
一番の利点は、外部サービスに影響しない点と、ちゃんと関連度順に並ぶという点ですね。
あと見た目も選べるのも利点です。

それはさておき、デフォルトで用意されている表示方式は下記の通りです。
4種類(tile|vertical|horizon|none)あり、選択するだけで見た目が変わります。

Blogger単独で関連記事を表示する方法の模索をする (Related Posts)

Bloggerで個別記事の下に関連記事が表示されるようになるといいかもしれないと思い、他社サイトはどうやっているか調査しました。

調査したところ、以下のような有名どころのサービスを利用しているケースが多いようです。

• LinkWithin
  サムネイル画像付きでレイアウトがきれいだが、関連しない記事も拾ってしまうよう。
  外部サービスに依存するのでLinkWithinがサービス終了すると使えなくなるデメリットがある。
  
  Bloggerブログの個別記事下に関連記事を表示するウィジェット「Linkwithin」
  http://www.life-gp.net/2013/06/bloggerlinkwithin.html
  
• Outbrain - Related Link Widgets
  こちらもサムネイル画像が出せるタイプ。
  記事に関連したOutbrainからの推奨記事も表示される(これが収益源の一つようです)。
  LinkWithinと同じく、外部サービスに依存する。
  
  コンテンツレコメンデーション最大手Outbrainのビジネスモデル
  http://markezine.jp/article/detail/19029
• Smarter Related Posts Widget for Google Blogger - v2.0
  こちらもサムネイル画像が出せるタイプ。
  LinkWithinと同じく、外部サービスに依存する。
  これといって目新しいものはない。
  
  [blogger]シンプルな関連記事表示がしたい！「Smarter Related Posts…
  http://www.sunabox.net/2012/05/bloggersmarter-related-posts-widget-for.html
• Blogger で「関連記事」リストを表示する 2 つの方法
  Blogger Tipsで有名なクリボウさんのサイト。
  この方法なら、Blogger単独で関連記事の表示ができるので、外部サービスに頼らなくていい。
  ただ、ラベル一個ずつしか関連記事を表示できないので目的としたものと違う。

どれも当方が考えていた関連記事ウィジェットとは違いました。
当方が考えていた関連記事ウィジェットは以下の通りです。

1. Blogger単独で動く
2. 簡単な組み込み作業で関連記事ウィジェットが表示できる
3. 表示される関連記事は、個別記事の(複数の)ラベルを使ってマッチングし、
   関連度が高い順に表示される (ラベル一個の関連記事じゃないということ)

一番欲しい機能の、項目3を実装した関連記事ウィジェットは他で見つかりませんでした。
なので、実装することにしました。実装するにあたって、以下の点は厳守です。

引用をスタイルシートで分かりやすいようにしました

引用(転載)をスタイルシートで分かりやすいようにしました。
HTMLタグでいうblockquoteですね。

Bloggerの投稿では、赤線で囲われた部分(引用)をクリックすると引用(転載)できます。

デザインはシンプルにまとめました。
こんな感じです。

画像の読み込みを工夫して、Bloggerの記事をいち早く表示する方法 (LazyLoadプラグイン)

一般的にブラウザでページを表示するとき、ブラウザはサーバーからデータを全てダウンロードしてきます。
それが決して見られることのない画像であってもダウンロードしてきます。
例えば画像が多用されていて、縦に長いページの場合、ブラウザの非表示エリアにも画像はあるわけですが、その画像もダウンロードしてこようとするので表示に時間がかかります。
特に回線が貧弱なモバイル回線などでは表示までにかかる時間の長さが顕著になります。

今回紹介するjQueryプラグインは、ブラウザの非表示エリアにある画像はダウンロードを保留し、 ブラウザをスクロールして初めて画像が表示エリア内へ来た時に画像をダウンロードするというもので、LazyLoadプラグインといいます。

画像が多いページの場合、無駄な画像をダウンロードしないので、ページ表示完了までの時間を劇的に改善できます。

Bloggerのいけてないページナビゲーションをカスタマイズする

Blogger(Simpleテンプレート)のページナビゲーションは、ページ数もわかりませんし、正直微妙です。
なのでカスタマイズしたいと思います。
なお、以下のサンプルを 参考 まるまる利用させて頂きました。

Add a Numbered Page Navigation Widget
http://www.widgetgenerators.com/2013/01/add-numbered-page-navigation-widget.html

ブログに掲載するにあたってちょっとだけ使いやすいようにしていますが、一時ソースは上記URLです。

この記事で実現できるページナビゲーションは以下の画像のようになります。

また、JavascriptとCSSをいじることによって様々なページナビゲーションを実装できます。

Bloggerの「連絡フォーム」ガジェットをページの方に移植する

Bloggerに「連絡フォーム」ガジェットが追加されましたが、ちょっと使いにくいので使いやすくします。 このガジェットを設置するとこちらのメールアドレスを公開せずに、問い合わせフォーム経由で問い合わせを受け取ることができます。

ブログへ「連絡フォーム」ガジェットを追加する

ブログへの追加は、Bloggerの管理画面の「レイアウト」から「ガジェットを追加」をクリックし、出てきたダイアログウインドウで「その他のガジェット」タブをクリックして、その中から「連絡フォーム」ガジェットを選択します。

実際に追加すると、ブログ上ではこんな感じで表示されます。

連絡フォーム経由で送信されると、自分のブログ管理用メールアドレスにメールが送られてきます。
メールアドレスをオープンにしたくない場合はいいですね！

でも連絡フォームをページに置きたい場合は、このままではまずいのでちょっと弄ります。

”data:post.timestampISO8601”を使って、Bloggerのすべての記事に投稿日付を入れる方法

一日に複数の記事を投稿した場合に発生する問題は、下の記事で解決できます。

Bloggerで投稿日付を全ての記事に入れる方法 (data:post.dateHeader編)

ですが、 他にも<data:post.timestampISO8601/>を使って対処する方法があります。
ちょっと手間はかかりますが、書きようによってはいろんなフォーマットで日付を表示できるようになります。

ちなみに<data:post.timestamp/>でも日付の表示ができますが、こちらは表示形式を変更できてしまうため、Javascriptで処理するのにあまり向きません。<data:post.timestampISO8601/>ならW3CDTF形式なのでパースが楽です。

なお、実装するにあたって、jQueryを使用しています。
jQueryは使用しなくても実装できますが、作業が楽になるのでぜひ使ってみてください。
テンプレートに

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

を追加するだけで、jQueryが使えるようになります。

”data:post.dateHeader”を使って、Bloggerのすべての記事に投稿日付を入れる方法

Bloggerで一日に複数の記事を投稿することがあります。

同一日付の場合、記事一覧を見ると一番先頭の記事にしか投稿日付が付きません。

これは<data:post.dateHeader/>の仕様で同一日付の場合、二投稿目から<data:post.dateHeader/>の値が空になるせいなんですが、困るので対処法をメモしておきます。

この対処法は、簡単なのでお勧めです。
やっていることは、Javascriptを使って日付を記憶しておき、<data:post.dateHeader/>の値が空の場合、記憶しておいた日付をdocument.writeで書き出すだけです。

Blogger内で完結するカスタム検索をシンプルに書いてみた

検索した結果がBlogger内に表示されるといういたって普通なHTMLコードとスタイルシートの実装。特にたいしたこともないですが、SyntaxHighlighterを設置したので試してみました。

実装はシンプルですし、スタイルシートも検索ボタンが邪魔にならないようになってます。Bloggerのテンプレートなり、HTML/Javascriptガジェットなりにそのまま書けばそのまま使えるのでご自由にどうぞ。あ、CSSのCustomSearchクラスとかちょっと配置弄らないとだめですね。

HTMLコード

<div class='CustomSearch'>
  <div>
    <form accept-charset='utf-8' action='/search' id='searchform' method='get'>
      <input autocomplete='off' id='s' name='q' placeholder=' ブログの記事から検索' size='32' type='text'/>
      <input id='searchsubmit' type='submit' value='検索'/>
    </form>
  </div>
</div> 

BloggerでCSSなど外部ファイルを設置する方法を模索する

Bloggerを使っていく上で困るのが、JavascriptやCSSや画像などの外部ファイルの扱い。
Blogger単独でサーバ側に外部ファイルを設置することができればいいのですが、今のところできません。テンプレートに全て記述していく方法もありますが、ページを読み込むごとに毎回余計なデータを転送する必要があるので無駄です。知り合いのサイトはそれで凌ぎましたが(;^^。

とりあえず、簡単な解決策を考えてみます。
なお、タイトルでBloggerで外部ファイルをとか書いてますが、単独では無理でした (;^^。