(Aterm®3500R＋iPhone®)ローカル環境(LAN)内のPCやWebサーバにアクセスする設定

2014/04/16 2014/11/22

WordPress™などのサイトを運営していてローカル環境で開発している場合に、
RWD(Responsive web template)などを導入した場合には、
持っている実機のiPhone®を利用して表示の確認を行いたい場合もあることと思います。
そんな時にはiPhoneをWiFi経由でローカル環境内に参加させて表示の確認を行うと便利です。

はじめに

通常、RWDなどの表示の確認を行う場合にはエミュレータを利用すると便利です。
過去にご紹介したエミュレータは以下のようなものです。

iPad®のサイト確認にはスマートフォンエミュレータ(AIR iPad)が便利
 iPhone®のサイト確認にはスマートフォンエミュレータ(AIR iPhone)が便利
 サイト確認にはガラパゴス携帯(フューチャーフォン)エミュレータが便利
 FireMobileSimulatorの機能拡張をGoogle™Chromeに導入
 FireMobileSimulatorの機能拡張をFirefoxに導入

【お勧め！】　サイト確認にはスマートフォンエミュレータ(Mobilizer)が便利

とは言ったものの、エミュレータはエミュレータです。
たとえば、新しくアプリのインストールはできません。

ということは、iPhone版のChromeなどの表示確認ができません。
それでも実際に確認をしたいと思った際には「公開されているサイトで表示すればいい」ですね。

でも実際、開発をおこなったりする過程ではどうしても公開できる状態ではないものもあります。
そうした時にはrobots.txtでブロックしたりパスワード保護したりといろいろアプローチはあると思いますが、
初期導入の面倒くささ　さえ乗り切ればローカル環境にWebサーバを立てる方法も一つです。

そんな内部で独自に立てているWebサーバに対してiPhoneからアクセスしようという趣旨です。

Aterm®3500R（WiMax）のローカル環境設定

ここではAterm3500RというWiMaxルータを例にご紹介しますが、
Aterm3500Rには少し癖があって、WiFiにてアクセスしてきた場合に、
ローカル環境へのアクセスを制限する機能が備わっています。

当然といえば当然です。

ご近所さんにはアクセスポイントは見えてしまっていますから。
万が一のことを考えて、自宅のLANにはアクセスさせない設定があるのはありがたいです。

しかし、この設定が仇となってアクセスができない場合にも直面します。

以下、投稿を参考にしていただいて、
iPhoneからWiFi接続するSSIDを「ネットワーク分離機能」が無効なものを選んで接続すれば、
有線LANの環境に対してもちゃんとアクセスが行えるようになります。

Aterm®3500RでWiFi接続した端末を有線LAN環境にアクセスさせる設定

WiMaxルータの設定が完了しているものとして、以後はiPhone側の設定です。

iPhone®のネットワーク設定

iPhoneでホーム画面の[設定]をタップします。
設定メニューにて[WiFi]をタップします。

iPhone設定・WiFi設定

WiFi設定から先ほど確認した「ネットワーク分離機能」が無効なSSIDを選んで接続します。
接続したら[ i ]部分をタップして詳細設定を行います。

ご自宅のネットワーク環境にルータしか存在しないような場合には、
DHCPによる自動割り当てで問題ありません。
もし自宅にDNSサーバなどがある場合は、直接DNSサーバのIPアドレスをDNSに設定します。

アクセスポイント選択とDNS設定確認

これで、ローカルネットワーク内のDNSサーバをiPhoneが参照をするようになりましたので、
ローカル環境のWebサーバなどにアクセスが行えます。
実際にアクセスを行ってみると、以下のように表示されます。

ローカル環境のWebサーバ表示

実機で確認をする必要性

しかし、エミュレータが多く普及している中で、どうして実機のアクセスが必要なのでしょうか。
上記の実機iPhoneによるサイト表示では、検索ボタンがカラム落ちして、
一段下に表示されているのがわかります。

それはエミュレータの表示をみればわかります。

このエミュレータはサイト確認にはスマートフォンエミュレータ(Mobilizer)が便利でご紹介した、
MobilizerによるiPhone4とiPhone5の表示です。
カラム落ちせずきれいに表示されています。

エミュレータによる表示(iPhone4,5)

こちらはiPhone5sの表示です。
こちらもカラム落ちせずきれいに表示されています。

エミュレータによる表示(iPhone5s)

このように、エミュレータと実機では使われているフォントの違いがあったり、
そもそも日本製ではない為、マルチバイト文字（日本語）の再現性が若干違ったりしてしまいます。

さいごに

このような表示のずれが、もし仕事で作成したWebサイトなどで納品後に発覚したら、
「エミュレータで確認したんですが・・・」とは言えませんよね。

それに、あとから修正を行うことになると無用な工数がかさんでしまう結果も招きます。
開発中はエミュレータを利用するとしても、最終的には１回は実機での確認は行っておきたいものです。

Apple®,Apple logo®、Apple Inc.あるいはApple Japanの商標または登録商標です。

iPad®,iPhone®iPod®,iPod classic®,iPod Hi-Fi®,iPod nano®,iPod shuffle®,
iPod Socks®,iPod touch®は、Apple Inc.あるいはApple Japanの商標または登録商標です。

Safariブラウザ、Safari®マーク・ロゴは、Apple Inc.あるいはApple Japanの商標または登録商標です。
当サイトでは以下のガイドラインに基づいて各商標等の取扱いを致します。

Apple Trademark Listに記載の各ソフトウェア及びサービス名に関しては、
Apple製品およびApple Inc.あるいはApple Japanの商標または登録商標等に明記します。

Ａｔｅｒｍは日本電気株式会社の登録商標（第２２９８７７３号）です。

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

WordPress.com、WordPress.net、WordPress.org、WordPress.tv、
WordPressFoundation.orgはWordPress Foundationが
管理運営を行なう正式なトップレベルドメインであるとともに、
WordPress Foundationが運営を行うサービスの名称です。

wordpressはFree Software Foundation, Inc.によってGPL2+でライセンスされています。