Submit Search
Upload
0406web creators night_DeNA
•
2 likes
•
1,127 views
D
DeNA_open_events
Follow
April 6th, 2012. Web Creators night presentation.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 21
Download now
Download to read offline
Recommended
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Kei Yagi
はじめてのVue.js
はじめてのVue.js
Kei Yagi
Web Component概要
Web Component概要
Shumpei Shiraishi
Vue.js 基礎 + Vue CLI の使い方
Vue.js 基礎 + Vue CLI の使い方
Kei Yagi
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
Recommended
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Kei Yagi
はじめてのVue.js
はじめてのVue.js
Kei Yagi
Web Component概要
Web Component概要
Shumpei Shiraishi
Vue.js 基礎 + Vue CLI の使い方
Vue.js 基礎 + Vue CLI の使い方
Kei Yagi
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
Vue Router + Vuex
Vue Router + Vuex
Kei Yagi
I phoneアプリ入門 第3回
I phoneアプリ入門 第3回
Sachiko Kajishima
DOM Scripting & jQuery
DOM Scripting & jQuery
smallworkshop
Form libraries
Form libraries
Atsushi Odagiri
Google App Engine for Java
Google App Engine for Java
Takuya Tsuchida
Componentization with Gilgamesh
Componentization with Gilgamesh
Yusuke Goto
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Knocked out in knockout js
Knocked out in knockout js
Hiroyuki Tashima
Daily Newsletter: 17th May, 2011
Daily Newsletter: 17th May, 2011
Fullerton Securities
9 icms instructions_for_authors
9 icms instructions_for_authors
a2shafi
Tracxn Research — Online Photos Landscape, October 2016
Tracxn Research — Online Photos Landscape, October 2016
Tracxn
인천펜션 노보텔호텔
인천펜션 노보텔호텔
jdhfrter
IAFE Zone 3/6 - New Digital Priorities: Trends in Digital Marketing
IAFE Zone 3/6 - New Digital Priorities: Trends in Digital Marketing
Saffire
Introducción a la biotecnología
Introducción a la biotecnología
bkt_6
Sånn akkurat passe mye arkitektur
Sånn akkurat passe mye arkitektur
Vegard Hartmann
Comentarios de Piedad Córdoba a columna de Vladdo
Comentarios de Piedad Córdoba a columna de Vladdo
Poder Ciudadano
Impacto De Las Tics En La Cultura De La Mediacion A Distancia Para La Educaci...
Impacto De Las Tics En La Cultura De La Mediacion A Distancia Para La Educaci...
GUILLERMO MOLINA JARA
Online marketing and distribution
Online marketing and distribution
Việt Long Plaza
AcreditacióN 9 SesióN
AcreditacióN 9 SesióN
Elizabeth Huisa Veria
Dynamics CRM 2013 Customization and Configuration
Dynamics CRM 2013 Customization and Configuration
Satish
B100 board presentation
B100 board presentation
rjoana
More Related Content
What's hot
Vue Router + Vuex
Vue Router + Vuex
Kei Yagi
I phoneアプリ入門 第3回
I phoneアプリ入門 第3回
Sachiko Kajishima
DOM Scripting & jQuery
DOM Scripting & jQuery
smallworkshop
Form libraries
Form libraries
Atsushi Odagiri
Google App Engine for Java
Google App Engine for Java
Takuya Tsuchida
Componentization with Gilgamesh
Componentization with Gilgamesh
Yusuke Goto
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Knocked out in knockout js
Knocked out in knockout js
Hiroyuki Tashima
What's hot
(9)
Vue Router + Vuex
Vue Router + Vuex
I phoneアプリ入門 第3回
I phoneアプリ入門 第3回
DOM Scripting & jQuery
DOM Scripting & jQuery
Form libraries
Form libraries
Google App Engine for Java
Google App Engine for Java
Componentization with Gilgamesh
Componentization with Gilgamesh
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
Knocked out in knockout js
Knocked out in knockout js
Viewers also liked
Daily Newsletter: 17th May, 2011
Daily Newsletter: 17th May, 2011
Fullerton Securities
9 icms instructions_for_authors
9 icms instructions_for_authors
a2shafi
Tracxn Research — Online Photos Landscape, October 2016
Tracxn Research — Online Photos Landscape, October 2016
Tracxn
인천펜션 노보텔호텔
인천펜션 노보텔호텔
jdhfrter
IAFE Zone 3/6 - New Digital Priorities: Trends in Digital Marketing
IAFE Zone 3/6 - New Digital Priorities: Trends in Digital Marketing
Saffire
Introducción a la biotecnología
Introducción a la biotecnología
bkt_6
Sånn akkurat passe mye arkitektur
Sånn akkurat passe mye arkitektur
Vegard Hartmann
Comentarios de Piedad Córdoba a columna de Vladdo
Comentarios de Piedad Córdoba a columna de Vladdo
Poder Ciudadano
Impacto De Las Tics En La Cultura De La Mediacion A Distancia Para La Educaci...
Impacto De Las Tics En La Cultura De La Mediacion A Distancia Para La Educaci...
GUILLERMO MOLINA JARA
Online marketing and distribution
Online marketing and distribution
Việt Long Plaza
AcreditacióN 9 SesióN
AcreditacióN 9 SesióN
Elizabeth Huisa Veria
Dynamics CRM 2013 Customization and Configuration
Dynamics CRM 2013 Customization and Configuration
Satish
B100 board presentation
B100 board presentation
rjoana
Viewers also liked
(13)
Daily Newsletter: 17th May, 2011
Daily Newsletter: 17th May, 2011
9 icms instructions_for_authors
9 icms instructions_for_authors
Tracxn Research — Online Photos Landscape, October 2016
Tracxn Research — Online Photos Landscape, October 2016
인천펜션 노보텔호텔
인천펜션 노보텔호텔
IAFE Zone 3/6 - New Digital Priorities: Trends in Digital Marketing
IAFE Zone 3/6 - New Digital Priorities: Trends in Digital Marketing
Introducción a la biotecnología
Introducción a la biotecnología
Sånn akkurat passe mye arkitektur
Sånn akkurat passe mye arkitektur
Comentarios de Piedad Córdoba a columna de Vladdo
Comentarios de Piedad Córdoba a columna de Vladdo
Impacto De Las Tics En La Cultura De La Mediacion A Distancia Para La Educaci...
Impacto De Las Tics En La Cultura De La Mediacion A Distancia Para La Educaci...
Online marketing and distribution
Online marketing and distribution
AcreditacióN 9 SesióN
AcreditacióN 9 SesióN
Dynamics CRM 2013 Customization and Configuration
Dynamics CRM 2013 Customization and Configuration
B100 board presentation
B100 board presentation
Similar to 0406web creators night_DeNA
Jqm20120210
Jqm20120210
cmtomoda
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
android sola
Declaimerっていうやつつくった(つくってる)
Declaimerっていうやつつくった(つくってる)
Joe_noh
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
「Windows 8 ストア アプリ開発 tips」 vsug day 2012 winter (2012年12月15日)
「Windows 8 ストア アプリ開発 tips」 vsug day 2012 winter (2012年12月15日)
vsug_jim
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
Knockout
Knockout
Kazuhiro Eguchi
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
kimukou_26 Kimukou
Windows 8 ストア アプリ 開発 Tips
Windows 8 ストア アプリ 開発 Tips
Fujio Kojima
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
PF部2011年12月勉強会.androidsola
PF部2011年12月勉強会.androidsola
android sola
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
Html5 Web Applications
Html5 Web Applications
totty jp
ScalaMatsuri 2016
ScalaMatsuri 2016
Yoshitaka Fujii
Similar to 0406web creators night_DeNA
(20)
Jqm20120210
Jqm20120210
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
Declaimerっていうやつつくった(つくってる)
Declaimerっていうやつつくった(つくってる)
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
「Windows 8 ストア アプリ開発 tips」 vsug day 2012 winter (2012年12月15日)
「Windows 8 ストア アプリ開発 tips」 vsug day 2012 winter (2012年12月15日)
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Knockout
Knockout
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
Windows 8 ストア アプリ 開発 Tips
Windows 8 ストア アプリ 開発 Tips
jQuery Mobileの基礎
jQuery Mobileの基礎
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
PF部2011年12月勉強会.androidsola
PF部2011年12月勉強会.androidsola
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Html5 Web Applications
Html5 Web Applications
ScalaMatsuri 2016
ScalaMatsuri 2016
Recently uploaded
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Recently uploaded
(10)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
0406web creators night_DeNA
1.
HTML/CSS/JSの役割分担
Creative group 1
2.
⾃自⼰己紹介 草間 正則 (くさま まさのり)
12.4.9 株式会社ディー・エヌ・エー ソーシャルゲーム事業本部 ソーシャルゲーム統括部 SPWebUXグループ フロントエンドエンジニア ソーシャルゲームサイトのフロントの設計・コーディングを担当してます。 2
3.
impress.js
12.4.9 最近はプレゼン⽤用ライブラリとかいっぱいあっていいですね。 特にimpress.jsとか表現幅が広くてすごいですね。 でもHTML書くのは⾯面倒くさいのでパワポで。 3
4.
本題 • 本⽇日は、プレゼン⽤用ライブラリについてではなく、
「HTML/CSS/JSの役割分担」についてお話ししたいと思い 12.4.9 ます。 • 役割分担を明確にして、JSのコード内にHTML/CSSは極⼒力力 含めないようにし、JSを変更せずにメンテナンスできた らみんなハッピーですね。 • ソーシャルゲームはWebクリエイターの⼒力力でより進化で きるはずです。 • 最近の事例を、コード中⼼心になりますが、お話しさせて 頂きます。 4
5.
ところで… • A.ページ内にモーダルウィンドウを表⽰示する場合ど
うしますか? 12.4.9 var modal = document.getElementById(ʻ‘modalʼ’); modal.style.display = 'block';// 表⽰示 modal.style.display = 'none';// ⾮非表⽰示 5
6.
ところで…. • B.モーダルウィンドウ内の表⽰示が変わる場合どうし
ますか?(e.g. 選択→確認→完了) 12.4.9 var select = document.getElementById('select'); var confirm = document.getElementById('confirm'); var complete = document.getElementById('complete'); // 確認 select.style.display = 'none'; confirm.style.display = 'block'; // 完了 confirm.style.display = 'none'; complete.style.display = 'block'; 6
7.
ところで….. • C.モーダルウィンドウ内に複数ボタンがあって、そ
れぞれ違う役割があったらどうしますか? 12.4.9 var button1 = document.getElementById('button1'); var button2 = document.getElementById('button2'); var button3 = document.getElementById('button3'); button1.addEventListener('click', func1, false); button2.addEventListener('click', func2, false); button3.addEventListener('click', func3, false); 7
8.
ところで…… • 1、2個ならさほど問題ではないですが、いっぱい
ボタンがあったら・・・、いっぱいモーダルウィン 12.4.9 ドウがあったら・・・どうでしょう? • こういう書き⽅方では汎⽤用性や拡張性に⽋欠けますよ ね? HTMLで出来る事はHTMLに、 CSSで出来る事はCSSに 任せてしまいましょう! 8
9.
具体的には… • AやBのような表⽰示・⾮非表⽰示を切り替えるようなもの
は、それぞれをシーンととらえて、シーンを定義し 12.4.9 たスタイル(CSSクラス)を⽤用意し、要素のクラス名 を制御したらどうでしょう? こんなHTMLがあったとして <div id="container"> <div class= modal >モーダルウィンドウ</div> </div> 9
10.
具体的には…. [A]
12.4.9 HTML: <div id="container" class="scene-modal"> <div class= modal >モーダルウィンドウ</div> </div> CSS: .modal {display: none;} .scene-modal .modal {display: block;} JS: var container = document.getElementById('container'); container.className = 'scene-modal';// 表⽰示 container.className = '';// ⾮非表⽰示 // ちなみにAndroidではclassListが使えないので、classNameを書き換える 10
11.
具体的には….. [B]
[B] HTML: CSS: 12.4.9 <div id="modal class= scene-select > .select, <div class= select >選択</div> .confirm, <div class= confirm >確認</div> .complete { <div class= complete >完了</div> display: none; </div> } ↓ <div id="modal" class="scene-confirm"> .scene-select .select, <div class= select >選択</div> .scene-confirm .confirm, <div class= confirm >確認</div> .scene-complete .complete { <div class= complete >完了</div> display: block; </div> } 11
12.
具体的には…… • CSSに任せると表⽰示⽅方法の変更も簡単ですね。
12.4.9 • 例えばアニメーションさせたければ… [A]CSS: .modal { position: absolute; left: -320px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.2s; } .scene-modal .modal { -webkit-transform: translate3d(320px, 0, 0); } 12
13.
具体的には…….. • Cはボタンにメソッド名と対応した役割を与えてみます。
12.4.9 • 独⾃自データ属性「data-‐」を使うとスマートですね。 こんなHTMLがあったとして <button data-role="confirm">確認</button> <button data-role="submit">購⼊入</button> <button data-role="cancel">キャンセル</button> <button data-role="close">閉じる</button> <button data-role="back">戻る</button> 13
14.
具体的には......... var elements
= document.querySelectorAll('[data-role]'); 12.4.9 for (var i = 0, len = elements.length; i < len; i++) { var role = elements[i].getAttribute('data-role'); // ちなみにAndroidではdatasetが使えないので、getAttributeを使う elements[i].addEventListener('click', methods[role], false); } var methods = { confirm: function() {}, submit: function() {}, cancel: function() {}, close: function() {}, back: function() {} }; 実際に実装する場合は、jQueryやriddle.js等のdelegateを使うとスマート。 delegateはイベント移譲メソッドです。後ほど出てきます。 14
15.
さらに… • 複数のボタンとそれぞれのボタンに対応した複数の
モーダルウィンドウがあったらどうしますか? 12.4.9 var button1 = document.getElementById('button1'); var button2 = document.getElementById('button2'); var modal1 = document.getElementById('modal1'); var modal2 = document.getElementById('modal2'); button1.addEventListener('click', function() { modal1.style.display = 'block'; }, false); button2.addEventListener('click', function() { modal2.style.display = 'block'; }, false); 15
16.
さらに…. • 100個のボタンとモーダルウィンドウがあったらどうしますか?
12.4.9 • 100回コピペしますか?100回ループしますか? ここまでちゃんと聞いて下さった⽅方ならもうお分かりですね? CSSクラス変更とdelegate使えばいいんじゃね? 16
17.
さらに….. HTML: <div
id="container"> 12.4.9 <button data-target-scene="scene-modal1">ボタン1</button> <button data-target-scene="scene-modal2">ボタン2</button> <div class= modal1 >モーダルウィンドウ1</div> <div class= modal2 >モーダルウィンドウ2</div> </div> CSS: .modal1, .modal2 {display: none;} .scene-modal1 .modal1, .scene-modal2 .modal2 {display: block;} 17
18.
さらに…... JS: riddle.jsで書くと
12.4.9 // IDがcontainerの要素を取得(配列) var container = r.id('container'); // data-target-scene属性を持った要素のclickイベントをdocument.bodyに移譲 r(document.body).delegate(ʻ‘[data-target-scene]', 'click', function() { container.addClass(r(this).attr(ʻ‘data-target-scene')); }); なんということでしょう。たったこれだけのコードで実装出来るなんて。 これで何個ボタンがあっても、後からボタンが追加されても⼤大丈夫。 ジェッタシーなコードですね。 18
19.
まとめ • HTMLにデータを持たせ、CSSで表⽰示の仕⽅方を制御し
て、JSはシンプルに。 12.4.9 • HTML/CSS/JSの役割分担をきちんとすることで、⾒見見通 しも良くなり、マークアップとスクリプトの分離も 出来、HTML/CSSとJSのコーディングが別々の⼈人が担 当しても混乱が少なくなる。 • ちょっとした変更でJSをいじる必要もなくなります。 19
20.
まとめ2 • スマートフォンはフィーチャーフォンとPCの丁度中
間のような位置にありながら、最新技術にも対応し 12.4.9 ていたりと、様々なWebのノウハウが詰まっている。 • クリエイター次第でソーシャルゲームはいかように も変貌を遂げることができる。 • 最新技術を追いかけつつも技術だけにとらわれず、 より良いUI/UXを構築できるといいですね。 20
21.
ご静聴ありがとうございました
12.4.9 本⽇日の内容にご興味を持たれた⽅方はぜひDeNAへ。 年齢・性別・国籍問わず、広く⾨門⼾戸を開いております。 ご質問はまたの機会に 21
Download now