携帯ウェブ開発10の鉄則×3つの落とし穴【左脳をシゲキするエンジニア】
第1回は、マイネット・ジャパン 開発リーダー 平島浩一郎氏とマーケティング部長 辻将也氏による「携帯ウェブ開発10の鉄則×3つの落とし穴」だ。
■成長・拡大するケータイ市場
辻氏は、日本の携帯環境は携帯Webを閲覧するのに適していると指摘した。
ケータイ市場は2008年に1億台突破し、 一家に一台から一人1台へという環境に移った。また最近ではケータイは「24時間365日30センチ以内」などといわれるほど生活の中に定着している。日本ではケータイ利用者の90%は高速な3G端末を所有しており、半数がパケット定額制に加入していることからも高速で長時間通信を利用して携帯ウェブを使う環境が整っていると語った。
マイネット・ジャパン 開発リーダー 平島氏は、携帯ウェブ開発はPCにおけるウェブ開発とは異なる点や制約も多いという。そこで携帯ウェブを開発する上で、意識していく10の鉄則を解説した。
 |
| マイネット・ジャパン 開発リーダー 平島浩一郎氏 |
●鉄則1：動作検証機種を確保するべし！
まず携帯ウェブを開発するにあたり、準備が必要なものについて解説してくれた。
・HTMLコーディング環境
基本はPC開発と同等だが、利用できるタグや機能には差があるという。
・携帯電話の実機
まず、どのキャリア・機種向けに開発するかを決めるわけだが、作成したウェブの動作確認のためにはできるだけ多くの対象機種を用意することが大切だという。機種によっては、表示に差が生まれることもあるので、テスト用の実機は可能な限り用意したほうが良いというわけだ。
・ウェブサーバ
PCと携帯の開発での違いは、外部からアクセス可能なウェブサーバが必要なことだという。PCの場合は、ローカルの動作確認でも問題ないことが多いが、携帯は外部からアクセスするサービスである以上、外部からサーバにアクセスできる環境が動作確認には必要だからだ。
●鉄則2：3キャリア共通のタグ記述パターンをつかめ
携帯ウェブ開発では、キャリア毎に異なるHTMLの違いをどう対応するかが問題だという。
3キャリアで共通なHTMLの書き方を採用し、１つのHTMLで3キャリア対応ができるように目指すことが大切だという。
・HTML vs XHTML
HTMLは、ほぼどの端末でも利用できるが、CSSなどのような多様な表現は使えない。一方、XHTMLは使える端末が3G端末以降に制限されるが、CSSの利用も可能で表現力の高いウェブを作成できるメリットがある。携帯環境では、まだJava Scriptは使用できないなど、PC環境と比べるとまだ違いがある。
・携帯ならではのHTMLタグ記述
携帯環境では、＜div＞＜span＞
●鉄則3:ファイルサイズに気をつけるべし！
携帯ウェブを作成する際は、画像ファイルサイズには特に気を配らないといけないという。表示に時間がかかるだけでなく、ページ全体の表示ができなくなるといったケースも発生するのだそうだ。
・画像形式
3G端末では、JPEGやGIF形式であれば利用は可能だ。
・ファイル容量
1ページあたり50〜100KB以内が目安だという。この目安よりファイルサイズが大きくなる場合は、画像サイズを下げるか、画像数を減らすなどの対処も必要となってくる。
●鉄則4：迷惑メール対策を乗り越える
携帯でダイレクトメールやメーリングリストのメールを送る際には、各キャリアが施している迷惑メール対策への対応が重要だという。
・送信時間帯について
ユーザーが寝ている時間帯には送らない
・ドメイン指定受信
・SPFレコード（送り元がわかる）
・エラーメールを処理
エラーメールを繰り返さないようにエラーメールアカウントは削除などの対応をしておく必要がある。
 |  |
| 携帯ウェブ開発10の鉄則 平島浩一郎氏 | 鉄則を紹介する平島浩一郎氏 |
■鉄則5：メールサーバからWebへ転送すべし
空メールを利用したサービスには、メール受信をトリガーとしたメールシステムの開発も必要となる。
・システムの流れ
メールサーバが受信したら、内容を指定URLにPOSTするスクリプトを起動
↓
本文や宛先アドレスをもとに処理を実行、送信先にメールを送信
スクリプトの中で標準入力を指定
■鉄則6：Web表示とメールで多少異なることに注意すべし
携帯ウェブ開発で避けて通れないのが絵文字の対応だ。絵文字は利用者が多い上に、絵文字体系や表示方法がキャリア毎に仕様が異なっている。
・フォームに入力された絵文字を受け取るには？
絵文字は、キャリア毎に独自のバイトコードで送信される。
他キャリア向けに表示させるには、キャリア別に変換処理が必要となる。
独自に絵文字記述法を持っておくと、作業の際に応用がきくのでお勧めだ。
・メールで絵文字を利用するケースは2つ
携帯に送る場合
携帯からの絵文字メールをPCなどで受け取る場合。現状ではauのみが対応している。
■鉄則7：技術上PCと違いがありうるものはさらっと覚えておく、HTML以外での注意点
・Cookie（クッキー）
auとソフトバンクは既に対応されているが、ドコモは6月以降の機種から対応を開始した。
このほか、セッション管理、アクセス元のIPアドレス、リファラ、ブラウザキャッシュなどにも注意が必要だという。またhttpsでは、Cookieが使えなくなる場合もあるので注意が必要という。
■鉄則8：判別方法の特徴をちゃんと理解して利用する
端末の識別・判別方法には、特徴と違いがあるので、理解しておく必要がある。
・端末を判別するには下記をつかう。
UA（ユーザーエージェント）による判別
IPによる判別
UAは簡便で対応しやすいが偽装が可能なため、安全を優先するにはIPによる判別が安全だという。
■鉄則9：ナリスマシニ注意スベシ
携帯電話には個体識別番号があり、これで端末確認をしているが、キャリアで種類・名称も仕様も異なる。
現在メジャーなものとしては下記がある。
iモードID 携帯電話番号単位
サブスクライバID 契約単位
J-PhoneID 契約単位
■鉄則10：測位精度にも注意を払うべし
最近は、GPSなどの位置情報サービスの人気が高いが、情報の取得方法によって精度が異なるので注意しよう。
・GPSと簡易位置情報
GPSは衛星からの位置情報、簡易位置情報は基地局の情報となる。
・測位の仕方で精度は異なる
現在は、携帯電話では世界測地系が主に利用されている
・GPSの実装方法はキャリアによってバラバラ
地図の表示ではGoogle Static Maps APIが扱いやすいという。
■鉄則おまけ：ツールを駆使して効率的に開発する
平島氏は、FireFoxとアドオンを利用することで利便性や作業効率をアップできるという。今回はFireFoxとアドオンなどを組み合わせたツールを紹介してくれた。平島氏にとって、開発には欠かせない3つの神器だという。
・FireFox
・FireMobile Simulator：携帯端末ブラウザをシミュレートできるのでPC上で携帯ウェブがどう見えるかを確認できる。
・Mobile Barcoder ：モバイルサイトのURLをQRコードで表示してくれるので、URLをキーから入力しなくて済みようになる。
これらのツールを利用することで、作業はかなり効率化できるという。
■サービス運用 3つの落とし穴
携帯ウェブ開発10の鉄則の後は、作成した携帯ウェブをいかに運用・広めていくかについて、マイネット・ジャパン マーケティング部長 辻将也氏が、作成した携帯ウェブを運用で成功するための手法を紹介した。
 |
| マイネット・ジャパン マーケティング部長 辻将也氏 |
●終電JP
最寄り駅を登録しておくと、現在地からの終電時間が検索できるシンプルかつ便利で面白いサービス。平島氏と辻氏で開発・マーケティングを担当したプロジェクトだ。
今回は、この終電JPを例として、マーケティングと運用が紹介された。
■落とし穴1：知って貰う＝PR
作成したサービスは、まず多くの人にして貰う必要がある。そのためにはSEO対策が重要だ。
●SEO対策
・Mobile SEOを利用する
キャリア（ドコモなど）、Google、Yahoo!などを利用する。
・検索キーワード
テレビで登場したワードなどは、一気に急上昇しやすい。
・携帯特有のSEO
携帯電話では、PCとは違い外部リンクからの流入より内部での回遊が多くなる傾向がある。そのため、ナビゲーションのわかりやすさ、一本道のように利用者が迷わない操作方法が大切だという。
・QRコード
サービスとセット提供は必要なものとなった。
・URL（ドメイン名）
URLを打たなくでもアクセスできるように、電話コールでURLを返すサービスなども登場している。
携帯電話のキーは、URL（ワード）によって、キー入力の回数が変わってくる。いかに少ないキー入力のドメイン名にするかでも、アクセス数はかわってきてしまう。
 |  |
| サービス運用 3つの落とし穴 辻将也氏 | 運用の落とし穴 辻将也氏 |
●プチプレスリリース
・常に特徴を一言で表現できるようにしておくことで、いきなり聞かれてもサービスを的確に伝えられるようにしておく。
・こんなサービスができましたといった告知、アナウンスもこまめに送るとニュースなどに取り上げられる機会を増やせる。
・告知・アナウンスの効果をあげるには、明確な連絡先を表示しておくことも忘れずに。問い合わせしやすくしておくのも重要な方法だ。
■落とし穴2:使って貰う＝使い勝手
告知とともに大切なのが、使い勝手だ。携帯電話は、PCと違い制約があるため、使い勝手によって利用率は大きくかわってくる。違いを理解しておくことが重要だ。
●画面
・画面サイズがPCとは違う
・カーソル（最近の機種では画面上でPCのようにカーソル操作ができる機種も増えている）
・文字表示数には限度がある
●ブラウザの違い
・読み込み速度はPCよりは遅い
・タブブラウザ 複数表示ができる
・画面遷移は、ユーザーが迷わないようにする
■落とし穴3：もっと使って貰うには？
もっと使って貰うには、キャリア対応が必要だ。
●最新Mobile動向
・imodeブラウザ2.0
いずれ主流になる可能性は大きい。
・スマートフォン
最近注目されているスマートフォンだがケータイとは別物と考えてよい。
・MVNO
ディズニーモバイル（携帯）のように既存キャリアの回線を利用して他社がサービスを開始するMVNOは、ユーザーにとっては選択肢が広がるが、開発者は新たな追加対応が必要となる。
■実践な情報に聞き入る参加者の真剣さ
携帯ウェブ開発についてのイベントというのは意外に少ない。実際に開発していく上での問題点や注意すべき点を確認できることの意義は参加者にとって大きい。また、今回のイベントに参加資格がパソナテックに登録されている方が対象ということもあり、実際に制作に関わっている人も多く真剣にメモを取ったり聞き入ったりする姿が随所で目立った。
パソナテックでは、今後も「Mobile Developers Night」を開催し、モバイル関連のエンジニアの情報共有の機会を増やしていくという。
■右脳をシゲキするエンジニア特集
・リアルをヴァーチャルに！新進デザイナーの伝えるデザイン
・未経験からWebデザイナーに転身！今北舞さんの仕事術
・1日で100のアイデアを生み出す方法
■Presented by パソナテック- ITエンジニアとクリエイターのための派遣・転職・求人情報サイト