Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

1.671 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Umweltschutz
  • Als Erste(r) kommentieren

ゼロディレシステム開発編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名以上のディレクターと繋がる 国内最大のディレクターコミュニティ 利利⽤用特典 •  いち早くイベント情報を得られる •  講演の資料料をチェックできる •  全国のディレクターに⾊色々聴ける •  イベントやリリース告知に使える ディレ協

×