Suche senden
Hochladen
ディレクションのフロントエンド開発 @JSオジサン 12/17
•
0 gefällt mir
•
4,103 views
Yosuke Doke
Folgen
JSオジサン 12/17の登壇資料です。
Weniger lesen
Mehr lesen
Karriere
Melden
Teilen
Melden
Teilen
1 von 31
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Laravel4で運用するサービス,そしてlaravel5へ
Laravel4で運用するサービス,そしてlaravel5へ
Nʎ Nkogues
ロボ年表を作ってみた
ロボ年表を作ってみた
Nishida Kansuke
コピー自動生成プロダクトでDataflowを導入した話
コピー自動生成プロダクトでDataflowを導入した話
ShunyoKawamoto
YJTC18 A-1 大規模サーバの戦略
YJTC18 A-1 大規模サーバの戦略
Yahoo!デベロッパーネットワーク
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
2018年度新入社員研修実績紹介
2018年度新入社員研修実績紹介
CASAREAL, Inc.
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
Yahoo!デベロッパーネットワーク
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
kwatch
Empfohlen
Laravel4で運用するサービス,そしてlaravel5へ
Laravel4で運用するサービス,そしてlaravel5へ
Nʎ Nkogues
ロボ年表を作ってみた
ロボ年表を作ってみた
Nishida Kansuke
コピー自動生成プロダクトでDataflowを導入した話
コピー自動生成プロダクトでDataflowを導入した話
ShunyoKawamoto
YJTC18 A-1 大規模サーバの戦略
YJTC18 A-1 大規模サーバの戦略
Yahoo!デベロッパーネットワーク
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
2018年度新入社員研修実績紹介
2018年度新入社員研修実績紹介
CASAREAL, Inc.
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
Yahoo!デベロッパーネットワーク
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
kwatch
Automation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
softlayerjp
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
DIVE INTO CODE Corp.
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
Yahoo!デベロッパーネットワーク
おすすめインフラ! for スタートアップ
おすすめインフラ! for スタートアップ
Koichiro Sumi
決済金融から始めるデータドリブンカンパニー #yjmu
決済金融から始めるデータドリブンカンパニー #yjmu
Yahoo!デベロッパーネットワーク
db tech showcase2019 オープニングセッション @ 石川 雅也
db tech showcase2019 オープニングセッション @ 石川 雅也
Insight Technology, Inc.
スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果
Koichiro Sumi
Intalio Cloud Workshop
Intalio Cloud Workshop
Daisuke Sugai
デブサミ2020 事業グロースを加速させる「分析基盤」の作り方 japantaxi
デブサミ2020 事業グロースを加速させる「分析基盤」の作り方 japantaxi
Masatoshi Ida
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーター
Takuya Tejima
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
Yoshie Kaneno
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
Kensaku Komatsu
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Kazuya Sugimoto
Module02
Module02
洋信 後藤
決済金融から始めるデータドリブンカンパニー
決済金融から始めるデータドリブンカンパニー
Tokuhiro Eto
Eclipse PDT + MakeGoodによるPHPコードのテスト
Eclipse PDT + MakeGoodによるPHPコードのテスト
Atsuhiro Kubo
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~
schoowebcampus
Railsやるやる_セキュリティ小話
Railsやるやる_セキュリティ小話
Naoki Ishibashi
趙簡単LOD入門 〜デジタル庁をデジタル化する〜 (改訂版)
趙簡単LOD入門 〜デジタル庁をデジタル化する〜 (改訂版)
National Institute of Informatics (NII)
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Kazunari Hara
【エイカレ・サミット2023】実証実験 審査員特別賞 株式会社スタッフサービス「笑ってぼたもちーズ」
【エイカレ・サミット2023】実証実験 審査員特別賞 株式会社スタッフサービス「笑ってぼたもちーズ」
新世代エイジョカレッジ実行委員会
Career introduction document of Masahiro Nishi
Career introduction document of Masahiro Nishi
Masahiro Nishi
Weitere ähnliche Inhalte
Ähnlich wie ディレクションのフロントエンド開発 @JSオジサン 12/17
Automation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
softlayerjp
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
DIVE INTO CODE Corp.
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
Yahoo!デベロッパーネットワーク
おすすめインフラ! for スタートアップ
おすすめインフラ! for スタートアップ
Koichiro Sumi
決済金融から始めるデータドリブンカンパニー #yjmu
決済金融から始めるデータドリブンカンパニー #yjmu
Yahoo!デベロッパーネットワーク
db tech showcase2019 オープニングセッション @ 石川 雅也
db tech showcase2019 オープニングセッション @ 石川 雅也
Insight Technology, Inc.
スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果
Koichiro Sumi
Intalio Cloud Workshop
Intalio Cloud Workshop
Daisuke Sugai
デブサミ2020 事業グロースを加速させる「分析基盤」の作り方 japantaxi
デブサミ2020 事業グロースを加速させる「分析基盤」の作り方 japantaxi
Masatoshi Ida
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーター
Takuya Tejima
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
Yoshie Kaneno
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
Kensaku Komatsu
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Kazuya Sugimoto
Module02
Module02
洋信 後藤
決済金融から始めるデータドリブンカンパニー
決済金融から始めるデータドリブンカンパニー
Tokuhiro Eto
Eclipse PDT + MakeGoodによるPHPコードのテスト
Eclipse PDT + MakeGoodによるPHPコードのテスト
Atsuhiro Kubo
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~
schoowebcampus
Railsやるやる_セキュリティ小話
Railsやるやる_セキュリティ小話
Naoki Ishibashi
趙簡単LOD入門 〜デジタル庁をデジタル化する〜 (改訂版)
趙簡単LOD入門 〜デジタル庁をデジタル化する〜 (改訂版)
National Institute of Informatics (NII)
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Kazunari Hara
Ähnlich wie ディレクションのフロントエンド開発 @JSオジサン 12/17
(20)
Automation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
おすすめインフラ! for スタートアップ
おすすめインフラ! for スタートアップ
決済金融から始めるデータドリブンカンパニー #yjmu
決済金融から始めるデータドリブンカンパニー #yjmu
db tech showcase2019 オープニングセッション @ 石川 雅也
db tech showcase2019 オープニングセッション @ 石川 雅也
スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果
Intalio Cloud Workshop
Intalio Cloud Workshop
デブサミ2020 事業グロースを加速させる「分析基盤」の作り方 japantaxi
デブサミ2020 事業グロースを加速させる「分析基盤」の作り方 japantaxi
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーター
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Module02
Module02
決済金融から始めるデータドリブンカンパニー
決済金融から始めるデータドリブンカンパニー
Eclipse PDT + MakeGoodによるPHPコードのテスト
Eclipse PDT + MakeGoodによるPHPコードのテスト
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~
Railsやるやる_セキュリティ小話
Railsやるやる_セキュリティ小話
趙簡単LOD入門 〜デジタル庁をデジタル化する〜 (改訂版)
趙簡単LOD入門 〜デジタル庁をデジタル化する〜 (改訂版)
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Kürzlich hochgeladen
【エイカレ・サミット2023】実証実験 審査員特別賞 株式会社スタッフサービス「笑ってぼたもちーズ」
【エイカレ・サミット2023】実証実験 審査員特別賞 株式会社スタッフサービス「笑ってぼたもちーズ」
新世代エイジョカレッジ実行委員会
Career introduction document of Masahiro Nishi
Career introduction document of Masahiro Nishi
Masahiro Nishi
240412_HP用_AIA紹介資料 .pptx
240412_HP用_AIA紹介資料 .pptx
ssuser670492
【エイカレ・サミット2023】実証実験 大賞 株式会社明治「Cinderella」
【エイカレ・サミット2023】実証実験 大賞 株式会社明治「Cinderella」
新世代エイジョカレッジ実行委員会
【エイカレ・サミット2023】実証実験 ファイナリスト 日本イーライリリー株式会社「Lilly Up!」
【エイカレ・サミット2023】実証実験 ファイナリスト 日本イーライリリー株式会社「Lilly Up!」
新世代エイジョカレッジ実行委員会
サイボウズの技術情報を発信するWebディレクター(開発者向けサイト)の紹介.pdf
サイボウズの技術情報を発信するWebディレクター(開発者向けサイト)の紹介.pdf
Cybozu, Inc.
2023 High School Student Project in Shimanto Town
2023 High School Student Project in Shimanto Town
jun_suto
Kürzlich hochgeladen
(7)
【エイカレ・サミット2023】実証実験 審査員特別賞 株式会社スタッフサービス「笑ってぼたもちーズ」
【エイカレ・サミット2023】実証実験 審査員特別賞 株式会社スタッフサービス「笑ってぼたもちーズ」
Career introduction document of Masahiro Nishi
Career introduction document of Masahiro Nishi
240412_HP用_AIA紹介資料 .pptx
240412_HP用_AIA紹介資料 .pptx
【エイカレ・サミット2023】実証実験 大賞 株式会社明治「Cinderella」
【エイカレ・サミット2023】実証実験 大賞 株式会社明治「Cinderella」
【エイカレ・サミット2023】実証実験 ファイナリスト 日本イーライリリー株式会社「Lilly Up!」
【エイカレ・サミット2023】実証実験 ファイナリスト 日本イーライリリー株式会社「Lilly Up!」
サイボウズの技術情報を発信するWebディレクター(開発者向けサイト)の紹介.pdf
サイボウズの技術情報を発信するWebディレクター(開発者向けサイト)の紹介.pdf
2023 High School Student Project in Shimanto Town
2023 High School Student Project in Shimanto Town
ディレクションのフロントエンド開発 @JSオジサン 12/17
1.
Copyright 2015 1PAC.
INC. All Right Reserved. 1 ディレクションのためのフロントエンド開発 1PAC どうけようすけ 2015/12/17
2.
Copyright 2015 1PAC.
INC. All Right Reserved. 2 自己紹介 道家 陽介 所属・職種 株式会社 ワンパク テクニカルディレクター フロントエンドエンジニアー 経歴 名古屋芸術大学 デザイン学科 面白法人 カヤック 株式会社 ワンパク
3.
Copyright 2015 1PAC.
INC. All Right Reserved. 3 ワンパクについて 設立 2008年 社員数 23名 オフィス 中目黒本社 大阪支社 構成 CD/D 8名 AD/DE 5名 TD/FE 3名 SE/PG 4名 BO 1名
4.
Copyright 2015 1PAC.
INC. All Right Reserved. 4 オジサン的な話
5.
Copyright 2015 1PAC.
INC. All Right Reserved. 5 オジサン歴 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
6.
Copyright 2015 1PAC.
INC. All Right Reserved. 6 Middlemanと400ページ強の量産と僕
7.
Copyright 2015 1PAC.
INC. All Right Reserved. 7 Middlemanとは https://middlemanapp.com/
8.
Copyright 2015 1PAC.
INC. All Right Reserved. 8 Middleman ざっくり言うと Rubyで作られた開発環境 主な用途 静的なサイトを効率よく開発・管理できる 技術的な特徴 Ruby on Railsライクに開発ができる 主な機能 アセットパイプライン(Sprockets) - SASS - CoffeeScript パーシャル テンプレートエンジン(erb) 変数 ライブリロード Rubyのヘルパーメソッド 多様なプラグイン その他いろいろ
9.
Copyright 2015 1PAC.
INC. All Right Reserved. 9 厳しい与件
10.
Copyright 2015 1PAC.
INC. All Right Reserved. 10 厳しい与件 とあるブランドサイトのリニューアル 静的サイト 商品数約400点
11.
Copyright 2015 1PAC.
INC. All Right Reserved. 11 厳しい与件 とあるブランドサイトのリニューアル 静的サイト 商品数約400点 商品のコピーを全部リライト(!)
12.
Copyright 2015 1PAC.
INC. All Right Reserved. 12 厳しい与件 とあるブランドサイトのリニューアル 静的サイト 商品数約400点 商品のコピーを全部リライト(!) 開発期間2ヶ月(!!)
13.
Copyright 2015 1PAC.
INC. All Right Reserved. 13 で、何をやったか 400個くらいある商品情報をYAMLで管理し一気に 書き出す仕組みを作った
14.
Copyright 2015 1PAC.
INC. All Right Reserved. 14 技術的なポイント Middleman-blogというプラグインを導入 クライアントがぎりぎりまでデータを編集しそうだったの でExcelからYAMLに変換するプログラムをつくった - PHP製 - 社内の開発環境に配置 gem "middleman-blog"
15.
Copyright 2015 1PAC.
INC. All Right Reserved. 15 <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
16.
Copyright 2015 1PAC.
INC. All Right Reserved. 16 ワークフロー 1. Excelがくる 2. YAMLにする(20秒くらい) 3. つくったYAMLをプロジェクトにコピー 4. ビルド 5. コミット
17.
Copyright 2015 1PAC.
INC. All Right Reserved. 17 ワークフロー 1. Excelがくる 2. YAMLにする(20秒くらい) 3. つくったYAMLをプロジェクトにコピー 4. ビルド 5. コミット 400ファイル+(OGP用の画像やページも生成)が大体30分 未満で確認できる
18.
Copyright 2015 1PAC.
INC. All Right Reserved. 18 案件進行的なポイント 反映漏れが減る 修正がいくら来ても嫌な気分にならない クライアントはいつもどおりのやり方(Excel)で入力できる
19.
Copyright 2015 1PAC.
INC. All Right Reserved. 19 エンジニアが開発以外で貢献できること
20.
Copyright 2015 1PAC.
INC. All Right Reserved. 20 今日の話の趣旨 ディレクション ≠ ディレクター
21.
Copyright 2015 1PAC.
INC. All Right Reserved. 21 ディレクション ≠ ディレクター 一般的なプロジェクトの概念 プロジェクト クライアント プロダク ション
22.
Copyright 2015 1PAC.
INC. All Right Reserved. 22 ディレクション ≠ ディレクター 一般的なプロジェクトの概念 プロジェクト ディレク ター エンジニア デザイナー
23.
Copyright 2015 1PAC.
INC. All Right Reserved. 23 今日の話の趣旨 ディレクション ≠ ディレクター
24.
Copyright 2015 1PAC.
INC. All Right Reserved. 24 ディレクション ≠ ディレクター プロジェクト内の構成要素 要件 課題 タスク 期限 リスク
25.
Copyright 2015 1PAC.
INC. All Right Reserved. 25 ディレクション ≠ ディレクター プロジェクト内の構成要素に対しての関わりかた 要件 課題 タスク 期限 リスク 企画 ディレクション 設計 技術 解決
26.
Copyright 2015 1PAC.
INC. All Right Reserved. 26 ディレクション ≠ ディレクター 関わり方にたいしての担当の仕方 企画 ディレクション 設計 技術 ディレクター デザイナー エンジニア
27.
Copyright 2015 1PAC.
INC. All Right Reserved. 27 ディレクション ≠ ディレクター 関わり方にたいしての担当の仕方 企画 ディレクション 設計 技術 ディレクター デザイナー エンジニア
28.
Copyright 2015 1PAC.
INC. All Right Reserved. 28 ディレクション ≠ ディレクター エンジニアから見た関わり方 エンジニア 企画 ディレクション 設計 技術 貢献 貢献 貢献 貢献
29.
Copyright 2015 1PAC.
INC. All Right Reserved. 29 ディレクション ≠ ディレクター プロジェクトに必要なすべての事の中で、 誰がどんなかかわり合いをするのかが重要。 また、どう関わろうとするかでやれることが変わってくる。
30.
Copyright 2015 1PAC.
INC. All Right Reserved. 30 他にもできるプロジェクト内ツール PhotoShop/Illusratorの書き出しマクロ(JSX) Flashの書き出しマクロ(JSFL) 設計資料をHTMLで作成(AsciiDoctorなど) HTML/CSS/JSでつくってAIRアプリ化する デバッグ用のツールバーをとかをテストサイトに仕込んでおく スーパープレビューサイト(JPEGとかHTMLをアップすると一覧ページが自動生成される) モジュールリスト
31.
Copyright 2015 1PAC.
INC. All Right Reserved. 31 ご清聴ありがとうございました
Jetzt herunterladen