ディレクションのフロントエンド開発 @JSオジサン 12/17

Copyright 2015 1PAC. INC. All Right Reserved. 1
ディレクションのためのフロントエンド開発
1PAC どうけようすけ
2015/12/17

自己紹介
 道家陽介
所属・職種
 株式会社ワンパク
 テクニカルディレクター
 フロントエンドエンジニアー
経歴
 名古屋芸術大学デザイン学科
 面白法人カヤック
 株式会社ワンパク

ワンパクについて
設立
 2008年
社員数
 23名
オフィス
 中目黒本社
 大阪支社
構成
 CD/D 8名
 AD/DE 5名
 TD/FE 3名
 SE/PG 4名
 BO 1名

オジサン的な話

オジサン歴
 Marcomedia Flash 4
 HTML4.01 / CSS2.1
 XHTML 1.0 XHTML 1.1
 Macromedia Flash 8
 ActionScript 2.0
 ActionScript 3.0
 Objective-C/Android
 HTML5/CSS3/Javascript

Middlemanと400ページ強の量産と僕

Middlemanとは
 https://middlemanapp.com/

Middleman
ざっくり言うと
 Rubyで作られた開発環境
主な用途
 静的なサイトを効率よく開発・管理できる
技術的な特徴
 Ruby on Railsライクに開発ができる
主な機能
 アセットパイプライン(Sprockets)
- SASS
- CoffeeScript
 パーシャル
 テンプレートエンジン(erb)
 変数
 ライブリロード
 Rubyのヘルパーメソッド
 多様なプラグイン
 その他いろいろ

厳しい与件

厳しい与件
 とあるブランドサイトのリニューアル
 静的サイト
 商品数約400点

厳しい与件
 静的サイト
 商品のコピーを全部リライト(！)

厳しい与件
 静的サイト
 商品のコピーを全部リライト(！)
 開発期間2ヶ月(！！)

で、何をやったか
 400個くらいある商品情報をYAMLで管理し一気に
書き出す仕組みを作った

技術的なポイント
 Middleman-blogというプラグインを導入
 クライアントがぎりぎりまでデータを編集しそうだったの
でExcelからYAMLに変換するプログラムをつくった
- PHP製
- 社内の開発環境に配置
gem "middleman-blog"

<h1>article.title</h1>
Middleman-blogについて
data = {friends:[
{ name : “nameA”},
{ name : “nameB”},
{ name : “nameC”},
]};
<h1>Friends</h1>
<ol>
<% data.friends.each do |f| %>
<li><%= f.name %></li>
<% end %>
</ol>
data = {articles:[
{ tite: “titleA”},
{ title: “titleB”},
{ title: “titleC”},
]};
<h1>article.title</h1>
通常のデータの使い方 Blogのデータの使い方
Hogehoge.html.erb
article.html.erb
articles.yaml
activate :articlesdo |article|
end

ワークフロー
1. Excelがくる
2. YAMLにする(20秒くらい)
3. つくったYAMLをプロジェクトにコピー
4. ビルド
5. コミット

ワークフロー
1. Excelがくる
2. YAMLにする(20秒くらい)
3. つくったYAMLをプロジェクトにコピー
4. ビルド
5. コミット
 400ファイル＋(OGP用の画像やページも生成)が大体30分
未満で確認できる

案件進行的なポイント
 反映漏れが減る
 修正がいくら来ても嫌な気分にならない
 クライアントはいつもどおりのやり方(Excel)で入力できる

エンジニアが開発以外で貢献できること

今日の話の趣旨
ディレクション ≠ ディレクター

 一般的なプロジェクトの概念
プロジェクト
クライアント
プロダク
ション

 一般的なプロジェクトの概念
プロジェクト
ディレク
ターエンジニア
デザイナー

今日の話の趣旨

 プロジェクト内の構成要素
要件
課題
タスク
期限
リスク

 プロジェクト内の構成要素に対しての関わりかた
要件
課題
タスク
期限
リスク
企画
ディレクション
設計
技術
解決

 関わり方にたいしての担当の仕方
企画
設計
技術
ディレクター
デザイナー
エンジニア

 エンジニアから見た関わり方
エンジニア
企画
設計
技術
貢献
貢献
貢献
貢献

プロジェクトに必要なすべての事の中で、
誰がどんなかかわり合いをするのかが重要。
また、どう関わろうとするかでやれることが変わってくる。

他にもできるプロジェクト内ツール
 PhotoShop/Illusratorの書き出しマクロ(JSX)
 Flashの書き出しマクロ(JSFL)
 設計資料をHTMLで作成(AsciiDoctorなど)
 HTML/CSS/JSでつくってAIRアプリ化する
 デバッグ用のツールバーをとかをテストサイトに仕込んでおく
 スーパープレビューサイト(JPEGとかHTMLをアップすると一覧ページが自動生成される)
 モジュールリスト

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

ディレクションのフロントエンド開発 @JSオジサン 12/17

More Related Content

Similar to ディレクションのフロントエンド開発 @JSオジサン 12/17 (20)

ディレクションのフロントエンド開発 @JSオジサン 12/17