Collegeとはオーストラリア、シドニーに拠点を置くグラフィック、ウェブデザインスクール。現役で活躍するデザイナーから最先端のデザインレクチャーを受けることが出来る実践的デザインスクールです。2015年4月7日こんにちは!StudioSPECのakiraです。オーストラリアはイースター(ゴールデンウィーク的な連休)だったため、久しぶりの更新になります。2回にわたってMacに関する内容をお届けしましたが、今回もMacのアプリの紹介です。今回はWeb制作に関する内容になっているのでどうぞお付き合いお願いします〜。Win両方の開発環境を想定していたりと結構内容が限定されています。そこでここでは授業ではお伝えしきれない便利情報や比較的新しい技術や知識、開発環境の整え方などにフォーカスしていけたらなと思っています。Anvilを利用して超絶簡単にローカルサーバーを確認する普段の制作は基本的にgulpを利用しているのであまり使用しないですが、簡易的にはとても使い勝手が良いです。サイトルートで書かれたサイトを確認したり、ローカルでは動かないjsなんかを確認したりする時には便利です。Anvilの公式サイトからAnvilをダウンロードしてきてインストール。Anvilのインストールが完了するとメニューバーにアイコンが表示されます。Pow”と表示されるので指示にしたがいPowをインストールしましょう。Xで使用できる設定不要なRackサーバです。Jacksonのアレではありません。http://pow.cx/AnvilとPowのインストールが完了したら、試しにデスクトップにサイトを作ってみましょう。デスクトップにテストサイトを作って閲覧してみますアプリケーションからターミナルを立ち上げて(先日ご紹介したAlfredを利用すると便利です!)試しに以下のコマンドを入力。index.htmlと、デスクトップにanvilというフォルダを作ってその中にindex.htmlと作成。index.htmlの中には最小限のhtmlを書いておきましょう。準備が完了したらメニューバーから対象のサイトを追加します。サイトを追加したらメニューバーから立ち上げます。するとこのようにローカルホストでサイトが立ち上がります。簡単ですね(・∀・)!Live.jsを利用して超絶簡単にサイトをライブリロードするこれもgulpやGrantを利用すると簡単に出来る事なのですが、サクッとサイトを更新したいときなどに役立つので併せてご紹介。ライブリロードを行うと、ファイルを保存した段階で確認していたブラウザがリロードされます。よって保存する度にブラウザをリロードさせる必要がなくなり、地味にと言うかかなり作業時間の短縮に繋がります。Live.jsを利用します。Live.js本体をダウンロードして使っても良いのですが、個々では簡単にCDNで読み込ませて使用したいと思います。src="//cdn.jsdelivr.net/livejs/4/live.js"></script>こちらのソースをサイトに貼り付けていただければOKです!あとは先程アクセスしたローカルホストをリロードさせるとライブリロードが開始されます。簡単にライブリロードが出来るようになります!こんな風に少し工夫するだけで、サイトの制作って楽になります。らくする方法があるのですが、それ相応に設定に段階が合ったりするので別の機会にお伝えしたいと思います。Posts【企画書やチラシにひと工夫】ビジネスに即役立つデザイン10のコツ。【アメリカで大人気!】自分の似顔絵をアメコミ風マンガみたいに作成出来て遊べるアプリBitstripsが面白い!Macのアプリアイコンを自分好みにカスタマイズ!WordPressに画像付き記事をCSV一括登録するなら【セキュリティ編】Macを購入したらやっておきたい初期設定など変圧機って必要?オーストラリアの電圧についてシドニー近郊でカンガルーと遊ぶならモリセット(morisset)がおすすめ!Macユーザー必須の神アプリAlfredでMacをより快適に使いこなす!jQueryプラグインを利用して簡単に動きのある表現を。Chrome5周年】Chrome×初音ミクにみたウェブの可能性POSTSCOMMENTSTAGSRecentArchivesTagsRecent手軽にデザインのインスピレーションを。