YEOMANハンズオン in 福岡 - albatrosary's blog

昨日（3/15(土)）福岡にてYEOMANハンズオンが行われました。ハンズオンの内容は

YEOMANをインストールして色んなgeneratorを使ってみよう
generator-generatorを使ってみよう
いろんなgruntを使ってみよう

です。

YEOMANのインストールとgenerator

YEOMANのインストールはやはりちょっと面倒かもしれません。YEOMANというよりもnode、rubyなど色々やっていくとインストールする必要ができますので若干面倒なところがあります。

generatorで面白かったのがgenerator-threejsです。threejsをサンプルで動きを確認するのはもってこいと思います。grunt serveで起動すると

f:id:albatrosary:20140316090751p:plain

のような画面が開きくるくるまわっています。ソースも

require({
    baseUrl: 'js',
    // three.js should have UMD support soon, but it currently does not
    shim: { 'vendor/three': { exports: 'THREE' } }
}, [
    'vendor/three'
], function(THREE) {

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

    scene = new THREE.Scene();

    geometry = new THREE.CubeGeometry(800, 400, 400);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: false
    });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame(animate);

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.06;

    renderer.render(scene, camera);

}

});

ですのでパラメータを変更するだけである程度のことが確認できます。

generator-generatorを使ってみる

generatorを使うための手順ですがgenerator-generatorでひな形を作成

yo my generatorでモジュールのインストール等
yo my subgeneratorでサブジェネレータを作成

です。これで基本的なものは作成可能です。このあと業務で使えるように更に機能を追加します。資料は下記。

MSakamaki/GeneratorAPI · GitHub

いろいろなgruntを使ってみる

gruntには色々なプラグインがあります。ほとんどのことは今提供されているプラグインできると思います。具体的には下記を見てください。

Grunt: The JavaScript Task Runner

私のブログでは

"grunt" - 記事一覧 - albatrosary's blog

でいろいろとご紹介しております。

最後に

福岡は私がHTML5で業務アプリケーションを作ろうと決めた地です。2013年2月に福岡で開催されたHTML5カーニバルがなければ、HTML5での業務アプリケーション開発はなかったと思います。その福岡でYEOMANハンズオンが開催できたということは、10%くらいではありますが恩返しができたのではと勝手に思っています。

YEOMANはめんどくさいところも多くあります。ですが、普段の煩わしい部分を自動化してくれますので利用をおすすめします。