<h1 style="text-align: start" id="h9707d3a59a"><strong>概要</strong></h1><p style="text-align: start">Karabiner-ElementsはMac純正周辺機器を使用していない場合は必須級のアプリであり、使っている人も多い。<br>しかし、GUIからでは単純な設定しか出来ず、複数のキーの同時押しなどの痒いところに手が届かない。<br>そこで、Karabinerの設定ファイルを直接書き換えることで設定する。</p><p></p><h1 style="text-align: start" id="h8bb8734b16"><strong>設定方法</strong></h1><h2 style="text-align: start" id="hb4c150225b"><strong>設定ファイルの場所</strong></h2><p style="text-align: start"><code>~/.config/karabiner/karabiner.json</code></p><h2 style="text-align: start" id="h3674f9148b"><strong>設定例</strong></h2><h3 style="text-align: start" id="h0ffdefba24"><strong>マウスのボタンにデスクトップ間の遷移を設定する(Control + ← or →)</strong></h3><ol><li>GUIで該当のデバイスに任意の設定を追加する。</li><li><code>karabiner.json</code>上で追加された設定の箇所を探す。</li><li>追加された設定を以下のように書き換える</li></ol><pre><code>{
  from: {
    key_code: &apos;5&apos;,
  },
  to: [
    {
      key_code: &apos;left_arrow&apos;,
      modifiers: [&apos;left_control&apos;],
    },
  ],
},
{
  from: {
    key_code: &apos;8&apos;,
  },
  to: [
    {
      key_code: &apos;right_arrow&apos;,
      modifiers: [&apos;left_control&apos;],
    },
  ],
},</code></pre><p style="text-align: start"><br>反映されない場合はKarabiner-Elementsを再起動する。</p><h1 style="text-align: start" id="h7605dc6208"><strong>参考文献</strong></h1><ul><li><a href="https://qiita.com/s-show/items/40ad22c4ee4a0465fad5">https://qiita.com/s-show/items/40ad22c4ee4a0465fad5</a></li></ul>

Karabiner-Elementsで同時押しなどを自由に設定する【karabiner.json】

<h1 style="text-align: start" id="h6e312b3deb"><strong>課題</strong></h1><p style="text-align: start">コンテンツ(API)でタグを作成したが、タグごとのIDがランダムな文字列になっている。<br>これをわかりやすい名前に直すべきか少し悩んだ。</p><h1 style="text-align: start" id="hd970156c24"><strong>対応</strong></h1><p style="text-align: start">クライアント側では結局動的に表示させるので、IDを変更するメリットは無い。<br>逆にIDの競合が発生する可能性が出るデメリットがある。</p>

microCMSのブログでタグ機能を作成するとき

<h1 style="text-align: start" id="h6e312b3deb"><strong>課題</strong></h1><ul><li>通知に使っている認証トークンの有効期限がわからない</li><li>認証トークンをいつ更新するべきなのかわからない</li></ul><h1 style="text-align: start" id="hd970156c24"><strong>対応</strong></h1><ul><li>月に1回リフレッシュを掛けること<ul><li>DBにアカウント情報を持つと思うが、そこにトークンのupdateAtを持ち、それより後の時間になったらgetToken()などでトークンを新しく取得する</li></ul></li><li>古いトークンを残したままにすると通知の一括送信の際にノイズになり、処理が重くなる原因になるのでなるべく削除するロジックを実装しておくこと</li><li>詳しくは参考文献の認証トークン運用のベストプラクティスを参照</li></ul><h1 style="text-align: start" id="h7605dc6208"><strong>参考文献</strong></h1><ul><li><a href="https://firebase.google.com/docs/cloud-messaging/manage-tokens?hl=ja">https://firebase.google.com/docs/cloud-messaging/manage-tokens?hl=ja</a></li></ul>

Firebase Cloud Messaging の認証トークン(デバイストークン)の運用のベストプラクティス

<h1 style="text-align: start" id="h6e312b3deb"><strong>課題</strong></h1><p style="text-align: start">APIのリクエストを受け付けた際にcharset=shift_jisだったためエラーになった。<br>ExpressのbodyParserが&quot;utf-8&quot;以外はエラーにするために発生した。</p><h1 style="text-align: start" id="hd970156c24"><strong>対応</strong></h1><p style="text-align: start">Bodyの中身に日本語が含まれないことが保証されていたため、headerのContent-Typeのcharsetを削除した。<br>charsetが存在しない場合はbodyParserでエラーにはならない。<br>しかし日本語が含まれている場合の対応策は依然としてわからない。</p><h1 style="text-align: start" id="h447d69583c"><strong>学んだこと</strong></h1><p style="text-align: start">当初、charset=shift_jisに対して、他のリクエストと同じようにutf-8に置き換える実装をした。<br>しかし、shift_jisで送られてくるリクエストに対してutf-8を分類するのは不整合が起きている状態である。<br>避けられるのであれば避けるべきである。<br>不整合な状態が発生することに対して本当に避けることが出来ないのかをよく考えるべきである。</p>

Expressにcharset=shift_jisが来たときの乗り越え方(暫定対応)

<h1 style="text-align: start" id="h74ceb5ca39"><strong>Expressのapp.use()</strong></h1><p style="text-align: start">これはミドルウェアを追加するためのメソッド。<br>ミドルウェアは、Expressアプリケーション内でリクエストとレスポンスの処理を行うために使用される。<br>例：<br><code>app.use((req, res, next) =&gt; {</code><br><code> console.log(&apos;Received a request!&apos;);</code><br><code> next();</code><br><code>});</code><br><br>エンドポイントごとに異なるミドルウェアを追加することも出来る。<br>例えば、/api 以下のエンドポイントには認証チェックを入れるミドルウェアを追加する場合は以下のように書く。<br><code>app.use(&apos;/api&apos;, (req, res, next) =&gt; {</code><br><code> if (!req.isAuthenticated()) {</code><br><code>  res.status(401).send(&apos;Unauthorized&apos;);</code><br><code> } else {</code><br><code>  next();</code><br><code> }</code><br><code>});</code></p><h1 style="text-align: start" id="h91141937c7"><strong>next()</strong></h1><p style="text-align: start">Expressのミドルウェア関数で、次のミドルウェア関数やルートハンドラー関数を呼び出す役割を持つ。<br>next()を実行することでリクエストの処理が次のミドルウェア関数・ルートハンドラー関数に移る。</p>

Expressのapp.use()やnext()

<h1 style="text-align: start" id="h5e4c9def7a"><strong>要点</strong></h1><ul><li>Node.jsのhttpモジュールについて</li><li>httpモジュールでレスポンスが返されるタイミング</li><li>httpモジュールでレスポンスを返すときのbodyの値の入れ方</li></ul><h1 style="text-align: start" id="hcab7a2fe74"><strong><br>修正前</strong></h1><p style="text-align: start"><code>export default (req: any, res: any) =&gt; {</code><br><code>res.clearPreviewData();</code><br><code>res.status(200).json({ message: &apos;Preview data cleared.&apos; });</code><br><code>res.writeHead(307, { Location: &apos;/&apos; });</code><br><code>res.end();</code><br><code>};</code></p><h1 style="text-align: start" id="hbac1cb0a86"><strong>修正後</strong></h1><p style="text-align: start"><code>export default (req, res) =&gt; {</code><br><code> // プレビューモードのcookieを削除する</code><br><code> res.clearPreviewData();</code><br><br><code> // リダイレクト先を設定する</code><br><code> res.writeHead(307, { Location: &apos;/&apos; });</code><br><code> res.end();</code><br><code>};</code></p><h1 style="text-align: start" id="h9e5f467c67"><strong>問題点</strong></h1><p style="text-align: start">レスポンスについて理解してなかった。<br>というかNode.jsのhttpモジュールについて理解してなかった。<br>resなどはNode.jsのコアモジュールであり、Next.jsはそれを継承している。<br>今回の課題は、res.status(200)で一度レスポンスを返した後、res.end()で2回目のレスポンスを返している。</p><h2 style="text-align: start" id="h1b998f52b0"><strong>res.status()について</strong></h2><p style="text-align: start">res.status()はレスポンスのステータスコードを設定するメソッド。<br>このメソッドを呼び出した後にres.send()やres.json()などを使ってレスポンスの内容を追加することが出来る。<br>res.status()だけを呼び出した場合はレスポンスのボディは空になる。</p><h2 style="text-align: start" id="hc0c049efdb"><strong>res.end()について</strong></h2><p style="text-align: start">res.end()が記述された時点でレスポンスが返される。<br>それ以降に何も処理は入れられない。</p>

Next.js apiのレスポンス 注意点

<p>簡単に箇条書きで記します。</p><p></p><ol><li>Next.jsでアプリケーション作成</li><li>Vercelのアカウントを作成</li><li>microCMSのアカウントを作成</li><li>連携する</li></ol>

【Next.js + Vercel + microCMS】JAMstackでのアプリケーション作成【静的サイト生成】

Karabiner-Elementsで同時押しなどを自由に設定する【karabiner.json】・microCMSのブログでタグ機能を作成するとき・Firebase Cloud Messaging の認証トークン(デバイストークン)の運用のベストプラクティス・Expressにcharset=shift_jisが来たときの乗り越え方(暫定対応)・Expressのapp.use()やnext()・Next.js apiのレスポンス 注意点・【Next.js + Vercel + microCMS】JAMstackでのアプリケーション作成【静的サイト生成】