BETA

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

投稿日:2018-10-13
最終更新:2018-11-29
※この記事は外部サイト(https://qiita.com/retoruto_carry/items/d6a...)からのクロス投稿です

こんにちわ。れとるときゃりー(@retoruto_carry)と申します。

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

今回で3つめのwebサービスです。

作ったもの

みんなのボタンメーカー

ツイッターでつぶやけるボタンを簡単に作成できるサービス。 2018/9/11 追記 予想以上に人気なってしまい、想定を遥かに超えるアクセスで一時サーバーがダウンしていましたが、サーバーのスケールアップをして復旧させました
2018/9/13 追記 公開3日で累計8万PV、4万UUを突破しました

もちろんスマホでもいい感じに見れます

みんなのボタンメーカー

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

少しまえに、やるぞ宣言というwebサービスを開発している片手間に、「つらいときに押すボタン」というサイトを悪ふざけで作りました。

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

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

せっかくならみんなが作れるようにしたほうが楽しいだろう思って、このサービスをつくりました!

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

バックエンド

  • Laravel
    • 超有名なphpのフレームワークです
    • これでwebサービス作るのは3回目なので、とくに詰まる点は無かったです
  • Redis
    • NoSQLとかいうやつらしいです
    • 最初全然よくわからなかったけど、keyとvalueをメモリに登録できるやつっぽいです
    • これでランキング機能を実装しました
    • 日別、週別をつくりました
    • [開発初期に作ったランキング実装のサンプル] (https://github.com/retoruto-carry/sample_view_ranking_with_laravel_redis)

フロントエンド

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

ボタン作成フォームのページで使用した技術

  • Vue.js

    • 双方向バインディング(リアルタイムで変数が共有できる的な?)とかができるjavascriptフレームワークです
    • これでリアルタイムに作成されるボタン表示できるフォームをつくりました
    • コンポーネントとか使ったことなかったので読み込むのに大苦戦しました
    • Swatche っていうカラーピッカーが便利でした
    • 絵文字ピッカーはこれを使いました
    • Vue.jsはいっぱいコンポーネントがあって便利ですね
    • いつかシングルページアプリケーションも作ってみたいです
  • html2canvas

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

インフラ

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

  • deployer
    • PHPのデプロイツール
    • 今までFTPで手動でやっていましたが、これで自動化するとめちゃくちゃ楽になりました。コマンド一発でデプロイできるので、アップデート作業が苦にならないです。
  • AWS S3

その他

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

今回の振り返り

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

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

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

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

これくらいの気持ちで、細かい点にずっとこだわりすぎないことを意識していきたいです。

今後追加したい機能

「究極の2択ボタン」が作れるようにしたいです。

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

みたいなやつです。

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

ここまで読んでくれた方へ

ぜひ、みんなのボタンメーカーで遊んでみてください!!! よろしくお願いします!!!

こんなボタンとか押してみてくれてもいいんですよ???

(画像を押すとサイトに飛びます) 他にもボタンを見てみる

自由にボタンを作って遊んでみてください!(ログイン不要)

とてもかんたんにつくれます! ボタン作成ページ

みんなのボタンメーカーを作ったお話でした。ここまで読んでくださりありがとうございます!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@retorutocarryの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!