楽天ブックAPIを用いて、著者名を検索すると作品の年表が閲覧できるアプリ。
npm iを実行(初回のみ)npm startを実行(npm run serve:mockと同等)- APIを使わないmockモードで開発サーバーを起動します。
- APIを使用して検証する場合、下記の「環境変数について」に従い環境変数を記述し、
npm run serveを実行
- http://localhost:8080 を開く
| 名前 | バージョン | 概要 |
|---|---|---|
| Vue.js | 3 | js フレームワーク |
| TypeScript | 4.1 | jsを静的型付けにした言語 |
| Ionic Framework | 5 | スマホアプリっぽいUIや画面遷移を提供するフレームワーク |
| Capacitor | 2 | スマホアプリのビルドやPWA化を支援するフレームワーク |
| sass | scss記法を用いるために必要なライブラリ | |
- node-vibrantという画像から色を抽出するライブラリの導入を試みたが、WebWorkerにAPIからの画像をダウンロードする際にクロスオリジンに引っ掛かり失敗したので未導入(add-vibrantブランチ、add-vibrant2ブランチ)
楽天APIを使用するために、.env.localに以下を記述する必要があります。
VUE_APP_RAKUTEN_API_APPLICATION_ID="<アプリケーションID>"
ちなみに、.envに.localとつけると、localのみ(gitから除外)という意味をもちます(下記公式doc参考)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent