SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Downloaden Sie, um offline zu lesen
ヨーマンおじさんと戯れる会
日本Androidの会 大分支部
本田 克己
ぃよっ!
注:ヤフーおじさんではありません
日本Androidの会 大分支部
2010年2月6日に設立
Androidアプリ開発の勉強会などをやっています
http://goo.gl/VKyYN
http://groups.google.com/group/android-group-japan-oita
Facebookページなんかもあったりします。
http://goo.gl/vKmlc
https://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 nodejs
sudo port install git-core
sudo port install ruby
sudo 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%chocolateybin - See more at:
http://chocolatey.org/#sthash.ZQtgp8JF.dpuf
cinst yeoman
npm uninstall -g yeoman
npm install -g yo
cinstで0.9.6がインストールされるので
インストールし直す
もしくは個々のパッケージをインストール
(パッケージ管理システム使ってたらスルー)
node.js
http://nodejs.org/
ここクリック
ruby
http://rubyinstaller.org/downloads/
とりあえず1.8系列をダウンロードして
インストールだ!
compass
http://compass-style.org/install/
git
http://git-scm.com/downloads
yeomanのインストール
npm install -g yo
インストールが完了しました?
完了したら yo コマンドを実行だ!
ぃよっ!
単純なWebアプリを作ってみる
ジェネレータ
●
アプリの骨組みを作るのをジェネレータという
●
さまざまなジェネレータが公開されている
●
webappジェネレータを追加して使ってみよう!
npm install -g generator-webapp
mkdir ほげふげ
cd ほげふげ
yo webapp
grunt server
しばらくするとブラウザにページが表示されます。
後はお好みのエディタで、編集するのです!
angular.jsとexpress
npm install -g generator-angularexpress
mkdir ほげふげ
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

Weitere ähnliche Inhalte

Andere mochten auch

HTML5 開発環境の紹介
HTML5 開発環境の紹介HTML5 開発環境の紹介
HTML5 開発環境の紹介tomo_masakura
 
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていたフロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていたgirigiribauer
 
Facebookページの投稿に、いいね!した友達やファンを集計するアプリbooshaka
Facebookページの投稿に、いいね!した友達やファンを集計するアプリbooshakaFacebookページの投稿に、いいね!した友達やファンを集計するアプリbooshaka
Facebookページの投稿に、いいね!した友達やファンを集計するアプリbooshaka新潟コンサルタント横田秀珠
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Masakazu Muraoka
 
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)K Tsukada
 
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?Fumio SAGAWA
 
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発   takusuta tech conf #1Riot.jsを用いたweb開発   takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1Keisuke Imai
 
SPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWorkSPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWorkMizuho Sakamaki
 

Andere mochten auch (9)

HTML5 開発環境の紹介
HTML5 開発環境の紹介HTML5 開発環境の紹介
HTML5 開発環境の紹介
 
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていたフロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
 
Facebookページの投稿に、いいね!した友達やファンを集計するアプリbooshaka
Facebookページの投稿に、いいね!した友達やファンを集計するアプリbooshakaFacebookページの投稿に、いいね!した友達やファンを集計するアプリbooshaka
Facebookページの投稿に、いいね!した友達やファンを集計するアプリbooshaka
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
 
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
 
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
 
Riot.jsに触れてみた話
Riot.jsに触れてみた話Riot.jsに触れてみた話
Riot.jsに触れてみた話
 
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発   takusuta tech conf #1Riot.jsを用いたweb開発   takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1
 
SPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWorkSPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWork
 

Ähnlich wie ヨーマンおじさんと戯れる会

イマドキのWebアプリの作り方
イマドキのWebアプリの作り方イマドキのWebアプリの作り方
イマドキのWebアプリの作り方Katsumi Honda
 
Facebookおばかアプリ on Azure開発のポイント、Windows Phone アプリ開発 by シグマコンサルティング菅原さん
Facebookおばかアプリ on Azure開発のポイント、Windows Phone アプリ開発 by シグマコンサルティング菅原さんFacebookおばかアプリ on Azure開発のポイント、Windows Phone アプリ開発 by シグマコンサルティング菅原さん
Facebookおばかアプリ on Azure開発のポイント、Windows Phone アプリ開発 by シグマコンサルティング菅原さんatmarkit
 
MFi Controller〜それは忘れられたiOS7新機能〜
MFi Controller〜それは忘れられたiOS7新機能〜MFi Controller〜それは忘れられたiOS7新機能〜
MFi Controller〜それは忘れられたiOS7新機能〜Tomotsune Murata
 
20120425 android in Yokosuka
20120425 android in Yokosuka20120425 android in Yokosuka
20120425 android in YokosukaKenichi Ohwada
 
TVにスマホをかざすだけで買える時代が直前と言える根拠
TVにスマホをかざすだけで買える時代が直前と言える根拠TVにスマホをかざすだけで買える時代が直前と言える根拠
TVにスマホをかざすだけで買える時代が直前と言える根拠新潟コンサルタント横田秀珠
 
第2回スマートフォン講座
第2回スマートフォン講座第2回スマートフォン講座
第2回スマートフォン講座Shinichi Kosaki
 
Androidの会解説100312
Androidの会解説100312Androidの会解説100312
Androidの会解説100312YAMANE Toshiaki
 
Fb概要 ビジネス活用編
Fb概要 ビジネス活用編Fb概要 ビジネス活用編
Fb概要 ビジネス活用編Yoshinao Arai
 
Androidの会のご紹介
Androidの会のご紹介Androidの会のご紹介
Androidの会のご紹介高見 知英
 
「Camelog」Android開発秘話
「Camelog」Android開発秘話「Camelog」Android開発秘話
「Camelog」Android開発秘話Shoya Tsukada
 
iPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめiPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめHiramatsu Ryosuke
 
Androidにしゃべらせるために
AndroidにしゃべらせるためにAndroidにしゃべらせるために
AndroidにしゃべらせるためにDaisuke Takai
 

Ähnlich wie ヨーマンおじさんと戯れる会 (16)

イマドキのWebアプリの作り方
イマドキのWebアプリの作り方イマドキのWebアプリの作り方
イマドキのWebアプリの作り方
 
Facebookおばかアプリ on Azure開発のポイント、Windows Phone アプリ開発 by シグマコンサルティング菅原さん
Facebookおばかアプリ on Azure開発のポイント、Windows Phone アプリ開発 by シグマコンサルティング菅原さんFacebookおばかアプリ on Azure開発のポイント、Windows Phone アプリ開発 by シグマコンサルティング菅原さん
Facebookおばかアプリ on Azure開発のポイント、Windows Phone アプリ開発 by シグマコンサルティング菅原さん
 
MFi Controller〜それは忘れられたiOS7新機能〜
MFi Controller〜それは忘れられたiOS7新機能〜MFi Controller〜それは忘れられたiOS7新機能〜
MFi Controller〜それは忘れられたiOS7新機能〜
 
20120425 android in Yokosuka
20120425 android in Yokosuka20120425 android in Yokosuka
20120425 android in Yokosuka
 
TVにスマホをかざすだけで買える時代が直前と言える根拠
TVにスマホをかざすだけで買える時代が直前と言える根拠TVにスマホをかざすだけで買える時代が直前と言える根拠
TVにスマホをかざすだけで買える時代が直前と言える根拠
 
関西DB会.pdf
関西DB会.pdf関西DB会.pdf
関西DB会.pdf
 
第2回スマートフォン講座
第2回スマートフォン講座第2回スマートフォン講座
第2回スマートフォン講座
 
Androidの会解説100312
Androidの会解説100312Androidの会解説100312
Androidの会解説100312
 
JAG overview (100222)
JAG overview (100222)JAG overview (100222)
JAG overview (100222)
 
Fb概要 ビジネス活用編
Fb概要 ビジネス活用編Fb概要 ビジネス活用編
Fb概要 ビジネス活用編
 
Androidの会のご紹介
Androidの会のご紹介Androidの会のご紹介
Androidの会のご紹介
 
「Camelog」Android開発秘話
「Camelog」Android開発秘話「Camelog」Android開発秘話
「Camelog」Android開発秘話
 
!(びっくり)するかもしれないヤフーでのアプリ開発
!(びっくり)するかもしれないヤフーでのアプリ開発!(びっくり)するかもしれないヤフーでのアプリ開発
!(びっくり)するかもしれないヤフーでのアプリ開発
 
iPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめiPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめ
 
Potatotips_7
Potatotips_7Potatotips_7
Potatotips_7
 
Androidにしゃべらせるために
AndroidにしゃべらせるためにAndroidにしゃべらせるために
Androidにしゃべらせるために
 

Mehr von Katsumi Honda

Ionicアプリのデータ管理
Ionicアプリのデータ管理Ionicアプリのデータ管理
Ionicアプリのデータ管理Katsumi Honda
 
Angularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととかAngularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととかKatsumi Honda
 
1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) Ionicのススメ1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) IonicのススメKatsumi Honda
 
Meteor intro-2015-rev1- 日本語バージョン
Meteor intro-2015-rev1- 日本語バージョンMeteor intro-2015-rev1- 日本語バージョン
Meteor intro-2015-rev1- 日本語バージョンKatsumi Honda
 
はじめてのMeteor
はじめてのMeteorはじめてのMeteor
はじめてのMeteorKatsumi Honda
 
Mobile Backend Starterを使ってサクサクアプリ開発
Mobile Backend Starterを使ってサクサクアプリ開発Mobile Backend Starterを使ってサクサクアプリ開発
Mobile Backend Starterを使ってサクサクアプリ開発Katsumi Honda
 
はじめてのPython
はじめてのPythonはじめてのPython
はじめてのPythonKatsumi Honda
 
はじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for MacはじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for MacKatsumi Honda
 
はじめてのPython - 開発環境の準備 for Windows
はじめてのPython - 開発環境の準備 for WindowsはじめてのPython - 開発環境の準備 for Windows
はじめてのPython - 開発環境の準備 for WindowsKatsumi Honda
 
冬だからAndroid再入門
冬だからAndroid再入門冬だからAndroid再入門
冬だからAndroid再入門Katsumi Honda
 
Osc2012 appinventor のその後
Osc2012 appinventor のその後Osc2012 appinventor のその後
Osc2012 appinventor のその後Katsumi Honda
 
秋だからEclipse再入門
秋だからEclipse再入門秋だからEclipse再入門
秋だからEclipse再入門Katsumi Honda
 
夏だからJava再入門
夏だからJava再入門夏だからJava再入門
夏だからJava再入門Katsumi Honda
 
OSC2011 Androidハンズオン
OSC2011 AndroidハンズオンOSC2011 Androidハンズオン
OSC2011 AndroidハンズオンKatsumi Honda
 
雲から機器へ伝達させる為の枠組み
雲から機器へ伝達させる為の枠組み雲から機器へ伝達させる為の枠組み
雲から機器へ伝達させる為の枠組みKatsumi Honda
 
激安Androidタブレットを買ってみた
激安Androidタブレットを買ってみた激安Androidタブレットを買ってみた
激安Androidタブレットを買ってみたKatsumi Honda
 
はじめてのAndroid開発
はじめてのAndroid開発はじめてのAndroid開発
はじめてのAndroid開発Katsumi Honda
 

Mehr von Katsumi Honda (17)

Ionicアプリのデータ管理
Ionicアプリのデータ管理Ionicアプリのデータ管理
Ionicアプリのデータ管理
 
Angularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととかAngularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととか
 
1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) Ionicのススメ1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) Ionicのススメ
 
Meteor intro-2015-rev1- 日本語バージョン
Meteor intro-2015-rev1- 日本語バージョンMeteor intro-2015-rev1- 日本語バージョン
Meteor intro-2015-rev1- 日本語バージョン
 
はじめてのMeteor
はじめてのMeteorはじめてのMeteor
はじめてのMeteor
 
Mobile Backend Starterを使ってサクサクアプリ開発
Mobile Backend Starterを使ってサクサクアプリ開発Mobile Backend Starterを使ってサクサクアプリ開発
Mobile Backend Starterを使ってサクサクアプリ開発
 
はじめてのPython
はじめてのPythonはじめてのPython
はじめてのPython
 
はじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for MacはじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for Mac
 
はじめてのPython - 開発環境の準備 for Windows
はじめてのPython - 開発環境の準備 for WindowsはじめてのPython - 開発環境の準備 for Windows
はじめてのPython - 開発環境の準備 for Windows
 
冬だからAndroid再入門
冬だからAndroid再入門冬だからAndroid再入門
冬だからAndroid再入門
 
Osc2012 appinventor のその後
Osc2012 appinventor のその後Osc2012 appinventor のその後
Osc2012 appinventor のその後
 
秋だからEclipse再入門
秋だからEclipse再入門秋だからEclipse再入門
秋だからEclipse再入門
 
夏だからJava再入門
夏だからJava再入門夏だからJava再入門
夏だからJava再入門
 
OSC2011 Androidハンズオン
OSC2011 AndroidハンズオンOSC2011 Androidハンズオン
OSC2011 Androidハンズオン
 
雲から機器へ伝達させる為の枠組み
雲から機器へ伝達させる為の枠組み雲から機器へ伝達させる為の枠組み
雲から機器へ伝達させる為の枠組み
 
激安Androidタブレットを買ってみた
激安Androidタブレットを買ってみた激安Androidタブレットを買ってみた
激安Androidタブレットを買ってみた
 
はじめてのAndroid開発
はじめてのAndroid開発はじめてのAndroid開発
はじめてのAndroid開発
 

ヨーマンおじさんと戯れる会