Embed Size (px)
Citation preview
デザイナーといい感じにプロトタイピング on Rails
@hisatake / OPEN8 Inc.第一回スタートアップ Rails 勉強会 2016.9.27
$ ruby -e 'puts " はじめまして "'
株式会社オープンエイト技術開発 ジェネラルマネージャー石橋 尚武 / @hisatake
オープンエイトで日本の開発の統括を担当。
2008 年ぐらいから（曖昧） フリーランスのエンジニアとして活動2010 年ぐらいから（曖昧） Ruby on Rails を使い出す2012 年 株式会社 THE CLIP を立ち上げ（取締役・ CTO ）2015 年 THE CLIP を株式会社 オープンエイトに売却後、オープンエイトの日本の開発の責任者に。ボードメンバーとして経営にも参画。
略歴
フリーランス → THE CLIP 時代に様々な新規 Web サービス開発を担当http://theclip.jp/works/
今日のテーマは「スタートアップ と Rails 」
スタートアップにとって大事なこと開発速度
×プロダクトの質→ プロトタイピング
前提としてる開発チーム
1. スタートアップ（ or 少数チーム）2. Web ベースのサービスを作りたい3. エンジニア（数人） / Web デザイナー（ 1 人）
一時代（二時代？）前の制作
1. Photoshop でデザイン2. 修正 修正💦 💦
3. OK が出たら、マークアップへ4. マークアップしたものは別リポジトリで管理5. マークアップ後、システムへ組み込んでいく
→ プロトタイピングツールなど出てきたものの、、
無駄が多い！！修正の手戻り、めんどくさい！！
💡直接 HTML+CSS（とちょっとの JavaScript ）を Rails 上で書いてもらおう→ プロトタイピング on Rails
designs_controller の導入1. designs_controller 作る
$ bundle exec rails g controller designs
unless Rails.env.production? get '/designs/*path' => 'designs#show' end
2. routes を定義し
class DesignsController < ApplicationController def show render "designs/#{params[:path]}" endend
3. controller をゴニョゴニョ
4. あとはデザイナーにデザイン・マークアップを依頼🙏app/views/designs/test.html.erb -> http://localhost:3000/designs/test で閲覧可能
designs_controller の効果
1. ロジックは分離されるが、レイアウトなどは共通化可能2. 同じリポジトリなので history 管理などが楽3. 開発環境がデザイナーの手元でも必ず動く
色々とすっとばせるので、圧倒的スピード＋
多くは求めすぎない
1. 環境構築は全面的にバックアップ（笑顔で ）☺2. 「 Pull したら動かなくなった・・・」 「すぐそっち行くよー（笑顔で ）」☺3. 「動き入れたいけれども JavaScript わからない・・・」 「難しいところはこっちで動きつけるよー（笑顔で ）」☺4. テストなどは基本的にエンジニア
あくまでもデザイナーはデザイナー苦手分野は全力でサポートしよう
副次的効果
1. デザイナーの能力の向上→ Photoshop を使わず直接 HTML レベルでデザイン可能に→ 簡単な JavaScript であれば書けるように→ git 力の向上→ render や if 文ぐらいはわかるように
2. 黒い画面（ Terminal.app ）への恐怖感の減少 / Rails への理解→ デザイナー「新しいプロジェクト始まったから designs つくって、プロトタイピング進めておくわ」3. 会話が増えるのでデザイナーとの距離がぐんと縮まる→ よいチームの形成にもつながる🍻
# useradd -g open8 [YOUR NAME]
エンジニア募集中です！Rubyだけじゃなく、 Scala も使ってます！詳しくは懇談会ででも！
https://www.wantedly.com/projects/68451
