Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JointDevelopment LT

D99940a5dd3c76114ff8890491981eb9?s=47 Hiroyuki Mito
September 20, 2019

JointDevelopment LT

実際の案件を想定した共同開発を行なった例の紹介です。
発表者:水戸、梶原

D99940a5dd3c76114ff8890491981eb9?s=128

Hiroyuki Mito

September 20, 2019
Tweet

More Decks by Hiroyuki Mito

Other Decks in Technology

Transcript

  1. 共同開発内容発表 開発者 水戸、梶原

  2. 開発Webアプリケーション 概要説明

  3. 想定案件 • 中学校向け情報共有Webアプリケーション • クラス単位での使用を想定 • 電子掲示板をベースに開発 • プロフィール機能を備える •

    文教向けタブレットでの操作を考慮
  4. 開発環境 • PHP 7.3 • Laravel 5.8 • MySQL 5.7

    • Bootstrap 4.3
  5. 実装した機能① 1. プロフィール作成機能 2. クラスメイトプロフィール閲覧 3. フォロー機能 4. フォロー済みクラスメイト投稿一覧

  6. 実装した機能③ 5. スレッド投稿/閲覧 6. スレッドへのコメント/コメント閲覧 7. 「いいね!」(コメント対象) 8. コメントへのレスポンス/レスポンス閲覧

  7. 作成した主な機能 ・カテゴリ一覧ー表示 ・follow機能 ・いいね機能

  8. カテゴリー一覧表示

  9. Seeder を使用し カテゴリーに6つの初期データを入力 そこから派生しダミーデータ等を作成す る為、Factory機能、Faker機能を使用 カテゴリー一覧表示

  10. カテゴリー一覧表示 テーブル

  11. follow機能

  12. follow機能 follow中のクラスメイトが投稿したス レッドを、特定ページでまとめて表示 できる。

  13. 意識した部分 followを押すとunfollowに変化 follow状態の友人にはfollowボタンを 表示させない、もしくはunfollowに変化

  14. ・Model内リレーションにおいて 主キー、外部キーの書き方を 勘違いをしていた 苦労した部分 Thread.php 外部キー (FollowssTable) 主キー (ThreadsTable)

  15. follow機能 テーブル

  16. いいね機能

  17. 意識した部分 ・いいねを押すとボタンが変化 ・ボタンの中でいいね数を表示 ・ボタンアイコンにFontAwesome使用

  18. いいね機能 テーブル

  19. 個人的総合感想 ・Gitの扱いがまだ慣れ切れていない pull, fetch ,mergeやbranchの分け方等 ・環境を合わせるなど事前準備はしっかり行う ・外部キー設定などリレーションの知識を深めるこ とができた。

  20. 投稿機能解説

  21. 投稿データの関係 - thread, comment, responseで各々格納 - id -> thread_id ->

    comment_id で階層型
  22. id user_id profile_id category_id title content …... id user_id thread_id

    profile_id comment_text …... id user_id comment_id profile_id response_text …... スレッド/コメント/レスポンス
  23. UI/UX - Bootstrap 4を使用 - 項目を選択しやすくしタブレットに配慮

  24. <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link" href="{{action ('CategoryController @index') }}">

    カテゴリー</a> </li> <li class="nav-item"> <a class="nav-link active"> スレッド</a> </li> </ul> comment.blade.phpより - 上部に階層ツリーを表示 項目毎にリンクを張り タブを選択で遷移する仕様に - 掲示板形式ページ全てが対象 スレッド コメント レスポンス と階層がやや深い為 階層リンクタブについて
  25. <div class="mt-4"> <a href="{{ action ('ThreadController@create') }}"> <button type="button" class="btn

    btn-primary btn-lg btn-block"> 新規スレッド投稿</button> </a> </div> comment.blade.phpより - タブレットで操作 文字にリンクを付けると…… 選択し難い、 明確な境界が表示されない、 誤タッチの原因となる ブロックで置くと…… 一目見てわかりやすい、 選択認識範囲が明確 タブレットでも操作しやすい スレッド投稿ボタンをバー型に
  26. TechBoostで 学習したこと 水戸 博之

  27. - 高度な技術を使用することに囚われない - わからないよりマネをする - エラーは一山毎に確認をして対処する - スキルアップの近道は作ること使うこと - 他者のコードは宝物庫

  28. None