0406web creators night_DeNA

1,571 views

Published on

April 6th, 2012. Web Creators night presentation.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,571
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

0406web creators night_DeNA

  1. 1. HTML/CSS/JSの役割分担   Creative group 1  
  2. 2. ⾃自⼰己紹介   草間  正則  (くさま  まさのり)   12.4.9 株式会社ディー・エヌ・エー   ソーシャルゲーム事業本部   ソーシャルゲーム統括部   SPWebUXグループ   フロントエンドエンジニア  ソーシャルゲームサイトのフロントの設計・コーディングを担当してます。   2  
  3. 3. impress.js 12.4.9 最近はプレゼン⽤用ライブラリとかいっぱいあっていいですね。  特にimpress.jsとか表現幅が広くてすごいですね。   でもHTML書くのは⾯面倒くさいのでパワポで。   3  
  4. 4. 本題  • 本⽇日は、プレゼン⽤用ライブラリについてではなく、 「HTML/CSS/JSの役割分担」についてお話ししたいと思い 12.4.9 ます。  • 役割分担を明確にして、JSのコード内にHTML/CSSは極⼒力力 含めないようにし、JSを変更せずにメンテナンスできた らみんなハッピーですね。  • ソーシャルゲームはWebクリエイターの⼒力力でより進化で きるはずです。  • 最近の事例を、コード中⼼心になりますが、お話しさせて 頂きます。   4  
  5. 5. ところで…  • A.ページ内にモーダルウィンドウを表⽰示する場合ど うしますか?   12.4.9 var  modal  =  document.getElementById(ʻ‘modalʼ’);  modal.style.display  =  block;//  表⽰示  modal.style.display  =  none;//  ⾮非表⽰示   5  
  6. 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. 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. 8. ところで……  • 1、2個ならさほど問題ではないですが、いっぱい ボタンがあったら・・・、いっぱいモーダルウィン 12.4.9 ドウがあったら・・・どうでしょう?  • こういう書き⽅方では汎⽤用性や拡張性に⽋欠けますよ ね?   HTMLで出来る事はHTMLに、   CSSで出来る事はCSSに   任せてしまいましょう!   8  
  9. 9. 具体的には…  • AやBのような表⽰示・⾮非表⽰示を切り替えるようなもの は、それぞれをシーンととらえて、シーンを定義し 12.4.9 たスタイル(CSSクラス)を⽤用意し、要素のクラス名 を制御したらどうでしょう?   こんなHTMLがあったとして   <div  id="container">     <div  class= modal >モーダルウィンドウ</div>   </div>   9  
  10. 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. 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. 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. 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. 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. 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. 16. さらに….  • 100個のボタンとモーダルウィンドウがあったらどうしますか?   12.4.9 • 100回コピペしますか?100回ループしますか?  ここまでちゃんと聞いて下さった⽅方ならもうお分かりですね?  CSSクラス変更とdelegate使えばいいんじゃね?   16  
  17. 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. 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. 19. まとめ  • HTMLにデータを持たせ、CSSで表⽰示の仕⽅方を制御し て、JSはシンプルに。   12.4.9 • HTML/CSS/JSの役割分担をきちんとすることで、⾒見見通 しも良くなり、マークアップとスクリプトの分離も 出来、HTML/CSSとJSのコーディングが別々の⼈人が担 当しても混乱が少なくなる。  • ちょっとした変更でJSをいじる必要もなくなります。   19  
  20. 20. まとめ2  • スマートフォンはフィーチャーフォンとPCの丁度中 間のような位置にありながら、最新技術にも対応し 12.4.9 ていたりと、様々なWebのノウハウが詰まっている。  • クリエイター次第でソーシャルゲームはいかように も変貌を遂げることができる。  • 最新技術を追いかけつつも技術だけにとらわれず、 より良いUI/UXを構築できるといいですね。   20  
  21. 21. ご静聴ありがとうございました   12.4.9 本⽇日の内容にご興味を持たれた⽅方はぜひDeNAへ。  年齢・性別・国籍問わず、広く⾨門⼾戸を開いております。   ご質問はまたの機会に   21  

×