albatrosary's blog

UI/UXとエンタープライズシステム

YEOMAN Advent Calendar 6日目:「Let's Scaffold a Web App」をやってみた

今日は休日ですのでYEOMANサイトにあるコードラボをやってみます。このエントリーは「YEOMAN Advent Calendar 2014」12月6日の記事です。

YEOMAN Advent Calendar 2014 - Adventar

コードラボ(約1時間)では、YEOMANの助けを借りて、一から完全に機能するWebアプリケーションを構築します。またbruntとbowerを使用します。サンプルアプリはAngularJSを利用します。

f:id:albatrosary:20141206112225p:plain

Meet Yeoman

YEOMANはコマンドひとつかふたつで、Webアプリケーション全体またはコントローラとモデルのような個々のピースのための定型的なコードを書くことができます。YEOMANは、プレビュー用Webサーバーを起動します。編集しているファイルを監視しているのでSassを変更するとコンパイルします。YEOMANのユニットテストは、最小限に抑えコードを連結し、画像に加え、より多くの最適化を実行することができます!

Step 1: Set up your dev environment

yoのインストールとか色々環境設定します。

  • Install prerequisites
  • Install the Yeoman toolset
  • Confirm installation

Step 2: Install a Yeoman generator

Install an AngularJS generator

$ npm install --global generator-angular@0.9.2

Step 3: Use a generator to scaffold out your app

Create a project folder

$ mkdir mytodo && cd mytodo

Access generators via the Yeoman menu

$ yo

sudo でないと動かない環境の場合 yo と打つのではなく「sudo yo angular」としないと困ったことになります。そうこうしているうちにインストール完了です。細かい手順はサイトを見てください。

f:id:albatrosary:20141206113403p:plain

Step 4: Review the Yeoman-generated app

f:id:albatrosary:20141206113655p:plain

各ディレクトリの意味やファイルの内容がサイトに記載されています。読みましょう!

Step 5: Preview your app in the browser

アプリケーションサーバを起動します。とても簡単に起動することができます。

$ grunt serve

簡単に...

〜 省略 〜 
Running "clean:server" (clean) task

Running "wiredep:app" (wiredep) task
Warning: ENOENT, no such file or directory '/Users/albatrosary/Project/mytodo/app/bower.json' Use --force to continue.

Aborted due to warnings.


Execution Time (2014-12-06 02:42:48 UTC)
loading tasks   19ms  ▇▇▇▇▇▇▇▇▇▇▇ 7%
clean:server     6ms  ▇▇▇▇ 2%
wiredep:app    237ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 89%
Total 266ms

$

簡単ではなかった...

気を取り直して npm install -g generator-angular からやり直し。指定されたバージョンジェネレータでは「簡単」にはいかないらしい(後日調査)

f:id:albatrosary:20141206120247p:plain

Step 6: Start writing our AngularJS application

指示のあるとおり views/main.html と scripts/controllers/main.js を変更していきます。

f:id:albatrosary:20141206120531p:plain

追加ボタン登録して:

f:id:albatrosary:20141206120735p:plain

削除もいれます:

f:id:albatrosary:20141206120952p:plain

Step 7: Use Bower to install packages

ここまででひと通り機能追加は終了です。 普段使わないコマンド:

$ bower list
bower check-new     Checking for new versions of the project dependencies..
mytodo#0.0.0 /Users/albatrosary/Project/mytodo
├── angular#1.3.5 (1.3.6-build.3673+sha.ee42cfe available)
├─┬ angular-animate#1.3.5 (1.3.6-build.3673+sha.ee42cfe available)
│ └── angular#1.3.5 (latest is 1.3.6-build.3673+sha.ee42cfe)
├─┬ angular-cookies#1.3.5 (1.3.6-build.3673+sha.ee42cfe available)
│ └── angular#1.3.5
├─┬ angular-mocks#1.3.5 (1.3.6-build.3673+sha.ee42cfe available)
│ └── angular#1.3.5
├─┬ angular-resource#1.3.5 (1.3.6-build.3673+sha.ee42cfe available)
│ └── angular#1.3.5
├─┬ angular-route#1.3.5 (1.3.6-build.3673+sha.ee42cfe available)
│ └── angular#1.3.5
├─┬ angular-sanitize#1.3.5 (1.3.6-build.3673+sha.ee42cfe available)
│ └── angular#1.3.5
├─┬ angular-scenario#1.3.5 (1.3.6-build.3673+sha.ee42cfe available)
│ └── angular#1.3.5
├─┬ angular-touch#1.3.5 (1.3.6-build.3673+sha.ee42cfe available)
│ └── angular#1.3.5
├─┬ bootstrap#3.3.1
│ └── jquery#2.1.1
├── es5-shim#4.0.5
└── json3#3.3.2
$ 

今回は「angular-ui-sortable」を使うようです。手順にそっていきます!(この時点でかなりハイテンション)

$ bower install --save angular-ui-sortable
$ bower install --save jquery-ui

インストールが終わったら app.js を書き換えます

'use strict';

/**
 * @ngdoc overview
 * @name mytodoApp
 * @description
 * # mytodoApp
 *
 * Main module of the application.
 */
angular
  .module('mytodoApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.sortable'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

HTMLファイルも書き換えこの章は終了です

f:id:albatrosary:20141206121651p:plain

見た目は変わってませんがHTMLの表現が変更されています。是非ソースを比較されるといいのではと思います。

Step 8: Test with Karma and Jasmine

さてテスト!重要です。すごく大事!

インストール時に途中でコケていたkarmaインストールもここでおこない

$ npm install karma-phantomjs-launcher karma-jasmine grunt-karma --save-dev

テストタスクの実行です。モジュールもテキストに従い修正します。

$ grunt test
Running "clean:server" (clean) task
Cleaning .tmp...OK

Running "concurrent:test" (concurrent) task
    
    Running "copy:styles" (copy) task
    Copied 1 files
    
    Done, without errors.
    
    
    Execution Time (2014-12-06 03:32:40 UTC)
    loading tasks   2ms  ▇▇▇▇▇▇ 11%
    copy:styles    15ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 83%
    Total 18ms
    
Running "autoprefixer:dist" (autoprefixer) task
File .tmp/styles/main.css created.

Running "connect:test" (connect) task
Started connect web server on http://localhost:9001

Running "karma:unit" (karma) task
INFO [karma]: Karma v0.12.28 server started at http://localhost:8080/
INFO [launcher]: Starting browser PhantomJS
WARN [watcher]: Pattern "/Users/albatrosary/Project/mytodo/test/mock/**/*.js" does not match any file.
INFO [PhantomJS 1.9.8 (Mac OS X)]: Connected on socket QtGfZVOvshBCPfMsqA_P with id 6226614
PhantomJS 1.9.8 (Mac OS X): Executed 2 of 2 SUCCESS (0.001 secs / 0.007 secs)

Done, without errors.


Execution Time (2014-12-06 03:32:39 UTC)
concurrent:test    1.5s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 39%
autoprefixer:dist  42ms  ▇▇ 1%
karma:unit         2.3s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 59%
Total 3.9s

$ 

Step 9: Get ready for production

テストも無事通りましたので、リリースするためにビルドし、ビルドしたものを表示します:

$ grunt
$ grunt serve:dist

f:id:albatrosary:20141206124007p:plain

Step 10: Make Todos persistent with local storage

todoリストをローカルストレージへ登録します。テストに従いサクッと! 再びテストを回して終了です!

Congratulations!

f:id:albatrosary:20141206124307p:plain

テストも含めひと通りアプリケーション開発プロセスの終了です。若干YEOMANがエラーを出すので対応で30分ほど時間を超過しましたが約2時間もあれば十分楽しめます。是非チュートリアルを。