連載目次 前回記事「Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには」では、Gruntを使っていろいろな手法でタスクを定義する手法や、独自プラグインを作成してnpmで公開する方法について解説しました。 今回は少し角度を変えて、Gruntを自身の機能として利用しており、快適な開発ワークフローを提供してくれるツール、「Yeoman」について解説します。 3つのツールを統合したワークフローを提供する「Yeoman」 Yeomanとは、公式サイトいわく、「The web's scaffolding tool for modern webapps」とのことです。 訳すと、「今風のWebアプリのための土台／基盤を作ってくれるツール」といったところでしょうか。「scaffolding」はRuby on Railsの主要機能として有名になった言葉で、コマンドを打つだ
全国のYeomanの服をきて街をさっそうと歩きたい皆様こんにちは大橋です。 一部で話題が起こってるChrome Apps for Mobileですが試しましたか？ Chrome Apps作るついでにAndroid向けのも作れるなら素敵すぎますよね。 でもまだChrome Apps for Desktop自体作ったことが無い方も非常に多い気がするので今回はYeomanを使ってChrome Appsのひな形を作り、そこからChrome Apps for Mobileのアプリケーションを作ってみたいと思います。 なお、以下の記事を参考にさせていただきました。 Chrome Apps for mobileの開発方法(天使やカイザーと呼ばれて) どうなる？ 最終的にYeomanでChrome Apps for Mobileの開発が開始できるようになります。 環境 以下初期状態です。 PC : Mac
※これは、社内の勉強会の資料の下書きです。 ここ数年で、js環境が整理されてきた。 js開発するなら、これらの知識は必須。無いとめっちゃ不便。 という事で、今日は、gruntとbowerとyeomanの話。 各ツール概説 Yeoman applicationのひな形を作る アプリ構築に必要な様々な作業を任せられる Grunt build / preview / testに使う Bower 依存性の管理を行う 手動でDLやscript管理する必要無 rails開発者のために ぶっちゃけ、どれも、railsの環境にそっくり。rails知ってる人は、要するに、以下の事。 grunt => rails server実行時に勝手にやってくれる作業を切り離してカスタマイズできるようにしたもの(coffeeのコンパイルとか) bower => ruby gem管理をjsのclient側で実現した物。 y
Yeoman を勘違いしてスルーしてたところもあったので、 改めてこんなメリットがあるんだーみたいなところを共有しつつ、 必要性を感じられる人が使い始める機会になれればと思います。 僕もこれからちょいちょい使っていきたいです。Read less
はじめに Yeoman用の独自のgenerator作りたいなーと思っていたら丁度WRITING CUSTOM YEOMAN APP GENERATORSていうドキュメントがあったので訳します。適当に端折ったり言い換えているので、完全な詳細は原文を読んで下さい。 とりあえず感想だけ言うと「Yeomanはじまったな」です。あとでFirefox OSのアプリ(Open Web Apps)用のgenerator作るで。generatorはNode.jsで動くのでNode.jsで何か作った事ある場合は割と簡単に色々出来ると思う。 目次 このガイドはYeoman generatorシステムを使おうとしてる人を助ける為のものです。説明を飛ばしてもgeneratorの利用は出来ます。 導入 generatorのタイプ ボイラーテンプレートなgeneratorを作る アプリケーションの土台を生成するgene
JavaScript FrameworkならBackboneでしょ。 と勝手に思い込んでそればっか使ってきたボクですが、年初にheavenshellとかどっぺちゃんとで飲んだ時にviewが重くなるよね―とか話してたしかにそれ悩みだよなと思った。 そんときAngularJSってどうなんだろうねーって話にちょっとなって、そんときからangularいつかやってみようと思いつつ仕事で忙殺されてたんだけど、今日何気にSNSで「AngularJSに仮入信してみる」ってつぶやいたらGoogleの人にいいね！してもらってちょっと上がった。 さらに都合のいいことに外出で2時間程度電車に乗ってヒマな時間ができたので、車中でAngularの洗礼を受けてみようとPCを開いた次第。ちなみに途中で酔いました。以前新幹線で思い知ったのだけど懲りてなかった。電車でコーディングは控えましょう。特に自分。 さて、Angula
はじめに 僕はWebフロントエンドはほぼやってないんだけど、Firefox OSとかもアレだって事でソレ系にも手を出すかとあれこれやってたらまぁWebのフロントエンド周りのツールが何か色々あってよくわかんねーしどうしよっかなと思ってた所Yeoman辺りが大分良さそうなんじゃないか程度にはわかって来たので手を出してみた次第。 Yeomanってなに Webフロントエンドでよくある各種構成をコマンド一発で生成してやろうじゃん、というのがYeomanらしい。Yeomanは内部でyo, bower, gruntの3つのツールにわかれていて、Yeoman自身が作ってるのはyo。bowerはTwitter社が、GruntはBocoup社がメインで作っている。 ワークフローとしてはこうらしい yoでプロジェクトを作成し、bowerで依存性管理をし、gruntでビルド&テストをするという事だそうで。volo
はじめに 先日、YeomanのあれこれでYeomanの概要と簡単な使い方を書いたんですが、自分自身もうちょっと詳しくYeomanを知りたくなって来たので幾つかの文書を訳してメモっとこうかなと思います。まずはYeomanのゴールとロードマップ。元はYeoman Roadmapです。間違っていたらご指摘下さい。直します。 OVERALL PROJECT GOALS webアプリケーションの構築において開発者の生産性と幸福を向上させる。 Webフロントエンドの開発者に画期的なツール群を提供する。 アプリケーションの複雑性の管理を助ける 強力なデフォルトテンプレートの提供、しかしユーザが必要に応じてフレキシブルに拡張したりカスタム出来る。 ROADMAP TARGETS WebStorm, Brackets Sublimeの様なツールの為のフックを提供する ES6でTraceurを作成するためのサ
先月のHTML5など勉強会で、Yeoman超入門を発表したときに、Yeomanはフロントエンド開発専用にlocalhostサーバー立ち上げるからサーバーサイドとの同時開発はちょっと工夫がいるよね〜みたいな話題があって、参加されてたnode.jsに詳しい方からhttp-proxyつかってapiの部分リダイレクトかけたらいいよみたいな方法を教えてもらった。 なるほどそれは便利だなと思って実際書いてみたら手軽に使える感じにできたので書いておきます。ちなみに今週水曜日にGoogle Developers Liveに出演してYeomanのことを喋らせていただく機会に恵まれたので、その時の参照にも使えるかと思って。（ライブのスライドはこちら） Yeomanは $ grunt server で開発用のWebサーバーを起動することができる。デフォルトで http://localhost:9000/ 以降フ
GeneratorsHow to add your generator » Your generator will automatically show up in the list if it meets the following criteria. The list is populated every hour. Be published on the npmjs.org repository Have the following in the module's package.json file: The name should be generator-your-unique-name. This means it should begin with `generator-` and be followed by a unique (to npm) name. Scoped n
じわじわと広がりを見せる Yeoman ですが、大きく役割を変えてバージョン 1.0 に進みそうです。 以前は GruntJS や Bower などを統合したツールでしたが、 今後はこれらと協調して動作するための「雛形を生成するツール」になるようです。 ホームページでの紹介文も変わっています。 Yeoman 1.0 is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better. また、コマンドライン上で利用するコマンドも yeoman から yo になります。 bower と grunt をラップしていた部分がなくなり、 アプリケーションを書き始めるときの sca
注意：この記事は古いバージョンについて記載しています。 1.0 に向けた新しいバージョンでは仕組みもそもそもの役割も変わりました。 こちらの記事を参照してください。 Yeoman 1.0 Beta を使ってみる Yeoman の基本 Yeoman は GruntJS や Bower のラッパーのように働き、 Gruntfile.js にタスクを記述し、 jQuery などのライブラリが必要な場合は Bower 経由でインストールします。 各種のジェネレーターも備えており、プロジェクトの初期設定だけでなく、MVC の各コンポーネントの生成も可能です。 Java や Python、Ruby、Perl などの各種 Web アプリケーションフレームワークにあるようなモデルの自動生成のイメージです。 JavaScript の MVC フレームワークに関してはこちらの記事に詳しく書かれています。 Jo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く