ng-poly を紹介する。このエントリーは「Yeoman Advent Calendar 2015」12月6日の記事です。 www.npmjs.com インストール $ npm install -g generator-ng-poly $ yo ng-poly 何と言っても構成選択が多い ? What is the app's name? mkdir プロジェクト名して…

既に定番のangular を紹介する。このエントリーは「Yeoman Advent Calendar 2015」12月5日の記事です。 www.npmjs.com インストール $ npm install -g generator-karma generator-angular $ mkdir mydir && cd $_ $ yo angular 実行 $ grunt serve ブラウザ…

ngdoc を紹介する。ngdocと言ってもYEOMANジェネレータの。AngularのngDocの書き方に従えば自プロジェクトを良いようにドキュメント化してくれる。このエントリーは「Yeoman Advent Calendar 2015」12月4日の記事です。 www.npmjs.com ngDoc ngDocの書き方は…

hottowel を紹介する。何と言ってもこれJohn Papaさんが作ったジェネレータでテンプレートとかが超参考になる。このエントリーは「Yeoman Advent Calendar 2015」12月3日の記事です。 www.npmjs.com John PapaさんはAngularスタイルガイドをまとめた人。Angu…

angular2-gulp-webpack を紹介する。このエントリーは「Yeoman Advent Calendar 2015」12月1日の記事です。 www.npmjs.com 構成 Angular2 typescript gulp webpack インストール $ npm install -g generator-angular2-gulp-webpack $ mkdir agw && cd $_ $ y…

以前にも書きましたがAngularを使ったYEOMANジェネレータを作ってます。このエントリーは「AngularJS Advent Calendar 2015」12月4日の記事です。 albatrosary.hateblo.jp 使い方 $ npm i -g generator-angular-eggs $ mkdir sampleapp && cd $_ $ yo angula…

いまさらYEOMANされどYEOMAN的なこともあり、鹿児島でYEOMANハンズオンをやってきました。何かを学ぶにはきっかけが必要になりますが、今回のハンズオンが良いきっかけになれば幸いと思い鹿児島まで行ってきました。 鹿児島でもYEOMANハンズオン開催! HTML5 …

先日のYEOMANハンズオンでgenerator-webappをベースにしてAngularJSのモジュールを入れていくのが学習効果としては高いというコメントを見たので実際にやってみました。目標としてはAngularJSとui-routerが使えれば良いかなということで次の通りとした。 ang…

新年事始めは1/4(日)のYEOMANハンズオン@大阪から開始しました。総勢10名の方がお見えになりYEOMANのチュートリアルをやりYEOMANの概要を説明したりと充実した内容だったのでは無いかと思います。最後はもちろん新年会で大阪名物「串カツ」を頂きました。 年…

開発中もっとも使われるコマンドはgruntです。このgruntはJavaScriptで記述されたタスクランナーです。定義がGruntfile.jsにされていますので少し見ていきます。ここが分かると grunt serve grunt build 以外にもコマンドがあるのが理解できます。 ジェネレ…

「YEOMANを使う」ということはちょっとしたことだけ我慢すれば簡単に使えます。では何を我慢するのかですが「黒い画面を使う」ということを少し耐えればとても便利なツールになります。 今回は、とあるデザイナーのための利用マニュアルとして作成しています…

前回、PhoneGapジェネレータでハイブリットアプリを開発するYEOMANジェネレータを紹介しましたが、今回はCordovaです。といっても殆ど同じではあります。単純にジェネレータの作りが違うということです。 環境構築 $ npm install -g generator-cordova $ mkd…

HTML5かネイティブかという話でいいとこ取りのハイブリットアプリケーションですが、エンタープライズな現場の方から色々お話をお聞きすると、ハイブリットには行かずHTML5かネイティブに寄るようです（HTML5というよりWebという表現が正しいです）。 ハイブ…

Data-Driven Documents(データ駆動ドキュメント)、略してD3と言います。データとDOMを結びつけデータを可視化します。 具体的なサンプルが D3.js - 日本語ドキュメント にありますのでご確認ください。そしてD3.jsはデータに基づいてドキュメントを操作する…

knockoutjsのサンプルソースを見ながら味見をします。YEOMANのgeneratorにknockoutがあるのですがあまりメンテナンスされていないのでgenerator-webappにbowerコンポーネントとしてknockoutjsを追加します。 今回は 一般的なknockoutjsのインストール方法 サ…

Single-page Applicationなどブラウザ上で動くアプリケーションを開発するときにかなりイカしてる統合開発ツールYEOMANのインストール手順を記載します。過去インストールはちょっと大変といった発言をしたため修正です。 nodebrewのインストール nodebrewを…

昨日（3/15(土)）福岡にてYEOMANハンズオンが行われました。ハンズオンの内容は YEOMANをインストールして色んなgeneratorを使ってみよう generator-generatorを使ってみよう いろんなgruntを使ってみよう です。 YEOMANのインストールとgenerator YEOMANの…

名古屋ではじめてお話させて頂きました。YEOMANを説明してSingle-page Applicationを開発するときにモックサーバをgruntタスクに追加すると良いです、というストーリーです。Webサーバの構築ができるできないに関わらずモックサーバを使う意味というのはあり…

フロントエンドアプリケーションを開発するためには、構築するためのワークフローが存在します。あまりメジャーではありませんが手順を踏んで作業したいと、どんなにすばらしいJavaScriptフレームワークを使ったとしても最終的には不味いスパゲティの出来上…

Single-page Application(SPA)によりフロント開発にかかる手間が膨大になっています。SPAの開発をするときに通信部分（JSONやJSONPなど）をどうすればいいのかが問題になります。解答としてはスタブAPIサーバを作成し対応します。 画面開発するためにアプリ…

YeomanとCoffeeScriptを使ってbackboneを利用したSingle-page Applicationを作ります。yoとbowerに微妙感があると聞きますが、大規模開発では開発効率を上げるために、ここが重要になります。 内容ですが社内ハンズオンでのものです。基本的には過去のブログ…

Yeoman を使って backbone.js を利用するためのジェネレータ（generator-backbone）をインストールします。結論から言うと generator-backbone を yo コマンド実行後 grunt server で起動すると「components ディレクトリが無い」というようなエラーが発生し…

Yeoman の yo で作成したアプリケーションを github へ登録します。 テンプレートからプロジェクトの作成 github にリポジトリ構築 プロジェクトを git 配下の設定をする いつものように適当なプロジェクトディレクトリを作成し yo コマンドによりアプリケー…

インストールしたYeomanさんの中身を覗いてみます。github を読めばいいことですが、インストールディレクトリを読みたいと思います。 インストールした yo、bower、grunt(grunt-cli) は $ pwd /usr/local/lib/node_modules $ ls -la total 0 drwxr-xr-x 6 r…

この内容は 2013/5/11(土) に開催された HTML5ハンズオン で行った内容を記載しております。きっかけは[JP 日本語] Chrome+HTML5 Developers Live Japan #4です。直感的に「よさそう！」と思いましたので色々調べることにしました。 Yeoman1.0 は Yo Grunt B…