「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】

こんにちわ。れとるときゃりー([@retoruto_carry](https://twitter.com/retoruto_carry))と申します。

半年前からwebを勉強しはじめて、ひとりでwebサービスを作りまくっている大学3年生です。

今回で３つめのwebサービスです。
# 作ったもの

[みんなのボタンメーカー](https://btns.fun/)

ツイッターでつぶやけるボタンを簡単に作成できるサービス。
<font color="Gray">
2018/9/11 追記
予想以上に人気なってしまい、想定を遥かに超えるアクセスで一時サーバーがダウンしていましたが、サーバーのスケールアップをして復旧させました<br>
2018/9/13 追記
公開3日で累計8万PV、4万UUを突破しまし
た<br>
2019年2月 フロントをすべてnuxtに置き換え、SSRするようにしました
</font>
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【おしらせ】「<a href="https://twitter.com/hashtag/%E3%81%BF%E3%82%93%E3%81%AA%E3%81%AE%E3%83%9C%E3%82%BF%E3%83%B3%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#みんなのボタンメーカー</a>」というサービスをつくりました！🎉🎉✨<br><br>こんな感じのボタンを、ログインなしでかんたんにつくれます！💪<br>（押すとツイートできます）<br><br>ぜひ、いろんなボタンを作ってあそんでみてください！🙏😆<br><br>拡散のためリツイートお願いします🙏<a href="https://t.co/necIxCDESq">https://t.co/necIxCDESq</a></p>&mdash; れとるときゃりー🧡/やるぞ宣言🚩/つらいときに押すボタン🐈/DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1038891394704670721?ref_src=twsrc%5Etfw">2018年9月9日</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">にゃーん<a href="https://twitter.com/hashtag/%E3%81%A4%E3%82%89%E3%81%84%E3%81%A8%E3%81%8D%E3%81%AB%E6%8A%BC%E3%81%99%E3%83%9C%E3%82%BF%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#つらいときに押すボタン</a><a href="https://twitter.com/hashtag/%E3%81%BF%E3%82%93%E3%81%AA%E3%81%AE%E3%83%9C%E3%82%BF%E3%83%B3%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#みんなのボタンメーカー</a><br> <a href="https://t.co/ThE7pgqqnr">https://t.co/ThE7pgqqnr</a></p>&mdash; れとるときゃりー🧡/やるぞ宣言🚩/つらいときに押すボタン🐈/DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1039073879082262528?ref_src=twsrc%5Etfw">2018年9月10日</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">おすし！！！🍣🍣🍣<a href="https://twitter.com/hashtag/%E5%AF%BF%E5%8F%B8%E3%81%8C%E3%81%9F%E3%81%B9%E3%81%9F%E3%81%84%E3%81%A8%E3%81%8D%E3%81%AB%E6%8A%BC%E3%81%99%E3%83%9C%E3%82%BF%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#寿司がたべたいときに押すボタン</a><a href="https://twitter.com/hashtag/%E3%81%BF%E3%82%93%E3%81%AA%E3%81%AE%E3%83%9C%E3%82%BF%E3%83%B3%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#みんなのボタンメーカー</a><br> <a href="https://t.co/srj3YrNNLO">https://t.co/srj3YrNNLO</a></p>&mdash; れとるときゃりー🧡/やるぞ宣言🚩/つらいときに押すボタン🐈/DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1039067285489500160?ref_src=twsrc%5Etfw">2018年9月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/29e37257-1709-febf-f16c-6573bc51b16c.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/c1361b98-5c1d-431d-5fbf-7034a738f4f5.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/1bd1f03b-1304-2162-8791-50db4c00104f.png)

もちろんスマホでもいい感じに見れます
<img src="https://qiita-image-store.s3.amazonaws.com/0/156690/11ac74c9-dbd1-bbc8-1c3e-8cc753723c25.png" height="300px"><img src="https://qiita-image-store.s3.amazonaws.com/0/156690/13b18f81-f8e8-ccaf-1edf-ff43f2da21e6.png" height="300px">
[みんなのボタンメーカー](https://btns.fun/)

# どうしてこのサービスを作ったか
少しまえに、[やるぞ宣言](https://yaruzo.me/)というwebサービスを開発している片手間に、[「つらいときに押すボタン」](![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/9eb22aa6-ebc2-53ce-71ba-a3cc081abddf.png)
)というサイトを悪ふざけで作りました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/3626f406-b1ac-73ce-5153-f7616fd94a63.png)

それが思いのほかウケて、一ヶ月で１万人以上の人がサイトを訪問してくれました。

他にも「尊いときに押すボタン🙏」だとか「🍣寿司が食べたいときに押すボタン」など、いろいろなボタンを作りたいと思いました。

せっかくならみんなが作れるようにしたほうが楽しいだろう思って、このサービスをつくりました！
# どういう技術で動いているか
## バックエンド
- [Laravel](http://laravel.jp/)
 - 超有名なphpのフレームワークです
 - これでwebサービス作るのは3回目なので、とくに詰まる点は無かったです
- [Redis](https://redis.io/)
 - NoSQLとかいうやつらしいです
 - 最初全然よくわからなかったけど、keyとvalueをメモリに登録できるやつっぽいです
 - これでランキング機能を実装しました
  - 日別、週別をつくりました 
  - [開発初期に作ったランキング実装のサンプル]
  (https://github.com/retoruto-carry/sample_view_ranking_with_laravel_redis)

## フロントエンド
- [bootstrap4](https://getbootstrap.com/)
 - いい感じにレスポンシブルなサイトが作れるcssフレームワークです
 - これに頼り切りでCSSのみだけでサイト作ったことないで、もうちょい素のCSS勉強したいです。
- [fontawesome](https://fontawesome.com/)
 - アイコンライブラリです
 - めっちゃいっぱい種類あります。超便利です。
- [twemoji](https://github.com/twitter/twemoji)
 - twitter絵文字ライブラリです
 - twiiterの絵文字をwebサイトでも使えるようなります

### [ボタン作成フォームのページ](https://btns.fun/b/create)で使用した技術

![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/1bd1f03b-1304-2162-8791-50db4c00104f.png)

- [Vue.js](https://jp.vuejs.org/index.html)
 - 双方向バインディング（リアルタイムで変数が共有できる的な?）とかができるjavascriptフレームワークです
 - これでリアルタイムに作成されるボタン表示できるフォームをつくりました
 - コンポーネントとか使ったことなかったので読み込むのに大苦戦しました
 - [Swatche](https://www.npmjs.com/package/vue-swatches)
っていうカラーピッカーが便利でした
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/1251e9cf-b249-17e3-f77a-b49a4a2bf3af.png)
 - 絵文字ピッカーは[これ](https://www.npmjs.com/package/vue-emoji-picker)を使いました
 <img src="https://qiita-image-store.s3.amazonaws.com/0/156690/1c74f7bb-34fb-222c-24c6-ddd1987a522e.png" height="300px">
 - Vue.jsはいっぱいコンポーネントがあって便利ですね
 - いつかシングルページアプリケーションも作ってみたいです

- [html2canvas](https://html2canvas.hertzen.com/)
 - Webサイト側で表示ページのDOM要素をキャプチャして画像にすることができます
 - これでツイッターカードを自動生成をしています
 - 対応してないCSSのプロパティもあって、ボタンの影とかが作れませんでした...orz
 - たまに目で見えてるレイアウトとは違うレイアウト（隙間がちょっとずれてる）で画像に変換されるときがあって謎です。ちょっとまだ使いこなせてないです。
- [JavaScript-Load-Image](https://github.com/blueimp/JavaScript-Load-Image)
 - 画像をフロント側で送信前にリサイズするのに使いました

## インフラ
- [ConoHaのvps](https://www.conoha.jp/referral/?token=6xP0oJ9KbrG8fA1_A3YBUlj_a2r4M2IddNguX98oRJgndFKqg.w-0DZ)でバーチャルホストを使って、一つのサーバーで複数サイトを運営しています
 - ConoHaは月額630円で安いしデポジット制で楽です
 - ただし、最低プランの512MBだとプラン変更ができなくて、このサービスが初日でバズってスケールアウトがめんどくさかったので、1GB以上のプランをおすすめします
 - インフラ、1ヶ月くらい勉強すれば割とLAMPでサーバー運用できるくらいにはなりました
 - 同一サーバーにて[やるぞ宣言](https://yaruzo.me/)という別サービスも運用しています(宣伝)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【おしらせ】<a href="https://twitter.com/hashtag/%E3%82%84%E3%82%8B%E3%81%9E%E5%AE%A3%E8%A8%80?src=hash&amp;ref_src=twsrc%5Etfw">#やるぞ宣言</a> というサービスを作りました！✨🎉✨<br>ツイッターなどで、かんたんに「やるぞ」を宣言したり、進捗や完了も報告できるお気楽サイトです！ぜひ使ってみてね！<br><br>「ずぼらな私でも、宣言すればやる気出るかもっ」と思って作ったよ！<a href="https://t.co/ftc9hqf13E">https://t.co/ftc9hqf13E</a><a href="https://twitter.com/hashtag/RT%E3%81%8A%E9%A1%98%E3%81%84%E3%81%97%E3%81%BE%E3%81%99?src=hash&amp;ref_src=twsrc%5Etfw">#RTお願いします</a></p>&mdash; れとるときゃりー🧡/やるぞ宣言🚩/つらいときに押すボタン🐈/DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1019476708540346368?ref_src=twsrc%5Etfw">2018年7月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 

 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/617fd369-6d29-9f3f-3844-630f9709d0c4.png)

- [deployer](https://deployer.org)
 - PHPのデプロイツール
 - 今までFTPで手動でやっていましたが、これで自動化するとめちゃくちゃ楽になりました。コマンド一発でデプロイできるので、アップデート作業が苦にならないです。
- [AWS S3](https://aws.amazon.com/jp/s3/)
 - 画像を保存するのに使っています
 - Laravelとの連携が容易です
 - cloudflareに通してリクエストを抑えてるつもりだけど、効果のほどは不明です
  - これを参考にしました-> [CloudFlareとAmazonS3を連携させてリクエストを抑える](https://qiita.com/takashi/items/7a3d952c0bd3b4118b8d)


## その他
- <a target="_blank" href="https://www.amazon.co.jp/gp/product/4873115655/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4873115655&linkCode=as2&tag=retorutocarry-22&linkId=905b32f28a0ace5c17655729655&linkCode=as2&tag=retorutocarry-22&linkId=905b32f28a0ace5c17655729abc7ef7e">リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック</a>を読んで、コードをもうちょっと見やすく書こうとしました。
<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4873115655/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4873115655&linkCode=as2&tag=retorutocarry-22&linkId=b62112ac4b4d804c56eda4f4724abd18"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4873115655&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=retorutocarry-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=retorutocarry-22&l=am2&o=9&a=4873115655" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
 - コードが見やすくなると、機能追加などが楽になるので、もっとこの本の内容を実践していきたいです。

- [マシュマロ](https://marshmallow-qa.com)の中の人から勧めれて読んだ、<a target="_blank" href="https://www.amazon.co.jp/gp/product/4873116597/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4873116597&linkCode=as2&tag=retorutocarry-22&linkId=f94c07546bff92611bd2e422bb42500f">マイクロインタラクション ―UI/UXデザインの神が宿る細部</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=retorutocarry-22&l=am2&o=9&a=4873116597" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> を参考に、サービスのUI/UXを改善しました。
<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4873116597/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4873116597&linkCode=as2&tag=retorutocarry-22&linkId=ff39deb31b638a2420fc2e23a7cd4d8f"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4873116597&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=retorutocarry-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=retorutocarry-22&l=am2&o=9&a=4873116597" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
 - この本はめちゃくちゃ奥が深いので、今後も何度も読み返して実践していきたいです

- Git
 - 今までバックアップ代わりにしか使ってなかったが、ちょっと勉強したら思ったより便利でした。コミットとか戻ったりできるの便利。
 - エイリアスを貼ると捗りました。git commit => g cm みたいに。よく使うコマンドは即時に打てると便利です。
 - ちゃんとブランチを切るという開発の仕方に挑戦しました。全然慣れないです。


#今回の振り返り
サービスをリリースまでかける時間が長くなれば長くなるほど、「本当にウケるのだろうか？」という不安が大きくなり、機能や見た目にこだわりすぎて、さらに時間をかけてしまうという泥沼にハマってしまいました。

本当は2週間でつくる予定だったのに、2ヶ月もかけてしまいました。

本当に、初動で”とりあえず動く状況”まで持っていくことが大切だと感じました。

デザインは実装中に悩むと作業が止まってしまうので、最初に大枠を決めて”とりあえず動く状況”まで持っていったあとに、最後に修正するのが良さそうです。

これくらいの気持ちで、細かい点にずっとこだわりすぎないことを意識していきたいです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/5b1f886e-1da9-8266-8ded-05984a4f6898.png)



#今後追加したい機能
「究極の2択ボタン」が作れるようにしたいです。

あなたはどっち？
・きのこ
・たけのこ

みたいなやつです。

あと100回に一回大爆発するボタン、みたいなランダムな要素があるボタンが作れるようにしたいです。

#ここまで読んでくれた方へ
ぜひ、[みんなのボタンメーカー](https://btns.fun/)で遊んでみてください！！！
よろしくお願いします！！！

##こんなボタンとか押してみてくれてもいいんですよ？？？
（画像を押すとサイトに飛びます）
<a href="https://btns.fun/b/aa5f0800-b469-11e8-9000-e1681fa02107"><img src="https://qiita-image-store.s3.amazonaws.com/0/156690/a12fdc3d-ba7f-8fe2-7e86-326e6af5d629.png"></a>
<a  href="https://btns.fun/b/2736a840-b67f-11e8-a48c-0b9adef3a739"><img src="https://qiita-image-store.s3.amazonaws.com/0/156690/ae3dc02f-fe77-4334-0da6-9da6ea3fbd3e.png"></a>
<a href="https://btns.fun/b/71fd6ef0-b680-11e8-a486-c112585f1af5"><img src="https://qiita-image-store.s3.amazonaws.com/0/156690/a61911af-f65a-4e8f-7f7d-52a7d1d7cffc.png"></a>
<a href="https://btns.fun/b/ba1057c0-b46a-11e8-bb0b-cfbca4ffe414"><img src="https://qiita-image-store.s3.amazonaws.com/0/156690/dbb10870-643e-0cf2-f477-c146ceb97f3c.png"></a>
<a href="https://btns.fun/b/6ccd4de0-b466-11e8-b27c-579283873669"><img src="https://qiita-image-store.s3.amazonaws.com/0/156690/818536bb-0c54-7299-7ed0-70dbed365061.png"></a>
[他にもボタンを見てみる](https://btns.fun/daily)

##**自由にボタンを作って遊んでみてください！（ログイン不要）**
とてもかんたんにつくれます！
[ボタン作成ページ](https://btns.fun/b/create)
<a href="https://btns.fun/b/create"><img src="https://qiita-image-store.s3.amazonaws.com/0/156690/1bd1f03b-1304-2162-8791-50db4c00104f.png"></a>

[みんなのボタンメーカー](https://btns.fun/)を作ったお話でした。ここまで読んでくださりありがとうございます！