ヨーマンおじさんと戯れる会日本Androidの会 大分支部

本田　克己

ぃよっ！

注：ヤフーおじさんではありません

日本Androidの会 大分支部

2010年2月6日に設立

Androidアプリ開発の勉強会などをやっています

http://goo.gl/VKyYNhttp://groups.google.com/group/android-group-japan-oita

Facebookページなんかもあったりします。

http://goo.gl/vKmlchttps://www.facebook.com/android.oita

YEOMAN

http://yeoman.io/

YEOMAN

ヨーマンおじさんと戯れようと思ったキッカケはこちらを参照してください。http://www.slideshare.net/kponda/web-26012144

➔YEOMAN、ヨーマンと読むっぽい

➔イングランドの独立自営農民？米海軍の事務係士官？

➔クライアントよりなWebアプリを効率よく開発するためのツー

ル、フレームワーク

➔GoogleのChromeデベロッパーリレーションチームが中心に開発

➔オープンソース（BSDライセンス）で提供

➔マルチプラットフォーム対応

OS X、Linux、FreeBSD、Windows

プロジェクトのひな形を生成

GRUNTやBOWERの設定をやってくれる

http://bower.io/http://gruntjs.com/

コンパイルやテスト等のタスクを実行

ファイルを修正すると、自動的にコンパイルしてページのリロードとかやってくれる

依存関係の管理を行なう。プロジェクトに必要なファイルを、自動的にダウンロードしてくれたりする

具体的になにやってくれるの？

● 利用したいフレームワークに応じたプロジェクトの骨組みを作る

● 必要なJavaScriptライブラリ等を自動的にダウンロード

● WebアプリのビルドCoffeeScript等のコンパイル、ミニファイ、画像ファイルの最適化など

● テストの実行● 開発用Webサーバの実行

とか色々

ヨーマンおじさんに会いに行こう！

事前に必要なもの

C/C++コンパイラもあると良さげ

パッケージ管理システム使ってる人

■macports

sudo port install nodejssudo port install git-coresudo port install rubysudo gem install compass

sudo npm install -g yo

Windows用パッケージ管理システム

使ったことないけど、こんなのあるんですね。

http://chocolatey.org/

コマンドプロンプトに↓をペーストして実行するとインストール完了

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin - See more at: http://chocolatey.org/#sthash.ZQtgp8JF.dpuf

cinst yeomannpm uninstall -g yeomannpm install -g yo

cinstで0.9.6がインストールされるのでインストールし直す

もしくは個々のパッケージをインストール（パッケージ管理システム使ってたらスルー）

node.js

http://nodejs.org/

ここクリック

ruby

http://rubyinstaller.org/downloads/

とりあえず1.8系列をダウンロードしてインストールだ！

compasshttp://compass-style.org/install/

githttp://git-scm.com/downloads

yeomanのインストール

npm install -g yo

インストールが完了しました？

完了したら yo コマンドを実行だ！

ぃよっ！

単純なWebアプリを作ってみる

ジェネレータ

●アプリの骨組みを作るのをジェネレータという

●さまざまなジェネレータが公開されている

●webappジェネレータを追加して使ってみよう！

npm install -g generator-webappmkdir ほげふげcd ほげふげyo webappgrunt server

しばらくするとブラウザにページが表示されます。後はお好みのエディタで、編集するのです！

angular.jsとexpress

npm install -g generator-angularexpressmkdir ほげふげcd ほげふげyo angularexpress grunt server

しばらくするとブラウザにページが表示されます。後はお好みのエディタで、編集するのです！

ライブラリを追加してみる

Bower使います

# 検索bower search <検索文字>

# インストール済みパッケージ確認bower list

# パッケージ更新bowser update <パッケージ名>

# インストール –saveを付けると bowser.json に追記するbower install <パッケージ名>... --save

# アプリに反映（RequireJSを使ってる場合）grunt bower

# アプリに反映（RequireJSを使っていない場合)grunt bower-install