LoginSignup
124
58

More than 3 years have passed since last update.

@retoruto_carry(れとるときゃりー)

【個人開発】爆速でClubhouseのアイコンを作れるサービスを作ったので振り返る

Last updated at Posted at 2021-02-15

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

個人でwebサービスをたくさん作っている大学4年生です。

今回作ったもの

Clubhouseアイコンメーカー

Clubhouse用に、アイコンに枠や文字を入れることができるサービスです。

Twitter post - 1.png

画面

screen.png"

操作中の様子

using.gif"

実際にClubhouseのアイコンに設定した例

clubhouse.png

ぜひ使ってみてください

👉　Clubhouseアイコンメーカー

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

Clubhouseで知り合いが、画像を編集してアイコンに文字を載せていました。

自分でも作りたいと思ったので、ついでにだれでもサクッと簡単につくれるようにしました。

制作期間

思いついてから4日間で、ドメイン取得→デザイン→実装→リリースまでしました。

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

Nuxt.js（SPAモード）をNetlifyでホスティングしています。

Typescriptで書いています。CSSフレームワークはTailwindCSSを使いました。

画像生成はSVGをVue.jsで動的に動かして、画像保存時にSVG→Canvas→PNGに変換しています。

開発の様子を振り返る

Day1

Clubhouseで話していて、「Clubhouesのアイコンメーカーとか作ったら面白そうですよね」って話をして、その場ですぐにドメインをとりました。

いわゆるドメイン駆動開発っていうやつですね（違います）

とりあえずComming soonページまで作ってデプロイしました。

Webサービス開発RTAにおいては、一旦ドメインをとってデプロイまで済ませておくことが、短期間でやる気を出して完成させることへのコツです。

その辺にあった紙に適当にアイデアを書きなぐりました。

3〜４枚適当にUIを書いていって、それっぽい感じのUIまで落とし込みました。

サクッと見た目だけ実装します

次に実装方法を考えました。

この記事を参考にSVG→CANVAS→PNGの変換でできそうだな、とアタリをつけました。

SVGを使って画像ジェネレーター的なものを作ったよという話 - KAYAC engineers' blog

Clubhouseの楕円形の切り抜きはSVGのパスでトリミングができました。

SVGで黒の半透明のフィルターを重ね、SVGのテキストで文字を埋め込みました。

実装をやりつつ、並行して友達のデザイナーに手伝ってもらってデザインを詰めていきました。

基本機能を完成させました。あとはどんどん改善をしていきます

楽しくなってしまって、24時間くらい起きて作業していました。

熱中してると眠気より楽しさが勝つときってありますよね。

Day2

このスタイル切り替え機能はちょっと頑張りました。

設計を工夫して、スタイルの追加やそれぞれのスタイルのオプションを別で設定できるようにしました。これは、翌日の実装時にとても助かりました。

この日はやる気が無かったので、半日作業して残りはダラダラしていました。

Day3

前日休んだので、本気を出そうと思って、また２４時間くらい起きて作業しました。

共有導線があると広まるかな〜と思ってつけました。

フォロワーも巻き込んで開発していくととても楽しいです。自分では思いつかない部分はいつもフォロワーに聞いています。皆さんいつもありがとうございます。

これは簡単なので秒でした。

前日の設計のおかげでサクッと実装できました。

ここも前日の設計のおかげでサクッと実装できました。

CSSを整えました。サイトがきれいだとテンションがあがっていいですよね。

Day4

今日中に絶対にリリースするというお気持ちで望みました。

予定になかったのですが、自分がこのサイズ調節機能が欲しくなったのでつけました。

スタイルをさらに追加しました。これかわいいですよね。

リリース直前になったので、OGP画像と宣伝ツイートに使う画像を考えました。毎回めちゃくちゃ悩みます。

リリース

リリース代わりの宣伝ツイートをしました。毎回この瞬間は不安と緊張で心臓がドキドキします。

「使われなかったらどうしよう」「流行らなかったら悲しいな」「うまくいけばいいな」みたいな感情になります。

ただ、今回のようにサービスを爆速で作ってしまえば、最悪無風でも、「数日で作ったからまあいっか〜。次のサービス作ろう〜」と割り切れます。

リリース後

Safariでの画像の保存の仕方がわかりにくかったので、急遽変更しました。リリース後は、修正が入ることが多いので、眠いときにはリリースしないほうがいいですね（戒め）

この問題もリリース後に発覚し、沼にハマってしまって5時間くらい溶かして解決しました。

今回の振り返り

いい感じにサクッとWebサービスを爆速でリリースできたので良かったです。

もっと爆速でアイデアを形にできるようになりたいです。

４月から新社会人なのですが、それまでの間暇なので、毎週Webサービスをリリースするのを目標にやっていきます💪

応援よろしくお願いします

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

ここまで読んでくださりありがとうございます。

👇　ぜひ、このサービスを遊んでみてください

Clubhouseアイコンメーカー

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

良かったらツイッター(@retoruto_carry)もフォローしてね

124
58
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
124
58