個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話
2020/02/18
こんにちは、三度の飯よりチョコが好きokutani(@okutani_t)です。嘘です。ちょこっとだけ好きです。チョコだけに、ね！！！
くだらないことはさておき？「個人開発で作ったWebアプリがツイッター日本トレンド1位」になりました！やったね！ぱちぱち。
↑スクショは2020.2.13 21:22に撮ったもの
なんと「ツイッター日本トレンド1位2位両方とも独占」しました。あのマッ◯ーを抜きました。一瞬チョコボックスがやばいド◯ッグなんじゃないかと錯覚しました。ただのWebアプリです。はい。
（2020.2.18）追記：twittrendというサービスで調べたところ、「ツイッター世界トレンド1位」だったことが分かりました！（それに伴い記事タイトルを変更しました）
せ、世界トレンド1位って、、、（震え声）
↑2020.2.14 0時の時点でツイッター世界トレンド1位
ちなみに作ったWebアプリは以下です。「バーチャルチョコをおくる・もらえるWebアプリ」です。
本記事では、「#チョコボックス裏話」として、チョコボックス開発者okutaniが、知的でユーモアかつ論旨明解なレポート記事をお送りさせていただきます。
まずはじめに、作成したWebアプリ「チョコボックス」の背景について、それから「サーバーとの死闘」「ツイッター連携の権限でのストレス爆発」について解説していきます。
自分は文章を書くときは基本ふざけ調子なので、気に障った方はそっとこのページを閉じ、青い空と白い雲を仰ぎ、遥かな大地に想い馳せ、あの日グラウンドに響き渡った大地讃頌を脳みそにリフレインさせながらコーヒーで一服するのがよいでしょう。
はい、くだらないことはさておき？さっそく、チョコボックスの誕生秘話からつらつらと書いていきます。
LINK「ツイッター連携の権限についての解説」だけ先に読みたい方はこちらから飛べます
もくじ
スポンサーリンク
チョコボックスのこれまで
チョコボックスは2018年のバレンタインに向けて開発・公開したWebアプリです。実は2年前から運用してました。
↑画像は2018年公開当時のもの
Webエンジニアをしていた自分は「質問箱」に影響され（たぶんエンジニアなら誰でも感化されるよね？）、勉強目的でつくりたいなと思いはじめました。
バレンタインが近かったのもあり、僕は「はぁーだれでもええし、バーチャルでもなんでもいいからチョコレート欲しいわぁ〜できれば本命がええわなぁ〜まぁ無理やろなぁ〜はぁ〜コンビニでも行っておでんでも買おうかなぁ〜」とよこしまな気持ち、部屋で悶々と妄想を展開しておりました。
ついには、そのよこしまな気持ちは妄想だけにとどまらず、「バーチャルチョコ付きメッセージサービス（当時はチョコレートというサービス名だった）」の開発に着手しました。行動力、あるねぇ〜自分。そしたら1週間ほどで完成。
気合を入れて公開！
……しかし、公開後ほとんどユーザーはおらず、1年後の2019年のバレンタインにも総ユーザー数は300人ぐらいでした。
どうしたら使われる？→ターゲットユーザーの調査
気がつくと「どうやったらサービスを使ってもらえるんだろう？」と考えるようになりました。欲って怖いわね。
だんだんと「どんな人が使ってるんだろう？」「使ってる人は機能に満足してる？」と考えるようになり、暇な時間をつかってちょこちょこエゴサーチしていました。
すると、チョコボックスの利用ユーザーが以下だと。
「10代の若い女子がメインに使っている」
衝撃を受けました。
自分は29歳のおっさんです。周りでツイッター使ってるのもおっさんしかいません。たまにあるツイッター界隈のあつまり（IT勉強会・フォトウォークなど）も、もれなくおっさんしかいません。この世にはおっさんしかいないものだと思っていました。街を歩けばおっさん On The Corner By 毛皮のマリーズだと思っていました。
「10代女子がツイッターに存在する……」
幻の存在だと思っていた、ネッシーやUMAが実際に存在したような感覚です。すみませんそれは言いすぎました。
とにかく、ターゲットユーザーを一度「10代女子」に決めて、文言やデザインを調整していきました。
（※ここでターゲットユーザーを10代女子に絞ったのはあくまで「ペルソナ」を仮定しただけです。20代女子や50代男子にもチョコボックスをガンガン利用してもらいたいと思っています。その点ご理解ください）
イラストをとにかく可愛く！
公開当時のチョコのイラストは、ネット上にある有料画像を購入して使っていました。
↑2019年当時の画像
イラストはキレイで良いのですが、すこしとっつきにくく、10代女子が使ってるイメージがありませんでした。
そこで、デザイナーのマユンティ（都内在住女性2X歳おしゃれデザイナー）に土下座で頼み込み、10代女子をターゲットとしてイメージしてもらい、イラストを新しく描いてもらいました。
↑2020年プチリニューアルに向けたラフ絵
そして完成したイラストがこちら。
↑2020年現在の画像
イラストにも統一感も出て、よりサービスとして親しみやすいものになりました。
さらに、お気づきの方もいるかと思いますが「見出しなどの文言に極力漢字を入れない」ことも意識しました。
なるべく柔らかい印象にすることを心がけてみました。
エンタメ性を出したい → プチ匿名（名前入り）機能の実装
さらに、「もっとエンタメ性を出すにはどうしたらいいか？」ということも考えてみました。
今までの機能では、「1. 送りたいバーチャルチョコをえらぶ」「2. メッセージを送る」のみだったのですが、それに加えて「3. 匿名でも名前を入れられる機能」を実装しました。
↑ログインしていなくても名前を入れてメッセージができる
これにより、「匿名でも名前付きでメッセージを送ることができる（プチ匿名）機能」が爆誕しました。ルギア爆誕以来の爆誕です。
ちなみに、送り手がログインしているかどうかで、確認ページの表示が変わるので、なりすましを防止。
・送り手が未ログイン
・送り手がログイン（自分自身に送るとそれもバレてしまう笑）
おそらくですが、イラストの変更や文言修正に加えてこの「プチ匿名機能」が加わることにより、「エンタメ性が増して一気に利用者が増えた」と考えられます
2020年2月13日、突如バズりはじめる→サーバー関連が即パンク
さまざまな試行錯誤の末、プチリニューアルを果たしたチョコボックス。
正直、何がきっかけでバズったのかはよく分かっていません。インフルエンサーがシェアした形跡もなく、自然に拡散され、一気にバズりました。
以下はエンジニア寄りの内容なのでサラッと書いていきます。今後、なにかきっかけがあればどこかの勉強会・登壇などでお話できればいいなと思ってます。
サーバー（Heroku）のプランを変更（複数回）
チョコボックスは「Ruby on Rails」でつくったWebアプリをHerokuというサーバーに載せて運用しています。
Herokuに関しては「当ブログvdeepの記事」でもいくつか書いています。
ちなみに2年間、Herokuは「Hobbyプラン（毎月約700円）」データベース（Postgres）に関しては「無料プラン」でずっと運用していました。
バズってからすこしすると、タイムアウトエラーが出始めました。
未だにてんやわんやしていてログを追えてませんが、おそらく「Herokuのリクエストタイムアウトが30秒で発生する」ことが原因かと思います。メッセージの書き込みが大量におこったのが直接の原因かと。
ちなみに、okutaniは「絶賛お仕事中」でした。「個人開発辛すぎ」と、そのとき天井を見つめながら思いました。
さいわいリモートワークだったので、メインの仕事に支障をきたさないように試行錯誤していました（他の時間に稼働して充填させてもらったり、なるべくSlackの連絡を確認したり）。
Herokuはぽちぽちすればプランを変更できるので、その点は楽でした。最終的にはHerokuサーバーの「Performance M（月額約5万円）」で安定しました（後述するPostgresサーバーの置換作業も含んだ上での安定稼働です）。
しかし、データベースの対応については「データベースを置換する必要」が出てきました。
データベース（Postgres）を総入れ替え（計2回）
次に、Postgresの無料プランを一番安い有料プラン（Hobby Basic）に切り替えることにしました。Hobby Basicでも1000万行のデータを格納できるので、これで十分対応できると思ったからです。
ただし、Herokuのプラン変更と違い「データベースの切り替えにはサービスを一時停止（！？）」しなければならず、めっちゃくちゃ緊張しました。吐くかと思いました。
1度目の置換は2.13 15時頃におこなうことにしました。心臓バックバク。マジちゃんと対応できるの俺。
しかし、ここで光明が。
実は、以前に勉強がてら「データベース（Heroku Postgres）の置換作業」を記事にしていたのです。
LINK【Heroku】PostgreSQLのプランを変更する方法 | vdeep
過去の自分、マジ神！！！涙
目の前が涙で滲んでいきました。リプレイス作業はメンテナンスに切り替えてから約5分で完了しました。気分はスーパーハッカー。
しかし、一番安いプランではデータベースの書き込みのリクエスト数が多すぎてうまく裁けず、やむなく2回目のリプレイス作業。
この時点（2.13 21:00ごろ）で同時アクセス数が5000を超えていました。
（スクショ貼りたかったんですが、たしかGoogle Analyticsのスクショをブログに貼るとGoogleさんに怒られるとかどっかで聞いたので割愛）
このとき僕は「もう意味がわからん」って六畳一間のクソ狭い家で一人つぶやいてました。こんな数字はじめてみたよ僕。さっき同じ作業したけど怖すぎるよ俺。
メンテナンス画面を出し、同じく5分でdone。スーパーハッカーokutani再び。
とりあえずPostgresは「Standard 0（月額約5000円）」で落ち着きました。ふぅ。。。
メールサーバー（SendGrid）が止まる
途中まで気が付かなかったのですが、Herokuで使っていたメールサーバーの「SendGrid」が止まってました。もちのろん、これも無料でした。
メールは「チョコ付きメッセージが届いたときにユーザーにお知らせ」するために送っていました。
ちなみに、それに気がついた2.14の時点でチョコ付きメッセージは「合計10万個以上」送られていました。じーざす。
「まぁプラン変更すれば復帰するやろ！」とかんたんに考えていて、いざプラン変更しよう思ったら不可。
そのうちSendGridからメールが届きました。海外のサービスなのですべて英語。俺、英語苦手なの知ってた？
……はい
ちょっと今書くの疲れてきてマジ断念しそう
なので、SendGridのサポートのジェニファー（仮名）とのメールのやりとりを超意訳してお届けします（実際はもっとちゃんとやりとりしてますし、内容はすべて英語です。あいみょん聴きながら書いてるのでジェニファーにしました）。
ジェニファー（仮）
okutani
***
↑ジェニファー（仮）から実際に送られてきたメールの文末
***
心の中で（ハッピーセンディングじゃねーよ……）と画面をにらみながら、とりあえずは復旧したことでホッとしました。
こうしてメールも送信されるようになり、SendGridのプランも変更しました。おそらく約10万通以上送るので「Goldプラン（月額約2万円）」のプランに変更しました。ええ、しました。
サーバー代いくらかかるのよこれ！！！
ちなみに、チョコボックスには広告を一切貼っていないので、収益は0円です。
まだサーバー代の請求はきてないんですが、なんかもうちょっとあれです、あれだよ、うん。誰か酒おごって。
ツイッター連携時の権限について（超超超辛かった）
バズりはじめてすぐに、「チョコボックスってバーチャルチョコのWebアプリ、ツイッター連携の権限多すぎて危険だよ！みんな気をつけて！」といった内容のツイートが拡散されました。
正直、2年以上前に開発していたので、権限の設定はそのタイミングでどのように設定されていたか覚えていませんでした（こう書くと叩かれそうですが実際そのときは覚えていなかった）。
Twitter devの管理画面にログインして「Read and write」と「メール送信のオプションをON」になっていることは確認できました。
2年前に実装したときは、それらの細かい仕様を実際には把握しておらず（こうかくとまた叩かれそうですが、事実なのでちゃんと書きます）、開発者からすると「実装したい要件を満たせている権限であれば良い」ぐらいにしか考えていませんでした。
もちろん、「ユーザーが不利になるような実装はしていませんし、ブロック機能やフォロー外し機能なんかむしろ権限で欲しくありません」。
ただ、ここは「ツイッター連携の仕様上、どうしてもついてくる」ものです。バズったあとの対応だったので、サーバーが落ちないように対応したり、それはもういろいろやりながら、必死にもがき苦しみながらちゃんと調べました。
結論から言うと、「チョコボックスの開発要件に合った権限が適切に設定されている」ということが、きちんと確認できました。
「togetter」の以下のページがとても参考になりました。エゴサしていたときに優しさに溢れる方がつぶやいてくれていてマジ助かりました。本当にほんとうに、ありがとうございました。
参考Twitter連携の権限について – トゥギャッターの使い方・ヘルプ
以下togetterからの引用です。
なぜ不要な権限まで許可しなきゃいけないの？
Twitterアプリで設定できるアクセス権限は3種類のみです。そのため、Togetter側が必要な権限のみを選択することができません。詳細はTwitter公式の開発者向けページに記載されています。Togetterの仕様上、2つ目の「Read and Write」が可能なアクセス権限を許可していただく必要があるため、このような設定となっています。ご了承ください。
チョコボックスはtogetterと同じく「Read and Write（チョコボックスでは+メールアドレスの取得）」を選択しています。
なぜなら、「ユーザー情報の取得」「返信機能」の要件を満たすのがこの「Read and Write」でないといけないからです。
「危険なアプリだ」とツイートした方に直接、「ユーザー情報の取得」「返信機能」でしか利用していないことをリプライで伝えました。
分かってくれる方が大半でしたが、中には「お前が危ないやつかどうか分からないだろう」というコメントもありました。
正直、それは正解でもあります。
実際問題、「開発者がやろうと思えばなんでもやれてしまう権限」なのです。それは「ツイッター連携のアプリを開発する際の仕様がそうなっている」からなんです。
なので、そこはもう信頼してもらうしか現状無理なんです。
以下は僕の大好きドットインストール、F.Ko-Jiさんの記事です。たまたまさっき見返してたらF.Ko-Jiさんだと気が付きました。かなり分かりやすくまとまっています。
参考Twitter連携アプリの権限とやむを得ない事情について理解しておこう – F.Ko-Jiの「一秒後は未来」
以下引用。
Twitter と連携するアプリケーション (以下、連携アプリ) を開発者が開発する際には、「この連携アプリはTwitter上のデータに対して何ができるか？」という権限を決める必要があります。
その権限には3段階あって、
* Read only (読み込み)
* Read and Write (読み込みと書き込み)
* Read, Write and Access direct messages (読み込み、書き込み、DMの閲覧) (2019年8月16日以降は +DMの送信)というものです。とてもざっくりしています。
そう考えると、「Read and Write」を選択した時点で、もういろいろと不要な権限がついてくるんです。
つらつらの辛。
そしたらもう個人は信用ないからツイッター連携アプリなんて一切作れないじゃん。。。
「サーバー関連のパンク対応」「いつサービスが落ちるか分からない恐怖」「メインの仕事の対応」……
それらを常に意識しながらこの「ツイッター連携の権限について」に向き合わないといけませんでした。
ちなみに、もう理解されている方もいると思いますが、「質問箱」「マシュマロ」「Togetter」「診断メーカー」などのツイッター連携アプリはほぼすべて同じ権限（メールアドレスの取得は各サービスによって違う）をログイン時に求められます。
（すべてのサービスのスクショ撮ったんですが、なんか貼ったらいろいろ面倒になりそうなので割愛します）
……ああ、なんか書いてて頭がぐらぐらしてきた。
チョコボックスのツイッター連携時の権限についてまとめ
上記を踏まえ、急遽以下の画像を用意しました。
・チョコボックスツイッター連携の権限について
今は時間がないので、明日あたりにチョコボックスに上記の画像付きのページを新しく実装する予定です。
こちらに用意しました（LINKチョコボックスに登録/ログインの前に | チョコボックス）
本当はバズる前にこれを用意したかった……
もしかすると、一部の人は「チョコボックスっていう危険なアプリをokutaniっていうやつが作った」と思っているかもしれません。
実際に「チョコボックスは危険らしいから退会しました」というツイートもちらほら見かけます。
個人開発している身としては、「絶対に、完璧に、安全なアプリです、とは言い切れない」ので（というか、そもそもこの世の中に存在するすべてのサービス・システムで絶対に安全なものなんて存在しないというのもありますが……）、退会することを止めることは自分はしません。
ただ、今現在、「ツイッター連携の権限による、チョコボックスユーザーに何かしら害が及んだという事例は1件も存在していない」です。自分が確認している中では。
ほんとはさ、俺はこれが言いたかったんだよ
最初は勉強目的で作成しはじめたチョコボックス。
でも、実際にエゴサーチしたり、サービスを利用してくれている人たちのことを思うと、次第にこんな感情が芽生えてきました。
チョコボックスは「あの人にチョコレート渡したいけど直接会って渡すなんてハードル高いよ、、、せめてバーチャルチョコでもいいから、匿名でもなんでもいいから、本命チョコ渡したいなぁ、、、」なんて甘酸っぱい青春送ってる君のために！！！作ったんだからな！！！マジで明日がんばれよ！！！ pic.twitter.com/RKjsdj9yny
— okutani@チョコボックス開発者 (@okutani_t) February 13, 2020
（自分が単純にバーチャルチョコもらいたかったよこしまな気持ちはさておき）
「言いたくても言えない気持ちを匿名という形でもいいから伝えたい」って人は、この世の中に絶対に存在すると思います。
それが、たった一人でも、「チョコボックスのおかげで言いたいことが言えた。それで、自分の人生が変わるきっかけになった」。
そんな可能性があるだけで、それだけでもういいじゃないですか。ね。
まとめ
一気にこの記事を書き上げたので、ところどころ情報として抜け落ちているところもあるかと思いますが、なるべく早くこの報告記事を公開したかったので、2月16日現在公開させていただきました。
感想としては、個人開発はやってよかったし、勉強にもなった。だけどいろいろと辛いことはあった（小学生並感想）。今は頭が動いていないのでそれぐらいの感想になってしまいます。もうさ、キーボード打つ手が震えてやがらぁ。
ちなみに映画化の話はいつでも受け付けておりますので、関係者の方は当ブログのお問い合わせページからお気軽にご連絡ください。フェイスブックの映画みたいに「Theはいらない、チョコボックス」って去るシーンだけ本人出演でできればお願いします。超がんばりますよろしくお願いします。
それと、チョコボックスは今後運営を続けていくつもりですが、「個人で運営していくことが難しくなった場合、信頼できる会社に譲渡するか、サービスを閉じる」可能性もあります。
ですが、せっかくですので、チョコボックスの存在をできる限り残していきたいのが本音です。
レポートは以上です。最後までお読みいただき、ありがとうございました！
バレンタイン終了ー！#チョコボックス? は約4万8000人が登録、「約14万個！」のバーチャルチョコがプレゼントされたよ！（お礼チョコ約2万6千、ちょっといいチョコ約2万3千、高級チョコ約5万1千、本命チョコ約4万）
ツイッター日本トレンド1位も取れました！うれしい！
これからもよろしくね✌️? pic.twitter.com/7VdIyYxiZo
— Chocobox?(公式) (@chocobox_pr) February 14, 2020
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
