2014年2月13日木曜日

中国商標局の検索結果の画像が上下反転する問題への対策 (bookmarkletを作りました)

 【概要】

中国商標局の検索結果に表示される商標画像が、InternetExplorer(IE8以前) 以外では
上下反転して表示されてしまう問題がありましたので、解決策を講じました。
(この問題に関して、詳しくは下記のblog記事をご参照頂ければと思います。)

【対象】

  • 「いちいちIEで検索なんかしてられるか!」 というモダンブラウザ(Chrome, Firefox)ユーザーの方
  • 「そもそもIEなんてなかった…」 というMacユーザーの方
  • 「IEだけど、使えません…」 というIE10以降 のユーザーの方

【作ったもの】

1クリックで、検索結果の画像を本来の表示にする Bookmarkletを作りました。

中国商標局の画像を上下反転 (←このリンク)をお気に入りに登録してください。
お気に入りへの登録方法としては、例えば、
上記リンクを、右クリックしてメニューからお気に入りに登録を選択してください。

Bookmarkletは、簡単にいうと、ブラウザの「お気に入り」 から実行できる小さなプログラムです。
詳しくは、知ってそうで知らないブックマークレットの仕組みと使い方(と便利な11点まとめ) などの記事をご参照ください。

【使い方】

検索結果のページを開いたときに、お気に入りに登録したbookmarkletをクリックしてください。
クリックすると、以下のように、画面遷移なしに、その場で画像が上下反転します。

左:オリジナル、右:bookmarkletを実行後

【補足】

検索結果のページが、ツールバーのない別ウィンドウに表示されてしまう場合には、
別ウィンドウ(検索結果のページ)のURLをコピーして、元のウィンドウに貼りつけてください。

IE9では、うまく動作しません。
このため、表示は正常でも、印刷時に上下反転してしまう問題は解決しません。
IE11か他のブラウザを使うのが無難かと思われます。



以下は、技術的な話になります。

【問題の原因】

オリジナルの画像がそもそも上下反転しており、
表示の際には、IE4で導入されたIE独自のCSS(filter:flipV)を使って戻す作りになっている。

なんだこの作り…。

【実装内容】

Google ChromeやFirefoxなど、モダンなブラウザでも中国商標局の検索結果を見れるようにCSS3の transform:rotateX()を使って上下反転するようにしました。

CSSの適用にあたっては、
検索結果のページ(ソースコード)がimgタグが1つしかないなどシンプルな作りだったので、
手っ取り早く、直接HTMLを書き換えています。


以下、余談になりますが、
検索結果のページ(ソースコード)では、imgタグにidが振られておらず
そのままではDOM操作がしづらいので、HTMLを直接書き換えてidを付与しています。
(他にもDOM操作をすることがあるかと思って付与したのですが、
 上述の通りCSS3だけで問題を解決できたので、今回はidを使っていません。)

さらに余談になりますが、
検索結果のページには、imgタグは1つしかないので
DOM操作したい場合には、getElementsByTagName()でオブジェクトを取得しても良いと思います。

【感想】

  • 中国商標局のサイトの設計が意味わかりません。
  • Bookmarkletってまだ息をしてたのですね。