O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

ゼロディレシステム開発編150725

1.596 visualizações

Publicada em

0からのWebディレクション講座:開発編 7/25
https://www.street-academy.com/myclass/4058

Publicada em: Meio ambiente
  • Seja o primeiro a comentar

ゼロディレシステム開発編150725

  1. 1. ⽇日 本 デ ィ レ ク シ ョ ン 協 会 主 催 0からのWebディレクション講座 システム開発編
  2. 2. 講師紹介 柳柳⽥田  亜沙美(あさみん) 株式会社凛  代表取締役 エンジニア・Webディレクター •  新卒OL時代にエクセルVBAとAccessに 出会い、⽣生産管理理・在庫管理理システムを 構築。 •  プログラマに転職。 •  2008年年、株式会社凛を設⽴立立。 •  ⼥女女性向けプログラミングスクール 「GeekGirlLabo」運営。 •  来週から企業の新⼈人社員研修開始!
  3. 3. INDEX 13:00〜~  第⼀一部   1.  講義 2.  ワークショップ 14:15〜~  第⼆二部   1.  講義 2.  ワークショップ 15:30〜~  第三部 1.  講義 2.  ワークショップ 16:30〜~  発表 17:00〜~  懇親会
  4. 4. よく聞かれること 4   ディレクターもプログラム書けたほう がいいですか?
  5. 5. よく聞かれること 5   ディレクターもプログラム書けたほう がいいですか? 必要ありません。
  6. 6. なぜプログラミングが出来るほうがいいのか? 6   無茶茶ぶりをしないから
  7. 7. 具体的には? 7   •  仕様を確定してくれる •  仕様変更更が少ない •  仕様変更更であることを認識識している •  仕様変更更の対応に時間がかかることを 知っている
  8. 8. システムのつくりかた (3)システムが動く (2)エンジニアがコンピュータに伝える (1)仕様をエンジニアに伝える 8   ⼤大事なのはここ!
  9. 9. ダメな例例(1) 9   ⾷食べログみたいな やつ作ってよ! 任せたからよろしく! 丸投げかよ
  10. 10. ダメな例例(2) 10   ん〜~⾒見見てみないと わかんない ここの仕様、AとB どっちがいいですか
  11. 11. 結果。 11   ここ、こうなって ないんだけど? そんな仕様、 知りません。
  12. 12. 仕様変更更するとどうなる? 12   1. スケジュールが遅れる 2. コストが発⽣生する 3. バグが発⽣生しやすくなる
  13. 13. 丸投げSTOP! エンジニアは 魔法使いではありません 丸投げはダメ。ゼッタイ。 13  
  14. 14. システムのつくりかた システムが動く エンジニアがコンピュータに伝える 仕様をエンジニアに伝える 14   そのために仕様書 をつくろう
  15. 15. よく使う仕様書 •  画⾯面機能⼀一覧 •  画⾯面遷移図 •  画⾯面仕様書 •  データベース仕様書 15  
  16. 16. 画⾯面機能⼀一覧 画⾯面や機能が⼀一覧になっているもの 16   分類 機能 備考 ユーザー画⾯面 商品 ⼀一覧    詳細    カート    決済    ⾒見見積 デザイン・レイアウト選択    ロゴをアップロード    会員 会員登録    会員情報編集    静的ページ トップページ    特定商取引法    プライバシーポリシー    会社概要   
  17. 17. 画⾯面遷移図 画⾯面遷移を図にしたもの 17   トップ ページ 会員ログ イン ご注文履 歴 会員情報 編集 商品一覧 商品詳細 カートへ 入れる ご購入 ページ 決済
  18. 18. 画⾯面仕様書(表⽰示) •  各画⾯面に表⽰示する項⽬目や、各項⽬目に対する詳細な仕様を記 ⼊入する。 •  ⼀一覧表⽰示する場合は、以下を指定する。 1.  表⽰示件数 2.  並べ替え項⽬目と昇順/降降順、 3.  絞り込み条件等 18   ▼出⼒力力定義       No 表⽰示内容 取得条件 表⽰示順 ⑩ 店舗⼀一覧 削除=0の店舗を10件 登録⽇日時降降順
  19. 19. 画⾯面仕様書(動作) •  各画⾯面に表⽰示する項⽬目や、各項⽬目に対する詳細な仕様を記 ⼊入する。 •  ボタンを押した時や、セレクトボックスを選択した時にど んな動きをするのか、など。 19   ▼動作定義       No 動作 遷移先 チェック ⑦ 選択時にAjaxで⑧を更更新 ー ー ⑨ Ajaxで選択した条件で⑩を絞り込み、更更新 店舗が存在しない場合は「店舗が存在しませ ん」と表⽰示 ー 必須チェック ⑦ ⑧ ⑨
  20. 20. 画⾯面仕様書(⼊入⼒力力) ⼊入⼒力力チェックを定義する。エラーだった場合の表⽰示 メッセージも決めておく。 1.  必須チェック 2.  桁数チェック 3.  半⾓角チェック 4.  数値チェック 5.  重複チェック 20  
  21. 21. 画⾯面仕様書(例例) 21  
  22. 22. 画⾯面仕様書(例例) ーTwitterの登録フォームー 22   ▼⼊入⼒力力定義       No ⼊入⼒力力内容 ⼊入⼒力力チェック エラーメッセージ ① 名前 必須チェック 名前を⼊入⼒力力してください。    桁数チェック 名前は15⽂文字以内で⼊入⼒力力してください。 ② メールアドレス 必須チェック メールアドレスを⼊入⼒力力してください。       重複チェック メールアドレスが既に登録されています。       メールアドレス チェック メールアドレスは正しく⼊入⼒力力してくださ い ③ ユーザー名 必須チェック ユーザー名を⼊入⼒力力してください。    桁数チェック ユーザー名は8⽂文字以内で⼊入⼒力力してくだ さい。    重複チェック ユーザー名が既に登録されています。    半⾓角英数チェック ユーザー名は半⾓角英数字で⼊入⼒力力してくだ さい ④ パスワード 必須チェック パスワードを⼊入⼒力力してください。       桁数チェック パスワードは5⽂文字以上で⼊入⼒力力してくだ さい。 ⑤ チェックボックス ー   
  23. 23. ワークショップ〜~画⾯面仕様書を作ってみよう〜~ グルメ⼝口コミサイトレビュー投稿 23   ニックネーム 日本ディレクション協会の口コミを投稿する 性別 総合評価 1 2 3 4 5 ● 男性     女性 感想 口コミを投稿する
  24. 24. データベースって? 24   データ ベース サーバー ブラウザ   データを取り出しやすいように整理理して⼊入 れておく場所です。 DBと省省略略される事が多いです。   エクセルファイルのようなものです。
  25. 25. データベースとテーブル 25   データベースの中には、複数の「テーブ ル」が格納されています。 Twitterデータベース ツイートテーブル ユーザーテーブル フォローテーブル
  26. 26. テーブル≒エクセルのシート 26   店舗名 都道府県 市区町村 番地 建物名等 函館昭和店 北海道 函館市   昭和1-31-1ノースフィールド1F フレスポ帯広稲田店 北海道 帯広市   稲田町南9線西11-1 フィール旭川店 北海道 旭川市   1条通8-108 オーロラタウン店 北海道 札幌市 中央区 大通西2丁目 札幌パルコ店 北海道 札幌市 中央区 南1条西3-3 札幌駅前通店 北海道 札幌市 中央区 北3条西3-1-47 麻生店 北海道 札幌市 北区 麻生町5-1-8 新さっぽろduo店 北海道 札幌市 厚別区 厚別中央2条5-6-3 イオンモール札幌苗穂店 北海道 札幌市 東区 東苗穂二条3-1-1 札幌元町店 北海道 札幌市 東区 北27条東15-1-20 イオンタウン平岡店 北海道 札幌市 清田区 平岡2条5-2-50 白石店 北海道 札幌市 白石区 南郷通り1丁目北2-32 イオンモール札幌発寒支店 北海道 札幌市 西区 発寒8条12-1 札幌発寒店 北海道 札幌市 西区 発寒7条12-3-17 イオン江別店 北海道 江別市   幸町35 釧路昭和店 北海道 釧路市   昭和中央3-3-1
  27. 27. カラム(列列)とレコード(⾏行行) 27   店舗名 都道府県 市区町村 番地 建物名等 函館昭和店 北海道 函館市   昭和1-31-1ノースフィールド1F フレスポ帯広稲田店 北海道 帯広市   稲田町南9線西11-1 フィール旭川店 北海道 旭川市   1条通8-108 オーロラタウン店 北海道 札幌市 中央区 大通西2丁目 札幌パルコ店 北海道 札幌市 中央区 南1条西3-3 札幌駅前通店 北海道 札幌市 中央区 北3条西3-1-47 麻生店 北海道 札幌市 北区 麻生町5-1-8 新さっぽろduo店 北海道 札幌市 厚別区 厚別中央2条5-6-3 イオンモール札幌苗穂店 北海道 札幌市 東区 東苗穂二条3-1-1 札幌元町店 北海道 札幌市 東区 北27条東15-1-20 イオンタウン平岡店 北海道 札幌市 清田区 平岡2条5-2-50 白石店 北海道 札幌市 白石区 南郷通り1丁目北2-32 イオンモール札幌発寒支店 北海道 札幌市 西区 発寒8条12-1 札幌発寒店 北海道 札幌市 西区 発寒7条12-3-17 イオン江別店 北海道 江別市   幸町35 釧路昭和店 北海道 釧路市   昭和中央3-3-1
  28. 28. データベース仕様書<サンプル> 28   テーブル名称 店舗    TABLE名称 shop             № カラム名 項⽬目 キー 初期値 備考 1id 店舗ID ○ ⾃自動⽣生成 2shopname 店舗名    3pref 都道府県    4city 市区町村    5town 番地    6building 建物名等    7deleted 削除 0 削除=1 8create_̲date 登録⽇日 ⾃自動⼊入⼒力力   9modified_̲date 更更新⽇日 ⾃自動⼊入⼒力力
  29. 29. テーブル名称 店舗    TABLE名称 shop             № カラム名 項⽬目 キー 初期値 備考 1id 店舗ID ○ ⾃自動⽣生成 2shopname 店舗名    3pref 都道府県    4city 市区町村    5town 番地    6building 建物名等    7deleted 削除 0 削除=1 8create_̲date 登録⽇日 ⾃自動⼊入⼒力力   9modified_̲date 更更新⽇日 ⾃自動⼊入⼒力力 データベース仕様書≒エクセルの項⽬目 29  
  30. 30. テーブル名称 店舗    TABLE名称 shop             № カラム名 項⽬目 キー 初期値 備考 1id 店舗ID ○ ⾃自動⽣生成 2shopname 店舗名    3pref 都道府県    4city 市区町村    5town 番地    6building 建物名等    7deleted 削除 0 削除=1 8create_̲date 登録⽇日 ⾃自動⼊入⼒力力   9modified_̲date 更更新⽇日 ⾃自動⼊入⼒力力 フォームから⼊入⼒力力した値以外の項⽬目 30  
  31. 31. データベース仕様書(例例) ーTwitterのユーザーテーブル 31   テーブル名称 ユーザー       TABLE名称 user                   № カラム名 項⽬目 キー 初期値 備考 1id ユーザーID ○ ⾃自動⽣生成    2username ユーザー名          3name 名前          4email メールアドレス   ○       5password パスワード          6profile プロフィール          7deleted 削除    0 削除=1 8create_̲date 登録⽇日    ⾃自動⼊入⼒力力     9modified_̲date 更更新⽇日    ⾃自動⼊入⼒力力    10last_̲access 最終アクセス⽇日時    ログイン時 に更更新
  32. 32. データベース仕様書(例例) ーTwitterのユーザーテーブル 32   テーブル名称 ユーザー       TABLE名称 user                   № 物理理名 論論理理名 キー 初期値 備考 1id ユーザーID ○ ⾃自動⽣生成    2username ユーザー名          3name 名前          4email メールアドレス          5password パスワード          6profile プロフィール          7deleted 削除    0 削除=1 8create_̲date 登録⽇日    ⾃自動⼊入⼒力力     9modified_̲date 更更新⽇日    ⾃自動⼊入⼒力力    10last_̲access 最終アクセス⽇日時    ⾃自動⼊入⼒力力 ログイン時 に更更新
  33. 33. ワークショップ 〜~データベース設計をしてみよう ⼊入⼒力力したデータを登録するデータベースの設計 をしてみよう! <⼿手順> 1.  ⼊入⼒力力項⽬目を縦に並べてみよう 2.  物理理名を考えてみよう 3.  ⼊入⼒力力した値以外の項⽬目(ID、登録⽇日時、更更 新⽇日時、削除など)に必要なものを考えて みよう 33  
  34. 34. データベースからデータを取得してみよう 34  
  35. 35. 出⼒力力系仕様書 35   ▼出力定義     No 項目 取得元 取得条件 1 ユーザー一覧 Userテーブル 入力されたキーワードと部分一致、登 録日時降順、20件取得 1-‐‑‒1 ヘッダー画像 User.headerimg   1-‐‑‒2 アイコン画像 User.iconimg   1-‐‑‒3 名前 User.name   1-‐‑‒4 ユーザー名 User.username   1-‐‑‒5 プロフィール User.profile   件数が多い場合は必ずページネーションをつけよう!
  36. 36. ワークショップ〜~画⾯面仕様書を作ってみよう2〜~ グルメ⼝口コミサイトレビュー表⽰示 36   あさみん さんの口コミ 日本ディレクション協会の口コミ一覧 ★★★★☆ 女性 渋⾕谷のNo1ラーメンと呼び声が⾼高い『はやし』に⾏行行ってきた。  家から マークシティーに⾏行行くときにいつも⽬目の前を通るのだが、  昼間はだい たい⾏行行列列、そして早々に閉店してしまうため、  今まで⾏行行く機会に恵ま れずずっと気になっていた。  スープが無くなった時点で終了了の様なの で、オープンの11時半の1...  >>続きを読む OHさんの口コミ ★★★☆☆ 男性 本⽇日は仕事の合間に来店。平⽇日12時半であったが、思っていたほど並 んでおらず、15分くらい(8⼈人くらい)並んでお店に⼊入れました。  好 きなラーメン屋ではあるが、久々の当店。欲張ってト......  >>続きを 読む
  37. 37. 今⽇日のまとめ 1. エンジニアにきちんと仕様を伝えるこ とがプロジェクト成功の鍵! 2. 将来的に追加したい機能のこともエン ジニアに伝えておこう! 3. データベースはエクセルのシートだと 思おう!
  38. 38. 以上 ご清聴ありがとうございました。
  39. 39. 質疑応答 なんでもOKです。時間の許す限りお答えいたします。 時間なくなった場合はミートアップの時聞いてください。語ります。
  40. 40. 日本ディレクション協会 コミュニティメンバーボードのご案内 ディレ協の運営メンバーや、歴代&人気講師含む 全国1,000名以上のディレクターと繋がる 国内最大のディレクターコミュニティ 利利⽤用特典 •  いち早くイベント情報を得られる •  講演の資料料をチェックできる •  全国のディレクターに⾊色々聴ける •  イベントやリリース告知に使える ディレ協

×