Home→Mobil

携帯向けホームページの作り方

PCと携帯の違い/携帯共通ホームページを作るにあたって

PCと携帯の違い

ここでは、携帯向けホームページの作り方を簡単にご紹介します。そして、PCのホームページの基本がわかる方のみご覧下さい(；´∀｀)そして、Vodafoneはソフトバンクに変わりましたが、Vodafone時代の情報しかありません（土下座）すみません。docomoとauは持ったことあるんですが、Vodafoneはまだ未経験なんです(*ﾉ∀ﾉ)そしてそして、携帯向けホームページ製作の情報は日々変化してます。もし、携帯向けホームページを作りたいなら、一度3キャリアのホームページにある、技術情報を見てください。そこに対応画像形式や原語、ファイルサイズなどが全て書いてあります。

さて、PCと携帯の違いですが、いくつかあるので順に説明します。

ファイルサイズの制限

これが一番大きなところですな。後で詳しく説明しますが、携帯向けホームページでは1ページ当りのファイルサイズを画像も含めて6〜12Kbytes程に収めなければなりません。足りないと思われる方も多いと思いますが、試しに5KBの文章を書いて携帯で表示させてみましょう。携帯の小さい画面から見ればこれでもかなりの情報量だと感じるはずです（*ﾟдﾟ)あらビックリ。

スタイルシート関連

携帯向けホームページでは、一切のスタイルシートが使えません(#ﾟДﾟ)ゴルァ
もともとスタイルシートとは細かな装飾方法をアレンジするためのものなので、携帯の小さな画面でこれを使う理由は特に無いかららしいのです。

JavaScript

これも一切使えません。今までJavaScriptでがっつりページを書いてきた人にとっては少々物足りないかもしれませんが、我慢するしかありませぬ。

クッキー、セッション

クッキーはVodafoneの比較的新しい機種なら使えるようです。i-mode、ez-webでは技術情報でクッキーについて触れていないので不明ですが、使えないと思った方がいいでしょう。

メーカーによる違い

PC向けホームページでも、ブラウザによって動作やレイアウトが異なるといった事はありましたが携帯向けホームページにおいてもその傾向は無くなりません。各携帯メーカーによって様々な規格の違いが存在します。現在、i-mode / Vodafone / ez-web という3種の規格があります。 しかし、メーカーによって画面を作り替えたりするのはさすがに面倒です。共通の作りにする事は比較的簡単なので、そうする事をオススメします(・∀・)ﾉ

携帯共通ホームページを作るにあたって

まず最初にとても重要なことを。
携帯版のファイルはPC版と完全に分けましょう。携帯向けホームページとPCのホームページを共通のファイルで済まそうとするのはかなり無理があります。

文字コードはShift_JISにする

まずこれを忘れないようにしましょう。i-mode、EZwebは技術資料に「Shift_JISのみ対応」と記されていますが実際には他の文字コードでも表示できる場合もあるようです。Vodafoneでは EUC-JP / ISO2022-JP / UTF-8(3GC端末のみ) に対応しています。そして、METAタグは必ず入れるようにします。ファイルサイズが勿体無いと思うかもしれませんが、これを書かないで文字化けを起こしてしまったら元も子もありません。
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">

使用できるタグ

基本的なタグは大体使えるのであまり気にしなくていいはずです。ただ、使える属性は限られています。

画像について

これが少々厄介です。というのも、全機種で共通して使えるフォーマットが無いからです。

• i-mode
  全ての機種で対応しているのがGIFです。2003年以降発売の機種では JPEGも使えます。
• Vodafone
  全ての機種で対応しているのがPNG/JPEGです。3GC端末(2005年以降発売)ではGIFも使えます。
• EZweb
  全ての機種で対応しているのがPNGです。2001年後半以降発売の機種では JPEGに、2003年以降発売の機種ではGIFにも対応しています。

以上を踏まえると、JPEGならば2003年以降発売のほぼ全機種で使うことが出来ます。GIFはVodafoneの対応が若干遅いのですが、他の2メーカーなら2003年以降で対応しています。PNGはi-modeが対応していないので止めた方がいいでしょう。

画面サイズ

これは機種によって様々ですが、とりあえず横幅20(全角10文字)で作っておけば大体の機種には対応できそうです。縦幅は8〜10くらいが一般的でしょう。

ファイルサイズ

初めにも少し紹介しましたが、これも機種により様々です。

• i-mode
  初期の機種は全体で5K。FOMAでは30K(全体では100K)。
• Vodafone
  初期の機種は全体で6K。3GC端末では10K(全体では300K)。
• EZweb
  全体で9K。

以上により、5K以内ならばほぼ全ての携帯で見ることができます。これは、画像等を含めた1ページの総サイズ数です。

フォームについて

携帯ページではもちろんフォームを使うことが出来ますが、気を付けなればいけない点がいくつかあります。

• 文字数入力制限
  INPUTタグにはsizeとmaxlengthという2つの属性を設定できます。前者は表示上の大きさ、後者は入力できる最大文字数(半角単位)です。特に、maxlengthは必ず明記しておきましょう。
• アクセスキー
  携帯は画面が狭いので、画面内の特定位置にジャンプするためにアクセスキーというものを使って操作性を高めることが出来ます。例えば、「1」を押したら入力欄にジャンプする、といった事が可能になります。以前はメーカーによって違いがありましたが、現在はaccesskeyという属性がほぼ全ての規格で使えます。INPUTとAタグの属性として使います。

が、Vodafoneの昔の機種では使えません。その場合、代用の属性は無いようなので諦めるしか無さそうです…。

絵文字

これは機種により完全に記述方法が異なるので静的ページではファイルを分ける必要があります。初めに言ったように、なるべく携帯共通のページを作りたいので絵文字を使うのは動的生成ページに限定することをお薦めします。ez-webでは、i-modeの絵文字を自動的に変換する機能があるそうです。

• i-mode
  絵文字一覧記述方法はいくつかありますが、どれも短所があります。
• バイナリ入力
  なぜこんな方法を採用したのか理解できませんが、ファイル内にバイナリコードを埋め込むというものです。確かにファイルサイズは節約できます（2バイト）が、それ以外のメリットはありません。さらに、JavaServletを使っているとバイナリコードの埋め込みは一筋縄ではいきません。全機種に対応しています。
• Unicodeのテキスト入力
  文字コード表にあるUnicode文字コードを &#x\\\\; という形式で記述します。便利ですが、2002年後半以前に発売された機種では利用できません。Shift-JISのテキスト入力文字コード表にあるShift_JIS文字コードを &#\\\\; という形式で記述します。全機種に対応していますが、拡張絵文字が表示できません。さらに、「非推奨」の入力方法なので将来利用できなくなる可能性があります。

ビューアについて

当然、携帯ページを作ったらそれを実際に見て確認しなければなりません。しかし、わざわざ携帯から確認していたらお金も掛かるし大変です。そこで、各携帯メーカーはビューアを用意しています。

• i-mode
  iモードHTMLシミュレータIIというソフトが用意されています。HTTPからの読み込みに対応しているので掲示板などの動的生成ページの確認に利用することが出来ます。
• ez-web
  いくつかありますが、OpenwaveSDKがHTTP読み込みに対応しています。
• Vodafone
  ウェブコンテンツヴューアというソフトが用意されています。HTTP読み込み対応、 絵文字パレット、エラーチェックなど便利な機能があり操作も簡単です。

全ての携帯からアクセスされることを考えればこれら3つ全てのビューアで確認するのが良いのでしょうが、さすがにそれは面倒です。通常はどれか一つのビューアで確認をすれば充分でしょう。個人的には ウェブコンテンツヴューア が一番使い易くお薦めです。

recommend

禁煙プログラムキットSS33

最終更新日:2020/7/9

Copyright © How to make HP. All Rights Reserved.