Soumettre la recherche
Mettre en ligne
0406web creators night_DeNA
•
2 j'aime
•
1,127 vues
D
DeNA_open_events
Suivre
April 6th, 2012. Web Creators night presentation.
Lire moins
Lire la suite
Technologie
Affichage du diaporama
Signaler
Partager
Affichage du diaporama
Signaler
Partager
1 sur 21
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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
Recommandé
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
Contenu connexe
Tendances
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
Tendances
(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
En vedette
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
En vedette
(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
Similaire à 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
Similaire à 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
Dernier
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Dernier
(9)
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
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
Télécharger maintenant