平成年表というWebサービスを5日間で作ってリリースしました。
こんにちは、かつおです。本日、「平成年表」というWebサービスを構想から5日間でリリースしました。選定した技術、助けられたQiita記事などなどを紹介したいと思います。
つくったサービス
- 気軽に平成の想い出を年表にして投稿することができます
- 自由なテーマで投稿できます
- 投稿した年表をSNSへシェアしたり、サイト上でコメントしたりして盛り上がれます
サービスへの想い
平成がもう終わってしまいます。あと3か月です！！平成は本当にいろんなことがあったと思います。たぶん皆さんも同じだと思います。いろんな想い出を年表にして、みんなで懐かしんだり盛り上がったりしませんか？平成をあと少しだけ…
##使った技術
- vue.js => [フロント]
- vue-router
- vuex
- vuetify
- firebase => [バック]
- Hosting
- functions
- firestore
- Authentication
要はvue.js＋firebaseのみです。firebaseのfirestoreでデータを保存してます。サーバー回りを全部firebaseに寄せることでフロントの開発だけに時間を集中することができました。firebaseはほんと凄いよ。私なんてエンジニアといえるほどの実力ないので、多分この構成じゃないと開発するのは無理だっただろうなぁって思ってます。
##助けられたドキュメント
firebaseの公式ドキュメント
firebaseはほんとうに公式ドキュメントが充実していて助けられました。
Qiita
https://qiita.com/zaru/items/829b4017a33df907f087
色々見ましたけど、とくにこちらの記事。平成年表はサーバーサイドレンダリングをやっていませんでした。リリース間際になって本番で色々と試していた時、Twitterカードが出ないことに気づいたんですね。SNSへシェアできるという手軽さを売りにしたかったのに、これは焦りました。この解決方法ってSSR化することが一般的なのだとは思うのですが、経験も知識もなく困ってたところ、この記事に出会いました。この記事では、SNS向けのリンクからのアクセスの場合、firebase Functionsにルーティングし、FunctionからSNSへ必要なタグだけ返すという実装方法を紹介いただいてます。ほんとに神記事でした。ありがとうございます。
5日間でリリースできた理由
1 Vue、firebaseの開発の手軽さ
ほんとうに手軽に開発できるのでオススメの組み合わせです。ただ全文検索などできない（別サービスと組み合わせれば可能）なのでやりたいこととスピード感との比較にはなるでしょう。vue.jsは長きに渡っていたDOMとの戦いを一切やらなくていいので、開発のストレスが本当に少なく、サクサクとUIを作り進めることができました。
2 機能を絞る
例えば、こんな感じで絞りました。
- ログインはTwitterのみ（facebookも実装したい）
- 投稿できるのはテキストのみ（画像も追加したい）
- 投稿者のみしか編集できない（共同編集機能も作りたい）
- 検索機能なし笑（新着順と人気順ソートのみ、タグもなし）⇒投稿が多いようなら何か実装する
- プロフィール編集機能なし笑 ⇒Twitterのみの間はいいかなと...facebookログイン導入の際に実装かな。。
- デザインへのあきらめ（泣）
3 Twitterと嫁さんに宣言する
これは絶対にやったほうがいいでしょう。
4 平成自体のタイムリミット
のんびり作ってたら平成のタイムリミットに間に合わない！というプレッシャーも笑
さいごに
なんとかリリースすることができました。作っている間は本当にワクワクすることができたなぁと思ってます。使ってくれる人が出てきてくれることを祈ります！よろしくお願いいたします。