Help us understand the problem. What is going on with this article?

Web未経験から100日でリリース!初心者が「お笑い情報のアグリゲーションサイト」をつくりました【個人開発】

More than 1 year has passed since last update.

こんにちは、かしい(@rubys8arks)と申します。
SIerで働いていましたが、WEB業界への転職を目指しプログラミングの勉強を始めました。
データベースなどの知識は少しあったものの、Webアプリケーションの開発は今回が完全に初めてです!

作ったもの

お笑いライブの検索サイトです。日付やキーワードで東京近郊のお笑いライブを横断検索できます。
- ワラリー! - お笑いライブ検索(東京)


スクリーンショット 2018-11-13 18.58.19.png
スクリーンショット 2018-11-13 19.01.57.png
データはプレイガイドや劇場のサイトから自動でスクレイピングするほか、誰でもライブ情報を登録できるようになっています。
ワラリー!ビジネスモデル図.jpg
* ビジモ図鑑で配布されているキットをお借りしました。

サービスを作ったきっかけ

もともと「Walive!」というお笑いライブの検索サイトがあったのですが、そのサイトが2017年9月で突然閉鎖してしまったことがきっかけです。
せっかくお笑いファンの間で愛されているサイトだったのにもったいないなと思い、同じ機能(+α)を持った新しいサイトを作ろうと考えました。
スクリーンショット 2018-11-13 19.23.50.png

どういう技術で動いてるか

初心者なのであまり凝った技術は使っていません!

バックエンド

Ruby on Rails

webスクレイピング用にMechanizeのgemを使ってます。サービス層は悪!と言われてることもあるのですが、コントローラーやモデルが見やすくなるのでサービス層、ヘルパー層も使いました。

サーバー

Heroku

手軽にデプロイできるHerokuのサーバーを使っています。
アクセスできない時間ができるのが嫌だったので、Herokuの有料プランにしています。
- Hobby Dyno $7/月 (システムダウンタイムなし、独自ドメインのかんたん設定)
- Heroku Postgres Premium $9/月(1000万行まで保存できる)

Herokuの有料プランは使わずにもっと安くする方法もあるみたいなんですが、一旦は設定のしやすさを優先しています。

フロントエンド

jQuery

さんざん「jQueryはオワコン」と言われていますが、ぐぐったときに出てくる情報が多いので一旦jQueryで実装しました。
日付の選択をカレンダ(flatpickr)で行えるようにしたり、アンケート結果をアコーディオンでぬるっと表示させたりしています。
スクリーンショット 2018-11-13 19.32.12.png

fontawesome

みんな大好きfontawesomeです。
フォームのplaceholderにも使っています。

こだわったこと

UIとデザイン

「とにかく人に使ってほしい」という思いからUIとデザイン(特にライブの入力フォーム回り)にこだわりました。
実際にサービスへの反応も「デザインがいい!」というものが多く、ありがたい限りです。
CSSのフレームワークは使わず、TumblrのEstenテーマ、Twitter、InstagramなどのSNSを参考にしました。
スクリーンショット 2018-11-13 20.32.23.png
スクリーンショット 2018-11-13 20.32.33.png

  • URLを貼り付けたらogp情報を取ってライブの説明や出演者、画像などを自動入力できるように
  • 会場をセレクトボックスで選択できるようにしつつ、自由入力欄も作ったり
  • フォーム数が多くなると入力したくなくなるので、重要でない項目はモーダルで分けたり

自分にとってはだいぶ使いやすくなったのですが、フォームはまだまだ改善の余地があるなと思っています。

SNSログイン

お笑いファンはだいたいTwitterで情報収集しているので、既にアカウントを持っているであろうTwitterアカウントで登録・ログインできるようにしました。
知らないサービスにいきなり「メールアドレスで登録できます!」と言われてもユーザー登録しないなと思ったので、SNS連携としました。

いいね機能

旧サイト「Walive!」にはなかった機能として、ライブへのいいね機能を2種類実装しました。
ライブに行く人あるあるとして、自分のスケジュールを把握できずに同じ日の同じ時間帯のライブ(いわゆる『被り』)のチケットを間違えて買っちゃったりします。
そういうのを防止したいなと思い、すでにチケットを買った・予約したライブは『絶対いく』、まだ買ってないけど行けたら行きたいライブは『気になる』で管理できるようにしました。

Webサービスをつくってみた感想

最初の1ヶ月はプログラミングスクールでhtml/cssとruby/Ruby on Railsを学んだのですが、スタッフの「1ヶ月ですぐ作れるよ!」という甘い声をうのみにして痛い目にあいました…。
スクールを終えた知識で作ってみても「え、いいねボタン自動で切り替わらないの?(jQueryが必要)」、「孫モデルまでアソシエーションしてデータ取るのどうやるの?」、「pryなんて便利なgemがあったの?」などなどわからないことだらけ。
最初の頃、家で同じエラーに1週間くらいわんわん言ってた私に「macbookを買え、もくもく会に行け」と言いたいです。
Twitter、Slack、もくもく会などでド初心者の質問に親切に答えてくださった皆さん、本当にありがとうございました!!

エンジニアの方にはあまりお笑いライブに馴染みはないかもしれませんが、せっかく作ったのでちら見してもらえれば幸いです。
出演者ですぐ探せるので、「こないだテレビで見た芸人面白かったな」というときはぜひ使ってみてください!

ワラリー! - お笑いライブ検索(東京)

rubys8arks
お笑いライブ検索サービス (https://warally.info) を運営してます。 独学でRailsを学んでSIer➡Web系に転職。 イギリスへの海外移住に向けて準備中! 個人開発やUX情報を発信します。 同人誌で1000部売上の #個人開発がやりたくなる本 発売中 https://amzn.to/2xYSos5
https://blog.rubys8arks.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした