enchant.js 関連記事の目次
目次 - enchant.js
http://blog.livedoor.jp/shizuku_kun/archives/51578610.html
注意:今回はWebサーバーを使ったことが全然ない人向けです。
スマートフォンはWi-Fiを有効に
今回は、自分のPC(Windowsとします)をWebサーバーにして、自分の家にあるスマートフォンからenchant.jsアプリ(と言ってもまだクマが表示されるだけですが)にアクセスしてみます。
ネットワークとしては、スマートフォンはWi-Fi接続を行って、LANに接続している状態とします。
XAMPPをダウンロード
XAMPPはApache(Webサーバー)の他に色々入っているのですが、それらも開発する上では入っていて困ることがない(というか、メジャーなソフト)のと、インストールが楽なので、今回はこれをインストールします。
以下のページで、インストーラを使用するバージョンをダウンロード
apache friends - xampp for windows
インストーラに従い、インストール
基本的にデフォルトのままでいいです。
XAMPP Control Panelを起動
インストールしたディレクトリの中に、xampp-control.exeというアプリケーションがあります。
これを起動させましょう。
すると以下のようなパネルが出てきます。
Apacheを起動させる。
コントロールパネルにある"Apache"という文字の右側のStartボタンをクリックして、Webサーバーを動かします。
ボタンを押すと次のようになります。
これでPCがWebサーバーになりました!
PCから自分で立てたWebサーバーの画面を見てみる。
Webサーバーが無事に動いていることを確認してみます。
ウェブブラウザを開き、
を開きます。
XAMPP Windows版へようこそ!おめでとうございます:
システム上にXAMPPが正しくインストールされました!
と書かれた画面が出れば成功です。
kumaディレクトリを動かす
前回作ったkumaディレクトリを表示させる為に移動させます。
XAMPPをインストールしたディレクトリ配下に、htdocsというディレクトリがあります。
ここの中にkumaディレクトリを移動させます。
PCのIPアドレスを調べる
WebサーバーとなっているPCのIPアドレスを調べます。
コマンドプロンプトを開き、ipconfig コマンドを実行します。
自分の家のLANに接続されているアダプターのIPアドレスを調べます。
(家庭内だと大抵の人は 192.168.0.x とか 192.168.1.x になっていると思います)
スマートフォンでクマを表示させる
スマートフォンのブラウザを立ち上げ、
http://<さっき調べたIPアドレス>/kuma/
を開きます。
(しずくくんの場合、IPアドレスは192.168.1.25でした)
クマが表示されました!
これでスマートフォンから動かすことが出来るようになりました!