arcanum_jp’s blog

おっさんの日記

ＰＣサイトと携帯サイトの両方に対応するサイトを作りたいんだけど、こんなんでいいのかな？

Wicket


　WicketはView層がHTMLで定義されているんだから、HTML自体をクライアントに従って差し替えれば簡単かなと思い、Webの海をいかだに乗って漂流した（妄想系）。２時間ほど。でも疲れたので寝て次の日の朝にちょっと調べたらwicket-ja経由でこちらのブログが・・・orz...いつも参考にさせてもらってるサイトじゃん・・・と思いつつコレで携帯（シミュレータ）がどう返すか確認してみた。
　

public static void main

WebPageクラスのサブクラスでpublic String getVariation()をオーバーライドして、適当な文字列を返すようにします。

Pageの名前がIndexPage.javaの場合、普段はIndexPage.htmlが利用されますが、getVariationがたとえば"foo"を返した時はIndexPage_foo.htmlが利用されるようになります。

Pageのマークアップのファイルを変更する方法


　ちなみに携帯の機種判定はこちらのサイトを参考にさせていただきました。

MEMORVA

パソコンのブラウザと同様に、ドコモ、au、ソフトバンクの各携帯電話のブラウザのユーザーエージェントをプログラムで取得することができます。
ユーザーエージェントを利用して機種判別やキャリア判別を行うことができます。
ユーザーエージェントには、ドコモなら「DoCoMo」、au・TU-KAなら「UP.Browser」、ソフトバンクなら「J-PHONE」、「Vodafone」、「SoftBank」という文字が含まれてます。
これでキャリア判別を行います。

携帯ブラウザのユーザーエージェント（User-Agent）による機種判別、キャリア判別


SamplePage.html

<html>
    <div>PCサイト</div>
</html>

SamplePage_dokomo.html

<html>
    <div>ドコモ携帯</div>
</html>

SamplePage.java

public class SamplePage extends WebPage {

    public SamplePage() {

        // ユーザエージェントによってリクエストがあったPCを判定する
        HttpServletRequest httpRequest = ((ServletWebRequest) getRequestCycle().getRequest()).getHttpServletRequest();
        String agent = (String)httpRequest.getHeader("User-Agent"); // TODO 悪意の第３者はnullでよこすかも
        if(agent.indexOf("DoCoMo") != -1){
            _usertype = "dokomo";
        }
        else if(agent.indexOf("UP.Browser") != -1){
            _usertype = "autuka";
        }
        else if(agent.indexOf("J-PHONE") != -1){
            _usertype = "softbank";
        }
        else if(agent.indexOf("Vodafone") != -1){
            _usertype = "softbank";
        }
        else if(agent.indexOf("SoftBank") != -1){
            _usertype = "softbank";
        }
        else{
            // 上記以外はすべてPCからだろう・・・
            _usertype = "";
        }

    }

    // アクセスしてきたユーザPCの情報
    private String _usertype;

    // このメソッドで返す文字列がPageクラスのhtml名（拡張子を除く）に追加されるらしい
    public String getVariation() {
        return _usertype;
    }
}


　一応ドコモの携帯シミュレータ2では思ったとおり返してくれた。<wicket:child > タグを使ってテンプレートを作っている場合も同じ。上の方法だとテンプレートもサブクラスのHTMLも携帯ごとに分ける必要があるのかな。自分の作ろうとしているものはサイト全体をPCから来る場合、携帯から来る場合に分けたいと思っていたのでコレでOKなのかな？

　・・・しかしシミュレータ上の画面だけでも全然勝手が違うねぇ・・・