携帯サイト制作 Archive

１）外字ファイルの登録
DOCOMOサイトから”i絵文字”をダウンロード、解凍し、インストールする
→IEなどでDOCOMOの絵文字が見れるようになる。
ソフトバンクやauの絵文字は、基本のものは3キャリアで絵文字置き換えプログラムによって変換するからこれでOK。

２）FIREFOXでも絵文字を見る場合（シミュレーターなどで）

1. コントロールパネルから、フォントフォルダを開き(Vista では、[デスクトップのカスタマイズ] [フォント])、i絵文字をインストールしたディレクトリにある外字フォント「docomo.tte」をインストールする。
2. FireFox3でアドレスバーに 「about:config」 と入力して [Enter]キーを押す。
3. 「フィルタ」の入力欄に 「font.name-list.*.ja」 と入力する。
4. 表示された項目それぞれ、現在の設定文字列の先頭に「EUDC, 」を追加。

おお～。確認できた♪

３）FIREFOXの携帯エミュレータ

FIREFOXで携帯のサイト確認ができる。ユーザーエージェントを携帯のものに置き換えて、見た目をシミュレートする。

http://firemobilesimulator.org/　（携帯用シミュレータ）

http://www.qooin.com/firefox/useragent.html　（ユーザーエージェントをスイッチする）

3キャリア共通でコード利用したいのであれば、基本3G以上を対応機種と考えて、古い機種についてはある程度の割りきりが必要。

XHTMLで記述
コンテンツのMIMEタイプもHTTPヘッダーも「application/xhtml+xml」
文字コードは、Shift-JIS
CSSは基本インライン
画像の全画面表示サイズは、240pxで作成してwidth=100%としておく
画像フォーマットは、JPEGかGIF
ページ全体の容量は、トップページで100KB以内（広範囲で対応させるには5KB）
文字サイズは、標準で全角10文字程度（小で13文字程度）
絵文字を共通化するにはPHPなどの絵文字共通化プログラムが必要
コーディングでインデントを使わない

【デザインのポイント】
<hr>はキャリアによって指定・表示に癖が出る
・ドコモでは、XHMLでは全ての属性に非対応
・ソフトバンクは、罫線の上下にマージンができる、hrの余白調整はmargin/paddingプロパティで対応可能、noshadeにも対応
・auは、ライン色はcolorで指定可能、height/borderは指定できない、text-alignプロパティが使用可能（au以外では、align属性を使用する）
・WIDTHは全キャリア使用可能
・hrを使うより画像使用したほうがキレイにできる

画像
・ドコモXHTMLではalign属性が非対応、CSSでのフロートはauが非対応のため、画像の回り込みをするには、両方の属性を併用しなければならない
・回り込みの解除は、<br clear=”all” />だが、ドコモ非対応、ドコモでは、「blockquote」「dl」「div」「form」「hr」「h1-h6」「ol」「ul」「p」「pre」にclear属性を記述すれば旧機種でも対応できる。
・画像のmarginはドコモでも対応
・画像のborderはドコモ非対応

リンク
・ドコモxhtmlは、<a>タグのname属性に非対応なので、<a>タグには、nameとidを両方使用する

・auでは、auではdivなどのブロックレベル要素間で1pxほどのすき間が生じてしまうというバグがある
・ドコモとau／ソフトバンクの違いということであれば、外部CSSにau／ソフトバンク用のCSSを書いておいて、ドコモにはインライン指定のCSSを優先させるといった手順をふむことで、違いを吸収するということが可能
・CSSはstyle属性が優先されるので、ドコモのインラインCSSとソフトバンク/auの外部CSSを共存する場合は、<DIV>タグを入れ子にして外側をインラインCSSにして内側のdivにソフトバンク/au用のクラスを指定する
・アクセスキーの設定：一般的には「[0]がトップページ」「[9]が1つ前のページへ戻る」「[5]更新」としているサイトが多い
・入力モードの設定：ドコモのiモードHTMLの場合は、「istyle」属性を、iモードXHTMLの場合は、style属性で「-wap-input-format（WCSS）」を指定します。auの場合は「format」属性で、ソフトバンクの場合は「mode」属性をinputタグに指定します。3キャリア対応で書く場合は、それぞれの属性をinputタグに併記すれば問題ない。ただし、-wap-input-format（WCSS）をソフトバンクで読み込むと入力制限がかかるバグがある。このため、入力設定をしたいフォームでは、スクリプト側でキャリアごとの振り分けをするとよい。
振り分けをする場合は
DoCoMo
style=-wap-input-formatのみ
au/SoftBank
istyle、format、modeをすべて記述
という感じになるように切り替えてやると、おかしな状況にも対応でき、きちんとした入力モードの切り替えが実装できる。

Smartyのプラグインなり、ヘルパーにまとめるなりしてやると、簡単に使える。

参考：http://www.thinkit.co.jp/channel/0810_2.html

携帯電話サイトの制作で、3キャリアの絵文字変換に悩まされたり。

EC-CUBEみたいなCMSで携帯サイトを吐き出すときは、やっぱり3キャリア対応のソースになってないと、ムリ。携帯用のCMSであれば、携帯ソース自体3キャリア分＋ハックなんかして書き出してくれるのだろうけど、PC用CMSにおまけ程度についているような携帯対応機能では厳しい･･･いや、厳しい･･･

とりあえず、各キャリアの絵文字について一覧表などを公開してくれているサイトがあるので、下記リンク。

http://trialgoods.com/emoji/

http://www.dspt.net/tools/mobile_ip/index.html

携帯サイトを運営する上で、携帯端末のみをアクセス可能にしたい場合にサーバーに設置が必要なサーバー定義ファイル「.htaccess」を簡単に生成します。キャリアや検索エンジンのクローラーごとに設定可能なため、例えば「auは許可し、docomoは拒否」といった設定も可能です。

使いかた
アクセスを許可したいキャリアやクローラーを選択し、最後に「htaccess生成」ボタンを押すと、htaccess用に書かれたIP情報（自IP含む）が表示れます。表示内容をコピーし、「.htaccess」という名前で保存した後、自分のサーバーにアップロードすれば完了です。

対応状況

以下の携帯キャリアとモバイル向け検索エンジンに対応しています。
携帯キャリア (5)
NTT docomo, au by KDDI, SoftBank, willcom, emobile
検索エンジンクローラー (6)
Google, Yahoo, livedoor, goo, froute, DeNA

便利。

ケータイマーケティングソリューション 利用動向調査報告書ハイライト

http://web-tan.forum.impressrd.jp/e/2008/09/12/3521

http://itpro.nikkeibp.co.jp/article/COLUMN/20080703/310053/

【PHP TIPS】 96. 携帯電話でGPSデータを取得してみよう

GPS情報を携帯でWebから取得する方法を各キャリアごとにまとめられています。

他にも、こういうのもあります。また、ドコモがiモードIDを取得できるようになり、携帯での市場拡大を見据えた動きが活性化していますね。

• GPS PEARライブラリ / Net_UserAgent_Mobile_GPS
  キャリアや機種によって様々に仕様が異なるGPSの取り扱いを簡単にするためのPHP/PEARライブラリ 

http://web-tan.forum.impressrd.jp/e/2008/08/22/3516

「Web担当者なら知っておきたいケータイCMSとウェブCMSの違い – 携帯マーケ入門#9」
最近、猫も杓子も携帯・ケータイ･･･

かくいう私も必要に迫られ、携帯サイトの研究なんぞしてみたり。

最近のCMSはオープンソースでも携帯用サイトの自動生成機能ついてたりしますが、それなりにノウハウもいるわけですわな。

てことで、ちょっくら読んでみてくださいな。

コンテンツリスト：http://web-tan.forum.impressrd.jp/l/2564

携帯サイトのマーケティングを分かりやすく解説しているコラム。

ドコモのiモードID通知機能公開。
i契約ユーザ毎に一意となるID番号「iモードIDを取得することができるようになり、個人の識別に使えるのでログインなどの機能に利用できます。

従来までの端末ID取得では、認証の度に確認ダイアログが出ており、利用者にとっては承認するのも拒否するのも不安に感じてしまうような機能だったのですが、今回のID通知機能で、こちらを使えば、携帯コンテンツの制作はしやすくなりますね。 

URLに「guid=ON」というパラメータを付けると、拡張ヘッダにiモードIDが付きます。

PHPでは、
echo $_SERVER['HTTP_X_DCMGUID'];
（Perlでは$ENV）
取得できるのは、7文字の英数字([0-9A-Za-z]{7})の文字列。
X-DCMGUID:XXXXXXX (Xが７桁)

 この機能を利用するには、利用者が通知を許可している必要がある。
（デフォルトは通知する）
iモードメニュー内にメニューが増えている。

1. 会員登録時
   
2. 会員登録後
   
3. ＩＤ利用後
   

• iモードIDについて
  1. iモードをご利用のお客様の携帯電話番号毎に一つ付与されるiモード用のユニークなIDとなります。
  2. 携帯電話番号とは異なるランダムな英数字の組み合わせにより構成されています。
     （メールアドレス、氏名などのご契約者情報は含まれません）
  3. 名義変更、改番、iモード契約の解約によりiモードIDは変更されます。
  4. ユーザID、携帯電話及びFOMAカードの製造番号情報とは異なります。
• iモードIDの通知について
  iモード対応サイトにおいて、アクセス先URL内に予めiモードID用のパラメータを記述しておくことにより、お客様がサイトアクセスした際にiモードIDの通知が行われます。

【公式サイト】

→　NTT DoCoMo　重要なお知らせ　『iモードID』の提供開始についてnttdocomo.co.jp]

→　NTT DoCoMo 作ろうiモードコンテンツ　iモードセンタの各種情報　iモードIDについて [nttdocomo.co.jp]

http://labs.yumemi.co.jp/labs/mod/man_contents.html

mod_ktaiはApache上で動くアプリケーションに対して、開発言語を問わず携帯サイト作成のための様々な機能を提供します。

1. 携帯サイトの作成がより簡単に
   携帯サイトの場合、キャリア・機種によって絵文字の出力、表示可能データ量、画面の大きさなどが異なる為、キャリア・機種判別、絵文字の出し分け等、携帯サイト向けの知識が不可欠です。
   mod_ktaiを使用すると、それらの処理を簡単に行なうことが可能です。
   よって携帯サイト開発に関する知識がない方でもサイト構築を行なうことが可能になります。
2. コーディング量の削減、工数削減
   弊社では、従来サイト毎、言語毎に、携帯サイト特有の処理をそれぞれ作成していましたが、携帯サイトに共通する処理を、mod_ktaiで行なうことでコーディング量・工数ともに大幅削減することができました。
3. 処理が高速に
   Apacheモジュールは、phpやperlなどで作成したプログラムより高速処理が可能です。よって大規模サイトや高負荷なサイトでも十分使用可能です。

端末のUser-Agentと、独自に作成した機種情報リストを元に、携帯を判別し、環境変数に様々な値をセットし、Apache上のアプリケーションから端末情報を取得する事を可能にしたり、端末に応じた絵文字変換を行ってくれたり、といったことが出来ます。

サイトでは、マニュアルや情報も充実しており、利用しやすいです。

http://ke-tai.org/blog/

携帯サイト制作に関する様々な便利情報やツールを紹介されています。情報も濃く、大変参考になります。

最新情報では、

ゆめみのケータイ用Apacheモジュール「mod_ktai」

mod_ktaiは、ケータイサイトでの絵文字変換や機種判別などの処理を行うためのApacheモジュール群です。
プログラムで変換処理を行わなくてもよいため、構造がシンプルになり、かつ動作が軽いのが特徴となります。
（上記の記事内では、変換処理が100倍以上に上がると書かれています）

という記事が公開されていました。興味津々。