デザイナーといい感じに プロトタイピング on Rails

デザイナーといい感じにプロトタイピング 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/

大人のトラベル＆カルチャー動画マガジン LeTRONC[ ルトロン ]

http://letronc-m.com/

今日のテーマは「スタートアップ と 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