VX URLS

<h2 id="h9707d3a59a">概要</h2><p>どうもです。あまみやです。</p><p>また深夜のブログ投稿になります()やる気出たときにしか書けないのが私なので...</p><p>今回は、私のブログ兼遊び場のサイトのGitHubActionでビルド時に使っているランタイムをBunに切り替える備忘録です。</p><h2 id="h6feaa58d20">Bunについて</h2><p>BunはJSのランタイムであるNodejsとそのパッケージマネージャーであるNPMを置き換えるべく誕生したもので、NPMやYarnに比べてかなり高速に動作します。</p><p>ただGitHub ActionsのNextjs用のテンプレートで動かそうとするとビルドに失敗するので、Bun公式のDocsをもとに設定を書き換えていきます。</p><h2 id="h922edff87b">実装</h2><p>変更前のnextjs.yaml</p><div data-filename="nextjs.yaml"><pre><code># Sample workflow for building and deploying a Next.js site to GitHub Pages
#
# To get started with Next.js see: https://nextjs.org/docs/getting-started
#
name: Deploy Next.js site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: [&quot;master&quot;]
  repository_dispatch:
    types: [update-posts]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: &quot;pages&quot;
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Detect package manager
        id: detect-package-manager
        run: |
          if [ -f &quot;${{ github.workspace }}/yarn.lock&quot; ]; then
            echo &quot;manager=yarn&quot; &gt;&gt; $GITHUB_OUTPUT
            echo &quot;command=install&quot; &gt;&gt; $GITHUB_OUTPUT
            echo &quot;runner=yarn&quot; &gt;&gt; $GITHUB_OUTPUT
            exit 0
          elif [ -f &quot;${{ github.workspace }}/package.json&quot; ]; then
            echo &quot;manager=npm&quot; &gt;&gt; $GITHUB_OUTPUT
            echo &quot;command=ci&quot; &gt;&gt; $GITHUB_OUTPUT
              # Use `npm run` so later steps can call `npm run build`
              echo &quot;runner=npm run&quot; &gt;&gt; $GITHUB_OUTPUT
            exit 0
          else
            echo &quot;Unable to determine package manager&quot;
            exit 1
          fi
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: &quot;20&quot;
          cache: ${{ steps.detect-package-manager.outputs.manager }}
      - name: Setup Pages
        uses: actions/configure-pages@v5
        with:
          # Automatically inject basePath in your Next.js configuration file and disable
          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
          #
          # You may remove this line if you want to manage the configuration yourself.
          static_site_generator: next
      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            .next/cache
          # Generate a new cache whenever packages or source files change.
          key: ${{ runner.os }}-nextjs-${{ hashFiles(&apos;**/package-lock.json&apos;, &apos;**/yarn.lock&apos;) }}-${{ hashFiles(&apos;**.[jt]s&apos;, &apos;**.[jt]sx&apos;) }}
          # If source files changed but packages didn&apos;t, rebuild from a prior cache.
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles(&apos;**/package-lock.json&apos;, &apos;**/yarn.lock&apos;) }}-
      - name: Install dependencies
        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
      - name: Build with Next.js
        run: ${{ steps.detect-package-manager.outputs.runner }} build
        env:
          CMS_API_KEY: ${{ secrets.CMS_API_KEY }}
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4</code></pre></div><p>テンプレだとyamlのファイル名などでNPMかyarnなのか判定しているようです。(ぶっちゃけいらないからあとで消そうかな?)</p><p>変更後(公式Docs参照&amp;GitHub Copilot使用)</p><p></p><div data-filename="nextjs.yaml"><pre><code># Sample workflow for building and deploying a Next.js site to GitHub Pages
#
# To get started with Next.js see: https://nextjs.org/docs/getting-started
#
name: Deploy Next.js site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: [&quot;master&quot;]
  repository_dispatch:
    types: [update-posts]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: &quot;pages&quot;
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Bun
        uses: oven-sh/setup-bun@v2
      - name: Setup Pages
        uses: actions/configure-pages@v5
        with:
          static_site_generator: next
      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            .next/cache
          key: ${{ runner.os }}-nextjs-${{ hashFiles(&apos;**/bun.lockb&apos;) }}-${{ hashFiles(&apos;**.[jt]s&apos;, &apos;**.[jt]sx&apos;) }}
          restore-keys: |
            ${{ runner.os }}-nextjs-
      - name: Install dependencies (bun)
        run: bun install --frozen-lockfile
      - name: Build with Next.js (bun)
        run: bun --bun next build
        env:
          CMS_API_KEY: ${{ secrets.CMS_API_KEY }}
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
</code></pre></div><p>ローカルやActionsでのビルド時間もだいぶ早くなりました。</p><p>Actionsって動作テストがなかなかやりづらくて、置き換え作業後回しにしてたんですが....ｗ Copliotのおかげでだいぶ書きやすくなりましたね</p><h2 id="h335a87b5ef">参考サイト</h2><p><a href="https://bun.com/docs/guides/runtime/cicd">https://bun.com/docs/guides/runtime/cicd</a></p><p></p>

GitHub ActionsのNodejsランタイムをBunに置き換える

<p>最近ほぼ毎日VRchatで撫でられに行ってるあまみやです。早朝ですが暇なのでブログを書きます。</p><p>フレンドの数も20人を超えまして、集会にも顔(?)を出してたおかげかかなり早くNew UserからUserに上がれました。うれP</p><p>海外のワールドにも行くことがあって、特にマック(私はマック語圏の人間ですｗ)はスラングとお下品な単語がきけて結構リアルな英語を聞けてある意味勉強になりますｗ</p><p>あとはFrutiger Aeroをイメージしたワールドにもいってみたんですが、初めて自分の英語をほめてもらえました。ありがとうリンクニキ(アバターがゼルダのリンクだったので)</p><p>これからも続けていくぞ。</p><p></p><p></p><p>Frutiger Aeroのワールドはこちら</p><p><a href="https://vrchat.com/home/launch?worldId=wrld_3365ec24-6b19-41d4-9a63-d45adb0ede61">Frutiger Aero Landscape - Launch Instance - VRChat</a></p>

Userにあがりました

<p>ちょっとしたことですが、最近VRchatにはまっておりまして、</p><p>ついにアバターを買いました。</p><p>6000円くらいのやつです。友人いわくそこまで高くないらしい(VRChatterはみんな金銭感覚くるってるよ)</p><p>蓮華ちゃんをかました(見た目自体は前の記事のサンプルアバターとほぼ同じ)</p><p><a href="https://konomipainter.booth.pm/items/7643489">https://konomipainter.booth.pm/items/7643489</a></p><p>買うといろいろな機能が解放されるのですねーﾜｸﾜｸ</p>

アバターかいました

<p>こんばんは。あまみやです。くそ寒い。</p><p>最近Nuxtの勉強をしていて、Nuxtのページフォルダの設定を調べていたらdokyumento[.]jpというなぞのサイトがヒットしました</p><p>いつは以前も別のアプリの開発で検索してた時も引っかかることがあって、特にBingだと上位に出てくることが多いですが見てみた感じ明らかに公式じゃないのと、有志の翻訳な感じもしないです。</p><p>過去にheguroという方がscrapboxに特徴をまとめてくださっています</p><p><a href="https://scrapbox.io/heguro/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E5%85%AC%E5%BC%8F%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%82%92%E6%A4%9C%E7%B4%A2%E3%81%99%E3%82%8B%E3%81%A8%E4%B8%8A%E4%BD%8D%E3%81%AB%E3%83%92%E3%83%83%E3%83%88%E3%81%99%E3%82%8B_dokyumento%5C.jp_%E3%81%A8%E3%81%84%E3%81%86%E8%AC%8E%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88" target="_blank" rel="noopener noreferrer nofollow">ライブラリの公式ドキュメントを検索すると上位にヒットする dokyumento\.jp という謎のサイト</a></p><blockquote class="twitter-tweet" data-theme="dark" data-dnt="true" align="center"><p lang="ja" dir="ltr">なんか DOKYUMENTO\.JP という OSS のドキュメントを日本語翻訳して公開しているいるドメインがある。ちょっと怪しいと感じたので NextDNS で拒否にいれておいた。</p>— V (@voluntas) <a href="https://twitter.com/voluntas/status/1908073420488946160?ref_src=twsrc%5Etfw">April 4, 2025</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<p></p><p>うーんやっぱりAI生成なのかな?</p><p>最近だとDeepWikiというGitHubのリポジトリからドキュントを生成してくれるAIのサービスもあって、それと似たような雰囲気(?)</p><p>jpドメインって基本的に日本の居住者や企業じゃないと取得できなかったはずなんですが、ドメイン自体は中国の人が取得してるらしいのが謎。</p><p>単純に日本語に自動翻訳してくれるサービスなのか、それとも...</p><p>かりにそうだとしてもやたら検索エンジンにインデックスさせるのはやめてほしいかな...w(これ以外にもgensparkとか)</p><p>ちなみにCMANのサイトでDNS問い合わせしてみた結果がこちら</p><pre><code>; &lt;&lt;&gt;&gt; DiG 9.11.4-P2-RedHat-9.11.4-26.P2.el7_9.16 &lt;&lt;&gt;&gt; @(当社Dnsサーバ) dokyumento.jp
; (1 server found)
;; global options: +cmd
;; Got answer:
;; -&gt;&gt;HEADER&lt;&lt;- opcode: QUERY, status: NOERROR, id: 60014
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 2, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 4096
;; QUESTION SECTION:
;dokyumento.jp.			IN	A

;; ANSWER SECTION:
dokyumento.jp.		600	IN	A	80.209.241.176

;; AUTHORITY SECTION:
dokyumento.jp.		86398	IN	NS	ivan.dnspod.net.
dokyumento.jp.		86398	IN	NS	jack.dnspod.net.

;; Query time: 2094 msec
;; SERVER: 157.65.26.10#53(157.65.26.10)
;; WHEN: Sun Jan 25 18:18:21 JST 2026
;; MSG SIZE  rcvd: 106</code></pre>

dokyumento[.]jpというドメインについて#webdev

<p>※アイキャッチはサンプルアバターです。</p><p><a href="https://nknighta.me/blog/i_started_vrchat_visitor/?utm_source=share_btn&amp;utm_medium=bottom_copy_link"><strong>前回</strong></a></p><p>VRchat初日にフレンド作ったり技術系の集会にいっていたおかげで早くもNewUserになることができました。</p><p>すでにアバターは購入済なので、さっそくアップロードしてみようかな?</p><p>昨日参加したワールド</p><p><a href="https://x.com/vrwebtechorg">(1) Web技術集会（@vrwebtechorg）さん / X</a></p><p></p>

はやくもNewUserになりました

<p>まだVisitorだしデスクトップだけど(笑)</p><p>友人に教えてもらいながら進めてます</p><p>とりあえずVisitorの上(言い方忘れた)になりたい</p><p>まだ90分くらいしかできてないｗ</p><figure><img src="https://images.microcms-assets.io/assets/a2939c8d25434ae5a1f853f2dc239a0f/b270fc85276d4194b1d3a41fa04994b2/VRChat_2026-01-21_14-24-39.643_2560x1440.png" alt="" width="2560" height="1440"></figure><figure><img src="https://images.microcms-assets.io/assets/a2939c8d25434ae5a1f853f2dc239a0f/d17eaece880442c78ebf7fbad2773041/VRChat_2026-01-21_14-24-23.727_2560x1440.png" alt="" width="2560" height="1440"></figure><h3 id="hd39623290b"><strong>VRChat : </strong><a href="https://nknighta.me/vrchat" target="_blank" rel="noopener noreferrer"><strong>プロフィール</strong></a></h3>

VRChatはじめました

<p>学校のゲーム開発の学習のために作っているクリッカーゲームの最新版を公開しました</p><p>最新版はv0.0.5です</p><p>Unityroom or 私のサイトでプレイできます。</p><p>多分Unityroomの方が軽い</p><p>Unityroom</p><p><a href="https://unityroom.com/games/nk3dev_clicker">https://unityroom.com/games/nk3dev_clicker</a></p><p>Web</p><p><a href="https://nknighta.me/unity-clickergame-web/v0_0_5/">https://nknighta.me/unity-clickergame-web/v0_0_5/</a></p>

クリッカーゲームの最新版を公開(v0.0.5)

<p>とあるアプリを作るためにNextjsで開発をしていたところ、いつものようにエラーが出ました</p><p>所で最近のNextjsでは右上にいかにもエディターで開くためのボタンがありますが、この機能を生かすには事前に設定が必要です。</p><h2 id="h8bb8734b16">設定方法</h2><p>プロジェクトルートにenvファイルを用意し、以下のコードを追加</p><div data-filename=".env"><pre><code>REACT_EDITOR=code</code></pre></div><p>これで開けるようになりましたー</p><p></p><p>【追記】</p><p>.envの変数名間違ってました...(2025/11/26修正)</p>

【一部修正】vsodeでNextjsのエラー部分のコードを開けるようにする

<p>以前ytimage-dlというサムネイルをダウンロードできるWebアプリをつくったことがあるのですが、その時にyoutubeのブラウザ版だといたるところから画像データを取得していてほかにどんなサーバーがあるかきになったので色々調べます。そのほかGoogle Trust serviceやGoogle検索の共有用短縮リンク、他国のGoogle検索のドメインなども載せます。</p><p>たぶん一日でしらべきれないので随時更新していきます。</p><p>ドメインだけ知りたい場合はこちら =&gt; <a href="https://nknighta.me/dev/google-img-hosts">https://nknighta.me/dev/google-img-hosts</a></p><h2 id="he971a83838">Youtube系</h2><p>画像</p><p>yt3.ggpht[.]com アカウントアイコン他 </p><p></p><p>i.ytimg[.]com サムネイルとか</p><p></p><p>img.youtube[.]com サムネイルとか</p><p></p><p>その他</p><p>yt[.]be 短縮リンク (TVやプレステでログインするときに使用)</p><p></p><p>youtu[.]be 短縮リンク2 (Xとかに共有するとき用)</p><p></p><h2 id="h118c1d2ed8">Googleサービス</h2><p>pki[.]goog Google Trust Services (Google独自の証明局)</p><p>search[.]google 検索画面やDiscoverでのURL共有用 indexにアクセスすると検索サービスの概要がでてくる。これ経由でサイトにアクセスするとアクティビティに表示されることがある</p><p>abx[.]xyz Google親企業のAlphabetの公式サイト。大手としては珍しいxyzドメイン。決算報告書もみれる</p>

Google保有ドメインについて

<p>先日Nextjs+ChakraUIで作成したアプリケーションをCloudflareにデプロイしようと思ったのですがエラーが出まくってしょうがなかったので対処法を書いておきます。</p><h2 id="h9f510f3156">やりたいこと</h2><p>Nextjs+ChakraUIのWebアプリをCloudflareにデプロイ</p><h2 id="h1619609f8c">エラーコマンドとエラー表示</h2><pre><code class="language-shell">$npx opennextjs-cloudflare build

...[中略]...

[ERROR] Could not resolve &quot;jose&quot;

    .open-next/server-functions/default/node_modules/next-auth/jwt/index.js:15:20:
      15 │ var _jose = require(&quot;jose&quot;);
         ╵                     ~~~~~~

  The module &quot;./dist/browser/index.js&quot; was not found on the file system:

    .open-next/server-functions/default/node_modules/jose/package.json:68:17:
      68 │       &quot;workerd&quot;: &quot;./dist/browser/index.js&quot;,
         ╵                  ~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path &quot;jose&quot; as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle. You can also surround this &quot;require&quot; call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

✘ [ERROR] Could not resolve &quot;@panva/hkdf&quot;

    .open-next/server-functions/default/node_modules/next-auth/jwt/index.js:16:43:
      16 │ var _hkdf = _interopRequireDefault(require(&quot;@panva/hkdf&quot;));
         ╵                                            ~~~~~~~~~~~~~

  The module &quot;./dist/web/index.js&quot; was not found on the file system:

    .open-next/server-functions/default/node_modules/@panva/hkdf/package.json:33:17:
      33 │       &quot;workerd&quot;: &quot;./dist/web/index.js&quot;,
         ╵                  ~~~~~~~~~~~~~~~~~~~~~

  You can mark the path &quot;@panva/hkdf&quot; as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle. You can also surround this &quot;require&quot; call
  with a try/catch block to handle this failure at run-time instead of bundle-time.

✘ [ERROR] Could not resolve &quot;jose&quot;

    .open-next/server-functions/default/node_modules/openid-client/lib/helpers/client.js:1:21:
      1 │ const jose = require(&apos;jose&apos;);
        ╵                      ~~~~~~

  The module &quot;./dist/browser/index.js&quot; was not found on </code></pre><h2 id="h1c2bcaa1fd">原因と修正</h2><h3 id="h9c1f22bd6d">原因</h3><p>ChakraUIの依存関係である@emotionがビルド時に読み込まれていなかった...</p><p>next.config.jsを修正</p><div class="iframely-embed"><div class="iframely-responsive" style="padding-bottom: 50%;"><a href="https://gist.github.com/nk4dev/d46d42a549dac2c13c3333a063b14d05" data-iframely-url="https://cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fgist.github.com%2Fnk4dev%2Fd46d42a549dac2c13c3333a063b14d05&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="https://cdn.iframe.ly/embed.js" charset="utf-8"></script><p>再度ビルドしたら通りましたー</p><h3 id="h6a5297362b">追記</h3><h3 id="h7295077a0f">エラーの原因(?)</h3><p>ビルド時のエラーについて、opennext側でビルドする際になぜかはわかりませんがライブラリをコピーしているっぽいのでこれが原因なのかなぁ...??</p><p>通常のnext buildとopennextのビルドは挙動がちがうので予測できない動きしちゃって難しい</p><pre><code>undling middleware function...
DEBUG OpenNext Resolve plugin for middleware
DEBUG OpenNext Edge plugin
DEBUG OpenNext Replacement plugin externalMiddlewareOverrides Delete override includeCacheInMiddleware
Bundling static assets...
Bundling cache assets...
Building server function: default...
DEBUG copyTracedFiles: 224308 ms
DEBUG Copying package using a workerd condition: node_modules/@emotion/cache -&gt; .open-next/server-functions/default/node_modules/@emotion/cache
DEBUG Copying package using a workerd condition: node_modules/@panva/hkdf -&gt; .open-next/server-functions/default/node_modules/@panva/hkdf
DEBUG Copying package using a workerd condition: node_modules/next-auth/node_modules/jose -&gt; .open-next/server-functions/default/node_modules/next-auth/node_modules/jose
DEBUG Copying package using a workerd condition: node_modules/openid-client/node_modules/jose -&gt; .open-next/server-functions/default/node_modules/openid-client/node_modules/jose</code></pre><h2 id="he4ba96ecb5">リンク</h2><p><a href="https://chakra-ui.com/">https://chakra-ui.com/</a></p><p><a href="https://opennext.js.org/">https://opennext.js.org/</a></p><p><a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">https://nextjs.org</a></p><p></p><p></p>

OpenNextでchakra UIが動かない時の修正法

<p>Astroで作ったブログです</p><p>https://blog.nknighta.me/</p><h2 id="h148ee15d9e">なぜAstroを触ろうと思ったのか?</h2><p>普段からいろんなJSやTSのフレームワークを試しているのですが、いつも見ているTakuya MatsuyamaさんがYoutube上でAstroを使ってサイトを制作する動画をうｐしてたのと、ウマ娘のキャンペーンでBoC&apos;zの公式サイトがAstroで開発されていて改めて勉強がてらBlogを作ってみました。</p><p></p><blockquote class="twitter-tweet" data-theme="dark" data-dnt="true" align="center"><p lang="ja" dir="ltr">AstroJS使いやすいし動作も早いけど、Nextjsより文字化けしやすかったして少し癖ありかも<br><br>でもv5はv1に比べていろいろ機能も追加されてるし、<br>公式がGitHub pagesへのデプロイ方法も載せてくれてる(しかも日本語)のですごく良き<a href="https://t.co/JB5f0LQEpf">https://t.co/JB5f0LQEpf</a></p>— Nknight AMAMIYA@varius.technology (@nk4dev) <a href="https://twitter.com/nk4dev/status/1960532121778577808?ref_src=twsrc%5Etfw">August 27, 2025</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<p>Astroの方針としては、</p><p></p><blockquote><p>&quot;これに対して、モダンなウェブフレームワークの多くは、<strong>ウェブアプリケーション</strong>を作成するために設計されています。これらのフレームワークは、ブラウザ上におけるより複雑な、アプリケーションのような体験を作成するのに適しています。ログインした管理者向けのダッシュボード、受信トレイ、ソーシャルネットワーク、Todoリスト、さらには<a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer nofollow">Figma</a>や<a href="https://ping.gg/" target="_blank" rel="noopener noreferrer nofollow">Ping</a>のようなネイティブに近いアプリケーションなどがその例です。しかし、その複雑さゆえに、コンテンツを配信する際に優れたパフォーマンスを発揮するために苦労するかもしれません。</p><p style="text-align: start">Astroは、その初期から静的サイトジェネレータとしてコンテンツに焦点を当ててきたため、コンテンツと読者を尊重しながら、<strong>パフォーマンスとパワーに優れた動的なウェブアプリケーションへと適切にスケールアップできます</strong>。Astroは、コンテンツにフォーカスするという独自の立場から、トレードオフを考慮しつつ、アプリケーションにフォーカスしたウェブフレームワークでは実装する意味がないようなパフォーマンス向上に取り組んでいます。&quot;</p></blockquote><p>だそうです。</p><p>ドキュメント上でコンテンツ駆動ベースと書いてあったので、個人的にはやっぱブログに最適なのかなと。</p><p>今回使用した技術は</p><ul><li>フロントエンド: AstroJS</li><li>CMS: MicroCMS</li><li>ホスティング:GitHub Pages</li></ul><p>ブログのリポジトリ</p><p><a href="https://github.com/nk4dev/astro-blog">https://github.com/nk4dev/astro-blog</a></p><h2 id="h9de96a3ebd">ホスティング・デプロイ設定</h2><p>事前にリポジトリを作成しMicroCMSのAPIキーを設定しておくとあとあと楽です。完成してから設定でもいいのですが、ビルド時にエラーを吐きやすくなります。</p><p>APIキーはリポジトリのSettings &gt; secrets and variables &gt; Actionsから設定できます。</p><div data-filename="astro.config.mjs"><pre><code class="language-javascript">// @ts-check
import { defineConfig } from &apos;astro/config&apos;;

// https://astro.build/config
export default defineConfig({
    site: &apos;https://blog.nknighta.me&apos;,
    base: &apos;/&apos;,
});</code></pre></div><p>GitHub Pages用のせっていはこれだけでした。Nextjsに比べると圧倒的に楽ですね。Nextだと画像の最適化機能が使えなかったりしましたが、Astroであれば特定の機能が使えないということは今のところないのでうれしいポイントです。</p><p>今回は自分のドメインを用いてブログを公開するのでbaseには&quot;/&quot;のみ設定していますが、もし&lt;GITHUB_USER_NAME&gt;.github.ioの形式で公開する場合にはリポジトリ名を入れないと404エラーを吐きまくります。</p><p>またデプロイはGitHub Actionを使います。これも公式ドキュメントに書いてあります。ありがたい</p><p><a href="https://docs.astro.build/ja/guides/deploy/github/#github-actionの設定">https://docs.astro.build/ja/guides/deploy/github/#github-actionの設定</a></p><p>deploy.ymlはそのままコピペで.github/workflows/deploy.ymlファイルに記載すれば大丈夫です。</p><p>あとはpushしてビルドが完了するのを待つだけです。</p><h2 id="hbc48be6f8b">引用・参考サイト</h2><p>Takuyaさんのサイト</p><p><a href="https://uses.craftz.dog/">https://uses.craftz.dog/</a></p><p>Astrojs docs (英語版)</p><p><a href="https://astro.build/">https://astro.build/</a></p><p>BoC&apos;z (Pixiv百科事典)</p><p><a href="https://dic.pixiv.net/a/BoC%27z">https://dic.pixiv.net/a/BoC%27z</a></p><p>※BoC&apos;z公式サイトは公開停止してました...(アクセスするとホームページにリダイレクトする)</p><p>Youtube動画</p><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/3_JE76PKBWE?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;"></iframe></div>

AstroJSに入門する

<p>最近は検索エンジン(というか実質Google)向けのSEO以上に生成AIむけの要約対策をしたほうがいいらしく、私のサイトでもやってみました。</p><p>とはいえど、私のサイトは大した情報はないですけどね(笑)</p><p>llms.txtにはサイトのURLと私のネット上での活動名なんかを入れています。テキスト事態はGeminiとGitHub Copilotで生成しました。また最近LLMむけにWebコンテンツをMarkdown化するサイトも試していたので今回使ってみました。</p><p>中身は&quot;<a href="https://nknighta.me/llms.txt" target="_blank" rel="noopener noreferrer">ここ</a>&quot;から見れます</p><h2 id="h5acf5a0d6e">使ったツール</h2><p>Gemini </p><p>GitHub Copilot(学生向け)</p><p>Web2md : WebをLLMむけにmarkdown化するサイト(試験公開中らしいので今後有料化するかも?)</p><p><a href="https://web2md.fybe.jp/">https://web2md.fybe.jp/</a></p><h2 id="hdf0456f9a2">引用</h2><p>伝統的なSEO対策はすでに死滅しており「AIの要約対策」が急務だとの指摘、一体どのようにすれば良いのか？ - GIGAZINE</p><p><a href="https://gigazine.net/news/20250725-ai-summary-llm-seo/" target="_blank" rel="noopener noreferrer nofollow">https://gigazine.net/news/20250725-ai-summary-llm-seo</a></p>

自分のサイトにllms.txtを導入した

<p>Flutterでtodoアプリを作ってみましたー</p><p>当初はローカルにのみ記録するつもりだったのですが、</p><p>最近Firebase+Flutterの組み合わせをいろんなアプリで試しているのでfirebase経由でのタスク同期やサインイン機能を実装しました。</p><p>便利だけど無料枠の上限に達しないか心配...</p><pre><code>http: ^1.2.1 # Add http package  firebase_core: ^3.1.1
firebase_auth: ^5.1.1
google_sign_in: ^6.2.1
cupertino_icons: ^1.0.8
shared_preferences: ^2.5.3
change_app_package_name: ^1.5.0
intl: ^0.20.2 
cloud_firestore: ^5.6.9　// firebase
flutter_dotenv: ^5.2.1 // envの管理に必要</code></pre><figure><img src="https://images.microcms-assets.io/assets/a2939c8d25434ae5a1f853f2dc239a0f/fa0449b11fc7453ebdc6ac50a1f8b857/%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%202025-07-02%20151717.png" alt="todo画面" width="1266" height="713"></figure><figure><img src="https://images.microcms-assets.io/assets/a2939c8d25434ae5a1f853f2dc239a0f/cf23b7fcc73e4a5e9e1196cbd5088234/%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%202025-07-02%20151411.png" alt="サインイン画面" width="1266" height="713"></figure><h2 id="h88876ec3b5">リポジトリ</h2><p><a href="https://github.com/nknighta/mobile-app-practice.git">nknighta/mobile-app-practice</a></p>

todo アプリでFlutterの開発練習

<p>We have now released a trial version of the VX package on github.</p><p><a href="https://github.com/nknighta/vx/pkgs/npm/vx">https://github.com/nknighta/vx/pkgs/npm/vx</a></p><p>To install the script, click below (requires npm installation):</p><pre><code class="language-shell">npm install @nknighta/vx@0.0.12</code></pre><p><strong>Note:</strong></p><p>The current version is for testing purposes only and is not fully functional.</p><p>Do not use in real applications.</p>

VX package released on a trial basis

<h2 id="h250913c1dc">やりかったこと</h2><p>私が開発しているWeb3 SDKであるVXのダッシュボードやドキュメントで使うアカウント連携機能用に認証アプリケーションを作る。</p><h2 id="h0c8fa4812e">処理の流れ</h2><p>ドキュメントサイトなどでログインボタン押下 =&gt; 認証ページに遷移 =&gt; Google又はGitHubで認証 =&gt; 元のページに戻る</p><p>コールバックで元のページに戻った段階で裏で認証情報を読み取ります</p><h2 id="hc167090f26">APIキーで詰んだ</h2><h3 id="h5dcd5df243">エラーコード</h3><div data-filename="firebase-faild.ts"><pre><code class="language-typescript">// うごかねぇ
import { initializeApp } from &quot;firebase/app&quot;;
import { getAuth } from &quot;firebase/auth&quot;;
//import { getAnalytics } from &quot;firebase/analytics&quot;;
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app&apos;s Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,　// process.envではよめない
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
//const analytics = getAnalytics(app);
const auth = getAuth(app);

export { auth };</code></pre></div><h3 id="h04757ee1c0">修正済コード</h3><div data-filename="firebase.ts"><pre><code class="language-typescript">// Import the functions you need from the SDKs you need
import { initializeApp } from &quot;firebase/app&quot;;
import { getAuth } from &quot;firebase/auth&quot;;
//import { getAnalytics } from &quot;firebase/analytics&quot;;
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app&apos;s Firebase configuration
const firebaseConfig = {
  apiKey: import.meta.env.VITE_REACT_APP_API_KEY,
  authDomain: import.meta.env.VITE_REACT_APP_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_REACT_APP_PROJECT_ID,
  storageBucket: import.meta.env.VITE_REACT_APP_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_REACT_APP_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_REACT_APP_APP_ID,
  measurementId: import.meta.env.VITE_REACT_APP_MEASUREMENT_ID
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
//const analytics = getAnalytics(app);
const auth = getAuth(app);

export { auth };</code></pre></div><h3 id="h41e3733aef">動かなかった原因</h3><p>認証用サイトは裏でViteを使っていたのですが、Vitejsはほかのフロントエンドフレームワークとは環境変数の読み込み方が違っており、それが原因でローカルでもデプロイ先でも画面がブラックアウトしたまま固まってしまってましたw</p><p>エラーの解消に数時間かかった...</p><h2 id="h2437a71527">認証サイト</h2><p><a href="https://auth.varius.technology/">https://auth.varius.technology/</a></p><h2 id="h3de35099b3">参考</h2><p><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener noreferrer nofollow">https://dash.cloudflare.com/</a></p><p><a href="https://qiita.com/bisketoriba/items/0b70fd5e130e8eabeeb1" target="_blank" rel="noopener noreferrer nofollow">https://qiita.com/bisketoriba/items/0b70fd5e130e8eabeeb1</a></p>

【Firebase】React Router+Firebase+Cloudflareで認証サイトを作った(2025-06-12時点)

<p>VXのリポジトリ名を入れ替えました</p><p>vx =&gt; vx-home</p><p>vx-sdk =&gt; vx</p><p></p><p>URL:</p><p>VX</p><p><a href="https://github.com/nknighta/vx">https://github.com/nknighta/vx</a></p><p>vx ホームページ</p><p><a href="https://github.com/nknighta/vx-home">https://github.com/nknighta/vx-home</a></p><p></p><p>個人でWeb3ライブラリ作ってます</p>

【VX】リポジトリ名の変更

<p><a href="https://nknighta.github.io/apps/ytimage-dl" target="_blank" rel="noopener noreferrer">ytimage-dl</a></p><p>以前htmlで書いていた自作アプリをNextjsに移植しました</p><p>まだ完ぺきに動作するわけではないので、不具合が出たら直します</p><p>不具合は以下から報告できます(要GitHubアカウント)</p><p><a href="https://github.com/nknighta/ytimage-dl/issues">https://github.com/nknighta/ytimage-dl/issues</a></p>

ytimage-dlアプリをNextjsに移植しました

<p>自作言語でwasmとかRustを使っていろいろテストしてます</p><p>Indexlanguageという名前は本の目次のように可読性の高い言語をめざしてるって感じです。</p><p>今日のコミット(2025/04/05)↓</p><p><a href="https://github.com/nknighta/IndexLanguage/commit/f81d2ca69cf789b0c6c56802c8dc8f0e618529fc">https://github.com/nknighta/IndexLanguage/commit/f81d2ca69cf789b0c6c56802c8dc8f0e618529fc</a></p>

IndexLang commit (f81d2ca....)

<p>ここにSNSとかいろんなリンク追加していきます</p><p>ytimage-dl</p><p><a href="https://nknighta.github.io/ytimage-dl/">https://nknighta.github.io/ytimage-dl/</a></p><p>IndexLanguage (自作言語・Web向け)</p><p>repo : <a href="https://github.com/nk4dev/IndexLanguage">https://github.com/nk4dev/IndexLanguage</a></p><p>Web上での実行(仮) : <a href="https://nk4dev.github.io/IndexLanguage/examples/">https://nk4dev.github.io/IndexLanguage/examples/</a></p><p>【New】</p><p>新しいドメイン</p><p><a href="https://nknighta.me/">https://nknighta.me/</a></p><p></p><p>【追記】</p><p>githubのユーザー名が変わったので既存のリンクがきれてます。すみません。</p><p>もしアクセスできない場合はホスト名をnk4dev.github.ioに読み替えてください。</p><p>基本的にnknighta.meにリダイレクトするはずです。</p>

SNSたち【追記あり】

<p>ブログ機能リリースしました</p><p>大変...</p><p><a href="https://nknighta.github.io/blog">https://nknighta.github.io/blog</a></p>

ブログ機能リリース

<h1 id="hf28e2a1430"><strong>テストです</strong></h1><p>これは テストです</p>