auのezwebブラウザver7.2対応のイロハ

auは1年ほど前に、ezwebの内臓ブラウザ「Openwave Mobile Browser」のバージョンを6.2から7.2にバージョンアップしている。バージョンアップに伴って、HTML仕様が拡張されたみたいだけど、一方で従来からの動作が変更された部分も・・・。その影響か、ブラウザバージョン7.2端末でWebページにアクセスすると、他の機種とは異なる画面が表示されることがあった。

auのブラウザバージョン7.2端末でハマった、印象深い3つの仕様変更（バグ？）を紹介したい。

auのブラウザバージョン

まず、au携帯のブラウザバージョンは、大きく分けると次のように3種類ある。ここ最近発売される端末でいうと、バージョン7.2が主流で、バージョンが6.2の機種も今年5月に発売されている。現在は、6.2から7.2へ切り替わる過渡期にあたる。

マーキーの無限ループ指定

ブラウザバージョン7.2対応端末で見ると、marqueeタグで書いたマーキーがなんと消えてしまう現象が発生。左がブラウザバージョン7.2端末のG9、右がブラウザバージョン6.2端末のW61Kだ。G9では「マーキー」という文字が表示されていないことが分かる。

HTMLには次のようにmarqueeタグにstyle属性を記述して、無限ループするマーキーを指定していた。

↓↓↓ここから↓↓↓<br />
<marquee style="-wap-marquee-loop:infinite;">
マーキー
</marquee>
↑↑↑ここまで↑↑↑<br />

style属性なしだとちゃんとマーキーが表示されるから、どうやらstyle属性が原因らしい。結局、次のように記述すると無限ループでマーキーが動作するようになった。

<marquee style="display:-wap-marquee;-wap-marquee-loop:infinite;">
マーキー
</marquee>

-wap-marquee-loopプロパティを指定すると、「display: -wap-marquee」 を指定したことになる、っていう仕様だったんだけど、この仕様が変わったのか！？やっぱりデフォルト動作を当てにせず、明示的に書いたほうがよさそう。

PNG画像の転送禁止フラグ

PNGファイルに画像転送禁止フラグを指定しているのに、メール添付などで外部転送できてしまう現象が発生。使用したのは次のPNG画像。

PNGファイルをデータフォルダに保存し、保存した画像のサブメニューを表示したのが下の写真になる。W61K（写真右）では「Eメール添付」や「赤外線送信」がグレーアウトしていることなどから外部転送不可になっているが、G9（写真左）では「Eメール添付」や「赤外線送信」が選択可になっていて、実際に送信ができてしまう（G9で「microSDへ移動」がグレーアウトしているのは、単にmicroSDカードが入っていないため）。

実はこれ、転送禁止フラグの記述が原因だった。転送禁止フラグは、PNGのtEXtチャンクにkddi_copyright=onというデータを設定することで行われるのだが、その際のキーワードはCopyrightにする必要がある。ところが、W61Kなどブラウザバージョン6.2端末では、tEXtチャンクのキーワードがCommentという文字列の場合でも、転送禁止フラグを認識する。

条件をまとめると、次のようになる。

ブラウザバージョン7.2からはtEXtチャンクのキーワードを正しく判定するように修正された影響で、互換性がなくなったようだ。

Multi Comment Editor使用時の注意点

ちなみに、画像コメント編集ツールのMulti Comment Editorを使用して転送禁止フラグを入力するとき、tEXtチャンクのキーワードが"Comment"となることがある。

具体的には、テキストエリアに「kddi_copyright=on」のみを記述して保存すると、tEXtチャンクのキーワードはCommentとなる。

一方、テキストエリアに「[Copyright]（改行）kddi_copyright=on」を記述すると、tEXtチャンクのキーワードはCopyrightとなる。こちらがブラウザバージョン7.2にも対応した、正しい記述方法だ。

水平線の下からレイアウト崩れ

hrタグで指定した水平線より下の部分がレイアウト崩れを起こす現象が発生。「AAAA」の部分は左寄せ表示されるはずだが、左のG9はなぜか中途半端な位置に表示されてしまっている。

HTMLは次のように記述していた。

<div align="center">センタリング</div><hr width="50%" size="1" />
AAAA<br />
BBBB<br />
CCCC<br />

この書き方のどこが悪いのか？？divタグはちゃんと閉じているのに、「AAAA」「BBBB」にインデントがついているような感じだ。試行錯誤を繰り返すこと数十回・・・。次のような書き方で、うまくいくことが分かった。

<div align="center">センタリング</div>
<hr width="50%" size="1" />
AAAA<br />
BBBB<br />
CCCC<br />

なんと、divの終了タグの後に改行を入れるだけ！これだけで直ってしまった。

実は、モバイルブラウザ7.2は改行の扱いがすごく特殊。改行が入っていると画像と画像の間に隙間ができてしまったり、逆に改行を削除すると今回のようにレイアウトが崩れてしまうこともある。

しかもこのレイアウト崩れはSSLページでのみしか、再現しない。非SSLページでは改行が入っていなくても、レイアウト崩れは発生しないのだ。ezwebゲートウェイで自動的に改行を入れるような変換を行っているのだろうか？

頼りになるのは実機

ezwebのブラウザバージョンアップでは、仕様なのかバグなのか、様々な変更が行われる。にもかかわらず、auの公式サイトにも情報がなかったりするので、頼りになるのは実機のみ。auで実機テストを行うときは、最低でもブラウザバージョン6.2と7.2の両方を使用することが必要だ。

（関連記事）

• 3キャリア共通のマーキーの書き方
• 携帯電話のコンテンツ著作権対応のTips
• 携帯サイト開発で実機テストが欠かせない理由とは？