みんなの「作ってみた」

【個人開発】Nuxt.js + Firebase + Vuetifyを使ってモチベーションを上げるサービスを作ってみた

2019/07/29

Naotolog
Naotolog

こんにちは!Qiitaへの初投稿です。

趣味と勉強を兼ねて個人開発をしているのですが、今回「人生のカウントダウン」というサービスをリリースしました。

https://lifecountdown.site

個人開発しようと思っている方が少しでも参考になれば幸いです!!

人生のカウントダウンとは

人生のカウントダウンとは今から死を迎えるまでの時間をカウントダウンで表示するサービスです。

使い方は非常に簡単で、「設定」から生年月日と性別を選択するだけです:)

できる限りシンプルに!!

最近流行っているサービスはCGMサービスが非常に多いです。
なので、僕も最初の個人開発で、持ち物共有サービスを作ったのですが、僕しか投稿しておらず中身がスカスカのサービスになってしまいました(苦笑)

ここで学んだことは、誰が作ったかどうかも分からず、コンテンツもほとんどなく活性化していないサービスに対して、ユーザーは登録する気も起きずすぐ離脱してしまうのではないかと推測しました。
ですので、CGMサービスでユーザーが使ってくれるサービスを作るには、かなりクオリティーを高くしなければならないと痛感しました。

しかし、僕のようなまだ駆け出しのエンジニアでは、ちょっとやそっとでクオリティーが高い魅力的なサービスを作るには厳しいものがありました。

そこで、CGMサービスではなく、あらかじめコンテンツありきで認証もないシンプルで分かりやすいサービスを作ろう!と考えました。

それが「人生のカウントダウン」です。

使用した技術

Nuxt.js

Nuxt.jsはVue.jsのフレームワークで最大の特徴はサーバーサイドレンダリングできることです。サーバーサイドレンダリングすることによって初期表示が速く、SEOに強いサイトを作成することが可能です。

また、@nuxtjs/PWAを利用することで簡単にPWA対応することができます。
PWAとはウェブアプリとネイティブアプリの両方の利点をいいとこできるような仕組みです。よければ、スマホのホーム画面にアプリを追加してみてください!

Nuxt.js(SSR)を使用する際にデメリットもあります。その中のひとつのデメリットとしては、Node.jsが動くサーバーにデプロイしなければならないということです。

「人生のカウントダウン」では、現在Google App Engineで動いています。Google App Engineはデプロイするのは比較的簡単ですが、運用するにはある程度インフラの知識は必要かなと感じました。
インスタンス設定はできる限り安く抑えようとF1設定にしていますが、メモリ不足や料金が心配なのでしばらく様子をみようと思っています。

Vuetify

VuetifyとはGoogleが提唱しているマテリアルデザインのUIコンポーネントです。

2019年7月に、Vuetifyがついに2.0にバージョンアップされ多くのコンポーネントが追加されました!

「人生のカウントダウン」の「設定」で、
生年月日を選択するところがあるのですが、そこで、VuetifyのBirthdaypickerを使用しているのですがとても便利で美しいです!

Firebase

FirebaseとはmBassと呼ばれるものでサーバーサイドの部分を簡単に構築することができます。
Firebaseはさまざまな機能がありますが以下の機能を使用しております。

Firebase Storage
名言のデータを保存しています。

Firebase Functions
名言を一日ごとにランダムに表示するために使っています。

cron-job.org を使い毎日12時頃に、Fucntionsで生成されたURLにアクセスするようになっています。そこで名言一覧からひとつランダムに選び、FirebaseStorageの名言を更新するようになっています。

おわりに

とてもシンプルなアプリでしたが流行りの技術を学べなかなか楽しく開発することができました。
これからも、個人開発を続け技術を高めていきたいと思っています。

「人生のカウントダウン」は毎日、違った名言が表示されるようになってますので
もしよければ毎日モチベーションアップに使っていただければうれしいです。

人生のカウントダウン

Twitterをやってますのでもしよければフォローしていただくとありがたいです:)
https://twitter.com/naotolog1