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

お手軽OGP自動生成

<a href="https://noriyu.dev/blog/2022-01-30" target="_blank" rel="noopener noreferrer">https://noriyu.dev/blog/2022-01-30</a> で断念したことができました。 <a href="https://noriyu.dev/spotify/myTopTraks" target="_blank" rel="noopener noreferrer">https://noriyu.dev/spotify/myTopTraks</a> <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=""><h2 id="hcf83e1357e"> </h2>このページでは私が最近聞いている曲をspotifyのapiが判断して自動的に取得してくれ、それを表示しています。 おそらく現在の1ヶ月後では曲が多少変わっているし、1年後だと全然変わっていると思います。 <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> <h2 id="ha37e338c66">実現できなかったわけ</h2><ul><li>apiを利用するためのアクセストークンの有効期限が1時間</li><li>リフレッシュするためにはその都度spotifyのログインが必要（だと思い込んでいた）</li></ul> というわけで諦めていたんですが、実際はできました。それも割と簡単に <h2 id="he8a7c53777">どうやってしたか</h2>リフレッシュトークンを使えばアクセストークンを何度でも更新できました。しかもリフレッシュトークンを作る際にスコープを指定できます。 <ol><li>スコープを指定してリフレッシュトークンを作成する</li><li>リフレッシュトークンを使ってアクセストークンを取得する</li><li>アクセストークンを使ってapiを使う</li><li>2から繰り返し</li></ol> リフレッシュトークンの取得（1 の部分）は<a href="https://qiita.com/shirok/items/ba5c45511498b75aac27" target="_blank" rel="noopener noreferrer">こちら</a>の記事が参考になりました。 一度取得したリフレッシュトークンは何度も利用できるので環境変数に設定してアクセストークンを何度も取得できます。 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><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> <h2 id="h9697d5a052">アクセストークンを更新するタイミング</h2>上述している通りアクセストークンは1時間で使えなくなります。リアルタイムでお気に入り曲を取得するためにはユーザーが <a href="https://noriyu.dev/spotify/myTopTraks" target="_blank" rel="noopener noreferrer">https://noriyu.dev/spotify/myTopTraks</a> を訪れるタイミングでapiを呼び出せばいいのですが、それだと何度も取得処理が必要になります。 詳しく調べていないですが無料利用なので利用制限とかありそうです。 <h2 id="h17b3b31eb2">お気に入り曲が変わるタイミング</h2>毎日spotifyを利用しているとはいえ、apiで取得できる曲がそう頻繁に変わるとは思えません。 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週間です。 利用するユーザーのほとんどは自分だし、リアルタイムの精度はそんなに必要そうにないので<code> getStaticProps() </code>でビルド時に取得しなおせば良いと判断しました。 microCMSとwebhookで連携しているので記事を投稿（更新）するタイミングでapiが走ります。 （ちょうどこの記事を公開する前後ではお気に入り曲が変わっているかもしれません） 詳しい内容はZennの記事にしてみようと思います。

Spotify APIでTop Songsが取得できた

<a href="https://developer.spotify.com/documentation/web-api/" target="_blank" rel="noopener noreferrer">Spotify API</a>を使って、こんなことを考えてました。 「自分のトップソングを自動で更新して、それを<a href="https://noriyu.dev/" target="_blank" rel="noopener noreferrer">noriyu.dev</a>に表示したいな〜」 でも、できないことがわかりました。 <h2 id="h09644363cd">Spotify APIを簡単に紹介</h2> 以下、spotifyの<a href="https://developer.spotify.com/documentation/web-api/" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>をgoogle翻訳したものです。<blockquote>単純なREST原則に基づいて、Spotify Web APIエンドポイントは、音楽アーティスト、アルバム、トラックに関するJSONメタデータをSpotifyデータカタログから直接返します。 Web APIは、ユーザーがYourMusicライブラリに保存するプレイリストや音楽などのユーザー関連データへのアクセスも提供します。このようなアクセスは、ユーザーによる選択的な承認によって有効になります。 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> spotifyで公開されている音楽やプレイリストだけでなく、ユーザー固有の情報も取得することができます。 その中でも<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があり、ユーザーのアクセストークンを使えばここ数ヶ月によく聞いているアーティストの情報を取得することができます。 <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> <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> このデータを使えば、普段spotifyを勝手に使っているだけで勝手に自分のお気に入りソングが更新され続けるのではないかと思ったわけです。 しかし、ダメでした。 <h2 id="haef47800f9">アクセストークンの扱い</h2> アクセストークンの有効期限は60分と決まっています。<a href="https://developer.spotify.com/documentation/general/guides/authorization/client-credentials/" target="_blank" rel="noopener noreferrer">ドキュメント</a><pre><code>{
 "access_token": "NgCXRKc...MzYjw",
 "token_type": "bearer",
 "expires_in": 3600
}</code></pre> なので更新し続ける仕組みにしないといけません。 access_tokenは以下のリクエストで取得することができました。<a href="https://github.com/spotify/web-api/issues/1301" target="_blank" rel="noopener noreferrer">参考</a><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> 実際にaccess_tokenは取得できたし、そのトークンでいくつかのAPIを利用することができました。 ただし、<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> では使えませんでした。。。 <h2 id="h9c54e3483e">スコープが必要</h2>ユーザー固有のデータは機密情報なのでアクセストークンを取得する際にスコープを指定する必要がありました。 例えば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> で、このスコープはtokenを取得する前にSpotifyにログインして連携する必要があります。 <a href="https://spellista.tky-ngnm.net/" target="_blank" rel="noopener noreferrer">こちらのサイト</a>がとても参考になりました。 Spotifyにログイン <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=""> <a href="https://noriyu.dev/" target="_blank" rel="noopener noreferrer">noriyu.dev</a>では自分の曲を表示するだけなので、ユーザーにログインしてもらう必要はありません。 つまり、自分が定期的にログインしてaccess_tokenをリフレッシュする必要がありそうです。 <h2 id="hcb9dacb773">結論</h2>なんとかならないかもう少し試行錯誤する。 現状、どうにもなりそうにないので自分のプレイリストをiframeで埋め込むだけにしました。 <a href="https://noriyu.dev/spotify" target="_blank" rel="noopener noreferrer">https://noriyu.dev/spotify</a> <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>

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

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

ダークモード対応

このサイトは成長途中なので日々アップデートを重ねる予定です。 例えばcssでダークモードの実装はなるはやでやりたいです。 そこで、<ul><li>何を修正したいか</li><li>どんな機能を追加したいか</li></ul>を何かしらの方法で管理したいと思います。 ソースコードをgithubで管理しているのでissueで管理するのが常套手段でしょうか？🤔 個人のサイトなので完璧に管理する必要はないのですが、その成長過程を表示するもの面白いと思います。 そこで、issueを使いつつ、そのissueを<a href="https://noriyu.dev/" target="_blank" rel="noopener noreferrer">noriyu.dev</a>に表示して今後何を改善していくのか見せようと思いました。 issueはpublicなものですし、このリポジトリはpublicなのでissueは簡単に取得できます。 <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><pre><code>https://api.github.com/repos/$USER_NAME/$REPO_NAME/issues</code></pre> そこで、こんなふうにissueを取得してみました。<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> これでissue一覧を取得できました。<blockquote>&gt;&gt; [ { title: 'テスト', body: 'テストissueです' } ]</blockquote> 最初の改善機能として、この改善画面を作ることにしました。 <a href="https://noriyu.dev/kaizen" target="_blank" rel="noopener noreferrer">https://noriyu.dev/kaizen</a> <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=""> この画面を作り込むことを第一に取り組みます。 当プロジェクトはpublicなのでバグに気付いたり些細なひとことでも、 「ポートフォリオなのに○○ないの？」 みたいなのでもどんどん言ってくれると助かります。 <a href="https://github.com/y0303noki/noriyu-nextjs-app" target="_blank" rel="noopener noreferrer">https://github.com/y0303noki/noriyu-nextjs-app</a>

noriyu.devの改善管理

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

初めてのNext.js

このサイトを作りました。 作った理由と目的はいくつかあって、表向きは<ul><li>webの人間なのでwebアプリを作りたい</li><li>React(Next.js)を勉強したい</li><li>cssもあやふやなので勉強したい</li></ul> なんだけれども、それよりも情報の一元化をしたかったことです。 例えばSNSはTwitterとInstagramがあって、技術情報は<a href="https://zenn.dev/" target="_blank" rel="noopener noreferrer">Zenn</a>のスクラップに書こうと思ってました。 でも最近流行りのNotionに手を出してしまってごちゃごちゃしてしまい。。。 情報収集にあたって何度も同じページを見てたりするので集約することが本目的です。 これは初投稿なのであまり技術の話をしないようにしておきます。 でもこのサイトを作りにあたって色々学んだので、それは別投稿にします。