albatrosary's blog

UI/UXとエンタープライズシステム

Yeoman

ng-poly - Yeoman Advent Calendar 2015

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

既に定番の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 - Yeoman Advent Calendar 2015

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

hottowel - Yeoman Advent Calendar 2015

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

angular2-gulp-webpack - Yeoman Advent Calendar 2015

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…

yeomanでAngularジェネレータ作った - AngularJS Advent Calendar 2015

以前にも書きましたが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ハンズオンをやってきました。何かを学ぶにはきっかけが必要になりますが、今回のハンズオンが良いきっかけになれば幸いと思い鹿児島まで行ってきました。 鹿児島でもYEOMANハンズオン開催! HTML5 …

generator-webapp をベースに AngularJS を利用していくのが学習としては良いということなのでやってみた

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

YEOMANジェネレータからプロジェクトを作るときのディレクトリ

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

デザイナーだってYEOMANを使いたいんだ! 〜 とあるデザイナーのためのYEOMANマニュアル - gruntコマンド編 〜

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

デザイナーだってYEOMANを使いたいんだ! 〜 とあるデザイナーのためのYEOMANマニュアル 〜

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

YEOMANでハイブリット開発(generator-cordova)

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

YEOMANでハイブリット開発

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

D3.jsを使ってみたyo

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

knockoutjsとYEOMANと、knockoutを味見するにもbower

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

YEOMANをインストールしよう!(だけど解説はMACだけね)

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

YEOMANハンズオン in 福岡

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

HTML5勉強会#11(名古屋)でYEOMANのお話をさせて頂き感じたこと

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

Yeomanを使った簡単SPA開発手順

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

Single-page Application(SPA)でeasymock or stubbyを使ってJSON簡単開発

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

Yeoman+CoffeeScriptでSinge-page Applicationを簡単開発

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

Yeoman を使った backbone.js の環境構築

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

Yeoman で作ったアプリケーションを github へ登録する

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

Yeoman を覗いてみる

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

Yeoman を触ってみる

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