2012年9月の名古屋HTML5リレーションズにて話しました。

1. Copyright (C) 2012 M.Ichijo
All Rights Reserved.
2012.09.15 M.Ichijo@html5j.org

2. アジェンダ
1. このセッションの内容
2. 長くサイトに携わるとこんなことが
3. “Webサイト”は借地だらけの住宅地
4. “Webサイト”は変わり続ける居住空間
5. ２つに軸でコーディングをチェック
6. 例えばこんな些細なことが注意点
Copyright (C) 2012 M.Ichijo All Rights Reserved.
0

3. 自己紹介
• 一條 美和子
（@ichijo3/twitter）
（usa132006@gmail.com）
• 産経デジタル 情報システム
部
• IAの肩書きを頂きつつもフロ
ントエンジニア兼Webディレク
ター
• webのテクニック系、電子出版、
ソーシャルメディア、
SEO…etc.Copyright (C) 2012 M.Ichijo All Rights Reserved.
0
HTML5
conference
2012

4. 関係しているWebサイト群
Copyright (C) 2012 M.Ichijo All Rights Reserved.
0
それぞれ特色を持つ５のメインサイトが展開中

5. “テクニック”ではなく“スキル”について考える
このセッションの内容
Copyright (C) 2012 M.Ichijo All Rights Reserved.
1

6. このセッションの内容
Copyright (C) 2012 M.Ichijo All Rights Reserved.
1
“HTML5のテクニック”話はほぼありませぬ。
“Webサイト”に携わる制作者の“スキル”に係わるこ
と。
「テクニック」
技術、手法、やり方
「スキル」
技術、手法、やり方を
状況に応じて扱う力

7. 外部ソースが起こした災害がやってくる
長くサイトに携わるとこんなことが
Copyright (C) 2012 M.Ichijo All Rights Reserved.
2

8. 長くサイトに携わるとこんなことが
発注したあるシステムを導入したらテスト
で
Copyright (C) 2012 M.Ichijo All Rights Reserved.
外部サービスのスクリプトが突然
2
記事ページの文字
が全体に大きく！
いつまでたっても処理が終わら
ず
記事ページが表示されない

9. 長くサイトに携わるとこんなことが
Copyright (C) 2012 M.Ichijo All Rights Reserved.
2
!|iorz

10. 長くサイトに携わるとこんなことが
Copyright (C) 2012 M.Ichijo All Rights Reserved.
2
JS/CSS
XXXXX
XXXXX
自社もの 外部もの
？
同じ空間で混ざって稼働するしか
ない

11. 長くサイトに携わるとこんなことが
Copyright (C) 2012 M.Ichijo All Rights Reserved.
2

12. 長くサイトに携わるとこんなことが
Copyright (C) 2012 M.Ichijo All Rights Reserved.
2
ま
ぜ
た
ら

13. 居住者は自分の良いように作るもの
“Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3

14. “Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
自社ものだけで構成していた時は一軒
家
他を気にせず自分ルールで存在
サイ
ト
コンテ
ンツ

15. “Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
今や敷地は切り売り、たくさんの居住者が住宅を
持つ
それぞれの敷地内でフリーダム
サイ
ト
コンテン
ツ群
自社
制作
分
暗い（涙

16. “Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
全員でフリーダム万歳！をしているとリアル生活で
も
揉める時があるように
サイト内でもケンカ＝競合が起こって
トラブル発生に至ります。
では
土地管理者＝サイト管理側
がルールを出せばOK？

17. “Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
ルールはルールでしかないので、
お互いに守る意思とお互いを考える姿勢がないと
結局、競合は起こります。

18. “Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
自分のところ以外も
見る目が重要

19. 改めて、「作って終わり」ではありません
“Webサイト”は変わり続ける居住空
間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4

20. “Webサイト”は変わり続ける居住空間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
社会は時に変化します。
なので、その中で生活している人が求めるモノも変化
します。
ユーザー側も運営側も。

21. “Webサイト”は変わり続ける居住空間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
ソーシャル
だーイェー
イ
やっぱり写
真で華やか
に
あの広告
いれて
記事を読みたい人
をチェックしたい

22. “Webサイト”は変わり続ける空間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
B BA A DC
main main main
3か月前6か月前 現在
ちょっとずつ、変更を重ねて続けていく

23. “Webサイト”は変わり続ける居住空間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
つまり、作った瞬間の状態は永遠ではなく、
開発時点の状況が“全て”ではありません。
状況が変わっても
コンテンツは無事に提供しなくてはなりません。

24. “Webサイト”は変わり続ける居住空間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
先の状況も
見る目が重要

25. 周りを見て先を見て
２つの軸でコーディングをチェック
Copyright (C) 2012 M.Ichijo All Rights Reserved.
5

26. ２つの軸でコーディングをチェック
Copyright (C) 2012 M.Ichijo All Rights Reserved.
5
現在 未来
コンテン
サイト

27. ２つの軸でコーディングをチェック
Copyright (C) 2012 M.Ichijo All Rights Reserved.
5
現在 未来
コンテン
サイト
このコーディング
で
要求は満たせる
このコーディング
で要求の変化に
対応できる
このコーディング
で
サイト全体への
影響を出さない
このコーディング
で
コンテンツを
サイト内で
維持できる

28. ２つの軸でコーディングをチェック
Copyright (C) 2012 M.Ichijo All Rights Reserved.
5
全体が望んだカタチ？

29. ２つの軸でコーディングをチェック
Copyright (C) 2012 M.Ichijo All Rights Reserved.
5
引いて見たらaccident！

30. 住宅街でのマナーみたいな、たわいもないこと
例えばこんな些細なことが注意点
Copyright (C) 2012 M.Ichijo All Rights Reserved.
6

31. 例えばこんな些細なことが注意点
• ローカルストレージの利用
ドメイン単位だとすると
・・・他のコンテンツと競合しやすいkey名を使っていない？
→ 対策：一般名詞を避ける、独自と思われるprefixを付ける、必
要咲い
• CSS3アニメーションの利用
ページの中で一部に動きがあるとすると
・・・周りのコンテンツを見る時にうるさく感じない？
→ 対策：他のコンテンツとのマージンを十分に取る
Copyright (C) 2012 M.Ichijo All Rights Reserved.
6

32. 例えばこんな些細なことが注意点
• 外部のJavascriptの利用
もし外部へのリクエストが失敗すると
・・・他のコンテンツの表示を邪魔するような呼び出し？
→ 対策：自サーバー内へ呼び出し用のjsファイルを設定。異常時
は空ファイルにして外部のJavscriptのロードを排除。
• コンテンツだけのCSS適用
ページの中で一部に適用するとしたら
・・・他のコンテンツへ反映しない？
→ 対策：コンテンツ内の一番上の親に固定のIDを設定して、ID指
定で必ずプロパティ設定。全て外部ファイルに入れる。
Copyright (C) 2012 M.Ichijo All Rights Reserved.
6

33. 例えばこんな些細なことが注意点
Copyright (C) 2012 M.Ichijo All Rights Reserved.
６
技術的にできる・できな
い
以外も判断ができる
ことが重要

34. 例えばこんな些細なことが注意点
Copyright (C) 2012 M.Ichijo All Rights Reserved.
６
最終的に
サイト全体が
うまくいくように
技術を扱う力を養うこと

35. おわり！
Copyright (C) 2012 M.Ichijo All Rights Reserved.
0
ご清聴ありがとうございました。