Anvilを利用して超絶簡単にバーチャルホスト立ち上げる+ライブリロードする方法

lorem

こんにちは!
StudioSPECのakiraです。

オーストラリアはイースター(ゴールデンウィーク的な連休)だったため、久しぶりの更新になります。

2回にわたってMacに関する内容をお届けしましたが、今回もMacのアプリの紹介です。ただ、今回はWeb制作に関する内容になっているのでどうぞお付き合いお願いします〜。

ちなみに僕は普段もSpecDesignCollegeにてWeb制作の授業を行っているのですが、基本的には初心者の方向けにカリキュラムを組んでいるのと、Mac / Win両方の開発環境を想定していたりと結構内容が限定されています。

そこでここでは授業ではお伝えしきれない便利情報や比較的新しい技術や知識、開発環境の整え方などにフォーカスしていけたらなと思っています。

Anvilを利用して超絶簡単にローカルサーバーを確認する

普段の制作は基本的にgulpを利用しているのであまり使用しないですが、簡易的にはとても使い勝手が良いです。

サクッとサイトルートで書かれたサイトを確認したり、ローカルでは動かないjsなんかを確認したりする時には便利です。

Anvil

 

Anvilの公式サイトからAnvilをダウンロードしてきてインストール。

Anvilのインストールが完了するとメニューバーにアイコンが表示されます。

menu

その際に、Powがインストールされていないと”Install Pow”と表示されるので指示にしたがいPowをインストールしましょう。

ちなみにPowとはMac OS Xで使用できる設定不要なRackサーバです。Michael Jacksonのアレではありません。

http://pow.cx/

AnvilとPowのインストールが完了したら、試しにデスクトップにサイトを作ってみましょう。

デスクトップにテストサイトを作って閲覧してみます

アプリケーションからターミナルを立ち上げて(先日ご紹介したAlfredを利用すると便利です!)試しに以下のコマンドを入力。

mkdir ~/Desktop/anvil

cd ~/Desktop/anvil

touch index.html

Terminal

と、デスクトップにanvilというフォルダを作ってその中にindex.htmlと作成。index.htmlの中には最小限のhtmlを書いておきましょう。

html5

準備が完了したらメニューバーから対象のサイトを追加します。

setting

サイトを追加したらメニューバーから立ち上げます。

up

するとこのようにローカルホストでサイトが立ち上がります。

host

簡単ですね(・∀・)!

Live.jsを利用して超絶簡単にサイトをライブリロードする

これもgulpやGrantを利用すると簡単に出来る事なのですが、サクッとサイトを更新したいときなどに役立つので併せてご紹介。

ライブリロードを行うと、ファイルを保存した段階で確認していたブラウザがリロードされます。よって保存する度にブラウザをリロードさせる必要がなくなり、地味にと言うかかなり作業時間の短縮に繋がります。

Live.jsを利用します。

live直接Live.js本体をダウンロードして使っても良いのですが、個々では簡単にCDNで読み込ませて使用したいと思います。

<script src="//cdn.jsdelivr.net/livejs/4/live.js"></script>

こちらのソースをサイトに貼り付けていただければOKです!

あとは先程アクセスしたローカルホストをリロードさせるとライブリロードが開始されます。

lorem

と、とても簡単にライブリロードが出来るようになります!

こんな風に少し工夫するだけで、サイトの制作って楽になります。勿論もっともっとらくする方法があるのですが、それ相応に設定に段階が合ったりするので別の機会にお伝えしたいと思います。

Facebookコメント