【準備】環境を整える、iPhoneからローカルホストへアクセスできるようにする

環境

下記のような環境で作業をすすめていきます。

• OS：Windows 10 Pro
• テキストエディタ：Microsoft Visual Studio Code

Visual Studio Codeはフリーソフトでプラグインも豊富なので、テキストエディタとして個人的には気に入っています。

あとはディレクトリ管理をしっかりとしないといけないなと思っています。

gitやsvnなどを使ったバージョン管理もしたいなぁ～と思っていますが、何も知見がないためこれまたひと苦労しそうなのでとりあえずは保留。

iPhoneからローカルホストへアクセスできるようにする

スマホ（私はiPhoneを所有）からもページ表示のデバッグをできるとよいなと思ったので、ローカルホストを建ててiPhoneからアクセスできるようにしました。

やったこと

1. 適当にindex.htmlを作成する

超適当です。bodyにtestとだけ書きました。

（Amebaでソースコード貼り付けどうやるんだろ・・・)

2. ローカルサーバーを建てる

今回はVisual Studio Codeの『Live Server』というプラグインを利用しました。

「拡張機能」からLive Serverで検索します。

インストールが終わってプラグインが有効になると、タスクバーに「Go Live」という文字が現れます。

文字をクリックすると、「Port : 5500」と表示され、デフォルトブラウザにローカルサーバーとして起動したindex.htmlが表示されます。

3．PCのIPを確認する

Win + R → cmd　などでコマンドプロンプトを起動し

" ipconfig "と入力します。PCのIPは192.168.1.12だそうです。

4. iPhoneをPCと同じネットワークのWi-Fiに接続し、IPを確認する

設定→Wi-Fiから接続したネットワークの( i )を選択し、IPを確認します。

iPhoneのIPは192.168.1.3だそうです。

念のため、コマンドプロンプトでpingを叩いてみたところ、ちゃんとレスポンスしていました。

5. iPhoneのIPに対してファイヤーウォールルールを開放する

私のPCではESETセキュリティを使用しており、ファイヤーウォール管理はすべてESETに委ねています。

使うバージョンによってUIが変わるため参考にならないかもしれませんが、私の場合は

　設定→ネットワーク保護→ファイヤーウォール→(歯車アイコン)→設定

　→詳細→ルール

から下記のページに飛べました。（まぁまぁ深い）

6. iPhoneのブラウザでアクセスする

SafariなどのURL欄にPCの(IPアドレス:ポート番号)と入力してみます。

今回の場合は

　192.168.1.12:5050

と入力します。

無事表示されました。（文字ちっさ）

これでスマホでもページ表示のデバッグをできそうです。

次回はスマホとPCで別ページ表示する方法について検討してみたいと思います。

kyou