概要 IssoとDockerでHugoのコメント機能を実現するという記事でIssoを使ってコメント機能をHugoに導入する方法を紹介した。 今回はそのUIを日本語化する方法を紹介する。 方法 方法は簡単で、IssoとDockerでHugoのコメント機能を実現するで紹介したcomments.htmlのscriptタグにdata-isso-lang="ja"を追加するだけだ。 /layouts/partials/comments.html <script src="https://blog-api.zurukumo.dev/js/embed.min.js" data-isso="https://blog-api.zurukumo.dev/" data-isso-vote="false" data-isso-lang="ja" ></script> <section id="isso-thread" data-isso-id="{{ .Page.Path }}" data-title="{{ .Page.Title }}" > </section> 実は… 実はこの日本語化のPRを作成したのが自分だ。そのPRがこちら。 記事は日本語なのにコメント欄だけ英語で気持ち悪かったので、せっかくだからPRを出してみた。 はじめてのOSSコントリビュートに引き続き、2回目のOSSコントリビュートだ。 やはり自分が普段お世話になっているOSSにコントリビュートするのは気持ち良いですな。 翻訳系のPRは迷惑になる可能性が低いし簡単だしで敷居が低いので結構おすすめ。需要もそこそこある。 ちなみにコメント件数はいまだに0なので、PR出してまでコメント欄に凝る必要があるのかは謎である。 余談 ちなみに、最初はdata-isso-lang="ja"を追加しても日本語化されなくて15分ほど悩んだのだが、それはCloudflareが以前の翻訳データをキャッシュしていたのが原因だった。 お名前.comからCloudflareに切り替えてまだ1、2ヶ月くらいだったので、マジでこの原因は盲点だった。 Cloudflareの管理画面からキャッシュを手動で削除したらちゃんと日本語化された。 バグが起こると基本的にはコードに原因があると思ってしまいがちなので、早めに(当社比)外部要因に目を向けることができたのは偉かったかな。 正直ネットワークスペシャリストの勉強をしていなかったら、自分の出したPRに問題があるんじゃないかという観念に囚われてしまっていたと思う。 ネスペのお陰で新たな視点を得ることができた。 Viva ネスペ!

昨日、「ゆる哲学ラジオ」なるYouTubeの番組を見ていたのだが、そこででてきた「宇宙論的証明」という話を聞いて衝撃を受けた。 なぜ衝撃を受けたかと言うと、この「宇宙論的証明」という奴が自分が高校生のときに考えていたことと完全に同じだったからだ。 宇宙論的証明とは「何かが存在する以上それには原因があり、その原因をたどっていくと最終的に『最初の原因』に行き着く。それが神である」という考え方のことである。 自分は高校の物理の授業で「運動方程式 F = ma はデータを取ったらそうなるということが経験的に分かっただけで、数学的に証明されているわけではありません」という説明を教師から受けた。 物理エアプの自分は「それってありなの！？」と思ってしまった。 「なんでそうなるかは説明できないけど、とにかくそうなるんだから仕方がないよね」みたいなことがこの世にはたくさんあるんだと知った。 その後、「もし仮に運動方程式を説明できるようなAという法則が発見されたとしたらどうなるんだろうか」と高校生の自分は自問自答を開始した。 「運動方程式を説明するAという法則が見つかったとして、そしたらAという法則を説明するためのBという法則が必要だよな…。」 「そしたらBという法則を説明するためにCという法則が必要で…。」 「あれ？そしたらこれって無限に続いちゃうから、どこかで神のような超常的な存在が世界を規定したとしないと終わらないんじゃね？」 以上のような思考を経て、高校生の頃の自分は誰に教えられるでもなく自力で「宇宙論的証明」に辿り着いた。 正直に言うと「こんな斬新なことを思いついてしまう自分って天才なんじゃね？」とすら思っていた。 その幻想は昨日打ち砕かれた。 俺が思いつく程度のことはみんな思いついているのだ。 まあ、自分が天才ではないと自覚するのは辛いが、とはいえ良いこともあった。 ある意味自分がまともだと分かったからだ。 というのも、この「独自宇宙論的証明」について2回ほど人に話したことがあるのだが、2回とも「何言ってんだこいつ？」という感じでド滑りしたのである。 上司に話したときは「まあ、人間そういうのを信じたくなることもあるよね…」という返答をされた。 自分がここで言う「神」とは「この世界を矛盾なく説明するための超常的な存在」のことを指しているのであって、別にキリストとかムハンマドとか釈迦とか麻原彰晃とか大川隆法とかのことを言っている訳では無いのだが、上司には自分が宗教にハマっているやばいやつだと思われたらしい。 まあ、このエピソードに関しては上司の読解力の問題な気もするが、とはいえ2回もド滑りすると「もしかして俺ってやばいやつなのか？」みたいな気持ちは生まれてくる。 実際2回目のド滑り以降は人に話さなくなってしまった。 ただ、このYouTube番組を見て自分の発想が案外普遍的なものだったんだと自覚できたので、少しは自信が回復したな。

概要 HTMLのformタグは仕様上入れ子にできない。 例えば以下のようなHTMLを書いてみる。 form.html <form id="outer"> <form id="inner"></form> </form> これをChromeで開いてDevToolsを開くとこうなる。 内側のformタグが消えた。 HTMLの仕様なので仕方がないが、とはいえformタグを入れ子にしたい局面もある。 たとえば、今自分は以下のようなUIを個人開発で書いている。 日付や科目などを登録するための親フォームと、科目名の変更を行うための子フォームがある。 子フォームのフォーカス時にエンターキーを押したら科目名の変更を行いたいし、親フォームのフォーカス時にエンターキーを押したら日付や科目などの登録を行いたい。 Notionのセレクトとかもこんな感じのUIなので、そこまで特殊なシチュエーションではないかなと思う。 これをHTMLの仕様に怒られないように実装しようと思うと以下のような方法があるらしい。 フォームを親子関係ではなく並列の関係にして、位置調整はJSで頑張る submitボタンだけをformで囲み、その他の要素はform属性を使って属するフォームを指定する 方法1はイメージしやすいと思う。 例えばAフォームの下にBフォームを出したいなら、Aフォームの座標をDOMなどを利用して取得し、その値を利用してBフォームの表示場所を調節するのだ。 ただJSで位置計算のロジックを書くのは少し面倒だし、Reactなんかを使っていると並列になっているコンポーネント間でステートの共有をするのが少し面倒だ。 例えば並列関係にある2つのコンポーネントの両方で利用するステートがあるとしたら、2つのコンポーネントの共通の祖先のコンポーネントにステートを定義するかuseContextなどを使ってグローバルなステートを定義する必要がある。 親子のままならposition: relative;とposition: absolute;で簡単に位置調整ができるし、ステートの共有もpropsのバケツリレーをするだけで良いから簡単だ。 以上の理由から今回は方法1は見送り。 ちなみに、Notionはおそらく方法1を採用しているっぽいので、これも全然悪くはないと思う。単純に自分の好みではなかっただけ。 方法 というわけで今回採用した方法2の紹介。 以下のコードはformが入れ子になっているので現状はアウトだが、これをHTMLの仕様に反しないように成立させたい。 今からOuter Inputをフォーカス時にエンターキーを押したらOuter Submitが実行され、Inner Inputをフォーカス時にエンターキーを押したらInner Submitが実行されるようにしていく。 ng-form.html <form id="outer" onsubmit="alert('Outer Submit')"> <input type="text" value="Outer Input"/> <form id="inner" onsubmit="alert('Inner Submit')"> <input type="text" value="Inner Input"/> <button type="submit">Inner Submit</button> </form> <button type="submit">Outer Submit</button> </form> この方法で利用するのはHTML5で追加されたformという属性だ。 この属性をinputやselectに指定すると、それらの要素が属しているform要素を指定することができる。 つまり直接formタグで囲まれていないinputやselectを、さもformタグで囲まれているかのように振る舞わせることができる。 そこで外側のformタグの範囲をギューッと狭めて、Outer Submitボタンだけを囲むようにし、formの入れ子関係を解消する。 そして各inputやselectにform属性を指定して、属するformを指定する。 ok-form.html <input type="text" value="Outer Input" form="outer"/> <form id="inner" onsubmit="alert('Inner Submit')"> <input type="text" value="Inner Input" form="inner"/> <button type="submit">Inner Submit</button> </form> <form id="outer" onsubmit="alert('Outer Submit')"> <button type="submit">Outer Submit</button> </form> こうすることで、Outer Inputフォーカス時にエンターキーを押したらOuter Submitが実行され、Inner Inputフォーカス時にエンターキーを押したらInner Submitが実行されるようになる。 ...

Reactを使い始めて5年くらい経つ。 最近「上手くコンポーネントを使い回すのって人類にはムズいんじゃね？」って思ってきた。 一番ベーシックなコンポーネントといえばボタンが思いつくけど、経験上見た目が同じでも内部での処理が異なるボタンってかなり多い。 AボタンとBボタンを頑張って抽象化したとしても、後からCボタンがやってきて抽象化をやり直したことが何度もある。 めちゃくちゃ簡単に使い回せそうなボタンですら使い回すのがムズいって絶望するわ！！ で、最近は個人開発のときにコンポーネント化するのをやめて愚直にソースコードをコピペしているけど、今のところ別に問題が起きてないんだよなあ…。 むしろどうやって抽象化しようか悩む工程がなくなっている分だけサクサク書けるようになっている気がする。 まあ超小規模な個人開発だから問題が起きていないだけの可能性もあるけどね。 というわけで最近は 長いソースコードを切り分けて読みやすくしたいとき 同じ画面内にデータ部分が違うだけの部品を複数表示したいとき だけコンポーネント化している。 前者はコードが長くなりそうなときに使っていて、これは別に使い回すためにコンポーネント化しているわけではない。 Reactはコード量が増えがちだし、「どのHTMLがどのuseStateと関係あるんだっけ？」みたいなレイアウト部分とデータ部分の結びつきで混乱しがちなので、こういうときはコンポーネント化して、いい感じにソースコードを切り分けて読みやすいコードになるように工夫している。 後者の代表的な例はmapとかで配列を回して複数の要素を表示するようなときだ。例えばテーブルとかリストとか。 テーブルの行が1行目と2行目で仕様が変わることってほぼ無いから抽象化は雑で良いし、将来的に抽象化をやり直す可能性も低い。 こういうときは躊躇なくコンポーネント化している。 個人的に違うページに現れるパッと見似ている要素をコンポーネント化するのは罠だと思っている。高確率でその後に後悔している気がするんだよな。 ただ、ヘッダーとかフッターみたいに全ページで全く同じものを使うことが多い要素についてはコンポーネント化してもあんまり問題が起きないことが多い気がする。 これは例外かなー。 10年後の自分はこの記事を読んでどういう感想を抱くのかね？

やりたいこと VSCodeの『Language Support for Java(TM) by Red Hat』という拡張にはjava.autobuild.enabledというオプションがあり、これはデフォルトでtrueになっている。 つまりVSCodeではjava.project.sourcePathsやjava.project.outputPathやjava.project.referencedLibrariesなどの設定を適切に行っていれば、Javaのコードの保存時に自動でビルドが走る。 ところがGradleを使っているプロジェクトでは自動ビルドが走らなくなる。 試してはいないが恐らくMavenを使っている場合も同様だと思われる。 要するにjavacには対応してくれているが、./gradlew buildには対応してくれていないということなんだろうと思う。 Gradleを使っているプロジェクトでも素のJavaプロジェクト同様に自動ビルドが走るように設定をしていく。 方法 1. Run on Save拡張をインストール Run on Saveという、保存時に指定したコマンドを実行してくれるVSCode拡張があるのでインストールする。 2. settings.jsonを編集 VSCodeの設定ファイルであるsettings.jsonを編集して、コードの保存時に./gradlew buildを実行するように設定する。 .vscode/settings.json { "java.home": "/Users/zurukumo/.jenv/versions/21", "java.import.gradle.java.home": "/Users/zurukumo/.jenv/versions/21", "java.import.gradle.enabled": true, "java.project.sourcePaths": ["src/main/java"], "emeraldwalk.runonsave": { "commands": [ { "match": "\\.java$", "cmd": "JAVA_HOME=/Users/zurukumo/.jenv/versions/21 ./gradlew build" } ] } } "match": "\\.java$"と書くことで、ファイル名が.javaで終わっているファイルの保存時にのみコマンドが実行されるようになる。 ちなみにjava.homeを指定していてもRun on Saveからは読み込まれていないっぽく、仕方がないのでコマンドの前にJAVA_HOME=/Users/zurukumo/.jenv/versions/21と環境変数を記述した。 二重に書いている感じが気持ち悪いが、今の自分の実力ではこれが限界…。 まとめ 絶対にもっと良い方法がある気がする。 もっと良い方法を知っている方はコメントで教えて欲しい。 EclipseとかIntelliJ IDEAとかだったらこんなに面倒なことをしなくても自動でビルドしてくれるんだろうか？

やりたいこと lycheeというRust製のリンク検査ツールがある。 今回はHugoで作成したブログのデッドリンクをlycheeで検出するためのシェルスクリプトを作る。 環境 Hugo 0.146.6 PaperMod (commit 7cf752f8644fea1fc3dc7299352718d492c55182) lychee 0.18.1 lycheeのインストール 詳細は公式のGitHubを参照。 自分はbrewでインストールした。 brew install lychee シェルスクリプト まずは実際に作成したシェルスクリプトを見てみる。 lychee/check.sh #!/bin/bash rm -rf public/ hugo server -p 13131 & HUGO_PID=$! while ! nc -z localhost 13131; do sleep 0.5 done lychee public/ --base="http://localhost:13131" --exclude="amzn.to" --exclude="a.r10.to" kill $HUGO_PID 一行ずつ見ていこう。 1. rm -rf public/ public/ディレクトリを削除する。 Hugoはビルドした結果をpublic/に格納する。 もし記事を削除しても、public/にビルドファイルが残っている可能性がある。 そのような記事はリンク検査の対象にしたくないので、一旦public/を削除してから次のステップ2でもう一度ビルドする。 2. hugo server -p 13131 & ポート13131でHugoのサーバを起動する。このとき同時に再ビルドも行われる。 &をつけることで処理をバックグラウンドで実行することができる。 ...

初めてOSSにコントリビュートした!うれしい!! 概要 tcardgenというHugo用のOGP画像を生成するツールがある。 tcardgenを使ってHugoでOGPを設定するでもこのツールについては紹介した。 実際にこのブログのOGP画像もtcardgenを使って生成している。 tcardgenはデフォルトでタグをタイトルケースに変換する。 Hugo自体もデフォルトでタグをタイトルケースに変換するので、tcardgenはHugoの仕様に合わせたのだと思う。 ただHugoでtagの先頭文字が大文字になるのを回避するでも紹介したように、Hugoにはタグのタイトルケースへの変換を無効化するオプションがある。 Hugoに無効化するオプションがあるのだから、tcardgenに同様のオプションを追加してもさして問題はあるまいと思い、タイトルケースへの変換を無効化するオプションを追加した。 そのPRがこちら。 そしてこのPRが昨日無事にマージされた。 感想 OSSにコントリビュートするのは初めてだったので、結構ドキドキした。 フォークしてPRのベースブランチを指定したりするときに、ミスったらやばいことになるんじゃないかとヒヤヒヤしたが、特に問題なくPR作成までできたので良かった。 GitHub自体は業務でも個人開発でも利用しているが、意外とフォークとかしたこと無かったなと気付かされた。 今回で大体の流れは掴めたので、次回からはもう少しスムーズにコントリビュートできると思う。 あと、自分的には必要な機能だと思って実装したが、他の人からすると無駄な機能だと思われているんじゃないかと不安だった(別に今もこの不安が解消されたわけではない)。 今回はIssueを立ててから一息でPRまで作成したが、とりあえずIssueを作成して作者や他人の反応を見るのもありなのかもしれない。 とにもかくにも無事にマージされてよかった。 自分がよく使うツールにコントリビュートできるってのは気持ちが良いもんですな。

Hugoはデフォルトでコメント機能を持っていない。 公式ドキュメントにはDisqusを使ってコメント機能を実装する方法などが紹介されているが、有料だったり広告が出たりであまり評判は良くないようだ。 色々調べたところIssoというPython製のコメント用サーバを使うことで、無料かつ広告なしでコメント機能を実現できると分かった。 今回はその方法をご紹介。 Issoとは IssoとはPython製のコメントサーバである。 SaaS系のコメントツールと違って自前でサーバを動かす環境を用意するという手間はかかるが、その反面Hugoに限らずあらゆるwebコンテンツにコメント機能を実装することができる。 機能に関してもメールでのコメント通知、連投防止、管理画面など一通りのものは揃っている。 環境 Hugo 0.145.0 PaperMod (commit e2e1011bdecaf84d59c70fa42ff3d2c29c537b65) IssoのDockerイメージ latest(2025-04-16時点) 方法 0. 前提 今回はHugoで作成したブログをhttps://blog.zurukumo.devに、Issoのコメントサーバをhttps://blog-api.zurukumo.devにデプロイすることを想定している。 ブログはVercel上にデプロイし、コメントサーバはさくらのVPSにコンテナデプロイした。 1. Issoでコメントサーバを作成する コメントサーバの構成は以下の通り。 . ├── config │ └── isso.cfg ├── db │ └── comments.db └── docker-compose.yml └── .env config/isso.cfgにIssoの設定を書き、docker-compose.ymlにコンテナの構成を書く。 db/comments.dbはコンテナを立ち上げると自動で作成されるので、用意するのはdbディレクトリだけでOK。 docker-compose.ymlは以下のように書いた。 docker-compose.yml services: isso: image: ghcr.io/isso-comments/isso:latest env_file: .env ports: - "8080:8080" volumes: - ./config:/config - ./db:/db Issoは公式がDockerイメージを配布してくれているので、それを使えば上記のような簡素な設定で問題なく動く。 次にconfig/isso.cfgにIssoの設定を書く。 config/isso.cfg [general] dbpath = /db/comments.db host = https://blog.zurukumo.dev notify = smtp [server] listen = http://localhost:8080/ [moderation] enabled=false [smtp] username = (自分のメールアドレス) password = ${SMTP_PASSWORD} host = smtp.gmail.com port = 587 security = starttls to = (自分のメールアドレス) from = "isso comments" <(自分のメールアドレス)> timeout = 10 [guard] enabled = true ratelimit = 2 direct-reply = 3 reply-to-self = false require-author = false require-email = false [hash] salt = ${HASH_SALT} algorithm = pbkdf2 [admin] enabled = true password = ${ADMIN_PASSWORD} Server Configulationを参考にしながら書いた。 ...

やりたいこと 自分はさくらのVPSを借りて複数のサービスを運営している。 本当なら1つのサービスに対して1台のVPSを契約するのが理想だが、趣味の開発なのでそこまでお金はかけられない。 なので1台のVPS上に複数のコンテナを立ち上げて、nginxのリバースプロキシを使ってアクセスを振り分けるという形式を採用している。 例えばhttps://a.zurukumo.devへのアクセスはコンテナAに、https://b.zurukumo.devへのアクセスはコンテナBに振り分けるというような感じだ。 nginxの設定もSSL証明書の発行も手動で実行していたが、だんだんめんどくさくなってきたので、もっと楽にできる方法がないか調べてみた。 そこで発見したのがnginx-proxyとacme-companionというDockerイメージだった。 この2つのイメージを組み合わせることで、最小限の設定でリバースプロキシの設定からSSL証明書の発行までを自動化することができた。 今回の記事はその方法のご紹介である。 方法 まず、ざっくりとした構成を仮定する。 kagoとnbamashという2つのサービスを運営していて、どちらのサービスもwebコンテナ + dbコンテナという構成である。 両サービスともdocker composeで立ち上げているとする。 ここでhttps://kago-api.zurukumo.devへのアクセスはkagoのwebコンテナに、https://nbamash-api.zurukumo.devへのアクセスはnbamashのwebコンテナに振り分けることを目標にする。 1. DNSに利用したいドメインを登録しておく 向き先はVPSのIPアドレスにする。 自分の場合はこんな感じ(黒塗りの部分は両方同じIPアドレス)。 2. ネットワークを作成する nginx-proxyとacme-companionは動いてるDockerコンテナを検知すると自動でプロキシの設定やSSL証明書の発行を行ってくれる。 動いているコンテナを検知できるようにするるために、nginx-proxyとacme-companionを各種サービスと接続するためのネットワークを作成する。 docker network create proxy 今回はproxyという名前のネットワークを作成したが、名前はご自由に。 3. リバースプロキシ&SSL証明書取得用のdocker-compose.ymlを作成する 公式GitHubのDockerコマンドをdocker-compose.ymlに素直に書き換えた上で、networksの設定だけ追加した。 proxy/docker-compose.yml services: proxy: image: nginxproxy/nginx-proxy ports: - 80:80 - 443:443 volumes: - certs:/etc/nginx/certs - html:/usr/share/nginx/html - /var/run/docker.sock:/tmp/docker.sock:ro networks: - proxy cert: image: nginxproxy/acme-companion volumes_from: - proxy volumes: - acme:/etc/acme.sh - /var/run/docker.sock:/var/run/docker.sock:ro environment: - DEFAULT_EMAIL=(自分のメールアドレス) networks: - proxy volumes: certs: html: acme: networks: proxy: external: true HTTP-01 チャレンジに80番ポートを使用するため、80番ポートを開放している。 ...

転職先の会社ではJavaを使うので、入社前にある程度Springの勉強をしようと思った。 初めはインターネットの情報を見ながらSpringの勉強をしていたが、かなりブラックボックスになっている部分が多いフレームワークだなという印象で、「これは書籍を使って体系的に勉強したほうが効率が良さそうだな」と感じた。 そこで評価が良さげだった『プロになるためのSpring入門』を購入。 #PR プロになるためのSpring入門 - ゼロからの開発力養成講座 楽天 Amazon 感想 かなり体系的に書かれていてSpringの全体像を把握するのに役立った。 MVCのような基本的な内容からデータベースアクセスの方法、Thymleafの使い方、Spring Securityの使い方のような少し高度な内容まで幅広くカバーされていて、入門書としてはこの一冊で十分事足りるのではないかと思う。 DIコンテナで何が行われているかの解説、Configが読み込まれる仕組みの解説、セッションの管理方法の解説など、フレームワークのブラックボックスになりがちな部分についても丁寧に解説されているのが好印象だった。 フレームワークの裏側を理解せずとも割となんとなくで開発自体はできてしまうものなのだが、裏側を理解しているかいないかでバグにハマってから解決するまでの速度に雲泥の差が生まれると思っているので、本書のように裏側部分も丁寧に解説してくれる技術書はとてもありがたい。 テストについてもかなり丁寧に解説されていて、各種テストの方法からモックの方法やテストデータの作成の方法まで幅広く触れられていた。 本書では二通りの方法で同一の機能を実現できる場合に、「こういう場面ではこういう理由で方法Aを、こういう場面ではこういう理由で方法Bを」というような書き方が頻繁になされていて、選択に迷いがちな初学者にとっては非常にありがたかった。 一方でJavaの文法やWebフレームワークの基礎的な部分などに関しては既知のものとして話が進んでいき、あまり詳細な説明はされなかった。 おそらく本書がターゲットにしている読者は、「ある程度Web開発の経験があって、かつ他の言語からJavaに乗り換えようとしているエンジニア」なのだと思う。 「Web開発初心者です」、「Java初心者です」というような人が初手で手を出す本としては正直少しハードルが高いのかなと思った。 まとめ ある程度Web開発の経験がある人がSpringを学ぶための本としてはかなり優れていると思う。 自分はターゲット層にドンピシャだったので満足度が高かった。