アシアルの中の人が技術と思いのたけをつづるブログ

3キャリア対応ケータイXHTMLのTIPS 8つ

タグ [　 Tech　 携帯　 XHTML　 ]
最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。
キャリアごとにテンプレートを分けて記述するのは手間なので、基本的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。
なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。


■文字コード

UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。

※上記で特定の文字のひとつとしてあげました三点リーダーですが、UTF-8の問題ではなく文字実体参照の「…」を表示できる機種と表示できない機種が存在することによる問題でした。(2008年4月16日追記)


■CSS

auやSoftBankは外部ファイルで定義できるのですが、DoCoMoのみ

作ろうiモード：iモード対応XHTMLのバージョン | サービス・機能 | NTTドコモ
  1. ・インラインのみに対応しています。

という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。

どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。


■画像形式

GIFとJPEGであれば大丈夫なようです。

・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ
・KDDI au: 技術情報 > 機種別情報一覧
・ソフトバンク 端末情報 Part1 ～ ソフトバンク 端末情報 Part4
・Mobile Creation 対応フォーマット一覧

ただ、SoftBankの場合、

ソフトバンク 端末情報
  1. ソフトバンク3G携帯電話では、gif形式を表示することができます。(V801SH、V801SAを除く)

と気になる記述があったりするのですが、この2機種は、

・V801SHをご利用のお客さまへ
・V-NM701/V801SAをご利用のお客さまへ重要なお知らせ

によると利用不可になる予定ですので、とりあえず気にしない方向でいーかなーと……。ユーザーの方がいらっしゃいましたら、ゴメンなさい。m(_ _)m


■ブラウザの解像度

QVGA液晶というくらいなので、横240ピクセルはあると思っていたら、ブラウザの縦スクロールバーの分などで削られて、意外とそこまで使えなかったりします。

・作ろうiモードコンテンツ：画面領域 | サービス・機能 | NTTドコモ
・KDDI au: 技術情報 > 機種別情報一覧
・ソフトバンク 端末情報 Part1 ～ ソフトバンク 端末情報 Part4
・Mobile Creation 画面領域情報一覧

自動縮小させたくない場合は、横228ピクセル以内に抑えておいたほうがいいようです。


■フォントのサイズ

DoCoMoはiモード対応HTMLとiモード対応XHTML比較表に書かれているように、

  1. 小 … xx-small～small
  2. 中 … medium
  3. 大 … large～xx-large

と統一されているので楽なのですが、auとSoftBankは端末によって挙動が全然違います。

特にauではsmallやx-smallでは変化せず、xx-smallにしてやっと一段階小さくなる端末があったりと、なかなか曲者です。そのため、

  1. <span style="font-size:12px">フォントサイズ小</span>

などのようにauはピクセルで指定するのが無難なようです。

こういった状況のため、フォントサイズに関してはキャリアを判別して指定方法を変えるしかないようです。

また、auはdivタグなどでフォームを囲むような形でフォントサイズを小さくすると、セレクトメニューの内容が変な位置で改行されてしまいます。
有名なケータイサイトでもよく改行されているのを見かけるため、そーゆーものなのかなと思っていたのですが、::Kellogg:: | auの馬鹿っ！の記事を参考に、個別にサイズを指定するようにしたら、無事改行されなくなり、文字も小さくなりました。


■入力文字制御

テキストフォームで入力文字の指定を行う場合、いろいろ調べてみたところ、おまじないも含めて、

全角かなモード
  1. <input type="text" name="hoge" istyle="1" format="*M" mode="hiragana" style="-wap-input-format:&quot;*&lt;ja:h&gt;&quot;;-wap-input-format:*M;" />

半角カナモード(auは全角かな)
  1. <input type="text" name="hoge" istyle="2" format="*M" mode="hankakukana" style="-wap-input-format:&quot;*&lt;ja:hk&gt;&quot;;-wap-input-format:*M;" />

半角英字モード
  1. <input type="text" name="hoge" istyle="3" format="*m" mode="alphabet" style="-wap-input-format:&quot;*&lt;ja:en&gt;&quot;;-wap-input-format:*m;" />

半角数字モード
  1. <input type="text" name="hoge" istyle="4" format="*N" mode="numeric" style="-wap-input-format:&quot;*&lt;ja:n&gt;&quot;;-wap-input-format:*N;" />

のように記述するといいようです。
なお、上記の「;;」は書き間違いではなく、このようにセミコロンを2つ記述しないと正しく動作しないので、注意してください。

※機種によって、初期入力モードが変更されるだけのものと、入力モードが固定されて変更できなくなるものがあります。変更禁止になる機種の場合、全角かなモードでカタカナが入力できなかったり、半角英字モードで数字が入力できなかったりしますので、指定する際はご注意ください。(2008年8月14日追記)


■回り込み

画像に文字を回り込ませたい場合はfloatでいいはずなのですが、auは意図した動作をしなかったので、align属性も追加する必要があります。

  1. <img src="hoge.gif" align="left" style="float:left" />


■mailto

SoftBankはUTF-8のままURLエンコードして大丈夫だったのですが、DoCoMoとauはURLエンコード前にShift_JISに変換しておかないと、題名などの文字が化けてしまうようです。


以上、会社にあるケータイでの動作結果をもとにしていますので、何か間違っていることなどありましたら、ぜひぜひお知らせくださいませ。

コメント

    • まさに今、携帯サイトの動作検証で苦しんでます。。。

      http://d.hatena.ne.jp/a_suenami/20080413
      http://d.hatena.ne.jp/a_suenami/20080414

      auではSSL接続すると謎の文字化けをするので、文字コードをShift_JISにしないといけません。もっとも、Shift_JISにすると通常（80番）接続で文字化けします（＞＜）

      しょうがないから、全部httpsにリライトすることにしました。
    • by a_suenami | 2008年04月15日 10:09
    • 情報ありがとうございます！
      今回SSLは使ってなかったので知らなかったのですが、そうなんですかー。

      ただ、Shift_JISなのに非SSL接続で文字化けするのは、サーバの設定かプログラムのほうに原因があるように思われますね。
    • by 高橋崇 | 2008年04月15日 13:03
    • 文字コードはUTF-8よりShift_JISで統一した方が良いと思ったのですが、何か問題ありますでしょうか。
    • by gi-chi | 2008年04月16日 02:42
    • Shift_JISで統一して特に問題はないと思われます。
      今回ベースがUTF-8になっているのは、PHP5+PostgreSQLのUTF-8環境で開発を始めて、途中で問題が発覚したためですので……。
    • by 高橋崇 | 2008年04月16日 13:57
    • こんばんは。始めましてです＾＾
      携帯サイトを作っているのですが初めてなもので
      情報を調べていたところたどりつきました。

      現在はPEARのUserAgent_Mobileを使い
      UserAgentを判別しDOCOMO,AU,SOFTBANKを
      ifまたはelseifで推薦されるDOCTYPEとContent-Typeが
      記述されている別ファイルをrequireで読み込み表示
      させています。文字コードはShift_Jisで統一です。

      全てのキャリアで共通のソースで統一できると管理も
      楽になるかと思うのですがやはり現状では難しいもの
      でしょうか？

      DOCOMOの場合CSS(インライン)を有効にする為には
      application/xhtml+xmlをいれなければならないなど
      それぞれ異なるようなので・・・
    • by ロッジ | 2008年04月18日 00:08
    • がるでっす。最近携帯３キャリア公式やってたので同じく四苦八苦しちょりやすｗ
      こゆのをまとめられるような「なにか」があるといいなぁとかおもっちゃぁいるのですが…。
      XHTML的には、DoCoMoが飛びぬけて「変」な仕様ですからねぇ(苦笑

      ちなみに。絵文字処理周りは、MagicWeaponのほうで今色々とクラスが出来上がりつつありますｗ
    • by がる | 2008年04月18日 11:18
    • ＞ロッジさま
      はじめましてー。
      静的なXHTMLのみで統一するのは難しいと思いますが、テンプレートを独自タグや独自マークアップ言語などで記述しておき、出力時に各キャリアにあわせて変換表示することで、単一のソースで管理することはできると思います。

      また、ke-tai.orgさまの記事にて紹介されている「mod_chxj」などのような変換ゲートウェイを使う方法もあると思います。
      ・http://ke-tai.org/blog/2008/04/15/mod_chxj_up/


      ＞がる先生
      コメントありがとうございますー。
      ほんとは、そういった「なにか」が不要な世の中になるといいんですが、なかなか難しいですね……。

      絵文字処理のほうは、弊社亀本が作成した
      ・http://blog.asial.co.jp/330
      ・http://blog.asial.co.jp/351
      がありましたので、私自身は苦労せずに済みました(^^;
    • by 高橋崇 | 2008年04月18日 14:11
    • お返事ありがとうございます。
      静的なxhtmlではやはり難しいものなのですね・・・
      とりあえず動作は正常なのですが携帯サイトは
      始めたばかりで絵文字の変換などを含め本当に
      これでいいものか常に悩んでしまいます。

      一刻も早く全キャリアが統一してくれることを願うしか
      ないようですね(汗

      差支えがなければで構いませんが参考までに
      ソースを公開して頂けますと幸いです。
    • by ロッジ | 2008年04月19日 12:32
    • 私が個人的に作ったものであれば、いくらでも公開できますが、業務で開発したものですので、私の一存では公開できません。
      お役に立てず、申し訳ございません。
    • by 高橋崇 | 2008年04月21日 13:46
    • XHTMLでの入力制御に困っていたので助かりました。ありがとうございました。
    • by 匿名 | 2008年07月28日 09:28
    • お役に立てたようで何よりです。(^-^)
    • by 高橋崇 | 2008年07月28日 14:01
    • <span style="font-size:12px">フォントサイズ小</span>
      は au の一部機種では、極小フォントサイズになってしまうようです。
    • by とーてんぽーる | 2008年08月20日 18:53
    • お知らせありがとうございます。

      仰るとおり、機種によって搭載しているフォントのサイズが異なるため、12pxが「小」や「極小」のどれになるかは、その機種次第になります。

      auの場合、smallやlargeなどのキーワード指定よりは、ピクセル数による数値指定のほうが意図したサイズになりやすいくらいに捉えていただければと思います。

      きちんと対応するには、機種ごとにピクセル数のマッピングテーブルを作るしかないかも知れませんね……。
    • by 高橋崇 | 2008年08月21日 10:36
    • コメントをいただき、ありがとうございます。
      「標準よりひとつ小さいフォントで表示したい」という単純なことが、３キャリア対応というだけで難物になってしまうのは、困ったものですね。

      私が試した範囲でも、機種によって効く書き方、効かない書き方（ポイント、キーワード、パーセント）があって、どの機種でも効く記述が見つからずに、苦戦していますｗ
    • by とーてんぽーる | 2008年08月21日 13:34
    • 1キャリアですら難物ですもんね……。
      ほんと、こんな苦労をせずに済むようになってほしいものです(^^;
    • by 高橋崇 | 2008年08月21日 14:31
    • すみません。リンク先が移動してしまっているので、修正してもらえると助かります！

      ソフトバンク 端末情報 ＝＝＞http://creation.mb.softbank.jp/terminal/?lup=y&cat=display
    • by lily | 2008年09月09日 18:49
    • お知らせありがとうございます！

      ソフトバンクの以前の端末情報ページに対応するMobile Creationの各ページへのリンクを追加いたしました。

      こちらも助かりましたー。m(_ _)m
    • by 高橋崇 | 2008年09月09日 20:05

トラックバック

トラックバックURI :

最近の記事