to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

XHTML対応 x-Servlet(その3)

はじめに

こんにちは。
3/10 リリース予定の x-Servlet Ver2.8(以下、愛着を込めて「クロス」)の開発もなんとか終了しホッとしているフレックスファーム技術チームの丹治です。 さて、今回はVer2.8でサポート可能となった「iモード対応XHTML」でのコンテンツ作成にチャレンジしてみました。その際にちょっと気付いたポイントをレポートします。 作成にあたっては「ページデザインは3キャリアの3G端末完全互換!」という条件で作成したいと思います。

ポイントその1:記述は「iモード対応XHTML」で

x-Servlet 2.8では「iモード対応XHTML」で作成したページを変換元とすることとしています。
ですので記述仕様については domoco提供の「iモード対応HTMLとiモード対応XHTML比較表」を参照してください。

ポイントその2:擬似クラスの指定

iモード対応XHTMLでは<style>にはリンクの擬似クラスのみを指定できます。 記述方法は下記のように行います。

<style type="text/css">
 <![CDATA[
    a:link { color:blue;} 
    a:focus { color:yellow;}
    a:visited { color:red;}
 ]]>
 </style>
 

ポイント3:フォントサイズの指定

iモード対応XHTMLではフォントサイズは3段階しか表現できません。なので下記の絶対サイズで指定する方法がわかりやすいと思います。

指定値 表示されるサイズ
xx-small
s-small
small
medium
large
x-large
xx-large

そこで、「<h1>~<h6>で指定した方が6段階で表現できてイイかも!」と思ったのですが、残念ながらこちらも3段階しか表現されませんでした。(TT)

タグ 表示されるサイズ
h6
h5
h4
h3
h2
h1

ですので、基本的には3段階でデザインし、docomo以外での表示を考慮してオプション的に xx-small などを指定しておくことよいのではないでしょうか。

 

ポイント4:画像のサイズは height, width 属性で

docomoのiモード対応XHTMLでは<img>に対してCSSプロパティの width, heightを指定することはできません。 ですが属性として指定することが可能となっています。

例)
× <img src="../img/ranking.jpg" style="width:45%;"/>
○ <img src="../img/ranking.jpg" width="45%"/>

 

 

ポイント5:docomoの対応表にない属性は無効

docomoのブラウザにおいてはhttpヘッダのContent-Typeが"application/xhtml+xml"の場合にXHTMLとして表示されます。
当初、前述の「ポイント4」のようにCHTMLで使用できる属性も問題なく使えるものと思っていたのですが、どうやら「iモード対応HTMLとiモード対応XHTML比較表」 に定義されていない属性は使用できないようです。

例)
× <div align="right">
○ <div style="text-align:right;">

 

 

ポイント6:画像サイズは "%" よりも "frameRatio" で指定

今回の目標は「ページデザインは3キャリアの3G端末完全互換!」なので、画像サイズをパーセント指定します。
この指定はもちろんディスプレイに対する画像の表示領域の割合を指定するものなので、端末の画面サイズによってレイアウトが変わってしまうことを回避できます。

ですが、画像の品質を保ちつつ普通に<img>の属性として"%"を指定すると、画面サイズの小さな端末では大きい画像を小さく表示することになるので、端末のキャッシュサイズをムダに消費することになってしまいます。

その点、クロスでは<img>の拡張属性として"frameRatio"というものが用意されており、画像変換における変換結果サイズを端末の画面サイズの割合でパーセント指定することが可能です。

例)
△ <img src="../img/ranking.jpg" width="45%"/>
○ <img src="../img/ranking.jpg" frameRatio="45"/>

 

 

ポイント7:画像に文字を回り込ませる時はmarginを指定したほうがキレイ

XHTMLでページを作成すると、よく画像に文字を回りこませますが、その場合は画像に margin を指定した方が文字が読みやすくなりキレイです。

marginなし

<img src="../img/screenshot_foma_s.png" style="float:left;"/>

 

marginあり

<img src="../img/screenshot_foma_s.png" style="margin-top:10px; margin-right:8px; margin-bottom:5px; margin-left:5px; float:left;"/>

 

ポイント8:auでは回り込ませる文字にブロック要素は指定できない

auのブラウザでは画像に回り込ませる文字にブロック要素を指定してしまうと、自動的に画像の align がクリアされてしまうため指定できません。

ブロック要素<div>を使用

 <img src="../img/ranking.jpg" style="float:left;" width="45%"/>
 <div style="color:#222244;">
   従来の変換では端末を装ったクローラから~
 </div>

 

インライン要素<span>を使用

 <img src="../img/ranking.jpg" style="float:left;" width="45%"/>
 <span style="color:#222244;">
   従来の変換では端末を装ったクローラから~
 </span>

 

ポイント9:auの<p>は要注意

一般的に<p>で囲むと上下に間隔が表示されますが、auのみ間隔が表示されません。
また、<p>内にブロック要素を定義すると不思議なことに下に2行分の間隔が表示されてしまいます・・・
KCP+、それ以前の端末双方で同様の表示結果となりました。なので文章は<br/>でレイアウトした方がよいでしょう。

<p>を並べて指定。上下に間隔が表示されない

 p外
 <p>
   p内その1
 </p>
 <p>
   p内その2
 </p>
 p外

 

<p>内に<div>を指定。下に2行分改行されてしまう

 p外
 <p>
 <div>
   p内その1
 </div>
 </p>
 <p>
   p内その2
 </p>
 p外

 

ポイント10:<hr>はsolidを指定すると見た目が揃う

<hr>のCSSプロパティ"border-style"について、何も指定しないとdocomoの場合、値に"inset"を指定したように内側全体が窪んで表示されます。 ですが、auとSoftBankの場合は"solid"を指定したように実線で表示されます。 なので"solid"を指定しておくことで3キャリア間で見た目を揃えることが可能です。

ちなみにiモードXHTMLの仕様では"solid"のみが使用可能です。

 

完成!

これで「ページデザインは3キャリアの3G端末完全互換!」のページが完成しました。
これをクロスに通すことで全キャリア、全世代の端末(※)に向けてページを公開することが可能となります。
(※旧端末ではキャリア仕様等により多少デザインに差は出てしまいます。)

今回作成したページは携帯版フレックスファームHPのクロス2.8の紹介ページとして公開してありますので、ご興味のある方は覗いてみてください。

http://mobile.flexfirm.jp/product/x28/

また、『x-Servlet 2.8』についてもっと詳しく知りたくなった方はコチラの紹介ページをご覧ください。
それでは、今後とも“クロス”をよろしくお願いします!

このエントリーをはてなブックマークに追加