そういえば、年始に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
テンプレートをいじってみる
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 を打つとでてくる。
全然役立つ情報でもないけれど、表示されるとなぜかすごくうれしい。