<p>Spotifyにログインして、ユーザーごとの特徴の楽曲を取得したり、「いいね」の楽曲を取得するアプリを作りました。<br>そのサイトは <a href="https://spotify-app-y0303noki.vercel.app/" target="_blank" rel="noopener noreferrer">こちら</a> 👈<br><br>この記事では使い方を記載します。<br></p><h1 id="h61222d876f">これはなに？</h1><p><a href="https://www.spotify.com/jp/" target="_blank" rel="noopener noreferrer">Spotify</a>を使っていろんなことができます↓<br></p><h2 id="h5de632bfec">🤔トラック分析、アーティスト分析</h2><p>ユーザー（あなた）が最近聴いている曲を分析してトラック（曲のこと）やアーティストを上位から順番に表示できます。<br>分析は<a href="https://developer.spotify.com/documentation/web-api/reference/#/operations/get-users-top-artists-and-tracks" target="_blank" rel="noopener noreferrer">SpotifyAPI</a>を使っているので詳しいことは分かりません🙏<br></p><h2 id="hdd8ddefe5b">❤️「いいね」した曲のふりかえり</h2><p>「いいね」をした楽曲を新しい順番に表示します。<br></p><h2 id="hbbfac9bd1d">📝プレイリスト作成</h2><p>トラック分析と「いいね」の曲一覧を自身のアカウントにプレイリストとして登録できます<br><br></p><h1 id="h29e9110b53">つかいかた</h1><h3 id="hcc20f9aa3b">1.「Sign in with Spotify」ボタンを押してSpotifyアカウントでログイン</h3><p>無料プランの人でも利用できます<br>個人情報の収集などはしていないので安心してください<br><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/60d036f87c7743878042108833e48962/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-26%2021.42.38.png" alt=""><br><br><br></p><h3 id="hf1659a721f">2.種類と分析期間を選択</h3><p>Track、Artist、Favoriteから1つ選択します<br>Track：楽曲<br>Artist：アーティスト<br>Favorite：いいねした楽曲<br><br>TrackとArtistの場合は4 weeks、6 months、all timesの3つからも選択します<br>期間によって結果が全然異なるので色々試してみてください<br><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/cf8a38bdab004443bbd338ed92fb0ee4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-26%2021.56.18.png" alt=""><br><br><br></p><h3 id="h2d3192f90c">3.「表示」ボタンをクリック</h3><p>上位から20曲、アーティストは20組表示されます<br>それぞれの行をクリックするとSpotifyアプリの対象のページに飛びます<br><br><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/6ce7fcc5423a428e9baeded7f32c6fa2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-26%2021.58.26.png" alt=""><br><br></p><h3 id="h967a848722">4.「プレイリスト作成」ボタンをクリック</h3><p>成功表示が出たら自身のSpotifyアカウントに新しくプレイリストが作成されています<br>プレイリスト名は日付と期間が組み合わさった、「2022/03/26_medium」みたいな感じです<br>Spotifyアプリから変更することもできます<br><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/a582d828c35040f39c2b306981d6aaeb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-26%2022.07.36.png" alt=""><br><br></p><h3 id="h19662aa3ee">5.「さらに表示」ボタンをクリック</h3><p>「表示」ボタンでは上位から20曲（20組）しか表示されませんが、「さらに表示」ボタンをクリックすると20件ずつさかのぼって表示することができます<br>「プレイリスト作成」ボタンでは現在表示されている20曲で作られます<br><br><br></p><h3 id="ha739b3b8f6">その他</h3><p>バグ報告や新機能要望など、私に伝えたいことがもしあればフッターのContactをクリックしてGoogle フォームから送っていただけると幸いです<br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/ca22d14529b44ecd85f4148a07cb2049/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-27%2021.20.42.png" alt=""><br><br></p><h1 id="h1afe451c43">さいごに</h1><p>このサイトにも搭載されているSpotifyAPIを使った機能を誰でも使えるようにしてみようと考えました。<br>当サイトとは異なり1時間に1回のログインが必要ですが、セキュリティのことを考えると妥当だと思います。<br>せっかくログイン機能があるのでこれまでに作成したプレイリストの記録も実装してみると面白いかもしれません。今後の課題とします。<br><br>みなさん感想や要望をください！🙏</p>

新しいアプリを作った！（SpotifyAPI)

<p>三重県の鳥羽水族館とナガシマスパーランドに行ったので写真や感想を記録として残しておきます<br></p><h1 id="h88021685a7">鳥羽水族館</h1><p><a href="https://aquarium.co.jp/" target="_blank" rel="noopener noreferrer">鳥羽水族館</a>は飼育種類数日本一、日本で唯一ジュゴンを飼育している水族館です。<br><br>ジュゴンを飼育してる水族館は世界に4ヶ所しかありません。乱獲のために激減したと言われています。<br><br>また、ラッコ🦦も飼育しています。<br>日本では鳥羽水族館の他は福岡県のマリンワールド海の中道と千葉県の鴨川シーワールドの3ヶ所しかありません。</p><h2 id="hcf83e1357e"><br></h2><h3 id="h6371af87d2">ジュゴン</h3><p><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/9932078a7c1a4824917080205ac10eea/90CB1D5F-6297-49ED-8AFD-CAB19E33772E.jpeg" alt=""><br><br></p><h3 id="h56f3e42d34">ラッコ</h3><p>(動画しか撮ってなかったので画質が悪い🙏)<br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/a740f127b30a44258d398f2c9a532ba7/12B375D4-A3A1-4275-8ADA-ABDBBF737651.png" alt=""><br><br><br>ジュゴンよりもラッコがめちゃくちゃ人気で、餌やりタイムのときは飼育員さんが芸を披露して歓声があがってました👏👏<br><br></p><h1 id="h78a5b7f402">ナガシマスパーランド</h1><p><a href="https://www.nagashima-onsen.co.jp/spaland/index.html" target="_blank" rel="noopener noreferrer">ナガシマスパーランド</a>は西日本有数の絶叫マシンを保有し、東の富士急西のナガシマと呼ばれています。<br><br>スチールドラゴンは富士急のフジヤマを抜き97mで日本一の高さ、落差。全長コースは2479mで世界最長。紛れもなく日本最恐のジェットコースターです。<br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/97a906e8187c40969c67042ccb29cc13/837DE32A-16C9-478E-A562-4F5DB5E86266.jpeg" alt=""><br><br>大学生ぶりに乗りたかったんですが強風のため運休しており、、、、、😵‍💫<br><br>代わりに白鯨には乗れました。後悔はありますが満足、また次回に期待しましょう<br><br></p><h2 id="hc973fd04f9">東京→三重のアクセス🚄</h2><p><br>東京から三重へ直行の飛行機や新幹線がないため名古屋経由で行きました。<br><br>東京→名古屋　(新幹線　1.5h)<br>名古屋→鳥羽　(近鉄特急　1.5h)<br>名古屋→ナガシマ　(高速バス　1.5h)<br><br>東京からだとちょっと行きづらいので、スチールドラゴンのリベンジはまだまだ先になりそうです<br><br><br></p>

三重旅行

<p>3年間使ったデスクを捨てて新しいデスクにしました。<br><br>旧デスクは作るとき前後を間違えてしまい、コードを束ねる窪みが手前側に来てました💩<br><br>またモニターアームが使えない形になっていたり、金属感があってダサかったりしてつらいものがありました。</p><h3 id="hcf83e1357e"><br></h3><h2 id="h89e7b98e09">詳細</h2><p>友達に教えてもらい、楽天市場で<a href="https://item.rakuten.co.jp/low-ya/f802-g1039-100/?scid=we_lne_upc181" target="_blank" rel="noopener noreferrer">LOWYAのデスク</a>を買いました。定価26000円。<br><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/ca77873407cc4f839e17a7e78038de31/IMG_4134.jpg" alt=""></p><h3 id="h8d78e14043">感想</h3><ul><li>木の香り<ul><li>新築のいい匂いがします</li></ul></li><li>組み立て簡単<ul><li>すごい簡単で30分程度で完了しました。天板に足を2ヶ所と背中を取り付けるだけ、早い。</li></ul></li><li>めっちゃ重い<ul><li>木製なのと引き出し付きなので重い</li></ul></li><li><strong>幅がデカくてドアを通らない</strong><ul><li>組み立て前に自室で組み立てたからなんとかなったものの、引っ越しで自室から出すときは解体しないといけない・・・・</li></ul></li></ul><p><br>モニターアームを取り付けてデュアルにしたいためにデスクを変えたので、早々にサブモニターを買おうと思います。2万円以下24インチ程度のサブモニター教えてください。</p>

デスクを買いました

<p><a href="https://noriyu.dev/" target="_blank" rel="noopener noreferrer">noriyu.dev</a>をPWAに対応しました。<br><br>ライブラリは<a href="https://www.npmjs.com/package/next-pwa" target="_blank" rel="noopener noreferrer">next-pwa</a> を利用しました。<br><br>業務で少しPWAを触っているのもあり、優先的に対応したかった機能です。<br><br>androidで<a style="background-color:#ffffff" href="https://noriyu.dev/" target="_blank" rel="noopener noreferrer">noriyu.dev</a>にアクセスするとホームに追加ボタンが出て、モバイルアプリのような挙動になります。<br></p><h2 id="he3dc5884eb">Android</h2><p><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/a0d3b0466c55470ab54e1e7b851fcc1a/IMG_4113.JPG" alt=""><br></p><h2 id="hc75451390d">iOS</h2><p>iOS端末でもホーム画面に追加をするとモバイルアプリのような表示になります<br><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/32661f5f36854e6ab5049f7fb6064522/IMG_16970F47D477-1.jpeg" alt=""><br><br><br>今できるのはこれだけでPWA特有の機能などは未実装です。<br><br>iOS15.4ではsafariでもPush APIが出そうな気配があるのでプッシュ通知の実装でもそのうちやってみようかなと思います。<br><a href="https://firt.dev/ios-15.4b" target="_blank" rel="noopener noreferrer">https://firt.dev/ios-15.4b</a><br><br>おしまい</p>

PWAに対応した

<p>zennみたいな、タイトルごとにogpを自動生成してTwitter Cardを作成したいと思っていたことがかなり簡単にできました。<br><br><a href="https://catnose.me/notes/cloudinary-dynamic-ogp-image" target="_blank" rel="noopener noreferrer">catnoseさんの記事</a>をほとんどそのまんま参考にしています。いつも参考にさせてもらっています、ありがとうございます🙏</p><h3 id="hcf83e1357e"><br></h3><p>背景画像はmacのプレビューでファビコンに使っている画像と「noriyu.dev」のテキストを挿入しました。</p><h2 id="hcf83e1357e"><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/66d7455da90d44ddae4e2d1cd9404cf0/ogp-custom.png" alt=""></h2><p><br><br>twitterのCard validatorで調べると意図していたものが出来上がりました。<br><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/bd6a0c20c32945a689f165f1d4680349/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-17%2015.47.36.png" alt=""><br><br><br>おしまい<br></p>

お手軽OGP自動生成

<p><a href="https://noriyu.dev/blog/2022-01-30" target="_blank" rel="noopener noreferrer">https://noriyu.dev/blog/2022-01-30</a><br>で断念したことができました。<br><a href="https://noriyu.dev/spotify/myTopTraks" target="_blank" rel="noopener noreferrer">https://noriyu.dev/spotify/myTopTraks</a><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/6f6369fe2c8343d2aa0f490a0ef0ebc2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-11%2019.59.50.png" alt=""></p><h2 id="hcf83e1357e"><br></h2><p>このページでは私が最近聞いている曲をspotifyのapiが判断して自動的に取得してくれ、それを表示しています。<br>おそらく現在の1ヶ月後では曲が多少変わっているし、1年後だと全然変わっていると思います。<br><br></p><h2 id="h2499af9c0b">もともとやりたかったこと</h2><ul><li>Spotifyをよく利用するので自分のお気に入りソングなどをnoriyu.devに載せたい</li><li>お気に入りは時間と共に変わっていくので適切なお気に入り曲を取得したい</li><li><a href="https://developer.spotify.com/console/get-current-user-top-artists-and-tracks/?type=tracks&amp;time_range=short_term&amp;limit=&amp;offset=" target="_blank" rel="noopener noreferrer">Spotify API</a> を使ってできそうだったので挑戦してみた</li></ul><p><br></p><h2 id="ha37e338c66">実現できなかったわけ</h2><ul><li>apiを利用するためのアクセストークンの有効期限が1時間</li><li>リフレッシュするためにはその都度spotifyのログインが必要（だと思い込んでいた）</li></ul><p><br>というわけで諦めていたんですが、実際は<strong>できました</strong>。それも割と簡単に<br></p><h2 id="he8a7c53777">どうやってしたか</h2><p>リフレッシュトークンを使えばアクセストークンを何度でも更新できました。しかもリフレッシュトークンを作る際にスコープを指定できます。<br></p><ol><li>スコープを指定してリフレッシュトークンを作成する</li><li>リフレッシュトークンを使ってアクセストークンを取得する</li><li>アクセストークンを使ってapiを使う</li><li>2から繰り返し</li></ol><p><br>リフレッシュトークンの取得（1 の部分）は<a href="https://qiita.com/shirok/items/ba5c45511498b75aac27" target="_blank" rel="noopener noreferrer">こちら</a>の記事が参考になりました。<br>一度取得したリフレッシュトークンは何度も利用できるので環境変数に設定してアクセストークンを何度も取得できます。<br><br>noriyu.devのソースコードだと<a href="https://github.com/y0303noki/noriyu-nextjs-app/blob/main/src/pages/api/spotifyApi.ts#L35" target="_blank" rel="noopener noreferrer">この辺り</a></p><pre><code>const result: string = await axios({
&nbsp; &nbsp; &nbsp; url: this.tokenEndpoint,
&nbsp; &nbsp; &nbsp; method: 'post',
&nbsp; &nbsp; &nbsp; params: {
&nbsp; &nbsp; &nbsp; &nbsp; grant_type: 'refresh_token',
&nbsp; &nbsp; &nbsp; &nbsp; refresh_token: this.refresh_token,
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; headers: {
&nbsp; &nbsp; &nbsp; &nbsp; Authorization: 'Basic ' + encode,
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; })
&nbsp; &nbsp; &nbsp; .then((response) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; return response.data.access_token;
&nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp; &nbsp; .catch((error) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; return 'ERROR getAccsessToken';
&nbsp; &nbsp; &nbsp; });</code></pre><p><br></p><h2 id="h9697d5a052">アクセストークンを更新するタイミング</h2><p>上述している通りアクセストークンは1時間で使えなくなります。リアルタイムでお気に入り曲を取得するためにはユーザーが<br><a href="https://noriyu.dev/spotify/myTopTraks" target="_blank" rel="noopener noreferrer">https://noriyu.dev/spotify/myTopTraks</a> <br>を訪れるタイミングでapiを呼び出せばいいのですが、それだと何度も取得処理が必要になります。<br><br>詳しく調べていないですが無料利用なので利用制限とかありそうです。<br></p><h2 id="h17b3b31eb2">お気に入り曲が変わるタイミング</h2><p>毎日spotifyを利用しているとはいえ、apiで取得できる曲がそう頻繁に変わるとは思えません。<br>apiのクエリで<a href="https://developer.spotify.com/documentation/web-api/reference/#/operations/get-users-top-artists-and-tracks" target="_blank" rel="noopener noreferrer">time_range</a>が指定できますが、どんなに短くても4週間です。<br><br>利用するユーザーのほとんどは自分だし、リアルタイムの精度はそんなに必要そうにないので<code> getStaticProps() </code>でビルド時に取得しなおせば良いと判断しました。<br> <br>microCMSとwebhookで連携しているので記事を投稿（更新）するタイミングでapiが走ります。<br>（ちょうどこの記事を公開する前後ではお気に入り曲が変わっているかもしれません）<br><br>詳しい内容はZennの記事にしてみようと思います。</p>

Spotify APIでTop Songsが取得できた

<p><a href="https://developer.spotify.com/documentation/web-api/" target="_blank" rel="noopener noreferrer">Spotify API</a>を使って、こんなことを考えてました。<br><br>「自分のトップソングを自動で更新して、それを<a href="https://noriyu.dev/" target="_blank" rel="noopener noreferrer">noriyu.dev</a>に表示したいな〜」<br><br>でも、できないことがわかりました。<br></p><h2 id="h09644363cd">Spotify APIを簡単に紹介</h2><p><br>以下、spotifyの<a href="https://developer.spotify.com/documentation/web-api/" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>をgoogle翻訳したものです。</p><blockquote><span style="color:#222326">単純なREST原則に基づいて、Spotify Web APIエンドポイントは、音楽アーティスト、アルバム、トラックに関するJSONメタデータをSpotifyデータカタログから直接返します。</span><br><strong>Web APIは、ユーザーがYourMusic</strong>ライブラリに保存するプレイリストや音楽などのユーザー関連データへのアクセスも提供します。このようなアクセスは、ユーザーによる選択的な承認によって有効になります。<br>WebAPIのベースアドレスは<a style="color:#d17c0a" href="https://api.spotify.com/" target="_blank" rel="noopener noreferrer">https://api.spotify.com</a>です。APIは、それぞれが独自のパスを持つ一連の<a style="color:#d17c0a" href="https://developer.spotify.com/documentation/web-api/reference/" target="_blank" rel="noopener noreferrer">エンドポイントを提供します。</a>ユーザープロファイルやプレイリストなどのWebAPIを介してプライベートデータにアクセスするには、アプリケーションはデータにアクセスするためのユーザーの許可を取得する必要があります。<a style="color:#d17c0a" href="https://developer.spotify.com/documentation/general/guides/authorization-guide/" target="_blank" rel="noopener noreferrer">承認</a>はSpotify<a style="color:#d17c0a" href="https://accounts.spotify.com/" target="_blank" rel="noopener noreferrer">アカウントサービス</a>を介して行われます。</blockquote><p><br>spotifyで公開されている音楽やプレイリストだけでなく、ユーザー固有の情報も取得することができます。<br><br>その中でも<a href="https://developer.spotify.com/console/get-current-user-top-artists-and-tracks/" target="_blank" rel="noopener noreferrer">Get User's Top Items</a> というAPIがあり、ユーザーのアクセストークンを使えばここ数ヶ月によく聞いているアーティストの情報を取得することができます。<br></p><h3 id="h446ff0e7c3">リクエスト</h3><pre><code>curl -X "GET" "https://api.spotify.com/v1/me/top/artists" \
-H "Accept: application/json" 
-H "Content-Type: application/json" \
-H "Authorization: Bearer ${access_token}

</code></pre><p><br></p><h3 id="h0c0b84b0b7">レスポンス</h3><pre><code>{
  "items": [
    {
      "external_urls": {
        "spotify": "https://open.spotify.com/artist/2IUl3m1H1EQ7QfNbNWvgru"
      },
      "followers": {
        "href": null,
        "total": 616649
      },
      "genres": [
        "j-pop",
        "japanese soul"
      ],
      "href": "https://api.spotify.com/v1/artists/2IUl3m1H1EQ7QfNbNWvgru",
      "id": "2IUl3m1H1EQ7QfNbNWvgru",
      "images": [],
      "name": "Vaundy",
      "popularity": 73,
      "type": "artist",
      "uri": "spotify:artist:2IUl3m1H1EQ7QfNbNWvgru"
    },
   ...
    }</code></pre><p>    <br>このデータを使えば、普段spotifyを勝手に使っているだけで勝手に自分のお気に入りソングが更新され続けるのではないかと思ったわけです。<br><br><u>しかし、ダメでした。</u><br></p><h2 id="haef47800f9">アクセストークンの扱い</h2><p><br>アクセストークンの有効期限は60分と決まっています。<a href="https://developer.spotify.com/documentation/general/guides/authorization/client-credentials/" target="_blank" rel="noopener noreferrer">ドキュメント</a></p><pre><code>{
   "access_token": "NgCXRKc...MzYjw",
   "token_type": "bearer",
   "expires_in": 3600
}</code></pre><p><br>なので更新し続ける仕組みにしないといけません。<br><br> access_tokenは以下のリクエストで取得することができました。<a href="https://github.com/spotify/web-api/issues/1301" target="_blank" rel="noopener noreferrer">参考</a></p><pre><code>axios({
        url: 'https://accounts.spotify.com/api/token',
        method: 'post',
        params: {
          grant_type: 'client_credentials'
        },
        headers: {
          'Accept':'application/json',
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        auth: {
          username: 'YOUR-CLIENT-ID',
          password: 'YOUR-CLIENT-SECRET'
        }
      }).then(function(response) {
          console.log(response);
      }).catch(function(error) {
      });</code></pre><p><br>実際にaccess_tokenは取得できたし、そのトークンでいくつかのAPIを利用することができました。<br>ただし、<a style="background-color:#ffffff" href="https://developer.spotify.com/console/get-current-user-top-artists-and-tracks/" target="_blank" rel="noopener noreferrer">Get User's Top Items</a> では使えませんでした。。。<br></p><h2 id="h9c54e3483e">スコープが必要</h2><p>ユーザー固有のデータは機密情報なのでアクセストークンを取得する際にスコープを指定する必要がありました。<br>例えばGet User's Top Itemsではuser-top-readが必要です。<a href="https://developer.spotify.com/documentation/general/guides/authorization/scopes/#user-top-read" target="_blank" rel="noopener noreferrer">参考</a><br><br>で、このスコープはtokenを取得する前にSpotifyにログインして連携する必要があります。<br><a href="https://spellista.tky-ngnm.net/" target="_blank" rel="noopener noreferrer">こちらのサイト</a>がとても参考になりました。<br><br><strong>Spotifyにログイン</strong><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/aa82a0e19b8446c49f6c446594422b11/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-01-30%2023.51.17.png" alt=""><br><br><br><a href="https://noriyu.dev/" target="_blank" rel="noopener noreferrer">noriyu.dev</a>では自分の曲を表示するだけなので、ユーザーにログインしてもらう必要はありません。<br>つまり、自分が定期的にログインしてaccess_tokenをリフレッシュする必要がありそうです。<br><br></p><h2 id="hcb9dacb773">結論</h2><p>なんとかならないかもう少し試行錯誤する。<br><br>現状、どうにもなりそうにないので自分のプレイリストをiframeで埋め込むだけにしました。<br><a href="https://noriyu.dev/spotify" target="_blank" rel="noopener noreferrer">https://noriyu.dev/spotify</a><br><a href="https://noriyu.dev/spotify" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/456fd7fab12f4987971fda498d12e1da/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-01-30%2023.54.48.png?w=378&amp;h=649" alt=""></a></p>

Spotify APIでやりたいことができなかった

<p>noriyu.devのダークモード対応をした。<br><br>iOSとAndroid、ともに2019年からダークモード（Androidではダークテーマと呼ばれる）が実装されており、近年のwebサイトやモバイルアプリでは実装されてないとレガシー（？）と呼ばれているような気がする。<br><br>当サイトではTailWind CSSを利用しているのでダークモード対応はかなり簡単に実装できた。<br><br>私用のiPhoneは常にダークモードで運用しているため、ダークモード対応できていないアプリに遭遇すると「ウッ」となってしまう気がする。他の人はどういう運用をしているのか気になる・・・。</p>

ダークモード対応

<p>このサイトは成長途中なので日々アップデートを重ねる予定です。<br><br>例えばcssでダークモードの実装はなるはやでやりたいです。<br><br>そこで、</p><ul><li>何を修正したいか</li><li>どんな機能を追加したいか</li></ul><p>を何かしらの方法で管理したいと思います。<br><br>ソースコードをgithubで管理しているのでissueで管理するのが常套手段でしょうか？🤔<br><br><br><br><br>個人のサイトなので完璧に管理する必要はないのですが、その成長過程を表示するもの面白いと思います。<br>そこで、issueを使いつつ、そのissueを<a href="https://noriyu.dev/" target="_blank" rel="noopener noreferrer">noriyu.dev</a>に表示して今後何を改善していくのか見せようと思いました。<br><br>issueはpublicなものですし、このリポジトリはpublicなのでissueは簡単に取得できます。<br><a href="https://github.com/y0303noki/noriyu-nextjs-app/issues/9" target="_blank" rel="noopener noreferrer">https://github.com/y0303noki/noriyu-nextjs-app/issues/9</a></p><pre><code>https://api.github.com/repos/$USER_NAME/$REPO_NAME/issues</code></pre><p><br>そこで、こんなふうにissueを取得してみました。</p><pre><code>export const getServerSideProps: GetStaticProps = async (context) =&gt; {
  const res = await fetch("https://api.github.com/repos/y0303noki/noriyu-nextjs-app/issues");
  const datas = await res.json();
  const issues = datas.map((data: any) =&gt; ({ title: data.title, body: data.body }));
 
  return { props: { issues: issues } };
};</code></pre><p><br>これでissue一覧を取得できました。</p><blockquote>&gt;&gt;<br>[ { title: 'テスト', body: 'テストissueです' } ]</blockquote><p><br>最初の改善機能として、この改善画面を作ることにしました。<br><a href="https://noriyu.dev/kaizen" target="_blank" rel="noopener noreferrer">https://noriyu.dev/kaizen</a><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/e7c048036bb54a0bb5a04cbd8037e7b4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-01-25%2023.06.57.png" alt=""><br><br>この画面を作り込むことを第一に取り組みます。<br><br>当プロジェクトはpublicなのでバグに気付いたり些細なひとことでも、<br>「ポートフォリオなのに○○ないの？」<br>みたいなのでもどんどん言ってくれると助かります。<br><a href="https://github.com/y0303noki/noriyu-nextjs-app" target="_blank" rel="noopener noreferrer">https://github.com/y0303noki/noriyu-nextjs-app</a></p>

noriyu.devの改善管理

<p>このサイトを作るために学んだこと、経緯などを書き記します。何を使って作ったか、フレームワークやサービスの話をします。<br></p><ul><li>Next.js</li><li>typeScript</li><li>tailwind CSS</li><li>microCMS</li><li>vercel</li></ul><p><br>を使用しました。typeScript以外は初めて触ります。<br></p><h2 id="h4ba3e56be3">なぜNext.jsを利用したのか</h2><p><br>Zennやqiitaなどの技術記事を見てるとよく<br>Next.js vs Nuxt.js<br>の比較がされています。<br><br>どちらもよく知らないし、なんなら最初は「どっちかのタイプミス？」とでも思ってました。<br>細かい違いは他のサイトで見て欲しいのですが、浅いレベルでの理解は「ReactとVue.jsの違いなんだろうな〜」くらいでいいと思います。<br><br>ちなみにReactもVue.jsもほとんど触ったことがないので、比較サイトを見てもわからないし正直なんでも良いと思ってNext.jsを選びました。<br>別のサイトを作るときは勉強のためにNuxt.jsを使うかもしれません。<br><br>実務ではAngularを扱っているのでAngularで作るのが早そうなんですが、趣味で作っているんだしやったことないものを学ぶべきだろーと思ってNext.jsにしました。あと、Angularの勢いが落ちてるのもあります。<br></p><h2 id="hc109f7ceca">Next.jsでアプリを作り始める前に</h2><p><br>上述したように私はReactもほとんど知らない状態です。<br>そんな人がいきなりNext.jsで何ができるでしょう、何もできません。<br><br>「まずはReactだ！」と思い、Reactの公式チュートリアルから始めました。<br>チュートリアルは<a href="https://ja.reactjs.org/tutorial/tutorial.html" target="_blank" rel="noopener noreferrer">こちら</a><br><br>三目並べゲームを作るものです。<br><br>チュートリアルは日本語もあり、一節が短いのですごくやりやすいものでした。<br>これを３時間くらいかけてReactの基礎の基礎を知れたのかなと思います。<br><br>そんなこんなでNext.jsのチュートリアルも続けて行いました。<br>大体勉強に丸一日かかってます。<br></p><h2 id="h20d42ebafc">ブログの仕組み</h2><p><br>ブログ機能がない、ただのポートフォリオであれば簡単に作れそうです。しかしブログ機能のために毎回ソースコードをいじるのはダルそうです。スマホでサクッと記事の更新をしたい時もあるかもしれません。<br><br>結局、<a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a>を利用することにしました。<br>ブログを書くときはmicroCMSの管理画面で書いて、それを公開すればnoriyu.devに自動で反映される仕組みです。<br><br>スマホでログインすれば記事が書けるのでとりあえずはこの方針に落ち着きました。<br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/ffc13b1eafc64886ab732f0cf4332c60/IMG_FFA35859672A-1.jpeg?w=400&amp;h=866" alt=""><br><br>microCMSとNext.jsの連携はめちゃくちゃ簡単です。microCMS側が紹介してくれているので、この手順通りにやるだけでした。<br><a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/microcms-next-jamstack-blog/</a><br><br>記事を更新したときのAPI連携もここに載っています。<br><br>自分みたいな初心者にはとっつきやすくて良いなーと思いました🙏<br></p><h2 id="hec95416674">今後</h2><p><br>情報を詰め込みすぎた感があるので次からは細かく切り出そうと思います。<br>あと、今後このサイトもアップデートを重ねていくので最初の状態を記念に魚拓残しておきます。<br>これがどう変わっていくのか楽しみです。<br><br><strong>魚拓</strong><br><br><img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/98218f5494d54eee9a05f83b52b7c948/IMG_6DAE8A180F5F-1.jpeg?w=400&amp;h=2000" alt=""><br></p>