SlideShare ist ein Scribd-Unternehmen logo
1 von 43
Downloaden Sie, um offline zu lesen
これからの
「フロントエンド開発」の話
〜(デザイナー所属の)フロントエンドエンジニアでも知っておきたいこと〜
2016.07.23@UI Live ! in Kanazawa
自己紹介
● DMM.comラボ 2012年入社
○ システム本部 PF開発部
○ 第2グループ(会員基盤)
■ フロントエンドチームリーダー
■ 去年までどっぷりバックエンド担当
○ 身長186cm、バレー部、OK?
今日のお話は
「開発のフロー」
についてです。
お話の留意事項
1. エンジニア→デザイナー目線
● 特にコーダーからフロントエンドエンジニアに成り上がった方
● 特に弊社のように、分業のレベルが激しい
● 開発フローの細かい話はしない予定
● エンジニアの方には退屈かも、ごめんなさい
2. Not 深い話, But ふんわりとした話
● 最近の開発〜リリースまでの流れを把握しておけば
  開発フローも洗練され、いいサービスをより早く作れるのでは?
3. TL;DR
目次
1. お話のきっかけ
2. 最近耳にするxxx
3. 開発フロー全体の話
4. 各フローの補足説明
5. まとめ
ことの始まり
社内での気付きから...
● 社内向けUXセミナーでストーリーボードを見て衝撃
○ 全体を俯瞰してどう作るかわかりやすい!!!
● デザイナーの中でも自主的にgitが広まる
○ これはきっともっとわかりあえるぞ!!!
(この流れ)だから、このUIなのか!
もしかしたら...
● 開発フロー全体を知れば気づきがあるかもしれない!
○ ポイントだけ伝えても、きっと伝わっていない
○ git便利!じゃなくて、全体を踏まえた役割を知る
よく目にするxxx
おそらくよく目にしているxxx
● gitだ!githubだ!
● CIやりたい!Jenkinsだ!CircleCIだ!
● Dockerだ!Docker使いたい!
● ChatOpsでやってます!
● Ansibleで構成管理やってます!
おそらくよく目にしているxxx
● gitだ!githubだ!
● CIやりたい!Jenkinsだ!CircleCIだ!
● Dockerだ!Docker使いたい!
● ChatOpsでやってます!
● Ansibleで構成管理やってます!
決して難しいことを
したい訳ではない
やりたいことはいたって単純
変更 変更
検証
NG
すぐ
修正
検証
OK
変更
やりたいこと
変更 変更 変更
検証
NG
バグ
大量
やりたくないこと
たとえばの話
カセットゲームを作るなら...
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
開発を進める
開発
納品
まとめ
動作
検証
在庫
営業
部隊お店B
お店C
お店A
成果物としてまとめる
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
その段階で問題なく動作するか検証
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
最終的に販売パッケージ化を指示
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
パッケージ化が済んだら在庫に保管
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
パッケージ化が済み次第、販売を指示
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
各店舗へ販売開始を伝達
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
パッケージ化された製品を入荷
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
あまり想像に難くない流れでは?
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
先ほどの言葉を当てはめるなると...
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
各フローの連携について
①開発ととりまとめの流れ
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
cording&fix <-> git <-> github/stash
git
git
git
変更
A
変更
B
変更
C
変更
D
変更
E
PUSH!
PUSH!
COMMIT!
 COMMIT!
PUSH!
git, githubを選ぶ理由
● cordingやfix作業において...
○ 各自だけの変更を記録可能
○ 変更を取込みやすい
○ 変更取込みを申請できる(PR)
②とりまとめからの検証の流れ
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
github/stash <-> CI(Jenkins...etc.)
更新キタヨ!
githubやCIツールを選ぶ理由
● 検証を自動化するにあたり...
○ CIツールと連携しやすい
○ 変更を自動で検知して検証開始
③検証結果に応じて指示する流れ
納品
まとめ
動作
検証
開発
在庫
営業
部隊お店B
お店C
お店A
CI <-> ChatOps
OK!
NG!
ChatOps <-> CI <-> Docker
保管して!パッケージして!
ChatOps <-> Ansible
server
server
server
展開!
各サーバへ展開して!
ChatOpsを選ぶ理由
● 作業を半自動化(指示を出すだけ)
○ 通知のプラグインが豊富
○ 作業指示のログがきっちり残る
○ いわゆるbotにお任せできる
※手順がコードで管理されているため
知っておきたいポイント
特に知っておきたいポイント
● git
○ すでに浸透しつつある?
● Docker
○ ローカル開発環境として布教中...
● 継続的インテグレーションの流れ
まとめ
まとまらないまとめ
ただ個別にツールを使うだけではなく
開発フロー全体を俯瞰したほうが良い
開発からリリースまでの「流れ」を
   知っておく方がプラスになるはず
よりよいUIのために
自分たちの開発フローにも
目を向けてみませんか?

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

納品のない受託開発を支える レガシーコードを作らない仕組み
納品のない受託開発を支える レガシーコードを作らない仕組み納品のない受託開発を支える レガシーコードを作らない仕組み
納品のない受託開発を支える レガシーコードを作らない仕組み
 
講演1 redmineの簡易crmとしての活用事例r2
講演1 redmineの簡易crmとしての活用事例r2講演1 redmineの簡易crmとしての活用事例r2
講演1 redmineの簡易crmとしての活用事例r2
 
PP-Club 顧客向け方針
PP-Club 顧客向け方針PP-Club 顧客向け方針
PP-Club 顧客向け方針
 
GCS2013 リーンソフトウェア開発から見るゲーム開発7つのムダ
 GCS2013 リーンソフトウェア開発から見るゲーム開発7つのムダ  GCS2013 リーンソフトウェア開発から見るゲーム開発7つのムダ
GCS2013 リーンソフトウェア開発から見るゲーム開発7つのムダ
 
なぜ私はソニックガーデンのプログラマに転身できたのか?(Short ver.)
なぜ私はソニックガーデンのプログラマに転身できたのか?(Short ver.)なぜ私はソニックガーデンのプログラマに転身できたのか?(Short ver.)
なぜ私はソニックガーデンのプログラマに転身できたのか?(Short ver.)
 
DroidKaigi 2018 - Dialogflow for Android
DroidKaigi 2018 - Dialogflow for AndroidDroidKaigi 2018 - Dialogflow for Android
DroidKaigi 2018 - Dialogflow for Android
 
Swift歴2ヶ月でアプリを8本リリースしてみた話
Swift歴2ヶ月でアプリを8本リリースしてみた話Swift歴2ヶ月でアプリを8本リリースしてみた話
Swift歴2ヶ月でアプリを8本リリースしてみた話
 
Easy easy2
Easy easy2Easy easy2
Easy easy2
 
Javaプログラミング入門【第1回】
Javaプログラミング入門【第1回】Javaプログラミング入門【第1回】
Javaプログラミング入門【第1回】
 
WordPress 3.8 RC1
WordPress 3.8 RC1WordPress 3.8 RC1
WordPress 3.8 RC1
 
♡PHPが恋しい話♡
♡PHPが恋しい話♡♡PHPが恋しい話♡
♡PHPが恋しい話♡
 
チラ見せ♡ナイト@20150410 LT公開用
チラ見せ♡ナイト@20150410 LT公開用チラ見せ♡ナイト@20150410 LT公開用
チラ見せ♡ナイト@20150410 LT公開用
 
Service a week したさあるよな?
Service a week したさあるよな?Service a week したさあるよな?
Service a week したさあるよな?
 
設計書からの卒業
設計書からの卒業設計書からの卒業
設計書からの卒業
 
Ciecleci
CiecleciCiecleci
Ciecleci
 
UnityでC#6.0が使える未来がそろそろ来そう!
UnityでC#6.0が使える未来がそろそろ来そう!UnityでC#6.0が使える未来がそろそろ来そう!
UnityでC#6.0が使える未来がそろそろ来そう!
 
コンシューマゲーム開発におけるHansoftの活用事例
コンシューマゲーム開発におけるHansoftの活用事例コンシューマゲーム開発におけるHansoftの活用事例
コンシューマゲーム開発におけるHansoftの活用事例
 
KenmaLT
KenmaLTKenmaLT
KenmaLT
 
Redmineプラグイン導入・開発入門
Redmineプラグイン導入・開発入門Redmineプラグイン導入・開発入門
Redmineプラグイン導入・開発入門
 
View CustomizeからREST APIを使用する
View CustomizeからREST APIを使用するView CustomizeからREST APIを使用する
View CustomizeからREST APIを使用する
 

Ähnlich wie Ui live資料

ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
Mori Keita
 

Ähnlich wie Ui live資料 (20)

いろいろ見せますLord of Knightsのクライアント開発事例紹介
いろいろ見せますLord of Knightsのクライアント開発事例紹介いろいろ見せますLord of Knightsのクライアント開発事例紹介
いろいろ見せますLord of Knightsのクライアント開発事例紹介
 
【いまこそ】エンジニアとデザイナー【立ち上がれ】
【いまこそ】エンジニアとデザイナー【立ち上がれ】	【いまこそ】エンジニアとデザイナー【立ち上がれ】
【いまこそ】エンジニアとデザイナー【立ち上がれ】
 
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
 
Zマイスターとの新たな価値探求 Rational
Zマイスターとの新たな価値探求 RationalZマイスターとの新たな価値探求 Rational
Zマイスターとの新たな価値探求 Rational
 
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
 
ChatGPT以後の時代をどう生きるか PWA Night vol.51
ChatGPT以後の時代をどう生きるか PWA Night vol.51ChatGPT以後の時代をどう生きるか PWA Night vol.51
ChatGPT以後の時代をどう生きるか PWA Night vol.51
 
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント
 
connpass特徴と開発の流れ
connpass特徴と開発の流れconnpass特徴と開発の流れ
connpass特徴と開発の流れ
 
2016 03 05_yokohama_north
2016 03 05_yokohama_north2016 03 05_yokohama_north
2016 03 05_yokohama_north
 
鹿駆動
鹿駆動鹿駆動
鹿駆動
 
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
 
Kintoneでエンジニアが納得のいく社内システムをつくる
Kintoneでエンジニアが納得のいく社内システムをつくるKintoneでエンジニアが納得のいく社内システムをつくる
Kintoneでエンジニアが納得のいく社内システムをつくる
 
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けようDjango ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
 
エンジニアとデザイナーの技術交流について
エンジニアとデザイナーの技術交流についてエンジニアとデザイナーの技術交流について
エンジニアとデザイナーの技術交流について
 
ビジネスサイドが知っておくべきエンジニアの役割についての話
ビジネスサイドが知っておくべきエンジニアの役割についての話ビジネスサイドが知っておくべきエンジニアの役割についての話
ビジネスサイドが知っておくべきエンジニアの役割についての話
 
Web開発の 今までとこれから
Web開発の 今までとこれからWeb開発の 今までとこれから
Web開発の 今までとこれから
 
ここがスゴい(変だ)よ!Git lab!
ここがスゴい(変だ)よ!Git lab!ここがスゴい(変だ)よ!Git lab!
ここがスゴい(変だ)よ!Git lab!
 
Visasq
VisasqVisasq
Visasq
 
未踏カンファレンス2012「メルコグループと未踏ソフト」(スポンサーPR枠)<字幕付き>
未踏カンファレンス2012「メルコグループと未踏ソフト」(スポンサーPR枠)<字幕付き>未踏カンファレンス2012「メルコグループと未踏ソフト」(スポンサーPR枠)<字幕付き>
未踏カンファレンス2012「メルコグループと未踏ソフト」(スポンサーPR枠)<字幕付き>
 
インフラエンジニアに送るVSCode 入門
インフラエンジニアに送るVSCode 入門インフラエンジニアに送るVSCode 入門
インフラエンジニアに送るVSCode 入門
 

Ui live資料