SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

そこが知りたい! Web標準サイトの活かし方

「携帯用ページ」の作り方

そこが知りたい!Web標準サイトの活かし方(6)


3キャリアに対応するためのコツ

 ここからは前方互換と後方互換のどちらの方法を採用するかにかかわらず、単一ページで3キャリアに対応させるための共通のポイントを紹介します。

文字コードはShift_JIS

 携帯用ページの文字コードは、Shift_JISが無難です。UTF-8やEUC-JPなどに対応している携帯端末も多くありますが、EZwebでサポートされている文字コードはShift-JISのみとなっています。

ファイルサイズに注意する

 携帯端末は扱えるページサイズ(キャッシュ容量)に制限があります。第3世代の端末を対象とするなら、ファイルサイズは、文章や画像を含め、1ページ100KB以内を厳守しましょう。古い端末も考慮するなら、30KB以内を目安に抑えるのがベターです。

携帯向けページのファイルサイズの目安
キャリア 世代 ファイルサイズの目安
NTTドコモ mova 10KB以内
FOMA 100KB以内
au by KDDI Aシリーズ 45KB以内
Wシリーズ 130KB以内
ソフトバンクモバイル C型 6KB以内
P型 12~30KB以内
3GC型 300KB以内

画面サイズは横240px以内

 携帯サイトでは、240pxという幅サイズが一つの基準となっています。携帯の端末自体が高解像度に対応していても、携帯ブラウザ使用時には横240ピクセルに合わせる端末が多くなっています。

 なお、スクロールバーが表示された際、実際の画面領域より狭くなる端末があるので注意しましょう。このような端末でスクロールバーが表示されると、幅240ピクセルの画像は自動的に縮小して表示されます。幅240ピクセルで作ってもサイズ的には問題ありませんが、縮小化によって視認性が悪くならないよう配慮が必要です。

文字サイズ

 携帯ブラウザの画面で、1行に収まる文字数は機種ごとに異なります。大、中、小などの文字の大きさの仕様もそれぞれです。詳細は各キャリアの仕様を確認していただくことになりますが、大体の目安としては、標準の文字サイズで1行につき全角10文字(半角で20文字)程度です。1行で表示できる文字サイズを越えると、自動的に折り返して表示されます。

画像フォーマットはGIFおよびJPEG

 対応する画像フォーマットについても、機種ごとに異なりますが、iモードブラウザ1.0ではPNGやBMPをサポートしてません(iモードブラウザ2.0はGIF、JPEG、BMPに対応)。従って、イラスト系はGIF、写真系はJPEGを使用するのが無難です。

携帯サイトで使える絵文字の仕様

 携帯の特徴である絵文字は、キャリアごとに種類や記述の仕方が異なるため、絵文字を含む場合に「静的な単一ページで3キャリアに対応する」ことは難しくなります。互換性については、au by KDDIの端末でiモード用の絵文字を表示できますが、その逆はできませんし、ソフトバンクは他のキャリアと互換性がありません。

携帯キャリア別絵文字の互換性表
絵文字\端末 NTTドコモの端末 au by KDDIの端末 ソフトバンクモバイルの端末
NTTドコモの絵文字 ×
au by KDDIの絵文字 × ×
ソフトバンクモバイルの絵文字 × × ×

 従って、絵文字を含む場合には、NTTドコモとau by KDDI用のページ(NTTドコモを基準に作成)と、ソフトバンクモバイル用のページを用意し、ユーザーエージェントを利用してスクリプトでキャリア別に振り分けるなどの工夫が必要になります。ユーザーエージェントには、ドコモなら「DoCoMo」、au by KDDIなら「UP.Browser」、ソフトバンクなら「J-PHONE」「Vodafone」「SoftBank」という文字列が含まれているので、これらの文字列を取得することで携帯電話のキャリアを判別することができます。

NTTドコモの絵文字

 NTTドコモの絵文字には、基本絵文字と後から追加された拡張絵文字があり、拡張絵文字はiモード対応HTML4.0以降に対応している機種で利用可能となっています。

 絵文字の入力方法は、バイナリコード、Unicodeテキスト、Shift-JISテキスト入力の3種類ありますが、全機種に対応したい場合にはバイナリコード入力が適しています。

NTTドコモの絵文字入力方法
入力形式 対応絵文字 対応機種
バイナリコード 基本絵文字/拡張絵文字 全機種
Unicodeテキスト 基本絵文字/拡張絵文字 iモード対応4.0以降の機種
Shift-JISテキスト 基本絵文字のみ 非公開

 バイナリコードを入力できるエディタが必要になりますが、NTTドコモでは、「i絵文字」という絵文字入力ソフトが用意されているので、これを利用すると良いでしょう。

au by KDDIの絵文字

 au by KDDIの絵文字には、古い機種で対応している「Cタイプ」と、現在の多くの機種で対応している「Dタイプ」の2種類があります。端末によって表示できる絵文字数が異なりますが、古い機種の場合でも実装していない絵文字については、auが用意した「EZサーバ」からダウンロードして表示されるため、Dタイプの絵文字を使用しても問題ありません。

 入力方法は、XHTML、MDML、Shift-JISバイナリコード、Unicodeテキスト入力の4種類あります。

au by KDDIの絵文字入力方法
入力形式 対応絵文字 対応機種
XHTML 図柄タイプC/D 全機種
HDML 図柄タイプC/D 全機種
Shift-JISバイナリコード 図柄タイプC/D 全機種
Unicodeテキスト 図柄タイプC/D 全機種

 XHTMLによるページ制作の場合は次のように記述することで絵文字を挿入することができます。

リスト4 XHTMLによる絵文字挿入タグ
<img localsrc="絵文字番号" />

ソフトバンクモバイルの絵文字

 ソフトバンクモバイルの場合、NTTドコモの基本絵文字や拡張絵文字、au by KDDIの図柄タイプCや図柄タイプDのように、絵文字の区分はなく、1タイプとなっています(SoftBank 4-2 seriesを除く)。

 絵文字の入力方法は、ウェブコード(バイナリコード)とUnicodeの2つですが、Unicodeでの入力は、S!アプリ(Yahoo!ケータイ対応携帯電話の一部で実行できるJavaアプリケーションおよびサービス)で絵文字を表示させたい場合に使用します。

 ドコモのような絵文字ソフトは提供されていないので、MOBILE CREATIONで公開さている絵文字一覧から使いたい絵文字のコードをコピーして利用します。

まとめ

 以上、3大キャリア対応の携帯ページの作り方として、前方互換、後方互換の2つの方法を紹介しました。

 PC用のWebブラウザがCSSを正しく解釈することができるようになるまで、テーブルとCSSの両方を使ったハイブリッドレイアウトを採用する時期があったように、携帯サイト市場も、今まさにそのような過渡期にあるように思います。実際、スペーサーGIFの使用など、PCサイトでは使われなくなった手法が携帯サイトで使われていることも少なくありません。iモードブラウザ2.0が登場して1年も経過していませんから、iモードブラウザ1.0の仕様に合わせて、仕方なく後方互換で制作しているケースもあるでしょう。反対に、iモードブラウザ2.0や未来の端末に合わせて、前方互換で制作するケースもこれからは増えていくでしょう。過渡期にある今、そのどちらにも対応できるよう、2つの方法を紹介してみました。

 次回は、多様なデバイス向けのページ制作その3として、Nintendo DSやPSPなどの携帯ゲーム機用ページの作り方を扱いたいと思います。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
そこが知りたい! Web標準サイトの活かし方連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/5066 2011/07/26 09:48

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー