April 6th, 2012. Web Creators night presentation.

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. ところで……
• １、２個ならさほど問題ではないですが、いっぱい
ボタンがあったら・・・、いっぱいモーダルウィン 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. さらに….
• １００個のボタンとモーダルウィンドウがあったらどうしますか？
12.4.9
• １００回コピペしますか？１００回ループしますか？
ここまでちゃんと聞いて下さった⽅方ならもうお分かりですね？
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. まとめ２
• スマートフォンはフィーチャーフォンとPCの丁度中
間のような位置にありながら、最新技術にも対応し 12.4.9
ていたりと、様々なWebのノウハウが詰まっている。
• クリエイター次第でソーシャルゲームはいかように
も変貌を遂げることができる。
• 最新技術を追いかけつつも技術だけにとらわれず、
より良いUI/UXを構築できるといいですね。
20

21. ご静聴ありがとうございました
12.4.9
本⽇日の内容にご興味を持たれた⽅方はぜひDeNAへ。
年齢・性別・国籍問わず、広く⾨門⼾戸を開いております。
ご質問はまたの機会に
21