Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

0406web creators night_DeNA

1,672 views

Published on

April 6th, 2012. Web Creators night presentation.

Published in: Technology
  • Be the first to comment

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  

×