Help us understand the problem. What is going on with this article?

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

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

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

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

なにを作ったの?

診断チャートメーカー

1.gif

2.gif

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

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

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

診断チャートメーカー

GitHubレポジトリ

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

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

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

なんで作ったの?

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

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

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

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

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

どうやって作ったの?

使った技術

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つのスタイルのみを変更するユーティリティクラスを組合わせて使います。

便利です。

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

image.png

2.gif

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

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

image.png

実際のコードだと、このあたりを見るとよく分かると思います。
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に指定した文字列を描写した画像を返却します

image.png

VercelServerless Functionsで動かしています。

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

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

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

image.png

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

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

retoruto-carry/shindan-chart-maker-ogp

タグの実装

s.gif

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

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

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

image.png

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

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を利用して、ランキング機能をつけたいですね。

遊んでみてね

image.png

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

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

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

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

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

診断チャートメーカー

宣伝

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

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

以上、診断チャートメーカーを作った話でした。

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

いいねやコメント、SNSでの共有、はてなブックマーク等をしてくださると、非常にうれしいです。

良かったら、ツイッター (@retoruto_carry)フォローしてください。

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

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

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

retoruto_carry
個人WEBサービス開発者。おうちハックもします。大学3年生。 作ったサービス ・みんなのボタンメーカー (https://btns.fun) ・やるぞ宣言(https://yaruzo.me) ・仮想通貨で投げ銭出来る音楽投稿サイト(https://tipmusics.com) 等
https://retoruto-carry.github.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away