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.

Webサイトのようには作れない!Webアプリ設計の考え方

10,031 views

Published on

Published in: Technology
  • Login to see the comments

Webサイトのようには作れない!Webアプリ設計の考え方

  1. 1. Webサイトのようには作れない! Webアプリ設計の 考え方 @girigiribauer
  2. 2. ※タイトルは若干釣りですごめんなさいソースコードもあんまり出てきません
  3. 3. Webアプリは、つくるもの (≒構成物)は同じでも、つくりかた(≒段取り、設計) は全然ちがった、 という内容について話します
  4. 4. 自己紹介• TwitterID: @girigiribauer• 名古屋の某Web制作会社で 働いています• いつもぎりぎりで戦ってます (※ブランディング)
  5. 5. 今日はもう少し細かい自己紹介• マークアップエンジニアやったり• テクニカルディレクターやったり• 大規模なプロジェクトのCMSの設計、 実装したり• Flashクリエイターやったり
  6. 6. 今日はもう少し細かい自己紹介• フロントエンドエンジニアに至る• いずれはリアルタイムWebクリエイ ター!になりたいな
  7. 7. Webアプリとは• ここでいうWebアプリは、クライアン トサイド中心に動くWebアプリ• もっと言うとJavaScriptを中心とした Webアプリ• Webサイトと呼ばれる中に、Webアプ リが混在することもある
  8. 8. お品書き• 前置き(おわり)• 最近のWebサイト制作の潮流、トレンド• 要件定義の話• 設計の話• まとめ
  9. 9. 最近のWebサイト制作の 潮流、トレンド• 個人的な感想が主です
  10. 10. 最近のWebサイト制作の潮流、トレンドhttp://archive.engineanalog.com/TSBD0902/site/
  11. 11. 最近のWebサイト制作の潮流、トレンドhttp://archive.engineanalog.com/TSBD0902/site/
  12. 12. 最近のWebサイト制作の潮流、トレンド http://toyota.vo.llnwd.net/o29/toyota/sienta/
  13. 13. 最近のWebサイト制作の潮流、トレンド (潮流、トレンド)• Webサイトが、単に情報載せるだけの 役割を終えつつある(※もちろんなくな るわけじゃない)• とある機能に特化、例えば体験させる ためのコンテンツとか• Webサイトの中にWebアプリが部分的 にあるとか
  14. 14. 最近のWebサイト制作の潮流、トレンド (技術面とか)• サーバサイドでページ単位で返すもの を、非同期で必要な部分だけ返す• いわゆるAjax• サーバサイドの負荷をクライアントサ イドに逃がす• ページ単位ではなく機能単位
  15. 15. 最近のWebサイト制作の潮流、トレンド (デバイスの変化)• スマートフォン、タブレット対応も併せ てしてほしい• Flashでやりましょう、は減っている (激減してるので寂しい)• 必然的に、JavaScriptでやりましょう、 が増えている
  16. 16. クライアントサイドの Webアプリに集中 潮流、トレンド技術面とか クライアントサイドの Webアプリデバイスの変化
  17. 17. 一言でまとめると
  18. 18. 需要高いよ!
  19. 19. 需要高いよ! チャンスだよ!
  20. 20. お品書き• 前置き(おわり)• 最近のWebサイト制作の潮流、トレンド (おわり)• 要件定義の話• 設計の話• まとめ
  21. 21. 要件定義の話• 作れる方法が増えてきたことで、 前段をほったらかしにすると あとで痛い目に・・・
  22. 22. 今までのWebサイト構築のあるある ※弊社とは全く関係のない、  一個人の見解です
  23. 23. 今までのWebサイト構築のあるある CTUのサイト構築の話が あるんだよねー Director ほほぅ Engineer だいたいのページボリューム と工数算出もして、 情報設計もしてあるから Director ※Twenty Fourより引用
  24. 24. 今までのWebサイト構築のあるある あと、 デザインよろしくねー Director はいはーい♪ Designer デザインどう? Director ※Twenty Fourより引用
  25. 25. 今までのWebサイト構築のあるある はいはーい♪(差し出す) Designer お、いいねー。 じゃあエンジニアくん、 これで進めてね! Director はーい Engineer ※Twenty Fourより引用
  26. 26. 今までのWebサイト構築• 経験があればこの流れでもそれなりに 出来る• 構築フローとしては定着してるので、 「ここおかしくない?」って誰もが言 いやすい
  27. 27. “最近の” Webサイト構築のあるある CTUのサイト構築の話が あるんだよねー Director ほほぅ Engineer 今回はこの地図部分をAjaxでぐりぐりやっ て、モーダルウィンドウでそのまま出した いんだよね。工数算出もして、情報設計も してあるから Director ※Twenty Fourより引用
  28. 28. “最近の” Webサイト構築のあるある あと、 デザインよろしくねー Director はいはーい♪ Designer ※Twenty Fourより引用
  29. 29. “最近の” Webサイト構築のあるある はいはーい♪(差し出す) Designer お、いいねー。 じゃあエンジニアくん、 これで進めてね! Director えっ?えっ? (内容の割に期間短くない?) Engineer ※Twenty Fourより引用
  30. 30. “最近の” Webサイト構築のあるある CTUのサイト構築の話が あるんだよねー Director 今回は、いま流行りのパララックスで グィングィンとやっちゃいたいんだよね。 デザインよろしくねー Director はいはーい♪ Designer ※Twenty Fourより引用
  31. 31. “最近の” Webサイト構築のあるある ※Twenty Fourより引用
  32. 32. “最近の” Webサイト構築のあるある なんだって・・・? ※Twenty Fourより引用
  33. 33. どこに問題があるのか• 普通のWebサイトに慣れてるディレク ターだけでは、要件定義できないかも• そういう人に任せていたら、最後に死 ぬのは自分自身、はりたおしてでも変 な要件がくるのを阻止すべき• 自己防衛、テロを防ぐ
  34. 34. だからこそ、要件定義の 話をしよう1. どのタイミングでどのように介入すれ ばいいのか2. どう動けばいいのか(いわゆるテクニ カルディレクター)3. 最終的に何が決まればいいのか
  35. 35. 1. どのタイミングでどのように介入すればいいのか?• 理想は「どのような機能的な要件があ るか」をディレクターがヒアリング• 機能的要件を技術的要件に変換する• 他タスクで時間がないかもしれないけ ど、要件が確定してしまう前に介入
  36. 36. 機能的要件を技術的要件に変換する (1/4)商品パーツをいくつか選ぶと、組み合わせた画像をそのまま表示する(よくある着せ替え系)• サーバサイドで画像合成する• クライアントサイド、Flashで画像合成する• クライアントサイド、Canvasで画像合成する• あるいはそれらを組み合わせる
  37. 37. 機能的要件を技術的要件に変換する (2/4)他の要件を洗い出す• まだまだIE6, 7とか削れない、シェア多い• iPadはどうしても入れたい• サーバは貧弱• 費用は○○まででおさめたい(無茶ぶり・・)
  38. 38. 機能的要件を技術的要件に変換する (3/4)組み合わせて絞り込む• サーバサイドで画像合成する → 貧弱なのでアクセス数や組み合わせ数次第では無理• クライアントサイド、Flashで画像合成する → iPadに対応できない• クライアントサイド、Canvasで画像合成する → IE6∼8に対応できない• あるいはそれらを組み合わせる → 当確?(※お高くなりますよ?)
  39. 39. 機能的要件を技術的要件に変換する (4/4)• ここまでやって、ディレクターとメ リット・デメリット含めて共有する• あとはどこを妥協するかの話し合い (費用、対応デバイスなど)
  40. 40. だからこそ、要件定義の 話をしよう1. どのタイミングでどのように介入すれ ばいいのか2. どう動けばいいのか(いわゆるテクニ カルディレクター)3. 最終的に何が決まればいいのか
  41. 41. どう動けばいいのか• 火は着火する前に消す• ディレクターが技術的に分からない人 だったとしても、複数の方法のメリッ ト・デメリットまで提示されれば動け る人は多い• 場合によってはプロトタイプ作る(後述)
  42. 42. 理解ある人と仕事をしよう• 技術的なところは分からないから相談 する、という段取りができる人と仕事 をしよう• できない、わからないということ自体 は悪じゃない• できてない、わかってないという認識 がないことこそが悪
  43. 43. 理解ある人と仕事をしよう• 相談せずに勝手に進めちゃうやつは はりたおす、というスタンスで臨む• 自己防衛、テロを防ぐ
  44. 44. だからこそ、要件定義の 話をしよう1. どのタイミングでどのように介入すれ ばいいのか2. どう動けばいいのか(いわゆるテクニ カルディレクター)3. 最終的に何が決まればいいのか
  45. 45. 最終的に何が決まればいいのか• 結果的に技術的な要件定義ができてい ればOK• それぞれの方法に対してどれくらいかか るかを目安として共有する、判断材料の 1つ• ディレクターに任せるところは任せる (ディレクターになる必要はない)
  46. 46. 小まとめ• 技術的にやれる方法が増えてきている(サー バ、クライアント)• 適切に選ぶ、得意じゃないとこはお互い聞け ばいい、選べないやつには選ばせない• ここで適切なチョイスがなされないと、あと でどんだけ頑張ってもいいものは作れない• 自己防衛、テロを防ぐ
  47. 47. お品書き• 前置き(おわり)• 最近のWebサイト制作の潮流、トレンド (おわり)• 要件定義の話(おわり)• 設計の話• まとめ
  48. 48. 設計の話• ページ単位で進めると、大問題になる 可能性• Webサイト制作に慣れてる人ほどあり がち• 機能単位のくくりだしが必要
  49. 49. “最近の” Webサイト構築のあるある CTUのサイト構築の話が あるんだよねー Director 今回は、画面遷移せずに 一連の流れでAjax的にぽちぽち選んでいく コンテンツを作りたいんだよねー デザインよろしくねー Director ちょっとまったー!! Technical Director ※Twenty Fourより引用
  50. 50. “最近の” Webサイト構築のあるある もしかして、画面の切り替え ごとにページ数=画面数で算 出してたりしてないか? Technical Director ああ、その通りだが 何か問題か? Director ※Twenty Fourより引用
  51. 51. ページ(画面)単位ではなく 機能単位のが良い• 実は設計だけじゃなく、要件定義にも 絡んでくる話• 単独の機能(&UI)をもったひとまとま りを単位で数える• +API単位で数える
  52. 52. 個人的に取り入れてる設計 の手順※世間的に名前が合ってるかどうか分からないけど、こう呼んでます1. プロトタイプ制作2. インターフェース定義3. ウィジェット設計
  53. 53. 1. プロトタイプ制作※ホントは要件定義で行う想定ですが、前段に書くとごちゃごちゃするのでこちらで紹介 • 制作時におけるリスクを可能な限り減らす • 想定される機能のみを、検証するために作る • 例)Canvasの画像合成において、どのブラウ ザでどこまでマスク処理できるか試す
  54. 54. 1. プロトタイプ制作※ホントは要件定義で行う想定ですが、前段に書くとごちゃごちゃするのでこちらで紹介 • 汎用的なものほど資産にでき、流用できる • 書籍「テスト駆動JavaScript」にある学習テス トに近い?
  55. 55. 1. プロトタイプ制作実際に試しに作ったものを見てもらうと さすがに時間なくなるので省略
  56. 56. 個人的に取り入れてる設計 の手順※世間的に名前が合ってるかどうか分からないけど、こう呼んでます1. プロトタイプ制作2. インターフェース定義3. ウィジェット設計
  57. 57. 2.インターフェース定義• サーバとクライアント間の通信を定義す る• いわゆるAPI(内部API、公開しない)• データください、データあげますの定義• 基本的にはJSON
  58. 58. インターフェース定義の例例えば、顔と小物と背景のパーツを選んだら、合成した1枚絵が返ってくるようなもの• リクエストURL (http://domain/api/imagecomposition/)• リクエストパラメータの定義(face, acc, bg)• レスポンス形式を決める
  59. 59. インターフェース定義の例 リクエスト API名 必須 概要とか パラメータimagecom 笑い顔、泣き顔、アヘ顔 face ○ position の中から選択する acc ○ ・・・ bg ○ ・・・
  60. 60. インターフェース定義の例レスポンスのサンプル(JSON){ "head": { "success": 1 }, "data": { "image": "/resource/mainimage.png" }}
  61. 61. インターフェース定義の例• 仕様として共有できる形にする• 決めておけば、平行して実装できる• 仮に自分1人でやるときも、いざという ときお願いできるようにしておく• 切り分けてシンプルにする
  62. 62. 個人的に取り入れてる設計 の手順※世間的に名前が合ってるかどうか分からないけど、こう呼んでます1. プロトタイプ制作2. インターフェース定義3. ウィジェット設計
  63. 63. 3. ウィジェット設計※ここでは機能とビューの1つのまとまりの単位をウィジェットと呼んでます • JavaScriptだけなら、他言語参考にして やればOK • HTMLも含めて考えると、完全に機能と ビューを切り分けられない • 機能とUIのひとまとまりをウィジェッ トとして定義する • ウィジェットは汎用的に作る
  64. 64. ウィジェット設計の例A B Cこうではなくて・・・
  65. 65. ウィジェット設計の例AB Cこんなかんじ(機能単位!)
  66. 66. ウィジェット設計の例• @takazudo さんの以下の資料がとても 分かりやすい• http://dl.dropbox.com/u/268240/ presentations/jQueryRefactoring/ presentation/index.html• http://dl.dropbox.com/u/268240/ presentations/cssnitelp18jq/index.html#/• 切り分けてシンプルにする
  67. 67. 小まとめ• 前段で動いて、要件的なリスクを減らす• シンプルに分けて、実装的なリスクを 減らす• お願いしやすくしておいて、社内リソー ス的なリスクを減らす• 自己防衛、テロを防ぐ
  68. 68. お品書き• 前置き(おわり)• 最近のWebサイト制作の潮流、トレンド (おわり)• 要件定義の話(おわり)• 設計の話(おわり)• まとめ
  69. 69. 結局Webサイト構築とWebアプリ構築 の違いとは?• 結局JavaScriptは使うし、HTML, CSSで書く• Webアプリだからこそ、というよりは、 やれること増えてきてるからアプリも作 れるし、使う技術を適切に選ぶ必要があ る
  70. 70. 要件定義から• やれる方法が増えているので、適切に 選ぶ• その障害になってるやつはどんな方法 を使っても排除する• 自己防衛、テロを防ぐ
  71. 71. 設計から• ディレクター、デザイナーの工程を待 たなくてもやれることはたくさんある• 何事もシンプルに分けて、リスクを分 散しよう• 自己防衛、テロを防ぐ
  72. 72. 大まとめ• プロジェクトメンバーに、選択肢が増 えているから、適切に選ぶ必要がある ことを浸透させる• 「段取りや算段立てないで 勝手に進め ちゃうやつは はりたおす!」っていう 段取りTシャツを作るとか
  73. 73. おわり質問なんてないと思いますがありますか?w

×