はじめに
システム開発の世界に足を踏み込んで3年目のペーペーです。
この度初めて個人開発でWebアプリを作ってみました。
せっかくなら0からアプリリリースまでの流れを記事に起こし、これから開発を始める方などの参考になればなと思いました。
作ったもの
自分の趣味を一覧化し、他の人に共有する「Daily Palette」というアプリを作りました。
友達と話していて「おすすめの漫画教えて」と聞かれた際にONE PIECEとかありきたりなもの（失礼）しか咄嗟に出てこなく、自分の趣味を一覧化できるサイトがあればいいなと思い、作成しました。
こんな感じでいろんなジャンルごとに好きなタイトルを一覧化することが出来ます↓
開発前準備
コンセプト決め（2人日くらい）
漠然と以下の方針がありました。
・TODO管理や電卓などローカルで完結するアプリよりかはSNSのような他の人と繋がれるものを作りたい！
・日々の生活で痒いけど届かないようなプラスアルファしてくれるアプリ
・とはいえ初めてなのでコンセプト、技術要素はシンプルに。
このような願望ベースでアイデア出しをした結果、「趣味を共有する」というコンセプトの本アプリを作る方針になりました。
アーキテクチャ検討・調査（1人日）
要件を満たすには以下の機能がざっくり必要
・ユーザ認証機能
・登録したデータを保存する機能（データベース）
・ホスティング機能
調べたところFirebaseが最強そう。以下の記事を参考にさせていただきました。
■Firebaseの始め方
https://qiita.com/kohashi/items/43ea22f61ade45972881
フロントエンドは触ったことのあるNuxt.js + バックエンドはいろいろ出来そうなFirebaseで決定。
開発
環境構築 (0.5人日)
まず初めにGitアカウントの作成をし、開発者のローカルにチェックアウトしました。
下記の記事が参考になると思います。
■GitHubアカウント作成とリポジトリの作成手順
https://qiita.com/kooohei/items/361da3c9dbb6e0c7946b
Nuxtは公式が充実しているので、ほとんど公式を参考にしました。
■Nuxt.js公式
https://nuxtjs.org/ja/docs/get-started/installation
下記の記事も参考になりました。
■Nuxt.js + TypeScript での環境構築手順
https://qiita.com/couragenki/items/d8a809c383c4fef9ecda
今回はSPAモードで、言語はTypeScriptを選択しました。
この辺の良し悪しは作るものとか、その規模感によっても変わると思います。
Nuxtプロジェクトが作成できたら、Firebaseアカウントを作成します。
Firebaseについても公式がとても丁寧なので、公式だけで問題ないと思います。
■Firebase公式
https://firebase.google.com/?hl=ja
NuxtのプロジェクトからFirebaseを呼び出すところについてはやや詰まったのですが、
下記の記事が一番参考になりました。
■Nuxt で Firebase を使う (Cloud Firestore & Hosthing)
https://chaika.hatenablog.com/entry/2019/01/21/113000
開発 (12人日くらい)
ここではとにかく頑張るのみです。
リリース
開発が終了したらついにリリースです。
リリース時期にやったことをいくつか記載します。
ドメイン取得(0.1人日)
Firebaseの無料プランでもそのままアプリリリースすることは可能ですが、
独自ドメインでも、年に1000円前後しかかからないので買ってしまいました。
独自ドメインは、こちらから取得することができます。
■Google Domains
https://domains.google/intl/ja_jp/
「dailypalette.com」を使いたかったのですが、すでに使われていたので
ハイフンを入れて「daily-palette.com」を購入！
Firebaseを使っているとカスタムドメイン設定も簡単でした。
下記の記事を参考にしました。
■firebase hostingにカスタムドメインを設定する
https://qiita.com/tocomi/items/f7754a7ff05879fbb815
デプロイ（0.1人日）
Firebaseではデプロイも簡単に行えます。実際リリース時というよりは、開発しながらもデプロイは何度か行いました。
■Firebase Hostingを使ってみる
https://firebase.google.com/docs/hosting/quickstart?hl=ja#deploy
ここまでできれば完了です！
ブラウザから、独自ドメインで決めたURLを叩くと自分が作ったサイトにアクセスすることができます〜！
OGP設定（0.2人日）
リリースした後で、気付いたのですがLINEやTwitterでの共有をした際にでてくる画像や文言の設定も必要でした。
こんなやつ↓
下記の記事が参考になりました。
■Nuxt.jsでOGP設定をする方法
https://qiita.com/TK-C/items/317a02620fe3f5b92673
以上です！良い個人開発ライフを！！