トップニュースをざっと知りたい人向けにトップニュースをランダムで閲覧できるサービスを作りました

サービス

News Catch

ページをロードしたときに１つニュースを取得し表示します。

三角のボタンを押すことでニュースを再取得し表示します。

Twitterボタンを押すことでTwitterでニュースのURLをシェアすることができます。

使った技術

フロントエンド

フロントエンドはVue.jsを使用しました。
Nuxt.jsを使おうと思ったのですがSEO対策するほどの規模のサービスではないなと思いVue.jsを今回は使用しました。
CSSに関しては今回はシンプルなデザインなのでCSSフレームワークを使わずSCSSを使いました。
SCSSはCSSの構文で入れ子構造にできるのでとても便利です。

バックエンド

バックエンドはFirebaseを使用しました。
FirebaseはGoogleが提供しているmBaaSと呼ばれるサービスです。
今回はFirebase HostingとFirebase Cloud Storageを使用しました。

Firebase Hostingはデプロイ用、Firebase Cloud StorageはOGP画像の保存用で使用しました。

API

使用したAPIはNews APIです。
News API

非商用なら無料で利用可能で日本のニュースもあります。
ドキュメントもきちんと整備されておりとても使いやすいと感じました。

まとめ

サービスを開発していくにあたって自分の力のなさが目にみえたのでもっと勉強しようと思います。