Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
JointDevelopment LT
Hiroyuki Mito
September 20, 2019
Technology
0
24
JointDevelopment LT
実際の案件を想定した共同開発を行なった例の紹介です。
発表者:水戸、梶原
Hiroyuki Mito
September 20, 2019
Tweet
Share
More Decks by Hiroyuki Mito
See All by Hiroyuki Mito
Paiza CloudとVS Codeで快適な環境を作ろう! / Let's create a comfortable development environment with Paiza Cloud and Visual Studio Code !
hiroyukimito
0
270
Ruby以外から始めるエンジニア生活 PHP(Laravel)版 / Let's start an engineer other than Ruby !! PHP ver.
hiroyukimito
0
190
Other Decks in Technology
See All in Technology
PUTとPOSTどっち使う?
hankehly
0
270
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
9.1k
Lessons Learned from Scaling Infrastructure as Code
joatmon08
0
800
Retca Cloud
bau
0
520
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.2k
History of the ML system in KARTE
kargo113
1
660
220628 「Google AppSheet」タスク管理アプリをライブ作成 吉積情報伊藤さん
comucal
PRO
0
230
ノーコードで Stripeを使いこなす3つの方法 / jp-stripes-online-vol-4
stripehideokamoto
0
300
【toranoana.deno#7】Denoからwasmを呼び出す基礎
toranoana
0
130
スタートアップと技術選定と AWS
track3jyo
PRO
2
350
現状のFedCMの動作解説と OIDCとの親和性について- OpenID TechNight vol.19
ritou
2
450
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
daiksy
1
450
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
169
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
A Tale of Four Properties
chriscoyier
149
21k
GitHub's CSS Performance
jonrohan
1020
420k
Bash Introduction
62gerente
597
210k
Atom: Resistance is Futile
akmur
255
20k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
It's Worth the Effort
3n
172
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Transcript
共同開発内容発表 開発者 水戸、梶原
開発Webアプリケーション 概要説明
想定案件 • 中学校向け情報共有Webアプリケーション • クラス単位での使用を想定 • 電子掲示板をベースに開発 • プロフィール機能を備える •
文教向けタブレットでの操作を考慮
開発環境 • PHP 7.3 • Laravel 5.8 • MySQL 5.7
• Bootstrap 4.3
実装した機能① 1. プロフィール作成機能 2. クラスメイトプロフィール閲覧 3. フォロー機能 4. フォロー済みクラスメイト投稿一覧
実装した機能③ 5. スレッド投稿/閲覧 6. スレッドへのコメント/コメント閲覧 7. 「いいね!」(コメント対象) 8. コメントへのレスポンス/レスポンス閲覧
作成した主な機能 ・カテゴリ一覧ー表示 ・follow機能 ・いいね機能
カテゴリー一覧表示
Seeder を使用し カテゴリーに6つの初期データを入力 そこから派生しダミーデータ等を作成す る為、Factory機能、Faker機能を使用 カテゴリー一覧表示
カテゴリー一覧表示 テーブル
follow機能
follow機能 follow中のクラスメイトが投稿したス レッドを、特定ページでまとめて表示 できる。
意識した部分 followを押すとunfollowに変化 follow状態の友人にはfollowボタンを 表示させない、もしくはunfollowに変化
・Model内リレーションにおいて 主キー、外部キーの書き方を 勘違いをしていた 苦労した部分 Thread.php 外部キー (FollowssTable) 主キー (ThreadsTable)
follow機能 テーブル
いいね機能
意識した部分 ・いいねを押すとボタンが変化 ・ボタンの中でいいね数を表示 ・ボタンアイコンにFontAwesome使用
いいね機能 テーブル
個人的総合感想 ・Gitの扱いがまだ慣れ切れていない pull, fetch ,mergeやbranchの分け方等 ・環境を合わせるなど事前準備はしっかり行う ・外部キー設定などリレーションの知識を深めるこ とができた。
投稿機能解説
投稿データの関係 - thread, comment, responseで各々格納 - id -> thread_id ->
comment_id で階層型
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 …... スレッド/コメント/レスポンス
UI/UX - Bootstrap 4を使用 - 項目を選択しやすくしタブレットに配慮
<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より - 上部に階層ツリーを表示 項目毎にリンクを張り タブを選択で遷移する仕様に - 掲示板形式ページ全てが対象 スレッド コメント レスポンス と階層がやや深い為 階層リンクタブについて
<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より - タブレットで操作 文字にリンクを付けると…… 選択し難い、 明確な境界が表示されない、 誤タッチの原因となる ブロックで置くと…… 一目見てわかりやすい、 選択認識範囲が明確 タブレットでも操作しやすい スレッド投稿ボタンをバー型に
TechBoostで 学習したこと 水戸 博之
- 高度な技術を使用することに囚われない - わからないよりマネをする - エラーは一山毎に確認をして対処する - スキルアップの近道は作ること使うこと - 他者のコードは宝物庫
None