カテゴリー
コンピューター

Windows 10 に Yeoman をインストールして、AngularJS 開発を始める環境を構築する手順

Yeoman を導入する環境

  • MacBook  Pro (Retina, 13-inch, Late 2012)
  • Boot Camp バージョン 5.1
  • Windows 10 Pro

Yeoman を導入する大まかな進め方

の公式チュートリアルを途中まで実践いたします。今回の目的は環境構築ですので、Step 5: Preview your app in the browser まで行います。他には、

の「Ruby インストール」「Bundler, Compass インストール」以外も参考にいたします。

手順 0. Yeoman を導入するにあたってのポイント

  • 作業は C:¥tmp で行う。予めフォルダを作成しておくこと。
    • パスが長くなるためドライブ直下に近い場所で作業する。
    • C:¥（ドライブ直下）だと一般ユーザのコマンドプロンプトでは権限が足りないため、tmp というフォルダを作り、そこ移動して作業する。
    • C:¥ に作るフォルダ名もできるだけ短くしておく

それでは、Yeoman をインストールしてまいりましょう♪

手順 1. Node.js と npm(Node にバンドルされている) をインストール

  1. Node.js ダウンロードページ の「Windows Installer」アイコンからダウンロード
  2. ダウンロードした node-v0.12.7-x86.msi を実行
  3. すべてデフォルトのまま、インストール
  4. コマンドプロンプトから確認 
    >node --version && npm --version
v0.12.7
2.11.3

>

手順 2. Git インストール

  1. Git の「Downloads for Windows」からダウンロード
  2. ダウンロードした Git-1.9.5-preview20150319.exe を実行
  3. Adjusting your PATH environment 画面では、「Use Git from the Windows Command Prompt」を選択し、コマンドプロンプトから使用できるように設定する。残りはデフォルトのまま進める。
    Git インストール時は「Use Git from the Windows Command Prompt」を選択し、コマンドプロンプトから使用できるように設定
  4. コマンドプロンプトから確認 
    >git --version
git version 1.9.5.msysgit.1

>

手順 3. Yeoman インストール

  1. コマンドプロンプトから次のコマンドでインストール。npm を使って、yo、bower、grunt をインストールする内容 
    >npm install --global yo bower grunt-cli
  2. 次のコマンドで確認 
    >yo --version && bower --version && grunt --version
1.4.7
1.4.1
grunt-cli v0.1.13

>

手順 4. AngularJS プロジェクトのひな形ジェネレーターのインストール（ここまでは 1 回だけ行う手順）

こちらのページのプロジェクトひな形を導入いたします。

  1. コマンドプロンプトから次のコマンドでインストール。 
    >npm install --global generator-angular

確認用のコマンド等は特にございません。

手順 5. プロジェクトフォルダ作成（ここからはプロジェクトを作る度に行う手順）

今までは必要なソフトウェアなどのインストールでした。これからは作成するアプリ、プロジェクトを実際に作ってまいります。

C:¥tmp フォルダの mytodo というプロジェクト名（=フォルダ名）といたします。

以前に適当な場所で進めましたところ、階層が深く、フォルダ削除ができなくなってしまいました＞＜。ですので、C:¥tmp でプロジェクトを作成いたします。

そのために、コマンドプロンプトは管理者権限で実行いたします。cd c:¥tmp などですでに移動しているものとします。

>mkdir mytodo && cd mytodo

もしくは、エクスプローラーで、C:¥ を表示してそこに tmp¥mytodo フォルダを作ってもよいですわね♪

手順 6. yo を実行してひな形を作成

コマンドプロンプトでの作業となります。

mytodo がカレントフォルダといたします。

  1. 次のコマンドを実行 
    >yo angular

    初回のみ、次を聞かれる。Enter（Yes）をタイプ

    [?] ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
==========================================================================: (Y/n)
  2. n をタイプ 
    ? Would you like to use Sass (with Compass)? (Y/n)
  3. y をタイプ 
    ? Would you like to include Bootstrap? (Y/n)
  4. そのまま Enter をタイプ 
    ? Which modules would you like to include? (Press <space> to select)
>(*) angular-animate.js
( ) angular-aria.js
(*) angular-cookies.js
(*) angular-resource.js
( ) angular-messages.js
(*) angular-route.js
(*) angular-sanitize.js
(*) angular-touch.js
  5. 次のエラーが出た場合は、y を入力し Enter。conflict package.json は一時的なエラーとのこと。 
    conflict package.json
? Overwrite package.json? (Ynaxdh) ? May bower anonymously report usage statisti
|s to improve the tool over time? (Y/n) -
  6. 止まるので、Enter をタイプして進める。
    yo コマンド実行時に止まったため、Enter をタイプしたら進んだ。
  7. 5分ほどかかって完了。

手順 7. 動作確認

テスト用の静的サーバを起ち上げて確認いたします。ウェブサーバで確認できるなんて実践的ですの♪

  1. コマンドプロンプトで、次を実行 
    >grunt serve
  2. ブラウザが自動的に立ち上がり、URL が http://localhost:9000/#/ のページが表示されたら OK
  3. 終了する時は、コマンドプロンプトで Ctrl + c

おわりに

ポイントとして挙げました、「C:¥ 直下に近い場所で作業する」は作成したプロジェクトを削除しようとしてエラーとなったため、そのようにしております。

エラー内容は、パスが長すぎて削除できない、という趣旨でした＞＜。残し続けるのも嫌ですので調べましたら、次のページを参考にして何とか削除することができました♪ありがとう存じます！

以上です。

コメントを残す