YeomanではじめるHTML5 – (1) 環境構築

HTMLやCSS、Javascriptなどのフロントエンドを作るための便利なツールがとてもたくさんあります。その中の1つ、Yeoman(ヨーマン)を使ってHTML5を簡単にコーディングしてみましょう。

Yeomanを使うと、ライブリロード(ファイルの変更を検知して、自動でブラウザをリロードしてくれる機能)だったり、SassやCompassのビルドも自動で行ってくれたりととても便利になります！そのデモをGIFアニメーションにしてみました。

 

ただ、Yeomanを使えるようにするためには、意外と大変なんです。今回はその環境構築を出来る限りわかりやすく紹介します。環境構築の対象としては、Macを想定しています。HTML5とYeomanについては、こちらをご覧いただければ。

では、「ターミナル」を開いて、作業を始めましょう。「アプリケーション」→「その他」に入ってますよ！

homebrewのインストール

まずは、Mac環境に開発で必要なツールを簡単に導入できるhomebrewというものをインストールします。「brew install ◯◯」で簡単に色んなモノがインストールできちゃうのでとっても便利ですよ。

その前に、「Command Line Tools」というものをインストールしなければいけないのですが、MacのOSによって方法が異なります。

MacのOSがYosemite(Mac OS X 10.10)の人

以下のコマンドを入力して実行してください

すると、以下の様なポップアップが出るので、「インストール」ボタンを押します。

インストールが完了するまで待ちましょう。

MacのOSがMavericks(Mac OS X 10.9)以前の場合

OSがMavericks以前の場合、コマンド「xcode-select –install」を実行して「インストール」ボタンを押しても、警告が出てインストールできません。

色々と手順が難しいので、こちらのブログを参考にインストールしてみてください。

Xcode5にCommand Line Tools（コマンドラインツール）をインストールする

Command Line Toolsのインストールが完了したら、Homebrewのインストールをします。

Homebrew — The missing package manager for OS X

以下のコマンドを実行するだけ！簡単！

途中でEnterキーの入力と、PCのパスワードの入力を求められます。

ちなみにこのコマンドは、Homebrewサイトの中程に記述されているので、うまく行かなかった場合はそこを見てみてくださいね。

 

インストールが完了したら、homebrewが正しく動くか以下のコマンドで確認しましょう。

バージョンが表示されればOKです。

試しに、gitコマンドをインストールして見ましょう。

 

nodebrewのインストール

node.jsをご存知でしょうか？node.jsとは、サーバで動くJavascriptライブラリのことです。node.jsのライブラリを使うことで、色々なことが簡単で便利になるので、とりあえず入れましょう。

node.jsのインストールって本当はとても大変なのですが、そのインストールをとっても簡単にしてくれるのがこのnodebrewです。メンドクサイこと全部nodebrewが管理してくれます。優れもの。

インストールも簡単で、以下のコマンドを実行するだけです。

うまく行かなかった人は、以下を実行してみてください。2つに分けて実行してます。

実行後、以下のコマンドで、「環境変数」を追加します。これは、nodebrewコマンドを使えるようにするためのものです。※ターミナルでファイル編集できる方は直接.bash_profileを書き換えてください。

そして、homebrewをつかってnode.jsをインストールします。とりあえず新しいv0.11.15を入れてみましょう。

実行するとびっくりするぐらい文字が流れていきますが、焦らずにじっくり眺めて待ちましょうｗｗ

完了したら、以下を実行して正しくインストールされているか確認しましょう。

バージョンが表示されればOKです。

npmのインストール

npmはnode.jsのライブラリを簡単にインストールできちゃうツールです。これもさくっとインストールします。

yeomanのインストール

yeomanとは、色々なライブラリを組み合わせて、ベストな形にしたひな型を作ってくれちゃうツールです。その中にHTML5のひな型もあって、とても簡単に作れるようになります。

こちらもインストールが簡単になっております。先ほどインストールしたnpmを使ってインストールします。ちなみにbowerとgruntも必要なため、これらも一緒にインストールします。

「yo」がyeoman、bowerとgrunt-cliについてはまた別の機会に紹介します。

サンプルのwebappを作成

以下コマンドを打って、一度Enterを押すだけでHTML5のWebページができちゃいます。

後は、以下コマンドを実行すると、ローカルでサーバを起動してくれて、出来上がったWebページをブラウザで見ることができます。

この「grunt server」が動いている間は、一番上のデモ画像のようにファイルの変更を検知して、ブラウザを自動でリロードしてくれるようになります。これがとっても便利！grunt serverを止めるには「Control + C」で止まります。

まとめ

homebrewからyeomanまで一気にインストールして、HTML5の開発環境を整えてみました。

yeomanを使うと、色んなひな型をコマンド１つで準備でき、2、3個のコマンドでバージョン管理ができちゃうようになります。またSassやCompassを使う環境も簡単に準備できるので、ぜひ環境を整えてみてください！

---

さくっと送って、さくっと受け取る
ファイル転送サービス　「tenpu」

tenpuは、一度に2GBまでのファイルを無料＆会員登録の不要で、さくっと転送できます。
シンプルで美しい背景画面はファイルを受け取る人にも気持よく使えます。
有料プランは最大20GBまで転送可能、背景画像変更、ファイルの保存期間変更など無料版より裕福な機能を用意しています。
有料プランの詳細はこちらからご確認下さい。