頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(cel)

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]をタップします。

01_iPhone設定・WiFi設定

iPhone設定・WiFi設定

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

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

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

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

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

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

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

実機で確認をする必要性

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

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

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

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

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

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

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

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

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

プロモーション(btm)

Google or AdMax Promotion (cel)

さいごに

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

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


*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - iPhone, ネットワーク ,

  関連記事