同じURLでパソコン用と携帯用のページを作る

昨年8月に備忘録として「携帯専用サイト用の.htaccessの記述について(AirH"PHONE対応) 」を発表したが、教えてgooや2ちゃんねる等の質問スレッドで参考にされていたようだ。これを持ち出して書くのも気が引けるのだが、実は「.htaccess」や振り分け用のCGI等も使わずに、なおかつ同じURLで携帯でもパソコンからでも接続できるホームページの作り方がある。

それは、サイトのトップを「フレーム」ページにすること。

実はフレームページのソースには、今や化石となった「フレーム対応でないブラウザ」用のページを埋め込むことができる。現在、パソコンの場合、フレームに対応していないブラウザはほとんどないといってもよい。しかし通常の携帯電話の場合、フレームページに対応していないことが多い。この仕組みを利用することによって、同じURLでパソコン用と携帯用のページを作ることが可能なのだ。

具体的なソースを示すと
<html>
<head><title>トップページ</title></head>

<frameset cols="100%,*">
<frame name="hidari" src="content.htm">
<frame name="migi" src="main.htm">
</frameset>

 <noframes>
   <body>

  ○○の部屋 for Mobile
  ※ここに携帯端末向けのリンクを並べる

   </body>
 </noframes>

</html>

これはあくまでも一例であり、フレームページの設定などは各自でお調べいただくとして、この場合、<noframes>タグの間に、携帯端末向けのコンテンツのインデックスを作る。これで同じURLでPC用と携帯用のコンテンツを振り分けることができる。

ただし注意点がある。
フレームに対応しないブラウザはほとんどないといったが、GoogleやYahoo!(inktomisearch)等の検索ロボットも実はフレームに対応していない。このままでは検索ロボットが携帯用コンテンツしか拾わなくなるので、フレームのソースに<meta>タグなどで検索ロボット向けの記述をしておくことをお勧めする。具体的なタグの記述はググって熟知すべし。

次は同様のケースで、Movable Typeを利用している場合について述べたい。