https://noriyu.dev/blog/2022-01-30
で断念したことができました。
https://noriyu.dev/spotify/myTopTraks

このページでは私が最近聞いている曲をspotifyのapiが判断して自動的に取得してくれ、それを表示しています。
おそらく現在の1ヶ月後では曲が多少変わっているし、1年後だと全然変わっていると思います。

もともとやりたかったこと

• Spotifyをよく利用するので自分のお気に入りソングなどをnoriyu.devに載せたい
• お気に入りは時間と共に変わっていくので適切なお気に入り曲を取得したい
• Spotify API を使ってできそうだったので挑戦してみた

実現できなかったわけ

• apiを利用するためのアクセストークンの有効期限が1時間
• リフレッシュするためにはその都度spotifyのログインが必要（だと思い込んでいた）

というわけで諦めていたんですが、実際はできました。それも割と簡単に

どうやってしたか

リフレッシュトークンを使えばアクセストークンを何度でも更新できました。しかもリフレッシュトークンを作る際にスコープを指定できます。

1. スコープを指定してリフレッシュトークンを作成する
2. リフレッシュトークンを使ってアクセストークンを取得する
3. アクセストークンを使ってapiを使う
4. 2から繰り返し

リフレッシュトークンの取得（1 の部分）はこちらの記事が参考になりました。
一度取得したリフレッシュトークンは何度も利用できるので環境変数に設定してアクセストークンを何度も取得できます。

noriyu.devのソースコードだとこの辺り

const result: string = await axios({
      url: this.tokenEndpoint,
      method: 'post',
      params: {
        grant_type: 'refresh_token',
        refresh_token: this.refresh_token,
      },
      headers: {
        Authorization: 'Basic ' + encode,
      },
    })
      .then((response) => {
        return response.data.access_token;
      })
      .catch((error) => {
        return 'ERROR getAccsessToken';
      });

アクセストークンを更新するタイミング

上述している通りアクセストークンは1時間で使えなくなります。リアルタイムでお気に入り曲を取得するためにはユーザーが
https://noriyu.dev/spotify/myTopTraks
を訪れるタイミングでapiを呼び出せばいいのですが、それだと何度も取得処理が必要になります。

詳しく調べていないですが無料利用なので利用制限とかありそうです。

お気に入り曲が変わるタイミング

毎日spotifyを利用しているとはいえ、apiで取得できる曲がそう頻繁に変わるとは思えません。
apiのクエリでtime_rangeが指定できますが、どんなに短くても4週間です。

利用するユーザーのほとんどは自分だし、リアルタイムの精度はそんなに必要そうにないので getStaticProps() でビルド時に取得しなおせば良いと判断しました。

microCMSとwebhookで連携しているので記事を投稿（更新）するタイミングでapiが走ります。
（ちょうどこの記事を公開する前後ではお気に入り曲が変わっているかもしれません）

詳しい内容はZennの記事にしてみようと思います。