【Conefan】チケットフリマアプリ解説！

アプリ概要

行けなくなったライブやフェスのチケットを簡単に出品したり、購入ができるアプリです。イメージしにくい方はメルカリのライブやフェスのチケットverと思ってもらえればOKです。ただし、メルカリとは購入するフローなどが違ってきます。詳細は後述します。

下記URLで公開中です😄
https://conefan.com

このアプリを作った背景

アイドル好きの友人との会話で、転売されるチケットを見て転売ヤーに対して嫌悪感を感じるという話をし、「転売しづらい体温を持ったフリマサービスが作れれば!!」という想いから作成しました。
既存のサービスとの違いは下記の通りです。

1. チケットの出品者が誰に譲るかの決定権を持つ
2. コミュニケーションがとりやすい機能や仕組み

1. チケットの出品者が誰に譲るかの決定権を持つ

上図の通りですが、通常のチケットフリマサービスでは以下のようなフローでやりとりが行われるかと思います。

既存サービス
(1) 出品者がチケットを出品する
(2) 行きたいチケットのページで「購入するボタン」を押し、決済が行われる

Conefanでは体温のある双方向のやりとりを狙い、フローを一つ増やしました。

Conefan
(1) 出品者がチケットを出品する
(2) 行きたいチケットのページで「購入希望ボタン」を押し、出品者に購入したい意思を伝える
(3) 購入者は購入希望リストを見て、誰に譲るかを決定し、そこで決済が行われる

これによる利点は、出品者は濃いファンや友人などに対してチケットを譲ることができます。結果として、出品者は喜んでもらうという満足感を得ることができ、本当に行きたい人にチケットが渡ることになると考えました。

2. コミュニケーションがとりやすい機能や仕組み

体温を持ったプラットフォームを目指して行きたい!!機能(いいね機能)やコメント機能、メッセージ機能、フォロー機能などを入れています。また、プロフィールを書くこともできるので、自分がどういう人なのかを知ってもらうこともできます。SNS連携も導入予定です！

機能一覧

	機能	Gem	使用技術
①	ログイン機能	devise	-
②	チケット出品機能(CRUD)	×	-
③	リアルタイムメッセージ機能	×	ActionCable/WebSocket
④	フォロー機能	×	Reactで一部をSPA化
⑤	購入機能	payjp	PAY.JPのAPI使用
⑥	行きたい!!(いいね)機能	×	Ajax通信
⑦	コメント機能	×	Ajax通信
⑧	お知らせ機能	×	-
⑨	ページネーション機能	will_paginate
⑩	簡単ログイン機能	×
⑪	ハンバーガーメニュー	×	CSSのみで実装
⑫	購入希望機能	×
⑬	画像アップロード機能	CarrierWave
⑭	クレジットカード登録・削除機能	×
⑮	マイページ機能	×

1. リアルタイムメッセージ機能

機能概要
チケットの出品者に対してダイレクトメッセージを送信することができます。(ログインユーザのみ可能)

工夫したこと

• ActionCableの機能を使ってリアルタイムチャットが可能

→ 体温を持ったプラットフォームを目指しているので、メッセージ機能はリアルタイム通信ができることにこだわりました。また、違和感なく使用してもらうためにLINEライクなUIにし、直感的な操作ができるようにしました。技術的にはRails 6.0のActionCableの機能を使いWebSocketによる通信を使いました。

• メッセージが多くなると表示するのにサーバー負荷がかかるため、メッセージが30件以上ある場合は最新の30件までを表示するようにし、最上部までスクロールすると次の30件を取得するようにしました。

2. フォロー機能

機能概要
ユーザをフォローすることができます。(ログインユーザのみ可能)

工夫したこと
ユーザ同士のつながりを作るという意味で重要だと思ったフォロー機能を実装しました。勉強も兼ねて素早く画面遷移できるよう、フォローボタンのコンポーネントをReactを使って実装しました。

3. 購入機能

機能概要
出品されたチケットを購入することができる(ログインユーザのみ可能)

工夫したこと

• 既存のフリマサービスよりフローが増えているので、シンプルな構成になるよう意識して作りました。

→ 購入希望する際、カード登録画面に行かずにその場で登録できるようにしました。技術的にはPAY.JPのAPIの機能を使う形で実装しました。(クレジットカード情報はマイページから変更、登録も可能です)

4. UI/UX

工夫したこと
UI/UXにこだわりを持って作成しました。
初めてアプリを開発した際、デザインが固まっていないまま作り始めてしまい、後で膨大なやり直し作業が発生したことから、ツールを使って画面設計をしてから開発に取り掛かりました。その結果、やり直しが減り納得の行くUI/UXを作ることができました。(使用ツールはFigma)
デザインが固まっていないまま作り始めてしまい、後で膨大なやり直し作業が発生

https://www.figma.com/file/yszmEtlQLlC4WlutvU1mBg/Design-System?node-id=106%3A96

5. チケット投稿機能

機能概要
チケットを出品することができる(ログインユーザのみ可能)

工夫したこと
ユーザが投稿の際に苦に感じない、直感的でシンプルな投稿フォームを意識して作りました。

→ 過去に投稿がある公演は選択肢から選択できるようにしました。

→ ユーザがどの項目を入力できていないかすぐに分かるよう必須項目が入力されていない場合、項目一つ一つに対してメッセージが表示されるようにしました。

6. 行きたい!!機能

機能概要
いいなと思ったチケットに「行きたい!!」ボタンを押すことができる(ログインユーザのみ可能)

工夫したこと

• Ajaxを使って非同期で実装
• 多くのユーザが行きたい!!と思っている人気のライブやフェスがひと目で分かり、購入のきっかけになる機能は必要だと考え実装しました。

7. コメント機能

機能概要
出品者に聞きたい情報などがあるときにコメントを残すことができる(ログインユーザのみ可能)

工夫したこと

• Ajaxを使って非同期で実装
• 出品者に対しての質問や補足情報などをコメントで残せた方がいいと考え実装しました。

その他ポイント

• 他メンバーがジョインした際の開発環境の統一のためDocker / docker-composeを用いて開発 (Dockerという技術に興味があって使ったのは秘密)
• System Specを含めたテスト項目を130個以上書き、保守性を高めた
• SQLインジェクション対策のためエスケープ処理を行うなどセキュリティー対策を行った
• GithubでIssueやプルリク、タグ機能を使ったり、developブランチを作りまとまった機能ができてからmainブランチへマージするなど実務での開発を意識
• Circle CIでpushするたびに自動テストが走り、結果をSlackで通知するよう設定し保守性を高めた
• CloudWatchによりEC2の使用メモリを監視し、監視体制を構築
• mainブランチにmerge時には自動でデプロイまでできるようCI/CDパイプラインを構築
• 実際にアプリを使用してもらい、改善点や不具合、意見などのフィードバックをもらった。ただいま改善中です（汗）

使用技術等

フロントエンド

• HTML、CSS
• Bootstrap 4.3.1
• SCSS
• JavaScript、jQuery、Ajax
• React

バックエンド

• Ruby 2.7.1
• Rails 6.0.1

開発環境

• Docker/Docker-compose
• MySQL2

本番環境

• AWS (EC2、RDS for MySQL、Route53、ELB、S3、CloudFront、CloudWatch)
• Nginx
• Unicorn
• Capictrano
• Circle CI
• インフラ構成図

テスト

• Rspec (単体／結合） 計130以上
• Capybara
• FactoryBot

その他使用技術

• 非同期通信 (コメント、行きたい!!、購入希望など各種ボタン、DM機能等)
• ActionCable
• レスポンシブ対応
• Rubocop
• HTTPS接続
• チーム開発を意識したGitHubの活用 （マイルストーン、イシュー、プルリク、マージ）
• PAY.JPのAPIを使ったクレジットカード決済
• ER図&テーブル定義

最後に

以上でチケットフリマアプリの紹介記事を終わります。
ここまで読んでいただきありがとうございました。
エンジニアの実務経験がほとんどなく至らない点は多々あると思いますが、できるだけ世に出せるサービスを目指し作成しました。何かご意見や質問等あればコメントお待ちしております。

参考

・ソースコード https://github.com/shun0211/live_share
・Conefan　https://conefan.com
・Twitter　https://twitter.com/sakai_1910