VR上で開催されるイベントを簡単に告知できるサービス「Vbul」をリリースしました【個人開発】

はじめまして、こよみ([@koyomivr](https://twitter.com/koyomivr))と申します。

4月からプログラミングをはじめて本格的に取り組み始めたのが3ヶ月ぐらい前の18歳です。

今回、初めてwebサービスを作ったのでわからないことだらけでしたが、なんとかリリースにこぎつけたので振り返りとして書きます。

#作ったもの
[VRイベント支援サイト「Vbul」](https://vbul.fun)
VR上で開催されるイベントの告知などができるサービスです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">VRイベント支援サイト「Vbul」リリースしました。<br>VbulとはVR上で開催されるイベントを告知できるサイトです。小さいイベントから大きなイベントまで気軽に投稿してください！ <a href="https://t.co/Q11AR6Q88w">https://t.co/Q11AR6Q88w</a><a href="https://twitter.com/hashtag/Vbul?src=hash&amp;ref_src=twsrc%5Etfw">#Vbul</a> <a href="https://twitter.com/hashtag/VRCEvent?src=hash&amp;ref_src=twsrc%5Etfw">#VRCEvent</a> <a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a></p>&mdash; koyomi@VRイベント支援サイト (@koyomivr) <a href="https://twitter.com/koyomivr/status/1079226030194225153?ref_src=twsrc%5Etfw">2018年12月30日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">除夜の鐘inVRC <a href="https://t.co/x34nMHSZJO">https://t.co/x34nMHSZJO</a> <a href="https://twitter.com/hashtag/Vbul?src=hash&amp;ref_src=twsrc%5Etfw">#Vbul</a> <a href="https://twitter.com/hashtag/VRCEvent?src=hash&amp;ref_src=twsrc%5Etfw">#VRCEvent</a></p>&mdash; koyomi@VRイベント支援サイト (@koyomivr) <a href="https://twitter.com/koyomivr/status/1079349209910763522?ref_src=twsrc%5Etfw">2018年12月30日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">VRoidアバター交流会  <a href="https://t.co/2AgIfLzOcT">https://t.co/2AgIfLzOcT</a> <a href="https://twitter.com/hashtag/Vbul?src=hash&amp;ref_src=twsrc%5Etfw">#Vbul</a> <a href="https://twitter.com/hashtag/VRCEvent?src=hash&amp;ref_src=twsrc%5Etfw">#VRCEvent</a></p>&mdash; koyomi@VRイベント支援サイト (@koyomivr) <a href="https://twitter.com/koyomivr/status/1079976965388435457?ref_src=twsrc%5Etfw">2019年1月1日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#どうしてこのサービスを作ったか
VRChatなどで開催されているイベントがもっと簡単に発見できるようになればいいのになと思い作り始めました。
既存のサイトでVRCイベントカレンダーというものがあるのですがサムネイルがないのでイベントが増えてくるとわかりにくいという欠点がありました。

#どういう技術で作っているか
##バックエンド
###[Laravel](http://laravel.jp/)
・有名なPHPのフレームワークです。
・今回がwebサービスを作るのが初だったので詰まりまくりました。
###[Laravel Socialite](https://readouble.com/laravel/5.5/ja/socialite.html)
・Twitterログインなどができるようになります
###[laravel-uuid](https://github.com/webpatser/laravel-uuid)
・idなどをランダムにすることができます。
###[Intervention Image](http://image.intervention.io/)
・投稿された画像をリサイズするのに使いました。
・他にも画像の加工ができたりします。

##フロントエンド
###[Bootstrap4](https://getbootstrap.com/)
・適当にクラスに追加するだけでいい感じになるcssフレームワークです。
・これも使うのが初めてだったんですけど、それっぽくなってびっくりしました。
 でも、デザインとかちゃんとしたいので素のcssやらないとなーって感じです。
###[Font Awesome](https://fontawesome.com/)
・アイコンライブラリです。
・Twitterのアイコンを使いました。簡単便利！！

##インフラ
###[ConoHaのVPS](https://www.conoha.jp/)
・最初はLightsailを使おうと思ってセットアップしてたんですけど、うまくいかなかったのでConoHaを使うことにしました。  
あと、美雲このはちゃん可愛いしね（笑）  
[ここから](https://www.conoha.jp/referral/?token=UQmWV8LPvY2t6kIfxohtZKOrUishcEP0Q6qnFifDoH56dC483fE-XPM)登録すると1000円分のクーポンがもらえます‼
###[AWS S3](https://aws.amazon.com/jp/s3/)
・投稿された画像を保存するのに使ってます。Laravelだと簡単にできるらしいですけど結構苦労しました（泣）  
Qiitaにメモ残してるんで困ってる人がいれば参考にしてみてください。
https://qiita.com/koyomivr/items/d63e728100028a7a4b74

#頑張ったこと
頑張ったこととかそんなん全部ですよ、**全部**
何もかもが初めてだったのでわからないことだらけで、
聞ける人がいなかったのでGoogle大先生に頼りっぱなしでした。
茶番はおいておいてちゃんと書いていきます。
## 投稿された画像のリサイズ
このサービスではイベント登録の際にイベントのサムネイルをつけることができます。
投稿された画像のサイズのまま表示するわけにはいかないのでリサイズしてs3に保存するようにしています。
でも、これが一筋縄ではいかなくて泣きそうになりました。
できた時は飛び跳ねました（笑）

##s3へのアップロード
リサイズの話と被るんですけど、s3の設定ができてなかったせいか全然できなくて、ググりまくりました。

##インフラ問題
これが一番厄介でした。
AWSのLightsailを使おうと思って最初はやってたんですけど、全然うまくいかなくて、何回も作り直しましたができませんでした。調べてもあまり記事がでてこなかったので初心者の自分には優しくありませんでした。
なので、同じくLaravelでwebサービスを作っているれとるときゃりーさんがConoHaのVPSを使っていたので、自分も使うことにしました。
使ってみた感想は自分的にはとてもわかりやすかった。
公式ドキュメントが充実していたのでやりやすかったです...何回もやり直したけどw
これは長くなりそうなので別記事にしようかなと思います。

#開発期間
[Vbul](https://vul.fun)の開発期間はだいたい3ヶ月ぐらいです。
コード書いてたのは2ヶ月ぐらいでインフラ関連に1ヶ月ぐらいかかりました。
Laravelはドットインストール触ったぐらいの知識だったので結構時間がかかっちゃいました。
今のデザインが気に入ってないのでまだまだ進化させていきます。もちろん機能も！！

#リリースしてみて
想像以上に拡散されなくて泣きそうです。。。
これを見た人拡散してください（切実）

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">VRイベント支援サイト「Vbul」リリースしました。<br>VbulとはVR上で開催されるイベントを告知できるサイトです。小さいイベントから大きなイベントまで気軽に投稿してください！ <a href="https://t.co/Q11AR6Q88w">https://t.co/Q11AR6Q88w</a><a href="https://twitter.com/hashtag/Vbul?src=hash&amp;ref_src=twsrc%5Etfw">#Vbul</a> <a href="https://twitter.com/hashtag/VRCEvent?src=hash&amp;ref_src=twsrc%5Etfw">#VRCEvent</a> <a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a></p>&mdash; koyomi@VRイベント支援サイト (@koyomivr) <a href="https://twitter.com/koyomivr/status/1079226030194225153?ref_src=twsrc%5Etfw">2018年12月30日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これからが勝負なので使ってもらえるように頑張ります・ω・

#感想
初めてwebサービスを開発してみてとても楽しかったです。
一つ一つできていく様子がたまらん！

Laravelでなら基本的なことはできるようになったので新しいサービスも作っていきたいですね！！

2019年はもっともっとツヨツヨになっていきたいです。

#最後に
今回こういう記事を書くのが初めてだったので[れとるときゃりーさん](https://twitter.com/retoruto_carry)の[記事](https://qiita.com/retoruto_carry/items/be8b23911b64ce2bfa4f)を参考にしました。
webサービス作りまくってるすごい人です。

拙い文章だったとは思いますが、ここまで読んでいただきありがとうございました。
これからも開発頑張ります！！

よかったらTwitter([@koyomivr](https://twitter.com/koyomivr))のフォローお願いします。

ばいばい:)