かしいさんのはじめて個人開発

お笑いライブ検索サイト「ワラリー!」を運営しているWEBエンジニアです。超ド初心者がつまづきがちな、個人開発にまつわるあれこれを書いていきます。

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

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

作ったもの

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

f:id:bitokosubcul:20200326220426p:plain:w300f:id:bitokosubcul:20200326220440p:plain:w300
データはプレイガイドや劇場のサイトから自動でスクレイピングするほか、誰でもライブ情報を登録できるようになっています。
f:id:bitokosubcul:20200326220305j:plain
* ビジモ図鑑で配布されているキットをお借りしました。

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

もともと「Walive!」というお笑いライブの検索サイトがあったのですが、そのサイトが2017年9月で突然閉鎖してしまったことがきっかけです。
せっかくお笑いファンの間で愛されているサイトだったのにもったいないなと思い、同じ機能(+α)を持った新しいサイトを作ろうと考えました。
f:id:bitokosubcul:20200326220503p:plain

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

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

バックエンド

Ruby on Rails

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

サーバー

Heroku

手軽にデプロイできるHerokuのサーバーを使っています。
アクセスできない時間ができるのが嫌だったので、Herokuの有料プランにしています。

  • Hobby Dyno $7/月 (システムダウンタイムなし、独自ドメインのかんたん設定)
  • Heroku Postgres Premium $9/月(1000万行まで保存できる)

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

フロントエンド

jQuery

さんざん「jQueryはオワコン」と言われていますが、ぐぐったときに出てくる情報が多いので一旦jQueryで実装しました。
日付の選択をカレンダ(flatpickr)で行えるようにしたり、アンケート結果をアコーディオンでぬるっと表示させたりしています。
f:id:bitokosubcul:20200326220530p:plain:w300

fontawesome

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

こだわったこと

UIとデザイン

「とにかく人に使ってほしい」という思いからUIとデザイン(特にライブの入力フォーム回り)にこだわりました。
実際にサービスへの反応も「デザインがいい!」というものが多く、ありがたい限りです。
CSSのフレームワークは使わず、TumblrのEstenテーマ、Twitter、InstagramなどのSNSを参考にしました。
f:id:bitokosubcul:20200326220547p:plain:w300f:id:bitokosubcul:20200326220557p:plain:w300

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

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

SNSログイン

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

いいね機能

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

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

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

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

※この記事は2018年11月13日にQiitaで初出した記事をはてなブログに移転したものです

【Ruby】Seleniumでスクレイピング: あるあるエラー5選

f:id:bitokosubcul:20190515051101p:plain
Webスクレイピングに役立つツール「Selenium」を使うときにおこりがちなエラー5選をまとめました。

  • はじめに
  • Seleniumの使い方
  • Seleniumを使うときのあるあるエラー5選
    • 1. ブラウザとSeleniumを動かすツールのバージョンが違う
    • 2. Webページを開けなかった
      • ダメな例:変数で渡す
      • OKな例:文字列をそのまま書く
    • 3. ページ内の要素をうまく取得できなかった
      • nokogiriの場合:CSSセレクタで要素を指定
      • seleniumの場合:要素の種類+要素名(HTMLタグ、CSSのクラス名など)で要素を指定
    • 4. ページ上にないSelenium要素に対して操作をしている
      • ダメな例:ループの2回目以降で変数が空になってしまっている
      • OKな例:ループ処理の中で要素を取得し直す
    • 5. Rubyのコマンドが入力できなくなる
続きを読む

Webサービスやアプリのマネタイズのコツとは? #sdevtalks

f:id:bitokosubcul:20190330162840p:plain
「サービス開発者」の勉強会 #sdevtalks のマネタイズ回に参加したまとめです。

  • お金の見える化サービス『マネーフォワードME』のマネタイズの話
    • マネーフォワードMEのマネタイズ
  • 個人開発(趣味開発)のマネタイズ
    • マネタイズの手段
    • マネタイズするときの注意
    • 個人開発でマネタイズした事例
    • 個人開発でマネタイズするときの注意
  • ブラウザアプリ「Smooz」のマネタイズ
    • ブラウザアプリ『Smooz』のマネタイズ方法
    • マネタイズのコツ
    • わかったこと
  • 低カロにマネタイズ〜マッチングアプリ「Ice」
    • マッチングアプリ『Ice』のマネタイズ
    • マネタイズのコツ
    • まとめ
  • LT:Scouty この1年で実施したサービスの価格最適化のお話
    • 価格変更によるマネタイズ最適化
  • 全体の感想
続きを読む

人で賑わう!Slackコミュニティのメンバーリストの作り方

f:id:bitokosubcul:20190318154628p:plain
オンラインのSlackコミュニティを運営するにあたって、みんなの交流を促進する「メンバーリスト」の作り方と注意点をまとめました。

  • Slackコミュニティにおけるメンバーリストの意義
  • メンバーリストの条件
  • メンバーリストに書く情報
  • メンバーリストを作るツール
  • メンバーリストの更新方法
  • メンバーリストの周知方法
  • Twitterのリストも作ろう
  • まとめ
続きを読む

#技術書典 6のサークル配置をTwitterにある分でまとめてみたよ(204/全455サークル)

技術書典6の配置が発表されたので、Twitterに出ている分でまとめてみました。
技術書典6の配置は以下のとおり。全455サークルが参加する予定です。(2019.03.14 23:30更新 3/17(日)以降は公式のWebカタログをご参照ください)
※ジャンルはサークルが取り扱ってる内容を見て判断したざっくり予想です

f:id:bitokosubcul:20190221180428p:plain

f:id:bitokosubcul:20190221163110j:plain

これを書いてる人は「個人開発がやりたくなる本」という合同誌を「か65 ザ・シメサバズ」にて販売します。よかったらそちらも遊びにきてください〜!(宣伝)

f:id:bitokosubcul:20190221013540p:plain

続きを読む

【技術書典6】「個人開発がやりたくなる本」発行のお知らせ #技術書典

そろそろ、個人開発。

「個人開発がやりたくなる本」は、個人開発を「手軽に始めて」「むりなく続ける」コツが詰まった1冊です。
f:id:bitokosubcul:20190413194858j:plain:w300

「自分でサービスをつくってみたいけれど、なにをすればいいかよくわからない」
「ひとりで開発してみたけれど、モチベーションが続かず挫折してしまった」
「サービスを公開したけれど、人が寄り付かずそっとサービスを終了した」
「運営を続けているが、なかなか伸びなくて悩んでいる」

この本は、そんな個人開発にまつわる悩みをかかえるあなたに向けて書かれた本です。
プログラミング初心者や学生、運営10年越えのベテランから起業家まで、全13名の個人開発者が自分の体験談をふんだんに語っています。
開発手法、集客やモチベーション管理、やっぱり気になる収益など、個人開発のリアルがまとまった本となっております!

続きを読む

#技術書典 6にサークル参加したい人向け!最近の傾向と対策まとめ #techbook_meetup

もくもく執筆会 #techbook_meetup に参加して得た、技術書典に関する知見のまとめです!

※参加者の方からお聞きした話なので、一部情報が古かったりする場合もあるかもしれません。
個人の見解として参考にしていただければ!(事実と異なる場合は修正させていただきますので、お手数ですがコメントいただければ幸いです)

中の人は技術書典6で「個人開発がやりたくなる本」という本を発行予定です! blog.warally.info

  • 技術書典について
    • イベントの雰囲気
    • スペース作成時の工夫
  • 技術書典一般客のマインドについて
    • どんな本をみんな買いたいのか
    • 価格のつけ方について
  • 技術書典での本の販売について
    • どうしたら手にとってもらえるのか
    • 部数について
  • 技術書典で売れた本の成功理由
    • AWSをはじめよう(1500部売上):効果的なマーケティング
    • セイチョウ・ジャーニー (350部売上):共感しやすいストーリー
    • 完全版SIer脱出マニュアル(800部売上):インパクトのあるタイトル
続きを読む

個人開発サービスのリリースから1ヶ月、リアルな数字を公開します!(2018年版)

2018年11月から、お笑いライブの検索サイト「ワラリー!」を開設して運営してきました。
リリースから1ヶ月ちょっと経ったので、Google Analyticsの数値を元に2018年のデータを公開します。

  • サイトの数字についての前提
  • PV(ページビュー)推移:累計約62000PV
  • UU(ユーザー数)の推移:約21000UU
    • ユーザー数を増やす施策案
  • 登録ユーザーの推移:約300ユーザー
  • 集客チャネルの推移:73%が検索流入
  • まとめ
  • 2019年の目標
続きを読む

100個入ってわかった! 人が集まるSlackコミュニティ運営術

この記事はCrieitの「アドベントカレンダー Advent Calendar 2018」の14日目の記事です。 昨日はまんじゅ(´ん`)@CoderDojo駄Mentorさんの論理を煮詰めた正論は常に正しいだろうけど、時によっては鋭利なナイフにもちろんなるぞでした!

はじめに

駆け出しエンジニアのかしい(@rubys8arks)です。
個人開発を始めた頃、情報をもとめて地域のもくもく会やネット上のオープンコミュニティなどのSlackに入っていたら、気づいたら100個ものSlackに参加していました…。
いろんなSlackに参加する中で見えた、「こんなSlackは参加したい」という盛り上がっているコミュニティの特徴をまとめました。

  • はじめに
  • 1. Slack参加のハードルを低めにする
  • 2. 分報はつくった方が定着率高め
  • 3. カスタム絵文字は随時追加して充実させる
  • 4. Slackボットを活用してコミュニケーションを盛り上げる
  • 5. Slackのコアメンバーが積極的に発言する
  • 6. リアルイベントを開催する
  • 7. 内輪な雑談しかないのはツライ、励ましあいつつ知見を提供しよう
  • まとめ
続きを読む

15分でできる!Slackのオープンコミュニティの作り方

この記事はCrieitの「アドベントカレンダー Advent Calendar 2018」の12日目の記事です。 昨日はfk2000さんのHugoでブログ付きのポートフォリオサイトでした!

はじめに

駆け出しエンジニアのかしい(@rubys8arks)です。
技術書典でアンソロジー(合同誌)を出す関係で、Slackのコミュニティを新しく作成しました!
そのときに気づいたSlackのワークスペース作成の手順とTipsをまとめます。

  • はじめに
  • 1. ワークスペースの作成
  • 2. チャンネルの作成
  • 3. デフォルトチャンネルの設定
  • 4. ワークスペースのアイコンの設定
  • 5. カスタム絵文字(日本語リアクション)の設定
  • 6. メンバーをInviteする
  • まとめ
続きを読む