SlideShare a Scribd company logo
1 of 40
Download to read offline
フロントエンド開発者の
ためのJenkins
2013/11/16 Hiroyuki SATAKE
● 佐竹 裕行
● JavaScript
● @st44100
TAGLY

● タグでつながる写真共有
サービス
● iOS / Android
TAGLY

● タグでつながる写真共有
サービス
● iOS / Android
旅Photo ぷらり

● 旅写真でつながるSNS
● iPhone / Android
旅Photo ぷらり

● 旅写真でつながるSNS
● iPhone / Android
パシャっとmyペット

● 国内最大級のペット写真SNS
● iPhone / Android
● http://petpic.jp
Jenkinsとフロント開発
● Jenkinsとは
● Jenkinsでビルド
● Jenkinsでテスト
● 単体テスト
● 統合テスト
● Jenkinsでドキュメント
Jenkins
Jenkins
“An extendable open source
continuous integration server”
“拡張可能なオープンソースの
継続インテグレーションサーバ”
http://jenkins-ci.org/
CIとは
継続的インテグレーション、CI(英: continuous
integration)とは、主にプログラマーのアプリケーシ
ョン作成時の品質改善や納期の短縮のための習慣のこ
とである。
エクストリーム・プログラミング (XP) のプラクティス
の一つで、狭義にはビルドやテスト、インスペクショ
ンなどを継続的に実行していくことを意味する[1]。
http://ja.wikipedia.org/wiki/継続的インテグレーション
Server...
Continuos
Integration...
● ビルド
● テスト
● 常に動くものを作って、検証を繰り返す
Commit → Test →Build
● フロントエンドのコードのビルド
● JavaScript
● compile, concat, minify
● CSS
● compile, minify, CSS Sprite
● Image
● Optimize, CSS Sprite
1.作業の開発本線へのコミット
2.Jenkinsがソースコードチェックアウト
3.テスト/ビルドをJenkinsが実行
● Jenkinsの準備
● 自分でインストール
● CloudBees
Install Jenkins

●

Install Jenkins

●

Install node / npm

●

Install Ruby / Bundler
Install Jenkins

$ brew install jenkins
$ java -jar 
/usr/local/opt/jenkins/libexec/jenkins.war
● node/npm
● ruby

(grunt, etc)

(compass, etc)

● レポジトリの登録
● 認証系の設定
BUILD
プロジェクト画面
成果物
TEST
● テストする
● 単体テスト(Jasmine)
● 統合テスト(CasperJS)
● 単体テスト
● Jasmine
● PhantomJS
$ grunt test
Jenkins上で
● 統合テスト
● Casper JS
DOCUMENT
● ドキュメント生成
● JS Documentation
● StyleGuide
ドキュメント生成
CATCH REGRESSION
BBC-News/wraith
● BBC制作
● 画像のDiffをとれる。
● Ruby
● ImageMagick
● おそい。
facebook/huxley

● facebook(Instagram)
● python(Instagram)
Huddle/PhantomCSS

● Huddle製
● Casper JSのモジュール
● フロントエンドだけでも使える
● テスト
● ドキュメンテーション
● 定期的なマークアップ崩れ確認
Thank you.

More Related Content

What's hot

Git hubで雑誌記事を執筆するのは間違っているだろうか
Git hubで雑誌記事を執筆するのは間違っているだろうかGit hubで雑誌記事を執筆するのは間違っているだろうか
Git hubで雑誌記事を執筆するのは間違っているだろうか
Kakigi Katuyuki
 
マイコン入門(2)
マイコン入門(2)マイコン入門(2)
マイコン入門(2)
拓海 岡本
 

What's hot (20)

Alternative WebView
Alternative WebViewAlternative WebView
Alternative WebView
 
Android Studio 2.2の紹介@Google I/O 2016東京報告会
Android Studio 2.2の紹介@Google I/O 2016東京報告会Android Studio 2.2の紹介@Google I/O 2016東京報告会
Android Studio 2.2の紹介@Google I/O 2016東京報告会
 
駆け出しエンジニアが拡張機能を開発してみた!
駆け出しエンジニアが拡張機能を開発してみた!駆け出しエンジニアが拡張機能を開発してみた!
駆け出しエンジニアが拡張機能を開発してみた!
 
ABC 2012 spring
ABC 2012 springABC 2012 spring
ABC 2012 spring
 
everevo × Open Graph
everevo × Open Grapheverevo × Open Graph
everevo × Open Graph
 
自社製品のバージョン管理 進化と問題解決の道のり
自社製品のバージョン管理 進化と問題解決の道のり自社製品のバージョン管理 進化と問題解決の道のり
自社製品のバージョン管理 進化と問題解決の道のり
 
Codename Oneの紹介
Codename Oneの紹介Codename Oneの紹介
Codename Oneの紹介
 
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
 
Android study part1
Android study part1Android study part1
Android study part1
 
Git hubで雑誌記事を執筆するのは間違っているだろうか
Git hubで雑誌記事を執筆するのは間違っているだろうかGit hubで雑誌記事を執筆するのは間違っているだろうか
Git hubで雑誌記事を執筆するのは間違っているだろうか
 
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のことアプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
 
git初心者からgit-flowを使えるレベルになって、リリースとレビューを効率化しよう
git初心者からgit-flowを使えるレベルになって、リリースとレビューを効率化しようgit初心者からgit-flowを使えるレベルになって、リリースとレビューを効率化しよう
git初心者からgit-flowを使えるレベルになって、リリースとレビューを効率化しよう
 
DevLOVE広島 第1回 その改善いつするの?
DevLOVE広島 第1回  その改善いつするの?DevLOVE広島 第1回  その改善いつするの?
DevLOVE広島 第1回 その改善いつするの?
 
Jenkins実践入門 第二版 What's New
Jenkins実践入門 第二版 What's NewJenkins実践入門 第二版 What's New
Jenkins実践入門 第二版 What's New
 
[potatotips #18] Android M Developer Preview & Wear 最新トピック
[potatotips #18] Android M Developer Preview & Wear 最新トピック[potatotips #18] Android M Developer Preview & Wear 最新トピック
[potatotips #18] Android M Developer Preview & Wear 最新トピック
 
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違いPHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
 
Remote Development with Visual Studio Code & A clean dev env, working every ...
Remote Development with Visual Studio Code &  A clean dev env, working every ...Remote Development with Visual Studio Code &  A clean dev env, working every ...
Remote Development with Visual Studio Code & A clean dev env, working every ...
 
Google Play Developer APIを使ってみた
Google Play Developer APIを使ってみたGoogle Play Developer APIを使ってみた
Google Play Developer APIを使ってみた
 
マイコン入門(2)
マイコン入門(2)マイコン入門(2)
マイコン入門(2)
 
Using the Fragments(Android)
Using the Fragments(Android)Using the Fragments(Android)
Using the Fragments(Android)
 

Viewers also liked

jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリーjenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
Junya Suzuki
 
継続的インテグレーションとテストの話
継続的インテグレーションとテストの話継続的インテグレーションとテストの話
継続的インテグレーションとテストの話
Preferred Networks
 

Viewers also liked (17)

いつやるの?Git入門 v1.1.0
いつやるの?Git入門 v1.1.0いつやるの?Git入門 v1.1.0
いつやるの?Git入門 v1.1.0
 
STFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テストSTFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テスト
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
 
Dockerとフロントエンド
DockerとフロントエンドDockerとフロントエンド
Dockerとフロントエンド
 
Jenkinsを利用したCI、弊社導入事例
Jenkinsを利用したCI、弊社導入事例Jenkinsを利用したCI、弊社導入事例
Jenkinsを利用したCI、弊社導入事例
 
Open STF Plugin 作ってみた
Open STF Plugin 作ってみたOpen STF Plugin 作ってみた
Open STF Plugin 作ってみた
 
Startup jenkins!
Startup jenkins!Startup jenkins!
Startup jenkins!
 
Androidテスティング実践2 システムテスト編
Androidテスティング実践2 システムテスト編Androidテスティング実践2 システムテスト編
Androidテスティング実践2 システムテスト編
 
Androidテスティング実践3 ユニットテスト・CI編
Androidテスティング実践3 ユニットテスト・CI編Androidテスティング実践3 ユニットテスト・CI編
Androidテスティング実践3 ユニットテスト・CI編
 
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリーjenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
 
継続的インテグレーションとテストの話
継続的インテグレーションとテストの話継続的インテグレーションとテストの話
継続的インテグレーションとテストの話
 
Androidアプリ開発のテスト環境
Androidアプリ開発のテスト環境Androidアプリ開発のテスト環境
Androidアプリ開発のテスト環境
 
「自動家(オートメータ)をつくる」-システムテスト自動化カンファレンス2014 「.reviewrc」枠発表-
「自動家(オートメータ)をつくる」-システムテスト自動化カンファレンス2014 「.reviewrc」枠発表-「自動家(オートメータ)をつくる」-システムテスト自動化カンファレンス2014 「.reviewrc」枠発表-
「自動家(オートメータ)をつくる」-システムテスト自動化カンファレンス2014 「.reviewrc」枠発表-
 
「Selenium実践入門」で学ぶテスト自動化の世界
「Selenium実践入門」で学ぶテスト自動化の世界「Selenium実践入門」で学ぶテスト自動化の世界
「Selenium実践入門」で学ぶテスト自動化の世界
 
DevOps Practices: Configuration as Code
DevOps Practices:Configuration as CodeDevOps Practices:Configuration as Code
DevOps Practices: Configuration as Code
 
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くするGulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
 
Configuration As Code - Adoption of the Job DSL Plugin at Netflix
Configuration As Code - Adoption of the Job DSL Plugin at NetflixConfiguration As Code - Adoption of the Job DSL Plugin at Netflix
Configuration As Code - Adoption of the Job DSL Plugin at Netflix
 

Similar to フロントエンド開発者のためのJenkins

Jenkinsを用いたAndroidアプリビルド作業効率化
Jenkinsを用いたAndroidアプリビルド作業効率化Jenkinsを用いたAndroidアプリビルド作業効率化
Jenkinsを用いたAndroidアプリビルド作業効率化
Kenichi Kambara
 
Jenkinsを使おうよ
Jenkinsを使おうよJenkinsを使おうよ
Jenkinsを使おうよ
Yohei Oda
 
Net なプロジェクトでも jenkins を使ってみた
Net なプロジェクトでも jenkins を使ってみたNet なプロジェクトでも jenkins を使ってみた
Net なプロジェクトでも jenkins を使ってみた
Oda Shinsuke
 
Xcode 7におけるUIテストとカバレジ計測 #yidev 第20回勉強会
Xcode 7におけるUIテストとカバレジ計測 #yidev 第20回勉強会Xcode 7におけるUIテストとカバレジ計測 #yidev 第20回勉強会
Xcode 7におけるUIテストとカバレジ計測 #yidev 第20回勉強会
Koji Hasegawa
 
Jenkinsを使った初めての継続的インテグレーション
Jenkinsを使った初めての継続的インテグレーションJenkinsを使った初めての継続的インテグレーション
Jenkinsを使った初めての継続的インテグレーション
dcubeio
 

Similar to フロントエンド開発者のためのJenkins (20)

自動テストとJenkinsの活用 公開版
自動テストとJenkinsの活用 公開版自動テストとJenkinsの活用 公開版
自動テストとJenkinsの活用 公開版
 
Jenkinsを用いたAndroidアプリビルド作業効率化
Jenkinsを用いたAndroidアプリビルド作業効率化Jenkinsを用いたAndroidアプリビルド作業効率化
Jenkinsを用いたAndroidアプリビルド作業効率化
 
Jenkinsを使おうよ
Jenkinsを使おうよJenkinsを使おうよ
Jenkinsを使おうよ
 
Androidリリース作業の効率化(2)
Androidリリース作業の効率化(2)Androidリリース作業の効率化(2)
Androidリリース作業の効率化(2)
 
はてなにおける Android アプリのソフトウェアテスト
はてなにおける Android アプリのソフトウェアテストはてなにおける Android アプリのソフトウェアテスト
はてなにおける Android アプリのソフトウェアテスト
 
iQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナーiQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナー
 
Facebook Night vol. 6
Facebook Night vol. 6Facebook Night vol. 6
Facebook Night vol. 6
 
Jenkins導入ライブ
Jenkins導入ライブJenkins導入ライブ
Jenkins導入ライブ
 
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
 
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
 
Net なプロジェクトでも jenkins を使ってみた
Net なプロジェクトでも jenkins を使ってみたNet なプロジェクトでも jenkins を使ってみた
Net なプロジェクトでも jenkins を使ってみた
 
Device Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テストDevice Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テスト
 
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
 
App inventor for bussiness
App inventor for bussinessApp inventor for bussiness
App inventor for bussiness
 
兄弟アプリのロジック共通化とビルド高速化の実験
兄弟アプリのロジック共通化とビルド高速化の実験兄弟アプリのロジック共通化とビルド高速化の実験
兄弟アプリのロジック共通化とビルド高速化の実験
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
 
Xcode 7におけるUIテストとカバレジ計測 #yidev 第20回勉強会
Xcode 7におけるUIテストとカバレジ計測 #yidev 第20回勉強会Xcode 7におけるUIテストとカバレジ計測 #yidev 第20回勉強会
Xcode 7におけるUIテストとカバレジ計測 #yidev 第20回勉強会
 
デブサミ 2013 日本App Inventorユーザー会
デブサミ 2013 日本App Inventorユーザー会デブサミ 2013 日本App Inventorユーザー会
デブサミ 2013 日本App Inventorユーザー会
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
 
Jenkinsを使った初めての継続的インテグレーション
Jenkinsを使った初めての継続的インテグレーションJenkinsを使った初めての継続的インテグレーション
Jenkinsを使った初めての継続的インテグレーション
 

フロントエンド開発者のためのJenkins