More Related Content
Similar to Webアプリのマークアップ、どうすればいいの? (6)
More from girigiribauer (8)
Webアプリのマークアップ、どうすればいいの?
- 3. 今日しない話
• ネイティブアプリから見たWebアプリ
の話
13年3月23日土曜日
- 4. 今日しない話
• ネイティブアプリから見たWebアプリ
の話
• Webアプリの厳密な定義の話
13年3月23日土曜日
- 5. 今日しない話
• ネイティブアプリから見たWebアプリ
の話
• Webアプリの厳密な定義の話
• 聞くだけで簡単に作れるようになる魔
法のメソッドの話
13年3月23日土曜日
- 7. 今日はWebサイト中心に
作って来た人向けの話
• 最近Webアプリってよく聞くけど作っ
たことない
13年3月23日土曜日
- 8. 今日はWebサイト中心に
作って来た人向けの話
• 最近Webアプリってよく聞くけど作っ
たことない
• JavaScriptとかまだまだ勉強中だし
13年3月23日土曜日
- 9. 今日はWebサイト中心に
作って来た人向けの話
• 最近Webアプリってよく聞くけど作っ
たことない
• JavaScriptとかまだまだ勉強中だし
• どう考えればいいの?
Webサイトと何が違うの?
13年3月23日土曜日
- 13. 各工程で
常に機能単位で考え、
イメージの共有をし、
13年3月23日土曜日
- 16. と、思ったので、
考えてみました
・・・という話です
13年3月23日土曜日
- 18. 目次
1. WebサイトとWebアプリの違うところ
を、色んな切り口で見てみる
2. 協業前提の考え方
3. 押さえたいポイント
4. まとめ
13年3月23日土曜日
- 19. 目次
1. WebサイトとWebアプリの違うところ
を、色んな切り口で見てみる
2. 協業前提の考え方
3. 押さえたいポイント
4. まとめ
13年3月23日土曜日
- 22. 最終成果物
(production)
• 例:Webサイトの中に
Google Maps API を埋め込む例
• http://www.e-quakes.pref.shizuoka.jp/
shiraberu/map/maps.html
• Googleのユーザー事例に載っていたの
で引用
• http://www.google.co.jp/enterprise/
case_studies/shizuoka.html
13年3月23日土曜日
- 23. 最終成果物
(production)
13年3月23日土曜日
- 24. 最終成果物
(production)
13年3月23日土曜日
- 25. 最終成果物
(production)
• どちらもHTML, CSS, JavaScript中心
に作られている
13年3月23日土曜日
- 26. 最終成果物
(production)
• どちらもHTML, CSS, JavaScript中心
に作られている
• WebサイトもWebアプリも、構成要素
はほぼ同じ
13年3月23日土曜日
- 28. 役割
(role)
13年3月23日土曜日
- 29. 役割
(role)
• Webサイト
13年3月23日土曜日
- 30. 役割
(role)
• Webサイト
• 情報提供、開示、リアルへの導線、
窓口など
13年3月23日土曜日
- 31. 役割
(role)
• Webサイト
• 情報提供、開示、リアルへの導線、
窓口など
• 存在しているのが今やもう当たり前
13年3月23日土曜日
- 32. 役割
(role)
• Webサイト
• 情報提供、開示、リアルへの導線、
窓口など
•存在しているのが今やもう当たり前
• 情報の網羅性
13年3月23日土曜日
- 33. 役割
(role)
13年3月23日土曜日
- 34. 役割
(role)
• Webアプリ
13年3月23日土曜日
- 35. 役割
(role)
• Webアプリ
• 目的に特化
13年3月23日土曜日
- 36. 役割
(role)
• Webアプリ
• 目的に特化
• (疑似)体験させるコンテンツなど
13年3月23日土曜日
- 37. 役割
(role)
• Webアプリ
• 目的に特化
• (疑似)体験させるコンテンツなど
• インタラクティブ
13年3月23日土曜日
- 38. 役割
(role)
• Webアプリ
• 目的に特化
• (疑似)体験させるコンテンツなど
• インタラクティブ
• やりたいことを実現するために、
リアクションを返してくれる
13年3月23日土曜日
- 39. 役割
(role)
13年3月23日土曜日
- 40. 役割
(role)
• 求められているものの違い
(どちらも重要)
13年3月23日土曜日
- 41. 役割
(role)
• 求められているものの違い
(どちらも重要)
• 「これからはWebサイトよりも
Webアプリだー」という話ではない
13年3月23日土曜日
- 42. 役割
(role)
• 求められているものの違い
(どちらも重要)
• 「これからはWebサイトよりも
Webアプリだー」という話ではない
• Webアプリの方は、リアクションを返
す分だけ、画面内の変化が激しい
(そうでないものも、もちろんある)
13年3月23日土曜日
- 44. 技術視点
(technology)
13年3月23日土曜日
- 45. 技術視点
(technology)
• Webサイトが立ち並び始めたころは
Webで出来ることは限られていた
13年3月23日土曜日
- 46. 技術視点
(technology)
• Webサイトが立ち並び始めたころは
Webで出来ることは限られていた
• ブラウザの進化によって
出来ることが格段に増えた
13年3月23日土曜日
- 47. 技術視点
(technology)
• Webサイトが立ち並び始めたころは
Webで出来ることは限られていた
• ブラウザの進化によって
出来ることが格段に増えた
• (割と良くある話)
13年3月23日土曜日
- 48. 色んな切り口
最終成果物
• 今までと同じ HTML, CSS, JavaScript
役割
• 目的に特化
→リアクション多くなる、画面内の変化
技術視点
• 現実的にWebアプリ作れるように
なりつつある
13年3月23日土曜日
- 50. いやいや、
できるところから
少しずつやりましょうよ...
13年3月23日土曜日
- 51. 目次
1. WebサイトとWebアプリの違うところ
を、色んな切り口で見てみる
2. 協業前提の考え方
3. 押さえたいポイント
4. まとめ
13年3月23日土曜日
- 52. 協業前提の考え方
• じゃあ、いつも通り設計、
• デザイン、
• マークアップ...
13年3月23日土曜日
- 53. 協業前提の考え方
• じゃあ、いつも通り設計、
• デザイン、
• マークアップ...
いつも通りやってたら
はまっちゃうよ!
13年3月23日土曜日
- 55. 協業前提の考え方
• Webサイトは、制作フローがある程度
決まってたので問題なかった
13年3月23日土曜日
- 56. 協業前提の考え方
• Webサイトは、制作フローがある程度
決まってたので問題なかった
• 出来ること増えたので、Webアプリを
『1人で全部』は難しい場面も
出てくる
13年3月23日土曜日
- 57. 協業前提の考え方
• Webサイトは、制作フローがある程度
決まってたので問題なかった
• 出来ること増えたので、Webアプリを
『1人で全部』は難しい場面も
出てくる
• 協業前提で上手くやれる方法を考える
13年3月23日土曜日
- 60. 機能単位の考え方
• まず機能単位で考えるところから
13年3月23日土曜日
- 61. 機能単位の考え方
• まず機能単位で考えるところから
• 各工程において、
要素を小さく切り分ける、小さく保つ
13年3月23日土曜日
- 62. 機能単位の考え方
• まず機能単位で考えるところから
• 各工程において、
要素を小さく切り分ける、小さく保つ
• 小さく保って依存関係を極力減らす
13年3月23日土曜日
- 64. 機能単位の考え方
• Webサイト構築のスキルがある人が、
Webアプリになると出来なくなるの?
13年3月23日土曜日
- 65. 機能単位の考え方
• Webサイト構築のスキルがある人が、
Webアプリになると出来なくなるの?
• →そんなことない!
13年3月23日土曜日
- 66. 機能単位の考え方
• Webサイト構築のスキルがある人が、
Webアプリになると出来なくなるの?
• →そんなことない!
• 最終的に出来るものはざっくり同じな
ので、出来るところたくさんある!
13年3月23日土曜日
- 67. 機能単位の考え方
• Webサイト構築のスキルがある人が、
Webアプリになると出来なくなるの?
• →そんなことない!
• 最終的に出来るものはざっくり同じな
ので、出来るところたくさんある!
• 出来ない機能は、出来る人にお願いす
る
13年3月23日土曜日
- 69. 機能単位の考え方
• じゃあ、機能単位で進めていくには
どう考えていけばいいの??
13年3月23日土曜日
- 70. 目次
1. WebサイトとWebアプリの違うところ
を、色んな切り口で見てみる
2. 協業前提の考え方
3. 押さえたいポイント
4. まとめ
13年3月23日土曜日
- 71. 目次
1. WebサイトとWebアプリの違うところ
を、色んな切り口で見てみる
2. 協業前提の考え方
3. 押さえたいポイント(本題)
4. まとめ
13年3月23日土曜日
- 74. 押さえたいポイント
1. 用件定義・設計フェーズ
2. デザインフェーズ
13年3月23日土曜日
- 75. 押さえたいポイント
1. 用件定義・設計フェーズ
2. デザインフェーズ
3. マークアップフェーズ
13年3月23日土曜日
- 76. 押さえたいポイント
1. 用件定義・設計フェーズ
2. デザインフェーズ
3. マークアップフェーズ
4. フロント側の実装フェーズ
(※今日は触れません)
13年3月23日土曜日
- 79. 用件定義・設計フェーズ
• ページ単位≠機能単位
• 機能単位で考えるくせをつける
(実際に手を動かさない役割の人でも)
13年3月23日土曜日
- 80. 用件定義・設計フェーズ
• ページ単位≠機能単位
• 機能単位で考えるくせをつける
(実際に手を動かさない役割の人でも)
• せめて何で出来てるかくらいは
知っておく
13年3月23日土曜日
- 81. 用件定義・設計フェーズ
• ページ単位≠機能単位
• 機能単位で考えるくせをつける
(実際に手を動かさない役割の人でも)
• せめて何で出来てるかくらいは
知っておく
• 常日頃から、開発者ツールで
調べるくせをつける
13年3月23日土曜日
- 85. 用件定義・設計フェーズ
• JavaScriptとか書かなかったとしても
どんな機能で構成されているか
(大雑把でもいいので)列挙する
13年3月23日土曜日
- 86. 用件定義・設計フェーズ
• JavaScriptとか書かなかったとしても
どんな機能で構成されているか
(大雑把でもいいので)列挙する
• 先は長いけど、
まずは機能を知るところから
13年3月23日土曜日
- 87. 用件定義・設計フェーズ
• JavaScriptとか書かなかったとしても
どんな機能で構成されているか
(大雑把でもいいので)列挙する
• 先は長いけど、
まずは機能を知るところから
• あとはその道の詳しい人に任せよう
13年3月23日土曜日
- 89. デザインフェーズ
•
Webサイトの
一枚絵の考え方を捨てる
13年3月23日土曜日
- 90. デザインフェーズ
• Webサイトの
一枚絵の考え方を捨てる
• 後のマークアップにダイレクトに響く
13年3月23日土曜日
- 93. Photoshopの例
• 1枚絵のWebサイトでは、ぶっちゃけ
どの方法を用いても問題なかった
13年3月23日土曜日
- 94. Photoshopの例
• 1枚絵のWebサイトでは、ぶっちゃけ
どの方法を用いても問題なかった
• ここに、画面内変化が入ってくると
話が劇的に変わってくる
13年3月23日土曜日
- 97. Photoshopの例
• 上に乗ってる丸いオブジェクトが
背景によらず半透明であるべきなら、
一番右はダメ (ifの話)
13年3月23日土曜日
- 98. Photoshopの例
• 上に乗ってる丸いオブジェクトが
背景によらず半透明であるべきなら、
一番右はダメ (ifの話)
13年3月23日土曜日
- 99. Photoshopの例
• 上に乗ってる丸いオブジェクトが
背景によらず半透明であるべきなら、
一番右はダメ (ifの話)
• じゃあ、左と真ん中ならOK?
13年3月23日土曜日
- 103. Photoshopの例
• 依存関係を無くす
• すでに『乗算』というエフェクトを
使っている時点で
下のオブジェクトに依存してる
13年3月23日土曜日
- 104. Photoshopの例
• 依存関係を無くす
• すでに『乗算』というエフェクトを
使っている時点で
下のオブジェクトに依存してる
• 別々に変化させる前提なら、
まず『乗算』使ってる真ん中はアウト
(ifの話)
13年3月23日土曜日
- 106. デザインフェーズ
• デザイン工程で依存関係だらけだと、
その後のマークアップに相当響く
13年3月23日土曜日
- 107. デザインフェーズ
• デザイン工程で依存関係だらけだと、
その後のマークアップに相当響く
• だからこそ、イメージの共有が必要
13年3月23日土曜日
- 108. デザインフェーズ
• デザイン工程で依存関係だらけだと、
その後のマークアップに相当響く
• だからこそ、イメージの共有が必要
• 背景が変化しただけでも
これだけバリエーションがある
13年3月23日土曜日
- 109. デザインフェーズ
• デザイン工程で依存関係だらけだと、
その後のマークアップに相当響く
• だからこそ、イメージの共有が必要
• 背景が変化しただけでも
これだけバリエーションがある
• 1枚絵(ページ単位)ではなく、
機能単位で考えて小さく保つ
13年3月23日土曜日
- 111. デザインフェーズ
• Q. どうやってイメージの共有する?
13年3月23日土曜日
- 112. デザインフェーズ
• Q. どうやってイメージの共有する?
• A. スマホUIなら、ワイヤーフレーム
書きまくるとか
13年3月23日土曜日
- 113. デザインフェーズ
• Q. どうやってイメージの共有する?
• A. スマホUIなら、ワイヤーフレーム
書きまくるとか
• A. アニメーション多いなら、絵コン
テ書きまくるとか
13年3月23日土曜日
- 114. デザインフェーズ
• Q. どうやってイメージの共有する?
• A. スマホUIなら、ワイヤーフレーム
書きまくるとか
• A. アニメーション多いなら、絵コン
テ書きまくるとか
• 一番共有しやすい方法で!
13年3月23日土曜日
- 116. マークアップフェーズ
• 逆に前工程へ働きかけて、
イメージの共有を図り、依存関係が
ないようにする
13年3月23日土曜日
- 117. マークアップフェーズ
• 逆に前工程へ働きかけて、
イメージの共有を図り、依存関係が
ないようにする
•ページ単位のマークアッ
プの考え方を捨てる
13年3月23日土曜日
- 120. ページ単位のスタイル
↓
最小単位にバラバラにする
↓
同じものを共通化
13年3月23日土曜日
- 121. ページ単位のスタイル
↓
最小単位にバラバラにする
↓
同じものを共通化
↓
機能単位のスタイル
13年3月23日土曜日
- 123. マークアップフェーズ
• 常日頃から、
『共通部分は?違う部分は?』と
問い続ける
13年3月23日土曜日
- 124. マークアップフェーズ
• 常日頃から、
『共通部分は?違う部分は?』と
問い続ける
• SassとかLESSとか、
ツール使えば解決する話じゃない
13年3月23日土曜日
- 125. マークアップフェーズ
• 常日頃から、
『共通部分は?違う部分は?』と
問い続ける
• SassとかLESSとか、
ツール使えば解決する話じゃない
• 逆に、前段上手く出来ていれば
機能単位は、HTML&CSSの1まとまり
の単位になる
13年3月23日土曜日
- 126. マークアップフェーズ
• おまけ1
• CSSのセレクタの最初に必ずIDがつく
のは、ページ単位で考えてる可能性が
ある...かも
• バラバラにして共通化してたら、
それはきっとclass名になるはず
(csslintではWarning出ます)
13年3月23日土曜日
- 127. マークアップフェーズ
• おまけ2
• CSSのセレクタがずらずら並ぶのは、
要素を小さく保ててないから...かも
•ひょっとして依存してる?
• 何か複数の要素で構成されてないか
考えてみる、分解してみる
13年3月23日土曜日
- 128. 目次
1. WebサイトとWebアプリの違うところ
を、色んな切り口で見てみる
2. 協業前提の考え方
3. 押さえたいポイント
4. まとめ
13年3月23日土曜日
- 130. まとめ
• (Webアプリに限らず)
Web制作はこれから複雑化するので、
予め各工程で要素を小さく保つ
13年3月23日土曜日
- 131. まとめ
• (Webアプリに限らず)
Web制作はこれから複雑化するので、
予め各工程で要素を小さく保つ
• ページ単位ではなく、機能単位で
考える
13年3月23日土曜日
- 132. まとめ
• (Webアプリに限らず)
Web制作はこれから複雑化するので、
予め各工程で要素を小さく保つ
• ページ単位ではなく、機能単位で
考える
• 依存関係を極力減らすために、
イメージの共有をする
13年3月23日土曜日
- 134. 出来るところを
ちょっとずつ増やしていこう!
13年3月23日土曜日