1
/
5

TECH:CAMP　最終課題説明文

菊池 雅世
菊池 雅世
管理部
on 2020-12-26

概要

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

アプリケーション情報

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

  • 接続先情報
    • URL http://3.114.69.93/
    • ID/Pass
      • ID: 79b
      • Pass: fleamarket_sample_79b
    • テスト用アカウント等
      • 購入者用
        • メールアドレス: buyer_user@gmail.com
        • パスワード: buyer_user
      • 購入用カード情報
        • 番号： 4242424242424242
        • 期限： Dec. 03 2022 00:00:00 GMT+0900 (日本標準時)
        • セキュリティコード：456
      • 出品者用
        • メールアドレス名: seller_user@gmail.com
        • パスワード: seller_user
  • Githubリポジトリ

開発状況

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

動作確認方法

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

開発担当箇所

担当箇所一覧と確認方法

４つの箇所を担当させていただきました。

・DB設計

README.mdにてご覧いただけます。

・トップページ【マークアップ】

http://3.114.69.93/にアクセスするとご覧いただけます。

・カテゴリ機能【サーバサイド】

トップページ右下の出品ボタンをクリックすると出品画面http://3.114.69.93/items/newに遷移します。出品画面のカテゴリの選択欄でご覧いただけます。

・商品情報編集【サーバサイド】

出品者アカウントでログイン後ピックアップカテゴリー内に表示されている商品をクリックすると商品詳細ページに遷移し、下部に「編集する」ボタンがありますのでクリックすると商品出品ページを編集することができます。

各担当箇所の詳細

【DB設計】

概要：必要なテーブル、カラムの選定、アソシエーションの決定

担当内容
・ER図の作成
・各テーブルの作成
・モデルへのアソシエーションの記述

【トップページ】

概要：Webアプリケーションサイトを使用するユーザーが、トップページを見てサイト全体の内容などを把握しやすくするよう、トップページのコーティングを行った。

担当内容【フロントエンド】

・haml,scssを使用しトップページのマークアップ作業
・ヘッダー、メイン、フッター、出品ボタンの部分テンプレートファイルをrender呼び出しを記述し
　index.html.hamlファイルを作成
・BEMの考えでCSS作成し、各部分テンプレートに対してscssファイル、mixinファイルを作成


カテゴリー機能

概要：関連性のある商品をグループ化することでユーサビリティが良くなるので、商品にカテゴリー機能が紐づくよう実装した。

担当内容【サーバーサイト】

・”ancestry"というgemを使用し、カテゴリー機能を追加
・category.rbにancestry明示
・seedファイルに親、子、孫ごとにカテゴリーを記述し、DBへレコードとして登録
・Ajaxで動く子、孫カテゴリーのアクション用ルートを作成
・JSONデータへの変換記述
・親、子、孫の選択時の動作を設定
・親セレクトボックスを表示
・親、子、孫のインスタンス変数を定義
・ビュー呼び出し記述（初期値の親カテゴリーボックスのみ記載）


【商品編集機能】

概要：商品を投稿したユーザーだけが、商品の情報を編集することができる編集機能の実装を行った。

担当内容【サーバーサイド】

・編集画面で登録情報の呼び出し及び登録ボタンをクリックすると、情報が更新されるようコントローラ
ーへedit、updateメソッドを定義
・画像やカテゴリーの情報など、すでに登録されている商品情報は編集画面を開いた時点で表示されるよ
　う、_form.html.hamlを編集ページにrenderした。
・画像の差し替えは一枚ごとにできるように、画像削除機能を実装。編集画面遷移時に表示される登録済
　みの画像と追加する画像それぞれを削除する場合、対象となるinputタグが異なるため、JavaScriptで指
　定のinputタグをそれぞれ紐付けし、プレビューの削除ボタンをクリックした際に意図した画像データが
　画面上から削除されるよう実装。
・何も編集せずに更新をしても画像無しの商品にならないよう、編集画面の上部に戻るようエラーハンド
　リングを行った。
・登録していた画像が削除された場合、DB内のレコードを削除する必要があるため、paramsから更新時に
　送られた画像のidを抽出し、DB内の画像idと照合させDB内のレコードに削除が必要なものに対して
　destroy_allを使用しレコードを削除するよう実装
・商品画面に合わせてhamlファイルやscssファイルを編集し、UIを調整。


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

【工夫した点】

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

・slackを活用した情報共有の徹底
基本的には，コアタイムを決めて作業を行いました。しかし，チームメンバーそれぞれが仕事をしながらの開発だったため，作業時間に多少の差が生じてしまいました。MTGの時間も定期でとりにくい時期もあったので，全体に関係する知識や問題点等は，必ずslackに書き下ろすことを徹底して行いました。特に，問題点だけではなく，チーム内で参考になりそうな参考記事等を積極的に共有したことにより，知見が深まりました。

・トラブル解消時のzoom活用
トラブルが生じた際にはzoomを使ってチームメンバーで作業確認を行い，みんなで解決にあたるようにしました。コンクリフトの解消に向けては，必ず開発者とその他メンバー複数人で確認をし合いながら，解決に向けて作業を行いました。

・作業分担
作業分担は，１つのタスクが終わった人から次のタスクを選ぶようにしました。これによりフロントエンドやバックエンドにこだわらず様々な実装に挑戦できました。また，互いの負担軽減に務めることができました。

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

・DB設計
ER図製作においてオンライン作画ツール（cacoo）の使用を提案し，完成した図をチーム内で確認，修正しあう作業をスムーズに行えるようにしました。

・トップページ
トップページのマークアップの際は，カリキュラムを何度も復習すると共に，作業に関連したブログを読んだり，書籍を読んだりして基本的な知識固めを行いました。CSSについての知見がずいぶん深まりました。

・カテゴリー実装や商品編集ページ
より知識を深めたいという思いから，JavaScriptやJQueryを積極的に活用しました。特に商品編集ページの，出品アイテムのボタンや写真の表示サイズ等は，デザイン性や機能性を少しでも高められるように意識しながら作業を行いました。

【苦労した点】

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

・DB設計
DB設計時に時間をかけました。しかしながら，制約や関係性が今一つ理解しきれないまま実装に入ってしまったため，後から修正する必要が生じてしまいました。よりシンプルなものにしていこうとチーム内で検討しましたが，具体的なイメージをより深めながらDB設計を行うとより作業がスムーズだったのかと思います。

・互いの開発の関係性
自分が開発している箇所が，他のチームメンバーの開発箇所に干渉し，影響を及ぼす場面が多くありました。そのため，自分が担当箇所の開発で手一杯になってしまうと，他のチーム　メンバーの作業に気が回らず，スムーズに進まなくなってしまうことがあり反省しています。情報共有はSlackを活用して十分に行っていましたが，より互いの開発の関係性を意識しながら作業を進める意識をもつことが大切だと感じました。
また，チームメンバーの誰かが記述したコーディングを基に，新たな実装を進める場面もあるので，可読性が高く，わかりやすいコーディングを行うことの大切さを学びました。

・GitHub
コードレビューを行う際，作業の意図や工程が明確である細かいログを残しておくことの重要性を感じました。自分では理解していることでも，チーム内で内容を十分に共有し合う際に説明が生じてしまう場面もあり，時間のロスに繋がってしまいました。一過性のものであるとしても，コードレビューしやすいログを丁寧に残していくことが，速やかなチーム開発には必要不可欠だと感じました。


②個人として苦労した点

・DB設計
１人のユーザーに対する個人情報の設定が多く，また，出品者と購入者のテーブル同士の関係やクレジットカードの登録など，初めて挑戦する内容ばかりだったので，イメージを掴むのに時間がかかり，苦労しました。cacooで作成したER図をチーム内で共有し，疑問点は確認してもらうことで，テーブル及びカラムの精選をすることができました。

・トップページ【マークアップ】
マークアップでは、見本ページや本物のフリマアプリのページを，検証ツールを使って参考にしても，HTMLやCSSが自分の思い描いていた挙動と異なる結果になることが多く思うとおりに作成できないことがありました。カリキュラムや参考書籍をとにかく読んで基本的な　知識を確認し，自分なりにコードを記述することで，少しずつ思うようなビューが作成できるようになりました。
また，AppStoreとGooglepayのボタンのサイズ調整に苦慮しました。一見同じサイズ感に見えた２つが，調べていくことにより，サイズ感や使用規定に大きな差があることを知り，知識が深まりました。この差異を解消するための作業に時間がかかりました。

・カテゴリ機能【サーバサイド】
サーバーサイドの作業そのものに苦手意識があったため，少しでもスキルを身に付けたいと思い立候補しました。しかし実際は，親カテゴリーから子カテゴリー，孫カテゴリーを呼び出す作業が想像以上に難しく感じ，開発時間がずいぶんかかってしまいました。Qiitaの参考記事を参照したり，検証ツールで挙動を確認したりすることにより，少しずつ作業を進めました。

・商品情報編集【サーバサイド】

出品機能を基本に編集ページの作成を行いましたが，出品機能を自分が担当したのではなかったため，コードの理解に想像以上に時間がかかってしまいました。

特に苦労をしたのは，画像に関する調整についてです。出品機能では画像の削除が必須ではなかったため，どちらにも削除機能が実装できるように作業を行いましたが，なかなかうまく反映されず苦慮しました。Javascriptのコーディングを繰り返し確認，試行することで少しずつ形になりました。しかし，成功したと思って別画像で再度試すと，挙動が変わってしまうことも多々あり，作業が進んだ以上に後戻りし，また進んでも後戻りし……ということが続きました。焦りも生じましたが，チームメンバーやメンターの方のフォローやアドバイスにより，少しずつ実装を進めるました。

一見すると同じ見た目の出品機能と編集機能ですが，内実は大きく異なることを改めて理解することができました。同様の開発を行う際には，差異を正しく理解した上で，少しずつ実装を進めることが良いと学ぶことができました。


以上になります。

2 Likes
2 Likes