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

2年ほど前からwebを勉強しはじめて、ひとりでwebサービスをたくさん作っている大学4年生です。

また新しいWebサービスを作りました

なにを作ったの？

フローチャートで診断を作れるWebサービスです。

選択形式の診断を簡単に作成できます。

新しいサービスを作りました🎉🎉

選択形式の診断を簡単に作成できます！

フローチャートで簡単に編集できます

いろんな診断などを作って遊んでみてね！

拡散していただけると嬉しいです！https://t.co/SFmJP7YQwE pic.twitter.com/S4dCIrwqqg
— れとるときゃりー@TwiCall(ツイッター通話アプリ)作った (@retoruto_carry) June 14, 2020

診断チャートメーカー

GitHubレポジトリ

スターをしてくださると泣いて喜びます

retoruto-carry/shindan-chart-maker 👈 本体

retoruto-carry/shindan-chart-maker-ogp 👈 OGP自動生成API

なんで作ったの？

あずまさん(@sngam)がWebでフローチャートを作っていて、そこからインスピレーションをもらいました。

最後のでかい文字がデーンと出てくるところがおもしろくて無駄に繰り返してしまう https://t.co/PVGtRvjqla pic.twitter.com/FGb1C3lUQX
— あずま (@sngazm) May 26, 2020

「こういうフローチャートを誰でも簡単に作成できるUIってできないかなぁ...」と思ったところ、気づいたら紙にペンを走らせていました。

こういうGUIエディタが作りたい。

いい感じのライブラリOR自前で実装するのに参考になる情報知ってたら教えてほしいです〜 pic.twitter.com/a7IBK3rm9E
— れとるときゃりー@TwiCall(ツイッター通話アプリ)作った (@retoruto_carry) May 27, 2020

「せっかくだし自前で実装してみよう」と思い、フローチャートのエディターを、UIライブラリを使用せずにフルスクラッチで実装してみました。

👇試しに実装したみたところ

動いた〜〜〜〜 pic.twitter.com/RHV3GJKCal
— れとるときゃりー@TwiCall(ツイッター通話アプリ)作った (@retoruto_carry) May 27, 2020

ついでに、せっかくなので、誰でも診断を作れるように、そのままサービス化しました。

どうやって作ったの？

使った技術

Nuxt.js

Vercel上にホスティングしています。Universalモード（SSR）です。

Firebase

データストアとしてFirebase Firestore、認証としてFirebase Authenticationを使っています。

Firebase CLIで、Firestoreのルールやインデックスも管理、デプロイできます。

Vercel

Vercel上にホスティングしたNuxt.js（Universal mode）で、Firebase Authenticationを使うにはほんの少しだけ設定が必要でした。

Vercelは、個人開発だと無料なので、最近めちゃくちゃ使っています。最高です。ありがとうございます。

GitHubと自動連携して、ブランチごとに自動でデプロイしてくれるのでとても便利です。

Typescript

今回始めてTypescriptを使ってみました。

かなり体験として良かったので、驚きました。

コンポーネントのPropsとしてどういう型が落ちてくるのかが分かると、コンポーネントの取り回しが非常に良くなりました。

もっと早くから利用しておけばよかったです。

ほとんど生まれて初めてTypescriptを書いたので、多分もっとよく書けると思います。コードは参考にしないでください。

Tailwindcss

薄いcssフレームワークです。

Bootstrapのような他のCSSライブラリとは異なり、ボタンの外観などはUIパーツの見た目は定義されていません。

1つのスタイルのみを変更するユーティリティクラスを組合わせて使います。

便利です。

フローチャートエディター

コンポーネントを再帰的に持たせることで実装しています。

Vue.jsの公式サイトに、ツリー表示のUIの実装サンプルが、再帰的に実装されていたのを参考にしました

実際のコードだと、このあたりを見るとよく分かると思います。
shindan-chart-maker/NodeTreeEdit.vue at master · retoruto-carry/shindan-chart-maker

OGPの動的生成

https://shindan-chart-maker-ogp.now.sh/api/ogp?title=hogeにアクセスすると、titleに指定した文字列を描写した画像を返却します

VercelのServerless Functionsで動かしています。

Typescriptをサーバーレスに実行しています。

nodejsでcanvasを実行できるライブラリである、node-canvasを使って実装しました。

文字列の折返しと中央寄せが地味に面倒でした。

こちらもVercel上のホスティングで、無料運用です

作ったAPIのGitHubリポジトリはこれ👇です。スターしてね。

retoruto-carry/shindan-chart-maker-ogp

タグの実装

タグの補完をできるようにしています。

UIはvue-tag-inputを使用しました。

タグ一覧は以下のように持たせています

これを前方一致検索することで補完を実現しています。

post（投稿）の作成時に、その投稿に紐付けられてたタグをすべて、上記のタグ一覧にもsetするようにしています。

実際のコードだと、このあたりです。
shindan-chart-maker/InputTags.vue at master · retoruto-carry/shindan-chart-maker

どれくらいの期間で作った？

2週間で完成しました。作業時間は約60時間、約150commitくらいです。

Firebaseは慣れてきたら、かなり楽ですね。次はもっと早く作れそうです。

今後の展望は？

いい感じの、Firebase×Typescript×Tailwindcss×OGPが揃ったサンプルになったので、これを雛形として、また新しいサービスを作ります。

あとは、Google AnalyticsのAPIを利用して、ランキング機能をつけたいですね。

遊んでみてね

あなたにおすすめのエディタ診断 | 診断チャートメーカー

きのこたけのこ戦争 | 診断チャートメーカー

あなたにおすすめのお菓子を診断します | 診断チャートメーカー

タロウクエスト | 診断チャートメーカー

ぜひ診断を作ってみてください！！