太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログの記事下に関連記事を表示する「あわせて読みたいG」

f:id:bulldra:20141014113210p:plain

はてなブログ用「あわせて読みたいG」

 上記で作成していたカテゴリ表示に対応した記事を表示させるブログパーツについて、内部的にいくつかの問題があって放置していたのですが、『はてなブログカードガチャをブログパーツ化して自分のブログに設置できるようにしたよ - 太陽がまぶしかったから』とマージして実現する事にしました。

  • セレクトボックスの内容から指定枚数のブログカードをランダム表示
  • 表示エントリのカテゴリを初期設定
  • 表示内容の更新が可能
  • 「アーカイブ」「はてなブックマーク」「カテゴリ一覧」画面への移動が可能

 要するに言えば「カテゴリ別ブログカードガチャ」を表示記事のカテゴリに合わせてロード時に実行させる事で「カテゴリ別あわせて読みたい」の機能を代替させるということです。「あわせて読みたいG」の「G」は「ガチャ」の「G」です。『モンスターハンター4G』の「G」じゃなくて。

カテゴリ別あわせて読みたいガチャ

 ブログカードガチャはデフォルトで人気記事からランダムで表示させていますが、モードを「category」に指定することで表示記事のカテゴリ設定を読み取って初期選択するようになります。最新エントリや全エントリからの表示を指定する事も可能です。

初期モード 動作
category 表示しているカテゴリから選択
recent 最新のエントリから選択
(デフォルト) ブックマーク数が多いエントリから選択

複数同時起動とヘッダー埋め込み

 また記事下やサイドバーでの複数同時起動に対応するため、HTML内のIDを指定できるようにし、ついでにヘッダー埋め込み機能にも対応しました。ヘッダーを指定するとヘッダーの右側に埋め込む形でセレクトボックスやボタンが表示されるのですっきりと表示できます。CSSのclass名は「hatena-module-foot」となっています。

f:id:bulldra:20141014113332p:plain

カテゴリ別RSS購読ボタンの設置

 カテゴリ別のRSSをFeedlyで購読するためのボタンを設置します。詳細は以下をご覧ください。

設置方法

f:id:bulldra:20140814125828p:plain

 デザイン画面における「記事下」の部分に設置します。

※ソースコードは著作物です。一部引用は構いませんが、必ず著作者の明記と解説ページへのリンクをお願いします。全文転載や孫引きはご遠慮ください。

<!-- 解説はこちら http://bulldra.hatenablog.com/entry/read-together-g -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/gatcha.js" charset="utf-8"></script>

<script type="text/javascript">
writeGatcha(3,'entryGatcha','category','あわせて読みたい' ,true);
google.setOnLoadCallback(function(){ writeGatchaCategory('entryGatcha') } );
</script>

 設定内容は以下の通りです。パーツIDについては他のHTMLパーツと異なるように設定して下さい。2つ以上の場所で表示させる場合はそれぞれに異なるIDを指定する必要がありますが、「最新エントリ」「カテゴリ別エントリ」といった形で並べて表示させる事が可能です。

writeGatcha(表示数,パーツID, モード,ヘッダー,購読ボタン有無);
google.setOnLoadCallback(function(){ writeGatchaCategory(パーツID) } );

 「モード」には以下の設定が可能です。

初期モード 動作
category 表示しているカテゴリから選択
recent 最新のエントリから選択
(デフォルト) ブックマーク数が多いエントリから選択

 ソースコードについては『bulldra.github.io/gatcha.js at master · bulldra/bulldra.github.io · GitHub』から取得可能です。個別カスタマイズが必要な場合や動作の詳細を把握されたい場合にご利用下さい。

まとめ

 結果的に、これまで作ってきた記事下表示スクリプトの集大成的なブログパーツが作成できました。JavaScriptにほぼ初めて触った頃に作ったプログラムが想定外に広まってしまい、利用者の方にも色々と難儀だったのですが、以下と合わせて「現在の自分ならこうする」という形になっています。

 もちろん、内部的にはもっと綺麗に出来るのでしょうし、作法がなってない部分もあるのですが、ソースコード全文をコピペして変数を書き換えてもらうみたいな時代からは隔世の感があります。また3ヶ月もすれば「ありえない」と思うのでしょうが、それはそれで、また作りなおせばよいのだろうと思います。

 そんなわけで、はてなブログに「あわせて読みたい」を実装したい方は、利用を検討してみてはいかがでしょうか。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

はてな村奇譚上

はてな村奇譚上

はてな村奇譚下

はてな村奇譚下