FirefoxのContent-Type敏感問題にグリモンで対策する(yahoo ブログ 画像 文字化け)

OCNのブログサービス「ブログ人」で画像をupすると何らかの理由で拡張子が付かないことがある。

するとfirefoxユーザに問題が発生する。

この問題の影響を受けるユーザ

  • OCN、yahooでブログを書いてるユーザ
  • 掲示板やチャットで画像URLをやりとりするユーザ

この問題による現象

例えばココの画像のURLに直接アクセスする場合

http://rnc.blogzine.jp/photos/uncategorized/2008/09/04/200809041524000
http://rnc.blogzine.jp/photos/uncategorized/2008/09/04/200809041525000
http://rnc.blogzine.jp/photos/uncategorized/2008/09/04/200809041518002.jpg

上二つの拡張子が無い画像は文字化けして表示されるハズである。(firefoxユーザ)

文字化けする理由

firefoxはContent-Typeの値によって表示形式を選択するから。

  • Content-Type: text/plain →文字化け
  • Content-Type: image/jpeg →画像表示

htmlでimg要素として呼ばれているときは、問題なく表示する。

回避策

  • Content-Typeを正しい値で受け取る。→今回はスルー、やり方知らん
  • greasemonkeyスクリプトを書く。→結局これ

どうやるの

firefoxのアドオンであるgreasemonkeyを導入してから
下記のImageContentTypeProblem.user.jsスクリプトをインストールする。

インストール

ImageContentTypeFix.user.js

ソースコード


上のThis Gistに更新履歴。

仕組み

文字化け表示されたページのURLをimg要素で読み出してから、文字列部分のpre要素を削除。
正常に表示される画像でスクリプトを実行して問題なかったから、これでOK?


おなじ現象として

yahoo!ブログの特定サーバで配信されている画像は全てこの現象がおこる。
ほかのブログなどでこの現象に遭遇したら、firefoxからユーザスクリプトの管理画面を開き、
ユーザスクリプトを実行するページに対象のページを追加登録すれば、たぶん対応できる。


BitTorrentファイルも同様の理由から文字化け表示されちゃうサーバがある。
→対応策はいつかやる。


ちなみに

IEgoogle chromeでContent-Type: text/plainの画像にアクセスしてみたら、
正しく画像が表示される。フレキシブルな子。

出典

ヤフーブログの画像を正しく表示させるGMスクリプト


ほかの解決策あったらどしどし教えてください。