au仕様を生かした携帯サイト作成

DoCoMo仕様を生かした携帯サイト、Softbank仕様を生かした携帯サイトを作成してきました。

「携帯サイト制作って何が大変なの？」シリーズ第三弾。

最後はauです。

au仕様に合わせて携帯サイトを作成し、それをDoCoMo、Softbank機種でみるとどうなるのか？予想しながら読んでみて下さい。

au仕様XHTMLの一般的な特徴をあげます。

前回のSoftbankサイトの土台を生かして作成します。

XHTMLのタグは、テロップ脇の白線を消す為にtableを使いました。（参考にした社内の先輩のサイト）
auはCSSでfloatプロパティが使えないので、左右に分けた箇所は画像をalign:left;で指定し、画像のサイズもブラウザに合わせて幅90px指定をします。

しかし、alignでテキストを回り込みさせると絵文字の横に変な改行が入るという問題が発生しました。これは前の記事「携帯サイト制作って何が大変なの？」の最後でも同じように発生した現象で、絵文字の記載方法を変えて解決します。

例）ハートの絵文字の記載方法（参考 EZfactry-絵文字）

XHTML (HTML) 記述における絵文字の挿入

<img localsrc="51">

au絵文字用Shift-JISで番号指定した文字参照

&#x F7B2;

XHTML記述で書いていたので、文字参照に変更しました。

そして最後に、auはブラウザの仕様上以下を記載した方が良いみたいです。キャッシュが溜まってしまい最新情報がサーバからうまく取得出来なくなってしまうようです。

<meta http-equiv="cache-control" content="no-cache" />

完成したauサイトはこちらです。

au K002

テロップの隙間もなくなり、画像とテキストの配置も無事に完了しました。

logo部分の画像は前回のSoftbankサイトで作成した幅480pxの画像を使いましたが、ブラウザは自動で幅を調整してくれるようで画像領域が幅240pxのau端末でも綺麗にみることが出来ました。

回り込み時の絵文字問題も、一部変な改行がありますが無事解決?しました。

前回の結果から予想すると、まずDoCoMoはスタイルが適用されていなさそうです。絵文字は文字化けしそうな感じですが、絵文字を抜かせば外部CSS対応のSoftbankでは綺麗に見えるのでは？と、予想できます。

実際に見てみましょう。

DoCoMo N905i

auとDoCoMoで異なる点を記載します。

Softbank 920P

auとSoftbankで異なる点を記載します。

DoCoMo

外部CSSが適用されない。

<img align=”left”>が適用されない。

Softbank

画像領域の違いで見え方が変わる。

auとSoftbankはどちらも外部CSSを使えるという共通点があるのですが、機種によって画像領域の違いがある為見え方が変わってきてしまいます。肝心の商品の写真が小さかったら売れるものも売れない気がします。

携帯で案外重要なのは絵文字かと思うのですが、どのキャリア間も仕様がバラバラで統一感が全くありません。これでは、携帯サイトを使う人に伝えたいことが伝わらない可能性があります。

携帯サイト作成はとても大変だと感じました。

最後に３キャリアの仕様を生かした携帯サイトをつくり全て比較した感想ですが、「とにかく大変だった」の一言です。携帯サイトの開設率が案外低い理由がなんだかわかった気がします。

携帯電話は便利で使いやすくPCより安価なので、これからのインターネットをより楽しくしてくれるツールではないかと思っています。この苦労を忘れずに、携帯コンテンツ変換エンジンである「ラウンドアバウト」という製品を通して、世の中にもっと楽しく便利なインターネットサービスを増やせたら良いなと思います。