【個人開発】フローチャートで診断を作れるWebサービスをリリースしました【全コード公開】

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

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

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

# なにを作ったの？

[診断チャートメーカー](https://shindan.now.sh/)

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/a0c4e669-3613-19e0-369f-af0ae46d85e3.gif)

![2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/85e6cece-eafb-747d-5dbc-b09e23bf92fd.gif)


[あなたにおすすめのお菓子を診断します \| 診断チャートメーカー](https://shindan.now.sh/posts/VSU6IXR9zrhHsyEUt5hX)

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

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">新しいサービスを作りました🎉🎉<br><br>選択形式の診断を簡単に作成できます！<br><br>フローチャートで簡単に編集できます<br><br>いろんな診断などを作って遊んでみてね！<br><br>拡散していただけると嬉しいです！<a href="https://t.co/SFmJP7YQwE">https://t.co/SFmJP7YQwE</a> <a href="https://t.co/S4dCIrwqqg">pic.twitter.com/S4dCIrwqqg</a></p>&mdash; れとるときゃりー@TwiCall(ツイッター通話アプリ)作った (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1272153123113426945?ref_src=twsrc%5Etfw">June 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[診断チャートメーカー](https://shindan.now.sh/)

# GitHubレポジトリ

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

[retoruto\-carry/shindan\-chart\-maker] (https://github.com/retoruto-carry/shindan-chart-maker) 👈 本体

[retoruto\-carry/shindan\-chart\-maker\-ogp](https://github.com/retoruto-carry/shindan-chart-maker-ogp) 👈 OGP自動生成API

# なんで作ったの？

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


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最後のでかい文字がデーンと出てくるところがおもしろくて無駄に繰り返してしまう <a href="https://t.co/PVGtRvjqla">https://t.co/PVGtRvjqla</a> <a href="https://t.co/FGb1C3lUQX">pic.twitter.com/FGb1C3lUQX</a></p>&mdash; あずま (@sngazm) <a href="https://twitter.com/sngazm/status/1265306941108023298?ref_src=twsrc%5Etfw">May 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こういうGUIエディタが作りたい。<br><br>いい感じのライブラリOR自前で実装するのに参考になる情報知ってたら教えてほしいです〜 <a href="https://t.co/a7IBK3rm9E">pic.twitter.com/a7IBK3rm9E</a></p>&mdash; れとるときゃりー@TwiCall(ツイッター通話アプリ)作った (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1265507769597210625?ref_src=twsrc%5Etfw">May 27, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/8cbf6d9a-69d3-2277-04f3-5e5442d4a333.png" height="300px">

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

👇試しに実装したみたところ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">動いた〜〜〜〜 <a href="https://t.co/RHV3GJKCal">pic.twitter.com/RHV3GJKCal</a></p>&mdash; れとるときゃりー@TwiCall(ツイッター通話アプリ)作った (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1265668971195297792?ref_src=twsrc%5Etfw">May 27, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

# どうやって作ったの？

## 使った技術

### Nuxt.js

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

### Firebase

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

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

### Vercel

Vercel上にホスティングしたNuxt.js（Universal mode）で、Firebase Authenticationを使うにはほんの少しだけ[設定](https://qiita.com/retoruto_carry/items/3ab8199e510dc97b8f02)が必要でした。

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

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


### Typescript

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

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

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

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

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

## Tailwindcss

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

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

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

便利です。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/c37888ae-0228-9141-d5a4-0b9fe2ede756.png)

![2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/85e6cece-eafb-747d-5dbc-b09e23bf92fd.gif)

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

Vue.jsの公式サイトに、[ツリー表示のUIの実装サンプル](https://jp.vuejs.org/v2/examples/tree-view.html)が、再帰的に実装されていたのを参考にしました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/359bd557-9325-cccf-abdc-4a652ca052c6.png)



実際のコードだと、このあたりを見るとよく分かると思います。
[shindan\-chart\-maker/NodeTreeEdit\.vue at master · retoruto\-carry/shindan\-chart\-maker](https://github.com/retoruto-carry/shindan-chart-maker/blob/master/components/partials/NodeTreeEditor/NodeTreeEdit.vue)

## OGPの動的生成

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/c3f43624-5ef4-247d-3110-7efcf1fb86ba.png)


[Vercel](https://vercel.com/)の[Serverless Functions](https://vercel.com/docs/v2/serverless-functions/introduction)で動かしています。

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

nodejsでcanvasを実行できるライブラリである、[node-canvas](https://github.com/Automattic/node-canvas)を使って実装しました。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/f7971dd1-45d9-700b-79ce-5eb845dda55e.png)

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

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

[retoruto\-carry/shindan\-chart\-maker\-ogp](https://github.com/retoruto-carry/shindan-chart-maker-ogp)

## タグの実装

![s.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/5aadf438-1245-a599-10d4-2c3b009e23f5.gif)


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

UIは[vue-tag-input](https://github.com/JohMun/vue-tags-input)を使用しました。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/503102e9-e620-9d59-a46e-dccf81fac3fd.png)

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

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

実際のコードだと、このあたりです。
[shindan\-chart\-maker/InputTags\.vue at master · retoruto\-carry/shindan\-chart\-maker](https://github.com/retoruto-carry/shindan-chart-maker/blob/master/components/partials/post/InputTags.vue)

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

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

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

# 今後の展望は？

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

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

# 遊んでみてね

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/56e489cd-c45d-511b-8cd7-f891bf421f09.png)](https://shindan.now.sh/posts/nWIB7XPbfp78vIqNORns)


[あなたにおすすめのエディタ診断 \| 診断チャートメーカー](https://shindan.now.sh/posts/nWIB7XPbfp78vIqNORns)


[きのこたけのこ戦争 \| 診断チャートメーカー](https://shindan.now.sh/posts/jUkBTZT5oh2x1UvUZoji)

[あなたにおすすめのお菓子を診断します \| 診断チャートメーカー](https://shindan.now.sh/posts/VSU6IXR9zrhHsyEUt5hX)

[タロウクエスト \| 診断チャートメーカー](https://shindan.now.sh/posts/Mvv6L7eWNRedviGUqaKq)

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

[診断チャートメーカー](https://shindan.now.sh)

# 宣伝

最近こんなサービスもリリースしました！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「ツイッターで気軽に通話を募集できるサービス」を作りました！！<br><br>リンクをツイートすると先着一名と通話がつながります<br><br>インストール不要で、PC＆スマホ対応です<br><br>ぜひ使ってみてください！<br>いいねやRTで広めていただけると嬉しいです…！<a href="https://twitter.com/hashtag/TwiCall?src=hash&amp;ref_src=twsrc%5Etfw">#TwiCall</a> <a href="https://twitter.com/hashtag/%E3%83%95%E3%82%A9%E3%83%AD%E3%83%AF%E3%83%BC%E3%81%A8%E5%96%8B%E3%82%8D%E3%81%86?src=hash&amp;ref_src=twsrc%5Etfw">#フォロワーと喋ろう</a><a href="https://t.co/5vlarlRAat">https://t.co/5vlarlRAat</a> <a href="https://t.co/HNRqTWNpxG">pic.twitter.com/HNRqTWNpxG</a></p>&mdash; れとるときゃりー@TwiCall(ツイッター通話アプリ)作った (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1258356747594371073?ref_src=twsrc%5Etfw">May 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

以上、[診断チャートメーカー](https://shindan.now.sh/)を作った話でした。

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

いいねやコメント、SNSでの共有、[はてなブックマーク](https://b.hatena.ne.jp/entry?url=https%3A%2F%2Fqiita.com%2Fretoruto_carry%2Fitems%2F0d427e24ed7ba6d4d6e7)等をしてくださると、非常にうれしいです。

良かったら、ツイッター ([@retoruto\_carry](https://twitter.com/retoruto_carry))フォローしてください。

GitHubレポジトリのスターをしてくださると泣いて喜びます。

[retoruto\-carry/shindan\-chart\-maker] (https://github.com/retoruto-carry/shindan-chart-maker) 👈 本体

[retoruto\-carry/shindan\-chart\-maker\-ogp](https://github.com/retoruto-carry/shindan-chart-maker-ogp) 👈 OGP自動生成API