<p>本ブログのNextバージョンを12-&gt;13にした際のメモ</p><h2 id="h7392f7751b"><br>アップグレードしたもの</h2><p>package.jsonの差分は以下の通り<br>主に以下のメジャーアップデートを行った</p><pre><code>next: 12 -&gt; 13
react: 17 -&gt; 18</code></pre><p><img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/bfbba798dde74fb08a4ed37268979a60/%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%202023-01-18%2015.41.24.png" alt=""><br></p><h2 id="h73616177c0">何をやったか</h2><h3 id="h0376cf1a0d"><br>Next周りの対応</h3><ul><li>Linkコンポーネントのaタグラップしない対応</li></ul><p>Next13からLinkコンポーネントにaタグを挟まなくて良くなった<br>https://nextjs.org/blog/next-13#nextlink</p><ul><li>対応内容: aタグを消す</li></ul><h3 id="h5e015cd3e6"><br>React</h3><ul><li>VFC非推奨</li></ul><p>React.FCでchildrenを使わないことを明示したい場合VFC(Void Functional Conponent)を使っていたが、React18からFCにchildrenが除外された。（使う際に明示する必要がある）それに伴ってVFCは非推奨となったのでFCに変更した。<br>https://ja.reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions</p><ul><li>対応内容: VFC -&gt; FCに変更</li></ul><p><br></p><h3 id="hae6947d5ce">microCMS</h3><p>これはバージョンアップに伴い、というより以前の実装部分が古くなってたので修正したものが多い</p><ul><li>ListResponseの型</li></ul><p>リスト系レスポンスの型を独自で定義したが、microCMS側で提供されてたのでそれを使うようにした</p><pre><code>// before
type ListContentsResponse&lt;T&gt; = {
&nbsp; contents: T[]
&nbsp; totalCount: number
&nbsp; offset: number
&nbsp; limit: number
}
type BlogListResponse = ListContentsResponse&lt;BlogResponse&gt;
type StaticProps = {
&nbsp; blogs: BlogListResponse
&nbsp; totalCount: number
}</code></pre><p><br></p><pre><code>// after
import { MicroCMSListResponse } from "microcms-js-sdk"
type StaticProps = {
&nbsp; blogs: MicroCMSListResponse&lt;BlogResponse&gt;
  totalCount: number
}</code></pre><p><br></p><h3 id="ha739b3b8f6">その他</h3><p>上記に伴うファイル整理とか、謎にpromise.allしてるところをawaitに変更する等があったが自分の実装部分なので割愛。<br></p><h2 id="hb7aeae5e0f">終わり</h2><p>思ったほど大工事にはならなかった。</p>

Next 12 -> 13アップグレード したときのメモ

<p>自分のブログにページングついてないということに気づいていたが、良くも悪くもコンテンツがまだページングするほどではないためスルーしていました。<br>いい加減つけておこうと思い立ち対応しました。<br><br>microCMSのガイドがあったのでそれに沿って対応しました。<br>https://blog.microcms.io/next-pagination/<br><br>流れとしては上記記事の通りです</p><ul><li>ページングコンポーネントを作成する</li><li>ブログ一覧ページにページングコンポーネントを導入する</li><li>ページング個別ページを作成する</li></ul><p><br></p><h2 id="h2a40b4fe2c">ページングコンポーネントを作成する</h2><p>記事に掲載されたコードをベースに下記を追加で対応しました</p><ul><li>tsx化</li><li>tailwindでスタイリング</li><li>1ページごとのコンテンツ数を定義</li></ul><pre><code>import Link from "next/link"

type PagenationProps = {
  totalCount: number
}
export const Pagination = (props: PagenationProps) =&gt; {
  const totalCount = props.totalCount


  const range = (start: number, end: number) =&gt;
    [...Array(end - start + 1)].map((_, i) =&gt; start + i)


  return (
    &lt;nav aria-label="Page navigation example"&gt;
      &lt;ul className="inline-flex items-center -space-x-px"&gt;
        {range(1, Math.ceil(totalCount / PER_PAGE)).map((number, index) =&gt; (
          &lt;li key={index}&gt;
            &lt;Link href={`/blogs/page/${number}`}&gt;
              &lt;a className="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"&gt;
                {number}
              &lt;/a&gt;
            &lt;/Link&gt;
          &lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/nav&gt;
  )
}

// TODO: 本来はもうちょっと数を増やすべきだが、ページングのテストのため5件にしている
export const PER_PAGE = 5</code></pre><p><br></p><h2 id="he790df742a">ブログ一覧ページにページングコンポーネントを導入する</h2><ul><li>getStaticPropsのパラメータにtotalCount(コンテンツ件数)を追加</li></ul><pre><code>type StaticProps = {
  blogList: BlogListResponse
  totalCount: number  // 追加
}
export const getStaticProps: GetStaticProps&lt;StaticProps&gt; = async () =&gt; {
  // 省略
   const totalCount = blogList.totalCount
  // 省略

  return {
    props: { blogList, totalCount },
  }

  // 省略</code></pre><ul><li>ページングコンポーネントを追加</li></ul><pre><code>&lt;Pagination totalCount={totalCount} /&gt;</code></pre><p><br></p><h2 id="ha48740d418">ページング個別ページを作成する</h2><ul><li>src/pages/blogs/page/[id].tsx を作成する</li><li>getStaticPaths でページのパスを定義する</li></ul><pre><code>export const getStaticPaths = async () =&gt; {
  const repos = await client.get({ endpoint: "blogs" })

  const pageNumbers = []

  const range = (start: number, end: number) =&gt;
    [...Array(end - start + 1)].map((_, i) =&gt; start + i)

  const paths = range(1, Math.ceil(repos.totalCount / PER_PAGE)).map(
    (repo) =&gt; `/blogs/page/${repo}`
  )

  return { paths, fallback: false }
}</code></pre><ul><li>getStaticProps でページング個別ページのパラメータを定義する</li></ul><pre><code>export const getStaticProps: GetStaticProps&lt;StaticProps&gt; = async (context) =&gt; {
  const { params } = context

  if (!params?.id) {
    throw new Error("Error: ID not found")
  }
  const id = Number(params.id)

  const data = await client.get({
    endpoint: "blogs",
    queries: { offset: (id - 1) * 5, limit: 5 },
  })

  return {
    props: {
      blogs: data,
      totalCount: data.totalCount,
    },
  }
}</code></pre><p><br></p><h2 id="hde965b176a">完成</h2><p>以上！</p>

Next.jsのブログにページングをつけてみた

<p>ORMではなく、直接SQLを書く必要が出てきたので復習してみた。<br>要件としては以下のような感じです。<br></p><h2 id="he7a3e9e48e">売上テーブル（sales_amounts）</h2><p>以下のフィールドを持っている</p><ul><li>顧客ID(client_id): number</li><li>金額(amount): number</li><li>対象日時[何日分の売上か] (target_date): date</li></ul><p><br></p><h2 id="ha31bd80de1">要件</h2><ul><li>前月分の売上と過去三ヶ月分の売上平均の比率を出したい</li><li>売上の推移を確認する目的</li></ul><p><br></p><h2 id="h00b8af9eb7">仕様</h2><ul><li>金額は月ごとに積み上げ形式</li><li>シンプルに月で集約して最大値を取ってくれば月の売上は取得できる</li></ul><p><br></p><h2 id="h3dfbe92010">SQL</h2><h3 id="h6494a94420">前月の売上</h3><ul><li>target_dateで絞り込む</li><li>顧客IDとtarget_dateを年月で切ったもので集約</li><li>金額の最大値を取得</li></ul><pre><code>    SELECT
        client_id,
        to_char(target_date, 'YYYY-MM') as ym,
        MAX(amount)
    FROM sales_amounts
    WHERE target_date &gt;= date_trunc('month', now()) - interval '1 month'
    AND target_date &lt; date_trunc('month', now())
    GROUP BY client_id, ym</code></pre><p><br></p><h3 id="h42c28cc452">（現在月を含まない）過去３ヶ月分の売上の平均</h3><p>まず過去３ヶ月分の売上を取得する。前月売上同様年月でグルーピングした状態にする</p><pre><code>SELECT
    client_id,
    to_char(target_date, 'YYYY-MM') as ym,
    MAX(amount)
FROM sales_amounts
WHERE target_date &gt;= date_trunc('month', now()) - interval '3 month'
AND target_date &lt; date_trunc('month', now())
GROUP BY client_id, ym</code></pre><p><br>上記をサブクエリとして、顧客IDで集約する<br>さらに平均を出す</p><pre><code>    SELECT
        client_id,
        round(avg(amount)) as total_amount_avg_3month
    FROM
        (
          SELECT
              client_id,
              to_char(target_date, 'YYYY-MM') as ym,
              MAX(amount) as amount
          FROM sales_amounts
          WHERE target_date &gt;= date_trunc('month', now()) - interval '3 month'
          AND target_date &lt; date_trunc('month', now())
          GROUP BY client_id, ym
       )
     GROUP BY client_id</code></pre><p><br>上記２つのSQLを更にサブクエリにしてjoinする<br>売上の上昇率と下降率両方を取得するため　<code>直近/過去３ヶ月</code>  、 <code>過去３ヶ月/直近</code>  の値を出す<br><br>最終形はこんな感じ</p><pre><code>SELECT
  A.client_id,
  round(((NULLIF(B.last_amount, 0) / NULLIF(A.amount_avg_3month, 0) - 1) * 100)) as ratio_last_to_3month,
  round(((NULLIF(A.amount_avg_3month, 0) / NULLIF(B.last_amount, 0) - 1) * 100)) as ratio_3month_to_last,
FROM


(
  SELECT
    client_id,
    round(avg(amount)) as amount_avg_3month
  FROM
      (
        SELECT
          client_id,
          to_char(target_date, 'YYYY-MM') as ym,
          MAX(amount) as amount
        FROM sales_amounts
        WHERE target_date &gt;= date_trunc('month', now()) - interval '3 month'
        AND target_date &lt; date_trunc('month', now())
        GROUP BY client_id, ym
      ) as three_month_sales_amounts
  GROUP BY client_id
) as A



INNER JOIN
(
  SELECT
    client_id,
    to_char(target_date, 'YYYY-MM') as ym,
    MAX(amount) as last_amount
  FROM sales_amounts
  WHERE target_date &gt;= date_trunc('month', now()) - interval '1 month'
  AND target_date &lt; date_trunc('month', now())
  GROUP BY client_id, ym
  ORDER BY client_id, ym
) as B


ON A.client_id = B.client_id</code></pre><p><br></p><h2 id="h86c1eb6dfa">注意点</h2><ul><li>今回のクエリはアプリケーション経由で叩かれるものではないのでパフォーマンスの考慮はしていない（あとでやる）</li></ul><p><br></p><h2 id="h3bcda3e6b0">最後に</h2><ul><li>自分で振り返ったときに何を取得しようとしていたかがわからなくなりそうなので、途中経過を記載しておくのは良いと思った</li><li>とはいえあんまりSQLを直接書くのは極力さけたい（今回は特殊な事情による）</li></ul>

postgresで直SQLを書くことになったので復習してみた - 集約周り

<p>骨格推定というものを触るかもしれないので、サクッとどんなもんか調べて触ってみました。<br></p><h2 id="hfc8480466f">骨格推定とは</h2><ul><li>画像や動画から人物の骨格を推定する技術</li><li>推定処理はAI</li><li>骨格検知、骨格検出、骨格認識 等言い回しはいくつかある</li></ul><p><br>今回はWebカメラで写った動画を元に、骨格推定を行うというサンプルを作りました。<br><br>参考にした記事は<a href="https://developers.gnavi.co.jp/entry/posenet/hasegawa" target="_blank" rel="noopener noreferrer">こちら</a><br>※ 古めの記事なのでgithubのコード等は無くなってました<br></p><h2 id="h86ee44ea6a">使用ライブラリ</h2><ul><li>TensorFlow.js</li><li>PoseNet</li></ul><blockquote><code>PoseNet</code><span style="color:#333333">は</span><code>TensorFlow.js</code><span style="color:#333333">を使用した、ブラウザで実行可能な姿勢推定ディープラーニングモデルです。</span></blockquote><p><br></p><h2 id="h0c8fa4812e">処理の流れ</h2><p>処理の大枠の流れは以下です</p><ul><li>htmlのvideoタグと使ってブラウザとwebカメラを接続する</li><li><s>videoの動画をcanvasに描画する </s> ← すみませんこちらは勘違いでした。正しくはvideoの上にcanvasを重ねる、でした。</li><li>canvasに描画される度に骨格推定処理を走らせる</li><li>骨格推定処理から取得した骨格座標をcanvasに描画する</li></ul><p><br>今回はPoseNetのうち、単一姿勢を検出するメソッド <code>estimateSinglePose</code>  を使用しました。<br>estimateSinglePose の戻り値に <code>keypoints</code>  という配列があります。<br>この中に各部位ごとの座標（右手首がどの画像の位置にあるか？等の座標情報）が入っているので、こちらを描画に使用します。<br>得られる部位が全部で17箇所あります。<br><br>今回はわかりやすく左右の手首の座標を表示してみました。<br><img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/47f65d3348c6492191e0f68b4825e988/%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-12-06%2018.55.09.png" alt=""><br></p><h2 id="h5fcec0cf90">所感</h2><h3 id="h37d688c5eb">良さそう</h3><ul><li>特に準備するものもなく、PCとWebカメラだけでサクッと実装できた</li><li>ライブラリhtmlから読み込んだのは2つのみ</li><li>骨格推定処理の細かいとこがわからなくても、インターフェースがわかりやすい</li></ul><h3 id="h0f5de14ac4">懸念点</h3><ul><li>実際に実装する場合、動かす端末のスペック要件がわかってない（動かす環境は非力なマシンになる想定なので）</li><li>上記懸念があるので、端末ローカルで稼働させるのではなくAPIのような形で外部で処理させたいが方法がわかってない</li></ul><p><br>という感じでした。<br>PoseNet自体はかなり前に公開されているし、参考にした記事も2018年のものなので「なにを今更」的な感じになっているかもしれないが、まあやってみた系の記事として残しておきます。</p><h3 id="hcf83e1357e"><br></h3><h2 id="hcf2b66e679">コード</h2><h3 id="hda1205ad89">html</h3><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://unpkg.com/@tensorflow/tfjs"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/@tensorflow-models/posenet"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;video
      id="video"
      width="800px"
      height="600px"
      autoplay="1"
      style="position: absolute"
    &gt;&lt;/video&gt;
    &lt;canvas
      id="canvas"
      width="800px"
      height="600px"
      style="position: absolute"
    &gt;&lt;/canvas&gt;
    &lt;div class="ball"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js"&gt;&lt;/script&gt;
  &lt;script src="./posenet_sample.js"&gt;&lt;/script&gt;
&lt;/html&gt;</code></pre><p><br></p><h3 id="ha50cf0a4b9">js</h3><pre><code>const imageScaleFactor = 0.2;
const outputStride = 16;
const flipHorizontal = false;
const stats = new Stats();
const contentWidth = 800;
const contentHeight = 600;


bindPage();


async function bindPage() {
  const net = await posenet.load(); // posenetの呼び出し
  let video;
  try {
    video = await loadVideo(); // video属性をロード
  } catch (e) {
    console.error(e);
    return;
  }
  detectPoseInRealTime(video, net);
}


// video属性のロード
async function loadVideo() {
  const video = await setupCamera(); // カメラのセットアップ
  video.play();
  return video;
}


// カメラのセットアップ
// video属性からストリームを取得する
async function setupCamera() {
  const video = document.getElementById("video");
  if (navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: true,
    });
    video.srcObject = stream;


    return new Promise((resolve) =&gt; {
      video.onloadedmetadata = () =&gt; {
        resolve(video);
      };
    });
  } else {
    const errorMessage =
      "This browser does not support video capture, or this device does not have a camera";
    alert(errorMessage);
    return Promise.reject(errorMessage);
  }
}


// 取得したストリームをestimateSinglePose()に渡して姿勢予測を実行
// requestAnimationFrameによってフレームを再描画し続ける
function detectPoseInRealTime(video, net) {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const flipHorizontal = true; // since images are being fed from a webcam


  async function poseDetectionFrame() {
    stats.begin();
    let poses = [];
    const pose = await net.estimateSinglePose(
      video,
      imageScaleFactor,
      flipHorizontal,
      outputStride
    );
    poses.push(pose);


    ctx.clearRect(0, 0, contentWidth, contentHeight);


    ctx.save();
    ctx.scale(-1, 1);
    ctx.translate(contentWidth, 0);
    ctx.drawImage(video, 0, 0, contentWidth, contentHeight);
    ctx.restore();


    poses.forEach(({ score, keypoints }) =&gt; {
      // TODO: 取得した骨格にポイントを描画したい場合
      // keypoints.map((kp, index) =&gt; {
      //   drawWristPoint(kp, ctx);
      // });


      // とりあえず左右の手首のみ描画してみた ポイントの色もとりあえず左右の違いが判別できるように
      drawWristPoint(keypoints[9], ctx, "red");
      drawWristPoint(keypoints[10], ctx, "yellow");
    });


    stats.end();


    requestAnimationFrame(poseDetectionFrame);
  }
  poseDetectionFrame();
}


// 与えられたKeypointをcanvasに描画する
function drawWristPoint(wrist, ctx, color) {
  ctx.beginPath();
  ctx.arc(wrist.position.x, wrist.position.y, 3, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
}</code></pre><p><br></p>

TensorFlow.jsとPoseNetで骨格推定をやってみた

<p>mofmofでは毎日オンライン朝会をしていて、２チームに別れてzoomの部屋に入りそれぞれの部屋で１人ずつ最近の出来事をしゃべるってことを15分程やっています。<br>ちょっと雑談しましょう的なノリです。<br><br>以前からgas(google app script)で朝会を管理していたのですが、<br><br>- コード管理とデプロイが面倒<br>- 環境変数にすべき値（スプレッドシートIDとかslackのhookURLなど）をハードコーディングする必要がある<br>- gs≒はjsなので型が無い<br><br>claspを使うとtypescriptで開発できたり、githubと連携してデプロイできそうだったり（※未検証）するので良さそうだなと思ってclaspで作り直しました。<br><br>## やること<br>- スプレッドシートからメンバーリストを取得<br>- メンバーをシャッフルする<br>- シャッフルしたメンバーを２チームに分ける<br>- スプレッドシートからランダムでお題（話すことが思いつかない人用にお題を出す）を１つ取得<br>- 特別コンテンツ（おしゃべりじゃないことをする日、オンラインゲーム・瞑想・ヨガとか）をやるかどうか抽選する<br>- ↑情報をテキスト化する<br>- テキストをslackに通知する<br><br>## セットアップ<br>セットアップ等はこちらの記事を参考にしました。<br>https://dev.classmethod.jp/articles/ts2gas/<br><br>clasp自身がtypescriptを変換してくれるので特に何も考えることもなくtsがgsに変換された上でgasにデプロイされます。<br><br>## ファイル分割<br><br>typescriptが使えるので、てっきりモジュール化(ESM)・ファイル分割もいけるんだろうと思っていたのですができませんでした。<br>デプロイしたら単純にimport文がコメントアウトされてるだけでした。<br><br>### webpack<br>サードパーティのプラグイン等を使えばモジュール化もできそうな感じではあったのですが、webpackでローカルビルドしてjsに変換した上でアップする方式にしました。<br><br>こちらの記事を参考にしました。<br>https://zenn.dev/tacck/articles/20211218_gas#webpack-%E8%A8%AD%E5%AE%9A<br><br>やってることは<br><br>- webpackにgas-webpack-pluginを追加している<br>	- gasが呼び出す関数をトップレベルに設定する<br>	- globalに設定した関数がgas上で選択可能になる<br>	- https://github.com/fossamagna/gas-webpack-plugin<br>	- 例：<br>	<br>```<br>$index.ts<br>	<br>import { main, timerMain } from "./modules/main";<br><br>declare const global: {<br>&nbsp;[x: string]: unknown;<br>};<br><br>global.main = main; // 処理の本体。本来はトップレベルにする必要ない（timeMainの中で呼び出される）が、デバッグ用に直接叩くこともあるので追加<br>global.timerMain = timerMain; // gasのタイマーから呼び出す関数<br>```<br><br>ビルドしてclasp deployするとglobalに設定した関数がgas上で実行可能関数として選択できます。<br><img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/6d45469a7f1d4bd49b10e2996bc9842a/sc-gas-global.png" alt=""><br><br>参考記事のように、package.jsonで以下のようにしとくと便利でした<br><br>```<br>&nbsp;"scripts": {<br>&nbsp;&nbsp;"build": "webpack",<br>&nbsp;&nbsp;"push": "npm run build &amp;&amp; clasp push"&nbsp;<br>&nbsp;},<br>```<br><br>## テスト<br><br>ここまででアプリ自体はできました。<br>ついでなのでテストもしておこうと思いました。<br>と言っても最低限のところだけ、作成したメッセージが期待された文言が入っているかをテストしてみました。<br><br>### gas特有の関数<br>spread操作とか環境変数操作等、gas特有の関数に依存しているのでテストするにあたってはスタブを作成する必要があります。<br>自前で作ると面倒で何かいい感じのものは無いかと調べたらありました。<br>https://github.com/dan-kushnaryov/gas-mock-globals<br>一通りのスタブが揃ってるっぽいのでこれをテストコードでimportしてあげればOK<br><br>## 完成<br><br>こんな感じでslackに通知されます。<br><img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/c56b90ed6dc54b7f8f3613d6d61e921a/sc-slack-hook-img.png" alt=""><br><br>- Around: zoomみたいなオンライン会議用チャットツールです。ゲームなどもできます。リアクション機能多め。<br>- `アンゴラ`・`ウール` はオンライン会議室の名前です。羊からの連想です。<br>- マスクしている箇所にメンバーの名前がリスト表示されます。<br><br>リポジトリはこちらです。<br>https://github.com/sugiii8/asakai-clasp</p>

BlogList

Next 12 -> 13アップグレードしたときのメモ

Next.jsのブログにページングをつけてみた

postgresで直SQLを書くことになったので復習してみた - 集約周り

TensorFlow.jsとPoseNetで骨格推定をやってみた

claspでgas(google app script)アプリをいい感じに改修した

BlogList

Next 12 -> 13アップグレード したときのメモ

Next.jsのブログにページングをつけてみた

postgresで直SQLを書くことになったので復習してみた - 集約周り

TensorFlow.jsとPoseNetで骨格推定をやってみた

claspでgas(google app script)アプリをいい感じに改修した

Next 12 -> 13アップグレードしたときのメモ