【個人開発】ツイッターにカウントをシェアできるwebサービスをリリースしたので振り返る

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

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

新しくwebサービスをリリースしたので、

- 何を作ったか
- どうして作ったか
- どういう技術を使ったか
- 苦労したこと
- 感想

等を書いていこうと思います。

# 作ったもの

[かぞえったー](https://count.yaruzo.me)というwebサービスを作りました。

ツイッターに、カウントをツイッターにシェアできるサービスです。

「うでたて」「勉強」「プログラミング」「つらいときに押すカウンター」など、なんでも数えてツイッターにシェアできます！

![腕立て.gif](https://qiita-image-store.s3.amazonaws.com/0/156690/8696c492-b397-a086-04da-603c7710a19c.gif)

![info1.png](https://qiita-image-store.s3.amazonaws.com/0/156690/6c966cf5-0d77-e871-7810-280c5454e230.png)

![info2.png](https://qiita-image-store.s3.amazonaws.com/0/156690/4f192f8b-f783-2d11-688a-63e5d8e893b8.png)

![info3.png](https://qiita-image-store.s3.amazonaws.com/0/156690/23da0fcf-7850-28b9-e928-4dd1e7b9c763.png)

サービスのメイン画面はこんな感じです。
![example_post.png](https://qiita-image-store.s3.amazonaws.com/0/156690/6d2cccac-af96-6204-80ef-6ac62605c15e.png)

# 例えば、こういう感じで使ってくれています！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">「おげんこう」のカウントを1増やしました。<br><br> <a href="https://twitter.com/hashtag/%E3%81%8B%E3%81%9E%E3%81%88%E3%81%A3%E3%81%9F%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#かぞえったー</a><br> <a href="https://t.co/7mba6mlfol">https://t.co/7mba6mlfol</a><br>朝の分<br>え、すごい頑張ってるなにこれすごい</p>&mdash; rinrin (@rinrindarinko) <a href="https://twitter.com/rinrindarinko/status/1073064134822920192?ref_src=twsrc%5Etfw">2018年12月13日</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">12/13【Day6】 <br>・ジョブ修正<br>・フライヤー一覧機能作成(WIP)<br>「ジョブが動いてないな〜」と思ったら単純にrake taskの名前が間違ってました。。こういううっかりバグがたくさんある個人開発。。。<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/%E3%81%8B%E3%81%9E%E3%81%88%E3%81%A3%E3%81%9F%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#かぞえったー</a><a href="https://t.co/QYf5Qo77Qv">https://t.co/QYf5Qo77Qv</a></p>&mdash; かしい@技術書典6でたい (@rubys8arks) <a href="https://twitter.com/rubys8arks/status/1073255423384252417?ref_src=twsrc%5Etfw">2018年12月13日</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">「読んだお話」のカウントを1増やしました。<br>谷崎潤一郎「泉先生と私」（青空文庫）<br>谷崎が泉鏡花との関...<br> <a href="https://twitter.com/hashtag/%E3%81%8B%E3%81%9E%E3%81%88%E3%81%A3%E3%81%9F%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#かぞえったー</a><br> <a href="https://t.co/tM6m6UcwN2">https://t.co/tM6m6UcwN2</a></p>&mdash; みすみ@供給過多 (@misuuuumi) <a href="https://twitter.com/misuuuumi/status/1073215126642159616?ref_src=twsrc%5Etfw">2018年12月13日</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">「アウトプット大全を読み進める」のカウントを1増やしました。<br><br> <a href="https://twitter.com/hashtag/%E3%81%8B%E3%81%9E%E3%81%88%E3%81%A3%E3%81%9F%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#かぞえったー</a><br> <a href="https://t.co/9OBWNciOl8">https://t.co/9OBWNciOl8</a></p>&mdash; だーすー@マシュマロの中の人 (@Neko_Inu_) <a href="https://twitter.com/Neko_Inu_/status/1073183077214515201?ref_src=twsrc%5Etfw">2018年12月13日</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">「webサービス開発」のカウントを1増やしました。<br>作業通話しつつ、かぞえったーの記事を書いた。レイアウトのバグを修正。 明日はクイズを作るぞ。<br> <a href="https://twitter.com/hashtag/%E3%81%8B%E3%81%9E%E3%81%88%E3%81%A3%E3%81%9F%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#かぞえったー</a><br> <a href="https://t.co/JaHOrWMidS">https://t.co/JaHOrWMidS</a></p>&mdash; れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1073361034092503040?ref_src=twsrc%5Etfw">2018年12月13日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>




[ここ](https://twitter.com/hashtag/%E3%81%8B%E3%81%9E%E3%81%88%E3%81%A3%E3%81%9F%E3%83%BC?f=tweets&vertical=default&src=hash)から、みんながどんな感じで使っているのか見ることが出来ます。

試してみてください👉　[かぞえったー](https://count.yaruzo.me/)

# どうしてこのサービスを作ったか

少し前に[みんなのボタンメーカー](https://btns.fun/)というサービスを作りました。
<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>

※[みんなのボタンメーカー](https://btns.fun/)についてはこの記事にまとめています
 [「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】](https://qiita.com/retoruto_carry/items/d6a173701c8e40f0c294)

このサービスはかなりヒットして、リリースから3ヶ月間の累計で20万PVほどの規模に成長しています。

ただ、[みんなのボタンメーカー](https://btns.fun/)のようなネタ系のコンテンツは、ユーザーの継続率があまり高くありません。

次は、ユーザーが毎日戻って来てくれるような、「継続性」を意識したサービスを作りたいなと思い、新しく作ったのが、[かぞえったー](https://count.yaruzo.me/)というサービスです。

ノリと勢いで、紙にデザインを書き上げてしまって、勢いで2日間でプロトタイプを作りました。

↓企画を考えたときのメモ(汚い）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/9a069601-f2cb-d920-4da2-85b885731e35.png)

# どういう技術で動いているか
## バックエンド
### [Laravel](http://laravel.jp/)
超有名なphpでwebサービスを作る用のフレームワークです。いつもこれを使ってwebサービスを作ってるので、慣れています。
### [Laravel Socialite](https://readouble.com/laravel/5.5/ja/socialite.html)
laravelでtwitterログインをできるようにしています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/1cccb208-8041-9755-fa68-798742eee730.png)
### [Intervention Image](http://image.intervention.io/getting_started/introduction)
画像生成に使っています。画像に文字を入れたり、画像を上から描写したり色々出来ます。[この記事](https://qiita.com/kako351/items/5095498201495add7ad4)がとても参考になりました。
画像生成は苦労しました。そのあたりのことは、後述しています。
### [laravel-uuid](https://github.com/webpatser/laravel-uuid)
例えば、https://count.yaruzo.me/post/{postのid} の {postのid}をランダムなものにできます。
サービス全体での記事数等が推測されないために使っています。

## フロントエンド
### jQuery
### [bootstrap4](https://getbootstrap.com/)
いい感じにレスポンシブルなサイトが作れるcssフレームワークです。いつもこれを使っています。CSS書かなくていいので最高に便利。
### [Google Fonts](https://fonts.google.com/)
サービス全体にかわいいフォントを適用しています。「M PLUS Rounded 1c」というフォントを使っています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/eb7dc427-7662-abb9-cac8-b0451a37b21b.png)

### [CSS3 Animation Cheat Sheet](http://www.justinaguilar.com/animations/)
CSSアニメーションのライブラリです。ボタンをふわふわさせるのに使っています。
ログインやシェア等の誘導に便利です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/156690/da202a7f-1e80-633c-b487-bf16d2189635.gif" width="55%">



### [odometer](https://github.hubspot.com/odometer/api/themes/)
カウンターがくるくる回るライブラリです。カウントを増やしたときにそれっぽいアニメーションをするのに使っています。
<img src="https://qiita-image-store.s3.amazonaws.com/0/156690/6ac7774a-6c76-48cf-5fb3-e16bce2bf030.gif" width=60%/>


### [fontawesome](https://fontawesome.com/)
アイコンライブラリです。めっちゃいっぱい種類あります。超便利です。
↓こんな感じで、UIにアイコンを使うと可愛くなります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/add9a10a-0906-28de-3705-c356a6cb8749.png)

### [twemoji](https://github.com/twitter/twemoji)
twitter絵文字ライブラリです。twiiterの絵文字をwebサイトでも使えるようなります。
↓このへんの絵文字に使っています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/7ec423f4-38b0-e94a-7f96-00c81f9f025f.png)

### [googleアナリティクス](https://analytics.google.com/analytics/web/)
アクセス解析に使うやつです。
### PWA(Service Worker)
「ホーム画面に追加」だけできるようにしました。通知とかは実装してないです。
[これ](https://qiita.com/narikei/items/4240f03542f29e313989)を参考にしてやりました。めっちゃ簡単でした。
<img src="https://qiita-image-store.s3.amazonaws.com/0/156690/a2d75e59-ba2a-7965-c2e8-8748623f72a8.png" width=40%>



## インフラ
### [ConoHaのVPS](https://www.conoha.jp/referral/?token=6xP0oJ9KbrG8fA1_A3YBUlj_a2r4M2IddNguX98oRJgndFKqg.w-0DZ)
バーチャルホストを使って、一つのサーバーで複数サイトを運営しています。サーバー代が節約できて良いです。
ConoHaは最低価格月額630円で安いしデポジット制で楽です。
同一サーバーにて[みんなのボタンメーカー](https://btns.fun)や、[やるぞ宣言](https://yaruzo.me/)という別サービスも運用しています。
### [deployer](https://deployer.org)
PHP製のデプロイツールです。コマンド一発でデプロイできます。
### [AWS S3](https://aws.amazon.com/jp/s3/)
画像を保存するのに使っています。Laravelとの連携が容易です。
 [これ](https://qiita.com/takashi/items/7a3d952c0bd3b4118b8d)を参考にして、cloudflareに通してリクエストを抑えてるつもりだけど、効果のほどは不明です。
[flysystem-aws-s3-v3](https://github.com/thephpleague/flysystem-aws-s3-v3)というlaravelが公式で出しているAWS S3用プラグインを使ってlaravelと連携できます。

# 頑張ったこと
## デザイン
### 画像生成
自動生成される画像のデザインにめっちゃ悩みました。
↓こういうやつ↓
![example_activity_ogp.png](https://qiita-image-store.s3.amazonaws.com/0/156690/8b9d34b8-0fe0-0f09-2051-7d48ca0a41bd.png)
デザインを先にオンライン画像編集ツールで「あーでもないこーでもない」といいながら頑張って作りました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/72cf26c6-c100-729c-9308-6b718f23d816.png)

また、自動生成される画像の中の文字がはみ出ないように調整していい感じにピッタリハマるようにするのが大変でした。
結局、以下のようなコードを書いて無理やり解決しました...
クソコードなのは理解している。

```php:Contoller.php
public function calcTitleFontSize($title_mb_length)
    {
        //割と適当
        if ($title_mb_length < 34) {
            $fontsize = 27;
        } elseif ($title_mb_length < 38) {
            $fontsize = 24;
        } elseif ($title_mb_length < 42 ) {
            $fontsize = 22;
        } elseif ($title_mb_length < 48 ) {
            $fontsize = 20;
        } elseif ($title_mb_length < 54 ) {
            $fontsize = 18;
        } elseif ($title_mb_length < 58 ) {
            $fontsize = 17;
        } elseif ($title_mb_length < 62) {
            $fontsize = 16;
        } elseif ($title_mb_length < 66) {
            $fontsize = 14.3;
        } else {
            $fontsize = 13.6;
        }
        return $fontsize;
    }
```

### トップページ
[かぞえったーのトップページ](https://count.yaruzo.me/)はいらすとやを駆使して作りました。

コーディングしながらデザインを考えるのはしんどすぎたので、以下のやりかたで作りました。

流れとしては

#### ①紙で考える
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/815d771a-c350-65fa-d944-f4bb9ebee0e8.png)
#### ②パワポで考える
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/45c068be-72fd-8017-1597-fa5ac3244aab.png)
#### ③コードに落とし込む
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/6cfb6c75-e5b0-4f9b-f769-908033c8bcee.png)

### GitHubをかなり活用して開発した
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">個人開発あるある<br><br>ひとりでissue立てて、自分をアサインして、ひとりでコメント書いて、ひとりでプルリク送って、ひとりでマージして、ひとりで👍する虚しさ</p>&mdash; れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1071710974070026240?ref_src=twsrc%5Etfw">2018年12月9日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こんな感じで開発していました。

![範囲を選択_228.png](https://qiita-image-store.s3.amazonaws.com/0/156690/ded4d83f-e1dd-9ad6-dffc-f2671639ddec.png)

GitHubのプロジェクト機能がとても便利で、カンバン方式でissueを管理して開発を進めました。

これめっちゃ良いぞ！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156690/9db83591-b0b1-65dd-6bee-598bea910908.png)


# 開発期間など
[かぞえったー](https://count.yaruzo.me/)の開発期間は、2ヶ月間です。
しかし実際にコードを書いていたのは、17日間です。
途中で謎のエラーが解決できず、やる気なくし1ヶ月半ほど放置していました。
結局、エラーが出ていてたツールをすべて切り捨てて、イケてない案の方のツールに変えて再開しました。

ちなみに、放置してた間は、[webサービス開発RTAをしておふざけサービスを作った](https://qiita.com/retoruto_carry/items/62b890341c25ef514d90)り、[ポートフォリオサイト](https://retoruto-carry.github.io/)を作ったりして遊んでました。

## 不安
正直、<b>サービスが本当に使ってもらえるか心配</b>でした。

「みんな何につかうのか思いつかなくてスルーするんじゃないのか」みたいな気持ちが大きかったです。

人に聞いてもいまいちな反応しか帰ってこないですし、どんどん自信がなくってやる気が完全になくなりました。

ただ、結局やりきらないと気がすまない性格なので、最後までやりきりました。

# リリースしてみてどうだったか
思ったより、たくさんの人の目に[かぞえったー](https://count.yaruzo.me/)に触れてもらうことはできました。

記事を書いてる時点で、リリース報告のツイートは1000いいねを超えました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ツイッターにカウントをシェアできるwebサービスを開発しました！<br><br>「うでたて」「勉強」「プログラミング」「つらいときに押すカウンター」など<br><br>なんでも数えてツイッターにシェアできます！<br><br>ぜひ使ってみてください！<br>広めていただけると嬉しいです...！<a href="https://t.co/BboIWBGb7N">https://t.co/BboIWBGb7N</a> <a href="https://t.co/GKnua2hbDo">pic.twitter.com/GKnua2hbDo</a></p>&mdash; れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1072444313076948992?ref_src=twsrc%5Etfw">2018年12月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

(良かったらこのツイートをいいね/RTしていただけると嬉しいです)


作られたカウンターは、原稿やイラストを書いてる人のカウンターが以外と多くてびっくりしました。

あまり予想していなかったです。

また、想定通り、読書や勉強、プログラミングに使ってくれている人もいます。

しかし、やはり懸念していた通り、<b>「面白そうだけど何に使っていいのかわからない」</b>みたいな人が少し多かった印象です。

「なんにでも使っていいよ」というサービスより、何に使うかを絞って提供するほうがいいんだろうな、という知見を得ました。

一方で、<b>「こういうサービスが欲しかった！ありがとう！」</b>とわざわざリプライを送ってくれる利用者の方もいました。

幸せな気持ちになれました。

## 感想

「このサービスは本当にウケるんだろうか」「今私はゴミを作っているのではないのか」という不安に苛まれながらサービスを作っていました。

しかし、結局のところ<b>「サービスは出してみなければ世の中の人が使ってくれるかなんてわからない」</b>という面が大きいことを実感しました。

作る前に悩んだり、人にアイデアのよしあしを聞くより、<b>開発サイクルを早めて、どんどんリリースしてバットを降る回数をふやすこと</b>こそが、個人開発者にとって効率が良いのではないかと思います。

今回もたくさんの知見と経験が身につきました。

これからもどんどんバットを振っていきたいです。

# ここまで読んでくれた方へ
ここまで読んでくださりありがとうございます。

[かぞえったー](https://count.yaruzo.me/)でカウンターを作ってみて遊んでください。

- プログラミングしたら押すカウンター
- 作業したらおすカウンター
- にゃーん
- つらいときに押すカウンター
- うでたて
- イラスト

など、何でもいいので試してみてください

フィードバックやバグがあればツイッター: [@retoruto_carry](https://twitter.com/retoruto_carry)まで報告してくれると喜びます。

いいねやコメント、SNSでの共有等をしてくださると、今後の励みになります。よろしくお願いします。

良かったらツイッター([@retoruto_carry](https://twitter.com/retoruto_carry))もフォローしてね