スクールでのチーム開発報告

概要

テックキャンプの最終課題にて作成したアプリケーションを紹介します。また本資料では、自身で実装した箇所、および開発を通じて得られた経験についても紹介します。

アプリケーション概要

フリーマーケットのアプリケーションを作成しました。

• 接続先情報
• • URL http://18.176.179.18/
  • ID/Pass
  • • ID: admin
    • Pass: admin2222
  • テスト用アカウント等
  • • 購入者用
    • • メールアドレス: test@gmail.com
      • パスワード: 1234567
    • 購入用カード情報
    • • 番号： 4242 4242 4242 4242
      • 期限： 12/20
      • セキュリティコード： 123
    • 出品者用
    • • メールアドレス名: aaa@gmail.com
      • パスワード: 0000000
• Githubリポジトリ
• • https://github.com/irifune-tatsuya/freemarket_sample_75a.git

開発状況

• 開発環境
• • Ruby/Ruby on Rails/MySQL/Github/AWS/Visual Studio Code
• 開発期間と平均作業時間
• • 開発期間：2020年5月19日(火)~2020年6月12日(金)
  • 1日あたりの平均作業時間：10
• 開発体制
• • 人数：3
  • アジャイル型開発（スクラム）
  • Trelloによるタスク管理

動作確認方法

• Chromeの最新版を利用してアクセスしてください。
• • ただしデプロイ等で接続できないタイミングもございます。その際は少し時間をおいてから接続ください。
• 接続先およびログイン情報については、上記の通りです。
• 同時に複数の方がログインしている場合に、ログインできない可能性がございます。
• Chromeの最新版を利用してアクセスしてください。
• 確認後、ログアウト処理をお願いします。

開発担当箇所/担当箇所一覧と確認方法

• 本番環境へのデプロイ
• 出品商品画像をAWSのS3へアップロード
• ユーザー情報及び住所情報の登録
  （ログアウト状態で新規会員登録を実施）
• ログイン、ログアウト機能
  （テストアカウントでログイン後、ログアウトをクリック）
• マイページのマークアップ
  （テストアカウントでログイン後、トップページヘッダー内のマイページをクリック）
• ユーザー情報及び住所情報の編集
  （テストアカウントでログイン後、マイページ内のリンクをクリック）
• 新規投稿商品一覧の作成
  （トップページ中程の「新規投稿商品」をクリック）
• ユーザーの出品中の商品一覧、売却済の商品一覧
  （テストアカウントでログイン後、マイページ→ページ内のリンクをクリック）
• クレジットカードの登録、削除
  （テストアカウントでログイン後、お支払い情報の確認/登録/削除）
• 登録済みのクレジットカード決済
  （テストアカウントでログイン後、商品選択→購入画面に進む→商品購入）
• クレジット未登録時のクレジット決済
  （マイページ→お支払い情報→削除→商品購入→クレジットを登録しないで購入）
• ヘッダーの商品検索
  （サイトトップの検索窓から検索を実行、商品名または商品説明から検索可能）
• パンくずリスト
  （トップページ中程の新規投稿商品一覧内の商品をクリック→ヘッダーに表示）
• コメント投稿機能
  （ログインし、新規投稿商品一覧内の商品をクリック→コメント投稿）
• お気に入り登録機能
  （ログインし、新規投稿商品一覧内の商品をクリック→お気に入りをクリック）
• マイページの追加実装
  （ログイン後、マイページ→お気に入り商品一覧、コメントがついた商品一覧）

各担当箇所の詳細

本番環境へのデプロイ


• 概要

• • AWSにアプリケーションをデプロイ

  • 自動デプロイ設定

• 担当

• • 新規railsアプリケーションの作成

  • Githubに登録後、開発メンバーをcollaboratorsとして招待

  • AWSのEC2を使用してデプロイ

  • Capistranoによる自動デプロイを設定

  • Basic認証を設定し、ログイン情報をチームで共有


出品商品画像をAWSのS3へアップロード


• 概要

• • 本番環境の出品商品画像をS3に保存する

• 担当

• • S3でバケット設定

  • EC2インスタンスとIAMのユーザーARNをバケットに紐付け

  • Gem ’fog-aws’のインストール

  • 出品商品画像を開発環境ではrails内のフォルダ、本番環境ではS3に保存されるようcarrierwave.rbを編集


ユーザー情報及び住所情報の登録

• 概要

• • ウィザード形式でユーザー情報の登録と住所情報の登録を行う

• 担当

• • Gem ’devise’のインストール

  • userモデル及びaddressモデルの作成、マイグレーションの実施

  • deviseによるusersコントローラーの作成

  • addressesコントローラーの作成

  • routes.rbに新規登録用のルーティングを設定

  • registrations_controller.rbの編集

  • フォーム入力用のビューページの作成

  • userモデルとaddressモデルの単体テストの作成と実施


ログイン、ログアウト機能


• 概要

• • ログイン用のビューを作成

  • ログアウト完了を通知するビューを表示

• 担当

• • ログイン用ビューの作成

  • ログイン状態によってヘッダーの表示変更

  • ログアウト完了ビューの作成

  • routes.rbにログアウト用のルーティングを設定

  • application_controller.rbにafter_sign_out_path_forメソッドを定義


マイページのマークアップ

• 概要

• • マイページのマークアップ

• 担当
• • routes.rbにマイページ用のルーティングを設定

  • users_controller.rbにshowアクションを定義

  • マイページのビュー作成

  • マイページのサイドバーを部分テンプレートとして切り出し


ユーザー情報及び住所情報の編集


• 概要

• • マイページ内のリンクからユーザー情報と住所情報を編集

• 担当

• • routes.rbに編集用のルーティングを設定

  • registrations_controller.rbにedit/updateアクションを追加

  • users_controller.rbにedit_doneアクションを追加

  • addresses_controller.rbにeditにedit/update/edit_doneアクションを追加

  • ユーザー情報編集用のビューを作成

  • 住所情報編集用のビューを作成

  • マイページのサイドバーに各編集用のリンクを設置


新規投稿商品一覧の作成


• 概要

• • トップページの新規投稿商品に最新の商品レコードを3件表示

  • トップページのアーカイバに商品レコードを3件表示

  • 新着順に商品が一覧表示されるページ

• 担当

• • topコントローラーの作成

  • top_controller.rbにindexアクションを追加

  • 作成済みのトップページに新規投稿商品とアーカイバの追加
  • 新規投稿商品一覧ビューを作成


ユーザーの出品中の商品一覧、売却済の商品一覧


• 概要

• • マイページからログインユーザーの出品一覧と売却済一覧を確認

• 担当

• • 出品一覧と売却済一覧のルーティングを編集

  • users_controller.rbにindex/sold_itemsアクションを追加

  • マイページのサイドバーにリンクを作成

  • 出品一覧と売却済一覧のビューページを作成


クレジットカードの登録、削除


• 概要

• • マイページからクレジット情報の登録と削除を行う

• 担当

• • payjpにアカウント登録

  • Gem ‘payjp’ インストール

  • cardモデルの作成、マイグレーションの実施

  • クレジットの登録/削除のルーティングを設定

  • cardコントローラーの作成し、create/destroyアクションを設定

  • payjpにクレジットを登録させるJavaScriptファイルをjQueryで作成

  • 登録フォームのビューを作成

  • クレジットの登録完了/削除完了のルーティングを設定

  • card_controller.rbにregistration_done/delete_doneアクションを設定

  • クレジット登録/削除完了ページの作成


登録済みのクレジットカード決済


• 概要

• • 登録したクレジットカードで商品を購入

  • 未ログインユーザーは商品を購入できない

  • 出品者は購入できない

  • 購入済み商品は購入できない

• 担当

• • クレジットの購入のルーティングを設定

  • card_controller.rbにbuy/payアクションを設定

  • 作成済みの購入確認画面のビューを条件により表示分岐

  • payアクションに対応した購入完了確認ビューを作成

  • cardモデルの単体テストの作成と実施

クレジット未登録時のクレジット決済


• 概要

• • クレジット未登録でもpayjpのモーダルでクレジット購入できる

• 担当

• • card_controller.rbにpayアクションを修正

  • 作成済みの購入確認画面のビューにモーダルの記述を追加


ヘッダーの商品検索


• 概要

• • ヘッダーの検索窓から曖昧語検索を行える

• 担当

• • 検索用のルーティングを設定

  • itemモデルにsearchメソッドを設定

  • items_controller.rbにsearchメソッドを設定

  • 作成済みのヘッダーに検索フォームを追加

  • 検索結果一覧のビューページを作成

  • searchメソッドの単体テストの実施


パンくずリスト


• 概要

• • ページヘッダー部分にパンくずリストを表示する

• 担当

• • Gem ‘gretel’のインストール

  • bleadcrumbs.rbを作成し、各ページのcrumbを作成

  • 部分テンプレートの_nav.html.hamlにパンくずを表示させる記述を追加

  • 各ページのヘッダー直下に部分テンプレートの呼び出しとcrumbを指定


コメント投稿機能


• 概要

• • 出品者とユーザーがコミュニケーションするためのコメント機能を実装

  • 出品者とそれ以外のユーザーでコメントのビューが変化する

  • 未ログインユーザーはコメントを投稿できない

• 担当

• • commentモデルの作成とマイグレーションの実行

  • コメントの投稿/削除用のルーティングを設定

  • commentsコントローラーを作成し、create/destroyアクションを設定

  • 商品詳細ページにコメント表示ビューを追加

  • 非同期通信用にコントローラーを修正

  • 非同期通信用のJavaScriptファイルをjQueryで作成

  • commentモデルの単体テストの作成と実施


お気に入り登録機能


• 概要

• • 出品商品に対するお気に入り登録機能の実装

  • お気に入り登録時にビューが変化

  • 未ログインユーザーはお気に入り登録ができない

• 担当

• • favoriteモデルの作成とマイグレーションの実行

  • お気に入り登録/削除用のルーティングを設定

  • favoritesコントローラーを作成し、create/destroyアクションを設定

  • 商品詳細ページにお気に入り登録の有無で分岐するビューを追加

  • 非同期通信用にコントローラーを修正

  • 非同期通信用のcreate.js.hamlとdestroy.js.hamlを作成

  • favoriteモデルの単体テストの作成と実施


マイページの追加実装


• 概要

• • コメントした数とされた数を表示

  • コメントがついた商品一覧のリンクを作成

  • お気に入り商品一覧のリンクを作成

  • 各ページの商品一覧にお気に入り数を表示

• 担当

• • 実装に合わせてusers_controller.rbを修正

  • コメントがついた商品一覧/お気に入り商品一覧用のルーティングを設定

  • マイページのサイドバーにリンクを設置

  • コメントがついた商品一覧/お気に入り商品一覧用のビューを作成

  • コメント数が表示されるようにマイページのビューを修正

  • 各ページの商品一覧ビューにコメント数を表示させるように修正

  • 修正したビューのコントローラーを修正

開発を通じて得られた知見

①チームとして工夫を行った点

　アジャイル開発ではチームメンバーのタスクが見えにくくなることが予想されたため、メンバー間のコミュニケーションについて意識しました。具体的には5つあります。
　1つ目は、休日を含み、毎日10時と17時にZOOMミーティングを開催し、タスクの進捗や行き詰まっている箇所の問題点について共有した点です。緊急かつ重要度の高いタスクの開発が滞っていた場合は、チームメンバーで話し合い、一緒に検索したり、画面共有しながらエラー箇所の解決を行いました。これによりタスクを持っていないメンバーも実装について理解を深めることができました。
　2つ目はプルリクエストの際にコンフリクトが発生した場合は、些細なものでも必ず画面共有しながら解消させた点です。これを徹底するために機能の実装が完了したメンバーは、プルリクエストの原稿や画像データを事前に用意した上で、チーム内コードレビューを依頼し、チームの合意が取れた段階でプルリクエストを行うように手順を工夫しました。
　3つ目は、週に3回は顔を合わせて開発を行った点です。作業スペースとして教室が利用できるのは週2回までだったので、残りの1回は曜日や場所を決めて集まり、コミュニケーションを取りながら開発を進めました。
　4つ目は、30分以上悩んだらメンバーに相談するという点です。エラーが発生した場合は、まずは30分は原因を調べたりネット検索し、どうしてもわからないときはメンバーに協力を仰ぐことを徹底しました。次戦に時間を決めておくことで他のメンバーの仕事を必要以上に滞らせないように配慮しました。
　5つ目は、同じアプリを開発する他のチームとの進捗確認を毎週水曜日の昼休みに実施した点です。互いの進捗を把握することで、モチベーションが高まり、自分のチームにないアイディアを貰うことができました。またチーム間で同じ機能を実装しているメンバー同士が技術情報の共有などの交流が自然と生まれ、スムーズな開発につながったと考えております。
　結果的にコミュニケーションに割く時間が増えたものの、開発の進捗は少ないメンバー数の割に早いと評価され納期に十分間に合わせることができました。

②個人として工夫を行った点

大きく2点あります。
　1点目は、頻繁に利用するビューを共通化した点です。商品一覧表示やユーザー情報や住所の登録フォームのhamlのセレクタ名やscssファイルを共通化することで、開発効率の向上とサイトのテイストを揃えました。
　2点目は、クレジット情報を未登録であってもすぐに購入できるようにPayjpのモーダルを追加した点です。フリマアプリで取り扱う商品は1点物が多く、またカート機能もないので、その場で購入できない場合はユーザーの利便性を損なってしまいます。利便性を損なわないためにクレジット未登録であってもクレジット決済ができるように工夫しました。

①チームとして苦労した点

　コミュニケーションツールを増やしたせいで、重要な連絡が伝わらないということがありました。チームでのコミュニケーションには従来、Slackを使用しておりましたが、LINEも導入しました。これにより気軽にコミュニケーションを行う機会が増えたのですが、チームミーティングを欠席する旨をSlackに連絡した際にそれが伝わらず、メンバーを待たせてしまうという事態が発生しました。大きなトラブルはなかったものの、改めてチーム内でコミュニケーションツールの使い分けについて話し、以降トラブルは発生しなくなりました。

　この経験を活かし、今後はコミュニケーションの密度だけでなく、手段や伝え方にも配慮した開発が行えるようになりたいです。スクールで開発を共にしたメンバーとは引き続き、新しいプロジェクトを立ち上げる予定です。その際にはツールの棲み分けだけでなく、定型文を使った報告・連絡・相談方法までも明確に定めて、より効率の良い開発ができるように工夫します。

②個人として苦労した点

クレジットカードの登録機能を1からjQueryを使って書き直した点です。クレジットの登録に必要なJavaScriptファイルの記述を調べたところ参考記事の多くはJavaScriptとjQueryを混在させたもの多く読みにくかったため、1からjQueryに書き換えました。
　結果、参考記事の中に不要な記述を見つける事ができました。具体的には、コントローラーに送られるparamsにユーザーが入力したクレジット情報が含まれないようにわざわざremoveAttrが記述されていました。
　しかし、paramsはハッシュのようにキーバリューストア形式でデータをやり取りしているので、そもそもビューにname属性を設定なければ解決できると考えました。pry-railsで確認したところ問題なくデータが送られていたので、これらの記述を削除することができました。
　最終的にJavaScriptファイルの記述量は3分の2程度にまで抑えられ、ビューも記述も減らすことができたものの約2日間を費やすことになり、苦労しました。
　この経験から、今後も単に参考コードをまるごと写すような開発は避けたいと考えるようになりました。参考コードを理解できるように努め、必要または不要な記述はなにかを見極められるようになりたいです。これらが達成できるように現在は、paizaに登録し、スクール終了後も言語の基礎的な学習を繰り返しています。

以上