Recommandé
Contenu connexe
Similaire à Webアプリのマークアップ、どうすればいいの？
Plus de girigiribauer
Dernier
Dernier (11)
Webアプリのマークアップ、どうすればいいの？
- 1. Webアプリのマークアップ、 どうすればいいの？ 2013/03/19(火) html5nagoya#2 13年3月23日土曜日
- 3. 今日しない話 • ネイティブアプリから見たWebアプリ の話 13年3月23日土曜日
- 4. 今日しない話 • ネイティブアプリから見たWebアプリ の話 • Webアプリの厳密な定義の話 13年3月23日土曜日
- 5. 今日しない話 • ネイティブアプリから見たWebアプリ の話 • Webアプリの厳密な定義の話 • 聞くだけで簡単に作れるようになる魔 法のメソッドの話 13年3月23日土曜日
- 6. 今日は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日土曜日
- 12. マークアップエンジニア だけでは なかなかに難しい 13年3月23日土曜日
- 13. 各工程で 常に機能単位で考え、 イメージの共有をし、 13年3月23日土曜日
- 14. 小さく保ちながら 作っていくことが 13年3月23日土曜日
- 15. (少なくともWebアプリには) 求められるのでは？ 13年3月23日土曜日
- 16. と、思ったので、 考えてみました ・・・という話です 13年3月23日土曜日
- 17. Webアプリのマークアップ、 どうすればいいの？ 2013/03/19(火) html5nagoya#2 13年3月23日土曜日
- 18. 目次 1. WebサイトとWebアプリの違うところ を、色んな切り口で見てみる 2. 協業前提の考え方 3. 押さえたいポイント 4. まとめ 13年3月23日土曜日
- 19. 目次 1. WebサイトとWebアプリの違うところ を、色んな切り口で見てみる 2. 協業前提の考え方 3. 押さえたいポイント 4. まとめ 13年3月23日土曜日
- 20. ※最初はつまらない話なので ちょっと我慢してね 13年3月23日土曜日
- 21. WebサイトとWebアプリの違うとこ ろを、色んな切り口で見てみる 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日土曜日
- 27. 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日土曜日
- 43. 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日土曜日
- 58. Webサイト脳を 少し切り替えてみる 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日土曜日
- 73. 押さえたいポイント 1. 用件定義・設計フェーズ 13年3月23日土曜日
- 74. 押さえたいポイント 1. 用件定義・設計フェーズ 2. デザインフェーズ 13年3月23日土曜日
- 75. 押さえたいポイント 1. 用件定義・設計フェーズ 2. デザインフェーズ 3. マークアップフェーズ 13年3月23日土曜日
- 76. 押さえたいポイント 1. 用件定義・設計フェーズ 2. デザインフェーズ 3. マークアップフェーズ 4. フロント側の実装フェーズ （※今日は触れません） 13年3月23日土曜日
- 78. 用件定義・設計フェーズ • ページ単位≠機能単位 13年3月23日土曜日
- 79. 用件定義・設計フェーズ • ページ単位≠機能単位 • 機能単位で考えるくせをつける (実際に手を動かさない役割の人でも) 13年3月23日土曜日
- 80. 用件定義・設計フェーズ • ページ単位≠機能単位 • 機能単位で考えるくせをつける (実際に手を動かさない役割の人でも) • せめて何で出来てるかくらいは 知っておく 13年3月23日土曜日
- 81. 用件定義・設計フェーズ • ページ単位≠機能単位 • 機能単位で考えるくせをつける (実際に手を動かさない役割の人でも) • せめて何で出来てるかくらいは 知っておく • 常日頃から、開発者ツールで 調べるくせをつける 13年3月23日土曜日
- 83. 用件定義・設計フェーズ 極端な例で申し訳ありません・・・ 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日土曜日
- 102. Photoshopの例 • 依存関係を無くす 13年3月23日土曜日
- 103. Photoshopの例 • 依存関係を無くす • すでに『乗算』というエフェクトを 使っている時点で 下のオブジェクトに依存してる 13年3月23日土曜日
- 104. Photoshopの例 • 依存関係を無くす • すでに『乗算』というエフェクトを 使っている時点で 下のオブジェクトに依存してる • 別々に変化させる前提なら、 まず『乗算』使ってる真ん中はアウト (ifの話) 13年3月23日土曜日
- 105. デザインフェーズ 13年3月23日土曜日
- 106. デザインフェーズ • デザイン工程で依存関係だらけだと、 その後のマークアップに相当響く 13年3月23日土曜日
- 107. デザインフェーズ • デザイン工程で依存関係だらけだと、 その後のマークアップに相当響く • だからこそ、イメージの共有が必要 13年3月23日土曜日
- 108. デザインフェーズ • デザイン工程で依存関係だらけだと、 その後のマークアップに相当響く • だからこそ、イメージの共有が必要 • 背景が変化しただけでも これだけバリエーションがある 13年3月23日土曜日
- 109. デザインフェーズ • デザイン工程で依存関係だらけだと、 その後のマークアップに相当響く • だからこそ、イメージの共有が必要 • 背景が変化しただけでも これだけバリエーションがある • 1枚絵（ページ単位）ではなく、 機能単位で考えて小さく保つ 13年3月23日土曜日
- 110. デザインフェーズ 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日土曜日
- 119. ページ単位のスタイル ↓ 最小単位にバラバラにする 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日土曜日
- 129. まとめ 13年3月23日土曜日
- 130. まとめ • （Webアプリに限らず） Web制作はこれから複雑化するので、 予め各工程で要素を小さく保つ 13年3月23日土曜日
- 131. まとめ • （Webアプリに限らず） Web制作はこれから複雑化するので、 予め各工程で要素を小さく保つ • ページ単位ではなく、機能単位で 考える 13年3月23日土曜日
- 132. まとめ • （Webアプリに限らず） Web制作はこれから複雑化するので、 予め各工程で要素を小さく保つ • ページ単位ではなく、機能単位で 考える • 依存関係を極力減らすために、 イメージの共有をする 13年3月23日土曜日
- 133. 今、出来る部分が そんなに多くなくても 13年3月23日土曜日
- 134. 出来るところを ちょっとずつ増やしていこう！ 13年3月23日土曜日
- 135. ご清聴ありがとう ございました！ 13年3月23日土曜日