LoginSignup
1
1

More than 5 years have passed since last update.

HTMLでコーディングするときに面倒な設定なしに3秒でプレビュー環境を作る方法。

Last updated at Posted at 2014-07-28

これ便利。

基本的なことだけど、HTMLファイルをローカルでファイルプレビューしてもパスとかがうまくつながってなくてキレイにプレビュー出来ない。
非テッカーに教えたい「HTMLでコーディングするときに面倒な設定なしに3秒でプレビュー環境を作る方法。」

rubyインストール(気をつけるのは1点だけ)

windows版 Rubyはインストールはこのページから出来ます。

http://rubyinstaller.org/
ダウンロードページに行き、一番上のRuby 2.0.0-p481とか言うのをクリック。
ダウンロードしたらruby.exeをインストール

「環境変数PATHを設定する」に忘れずにチェックを入れる。

インストールの途中で「Ruby の実行ファイルへ環境変数PATHを設定する」にチェックを入れる。

これが設定されていないと使えません。
あとでも設定出来ますが、面倒なのでインストール時にやっておいた方が楽。

webrick.batをつくる

webrick.bat
ruby -run -e httpd -- --port=30000 .

適当な空のテキストファイルを作り上記をコピーして貼り付け。
webrick.batというファイル名で保存する。

HTMLとかの作業しているフォルダにwebrick.batを入れてダブルクリック。

黒い画面が立ち上がります。

ブラウザを立ち上げ

http://localhost:30000/
と入力。

webrick.batを閉じてしまうと、アクセスしても何も表示されなくなります。
なので作業中はwebrick.batは開きっぱなし。

どこでもプレビュー環境を作れる。

webrick.batを他の場所にコピーすれば、その場所をブラウザでプレビューすることが出来ます。ただし2ついっぺんにwebrick.batファイルを開くことはできません。どちらかのwebrick.batファイルは閉じて下さい。

自分以外の作業者に、ちょっとしたHTMLの作業をさせたいときなどに便利。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1