作業前の状態

Cloudflareのアカウントに支払い手段を設定して引っ越し先のドメインmitome.inkを購入しました。

静的サイトのコードはGitHubにzunda/mitome.inとして管理していただいていて、Netlifyからmitome.inに公開しています。

Cloudflare Workers

Cloudflareによるドキュメントを眺めてみると、WorkersではCI/CD機能としてWorkers Buildsやその他のプロバイダによるビルドシステムを利用できるようです。ここでは、Workers BuildsのGitHub Integrationを利用してみます。

Workers BuildsのGet started文書に従って作業を進めてみます。

Workerの作成

CloudflareとGitHubにログインした状態のブラウザを利用します。

1. Cloudflareのダッシュボードにログインします
2. GitHubにログインしておきます。
3. Workers & Pagesを閲覧します
4. 右上のCreate applicationボタンを押します
5. Ship something newという表題の下記の選択肢からConnect GitHubを選択します
   • Connect GitHub
   • Connect GitLab
   • Start with Hello World!
   • Select a template
   • Upload your static files
6. GitHubのウインドウが開くので、Cloudflare Workers and Pagesをインストールする対象のGitHub アカウント/組織とレポジトリを選択します。今回は、自アカウントの、Only selected repositoriesとして、zunda/mitome.inを選択しました。これによって、下記のパーミションが有効になるとのことでした。書き込み権限が広いようにも思うけれどもしかたないのかな。
   • Read access to metadata
   • Read and write access to administration, checks, code, deployments, and pull requests
7. 元のウインドウで、Continuw with GitHub→を選択します
8. GitHubレポジトリを選択します
9. Set up your applicationという表題のステップで、下記を設定します
   • Project name: mitomein (小文字のアルファベットと数字とダッシュのみが利用できるとのことです)
   • Build command: yarn docs:build (デフォルトは空白)
   • Deploy command: デフォルトのnpx wrangler deployのまま
   • Builds for non-production branchesを有効に (デフォルトは有効)¹
10. Deployボタンを押します。生成されたサイトのパス (./docs/.vuepress/dist/) を設定する項目はありませんでしたがとりあえず進めます

ここまでの作業で、ブラウザにビルドの進行状況が表示されました。今回のビルドは下記のようなログを残して失敗したようです。

2026-07-21T01:16:38.145Z	Initializing build environment...
2026-07-21T01:16:38.145Z	Initializing build environment...
2026-07-21T01:16:39.870Z	Success: Finished initializing build environment
2026-07-21T01:16:41.275Z	Cloning repository...
2026-07-21T01:16:42.703Z	Restoring from dependencies cache
2026-07-21T01:16:42.705Z	Restoring from build output cache
2026-07-21T01:16:42.708Z	Detected the following tools from environment: yarn@4.9.1, nodejs@22.16.0
2026-07-21T01:16:42.845Z	Installing project dependencies: yarn
2026-07-21T01:16:44.128Z	➤ YN0087: Migrated your project to the latest Yarn version 🚀
2026-07-21T01:16:44.129Z
2026-07-21T01:16:44.130Z	➤ YN0000: · Yarn 4.5.0
2026-07-21T01:16:44.149Z	➤ YN0000: ┌ Resolution step
2026-07-21T01:16:46.945Z	➤ YN0085: │ + @fortawesome/fontawesome-svg-core@npm:6.7.2, @fortawesome/free-solid-svg-icons@npm:6.7.2, @fortawesome/vue-fontawesome@npm:3.0.8, and 197 more.
2026-07-21T01:16:46.952Z	➤ YN0000: └ Completed in 2s 804ms
2026-07-21T01:16:46.953Z	➤ YN0000: ┌ Post-resolution validation
2026-07-21T01:16:46.953Z	➤ YN0002: │ mitome.in@workspace:. doesn't provide vue (pdbc23), requested by @fortawesome/vue-fontawesome and other dependencies.
2026-07-21T01:16:46.954Z	➤ YN0086: │ Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
2026-07-21T01:16:46.954Z	➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
2026-07-21T01:16:46.976Z	➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.
2026-07-21T01:16:46.977Z	➤ YN0000: └ Completed
2026-07-21T01:16:46.982Z	➤ YN0000: · Failed with errors in 2s 845ms
2026-07-21T01:16:47.026Z	Failed: error occurred while installing tools or dependencies

ビルドの問題への対応

ローカルで問題を再現して対応していきます。

問題の再現

これまでは古いYarnコマンドでyarn installに成功していました。

$ yarn install --pure-lockfile
yarn install v1.22.22
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > @fortawesome/vue-fontawesome@3.0.8" has unmet peer dependency "vue@>= 3.0.0 < 4".
warning "vitepress > @docsearch/js > @docsearch/react > @algolia/autocomplete-preset-algolia@1.17.7" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
warning "vitepress > @docsearch/js > @docsearch/react > @algolia/autocomplete-core > @algolia/autocomplete-plugin-algolia-insights@1.17.7" has unmet peer dependency "search-insights@>= 1 < 3".
warning "vitepress > @docsearch/js > @docsearch/react > @algolia/autocomplete-core > @algolia/autocomplete-shared@1.17.7" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
warning " > vue-toast-notification@3.1.3" has unmet peer dependency "vue@^3.0".
[5/5] Building fresh packages...
Done in 1.44s.

YarnコマンドをCloudflare Workersと同じバージョンにすることで、無事にyarn install --immutableを失敗させることができました。

$ yarn set version 4.5.0
$ yarn install --immutable
➤ YN0000: · Yarn 4.5.0
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @fortawesome/fontawesome-svg-core@npm:6.7.2, and 199 more.
➤ YN0000: └ Completed in 1s 289ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ mitome.in@workspace:. doesn't provide vue (pdbc23), requested by @fortawesome/vue-fontawesome and other dependencies.
➤ YN0086: │ Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.
➤ YN0000: └ Completed
➤ YN0000: · Failed with errors in 1s 329ms

足りないモジュールの追加

ブランチで作業します。

$ git switch -c build-on-cloudflare
$ yarn add -D vue
➤ YN0000: · Yarn 4.5.0
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + vue@npm:3.5.40, and 19 more.
➤ YN0000: └ Completed in 0s 679ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 20 packages were added to the project (+ 16.01 MiB).
➤ YN0000: └ Completed in 1s 141ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 356ms
➤ YN0000: · Done with warnings in 2s 221ms

ここまでの作業で下記のような差分が得られました。vueモジュールの追加のみをライセンスの追加と一緒にcommitしてGitHubにpushします。

diff --git a/package.json b/package.json
index 65f32b5..5451c22 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,13 @@
     "moment": "^2.30.1",
     "openpgp": "^6.1.1",
     "vitepress": "^1.5.0",
+    "vue": "^3.5.40",
     "vue-toast-notification": "^3"
   },
   "scripts": {
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs"
-  }
+  },
+  "packageManager": "yarn@4.5.0"
 }

この状態で、Yarn 1.22.15でyarn install --pure-lockfileも完走することを確認できました。

Cloudflare Workersでのビルド

Cloudflareのダッシュボードに戻り、左のペインから、Build - Workers & Pagesを選択し、先ほど作成したWorkerを選択します。下方のVersionペインの、先ほどGitHubにpushしたハッシュをクリックすると、ビルド済みのページを閲覧することができました。右の方のブランチ名をクリックすると、ビルドログを閲覧できるようです。ホスト名は、<Cloudflareが付与したversion ID>-<Workerのproject name>.<Cloudflareのaccount name>-cloudflare.workers.devになるようです。

2026-07-21T02:32:15.629Z	Initializing build environment...
2026-07-21T02:32:17.922Z	Success: Finished initializing build environment
2026-07-21T02:32:18.646Z	Cloning repository...
2026-07-21T02:32:20.773Z	Restoring from dependencies cache
2026-07-21T02:32:20.774Z	Restoring from build output cache
2026-07-21T02:32:20.776Z	Detected the following tools from environment: yarn@4.9.1, nodejs@22.16.0
2026-07-21T02:32:20.914Z	Installing project dependencies: yarn
  :
2026-07-21T02:32:27.984Z	Executing user build command: yarn docs:build
  :
2026-07-21T02:32:39.458Z	Executing user deploy command: npx wrangler deploy
  :
2026-07-21T02:32:48.543Z	Detected Project Settings:
2026-07-21T02:32:48.543Z	 - Worker Name: mitomein
2026-07-21T02:32:48.543Z	 - Framework: Static
2026-07-21T02:32:48.543Z	 - Build Command: yarn run docs:build
2026-07-21T02:32:48.544Z	 - Output Directory: docs/.vitepress/dist
  :
2026-07-21T02:32:48.549Z	📄 Create wrangler.jsonc:
2026-07-21T02:32:48.549Z	  {
2026-07-21T02:32:48.549Z	    "$schema": "node_modules/wrangler/config-schema.json",
2026-07-21T02:32:48.549Z	    "name": "mitomein",
2026-07-21T02:32:48.549Z	    "compatibility_date": "2026-07-21",
2026-07-21T02:32:48.549Z	    "observability": {
2026-07-21T02:32:48.549Z	      "enabled": true
2026-07-21T02:32:48.549Z	    },
2026-07-21T02:32:48.549Z	    "assets": {
2026-07-21T02:32:48.554Z	      "directory": "docs/.vitepress/dist"
2026-07-21T02:32:48.554Z	    },
2026-07-21T02:32:48.554Z	    "compatibility_flags": [
2026-07-21T02:32:48.554Z	      "nodejs_compat"
2026-07-21T02:32:48.554Z	    ]
2026-07-21T02:32:48.555Z	  }
  :
2026-07-21T02:33:01.495Z	[build] Running: yarn run docs:build
  :
2026-07-21T02:33:13.732Z	🌀 Building list of assets...
2026-07-21T02:33:13.735Z	✨ Read 194 files from the assets directory /opt/buildhome/repo/docs/.vitepress/dist
2026-07-21T02:33:13.817Z	🌀 Starting asset upload...
2026-07-21T02:33:15.577Z	🌀 Found 182 new or modified static assets to upload. Proceeding with upload...
  :
2026-07-21T02:33:17.530Z	✨ Success! Uploaded 182 files (1 already uploaded) (1.95 sec)
  :
2026-07-21T02:33:20.063Z	Deployed mitomein triggers (1.06 sec)
2026-07-21T02:33:20.064Z	  https://mitomein.zundan-cloudflare.workers.dev
  :
2026-07-21T02:33:24.555Z	✨ Success! Build completed.
  :

CloudflareによるドキュメントBuild branches · Cloudflare Workers docsによると、Builds for non-production branchesが有効になっている場合は、上記で観察したように、Production branch (今回はmaster)以外のブランチへのpushでも、Cloudflare Workersはビルドとデプロイを始めるようです。GitHubで作成されたプルリクエストに関する設定を見つけることはできませんでした。

カスタムドメインの設定

Workerにcustom domainを追加することで、そのドメインでWorkerによるビルドの結果を閲覧できるようです。

Cloudflareのダッシュボードに戻り、左のペインから、Build - Workers & Pagesを選択し、先ほど作成したWorkerを選択します。上の方に並んでいるメニューからDomains を選択し、

1. Custom Domains and RoutesセクションのAdd Domainボタンを押します
2. Connect domainダイアログで希望のドメインを選択します
3. Subdomainを設定します。今回はAPEX (root)ドメインで公開するので空白のままにします
4. Add domainボタンを押します

この状態でCloudflareのDNSレコードを確認すると下記のようなレコードが生成されていました。また、https://mitome.inkでWorkerによるビルドの結果を閲覧できました。

Builds for non-production branchesを無効にする

Builds for non-production branchesが有効な場合は連携されたレポジトリへの全てのpushがカスタムドメインにもデプロイされるようです。

今回はプルリクエストをマージしてから変更点を公開したいので、WorkerのSettingsメニューからBuildセクションのBranch controlでBuilds for non-production branchesを無効にしました。

Jekyllではkramdownの機能によってセクションヘッダのidアトリビュートに表題と同じ文字列が付与され、URLのフラグメント部(#で始まる部分)で参照できることがわかりました。

イントロダクション

長い友人と会って、

印刷が普及したことで、人類は既存の印刷物への参照を示しながら自分の思考を記録することができるようになった

と知ることができました。

写本の時代には、それぞれの写本で内容の配置されているページが異なるため、参照先をページ数で示すことができなかった

のだそうです。なるほどなあ！現代の印刷物であるウェブページももっと参照可能にする必要がある。

現状

例えばこの記事のHTMLコードを確認すると、上記の章の冒頭部分は、下記のようになっています。

<h2 id="イントロダクション">イントロダクション</h2>
<p>長い友人と会って、</p>

この部分への同じページからのリンクは、下記のように記述できます。

[イントロダクションの章](#イントロダクション)へのリンク

この記述は、下記のようなHTMLに変換され、

<a href="#イントロダクション">イントロダクションの章</a>へのリンク

「イントロダクションの章へのリンク」のように表示されます。パーセントエンコーディングは施されないようです。

kramdownによるIDアトリビュート

この個人サイトは、kramdownをレンダラーとしたJekyllによってHTMLを生成しています。kramdownはデフォルトではセクションヘッダの文字列をそのままaタグのidアトリビュートに設定するようです。¹

絶対パスによる参照

このようにaタグのidアトリビュートが設定されているので、ページのURLに#と章や節の表題を追加すれば、この個人サイトの特定の章や節を参照できそうです。パーセントエンコーディングしたくなった場合には、URLお掃除くんなども利用できそうです。

まとめ

この個人サイトの章や節への参照を利用できるようにしたいと思ったら、kramdownの標準的な機能で既に利用可能でした。フラグメントとして表題と同じ文字列を指定します。

会場に到着したらRubyをインストールする

RubyKaigiでの作業¹が終わって会場の開始5分前くらいに会場の会議室に到着すると、多くの参加者がわいわい話をしながら軽食を食べていました。熱気。みなさんコード懇親会を楽しみにしている雰囲気です。やっぱりみんなコードを書くのだいすきよね。僕も軽食(とくにお寿司がおいしかった！)をいただいて、ラップトップを開いたところで、先日Rubyのリリースがあったのを思い出しました。

$ brew update ruby-build
$ rbenv install 4.0.3
$ cd ~c/src/local/rk26-code-party
$ rbenv local 4.0.3

dRubyでオブジェクトをやりとりする

僕が参加したのは、作者のsekiさんと一緒にdRubyを触ってみるグループで、用意していただいていた資料に沿ってdRubyを触ります。Ruby 3.0以降ではWEBrickは標準ライブラリではないので、gemとしてインストールします。最終的にGemfileは下記のようになりました。

source "https://rubygems.org"
gem "drb", "~> 2.2"
gem "webrick", "~> 1.9"
gem "irb", "~> 1.18"
gem "driq", "~> 0.4.3"

macOSは自分がIPv6に居ると思っている

dRubyでは一部のクラスのオブジェクトのやりとりにサーバが必要なので、ホストとポートを指定して起動するサーバとは別にクライアント側のプロセスでもサーバを起動します。

(サーバ)

$ bundle exec irb -r drb
> h = Hash.new
> DRb.start_service('druby://localhost:54000', h)
  :
 @exported_uri=["druby://localhost:54000"],
  :
   @config=
    {tcp_original_host: "localhost",
  :
     tcp_port: 54000},
  :

(クライアント)

$ bundle exec irb -r drb
> DRb.start_service
  :
 @exported_uri=["druby://::1:49357"],
  :
   @config=
    {tcp_original_host: "",
  :
     tcp_port: 49357},
> h = DRbObject.new_with_uri("druby://localhost:54000")
> h[:greeting] = "Hello, World!"

ここで、@exported_uriがdruby://::1:49357となっていることが気になりました。

IPv6アドレスのURI

RFC 2732によると、ホスト名部がIPv6であるURLではホスト名部を角かっこ[]で囲う必要があるようですが、上記で DRb.start_serviceが返したオブジェクトでは、@exported_uriで::1が角かっこに囲まれていません。

ここでdRubyのコードを追ってみます。MacOS 15.7.5上のRuby 4.0.3のdRuby 2.2.3です。@exported_uriのホスト名部分は下記のメソッドで得ているようです。

(drb/drb.rb)

  :
    # Returns the hostname of this server
    def self.getservername
      host = Socket::gethostname
      begin
        Socket::getaddrinfo(host, nil,
                                  Socket::AF_UNSPEC,
                                  Socket::SOCK_STREAM,
                                  0,
                                  Socket::AI_PASSIVE)[0][3]
      rescue
        'localhost'
      end
    end
  :

irbで試してみると確かに::1になるようです。

URIにするコードは下記のようになっていました。たしかにdruby://::1:<ポート番号>となりそうです。

  :
      if ... 
        host = getservername
        soc = open_server_inaddr_any(host, port)
      else
  :
      end
      port = soc.addr[1] ...
  :
      uri = "druby://#{host}:#{port}"
  :

このインスタンス変数はdRubyが動作する際に参照されることはなさそうだけれど、なんとなく気持ち悪いのでurl標準ライブラリなどでRFCどおりに整形してもらえばいいだろう。

標準ライブラリでURLを整形してもらう

$ irb

⢀⡴⠊⢉⡟⢿  IRB v1.18.0 - Ruby 4.0.3
⣎⣀⣴⡋⡟⣻  Type "help" for commands, "help <cmd>" for details
⣟⣼⣱⣽⣟⣾  ~/c/src/local/rk26-code-party

> require 'uri'
> s = URI::Generic.new('https', nil, '::1', 443, nil, '/', nil, nil, nil).to_s
=> "https://::1:443/"

ありゃ。角かっこで囲まれていない。パースはできるのかな？

> URI.parse(s)
.../4.0.3/lib/ruby/4.0.0/uri/rfc3986_parser.rb:130:in 'URI::RFC3986_Parser#split': bad URI (is not URI?): "https://::1:443/" (URI::InvalidURIError)

やっぱりできないかー。と思って、やっぱりできないかー。という姿勢をしていたら、だいじょうぶですか？とお声がけいただきました。ありがたいありがたい！これは絶望ではなく希望の姿勢なのです。

一緒の部屋に居るのすごい

そんなこんなで、気づいたことを口頭でご報告して、uriライブラリについては報告先を推薦していただいて、20分間ほどで新規のIssueの提出までさせていただいてしまったのでした。

プルリクエストにできるといいな。

(追記)

URI::Generic.new()を呼び出す時にarg_check引数²にtrueを渡すと期待通りに角かっこが付くことがわかりました。

> URI::Generic.new('https', nil, '::1', 443, nil, '/', nil, nil, nil, URI::Generic::DEFAULT_PARSER, true)
=> #<URI::Generic https://[::1]:443/>

ruby/uriをforkしてtest/uri/test_generic.rbを眺めていたらちゃんと角かっこを確認しているのを見つけました。

ホームページのURLを書き込んだNFCタグは付属の金属リングで名札の紐に取り付けました。下記の写真では左上に写っています。

Amazonで売られているNFCタグを購入します。届いたNFCタグをそのまま携帯電話に近づけても、携帯電話は反応しません。

上記のAmazonのページで紹介されていたアプリケーションNFC Toolsを、手元のAndroidの携帯電話(Pixel 9a)にインストールし起動します。Readタブが選択された状態でNFCタグを携帯電話の背面に近づけると、NFCタグとしての情報が得られるようです。

Writeタブを選択し、Add a recordボタンをタップし、URL / URIメニューをタップし、URLを入力します。Writeボタンをタップし、NFCタグを携帯電話の背面に近づけると、指定したURLがNFCタグに書き込まれます。

URLを書き込んだNFCタグをアンロックされた携帯電話の背面に近づけると、ブラウザが開き、URLの内容が表示されます。

_includes/share.htmlとして下記のような内容のファイルを作ります。

{% assign abs_url = page.url | absolute_url | url_encode %}
<div>
<a href="https://share.joinmastodon.org/#text={{ page.title | append: " | " | append: site.title | url_encode | append: "%0D" | append: abs_url }}" target="_blank" rel="noopener" aria-label="Share on Mastodon">Share on <svg role="img" viewBox="0 0 74 79" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="1em"><path d="M73.7014 17.4323C72.5616 9.05152 65.1774 2.4469 56.424 1.1671C54.9472 0.950843 49.3518 0.163818 36.3901 0.163818H36.2933C23.3281 0.163818 20.5465 0.950843 19.0697 1.1671C10.56 2.41145 2.78877 8.34604 0.903306 16.826C-0.00357854 21.0022 -0.100361 25.6322 0.068112 29.8793C0.308275 35.9699 0.354874 42.0498 0.91406 48.1156C1.30064 52.1448 1.97502 56.1419 2.93215 60.0769C4.72441 67.3445 11.9795 73.3925 19.0876 75.86C26.6979 78.4332 34.8821 78.8603 42.724 77.0937C43.5866 76.8952 44.4398 76.6647 45.2833 76.4024C47.1867 75.8033 49.4199 75.1332 51.0616 73.9562C51.0841 73.9397 51.1026 73.9184 51.1156 73.8938C51.1286 73.8693 51.1359 73.8421 51.1368 73.8144V67.9366C51.1364 67.9107 51.1302 67.8852 51.1186 67.862C51.1069 67.8388 51.0902 67.8184 51.0695 67.8025C51.0489 67.7865 51.0249 67.7753 50.9994 67.7696C50.9738 67.764 50.9473 67.7641 50.9218 67.7699C45.8976 68.9569 40.7491 69.5519 35.5836 69.5425C26.694 69.5425 24.3031 65.3699 23.6184 63.6327C23.0681 62.1314 22.7186 60.5654 22.5789 58.9744C22.5775 58.9477 22.5825 58.921 22.5934 58.8965C22.6043 58.8721 22.621 58.8505 22.6419 58.8336C22.6629 58.8167 22.6876 58.8049 22.714 58.7992C22.7404 58.7934 22.7678 58.794 22.794 58.8007C27.7345 59.9796 32.799 60.5746 37.8813 60.5733C39.1036 60.5733 40.3223 60.5733 41.5447 60.5414C46.6562 60.3996 52.0437 60.1408 57.0728 59.1694C57.1983 59.1446 57.3237 59.1233 57.4313 59.0914C65.3638 57.5847 72.9128 52.8555 73.6799 40.8799C73.7086 40.4084 73.7803 35.9415 73.7803 35.4523C73.7839 33.7896 74.3216 23.6576 73.7014 17.4323ZM61.4925 47.3144H53.1514V27.107C53.1514 22.8528 51.3591 20.6832 47.7136 20.6832C43.7061 20.6832 41.6988 23.2499 41.6988 28.3194V39.3803H33.4078V28.3194C33.4078 23.2499 31.3969 20.6832 27.3894 20.6832C23.7654 20.6832 21.9552 22.8528 21.9516 27.107V47.3144H13.6176V26.4937C13.6176 22.2395 14.7157 18.8598 16.9118 16.3545C19.1772 13.8552 22.1488 12.5719 25.8373 12.5719C30.1064 12.5719 33.3325 14.1955 35.4832 17.4394L37.5587 20.8853L39.6377 17.4394C41.7884 14.1955 45.0145 12.5719 49.2765 12.5719C52.9614 12.5719 55.9329 13.8552 58.2055 16.3545C60.4017 18.8574 61.4997 22.2371 61.4997 26.4937L61.4925 47.3144Z" fill="inherit"/></svg></a>
</div>

minima-2.5.2/_layouts/post.htmlを_layouts/post.htmlとしてコピーして、最後に下記の行を追加します。

{% include share.html %}

雛形のアプリを作る

新しいディレクトリにVueのアプリを作ります。 手元のXubuntu 24.01にはyarnパッケージとしてyarn 1.22.15が入っています。

$ mkdir clean-url
$ cd clean-url
$ yarn init
$ yarn add -D @vue/cli
$ yarn run vue create .

package.jsonを眺めると、yarn serveで開発用のサーバを起動できそうです。

{
  "scripts": {
    "serve": "vue-cli-service serve"
  }
}

サーバが起動しました。念のためブラウザで閲覧できるのを確認します。

$ yarn serve

(中略)

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.141:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

ユニットテストを書いて実行する

今回は、入力されたURLを加工するアプリを書いてみます。

まず、URLをパーズするヘルパ関数を書きます。 src/helpers.jsに、とりあえず最小の機能を持った下記の関数を定義します。

export function parseUrl(url) {
  return URL.parse(url)
}

VueによるTestingガイドによると、テストフレームワークにはVitestが推奨のようです。インストールします。

$ yarn add -D vitest

Getting Startedガイドに従って、 package.jsonにtestスクリプトを追加します。

{
  "scripts": {
    "test": "vitest"
  }
}

さらに、src/helpers.spec.jsにユニットテストを書きます。

import { describe, expect, test } from 'vitest'
import { parseUrl } from './helpers'

describe('parseUrl', () => {
  test('parses a minimal URL', () => {
    const parsed = parseUrl('https://example.com')
    const expected = { host: 'example.com', protocol: 'https:' }
    Object.entries(expected).forEach(([prop, goal]) => {
      expect(parsed[prop]).toBe(goal)
    })
  })
})

ユニットテストを実行します。

$ yarn test
yarn run v1.22.15
$ vitest

 DEV  v4.0.18 /home/zunda/c/src/local/clean-url

 ✓ src/helpers.spec.js (1 test) 3ms
   ✓ parseUrl (1)
     ✓ parses a minimal URL 1ms

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  15:11:03
   Duration  190ms (transform 29ms, setup 0ms, import 44ms, tests 3ms, environment 0ms)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

成功しました。

Vueコンポーネントのふるまいをテストする

VitestのComponent Testingガイドによると、Vueのテストには@testing-library/vueを使うのが一般的なようです。Testing LibraryのQuickstartに従ってテストを進めてみます。

ここでは、src/components/UrlCleaner.vueに定義した、UrlCleanerComponentをテストしてみます。1つ目のinputエレメントに任意のURLを入力すると、2つ目の読み取り専用のinputエレメントにv=…以外のクエリパラメータが削除されたURLが出力されるはずです。

この段階では、src/UrlCleaner.jsからUrlCleanerクラスがエキスポートされて、このクラスにはparse()スタティックメソッドとremoveQueriesExceptFor()メソッドが定義されていました。

<template>
  <div class="urlCleaner">
    <input v-model="dirtyUrl"  placeholder="Dirty URL" type="url" />
    <br/>
    <input v-model="cleanUrl" placeholder="Clean URL" readonly="readonly" />
  </div>
</template>

<script>
import { UrlCleaner } from '../UrlCleaner'

export default {
  name: 'UrlCleanerComponent',
  data() {
    return {
      dirtyUrl: ""
    }
  },
  computed: {
    cleanUrl() {
      const x = UrlCleaner.parse(this.dirtyUrl)
      return x ? x.removeQueriesExceptFor(["v"]).toString() : ""
    }
  }
}
</script>

テストでVueコンポーネントをimportするためには、@vitejs/plugin-vueをインスールして有効にする必要があるようです¹。NodeからでブラウザのAPIを利用できるようにするため、jsdomもインストールします²。

$ yarn add --dev @testing-library/vue @vitejs/plugin-vue jsdom

vite.config.jsとして下記のファイルを作成します。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    include: [
      './src/**/*.spec.js'
    ],
    environment: 'jsdom'
  }
})

src/tests/UrlCleaner.spec.jsにテストを書き始めます。Testing Libraryによる例では、await fireEvent.update(エレメント, 文字列)で入力するようです。

import { describe, expect, test } from 'vitest'
import { render, cleanup, fireEvent, screen } from '@testing-library/vue'
import UrlCleanerComponent from '../components/UrlCleaner.vue'

describe('UrlCleanerComponent', () => {
  test('removes queries from a URL', async () => {
    render(UrlCleanerComponent)
    const dirty = screen.getByPlaceholderText('Dirty URL')
    const clean = screen.getByPlaceholderText('Clean URL')

    const dirtyUrl = 'http://example.com/path/?p=parameter&v=keep'
    const cleanUrl = 'http://example.com/path/?v=keep'

    await fireEvent.update(dirty, dirtyUrl)

    expect(dirty.value).toBe(dirtyUrl)
    expect(clean.value).toBe(cleanUrl)

    cleanup()
  })
})

--runオプションを付けて実行するとvitestは一度だけの実行で停止してくれるようです。テストが通りました。

$ yarn test --run src/tests/UrlCleaner.spec.js
yarn run v1.22.15
$ vitest --run src/tests/UrlCleaner.spec.js

 RUN  v4.0.18 /home/zunda/c/src/local/clean-url

 ✓ src/tests/UrlCleaner.spec.js (1 test) 36ms
   ✓ UrlCleanerComponent (1)
     ✓ removes queries from a URL 34ms

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  11:31:41
   Duration  1.13s (transform 95ms, setup 0ms, import 300ms, tests 36ms, environment 631ms)

Done in 1.65s.

Yarnを新しいものにする

コードを書き続けていると、 手元のyarn 1.22.15ではnode_modulesディレクトリ以下にインストールされるモジュールのバージョンが安定せず、 yarn installの繰り返しによって時折コマンドが失敗することがわかりました。

Yarn 4+のページに従ってyarnコマンドを4.12.0に更新したところ、 yarn testコマンドの実行によってインストールされているモジュールのテストも走るようになりました。 vite.config.jsで定義したdefineConfig関数の引数のtestプロパティにincludeプロパティとして['./src/**/*.spec.js']を追加することで、 srcディレクトリ以下のテストのみを走らせることができました。

kramdownにはHTMLだけじゃなくてJavaScriptもそのまま書けるんだ。

例えば、下記のようなフォームとコードを原稿に直書きしておくと、上記のように実行できるようです。Jekyllはページをビルドする時にLiquidテンプレートエンジンを適用するので、HTMLやJavaScript中にLiquidのタグが現れる場合にはrawタグで囲むなどの注意が必要かもしれません。

<p>
<form id="form">
<input type="text" id="src" placeholder="元の文字列" />に
<select id="mark">
<option value="full" selected>濁点</option>
<option value="half">半濁点</option>
</select>を<button>くっつける</button>と
<input type="text" id="dst" placeholder="こうなる" />
</form>
</p>
<script>
const form = document.getElementById("form");
const mark = document.getElementById("mark");
const src = document.getElementById("src");
const dst = document.getElementById("dst");
function convert(event) {
  event.preventDefault();
  var m = "\u3099";
  if (mark.value == "half") { m = "\u309A"; }
  dst.value = Array.from(src.value).map((c) => c + m).join("");
}
form.addEventListener("submit", convert);
</script>

last_modified_at変数を表示する

jekyll-sitemapやjekyll-feedはpage.last_modified_atに既に対応しているとのことです。確かに、jekyll-feed-0.17.0のfeed.xmlに下記のような行が含まれていて、publishedタグにdate変数が、updatedタグにlast_modified_at変数が適用されることがわかります。

<title type="html">{{ post_title }}</title>
<link href="{{ post.url | absolute_url }}" rel="alternate" type="text/html" title="{{ post_title }}" />
<published>{{ post.date | date_to_xmlschema }}</published>
<updated>{{ post.last_modified_at | default: post.date | date_to_xmlschema }}</updated>

minima-2.5.2の_layouts/posts.htmlを./_layouts/以下にコピーしてきて下記のように編集します。

diff --git a/_layouts/post.html b/_layouts/post.html
index abf9696..8abc4a9 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -6,10 +6,17 @@ layout: default
   <header class="post-header">
     <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
     <p class="post-meta">
+      公開:
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
         {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
         {{ page.date | date: date_format }}
       </time>
+      {%- if page.last_modified_at -%}
+        • 更新:
+        <time class="dt-published" datetime="{{ page.last_modified_at | date_to_xmlschema }}" itemprop="dateModified">
+          {{ page.last_modified_at | date: date_format }}
+        </time>
+      {%- endif -%}
       {%- if page.author -%}
         • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
       {%- endif -%}</p>

(追記) Schema.orgを眺めていてdatePublishedプロパティに加えてdateModifiedプロパティがあるのを見つけました。初出時には<span>に含めていた更新時刻を<time itemprop="dateModified">に含めるよう変更しました。

記事に更新日時を設定する

フロントマターのlast_modified_at変数を設定する。この記事では下記のように設定してみました。

layout: post
title:  "Jekyllの記事に更新日を記す"
date:   2026-01-30 10:30:00 -1000
last_modified_at: 2026-01-30 14:20:00 -1000
categories: jekyll update

#!/bin/bash
bundle exec puma -C config/puma.rb&
bundle exec bin/jobs&
cpids=`pgrep -P $$`;
trap 'for pid in $cpids; do kill -TERM $pid; done' TERM;
wait -n;
kill -TERM $$;
wait

上記のbashスクリプトは、PumaとSolid Queue(bin/jobsコマンド)を子プロセスとして起動して、

• 自スクリプトを実行しているbashプロセスがSIGTERMを受けた、
• 自スクリプトを実行しているbashプロセスと子プロセスがSIGTERMを受けた、あるいは、
• いずれかの子プロセスが何らかの理由で停止した

時に、

1. すべての子プロセスにSIGTERMを送って、
2. すべての子プロセスが停止したら
3. 自スクリプトを実行しているbashプロセスを停止する

ようになっているはずです。

自スクリプトを実行しているbashプロセスのIDを得る

bashスクリプト内の$$パラメータは、それを実行しているbashプロセスのIDに展開されます。

子プロセスのIDを列挙する

シグナルを転送する先のプロセスIDを得るために、pgrepコマンドを利用します。-Pオプションを渡すと指定したプロセスの子プロセスを列挙してくれます。man pgrepより:

-P, --parent ppid,...
       Only match processes whose parent process ID is listed.

上記のスクリプトでは、得られたプロセスIDの一覧をシェル変数に格納します。

シグナルを受けた時の動作を指定する

trap組み込みコマンドでスクリプトを実行しているbashプロセスがシグナルを受け取った時の動作を指定できます。文字列として渡した実行内容をシグナルを受け取った時に展開するようです。

上記のスクリプトでは、得られたプロセスIDの一覧を展開します。

子プロセスの終了を待つ

wait組み込みコマンドで子プロセスの終了を待つことができます。-nオプションを付けるといずれかの子プロセスが終了するまでブロックします。オプションを付けないと全ての子プロセスが終了するまでブロックします。

残っている子プロセスにシグナルを送る

上記のスクリプトでは、SIGTERM以外のきっかけでいずれかの子プロセスが停止した場合に、自プロセスにSIGTERMを送ることでtrapに設定したコマンドが実行し残っている子プロセスにもSIGTERMを送ります。

kramdownを利用しているJekyllでは、kramdownの仕様に従って脚注を書くことができるようです。

下記のような原稿を書いておくと、

> 吾輩は猫である。名前はまだ無い。[^footnote]
> 
> [^footnote]: 夏目漱石『吾輩は猫である』より
> 
> どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

下記のように表示されます。

吾輩は猫である。名前はまだ無い。¹

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

スタイルシート

minimaテーマには脚注関連のスタイルは定義されていないようです。とりあえず²minima/_layout.scssに追加しておきます。

/**
 * footernote
 */
.footnotes {
  border-top: 1px solid $grey-color-light;
  padding: $spacing-unit 0;
  font-size: $small-font-size;
}