サイブリッジラボでタグ「モバイル」が付けられている記事一覧

XHTML+CSSでの携帯サイト構築～3キャリア対応の落とし穴～Mobile

かのう | 2010年8月10日 15:36

かのうです。
サイブリッジは今夏休み！でも私は休みをずらして9月末の祝日と合せて大型連休にしうと企んでいます。今のところまだ予定はないんですけどね笑

そういえば「iモードブラウザ2.0」のお話

2009年5月以降に発売開始されたdocomo端末に「iモードブラウザ2.0」が搭載されていますよね。
デザイナー向けの新しい機能は下記ですが、まだまだ完全に普及したとは言えないので、結局のところ「XHTML+CSS」での携帯サイト構築が必要ですね。

・外部スタイルシートを含むCSS対応
・サイズ制限が500Kバイトに
・Shift_JIS、UTF-8の文字コードが利用可能
・JavaScript対応（Ajax含む）
・ページ埋め込みFlash動画（FLV）対応
・クッキー対応

▼docomo公式サイト
iモードブラウザについて

XHTML+CSSでの3キャリア対応の落とし穴

なんで普及もしばらく時間がかかりそうなので自分のメモ的に、今回は改めて携帯サイトを作る上で基本的なお話をまとめたいと思います。
今回はなるべくキャリア毎の差をなくして「iモードブラウザ1.0」でも表示したいデザインにコーディングしようとしたとき、たいがいぶち当たる落とし穴を中心にご紹介します！

画像がゆがむ

CSSとは関係ないですが幅240pxで画像を作成して、auで見たら画像がゆがんでる...それはスクロールバーの分だけ表示される幅が縮小しているからです。
どうしてもキレイに表示したいときは画像を小さくしてセンター揃えでしょうか。

その場合私は232pxで指定していますが、その前後でも問題ないかと思います。
（横228ピクセル以内に抑えてくださいっていう記事も見たことありますが...）

<div style="text-align:center;">
<img src="img/keyv.gif" width="232" height="180" border="0" />
</div>

hrタグ

hrタグは結構くせがあります。docomoではXHTMLの属性が非対応ですし、auとSoftbankでも仕様が異なります。

下記はdocomoだと若干多めにマージンをとられますがhrで指定するには一番最適です。

<hr size="1" style="width:100%;height:1px; margin:0px; padding:0; color:blue; background:blue; border:1px solid blue;" />

それでもやっぱり...という場合はスペーサーGIFを使って1pxのボーダーを実現しましょう。

<div style="text-align:center; margin:0; padding:0; background:blue;"> <img src="img/spacer.gif" height="1" width="1" border="0" /> </div>

センタリング

styleでの指定だけでもいいのですが、より古い機種に対応させるにはalignも念のため指定しておいた方がベターです。

<div style="text-align:center;" align="center">

アンカーリンク

docomoはname属性に対応していないため、アンカーリンクの挿入は下記のようにしましょう。

<a name="top" id="top"></a>

画像の回り込み

画像にalign属性を使う場合と、styleにfloatを使う方法があります。
alingだとdocomoが非対応、floatはauが非対応になるので両方記述する必要があります。

また、回り込みの解除は解除したい箇所にブロック要素のタグがあったらそこにclearを記述します。（<br clear="all" />で解除できるのは、auとSoftbankのみなので注意）

<img src="img/icon.gif" width="60" height="60" style="float:left; margin:3px;" align="left" border="0" alt="アイコン" />
<a href="#">タイトル</a><br />
説明説明説明説明説明説明説
<div style="clear:both; text-align:center; margin:0; padding:0; background:blue;">
<img src="img/spacer.gif" height="1" width="100%" border="0" />
</div>

tableタグで2カラム表示

回り込みじゃなくて2カラムにしたい場合などはtableタグを使用しましょう。ほとんどの機種でtableタグを使用しても問題ないですが、かなり古い機種まで考慮したい場合は避けてください。

docomoではtableの外にフォントサイズを指定していた場合はデフォルトのサイズに戻るので、めんどうですがspanでテキストを囲んで指定してください。
tableタグやth,tdタグに指定しても効きません。

<table cellspacing="0" cellpadding="0">
<tr>
<th align="right">
<span style="font-size:xx-small;"><a href="#">タイトル</a>
：</span> </th>
<td>
<span style="font-size:xx-small;">説明説明説明説明説明説明説</span>
</td>
</tr>
</table>

フォントサイズ

フォントサイズを同じxx-smallで指定してもキャリヤや端末によって表示はそれぞれ；；
docomoは下記のように全端末共通のようです。

・大 → xx-large,x-large
・中 → large,medium
・小 → small,x-small,xx-small

「大」は大きすぎるので使わないとすると、他のキャリアの端末も考慮してベースは「x-small」で目立たせたいときは「medium」を使うのがいいんだと思うんですが、自分の携帯（auのW61P）だと「xx-small」以外はどれも太字に見えるくらいの大きさになってしまいます。。ベースを「xx-small」にすると端末によって極小になるので、デザインを取るか見やすさをとるか。。

auとSoftbankでは外部CSSが使えるためclassを指定して、ハック的にサイズを調整することも可能です。

auでのセレクトメニュー

プルダウン（セレクトメニュー）が外側のdivでフォントサイズを指定していてもデフォルトのサイズに戻ってしまい、変な改行をされることがあります。その場合はselectタグにサイズをしていしましょう。

<form action="" method="GET">
<select name="url" style="font-size:xx-small;">
<option value="りんご">りんご</option>
<option value="みかん">みかん</option>
</select>
<input type="submit" style="font-size:xx-small;" size="1" value="絞込">
</form>

マージン

docomoの場合はdivにmarginを指定しても対応していませんが、imgタグには対応しています。スペーサーGIFなどの画像にmarginを指定するかvspace,hspaceなどを活用して調整しましょう。

ちなみに、画像の周りに枠をつけたい場合、docomoはborder属性、borderプロパティともに対応していません。

docomoの絵文字をデフォルトにする

言わずとして知れているdocomoの絵文字はcolorで色の指定ができる件なのですが、bodyなどにフォントカラーの指定をしている時はかなりやっかいです。

bodyに指定せずにこんな感じにしてもいいんですが...ソースコードが多くなるとカオス状態です（[！]が絵文字だとします）

<body>
<span style="color:#48251A;">ベースは茶色だけど<span style="color:#F90;">こんな</span>や<span style="color:#96C;">こんな</span></span>[！]<span style="color:#48251A;"><span style="color:#F69;">こんな</span>色も使いたい</span>[！][！]
</body>

そしたら絵文字の方にカラー指定をしちゃいましょう。auとSoftbankは色が変わらないので大丈夫です。すごい簡略化されたわけではないけど、ベースの色を気にせずにそれ以外の色を着色したい部分だけ気をつければOKです。

<body style="color:#48251A;">
ベースは茶色だけど<span style="color:#F90;">こんな</span>や<span style="color:#96C;">こんな</span><span style="color:red;">[！]</span><span style="color:#F69;">こんな</span>色も使いたい<span style="color:red;">[！][！]</span>
</body>

▼docomo公式サイト
絵文字カラー一覧

まだまだあるっちゃあるのですが、、今日はココまで！！
では、また(・´з`・)

| 個別ページ

モバイルのサイト制作に役立つツール集Mobile

かのう | 2009年9月 1日 17:08

かのうです。

昨日は台風で雨がすごかったですねー。
打って変わって本日は晴天です！ピクニックに行きたいなぁ。

さて、本日の投稿はモバイルのサイト制作に役立つツールです。
モバイルのサイト制作で一番ネックになるのが検証作業ですよね。キャリア毎やログイン・非ログイン状態での検証など色々なケースを考えてデバックやデザインチェックを行います。

そこで便利なのがシミュレーターです。PCで実機と同じような検証が可能になります。もちろん最終チェックは実機検証がマストですが、デザインチェックであれば十分に活用できるので非常に便利です。（ご紹介するのはすべて無料です＾＾）

今回のようなまとめサイトは多くありますが、リンク切れがあったりと複数の記事を見なければならないので、最新の情報を投稿します。私のオススメはFrefoxアドオンの「FireMobileSimulator 」です！

各キャリアが提供するシミュレーター

【docomo】iモードHTMLシミュレータ

900iシリーズ以前のiモード対応HTMLおよびFlashRで構成されたiモード対応ページを参照、表示することができます。

【docomo】iモードHTMLシミュレータII

901iシリーズ以降のiモード対応HTMLとFlashR、デコメールテンプレート、901iSシリーズ以降のPDF、902iシリーズ以降のトルカ、906iシリーズ以降のデコメアニメ、2009年度上期モデルより対応したiモードブラウザ2.0（およびそれ以降）の対応コンテンツを表示するツールです。

【au】Openwave SDK6.2K

携帯端末向けコンテンツの動作テストを行なうためのWindows用ツールです。実際に携帯電話に載っている端末と同じコードを用いており、非常に正確なシミュレーションが可能です。XHTMLサンプルコードや様々なデバッグツールも付属し、皆様のコンテンツ製作・デバッグをサポートします。

現在公開停止中とのことですが、下記からダウンロードできます。右クリックで保存して下さい。
Openwave SDK 6.2K

【Softbank】ウェブコンテンツヴューア

ソフトバンク携帯電話向けウェブコンテンツの作成および編集に用いるアプリケーションです。※まずは会員登録が必要です。

Firefoxのアドオン

FireMobileSimulator

上記で紹介した各キャリアのツールをダウンロードしなくても、このアドオンだけでキャリア毎の検証が可能です。詳細な設定ができるので非常に便利です。利用方法はこちらをご覧ください。

主な機能
・ [全キャリア]UID送信
・ [DoCoMo]UTN送信
・ [DoCoMo]iモードID送信
・ [全キャリア]絵文字表示
・ [DoCoMo/Au]位置情報送信機能
・ [SoftBank]端末製造番号送信
・ [全キャリア]User-Agent偽装
・ [全キャリア]各種HTTPリクエストヘッダのシミュレート
・端末情報の追加・編集・削除機能
・ Content-TypeのWMLとXHTMLをHTMLに強制変換(FirefoxのXML整形式チェックによる表示エラーを回避するため）
・ [全キャリア]アクセスキーへの対応

今後は下記のような拡張が予定されてるとのことで、楽しみです
・着メロ・着うたなど各種コンテンツに対応
・HDML表示
・WML表示(Ver0.1.0にて一部実装済)
・各端末のCookie対応/非対応をシミュレート(Ver0.1.0にて一部実装済)

UIDについて
UID（加入者識別子）についてはあまり詳しく書いてないようなので補足すると、例えば同じdocomo端末で会員登録している端末としていない端末があるとして、同じキャリアでも別端末で検証したい場合があると思います。そこでオプションのID情報ウィンドウで検証したい端末のUIDを指定すれば、会員と非会員の両端末で検証が可能になります。

端末のUIDは確認くん for モバイルで簡単に確認できます。