Posted at

YEOMANを触ってみた。

More than 3 years have passed since last update.

そういえば、年始にYEOMANの勉強会に参加してきたので、メモ。

”デザイナー向け” ”初心者歓迎” のハンズオン形式とのことで、

多分...大丈夫!と思って参加してみたものの、参加者のほとんどがプログラマーさんで新年早々不安で押しつぶされそうにもなったけど、私は元気です。

以下、サンプルをいじったりするまでのメモ。


YEOMAN

YEOMANってなんだろうって場合はこのあたりよめばなんとかなると思う。

Gruntで始めるWeb開発爆速自動化入門(終):あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方 (1/3) - @IT

http://www.atmarkit.co.jp/ait/articles/1407/02/news040.html


インストール

公式を見つつ自力でインストールしてみるものの、さっそくエラー...。

今回はnodeのバージョンをあげたら無事解決した。


ちなみにバージョンをあげる前に一度アンインストールが必要らしい…。

あと、nodebrew使うとnodeのバージョン管理してくれるので便利とのこと。

詳しいインストール方法は公式か下記のブログを参考に


ローカル立ち上げ

grunt serve

をうつとlocalhost:9000 (127.0.0.1:9000からでもアクセスできる)がたちあがるので、そこでこんな画面が見えてたらOK

yeoman.jpg


テンプレートをいじってみる

views/main.html をいろいろいじるとライブリロードで反映される。

karmeってのはテンプレートらしい。

このあたりについてはまだちゃんと調べてない。

ファイル構造とか設定ファイルの書き方はいろいろ参考になりそうなので、

現状のMy Gruntファイルにも取り入れたいなーと思った。


todoリストを作ってみる

公式にAngularJSでtodoリストを作成するチュートリアルがあるので、実際作ってみることに。

Let's Scaffold a Web App with Yeoman | Yeoman

心やさしいい人が動画を上げてくれているから、英語でつまずいても大丈夫。

【動画】Yeoman で AngularJS アプリケーションを作ろう!

AngularJSについてそんなに知識がない自分でも

なんかそれっぽいのができていくのが楽しかった。


おすすめのGenerator

Generatorはここから検索できる

Generators | Yeoman

勉強会ではangular-fullstackがいいみたいなことを言ってた気がする。

(参考:AngularJSでWebアプリケーションを作ろうと思った時に構成に悩んだら、generator-angular-fullstackからはじめるのが良いのでは)

自分の場合Angular.jsを案件で使うことはないので、

他にどういうのがあるのか聞いてみたところ

web app がいいんじゃないかとのこと。

Sass・Bootstwrap・Modernizrとか入ってるっぽい。

その後自分でも色々みてたら polymer とか気になるのもあったので、

気が向いたらいじってみようかなーと思う。

ちなみに後日Wordpressを触ることがあったので、

YeoPressをインストールしてみるもなぜか玉砕したので、

近日リベンジ予定…。


おまけ

yo yo を打つとでてくる。

全然役立つ情報でもないけれど、表示されるとなぜかすごくうれしい。

yoyo.jpg


他参考サイトなど

EOMAN Advent Calendar 2014