しんぷるハック

FC2ブログにて関連記事のサムネイルを無理矢理表示する方法

カテゴリ:

ブログ

投稿日:2014年05月28日 19:35 投稿者:管理人

FC2ブログには関連記事のサムネイルを表示する変数が用意されていない。

クソだ。

サーバが落ちてもアナウンスせず、復旧してからもアナウンスしないクソみたいなサポートと同じぐらいクソである。ユーザーはアクセスカウンタやGoogle Analyticsでアクセス数を確認していつもより少ないことを検知し、Twitterで「FC2 落ちてる」で検索してようやく気づくのだ。

クソを超越している。

クソを凌駕している。

クソストである。

前置きならぬ愚痴が長くなったが、関連記事のサムネイルを表示する方法として以下の2つを始めに考えた。

1.jQueryを使って関連記事の1番始めに投稿された画像を取得して表示する
2.個別記事のURLとサムネイルが紐づくようにサムネイルのファイル名をリネーム。jQueryを使ってimgタグのsrcにサムネイルのURLを設定する。

1は表示する関連記事のHTMLを丸ごとダウンロードすることになるのでNG。

2は、FC2ブログでは画像ごとに保存されるサーバが変わるので関連記事の件数分どこのサーバにサムネイルが保存されているのか、JavaScriptで調査する必要があり、処理に時間がかかりそうなのでスマホのことを考えるとあまり良くない。

結局実装した方法は、記事ごとのサムネイルをダウンロードして、個別記事のURLと紐づくようリネームしてからFC2ブログ以外の別のサーバに保存。JavaScriptから正規表現で個別記事のURLから数値部だけを抽出した後、URLを組み立てて、imgタグのsrcプロパティにセットしやした。

▼処理の内容はザックリとこんな感じ。まぁここまで書けばわかるでしょう。そんな大した処理してません。
blog-entry-6289.html(個別記事のURL)

上のURLから正規表現で6289を抽出

JavaScriptで「http://ドメイン/thumbnail/6289.jpg」を組み立てて、imgタグのsrcにセット

画像がセットされるまでに若干時間がかかるので、あらかじめimgタグに「not image」と書かれた画像をセットしておけばOK

投稿している記事数が100件ぐらいなら画像を保存するのはまだ手動でもなんとかいけるけど、僕は6000件を超えていてさすがに全てを保存するのはめんどかったので各カテゴリ毎に20件分ぐらいでやめときました。画像の保存→リネームするのが最もめんどくさいですが、保存したい画像の上にマウスをもってけばあとは自動でダウンロードしてくれるChromeのエクステンション「Click and Save」を使うことで少しはラクになりました。

それでもリネームとリサイズが面倒だけどこればっかりは仕方ないですね。

あと、これからブログを書くときにはサムネイルを用意して別のサーバにアップする必要があるけど、まぁそんな手間じゃないからいいかな。

ちなみに、PCとスマホでアクセスした場合に関連記事のURLが異なるというハイパーウルトラマッチョクソクソ仕様になっていたことを実装途中で発覚してクソ漏れそうになった。match(/\d+/)で正規表現かければ問題ないけど、PCはURLをそのまま出力するのにスマホの場合は?6289というパラメータを渡すのにビックリ。なんの意図があってパラメータなんだろ・・・

©しんぷるハック All Rights Reserved.