デザイナーが RailsとGitのことを少し知ってると色々捗る

2011年6月22日水曜日

はじまるよ


自己紹介


自己紹介町田哲平と申します。



Twitterアカウントは「machida」です。



FJORD,LLCという会社で働いてます。




FJORD,LLCという会社で働いてます。


@komagata

エンジニアとデザイナーの二人だけ


今日のテーマ

デザイナーがRailsとGitのことを

知ってると


今日のテーマ

デザイナーがRailsとGitのことを

知ってるとちょっとだけ


今日のテーマ

デザイナーがRubyとGitのことを

知ってるとちょっとだけ

色々捗る


今日のテーマ

だから


これ、デザイナーには難しいだろ JK


とは言わず

これ、デザイナーには難しいだろ JK


今日のテーマ

エンジニアの皆さんデザイナーに優しく教えてあげてください


Rails ＋ Git の開発って

楽になったよね




bundler




bundlerGitHub




bundlerGitHubHeroku




bundlerGitHubHerokuRVM




bundlerGitHubHerokuRVMPOW




bundlerGitHubHerokuRVMPOW

デザイナーにとっても

楽になった

（Mac必須）


だって Rails ＋ Git って


$ git clone XXXXX.git

リポジトリを持ってきて



$ cd XXXXX

ディレクトリを移動して



$ bundle

必要なGemを入れて



$ rake db:migrate

DBをセットアップ



$ rails s

サーバを立ち上げて



$ rails s

サーバを立ち上げて環境構築完了



/public/viewsをいじって



git add public/images/.

作ったファイルを

バージョン管理に追加して



git commit -a -m“added images”

作業内容をコミットして



git push origin master

リモートリポジトリに

プッシュ



やることこれだけ！

もっと何か作業をしたかったですか ? がっかりさせてゴメンナサイ。これだけです !



1. git clone2. cd3. bundle4. rake db:migrate5. rails s6. git add7. git commit8. git push9. git pull

必要なコマンドは

たったの九個だけ


初めのセットアップとリポジトリの更新の手順を教えれば

デザイナーでもこれくらい出来ちゃいます


初めのセットアップとリポジトリの更新の手順を教えれば

デザイナーでもこれくらい出来ちゃいます

だって黒い画面（ターミナル）に

字を打つだけだもん


この九個の手順をGistとかGoogleサイトに

書いてデザイナーと共有するだけでかなり捗る！


この九個の手順をGistとかGoogleサイトに

書いてデザイナーと共有するだけでかなり捗る！

最初は手順だけで十分、

あとは勝手にググります


もしデザイナーが

ググってもわからない

ことがあって、

それをエンジニアに

聞いてきたら

優しく教えてね


HTMLとCSSをzipにしてエンジニアに渡すという従来のやりかた


HTMLとCSSをzipにしてエンジニアに渡すという従来のやりかた間接的な

進め方のせいで発

生する

二度手間、三度手

間


HTMLとCSSをzipにしてエンジニアに渡すという従来のやりかた間接的な

進め方のせいで発

生する

二度手間、三度手

間

オワコン


デザイナーのローカルにも環境があることで



好き勝手にテストデータが入れられる




実際の使い心地を確認できる





DIVの名前をシステムと一致させられる





DIVの名前をシステムと一致させられる

メリット盛りだくさん


例えば、こんな風に

捗った


デザイナーだってDRY が好き

Don’t Repeat Yourself


捗った


render :partial =>'object'これって WordPress でいうところの<?php include (TEMPLATEPATH . “/object.php”); ?>と同じですよね


render :partial =>'object'これって WordPress でいうところの<?php include (TEMPLATEPATH . “/object.php”); ?>と同じですよね

僕はWordPressっ子なのでWordPress語に訳してしまう


じゃあ、この部分も partial にしちゃってもCSS で見た目を調整できますよ。bodyのclassにコントローラー名が付くようにしておいてくださーい


じゃあ、この部分も partial にしちゃってもCSS で見た目を調整できますよ。bodyのclassにコントローラー名が付くようにしておいてくださーい

やりましたー


といった感じで、デザイナーも効率のいい

マークアップの提案ができる

※弊社は二人なのでコーダー(？)って人はいないです




芽生える開発メンバーの一人という意識





芽生える開発メンバーの一人という意識

深まる開発メンバーの絆




捗った


経験を積めば積むほど話が早くなる


捗った


今度作るサービスは物語投稿サイトだから、“ stories ”があって、会員登録部分は devise を使って、“ users ”があって、ソーシャルな機能で“ comments ”と“ ranking ”がいりますねー。


サイトの大体の構成 viewsの構成


サイトの大体の構成 viewsの構成

慣れればこれだけで共有できちゃう


つまり、

アイディア

システム

デザイン


つまり、

アイディア

システム

デザイン

もっと奥までデザイナーと共有


ランチを食べながら話すだけで午後のやることがすぐ決まる



あれ？MTGっていらない！



捗ってんじゃん！！


これってやっぱりCOCのおかげConvention over Con!guration



80%のケースではRailsの規約解釈によって自動的にお膳立てしてもらい、残り20%のケースでだけ開発者が

手動で明示的に上書き設定すればいい



80%のケースではRailsの規約解釈によって自動的にお膳立てしてもらい、残り20%のケースでだけ開発者が

手動で明示的に上書き設定すればいい

に書いてありました



まぁ、要するにRailsで作ったやつって割と中身は似た感じ


割と中身は似た感じだから


経験を積むたび貯まるノウハウ



経験を積むたび貯まるノウハウ

別のメンバーと組んでも経験をそのまま生かせる



デザイナーのいない開発会社

デザイナーのいない開発チームに加わっても、今までの経験が生かせる！

受託で加わる

FJORD,LLC


FJORD,LLC

デザイナーのいない開発会社

経験を持ち帰る

また新たな経験をゲット！受託でレベルアップ


ということで


ということでデザイナーには難しいよねと、

あきらめずに、色々やらせてみると、

結構捗る


あと少しで終わります


ちょっと話が変わって



Githubを徘徊しても、CUIのツールばっかり（Gemとか）でデザインが必要なツールがあんまりなかった。



ここでちょっと趣向を変えて、新しいことを考えてます。


ハッカソンをやってみようかな


土曜か日曜のフィヨルドオフィスにエンジニアを招いて一日でサービスを作るっていう

ストイックな企画



土曜か日曜のフィヨルドオフィスにエンジニアを招いて一日でサービスを作るっていう

ストイックな企画


うまくいくか

わからないですが、

乞うご期待！


ご静聴ありがとうございました


デザイナーが RailsとGitのことを少し知ってると色々捗る

Design

Transcript of デザイナーが RailsとGitのことを少し知ってると色々捗る