はじめに

こんなサイトを作りました。
https://lowcarb-recommend.com/

3月中旬くらいにそろそろ手を出すか～とVue.jsのお勉強を始め、ゴールデンウィーク終わりごろにそろそろ何か作りたいなーと思っていた時、ちょうど自粛生活で太り気味で糖質制限ダイエットを始めていたので、それに関する情報をまとめたサイトを作ろうと思い作成を始めました。

どんな機能があるの？

機能としては下記3点です。

糖質制限食をランキングで閲覧
糖質制限レシピの閲覧
糖質制限に関するニュースの閲覧

1.の糖質制限食に関しては楽天市場系APIより情報を取得し、ショップごと、もしくはジャンルごと(パンや麺類など)で検索をかけられるようにしました

2.の糖質制限レシピについては、これも楽天レシピ系APIより情報を取得しています。

3.のニュースに関してはGoogle NewsよりRSSを取得しています。

環境

Java
Spring Boot
Vue.js(Vue Router、Vuex、Vuetify)
Swiper.js
Heroku
Mongo DB
Netlify

もともとはVue.jsを使いたかったためフロントエンドは確定として、バックエンドはどうしようかなーと思ってたのですが、全部が慣れていないものだと作るのに時間がかかる→最後まで作り切れなさそうと少しビビっていたので業務で使っているJavaを選びました。

製作期間

2か月

バックエンドは、仕事で使っているJavaということもあり、2週間足らずで終わらせることができました。
フロントエンドについては、学び始めたばかりのVue.jsということもあり、1か月半かけて調べながら完成させました。

苦労したところ

下記に、苦労した点と参考にさせていただいたものをまとめます。

ニュース情報をどう集めるか

当初はニュース関連のサービスでよく使われているであろうNews APIを使おうと思ってました。
しかし、9割9分自分の使い方がまずかったと思うのですが、うまく糖質制限に関する情報を取得できず、代替案を考えていたところ、Google NewsよりRSSを取得する方法を見つけたので、それに切り替えました。

Google News RSSを取得する方法は下記を参考にさせていただきました。
https://qiita.com/KMD/items/872d8f4eed5d6ebf5df1
http://mogakana.blogspot.com/2011/05/javarss.html

Swiper.jsの使い方

「TOPページになにか動くの導入してやろ～」と思いいろいろ調べてみると、当ライブラリに出会いました。
トップページに写真の上にキャプションをうまく載せられなかったり、うまくレスポンシブにできなかったりといろいろ思考錯誤しました。

Swiper.jsに関しては下記を参考にさせていただきました。
https://qiita.com/whike_chan/items/c68e094f412b04b1afc2
https://github.surmon.me/vue-awesome-swiper/
https://www.kabanoki.net/4783/

PWA化

開発も終盤にかかってきたところ、せっかくだしPWA化して「ホーム画面に追加」って出るとかっこいいなと思いいろいろ試したがなかなかLighthouseでOKにならない。
コンソールを見てみると下記エラーが出てました。

console

Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

さらに「bad-precaching-response」のようなエラーも出ていました。
Netlifyのデプロイ時に置いている_redirectsファイルのキャッシュを更新しようとする→そんなファイル無いぞと怒られるのが原因みたいだったため、下記サイトを参考にキャッシュ対象から除外しました。

vue.config.jsに下記を書くことで解決しました。

vue.config.js

module.exports = {
  //省略
  pwa: {
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      exclude: /_redirects/
    }
  }
}

下記サイトを参考にさせていただきました。
http://t-kuni.sub.jp/2020/06/12/pwa%e3%81%a7%e6%96%b0%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e3%82%92%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9%e3%81%97%e3%81%a6%e3%82%82%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e3%81%8c/#%E7%B5%90%E6%9E%9C

教訓

開発中、大枠は1か月くらいでできた(つもりだった)ため、もうすぐ終わるだろうと思っていたら、結局2か月かかってしまいました。
細かいところで修正したいところがたくさん出てくるんですよね、、開発しながら下記故事成語があったな～と思いだしたので、今後開発するときはこれを頭に入れておいて、「9割終わったと思うけど多分まだ5割なんだよな～」と思っておくと気が楽になるかもしれません、、

百里を行く者は九十を半ばとす
https://imidas.jp/proverb/detail/X-02-C-27-8-0010.html

おわりに

いろいろ書きましたが、ぜひ使ってみてください！
ロカボのススメ

【個人開発】Vue.jsで糖質制限の情報をまとめたサイトを作った