基本

ほぼ PC 向けサイトの作成と変わらないが、以下の制限がある。

  • 1ファイルのサイズは最大 5KB まで。
    テキストはもちろん、画像も含む。
  • スタイルシート(CSS)は使用不可。
    最近は使用できる端末も出てきてるようだか、使用できないと考えて作った方が良い。
  • 表組み(tableタグ)は使用不可。
    最近は使用できる端末も出てきてるようだか、使用できないと考えて作った方が良い。
  • フレーム(frame)は使用不可。
    これは PC サイトでも使用はあまり推奨されない。まして携帯で使うな。
  • クライアントサイドスクリプト(JavaScript?など)は使用不可。
    最近は使用できる端末も出てきてるようだか、使用できないと考えて作った方が良い。
  • 文字コードは Shift_JIS のみ。
    最近は Unicode などが使用できる端末もあるようだか、Shift_JIS で書いておけば間違いない。

あと、罠。

  • 携帯のURLは大文字と小文字を区別する。
    hogehoge.html と HogeHoge?.HTML は別ものとみなされる。
    ただし、スキーマ部分(http、https)は、大文字と小文字を区別されない。(http と HTTP は同じ)

拡張

PC サイト向けの HTML にはないタグや属性がいくつかある。 キャリアごとに独自拡張されていたりもするが、以下は 3キャリア共通で使用可能。

電話をかける

アンカータグ(aタグ)の href に電話番号を指定できる。

 <a href="tel:09088888888">電話はこちらまで</a> 

tel: に続けて電話番号を書く。

アクセスキーを割り当てる

電話の 0〜9 までと「#」、「*」のボタンをリンクに割り当てられる。

 <a href="http://hogehoge.com" accesskey="9">「9」でジャンプ</a> 

accesskey に指定できるのは 0〜9 と「#」、「*」。

推奨事項

必須ではないにしろ、携帯向けサイトでこうした方が良いと思うところ。

  • ページの横幅は最大 240px を想定する。
    画像にリンクをつける場合はリンクの境界線がかぶるので、若干余裕をみて小さめにつくる。
  • インラインフレーム(iframe)はなるべく使用しない。
    iframe は多くの機種がサポートしているが、使わないで済むならなるべく避ける。
  • 文字セットはなるべく指定しておく。
    これをページ先頭に書く。 → <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
  • 画像ファイルは JPEG なら 3キャリア対応。
    本当は PNG が一番良いんだけど、docomo の古い機種は PNG に対応してないので。

UID

携帯電話は、端末で個人を特定できるので、大抵はこれを利用してさまざまな入力を省略できるようになる(ID/Password の入力など)。その端末ごとに振られているユニークなIDを個体識別番号(UID)と呼ぶ。

docomo

非 i-mode の場合は utn で取得できる。

<a href="http://hogehoge.com/fuga.html" utn>test</a>

この応答の USER AGENT の ser キーを取得する。

フォーム(form)でも同様に取得可能。

ただ、これは端末に紐づいているので機種変更すると変わってしまう。

i-mode の場合は iモードID というものが利用できる。 こちらはユーザに紐づくので機種変更しても変わらない。

これは、クエリに「guid=ON」という魔法を書いておけば良い。

<a href="http://hogehoge.com/fuga.php?guid=ON">test</a>

応答に「HTTP_X_DCMGUID」キーが入ってくるので、それを取得する。

au

au の場合は、常に HTTPヘッダに「HTTP_X_UP_SUBNO」が書かれているので、それを取得すれば OK。

Softbank

docomo の utn の取得とほぼ同じだが、キー名は「SN」。

なお、SB の場合は USER AGENT に常に書かれているので、タグに utn などの指定は不要。

参考

アプリ開発

今までキャリアごとに独自のプラットフォームだったけど、 今後は Java のオープンアプリが主流になるのか。

開発ツール

J2ME Wireless Toolkit なるものを使う。

参考

Flash Lite

携帯端末でも動作する Flash 。それをつくるには Flash MX 以降が必要ぽ。
(Flash MX の場合は Flash Lite 1.0/1.1、Flash 8 なら Flash Lite 2.0/2.1 まで対応。)

Flash があるなら、以下のサイトからアップデータを入手できる。

パブリッシュ設定で「Flash Lite 2.x」などを選択して出力する。ただし、swfファイルのサイズは 100KB 以内に収めないと携帯で再生できない。

ページへの埋め込み方法は、PC向けの場合 movie パラメータに swf ファイルを指定するとそのファイルが再生されるが、携帯の場合は、object タグの属性に指定する。

インライン再生の場合(表示のみ)

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
 
 
 
 
 
<object data="sample.swf" type="application/x-shockwave-flash" width="240" height="268">
<param name="bgcolor" value="ffffff">
<param name="loop" value="on">
<param name="quality" value="high">
</object>

インタラクティブ再生の場合(ボタン操作などあり)

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
 
 
 
 
 
 
<object declare id="swf1" data="sample.swf" type="application/x-shockwave-flash" width="240" height="268">
<param name="bgcolor" value="ffffff">
<param name="loop" value="on">
<param name="quality" value="high">
</object>
<a iswf="#swf1" href="sample.swf">クリックで再生</a>
data:swfファイルへのパス
width:横サイズ
height:縦サイズ
bgcolor:swfファイルの背景色。
loop:ループ再生はon、非ループはoff
quality:画質(high、medium、low) 

ちなみに Flash Lite は PC でも再生可能。

Flash Lite の罠

Flash Lite 1.x/2.x では、LoadVars? などでファイルを読み込む際、ボタン(キー)イベントで行う必要がある。これは、勝手にファイルをダウンロードしてパケット料金が発生するのを防ぐ為とのこと。

ちなみに Flash Lite 3.1 なら、ボタンに紐づける必要はない。

参考

エミュレータ

docomo

au

Softbank

3キャリア対応

参考


MLEXP. Wiki


トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-05-15 (土) 12:08:10 (5088d)