<h2 id="h8a175a9b0e">前提</h2><ul><li>graphql-rubyを導入したRailsアプリケーション</li><li>確認用にGraphiQL入れている</li><li>GraphiQL用のControllerを追加していた</li></ul><h2 id="he315f5bd0d">起きたこと</h2><ul><li>Railsが起動できない</li><li>development環境</li></ul><pre><code># エラー内容

Zeitwerk::NameError:
  expected file /home/circleci/project/app/controllers/graphiql_controller.rb to define constant GraphiqlController, but didn't

        raise Zeitwerk::NameError.new("expected file #{file} to define constant #{cpath}, but didn't", cref.last)
        ^^^^^</code></pre><p><br></p><h2 id="h8ebac03073">対応 1</h2><ul><li>そもそもController名が間違っていたので以下のように修正</li></ul><pre><code>GraphiqlController -&gt; GraphiQLController</code></pre><ul><li>クラス名が見つけられない旨の内容だったのでそれ関連で調べた</li><li>inflectorで小文字をキャメルケースに変換する処理を入れた<ul><li><a href="https://qiita.com/hypermkt/items/ade92ec6e7a57b45f034" target="_blank" rel="noopener noreferrer">ActionController::RoutingError - uninitialized constant GraphiQL::Rails::EditorsController エラーの解決方法</a></li></ul></li></ul><pre><code># config/initializers/zeitwerk.rb

Rails.autoloaders.each do |autoloader|
  autoloader.inflector.inflect(
    "graphiql" =&gt; "GraphiQL"
  )
end</code></pre><p><br></p><h2 id="h3f3435a2ff">起きたこと 2</h2><ul><li>解決したと思ってpushしたら、連携しているCI側でエラーが起きた</li><li>内容は同じ</li></ul><p><br></p><h2 id="h4f77066431">対応 2</h2><ul><li>config/environments/test.rb でconfig.eager_load = <code>false</code>  としてみる<ul><li>CIが通ることを確認</li></ul></li><li>config/environments/development.rb で config.eager_load = <code>true</code> としてみる<ul><li>Railsが正常に起動することを確認</li></ul></li></ul><h2 id="hc26edafb66">疑問</h2><p>GraphiQLControllerを読み込んだ際に起きていることは分かったが、何故development環境では正常に起動できているのか？<br></p><h2 id="h9c5358807e">対応 3</h2><ul><li>コードを再度よくよく見てみる<ul><li>"graphiql-rails" がdevelopment環境指定になっていた</li><li>development環境でしか使用しないのでその指定にしていたが、GraphiQLControllerは自前で存在しているので全環境でロードする</li></ul></li><li>全環境指定に変更し、config/environments/test.rb の config.eager_load = trueに戻した</li><li>CIが通ることを確認</li><li>対応 1で行った config/initializers/zeitwerk.rbを削除してもCIが通ること確認</li></ul><p><br></p><h2 id="hcb9dacb773">結論</h2><ul><li>間違いは2点あった<ul><li>自前で作成したGraphiQLControllerのクラス名が間違っていた -&gt; development環境で起きた問題</li><li>"graphiql-rails" の環境指定が間違っていた -&gt; CIで起きた問題</li></ul></li><li>どちらともGraphiqlControllerというクラス名が見つけられないという、名前解決系エラーだったためそもそも問題が2つあったということに気づくまで時間がかかった</li><li>initializerを追加するという、必要の無い対応を先に入れてしまったためさらにややこしい状況になっていた<ul><li>inflector処理はgraphiql-rails側に入っているので自前で追加しなくても良い</li><li><a href="https://github.com/rmosolgo/graphiql-rails/blob/master/lib/graphiql/rails.rb#L3-L12" target="_blank" rel="noopener noreferrer">graphiql-railsの処理</a></li></ul></li></ul>

Zeitwerkのエラー顛末

<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>

BlogList

Zeitwerkのエラー顛末

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

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

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

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

BlogList

Zeitwerkのエラー顛末

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

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

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

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

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