スマホサイト・アプリをつくろう。スマホサイト・アプリをつくろう。-普段の開発はVirtualBoxで動かしているゲストOS上で行っています。今回はこのローカル開発環境に携帯実機でアクセスする方法をご紹介します。仮想化ソフトを使ってローカル開発環境を作れば、自分でDNSサーバーをたてたり、hostsを書き換えれば、ゲストOSの環境にブラウザでアクセスできます。PCサイトだとこれで問題ないのですが、携帯サイトの場合はこれでは不十分に感じます。(例外もあるでしょうが)ソースがあるのは閉じたネットワークなので実機からインターネット経由ではアクセスできないためです。そのため、実機で確認するためには外部からアクセスできる場所を用意し、ゾーン設定をして、環境を読み替えるロジックを用意して、そこにソースを配置しなくてはなりません。なにより変更点があれば、その都度ソースを転送する必要があります。この毎回転送するというのが問題で、一回の作業は短く簡単でも、開発期間中の膨大な確認回数を考えると無視できない時間になるのではないでしょうか。「どうにかしてソースを外部のサーバーと同期させる。」という考え方もあるとは思いますが、今回は「どうにかして外部からローカルへアクセスさせる。」方向でいきたいと思います。具体的には外部のサーバーへのアクセスをSSHポートフォワードによって開発環境に転送させてみます。下記の様なアクセスになる予定です。必要なもの【ホストA】ローカル開発環境[http,ssh]【ホストB】インターネット上のアクセス可能なサーバー[http,ssh](要root権限)ドメイン(サブドメイン可)今回ご紹介する方法では以上のものが必要になってきます。ゾーン設定ローカル開発環境にアクセスするためのドメインを用意します。サブドメインでも大丈夫です。今回の説明には以下のものを使います。開発環境にアクセスするためのサブドメインこの「dev.example.com」をインターネット上でアクセスできるサーバーへ向けます。上記で設定したドメイン「dev.example.com」でアクセスされた時の動作を設定します。ウェブサーバーにはApacheを使っているのでmod_proxyを使ったポートフォワードの設定を記述します。今回は「10080」にしてありますが転送するポートは被らなければ何でも良いです。http://localhost:10080</VirtualHost>これで「dev.example.com」へのアクセスは「localhost:10080」へ変換される様になりました。上記のステップで変換された「localhost:10080」を受け取り【ホストA】ローカル開発環境へと転送するために、SSHトンネルを繋ぎます。なんとなく難しそうな名前ですが至って簡単です。dev.example.com接続先(ホストB)で「10080」ポートをリッスン(受け取り)しローカルの「80」ポートへ転送するという設定を「-R」オプションで実現しています。【ホストA:ローカル】ヴァーチャルホスト設定ここまでくれば後はカンタンで、「dev.example.com」でローカル開発環境のウェブサーバーにアクセスできる様にヴァーチャルホストの設定をするだけです。開発に使っている設定があるでしょうから、そこに追加するだけではないでしょうか。実機確認の必要性これで簡単に実機確認を行う準備ができました。携帯はまだまだ端末によって挙動が異なることが多いです。エミュレーターも宛にならないケースが多いです。実機でデバッグしてみるまで分からないバグも多くあるでしょう。できるだけ実機で確認する習慣をつけたいですね。スマホサイト・アプリをつくろう。まめの木|モバイルSEO見積ツール株式会社セルバは携帯サイト作成・制作、メール配信、店舗検索など、携帯サイトの様々なサービスをご提供しています。