HTTPでアクセスしてチェックしたいケースとは

Webページを制作している時、多くの場合はそのままブラウザで開けば動作チェックが出来ますが、 サーバーを通してHTTPでアクセスしないと正常に動作しないケースもあります。

つまり、「file:～」ではなく、「http:～」でアクセスしたい。例えば、

• ChromeからAjaxのテストをしたい
• 各種ウィジェットのスクリプトの表示をチェックしたい

Chromeのケースは起動オプション（”–allow-file-access-from-files”）で解決できますし、 ウィジェットもスクリプトの中身を少しいじれば動くことが多いですが、 いずれもWebサーバーを通せば難なく動作するわけで、それがすぐに出来るのならばその方がシンプルではないかな、と思うわけです。

ではどうしようか

既にXAMPP/MAMPPや仮想マシン等でサーバ環境がある場合は良いのですが、 バーチャルホスト等の諸設定をこなすのが面倒くさかったり、とにかくささっと確認したいような場合は、 簡易的なサーバを利用してのチェックがお勧めです。

サッと起動して、サッ確認し、終わったらサッと終了する。

ここでは、3つの方法を提案してみます。

1. SublimeServerでチェックする
2. PHP5.4+のビルトインサーバーでチェックする
3. ローカルプロキシでチェックする

SublimeServer でチェックする

もし貴方がSublime Text 2を使って制作をしているのならば、これを使わない手はないでしょう。 Sublime Serverは、Sublime Text 2で動作する簡易Webサーバープラグインです。

SublimeServer

learning/SublimeServer

Allow you run a HTTP Server in SublimeText 2, and serves all the open project folders

メリットは、作業環境からすぐに実行できる点ですね。

インストール

1. 「Sublime Package Control」をインストール
2. コマンドパレットから 「Install Package」>「SublimeServer」 と打ち込む

※プラグインの導入法については以前書いた記事などをご参考に

使い方

1. 「Tools」>「SublimeServer」>「Start SublimeServer」で起動
2. 確認したいHTMLファイルを開いて、右クリックし、「View This File in Browser」

これで、デフォルトのブラウザで目的のファイルが開かれます。 URLは以下のようになります。プロジェクトがルートディレクトリのような扱いになっていますね。

http://localhost:8080/[folder name]/index.html

ポート番号の「8080」は、「Tools」>「SublimeServer」>「Settings」 で変更できます。

PHP5.4+のビルトインサーバーでチェックする

マシンにPHP5.4以降がインストールされているのあらば、 PHPにビルトインされている簡易Webサーバーが利用できます。

PHP: ビルトインウェブサーバー – Manual

メリットはPHPの動作チェックが出来る点ですが、 簡易的な物なのでrewrite等は動かず、そこらへんに依存するFW等の動作は難しいでしょう。 そういう大掛かりな物は、きちんと仮想環境を構築してテストしましょう。

使い方

※PHP5.4以降が導入済みで、パスが通っている前提で話を進めます。

1. ターミナル（あるいはコマンドプロンプト）を開く
2. 
   

   目的のファイルがあるディレクトリまで移動して、以下のコマンドを実行する

   
   

   php -S localhost:8080

   
   
3. 
   

   ブラウザを開いてアドレスバーにURLを入力する

   
   

   http://localhost:8080/index.html

   
   

実行したディレクトリがルートディレクトリの扱いになります。

ローカルプロキシでマッピングする

これは前述した2つの方法と違い、ローカルでWebサーバーを起動するのではなく、 ローカルプロキシを利用して、或るドメインへのアクセスをローカルのファイルにマッピングする方法です。

…と言ってもピンと来ないですね。

例えば、「http://example.com/index.html」というファイルへブラウザでアクセスするとして、 その「index.html」の内容を、ローカルにあるファイルに差し替える事が出来ます。 そうすることで、あたかもインターネット上にそのファイルがあるかのように振る舞ってくれるわけですね。

Charles

ここでは、ローカルプロキシツールのCharlesを使ってみます。 有料ではありますがクロスプラットフォームで開発されていて、Windows/Mac/Linux版が用意されています。

Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy

使い方

1. 「Tools」>「Map To Local」で設定ダイアログを開きます
2. 「Add」で新しくマッピングを作成します
3. 
   

   下記のような要領で入力して「OK」

   
   

   

   
   
4. 
   

   設定したURLにアクセスします

   
   

   http://local.test/index.html

   
   

ドメインは、名前解決が出来る必要があります。 プロジェクトに使用する予定のドメインを使うか、適当な「local.test」などの名前をあてがってhostsファイルに127.0.0.1などで書き込んでおくか、 あるいはexample.comやlocalhostを利用するなどしましょう。

まとめ

これらの方法は、DirectoryIndexが指定できなかったりパフォーマンスが悪かったりする為、あくまでも簡易的なチェック向けです。 が、それで十分な場合は多いに制作の手助けになってくれる事でしょう。

特にローカルプロキシは、こういったケースに因らず、様々なシーンで開発効率をあげてくれるので、 （むしろそちらの方がメインですね） ぜひとも導入しておくべきだと思います。

Nettuts+ Fetch ってなに？

• Introducing Nettuts+ Fetch | Nettuts+

Nettuts+ Fetchは、名前の通り、Nettuts+からリリースされたSublime Text用のプラグインで、
外部リソースを簡単なコマンドで手元にpullする事ができます。

例えば、普段からよく使うjQueryやリセット用のCSS、
常用するフレームワークや、Wordpress等のCMS等、
設定さえしておけば、コマンド一発（正確には三発）でダウンロード・展開してくれます。

新規プロジェクト用に各種ファイルをセットアップする際に、
一々最新版を公式からダウンロードして設置して…という手間が省ける上、
Sublime Textをメインエディタにすればそのまま作業に移れます。
スタートアップがかなり捗りそうですね。

前準備

Sublime Textのインストール

• Sublime Text – Download

これが無いと何もはじまりはしないので。
2012年1月7日現在ではβ版のバージョン2を入れて見ました。
ちなみに執筆当初1ライセンス$59で、無料でお試しして良いよとの事。

Sublime Package Control のインストール

Sublime Textは「Package Control」という拡張を使うことで
追加のパッケージをサクサク検索・インストール出来ます。
是非入れておきましょう。

Sublime Package Control – a Sublime Text 2 Package Manager by wbond

1. メニューから、“View” > “Show Cnsole” でコンソール窓を表示。
2. 下記の公式のワンライナーを入力してEnter。
3. Sublime Textを再起動して完了。

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation’

（執筆当初のコードです。念の為公式での確認をおすすめします。）

Nettuts+ Fetch を使ってみよう

いよいよ件のプラグインをインストールします。
全入力しなくともコマンドパレットが補完してくれるので楽々安心ですね。

1. コマンドパレットを表示。（Mac:⌘+Shift+p / Win:Ctrl+Shift+p）
2. “Install Package”
3. “Nettuts+ Fetch” を選択・インストール

jQueryとhtml5-boilerplateははじめから設定されているので
試しにこれらをテストしてみましょう。

jQueryを引っ張ってくる (単体ファイル）

1. コマンドパレットを開く。
2. “Fetch” > “Single File” > “jQuery”
3. 現在開いているバッファーがあればそこに、無ければ新たな「untitled」に内容がペーストされます。

html5-boilerplateを引っ張ってくる（zipファイル）

1. 作業用のフォルダを開く。
2. コマンドパレットを開く。
3. “Fetch” > “Package File” > “html5-boilerplate”
4. 複数のフォルダがある場合は、確認を促されます。
5. 選択したフォルダにダウンロードしたzipの内容が展開されます。

設定を足してみよう

設定を足してやれば、勿論その他のパッケージを引っ張って来る事ができます。

1. コマンドパレットを開く
2. “Fetch: Manage remote file”
3. 開かれた設定ファイル（Fetch.sublime-settings）を編集

{
    "files":
    {
        "jquery": "http://code.jquery.com/jquery.min.js"
    },
    "packages":
    {
        "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped"
    }
}

これがデフォルトの状態。JSONで管理されているので編集も楽です。

WordPress日本語版の最新バージョンを引っ張ってこれるように設定してみます。
最新版の場所を教えてくれた@understandardさんにこっそり感謝。

{
    "files":
    {
        "jquery": "http://code.jquery.com/jquery.min.js"
    },
    "packages":
    {
        "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped",
        "wordpress-ja": "http://ja.wordpress.org/latest-ja.zip"
    }
}

これで、“Fetch” > “Package File” > “wordpress-ja” で
Wordpressが好きなフォルダに展開されます。

俺々フレームワーク等もGithubなりGistなりでWeb上にあげておけば簡単にpullできますね。

まとめ

Fetchコマンドもさることながら、このSublime Textというエディタ、かなりよさそうです。
拡張性も高く、既に多くのプラグインがリリースされている他、
Viキーバインドでも使う事ができます。

まだβ版でバグも多いそうですが、今後チェックしていきたいですね。