Kentaro Takahashi

Katsushige Shima

谷口英雄

メルカリのコピーサイト

設備管理アプリケーション

Yoshihisa Onuki

Takahiro Kubo

アマゾンウェブサービスジャパン合同会社, Developer Relations Machine Learning

Makoto Kataigi

株式会社プレイド, エンジニア

Accomplishments/Portfolio

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

アプリケーション情報
アプリケーション概要
フリーマーケットのアプリケーションを作成しました。
接続先情報
URLhttp://18.178.102.237/
ID/Pass
ID: fm
Pass: 67a
テスト用アカウント等
購入者用
メールアドレス: test01@gmail.com
パスワード: test0101
購入用カード情報
番号 : 4242424242424242
期限 : 12/20
セキュリティコード : 123
出品者用
メールアドレス名: test02@gmail.com
パスワード: test0202
Githubリポジトリ
https://github.com/hideo-0103/freemarket_sample_67a

開発状況
開発環境
Ruby/Ruby on Rails/MySQL/Github/AWS/Visual Studio Code
開発期間と平均作業時間
開発期間：1/29 ~ 2/20
1日あたりの平均作業時間：10h
開発体制
人数：4人
アジャイル型開発（スクラム）
Trelloによるタスク管理

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

・商品出品機能(バックエンド、フロントエンド)
商品出品者用アカウントでログイン後、トップページ右下にある出品ボタンを押していただくと出品ページへ進みます。
画像(1枚から10枚まで)を選択、必須項目を入力いただいたのちに「出品する」を押していただくと出品されます。

・商品編集機能(バックエンド、フロントエンド)
すでに登録されている情報を表示しており、画像の差し替え、削除などの任意の箇所を変更することができます。

・部分テンプレート(ヘッダー)フロントエンド
・部分テンプレート(フッター)フロントエンド

・カテゴリー機能実装
　ancestryというgemを用いてカテゴリー一覧をDBに登録し、商品を出品する際に商品と紐付けしました。
・単体テストのテストコード自動生成プログラム
　rubyを用いてテストするモデル名とカラム(配列にしてある状態のもの)をメソッドの引数に渡してターミナル上で実行すると、テストコードを生成するプログラムです。

各担当箇所の詳細
◉商品出品機能(バックエンド、フロントエンド)
・商品を出品する際に表示するページ。

・active_hashというgemを用いて発送元の地域、商品の状態、配送料の負担、発送までの日数のセレクトタグを実装。

・親カテゴリーを選ぶと親カテゴリと紐づいている子カテゴリを表示するセレクトタグ、子カテゴリを選ぶと紐づいている孫カテゴリを表示するセレクトタグをjqueryとajax通信を用いて表示するように実装。
孫カテゴリーまで表示されている状態で子カテゴリ、親カテゴリを変更すると下のカテゴリの表示が変更されるように実装。

　・画像を10枚まで投稿できるフォーム
　・画像投稿フォームを常に一つのみ表示する
　・10枚投稿された時点で投稿フォームを非表示
　・画像を削除したら投稿フォームが出現
　・投稿されている画像の枚数に合わせて投稿フォームのサイズを変更
　以上の機能をjavascriptを用いて実装。

・必須項目が未入力の状態で出品ボタンを押すとDBに保存されずに出品ページに戻し、未入力項目を示すエラーメッセージを表示するように実装。


◉商品編集機能(バックエンド、フロントエンド)
・すでに登録されている情報を表示しました。
・出品同様に未入力の必須項目があればエラーメッセージを表示しました。
・登録されている画像の下の編集ボタンを押すと画像の差し替え以上の機能を実装しました。

◉部分テンプレート(ヘッダー、フッター)フロントエンド
・商品出品ページ、商品編集ページ、ユーザー登録ページで共通で使用するヘッダー、フッターの作成しました。

◉カテゴリー機能実装
・ancestryというgemと親、子、孫カテゴリーをまとめて登録できるseedファイルを作成し、それを用いてカテゴリー一覧をDBに登録しました。

◉単体テストのテストコード自動生成プログラム
・rubyを用いてテストするモデル名とカラム（配列にしてある状態のもの）をメソッドの引数に渡してターミナル上で実行すると、テストコードを生成するプログラムです。

開発を通じて得られた知見
工夫した点
①チームとして工夫を行った点
◉各メンバーが担当する機能のフロントからバックエンドまでを一貫して担当する。
・一人が一機能をフロントからバックエンドまで担当することにより、担当している機能の全体を把握できている状態になることによってエラーが起きた時の対処がスムーズに行えました。

◉毎日朝、夕にデイリースクラム。
・各メンバーの困っている部分を共有することでその部分に関して得意な人が対処を手伝い、解説をすることで進捗も遅れず、知識の共有を行うことができました。

②個人として工夫を行った点
◉担当する箇所が他のメンバーと比べると少なかったので早めに作業を進める。
・他メンバーのDOM操作、データの引っ張り方に関する問題の解決サポートをしました。
・他チームの同じ機能を担当している方のお手伝いをすることによって自分とは違ったロジックの組み方、わかりやすいコードを書くことの重要性を学びました。

苦労した点
◉画像投稿フォーム、カテゴリ選択フォームのJavaScriptでのDOM操作
・HTMLの構造をしっかり確認して生成するHTMLコードを用意しないとビュー崩れが起きて　しまいます。
・使っているフレームワークで自動生成されるHTMLタグの特性を理解することの重要性を学びました。
　
◉JavaScriptでのクリックイベントも記述を間違えると無限ループが起きる
・イベントの発火箇所の選定が重要であることを学びました。
・input(file)をクリックイベントで操作する場合、親要素をクリックしたら発火するようにし　　てしまうと無限ループが起きやすいことを学びました。


◉値の取得ができない、JavaScriptで生成したフォームで送信した値が想定と違っていてエラーが起きる。
・フォームのどの部分がパラメーターとして送られるのか、Railsで自動生成されるフォーム　がどのように値を受け取って生成されるかと学びました。

◉外部ライブラリが本番環境で読み込まれない。
・ローカル環境で動作確認後本番環境で動作確認をすると外部から読み込んでいるcssファイ　ルが読み込まれず、原因を調査するとvender/assets下に置きヘルパーに記載することで対処　ができるということを学びました。

谷口英雄

谷口英雄

Connect to learn more

Ambition

Please log in and connect to see more.

Experience and education

Please log in and connect to see more.

Skills

Accomplishments/Portfolio

Related Profiles