1.x tutorial smartphone

スマートフォン アクセス

開発・モックサーバを使った開発を行っている環境で、スマートフォンからアクセスする手順を紹介します。

環境

このチュートリアルではMac OSX 10.8 を例に使った説明になります。

Mac OS Xのインターネット共有(パーソナルホットスポット)を使う

OS付属の「インターネット共有」を開始します。

192.168.2.1が使用できるようになっていると思います。

OSX 10.7 の場合は、10.0.2.1 です。

$ ifconfig  | grep 192
inet 192.168.2.1 netmask 0xffffff00 broadcast 192.168.2.255

スマートフォンでの開発サーバーへのアクセス

お使いのスマートフォンで「ホットスポット」にアクセスし、http://192.168.2.1:1109にアクセスしてください。 開発サーバが表示されます。

スマートフォンのアクセスのみ設定ファイルを書き換える

上記の設定後にスマートフォンでのアクセスのみ、設定ファイルを書き換えたいケースが出てくると思いますが、 Beezでは、conf/[env]/[key].jsonの、[key].extendを設定することで[key].requirejsを上書きしてアクセスしてきたUAにより 設定ファイルを変更する機能があります。

extend.condition

上書きする条件を定義します。

上書きする条件はUserAgentに含まれる文字列を元に判定します。

====

// この設定では、Android, iOS のアクセスがあった場合に設定を上書きします。
"extend": { // Override Setting of requirejs
    "condition": {
    "ua": ["android","ios"] // The override criteria by UserAgent
},
...  // つづく

extend.content

上記の設定をした上で以下のようにconf/[env]/[key].jsonに設定を書き加えることにより、 [key].requirejs以下が、AndroidとiOSによるアクセスが来た場合に設定が上書きされます。

設定例

// conf/local/develop.json Android/iOSアクセス時に上書きする設定

...  // つづき
"content": {
    "config": {
        "beez.core": {
            "url": {
                // OSX 10.8 internet share mode
                //"app":"http://192.168.2.1:1109/m/tutorial", // application server url
                "api":"https://api.github.com", // api server urlRoot (Backbone.Model#urlRoot)
                "base":"http://192.168.2.1:1109/m/tutorial/s", // require.js#data-main url
                //"stat":"http://192.168.2.1:1109/m/tutorial/s", // static file server url (css|image|...)
                "vendor":"http://192.168.2.1:1109/m/tutorial/vendor" // require.js or library url
            }
        }
    }
}
// conf/local/develop.json 通常のアクセス時の設定

// Setting require.js
"requirejs": {
    ....
    "config": {
        // configuration information used by beez
        "beez.core": {
            "url": {
                //"app":"http://0.0.0.0:1109/m/tutorial", // application server url
                //"api":"https://api.github.com", // api server urlRoot (Backbone.Model#urlRoot)
                "api":"http://0.0.0.0:1109/p", // api server urlRoot (Backbone.Model#urlRoot)
                "base":"http://0.0.0.0:1109/m/tutorial/s", // require.js#data-main url
                //"stat":"http://0.0.0.0:1109/m/tutorial/s",// static file server url (css|image|...)
                "vendor":"http://0.0.0.0:1109/m/tutorial/vendor" // require.js or library url
            },
....

アクセスごとにUserAgentの判定を行いますので、サーバーの再起動などは必要ありません。 今回はMac OS Xのインターネット共有を例に説明しましたが、同一ネットワーク内にPCとスマートフォンがあればルータを経由したアクセスなども可能です。