#contents
 
 ** 基本 [#raf54c80]
 ほぼ PC 向けサイトの作成と変わらないが、以下の制限がある。
 
 - 1ファイルのサイズは最大 5KB まで。&br;
 &size(10){テキストはもちろん、画像も含む。};
 - スタイルシート(CSS)は使用不可。&br;
 &size(10){最近は使用できる端末も出てきてるようだか、使用できないと考えて作った方が良い。};
 - 表組み(tableタグ)は使用不可。&br;
 &size(10){最近は使用できる端末も出てきてるようだか、使用できないと考えて作った方が良い。};
 - フレーム(frame)は使用不可。&br;
 &size(10){これは PC サイトでも使用はあまり推奨されない。まして携帯で使うな。};
 - クライアントサイドスクリプト(JavaScriptなど)は使用不可。&br;
 &size(10){最近は使用できる端末も出てきてるようだか、使用できないと考えて作った方が良い。};
 - 文字コードは Shift_JIS のみ。&br;
 &size(10){最近は Unicode などが使用できる端末もあるようだか、Shift_JIS で書いておけば間違いない。};
 
 あと、罠。
 - 携帯のURLは大文字と小文字を区別する。&br;
 &size(10){hogehoge.html と HogeHoge.HTML は別ものとみなされる。};&br;
 &size(10){ただし、スキーマ部分(http、https)は、大文字と小文字を区別されない。(http と HTTP は同じ)};
 
 ** 拡張 [#mb999c06]
 PC サイト向けの HTML にはないタグや属性がいくつかある。
 キャリアごとに独自拡張されていたりもするが、以下は 3キャリア共通で使用可能。
 
 *** 電話をかける [#i5915e33]
 アンカータグ(aタグ)の href に電話番号を指定できる。
 
   <a href="tel:09088888888">電話はこちらまで</a> 
 
 tel: に続けて電話番号を書く。
 
 *** アクセスキーを割り当てる [#b88300ac]
 電話の 0〜9 までと「#」、「*」のボタンをリンクに割り当てられる。
 
   <a href="http://hogehoge.com" accesskey="9">「9」でジャンプ</a> 
 
 accesskey に指定できるのは 0〜9 と「#」、「*」。
 
 ** 推奨事項 [#z7871caf]
 必須ではないにしろ、携帯向けサイトでこうした方が良いと思うところ。
 
 - ページの横幅は最大 240px を想定する。&br;
 画像にリンクをつける場合はリンクの境界線がかぶるので、若干余裕をみて小さめにつくる。
 - インラインフレーム(iframe)はなるべく使用しない。&br;
 iframe は多くの機種がサポートしているが、使わないで済むならなるべく避ける。
 - 文字セットはなるべく指定しておく。&br;
 これをページ先頭に書く。 → <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
 - 画像ファイルは JPEG なら 3キャリア対応。&br;
 本当は PNG が一番良いんだけど、docomo の古い機種は PNG に対応してないので。
 
 ** UID [#k4e3d576]
 携帯電話は、端末で個人を特定できるので、大抵はこれを利用してさまざまな入力を省略できるようになる(ID/Password の入力など)。その端末ごとに振られているユニークなIDを個体識別番号(UID)と呼ぶ。
 
 *** docomo [#ude31ca1]
 非 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 [#ba68eaeb]
 au の場合は、常に HTTPヘッダに「HTTP_X_UP_SUBNO」が書かれているので、それを取得すれば OK。
 
 *** Softbank [#adb7c142]
 docomo の utn の取得とほぼ同じだが、キー名は「SN」。
 
 なお、SB の場合は USER AGENT に常に書かれているので、タグに utn などの指定は不要。
 
 *** 参考 [#d4779c57]
 - [[携帯電話・個体識別情報(個体識別番号)の取得方法、uid、iモードID(guid)、EZ番号、端末シリアル番号:http://memorva.jp/memo/mobile/uid_utn.php]]
 
 ** アプリ開発 [#t424f918]
 今までキャリアごとに独自のプラットフォームだったけど、
 今後は Java のオープンアプリが主流になるのか。
 
 *** 開発ツール [#w536fa2e]
 J2ME Wireless Toolkit なるものを使う。
 - [[Sun Java Wireless Toolkit for CLDC:http://java.sun.com/products/sjwtoolkit/]]
 -- [[ダウンロード:http://java.sun.com/products/sjwtoolkit/ja_download-2_2.html]]
 
 *** 参考 [#x47fc683]
 - [[オープンアプリゲームコンテスト:http://appget.com/contest/au2007/lecture/]]
 - [[MIDP2.0メモ:http://www.saturn.dti.ne.jp/~npaka/kvm/midp2/index.html]]
 - [[オープンアプリ(Java)(au サイト):http://www.au.kddi.com/ezfactory/tec/spec/openappli.html]]
 - [[携帯アプリを作って学ぶJava文法の基礎:http://www.atmarkit.co.jp/fjava/index/index_keitaigram.html]]
 
 ** Flash Lite [#a43cebd9]
 携帯端末でも動作する Flash 。それをつくるには Flash MX 以降が必要ぽ。&br;
 (Flash MX の場合は Flash Lite 1.0/1.1、Flash 8 なら Flash Lite 2.0/2.1 まで対応。) 
 
 Flash があるなら、以下のサイトからアップデータを入手できる。
 - [[Adobe Flash サポート:http://www.adobe.com/jp/support/flash/downloads.html]]
 
 パブリッシュ設定で「Flash Lite 2.x」などを選択して出力する。ただし、swfファイルのサイズは 100KB 以内に収めないと携帯で再生できない。
 
 ページへの埋め込み方法は、PC向けの場合 movie パラメータに swf ファイルを指定するとそのファイルが再生されるが、携帯の場合は、object タグの属性に指定する。
 
 インライン再生の場合(表示のみ)
 #code(HTML){{
 <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>
 }}
 
 インタラクティブ再生の場合(ボタン操作などあり)
 #code(HTML){{
 <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 の罠 [#wb84a0ab]
 Flash Lite 1.x/2.x では、LoadVars などでファイルを読み込む際、ボタン(キー)イベントで行う必要がある。これは、勝手にファイルをダウンロードしてパケット料金が発生するのを防ぐ為とのこと。
 
 ちなみに Flash Lite 3.1 なら、ボタンに紐づける必要はない。
 
 *** 参考 [#x8c08922]
 - [[Flash Liteの仕様(フラッシュ, swf):http://memorva.jp/memo/mobile/flash_lite.php]]
 - [[Flash コンテンツ(au サイト):http://www.au.kddi.com/ezfactory/mm/flash01.html]]
 - [[Flash Lite(Adobe サイト):http://www.adobe.com/jp/products/flashlite/]]
 - [[Adobe Flash Lite 2.x および 3.x アプリケーションの開発:http://help.adobe.com/ja_JP/FlashLite/2.0_FlashLiteDevGuide2/]]
 - [[FLASH- jpフォーラム:http://www.flash-jp.com/]]
 -- [[:]]
 
 ** エミュレータ [#zd140b18]
 *** docomo [#v4cc7ff1]
 - [[docomo:http://www.nttdocomo.co.jp/]]
 -- [[iモードHTMLシミュレータII:http://www.nttdocomo.co.jp/service/imode/make/content/browser/html/tool2/]]
 *** au [#m9093e89]
 - [[Openwave 6.2K:http://www.au.kddi.com/ezfactory/tool/ue/index.html]]&br;
 今はダウンロードできないぽい。
 
 *** Softbank [#od855cfe]
 - [[ウェブコンテンツビューア:http://creation.mb.softbank.jp/web/web_tool.html]]
 
 *** 3キャリア対応 [#y6f992b2]
 - [[P1 Emulator:http://p1.netfarm.ne.jp/]]&br;
 非常に高機能っぽいけど有料。
 - [[FireMobileSimulator:http://firemobilesimulator.org/]]&br;
 Firefoxのアドオン。
 
 ** 参考 [#b2b6714a]
 - [[ke-tai.org:http://ke-tai.org/]]
 - [[これからゆっくりL+α:http://sakaki0214.com/]]
 - [[携帯サイトの作り方:http://www.limy.org/program/mobile/list1.html]]
 - [[かんたんリファレンス:http://mobilehowto.magical-remix.net/index.html]]
 - [[携帯電話向けコンテンツの書き方。:http://www.marguerite.jp/Nihongo/WWW/Mobile/]]
 - [[八角研究所:http://www.hakkaku.net/]]
 -- [[OpenSocial を始めよう:http://www.hakkaku.net/series/opensocial%E3%82%92%E5%A7%8B%E3%82%81%E3%82%88%E3%81%86]]
 
 -----
 [[MLEXP. Wiki]]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS