避けては通れない!fc2blog画像サーバが突然勝手に移転で阿鼻叫喚まとめ

更新
2013年05月05日(日) 22:05

fc2ブログでアップロードしたファイル(画像など)を保存する専用サーバーに関するまとめです。最新記事一覧や関連記事リストにサムネイル画像を利用していたり、テンプレートeyecatcherを利用している場合は留意しておいた方がいいです。

概要

  1. fc2blogの最新記事一覧などでサムネイル画像を表示していても、突然サムネイル画像が表示されなくなる場合についてまとめました。

  2. 突然リンク切れになるメカニズムの簡易説明も載せています。

定義:画像サーバと画像サーバ番号

  1. このページでは画像サーバを、「fc2ブログでアップロードしたファイル(画像など)を保存する専用サーバー」と定義しています。画像格納サーバと呼んでいる方もいます。fc2さんによる正式名称に関する記述を見つけられませんでした。なお、画像サーバと呼称していますが、CSSファイルやJavaScriptファイルなどもこのサーバに格納されます。

  2. 通常、画像サーバには画像サーバ番号があり、その番号は画像ファイルURLのサブドメイン部分で確認できます。次のURLで反転している部分が画像サーバ番号です。

    http://blog-imgs-(番号).fc2.com/*/*/*/ブログID/ファイル名.(拡張子)
  3. 具体例は次のとおりです。44が画像サーバ番号です。

    http://blog-imgs-44-origin.fc2.com/c/u/s/customtemplate/ec-strawberry.png
  4. 「ファイル名.(拡張子)」の違いだけを利用してアイキャッチ/サムネイルを表示している場合、画像サーバ番号が突然変更されるとリンク切れの原因になります。その理由を以下で具体的に述べます。

解説:HTMLとfc2変数だけでは対処不可

  1. 最新記事一覧にサムネイル画像を表示させる場合、画像サーバ変更がなければ次のようなコードを記載すれば実現可能です。実際には、記述するコードはもっと多いのですが、簡略化して例示しています。

    <img src="http://blog-imgs-44-origin.fc2.com/c/u/s/customtemplate/entry-<%topentry_no>.jpg" />
  2. fc2変数の繰り返し処理で、反転している部分が各記事番号に置き換えられ、最新記事一覧にサムネイル画像が表示されます。生成されるタグの具体例は次のとおりです。

    <img src="http://blog-imgs-44-origin.fc2.com/c/u/s/customtemplate/entry-3.jpg" />
    <img src="http://blog-imgs-44-origin.fc2.com/c/u/s/customtemplate/entry-2.jpg" />
    <img src="http://blog-imgs-44-origin.fc2.com/c/u/s/customtemplate/entry-1.jpg" />
  3. たとえば、記事番号3(blog-entry-3.html)までサムネイル画像をアップロードし、しばらく日をあけてから記事番号4のサムネイルをアップロードしたら画像サーバ番号が60に変わっていたとします。記事番号4のサムネイルを表示するには、次のコードを記述する必要があります。

    <img src="http://blog-imgs-60-origin.fc2.com/c/u/s/customtemplate/entry-4.jpg" />
  4. しかし、上記fc2変数による繰り返し処理では、記事番号以外の部分は同じなので、次のコードが生成されます。entry-4.jpgのURLは赤字部分は60であってほしいのに、44として出力されています。よって、URL相違により記事番号4からはサムネイル画像が表示されなくなります。

    <img src="http://blog-imgs-44-origin.fc2.com/c/u/s/customtemplate/entry-4.jpg" />
    <img src="http://blog-imgs-44-origin.fc2.com/c/u/s/customtemplate/entry-3.jpg" />
    <img src="http://blog-imgs-44-origin.fc2.com/c/u/s/customtemplate/entry-2.jpg" />
    <img src="http://blog-imgs-44-origin.fc2.com/c/u/s/customtemplate/entry-1.jpg" />
  5. 記述するコードによっては、記事番号1~3のサムネイルも表示されないなどの違いがあると思いますが、概念としては上述のとおりです。

経過:遅くとも5年前から同じ仕様

  1. 2013年4月現在の仕様は、2009年3月ごろに発表されました。発表が2009年なだけで、それ以前からこの仕様になっていたようです。ちなみに、当方は遅くとも2007年にはfc2blogを利用していましたが、仕様に関して覚えていません。

  2. fc2ブログにサムネイル画像を表示する人は少数派であり、それに関して言及している人はさらに少数派でほとんどいません。それでもわずかにいらっしゃるので、その貴重な記録を拝見できありがたいです。

  3. 上記リンク先の諸先輩方に共通していえることは、皆さんHTMLやfc2変数を自分で調べて解決した方々であることです。後進の参考にもなるように記録を残してくださっているわけですから、素晴らしい方々です。

  4. 当方が管理するブログの1つである愛猫チェリッシュにサムネイルを表示し、画像サーバが突然勝手に変更された時は辟易しました。幸い自力で対応できましたが、同時にテンプレート製作者として、HTMLなどに不慣れな方に同じことをしてもらうのは茨の道だと思いました。できるだけかんたんに対策できる方がいいと感じ、試行錯誤を繰り返しました。

  5. 愛猫チェリッシュで適用しているテンプレートeyecatcherの共有化以前に記事にしていた関連記事リストにサムネイル画像表示(画像サーバ移転対応版)で紹介した方法なら、今のところ最もかんたんに画像サーバ移転に対応できると結論づけました。

  6. よって、画像サーバ移転時の対策については、関連記事リストにサムネイル画像表示(画像サーバ移転対応版)で既に記載しています。時間のある時に、まだ未説明の部分に関して別途記事を作成し、テンプレート利用者さんの便宜をどんどん図っていきます。

  7. 当方が作成したテンプレートの利用者さん以外は、次の記事が参考になるかもしれません。

その他:不思議な仕様、2つある画像URL

  1. 画像1つを1度アップロードしただけでも、その画像のURLは2つ存在します。URLの違いは反転している部分の有無です。

    http://blog-imgs-(番号).fc2.com/*/*/*/ブログID/ファイル名.(拡張子)
    http://blog-imgs-(番号)-origin.fc2.com/*/*/*/ブログID/ファイル名.(拡張子)
  2. 具体例です。次の2つの画像は同じに見えますが、URLは異なります。

  3. 2つURLが存在する理由について、次の記事が参考になるかもしれません。

  4. この仕様に関する認識が甘く、JavaScriptでファイルURLを分割したりする際に少し戸惑いました。当方が作成した外部JavaScriptファイルをカスタムしたり、別件でファイルURLを操作される方は、この点に留意された方がいいかと思います。

  5. 蛇足ながら記載しておくと、「-origin」付きのURLをハイフン部分で区切り3番めを利用しようとしたつもりが、「-origin」なしのURLだったために3番めがなくundefinedになってしまい、気づくのに20~30分くらいかかってしまいました。

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)