PR

携帯サイトの制作から公開まで

2008年10月14日(火)
柴崎 正也

エミュレーターと実機確認

 制作した携帯サイトがどのように表示されるか簡易的に確認を行うには、各キャリアが公式に公開しているエミュレーターを使用するのが良いでしょう。

・ドコモ:iモードHTMLシミュレータII(http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/
・au:Openwave SDK 6.2K(http://developer.openwave.com/ja/tools_and_sdk/openwave_mobile_sdk/SDK62K/index.html
・ソフトバンク:ウェブコンテンツヴューア(http://creation.mb.softbank.jp/web/web_tool.html

 ただし、これらのエミュレーターで実際のサイトを完ぺきな状態で再現することはできません。ドコモが用意するiモードHTMLシミュレータIIに関してはおおよそ実機と同じように再現されるものの、auとソフトバンクが用意している各エミュレーターはお世辞にも良いとはいえません。

 例えば、サンプルサイトが実際の端末(実機)でどのようになるかは図3-1を見てください。エミュレーターはあくまで簡易的な確認にとどめ、やはり実際にご自身が作ったサイトがどのように表示されるかどうかは、実機で行うのが良いでしょう。端末を持ち合わせていないのであれば、友人に借りる、法人で契約するなどの手段のほかに、実機の貸し出しを行う企業もあります。

PCサイトから携帯サイトへの導線

 携帯サイトの制作が完成すれば後は公開するだけですが、中にはPCサイトを持ち合わせていて、その携帯版を制作したというケースもあるでしょう。PCサイトである程度のアクセス数があり、さらに同じドメインで携帯サイトも公開したい場合では、ユーザをうまく誘導してあげることも重要です。

 まず、PCサイトと同じアドレスに携帯端末でアクセスしてきたユーザに対して、携帯サイトへ誘導する方法については、プログラムで対処することも可能ですが、静的サイトの場合は、端末のUA(ユーザエージェント)で振り分けるhtaccessをトップディレクトリに設置する方法があります(図3-2)。サンプルコードはこちらからダウンロード(http://www.thinkit.co.jp/images/article/143/2/14322.zip)できますので、参照ください(14322.zip/0.422 KB)。

 また、カメラを搭載した端末ではQRコードが読めるので、PCサイトには携帯サイトへの誘導として、QRコードをPCサイトに表示させておく方法もあります。QRコードはWeb上でも発行できるサイトがたくさんあります。

 さらに、GoogleやYahoo!などの検索エンジンロボットへのフォローも忘れてはなりません。PCサイトと携帯サイトを同時に運営している場合、PCサイトの方へ携帯サイトもあることを検索エンジンロボットに知らせてあげるとスムーズでしょう。これはMobile Link Discovery(http://www.sixapart.jp/docs/tech/mobile_link_discovery_ja.html)といってmetaタグに以下の一文を付け加えておきます。

<link rel="alternate" media="handheld" href="携帯サイトのURI" />

 こうすると、ロボットが携帯サイトを認識して読みにいってくれますし、モバイルで検索した際に携帯サイトとして扱われます。

 次回は、3キャリア対応のサイトの作り方としてさらにつっこんだ解説をしていきます。

 なお、本稿の執筆にあたって、以下を参考にしました。

「XHTML Mobile Profile1.0:Openwave」(http://developer.openwave.com/ja/tools_and_sdk/documentation/ue11/xhtml-mp-referenceJ/xhtml-mp.htm)(アクセス:2008/09)

「作ろうiモードコンテンツ:NTTdocomo」(http://www.nttdocomo.co.jp/service/imode/make/)(アクセス:2008/09)

「モバイル機器向けXHTML仕様:My First HDML」(http://www001.upp.so-net.ne.jp/hdml/wap2/xhtml/spec.html)(アクセス:2008/09)

「携帯ネットの意外な“常識”:ITmedia News」(http://www.itmedia.co.jp/news/articles/0703/30/news070.html)(アクセス:2008/09)

「Mobile Link Discovery:SixApart」(http://www.sixapart.jp/docs/tech/mobile_link_discovery_ja.html)(アクセス:2008/09)

PCおよび携帯サイト制作のほか、デコメ、SEO、LPOなどWEBサイト全般の業務に携わる。過去にイントラネットのデザイン改修、コーポレートサイトの企画および制作、タイアップバナー広告の作成、Movable TypeなどのCMSテンプレートカスタマイズ、PHPプログラミング等を経験。3年ほど前から携帯サイト制作にシフト。著書に「携帯サイト コーディング&デザイン」。そのほか、HTML/CSSリファレンスサイト、携帯サイト制作支援ブログなどを運営。HTMLタグボード:http://www.dspt.net/携帯ホームページを作ろう!:http://dspt.blog59.fc2.com/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています