本日  昨日
 
 
11/22(Fri) 09:13
iモード対応ホームページ作成講座

iモードページとwebページのどちらも見れるようにするには

トップページのユーザ選択で振分ける
振分け用のトップページを新しく準備し、そのページで携帯ページに行くか、webページに行くかをユーザに選択してもらう方法です。

  1. 現在のトップページの名前を、例えばindex.htmlならindex2.htmlに変更
  2. index.htmlの名前で振分け用トップページを、携帯で表示できる画面サイズで作成
  3. このindex.html中に、携帯ならimode.htmlへ、パソコンならindex2.htmlにリンクするアンカーを置く
携帯かパソコンかを判別し自動的に振分ける
ブラウザ識別に利用されるHTTPヘッダ HTTP_USER_AGENT をCGIで取得することによって携帯電話の判別ができます。

取得内容:DoCoMo/ HTTPのバージョン/機種名/キャッシュ

機種HTTP_USER_AGENT備考
501シリーズDoCoMo/1.0/F501iキャッシュ5K
502シリーズDoCoMo/1.0/F502i
DoCoMo/1.0/F502i/c10
キャッシュ5K
c10:キャッシュ10Kに拡張

自動振分法
下のCGIを導入することで、携帯アクセスの場合は imode.html、パソコンアクセスの場合は index.htmlを自動的に表示します。

  1. エディタで下のCGIをコピー&貼り付けしてindex.cgiファイルを作成
  2. $urlに、携帯用、パソコン用のトップページのパスをそれぞれ指定する
  3. .htaccessを作成して最初にindex.cgiを見に行く設定。
    この方法では、トップURLが http://kikuchisan.net/index.cgiになりますが http://kikuchisan.net/でindex.cgiを表示するには.htaccessファイルを使った以下の方法があります。この情報はtakabさんから頂きました。(掲示板過去ログNo.3970)
    .htaccessファイルの記述  DirectoryIndex index.cgi index.htm
    #!/usr/local/bin/perl #↑perlの存在するpathに書き換えてください。 ############################################################################# # index.cgi by「菊池さん」<http://kikuchisan.net/> ############################################################################# $HTTP_USER_AGENT = $ENV{'HTTP_USER_AGENT'}; if ($HTTP_USER_AGENT =~ /DoCoMo/i) { $url = "imode.html"; #携帯用トップページのパス指定 } else { $url = "index.html"; #パソコン用トップページのパス指定 } print "Location: $url\n\n"; exit;
  4. [応用] if文中の「DoCoMo」を「J-PHONE」「UP.Browser」にすれば携帯機種を判別しそれぞれの処理を行うことができます。
    #!/usr/local/bin/perl #↑perlの存在するpathに書き換えてください。 ############################################################################# # index.cgi by「菊池さん」<http://kikuchisan.net/> ############################################################################# $HTTP_USER_AGENT = $ENV{'HTTP_USER_AGENT'}; if ($HTTP_USER_AGENT =~ /DoCoMo/i) { $url = "imode.html"; } #imode用トップページのパス指定 elsif ($HTTP_USER_AGENT =~ /J-PHONE/i) { $url = "jphone.html"; } #jphone用トップページのパス指定 elsif ($HTTP_USER_AGENT =~ /UP\.Browser/i) { $url = "ezweb.html"; } #ezweb用トップページのパス指定 else { $url = "index.html"; } #パソコン用トップページのパス指定 print "Location: $url\n\n"; exit;