携帯向けウェブサイト

最近は携帯向けのウェブサイトを持っている企業も結構多くなってきました。というわけでレンタルサーバー等で実現する方法を調べてみました。最近の携帯はHTMLを解釈できますので、サイズに気をつけて対応しているタグと対応している画像形式を調べればわりとすんなりいきます。

サイト構成

以下のようなサイト構成にします。

/home/hogehoge/public_html/
  • .htaccess (後述)
  • index.html (PC用トップページ)
  • index.cgi (後述)
/home/hogehoge/public_html/i
  • index.html (i-mode用トップページ)
/home/hogehoge/public_html/e
  • index.html (ezweb用トップページ)
/home/hogehoge/public_html/v
  • index.html (vodafone用トップページ)

/home/hogehoge/public_html/.ataccess

以下のような内容のファイルを作成します。

DirectoryIndex index.cgi index.html index.htm index.shtml

権限の設定を行います。

chmod 744 .htaccess

/home/hogehoge/public_html/index.cpp

以下のような内容のCGIを作成します。

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

int main(int argc, char** argv) {
    char *agent = getenv("HTTP_USER_AGENT");
    // エージェント不明
    if (agent == NULL) {
        printf("Content-type: text/html;charset=x-euc-jp\n\n");
        printf("unknown user agent\n");
    } else {
        // 携帯(imode)
        if (strstr(agent, "DoCoMo") != NULL) {
            printf("Location: ./i/index.html\n\n");
        // 携帯(vodafone)
        } else if (strstr(agent, "J-PHONE") != NULL 
                || strstr(agent, "Vodafone") != NULL) {
            printf("Location: ./v/index.html\n\n");
        // 携帯(ezweb)
        } else if (strstr(agent, "UP.Browser") != NULL) {
            printf("Location: ./e/index.html\n\n");
        // PC
        } else {
            printf("Location: ./index.html\n\n");
        }
    }
    return 0;
}

以下のようにしてコンパイルします。

g++ -O3 -o index.cgi index.cpp

サーバー上でネイティブファイルの実行が許可されていない場合やサーバー向けのネイティブプログラムをコンパイルできる環境がそろっていないときはPerlRuby等で似たようなファイルを作成します。

テスト

http://fugafuga.com/hogehoge/ にPC、i-modeezwebvodafoneでアクセスしてそれぞれのトップページが表示されるかテストしましょう。

メモ