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.
Copyright (C) 2012 M.Ichijo
All Rights Reserved.
2012.09.15 M.Ichijo@html5j.org
アジェンダ
1. このセッションの内容
2. 長くサイトに携わるとこんなことが
3. “Webサイト”は借地だらけの住宅地
4. “Webサイト”は変わり続ける居住空間
5. 2つに軸でコーディングをチェック
6. 例えばこんな些細なことが注意...
自己紹介
• 一條 美和子
(@ichijo3/twitter)
(usa132006@gmail.com)
• 産経デジタル 情報システム
部
• IAの肩書きを頂きつつもフロ
ントエンジニア兼Webディレク
ター
• webのテクニック系、...
関係しているWebサイト群
Copyright (C) 2012 M.Ichijo All Rights Reserved.
0
それぞれ特色を持つ5のメインサイトが展開中
“テクニック”ではなく“スキル”について考える
このセッションの内容
Copyright (C) 2012 M.Ichijo All Rights Reserved.
1
このセッションの内容
Copyright (C) 2012 M.Ichijo All Rights Reserved.
1
“HTML5のテクニック”話はほぼありませぬ。
“Webサイト”に携わる制作者の“スキル”に係わるこ
と。
「テクニック...
外部ソースが起こした災害がやってくる
長くサイトに携わるとこんなことが
Copyright (C) 2012 M.Ichijo All Rights Reserved.
2
長くサイトに携わるとこんなことが
発注したあるシステムを導入したらテスト
で
Copyright (C) 2012 M.Ichijo All Rights Reserved.
外部サービスのスクリプトが突然
2
記事ページの文字
が全体に大きく...
長くサイトに携わるとこんなことが
Copyright (C) 2012 M.Ichijo All Rights Reserved.
2
!|iorz
長くサイトに携わるとこんなことが
Copyright (C) 2012 M.Ichijo All Rights Reserved.
2
JS/CSS
XXXXX
XXXXX
自社もの 外部もの
?
同じ空間で混ざって稼働するしか
ない
長くサイトに携わるとこんなことが
Copyright (C) 2012 M.Ichijo All Rights Reserved.
2
長くサイトに携わるとこんなことが
Copyright (C) 2012 M.Ichijo All Rights Reserved.
2
ま
ぜ
た
ら
居住者は自分の良いように作るもの
“Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
“Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
自社ものだけで構成していた時は一軒
家
他を気にせず自分ルールで存在
サイ
ト
コンテ
ンツ
“Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
今や敷地は切り売り、たくさんの居住者が住宅を
持つ
それぞれの敷地内でフリーダム
サイ
ト
コンテン
ツ...
“Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
全員でフリーダム万歳!をしているとリアル生活で
も
揉める時があるように
サイト内でもケンカ=競合が起こ...
“Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
ルールはルールでしかないので、
お互いに守る意思とお互いを考える姿勢がないと
結局、競合は起こります。
“Webサイト”は借地だらけの住宅地
Copyright (C) 2012 M.Ichijo All Rights Reserved.
3
自分のところ以外も
見る目が重要
改めて、「作って終わり」ではありません
“Webサイト”は変わり続ける居住空
間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
“Webサイト”は変わり続ける居住空間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
社会は時に変化します。
なので、その中で生活している人が求めるモノも変化
します。
ユーザー側も運営側...
“Webサイト”は変わり続ける居住空間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
ソーシャル
だーイェー
イ
やっぱり写
真で華やか
に
あの広告
いれて
記事を読みたい人
をチェック...
“Webサイト”は変わり続ける空間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
B BA A DC
main main main
3か月前6か月前 現在
ちょっとずつ、変更を重ねて続けて...
“Webサイト”は変わり続ける居住空間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
つまり、作った瞬間の状態は永遠ではなく、
開発時点の状況が“全て”ではありません。
状況が変わっても
...
“Webサイト”は変わり続ける居住空間
Copyright (C) 2012 M.Ichijo All Rights Reserved.
4
先の状況も
見る目が重要
周りを見て先を見て
2つの軸でコーディングをチェック
Copyright (C) 2012 M.Ichijo All Rights Reserved.
5
2つの軸でコーディングをチェック
Copyright (C) 2012 M.Ichijo All Rights Reserved.
5
現在 未来
コンテン
サイト
2つの軸でコーディングをチェック
Copyright (C) 2012 M.Ichijo All Rights Reserved.
5
現在 未来
コンテン
サイト
このコーディング
で
要求は満たせる
このコーディング
で要求の変化に
対応で...
2つの軸でコーディングをチェック
Copyright (C) 2012 M.Ichijo All Rights Reserved.
5
全体が望んだカタチ?
2つの軸でコーディングをチェック
Copyright (C) 2012 M.Ichijo All Rights Reserved.
5
引いて見たらaccident!
住宅街でのマナーみたいな、たわいもないこと
例えばこんな些細なことが注意点
Copyright (C) 2012 M.Ichijo All Rights Reserved.
6
例えばこんな些細なことが注意点
• ローカルストレージの利用
ドメイン単位だとすると
・・・他のコンテンツと競合しやすいkey名を使っていない?
→ 対策:一般名詞を避ける、独自と思われるprefixを付ける、必
要咲い
• CSS3アニメーシ...
例えばこんな些細なことが注意点
• 外部のJavascriptの利用
もし外部へのリクエストが失敗すると
・・・他のコンテンツの表示を邪魔するような呼び出し?
→ 対策:自サーバー内へ呼び出し用のjsファイルを設定。異常時
は空ファイルにして外...
例えばこんな些細なことが注意点
Copyright (C) 2012 M.Ichijo All Rights Reserved.
6
技術的にできる・できな
い
以外も判断ができる
ことが重要
例えばこんな些細なことが注意点
Copyright (C) 2012 M.Ichijo All Rights Reserved.
6
最終的に
サイト全体が
うまくいくように
技術を扱う力を養うこと
おわり!
Copyright (C) 2012 M.Ichijo All Rights Reserved.
0
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

”まぜたら危険”なJS/CSS!一歩引いた視点のコーディングの考え方

371 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

”まぜたら危険”なJS/CSS!一歩引いた視点のコーディングの考え方

  1. 1. Copyright (C) 2012 M.Ichijo All Rights Reserved. 2012.09.15 M.Ichijo@html5j.org
  2. 2. アジェンダ 1. このセッションの内容 2. 長くサイトに携わるとこんなことが 3. “Webサイト”は借地だらけの住宅地 4. “Webサイト”は変わり続ける居住空間 5. 2つに軸でコーディングをチェック 6. 例えばこんな些細なことが注意点 Copyright (C) 2012 M.Ichijo All Rights Reserved. 0
  3. 3. 自己紹介 • 一條 美和子 (@ichijo3/twitter) (usa132006@gmail.com) • 産経デジタル 情報システム 部 • IAの肩書きを頂きつつもフロ ントエンジニア兼Webディレク ター • webのテクニック系、電子出版、 ソーシャルメディア、 SEO…etc.Copyright (C) 2012 M.Ichijo All Rights Reserved. 0 HTML5 conference 2012
  4. 4. 関係しているWebサイト群 Copyright (C) 2012 M.Ichijo All Rights Reserved. 0 それぞれ特色を持つ5のメインサイトが展開中
  5. 5. “テクニック”ではなく“スキル”について考える このセッションの内容 Copyright (C) 2012 M.Ichijo All Rights Reserved. 1
  6. 6. このセッションの内容 Copyright (C) 2012 M.Ichijo All Rights Reserved. 1 “HTML5のテクニック”話はほぼありませぬ。 “Webサイト”に携わる制作者の“スキル”に係わるこ と。 「テクニック」 技術、手法、やり方 「スキル」 技術、手法、やり方を 状況に応じて扱う力
  7. 7. 外部ソースが起こした災害がやってくる 長くサイトに携わるとこんなことが Copyright (C) 2012 M.Ichijo All Rights Reserved. 2
  8. 8. 長くサイトに携わるとこんなことが 発注したあるシステムを導入したらテスト で Copyright (C) 2012 M.Ichijo All Rights Reserved. 外部サービスのスクリプトが突然 2 記事ページの文字 が全体に大きく! いつまでたっても処理が終わら ず 記事ページが表示されない
  9. 9. 長くサイトに携わるとこんなことが Copyright (C) 2012 M.Ichijo All Rights Reserved. 2 !|iorz
  10. 10. 長くサイトに携わるとこんなことが Copyright (C) 2012 M.Ichijo All Rights Reserved. 2 JS/CSS XXXXX XXXXX 自社もの 外部もの ? 同じ空間で混ざって稼働するしか ない
  11. 11. 長くサイトに携わるとこんなことが Copyright (C) 2012 M.Ichijo All Rights Reserved. 2
  12. 12. 長くサイトに携わるとこんなことが Copyright (C) 2012 M.Ichijo All Rights Reserved. 2 ま ぜ た ら
  13. 13. 居住者は自分の良いように作るもの “Webサイト”は借地だらけの住宅地 Copyright (C) 2012 M.Ichijo All Rights Reserved. 3
  14. 14. “Webサイト”は借地だらけの住宅地 Copyright (C) 2012 M.Ichijo All Rights Reserved. 3 自社ものだけで構成していた時は一軒 家 他を気にせず自分ルールで存在 サイ ト コンテ ンツ
  15. 15. “Webサイト”は借地だらけの住宅地 Copyright (C) 2012 M.Ichijo All Rights Reserved. 3 今や敷地は切り売り、たくさんの居住者が住宅を 持つ それぞれの敷地内でフリーダム サイ ト コンテン ツ群 自社 制作 分 暗い(涙
  16. 16. “Webサイト”は借地だらけの住宅地 Copyright (C) 2012 M.Ichijo All Rights Reserved. 3 全員でフリーダム万歳!をしているとリアル生活で も 揉める時があるように サイト内でもケンカ=競合が起こって トラブル発生に至ります。 では 土地管理者=サイト管理側 がルールを出せばOK?
  17. 17. “Webサイト”は借地だらけの住宅地 Copyright (C) 2012 M.Ichijo All Rights Reserved. 3 ルールはルールでしかないので、 お互いに守る意思とお互いを考える姿勢がないと 結局、競合は起こります。
  18. 18. “Webサイト”は借地だらけの住宅地 Copyright (C) 2012 M.Ichijo All Rights Reserved. 3 自分のところ以外も 見る目が重要
  19. 19. 改めて、「作って終わり」ではありません “Webサイト”は変わり続ける居住空 間 Copyright (C) 2012 M.Ichijo All Rights Reserved. 4
  20. 20. “Webサイト”は変わり続ける居住空間 Copyright (C) 2012 M.Ichijo All Rights Reserved. 4 社会は時に変化します。 なので、その中で生活している人が求めるモノも変化 します。 ユーザー側も運営側も。
  21. 21. “Webサイト”は変わり続ける居住空間 Copyright (C) 2012 M.Ichijo All Rights Reserved. 4 ソーシャル だーイェー イ やっぱり写 真で華やか に あの広告 いれて 記事を読みたい人 をチェックしたい
  22. 22. “Webサイト”は変わり続ける空間 Copyright (C) 2012 M.Ichijo All Rights Reserved. 4 B BA A DC main main main 3か月前6か月前 現在 ちょっとずつ、変更を重ねて続けていく
  23. 23. “Webサイト”は変わり続ける居住空間 Copyright (C) 2012 M.Ichijo All Rights Reserved. 4 つまり、作った瞬間の状態は永遠ではなく、 開発時点の状況が“全て”ではありません。 状況が変わっても コンテンツは無事に提供しなくてはなりません。
  24. 24. “Webサイト”は変わり続ける居住空間 Copyright (C) 2012 M.Ichijo All Rights Reserved. 4 先の状況も 見る目が重要
  25. 25. 周りを見て先を見て 2つの軸でコーディングをチェック Copyright (C) 2012 M.Ichijo All Rights Reserved. 5
  26. 26. 2つの軸でコーディングをチェック Copyright (C) 2012 M.Ichijo All Rights Reserved. 5 現在 未来 コンテン サイト
  27. 27. 2つの軸でコーディングをチェック Copyright (C) 2012 M.Ichijo All Rights Reserved. 5 現在 未来 コンテン サイト このコーディング で 要求は満たせる このコーディング で要求の変化に 対応できる このコーディング で サイト全体への 影響を出さない このコーディング で コンテンツを サイト内で 維持できる
  28. 28. 2つの軸でコーディングをチェック Copyright (C) 2012 M.Ichijo All Rights Reserved. 5 全体が望んだカタチ?
  29. 29. 2つの軸でコーディングをチェック Copyright (C) 2012 M.Ichijo All Rights Reserved. 5 引いて見たらaccident!
  30. 30. 住宅街でのマナーみたいな、たわいもないこと 例えばこんな些細なことが注意点 Copyright (C) 2012 M.Ichijo All Rights Reserved. 6
  31. 31. 例えばこんな些細なことが注意点 • ローカルストレージの利用 ドメイン単位だとすると ・・・他のコンテンツと競合しやすいkey名を使っていない? → 対策:一般名詞を避ける、独自と思われるprefixを付ける、必 要咲い • CSS3アニメーションの利用 ページの中で一部に動きがあるとすると ・・・周りのコンテンツを見る時にうるさく感じない? → 対策:他のコンテンツとのマージンを十分に取る Copyright (C) 2012 M.Ichijo All Rights Reserved. 6
  32. 32. 例えばこんな些細なことが注意点 • 外部のJavascriptの利用 もし外部へのリクエストが失敗すると ・・・他のコンテンツの表示を邪魔するような呼び出し? → 対策:自サーバー内へ呼び出し用のjsファイルを設定。異常時 は空ファイルにして外部のJavscriptのロードを排除。 • コンテンツだけのCSS適用 ページの中で一部に適用するとしたら ・・・他のコンテンツへ反映しない? → 対策:コンテンツ内の一番上の親に固定のIDを設定して、ID指 定で必ずプロパティ設定。全て外部ファイルに入れる。 Copyright (C) 2012 M.Ichijo All Rights Reserved. 6
  33. 33. 例えばこんな些細なことが注意点 Copyright (C) 2012 M.Ichijo All Rights Reserved. 6 技術的にできる・できな い 以外も判断ができる ことが重要
  34. 34. 例えばこんな些細なことが注意点 Copyright (C) 2012 M.Ichijo All Rights Reserved. 6 最終的に サイト全体が うまくいくように 技術を扱う力を養うこと
  35. 35. おわり! Copyright (C) 2012 M.Ichijo All Rights Reserved. 0 ご清聴ありがとうございました。

×