Cloud9上でYeomanを使ってAngularJS+Typescriptの環境を作る

はじめに

Cloud9をご存知でしょうか。最近静かで環境も整っている作業場所としてまんが喫茶（快活クラブさんがまじすげー）を利用しています。RailsやったりPlayやったりしたい時にサーバ上でVIMでゴリゴリやってましたが、まーミスが多い（笑）。そこでどこでも共通で使えちゃうしIDEの恩恵を享受できちゃうしの神サービスCloud9を利用しています。
今回はCloud9上でサクサクっとWebクライアントでも作ろうかと環境を整えてみたので共有します。以下を利用していますが実はそんなに使ったことありません。なのでそれぞれ勉強した内容も別途まとめていこうと思います。

AngularJS：有名なJavascriptのMVC フレームワークさん
Typescript：静的型付けって素敵言語さん
Yeoman：Yo/Grunt/Bowerを組み合わせてサクッとテンプレート作ってくれるツールさん

さて

環境準備

node.js/npmのインストール

Cloud9の場合はblankプロジェクトでもnode.js/npmはインストールされています。
その他の環境を利用する場合は自前でインストールしておく必要があります。

Yeomanのインストールとジェネレータのインストール

Yeomanとテスト実行用のKarmaとAngularJSのジェネレータをインストールします。

npm install -g grunt-cli bower yo generator-karma generator-angular

※もしからしたgenerator-angularはgithubからインストールしたほうがよいかも（https://github.com/yeoman/generator-angular.git）

Ruby/compassのインストール

Sassを利用するため実行環境のCompassとその元となるRubyをインストールします。
Cloud9の場合はRubyはすでに入っているため以下のコマンドでCompassをインストールします。

gem install compass

プロジェクトの作成

yoコマンドの実行

「yo angular [appname]」コマンドで新しいプロジェクトを作成します。
Typescriptを利用することより「--typescript」オプションを利用します。
※ここではアプリケーション名を「webtemp」としています。適宜変更してください。

yo angular webtemp --typescript

Gruntの実行

サーバの起動準備（Cloud9のみ）

Gruntで「grunt serve」を実行するとWebサーバが立ち上がりアクセス可能になりますがCloud9上ではこのままではアクセスすることができません。そのため以下のようにGruntfile.jsを書き換えます。

    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },

上記を以下に書き換える

    connect: {
      options: {
        port: 8080,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: '0.0.0.0',
        livereload: 35729
      },

サーバの起動

以下のコマンドでサーバを起動します。

grunt serve

Cloud9の右上にある「Share」ボタンをクリックし「Application」のリンクを開くとアクセスすることができるようになります。

終わりに

今回はそれほど躓くこともなく進めることができました。だいたい最初にやるときにはバージョンが古すぎる情報を参照しちゃってたりでうまくいかないことが多いのですが。

日々の反省

学んだことをつらつらと書いていきます。