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にsaskwave.jsを組み込んでみよう

拙作のsaskwave.js(saskwave.min.js)をBloggerに組み込む方法です。

このライブラリは必要に応じて拡張しているので、今のところできること自体は余り多くありません。シンプルなライブラリ…、というのもおこがましいくらいのコード量です。なんせ、テンプレートの方でいろいろできちゃうのでネタがないんですよね…。
ということでネタ募集中です(;^^

今のところ、Bloggerのフィードエントリー関連の処理を楽にすることがメインでしょうか。そういった処理を行う場合、saskwave.jsを使えば便利になります。シンプルなコードですので、詳しくは直接コードをお読みください。

http://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/saskwave.js

ということで、 saskwave.js(saskwave.min.js)をBloggerに組み込む方法を紹介します。
なお、組み込んだだけでは何もおきないので、他の記事で実装なんかを紹介したいと思います。
というか本当にネタ募集中(;^^

Bloggerでアクセスアップするコツ その2 ～記事個別の検索向け説明を書こう

この記事は投稿時に設定できる検索向け説明についてです。

記事を投稿する際、画面右側には下の画像ような投稿の設定があるかと思います。
その中に検索向け説明というものがあります。

まずは検索向け説明をクリックしてみましょう。

クリックするとテキストボックスが表示されます。

記事を書き終えた後にでも、記事の要約をこのテキストボックスに書いておきましょう。記事の要約は160文字程度が最適です。その際、重要と思われるキーワードを織り交ぜて書くのがアクセスアップのコツになるかと思います。

Bloggerでアクセスアップするコツ その1 ～ブログを投稿する前にパーマリンクを設定しよう

Bloggerで投稿した際、記事のパーマリンク(URL)は自動で生成(自動パーマリンク機能)されるので、普段意識することはないかと思います。でも、ブログの記事を書く前にパーマリンクは手動で設定しましょう！

何故かというとメリットがあるからです。

メリット その1 ～ちょっとしたSEO対策

端的にいうと、記事がGoogleの検索に引っかかりやすくなります。
今のところ、GoogleはURLをそれなりに重要な要素として扱っている様子です。なのでパーマリンク(URL)に記事と関連した単語を入れておけば、検索時に記事がヒットしやすくなります。

Bloggerの自動パーマリンクは、投稿タイトルから自動でパーマリンクを生成します。ただ日本語の投稿タイトルだと「blog-post.html」のような何も意味のない文字列を生成します。これだと何の記事か分からないですよね…。

そこで例えば、本記事の場合でしたら、「blogger-custom-permalink.html」といったパーマリンクを手動で設定すれば、「Bloggerのカスタムパーマリンクの記事なんだな」と一目で分かるようになります。またblogger、 custom、 permalinkのキーワードが使われるので、それらキーワードでの検索にもヒットしやすくなります。

つまるところ、「パーマリンクを手動で設定する」＝「パーマリンクをキーワード的に扱える」ということです。

メリット その2 ～勝手にパーマリンクが変わらない

Bloggerの自動パーマリンクは自動生成で便利なのですが、パーマリンクが投稿タイトルから自動で生成されるということ自体が曲者だったりします。

何故かというと、ちょっと編集し直して投稿タイトルを変えたりすると、記事のパーマリンクも変わってしまう場合があるからです。例えば、一旦公開した記事を下書きに戻し、投稿タイトルを弄って再度公開すると、確実にパーマリンクは別のものに置き換わってしまいます。 これにより、思わぬリンク切れのトラブルを招くこととなります。特に外部からリンクして貰っている場合、外部からアクセスできなくなるので、非常にデメリットとなります。この点からもパーマリンクは手動で設定してしまう方が得策です。

そもそもとして

自動パーマリンクは投稿タイトルに英単語が入っているとそこそこうまく英単語を使ってくれるんですが、日本語だと基本的に無視されます。Bloggerは海外がメインなサービスのためか、日本語の投稿タイトルから意味の分かるパーマリンクを生成してはくれません。

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を実装した関連記事ウィジェットは他で見つかりませんでした。
なので、実装することにしました。実装するにあたって、以下の点は厳守です。

Blogger単独で最近の投稿を表示する方法 (Recent Posts)

Bloggerには、最近の投稿(Recent Posts)ガジェットがないため、最近の投稿を追加できなかったりします。実現しようとすると大抵、Feed2JSを使うなど、外部サービスに頼らざる得ません。でも外部サービスを使う場合、外部サービスが終了したりすると急に使えなくなるので不便ですよね。

ちなみに、Bloggerのフィードガジェット使えばできるじゃん！って突っ込まれそうですが、あれは最大件数5件までだったりサムネイルを表示できなかったりでいろいろ不便です。

なので、作ってみました。
デフォルトではこんな感じに表示されます！

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

引用(転載)をスタイルシートで分かりやすいようにしました。
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の管理画面の「レイアウト」から「ガジェットを追加」をクリックし、出てきたダイアログウインドウで「その他のガジェット」タブをクリックして、その中から「連絡フォーム」ガジェットを選択します。

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

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

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

BloggerのフィードURLの種類をまとめてみました

フィードを設定し配信することによって、閲覧者側は好きなフィードリーダーでブログのコンテンツをみることができます。またブログが更新されると自動的にフィードリーダー側へ配信されるので、より早くコンテンツを見てもらうことができます。

BloggerのフィードURLについてはBloggerのヘルプに説明があります。
ただこの説明、ちょっと情報が足りないので備忘録としてまとめなおしておきます。

Blogger のフィード URL - Blogger ヘルプ 
https://support.google.com/blogger/answer/97933?hl=ja

”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で外部ファイルをとか書いてますが、単独では無理でした (;^^。