こんにちは、つばさ（@tsubasa123）です。
先日、はてなブログの公式機能として “記事下に「関連記事」を表示する” というものが追加されました。過去記事には反映されない（かつ、デフォルトで有効になる）仕様のようで、なんだかちょっとな、って印象を抱いた方が多いように見受けられます。
さて、「関連記事」の表示方法ですがはてなブログにおいても色々なやり方があるようでして、ここらで一旦整理してみようかと思います。割と重要な機能だと思いますが皆さんどうお考えでしょうか？ちょっと長くなりますが、よければお付き合いください。
- 関連記事とは？
- 関連記事の表示方法
- 私的な評価指標
- 外部サービスを利用する
- RSSを元に記事を取得する
- 既存のモジュールで工夫する
- 新しく追加された公式の機能を利用する
- 手動で記事下もしくは記事内に追加する
- 関連記事の関連度
- で、結局どれがいいの？
- （おまけ）手動で追加を自動化
- さいごに
関連記事とは？
まずはじめに「関連記事」とはなんたるか、要件を定義しておきますが、
- 現在閲覧している記事と何かしらの関連性をもった、同一ブログ内で掲載されている現在閲覧している記事とは異なる記事
とします。言われなくても。。。って感じではありますが、念のため。
で、先ほどの定義で出てきた「関連性」が非常に重要になると個人的には考えているんですが、ここは結構緩いルールで。「タイトルが似ている」とか「カテゴリ（タグ）が同じ」とか「コンテンツに含まれるキーワードに同じものが●個以上」とか色々あると思いますが、何かしら「ルール」が適用されるならOKとみなします。極論は「同じブログの記事」になるのかな。
関連記事の表示方法
はてなブログにおいて関連記事の取得・表示方法は私の思いつく範囲では下記の5つ。
- 外部サービスを利用する
- RSSを元に記事を取得する
- 既存のモジュールで工夫する
- 新しく追加された公式の機能を利用する
- 手動で記事下もしくは記事内に追加する
こんなところでしょうか。今回、はてな運営が公式にサービスを提供するまでは、割と頑張ってなんとかしないといけなかったようですね。いろんな方がカスタマイズコードを公開してくださっていますが、根源としてはこのどれかに帰結しているように見受けられました。
最後の「手動で」は今回の内容に含めるか迷いましたが、これにはちょっとカスタマイズも絡んできたりしまして。こちらは追って説明します。
私的な評価指標
関連記事の取得方法がわかったところでやっと本題です。じゃあどれがいいの？って話。
これに関してはメリット・デメリットがあると思いますので、5つの評価指標を設けて考えてみることにします。
- 導入の手軽さ
- カスタマイズ度
- 表示速度
- 保守のしやすさ
- 関連度の精度
他にも可用性（安定性）があるかもですが、はてなブログ自体が落ちたらしょうがないので抜きにして、サービスは正常に動作することを前提とします。私的には下の項目ほど重要度が高いかなと考えています。
で、ここからは私の主観であれこれいいますが、別にここで紹介するカスタマイズやサービスをディスる気はサラサラありません。私の目から見たメリットとデメリットをできるだけ公平に判断しているつもりです。知識不足ゆえに至らぬ点や誤認があるかもしれませんが何とぞご容赦を（予防線は張れたかな）。
外部サービスを利用する
あまり詳しく知りませんがちょっと調べた感じだと、
- Milliard
- LinkWithin
- 忍者レコメンド
- Zenback
等々、いろんなサービスが提供されているようでして。今回は外部サービス代表としてはてなブログでよく見かける「Milliard」にフォーカスを当てて考えます。で、ちょっと無責任かもですが、私自身が使っているわけではありません。ネットの海で調べた情報や、直接知人から聞いた情報に対しての私的評価になりますのでご了承ください。
メリット
- 導入が簡単
- そこそこカスタマイズできる
- そこそこ普及している
はてなブログ向けにもサービスを提供してくれているようですので導入は簡単そうな印象です。URLや各種設定情報を登録して発行されたJavaScriptコードを管理画面から登録すれば完了、なのかな。この手軽さはプログラムとかちょっと…って方にはかなりポイントが高いと思います。
表示位置や表示形式、PCとスマホでの表示など、はてなブログ向けを謳っているだけあって細かい部分まで配慮されています。加えて、Milliard向けのカスタマイズコードを公開されている記事も検索すれば見つけることができますので、頑張ればカスタマイズもそこそこ手を入れることが出来そうですね。
デメリット
- 通信がボトルネックになる（らしい）
- 古い記事が残る（らしい）
- 仕様変更により、カスタマイズに影響がでる（可能性がある）
- サービスの運営状況に左右される
やはり一番気になるのが速度の問題。外部サービスの利用なので通信による遅延が発生するのは致し方ないのですが、Milliardに関しては速度面に関してあまりいい噂を聞きません。まぁ無料のサービスに過度な品質を求めるのも酷なことなので、これは有料サービスでもいいので高速なものなんかを提供してくれるとお互いメリットがあるかもです。
次に表示されるコンテンツの精度について。関連度までは評価が難しいのですが、過去に消した記事が関連記事として表示されてしまう、という話を聞いたことがあります。どなたから聞いたんだっけかな？これは残念ながら結構な原点ポイントだと思います。
これに関しては、一度取得したデータを再度精査するようなことをしていない、もしくは再精査までに時間がかかるんだろうな、というのが私の予想ですが、これも無料サービスに求めるのは厳しいという見解。コスト面でコンテンツの管理にリソースが割けないのであればこれは致し方ない、精度を上げるには有償化なりなんなりして、コストをペイできる収益を捻出するしかないかと。
あとこれは考えすぎかもですが、外部サービスを利用することによって発生するブログへのリスクは考えられますね。「タグが変わって表示が崩れた」とかよくある話、「サービスが終了になった」が最悪のケースでしょうか。可用性は除外と言いましたが、サービスが変わる、なくなるリスクはまた別かなと思ったのでちょっと付け加えました。
総評
- 導入の手軽さ：☆☆☆☆
- カスタマイズ度：☆☆☆
- 表示速度：☆☆
- 保守のしやすさ：☆☆☆☆
- 関連度の精度：☆☆
ちょっと偏った見方をしているかもですが、比較的ブログ初心者向けかなといった印象です。難しいこと考え出すと私のようにデメリットばかり気にしてしまいますが、「言われた通りに設定してタグ入れたら終わり」ってのはやはりビギナーには嬉しいことだと思います。なんたって無料ですからね、ありがたいことです。
あとはクオリティとの兼ね合いですが、やはり有償でもいいので高品質を求めるユーザ向けのサービスがでてきたら面白いですね（あるのかな？）、あとは記事同士の関連性をどのように判断しているのか興味あり。この辺も公開してくれるとサービスのブランディングに一役買ってくれそうな気がします。
RSSを元に記事を取得する
結構いろんな方がやり方を公開してくださっていますが、
多分一番有名なのはこれなんじゃないかな。パンクズリストでお世話になっている方も多いかと。外部のJavaScriptを読み込ませることで手順を簡略化してくださっていますが、内部的にはRSSから情報を取得しているようです。Gってなにかなと思っていましたが、「がちゃ」でいいのかな？
メリット
- カスタマイズ性が高い
- そこそこ普及している
外部サービスや既存のモジュールの利用と違い、基本となるデータをもとに自由なフォーマットで表示を自分で作ることができるので（自分で0から作るなら）カスタマイズ性はかなり高い方かと。もちろん、それ相応の知識やスキルは必要となりますが、そこはカスタマイズ者の腕の見せ所ですね。他のやり方でもJavaScriptを直したりするのであればカスタマイズ性はあがりますが、自分で全部書いた方が構成を管理できるので精神的にも楽だと思います。
JavaScriptで自分で通信処理を書かなければならないので、それなりに考えたほうがいい（考えなきゃいけない）こともあるのですが、こちらに関しても先の記事をはじめとして、コピペで導入できるコードがたくさん公開されていますので、うまく利用すれば専門知識がなくでも導入は可能です。これはやり方のメリットというよりははてなブログというプラットフォームの人気に依存してるかもですが、まぁ良しとします。
デメリット
- （いくつか）通信が発生する
- 関連度がやや弱い
- 直近の過去記事30件からの選出になる
- 割とコードが複雑（書く人も管理する人も大変）
外部サービス同様、外部への通信やRSS取得のための通信が発生するため、ある程度の遅延は仕方なしです。RSSの取得に関しては非同期処理にできるのでそこまで気にしなくても良いのかもしれませんが、まぁ通信はどうしても発生します。
お次に気になるのは「関連度」。ちょっと技術的な内容になりますが、はてなブログの仕様上、2種類のRSSが利用可能で、
- 現在の記事が属しているカテゴリのフィード
- ブログ全体のフィード
のどちらか、あるいは両方を利用することができます。逆に言えば、これ以外のデータをもとに関連した記事を表示することは（多分）できません。フィードにはそれぞれ新しい記事30件分の情報が記載されています。
冒頭で「関連性」のルールについて触れましたが、「同じブログもしくは同じカテゴリの最新30件」がRSSを利用したカスタマイズによる関連のルールに当てはまります。んー、やや弱いかなと。既存モジュールを使うよりはコンテンツの内容も精査するような処理を挟むことで関連度を高めることができるかもしれませんが、もう少し「強い関連性」を持たせたいところです。
あと、カスタマイズの作り手としては、フィードのデータから必要なものをフォーマッティングする処理は割とめんどくさい。めんどくさい≒処理負荷に繋がりやすいのでコードを書く際に気を付けたほうがよいことも増えてきます（そこまで気にしなくてもいいですけど）。トップページのフィードとカテゴリ毎のフィードでもフォーマットが違うのでこの辺はカスタマイズの作り手次第。コピペで使うだけの人は特に気にすることはないかもですが、使うカスタマイズによって遅延の差が出る（かもしれない）ことは知っておいて損はないですね。
コピペコードが普及しているので導入障壁は低くなっていますが、それなりに記述も長くなりがちなので、他のカスタマイズを導入するときやカスタマイズコードをメンテナンスする際に不手際によってコードを改変してしまって動かなくなるリスクもあったりします。できるだけスマートに管理しましょう。
総評
- 導入の手軽さ：☆☆☆
- カスタマイズ度：☆☆☆
- 表示速度：☆☆
- 保守のしやすさ：☆☆
- 関連度の精度：☆☆
デメリットがどうしても目についてしまいますが、今までは公式で機能がなかったので仕方ありません。このような工夫を凝らして関連記事を表示するカスタマイズが利用されてきました。
後で出てきますが、総合的に考えても公式機能の方が優勢かな。公式機能が普及するにつれて、この系統のカスタマイズはだんだん利用者が減っていくのかなーという予想です。
既存のモジュールで工夫する
現時点で私がとっている方法。サイドバーになら関連する記事を表示することができますので、それをJavaScriptやCSSを使って任意の場所に移動させてそれっぽく見せる方法です。ソースコードは
この記事なんかがシンプルでわかりやすいんじゃないでしょうか。そのうち自分でも記事書こうと思って忘れてました。
メリット
- 余計な通信が発生しない（内部的には発生してるけど）
- カスタマイズ性は結構高い
- 比較的導入は簡単
他のカスタマイズと違って、自分で外部通信処理を書く必要がない（はてなブログが内部的にやってるとは思う）のでRSSを利用したカスタマイズよりは高速な印象（あくまで印象）。サイドバーにモジュールを追加する際に件数やサムネのサイズ、日付の有無など、それなりに設定項目がありますのでCSSを利用すればそこそこカスタマイズさせることも可能です。ちなみに私のブログではページの一番下にドーンといますので、最後に見ていってくださいな。
コピペコードもそこそこ充実していますので、初心者の方でもそこまで苦戦せずに導入できるんじゃないかと思います。
デメリット
- 関連度が弱い
- カスタマイズは必須
関連度が弱い、これにつきますね。同じカテゴリで指定した件数だけ新しい記事が表示される仕様になっていますが、こちらもちと「関連度」が弱いかなと。もう一工夫できればコスパのよいカスタマイズだと思うんですがまぁ仕方ない。
あと、表示位置を操作する必要があるので大なり小なりカスタマイズコードを追加する必要があります。メリットでコピペコードがある、とお伝えしましたが、この範囲で収まらないカスタマイズがしたい場合はがんばって目的にあったコードを探すもしくは作る必要があります。とはいえ、RSSを利用したカスタマイズよりは単純なのでとっつきやすいかと。
総評
- 導入の手軽さ：☆☆☆
- カスタマイズ度：☆☆☆
- 表示速度：☆☆☆
- 保守のしやすさ：☆☆☆
- 関連度の精度：☆☆
通信面と管理コストに関してはRSSによるカスタマイズより多少ながら高評価ですが、根本的にはRSSのものと考え方は同じかな。こちらも徐々に利用者が減っていきそうですね。私も身の振り方を考えなければ。
新しく追加された公式の機能を利用する
概要に関しては公式サイトを見てください。他にも
詳細な仕様やCSSによるカスタマイズコードはorefolderさんが用意してくれましたので、導入前には一読することをお勧めします。相変わらず仕事が早い。Minimal-Greenさんのカスタマイズにも密かに期待してます。あのデザイン、好きです。
メリット
- 導入が簡単
- 多分高速
- 関連度に期待
- 今後の機能拡張に期待
- そこそこカスタマイズできる
チェックを入れるだけ、というか入っているので導入障壁は限りなく低いです。そして、モジュールの機能とは違い、HTMLとして表示されますので、JavaScriptによる処理や外部通信が発生しないため表示を遅延させる要因はないと思います。これは嬉しい。
現時点では未知ですが、ブログに関するすべてのデータを持っているはてな運営が「関連している」とみなす記事を選出してくれるので、外部サービスよりも「関連度」に期待することもできるかな、というのが私の予想。カテゴリを跨いだ記事も表示されるようですので、結構期待できるかも。
ここ最近、色々な動きのあるはてな運営ですので、この機能に対しても追加で改修が入る可能性もありそうですね。個人的には表示件数とサムネのサイズ、ディスクリプションの文字数あたりが候補にあがるかな、と。サイドバーのモジュールでできるんだから、技術的にできないことはないはずですしね。運営さん、期待して待ってます。
カスタマイズに関してはこれから色んな人が名乗りを上げるのでしょうか、私もそのうち何か書こうかな。
デメリット
- 過去記事に適用されない
- 表示件数が少ない
- サムネが小さい
そこまでデメリットに感じることはないのですが、まぁいくつか。表示件数とサムネは機能拡張に期待ですね。サムネについてはJavaScriptを使うことで元画像を取得することは可能なんですが、あれはそこそこコストの高い処理で、画像のちらつきが気になったりならなかったり。ローディングを入れるほど待たされるわけでもないので対応が難しいところです。
過去記事に適用されないってのはなんでかわかりませんが、解消するかもしれないようなので期待しましょう。
総評
- 導入の手軽さ：☆☆☆☆☆
- カスタマイズ度：☆☆☆
- 表示速度：☆☆☆☆
- 保守のしやすさ：☆☆☆
- 関連度の精度：☆☆☆
まだまだ様子見なところもありますが、多面的に見ても一番ポイントが高いのはこれかなーと。公式機能ですからね、そりゃ期待したくもなります。ただし、これ以上の機能拡張がないようであれば、コストはかかるけど他のやり方についてもまだまだ導入の余地ありって感じですね。後は何と言っても「関連度」の精度に期待。ここはプラットフォーム提供者として他のサービスには負けない精度でお願いします。
はてな運営さん、期待してます。あとSSL化も。
手動で記事下もしくは記事内に追加する
これが一番関連度を高めることができる、とは思いますが、反面管理コストも非常に高くつく。
イメージとしてはこんな感じ。
ざっくり説明しますと、「記事下のおすすめはスプレッドシートで個別に管理して手動で入れるのもいいよ」ってな内容です。ことのはさんの記事では管理用のスプレッドシートも公開してくださっていますので、ガチで管理したい方はこちらも参考にどうぞ。ちなみに私はかなり早期に断念しました。
メリット
- 関連度の精度が高い
- 臨機応変に対応できる
- カテゴリ単位でも対応可
記事の任意の箇所に、自分で関連していると判断した記事を紹介できるので当然ですが「関連度」に関しては抜群の精度となります。また、関連度やおすすめ度によってデザインを変えたりすることも可能。はてなブログだとシロマティさんの囲みのデザインを使われることが多いんじゃないでしょうか。
これこれ。かっこいいのでまだカスタムCSSに追加してない方は要チェックです。
あと、これもシロマティさんの記事になりますが、CSSだけで関連記事エリアをカテゴリ単位で切り替えることも可能です「広告不要」なんかにも応用可能なやつですね。
これなら記事毎ではなく、カテゴリ毎に管理できるので多少は楽になります。もちろん、併用も可能ですのでざっくりとカテゴリ毎におすすめ記事エリアを用意しておいて、キラーコンテンツとなる記事では、本文中の適切な位置で囲みを使って関連記事へ誘導させるようにすると効果大なんじゃないでしょうか（みんなやってるのかな）。
こちらの記事にあります、みるおかさんの言葉をお借りしますが、
より詳細な情報が欲しい読者がクリックしたくなるような位置に、ジャストタイミングで関連記事を置く
これができるのが個別に記事を管理管理することの最大のメリットだと思います。みるおかさんの記事もめっちゃ勉強になりますので、ご一読を。
関連記事を表示する「機能」からはちょっと話がそれてしまいましたが、やはりメリットの大きい対応方法ですね。
デメリット
- とにかく管理が大変
- 更新漏れが発生しやすい
大変。
これにつきます。記事数に比例して労力も増えていきます。管理も煩雑になります。記事の追加時はまだ頑張れるかもですが、他の記事にリンクを設定し直す作業は想像するだけでぞっとします。
また、頻繁にリライトするような方はどうしても更新漏れが出てくると思います。タイトルの変更忘れくらいならまだいいですが、URLを変更した場合はリンク切れを起こしてしまいます。クローラーがそこまで判定しているかは知りませんが、記事を見てくれているユーザにとって不親切なことは間違いありません。
総評
- 導入の手軽さ：☆☆☆☆☆
- カスタマイズ度：☆☆☆☆☆
- 表示速度：☆☆☆☆
- 保守のしやすさ：☆
- 関連度の精度：☆☆☆☆☆
メリットも最大、デメリットも最大、といったところ。5段階では伝えられないくらい保守コストというデメリットが重くのしかかります。ブログガチ勢はちゃんと管理したりしているのでしょうか。もし全記事のリンクを把握してるという方がいましたら是非やり方を教えていただきたいものです。
関連記事の関連度
事あるごとに「関連度」について触れてきましたが私的には非常に重要だと思う点がこれでして。そもそも関連記事を記事下（CTAっていうのかな）とかに置くのって、何かしらの興味を持って記事を閲覧しているユーザに、同じような内容の記事をおススメすることでそちらの記事も読んでもらう（回遊率っていうのかな）ことが狙いなわけでして。
なので、そこでおススメする記事が今の記事とどれだけ関連しているかってのは、この機能というか施策においては結構重要なんじゃないかなーと。当たり前のことをグダグダと言ってますが、この部分っていまいちどうやって実装されているのか見えてこないんですよね。多分説明されても理解できないとは思いますが気になるところです。
RSSによるカスタマイズとか既存のモジュールは単純にカテゴリだけでしたけど、はてな公式はここに関して力を入れてくれると個人的には非常にうれしいです。
で、結局どれがいいの？
人によるってことだと思います。5つの評価指標を上げましたが、速度重視の人と関連度重視の人と運営のしやすさ重視の人では当然対応方法も変わりますので。
まだまだ様子見ではありますが、総合的にはやはり公式提供の機能が優れているのかな、というのが私の現時点での見解です。まだまだこれから機能の拡張があるかもわかりませんので、その辺の期待も含まれていますが、よい機能に成長していってもらいたいものです。
（おまけ）手動で追加を自動化
ちょっと飛び道具感ある方法なんですが、「手動で関連記事を追加を自動化」というロマン溢れる対応も人によっては可能。私も記事の自動更新までは試したんですが、結局、「関連度」を持たせるところで躓いて断念。先の記事でもあるように、AIとか機械学習とかそーいった分野になるんでしょうけど、そんな崇高なことができる人間ではありません。あくまでネタ系カスタマイザーですので。
さいごに
ここ最近、結構な頻度でコア機能のアップデートが行われていますのでこれかもどんどん使いやすいサービスになってくれると助かりますね。SSL化はよ。
ではでは、最後までお付き合いいただきありがとうございました。