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スクリプトをインストールする。
インストール
ソースコード
上のThis Gistに更新履歴。
仕組み
文字化け表示されたページのURLをimg要素で読み出してから、文字列部分のpre要素を削除。
正常に表示される画像でスクリプトを実行して問題なかったから、これでOK?
おなじ現象として
yahoo!ブログの特定サーバで配信されている画像は全てこの現象がおこる。
ほかのブログなどでこの現象に遭遇したら、firefoxからユーザスクリプトの管理画面を開き、
ユーザスクリプトを実行するページに対象のページを追加登録すれば、たぶん対応できる。
BitTorrentファイルも同様の理由から文字化け表示されちゃうサーバがある。
→対応策はいつかやる。
ちなみに
IEとgoogle chromeでContent-Type: text/plainの画像にアクセスしてみたら、
正しく画像が表示される。フレキシブルな子。