Lycolog

検索条件

タグで絞り込みソフトウェア(2) ソフトウェア::CMS(1) ソフトウェア::CMS::adiary(1) ソフトウェア::Mastodon(1) 開発(1) 開発::Web(1) 開発::設計(1)

日付で絞り込み 1月(2) 3月(1)

全3件 (1/1ページ) 記事本文を表示

最近作ったWebツールの話とか

投稿日：2026/03/05

ジャンル::サイト運営開発::Web開発::設計

最近二つほどツールを作り、Webツール置き場に配置したので、そこで得た学びや、作る時に意識したことについても書いてゆく。

ENV Checker

まずENV Checkerを作った話。

端的に言うとCyberSyndrome : ENV Checker - 環境変数チェッカーのパクリである。但しJSがないと動かない。

違いとしてはCyberSyndrome側で見れる情報のうち、ユーザー環境に起因しない情報を大幅に削り、ユーザー環境をメインに出せるようにしているほか、IPv4とIPv6の表示にも対応している。

作りとしては必要な情報を返すAPIを3つ用意し、ページを表示したときにJSがそれぞれを叩きに行き、その結果を表示している。

Get Enviroment APIはIPアドレス以外の環境変数を返却するもので、Get IPv4 APIはIPv4アドレスとホスト名、Get IPv6 APIはIPv6アドレスを返すように作ってある。

なぜこの様な分け方にしたかというと、Get Enviroment APIはIPのバージョンを問わない情報しか返さないが、IPアドレスまで返すようにするとIPv4に付随する情報やIPv6アドレスを返すことになるため処理が煩雑になる。

これは実装としてはCGIの環境変数をそのまま返しているのでREMOTE_ADDRに:が含まれているかどうかを見てIPv4か、IPv6かを振り分ける処理が必要になるからだ。

一方でGet Enviroment APIが環境変数だけを返すことに専念できるのならば、IPv4に付随する情報はGet IPv4 APIを叩けば取れるし、IPv6はGet IPv6 APIを叩けば取れるため、分岐処理が不要になる。

これによって各APIは単一の責務だけを持つことになり、コードの複雑化を回避できるといった寸法だ。この程度のシンプルな実装に求めることではないし、現状では無価値ではあるのだが、常日頃から意識することで、より複雑なものを作る時にも生かせるだろうし、将来何か改修するときにも作りが単純なほうが理解しやすいと思うので、こうしている。

IPv4とIPv6のAPIをどう分けているかというと、これはDNSレベルで解決している。Get IPv4 APIのエンドポイントにはAレコードのみを、Get IPv6 APIのエンドポイントにはAAAAレコードのみを設定することで、クライアントが接続する際に使用するIPバージョンを強制している。

こうすることで、各APIは単純にREMOTE_ADDRをそのまま返すだけでよくなり、IPバージョンの判定ロジックを一切持たなくて済むのが利点だ。欠点としてはAPIの数が一つ増えるため、管理コストは増えているといえるだろう。しかし分岐ロジックというのは往々にしてバグを生む存在であり、ないに越したことはないと思い、こういう設計にした。

また画面の描画をJavaScriptにさせているのも、こういったいわゆる関心の分離の思想によるところが大きい。やろうと思えばIPアドレス以外はCGIで表示して、IPアドレスのところだけをJSで書き換えることも、当然できる。出来るのだが、責務を分けるにはデータを返すだけのエンドポイントと、それを受けてJSで書き換える手法のほうが、より責務がはっきりしていて、わかりやすいのでこうしている。疎結合ということでもある。

項目値をダブルクリック・タップすることで値をコピーできるようにしているのも、地味だがこだわりポイントだ。

余談だが、先日Value-DomainでcertbotのDNS Challengeをやるスクリプトを書き直したのは、このドメインにTLS証明書を付与したり、DDNSできるようにする目的があったのが大きい。

というのも、このENV Checkerの開発にはipv4.lycolia.infoとipv6.lycolia.infoというドメインが関係しており、私の自宅サーバーの環境はIPv4がコロコロ変わるためDDNSが必須だった。

私が利用しているDNSレジストラであるValue-DomainはDDNS用のエンドポイントがあるのだが、1回1ドメインしか更新できず、60秒に1度しか叩けないという制約があり、これを回避するためには、Value-DomainのDNS APIに対して、一回で複数ドメインのAレコードを書き換える必要があった。

また同時に、以前使っていた、TLS証明書更新ツールである、value-domain-dns-cert-register (vddcr)はNode.jsのアップデートなどに伴う頻繁なメンテナンスが必要だったり、動作検証不足があったり、様々な面倒ごとがあり、これ以上触りたくなかった。

そんなこんなの流れがあり、ENV Checkerを作る中でOpenWrtからValue-Domainに複数サブドメインのDDNSを行うツールを作ったり、新たなTLS証明書更新ツールを作り、その検証をしたりしたのだ。

QRコードジェネレーター

もう一つはQRコードジェネレーターを作った話。

QRコードジェネレーターなどググれば無数に出てくるわけだが、意外と読み取り可能な最小サイズかつ、それをSVGで出力できるものを見つけることができなかった。そこで作ることにした。

とはいえ、作ったのはフロントエンドだけで、QRコードの生成自体はqrcode-svgを使わせてもらっている。これはこのライブラリのデモサイトで、理想の要件のものが作れることが分かったからだ。

なぜデモサイトで使えるのに、わざわざ作ったかだが、まずこのデモサイトでは最小サイズのQRコードを簡単に得ることが困難だったほか、256px以下のサイズにすることが想定されていないように見えたからだ。少なくともUIをクリックしてDIMENSIONを256px未満にしようとしても出来なかった。

また、デモサイトはいつか消える可能性もあるし、ブックマークするのも面倒なので、自分でホスティング出来るなら、それをするに越したことはなかったというのもある。

これを作っている中で得た学びとしては、カラーパレットの入力UIがWeb標準で可能になっていたことだ。そこら中で見かけるし標準であるんちゃうか？と調べたらあったので採用した。こういう複雑なものは昔であれば恐らく何かしらのライブラリを使うか、気合で作る必要があったと思うが、全く世の中は便利になったものだ。

また、こちらの実装方法については、HTMLの標準機能でカラーパレットを使ったカラーコード入力UIを作る方法の記事で紹介している。

他にもQRコードの周りには余白が必要ということも知れた。QRコードの開発元であるデンソーウェーブでは余白の求め方の計算式が解説されている。仕様上は適切な余白がない場合、読み込めない可能性があるようだ。これは恐らく周囲の図形とQRコード本体を光学的に分けて認識させるために必要なのだと思う。

なお、今回作成したQRコードジェネレーターには余白の自動調整機能は実装していない。理由は単純でサイズを自由に変えられる仕様上、帳尻をつけるのが面倒だからだ。要は手抜きである。

ついでにWebツール置き場の保守性や解りやすさを少し上げたりした

Webツール置き場のドメイン配下は元々全てペラのHTMLで実装していたのだが、ページが増えるごとに共通部分のhead要素の管理が煩雑になっていた。そこで、PHPに置き換えることにした。

結果として、以下のように、head要素の中身を共通化することができた。

まぁやっていることとしては高校時代にPHPで静的HTMLの内容を共通化していたのと何ら変わらないので、何故今更そんなことを…という感じだが、元々は静的HTMLで済むものは静的HTMLのほうが表示速度が速くシンプルでよいよなという意図で、静的HTMLにしていたのだが、数が増えてくるとそうも言ってられないということで対応した形だ。こういうのは事前に考慮しすぎると、早すぎる共通化やKISSの法則的なリスクを孕むと思っていて、定期的に振り返り、都度対応するほうが良いと感じている。いや、この程度の内容でそこまで考える必要はないと思うが…ｗ

 <!DOCTYPE html>
 <html lang="ja">
 <head>
-  <meta charset='utf-8'>
-  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-  <title>Slackのリマインダーコマンドを作るやつ</title>
-  <meta name="referrer" content="no-referrer-when-downgrade"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="author" content="Lycolia Rizzim">
-  <meta property="og:image" content="https://tool.lycolia.info/slack-remider-creator/OGP.png">
-  <meta property="og:site_name" content="Lycolia">
-  <meta property="og:title" content="Slackのリマインダーコマンドを作るやつ">
-  <meta property="og:description" content="必要事項を埋めることでSlackの/remindコマンドを生成するやつ">
-  <meta property="og:type" content="website">
-  <meta property="og:image" content="https://tool.lycolia.info/slack-remider-creator/OGP.png">
-  <link rel="stylesheet" href="style.css">
-  <script src="check.js"></script>
-  <!-- Matomo -->
-  <script>
-    var _paq = window._paq = window._paq || [];
-    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-    _paq.push(['trackPageView']);
-    _paq.push(['enableLinkTracking']);
-    (function() {
-      var u="https://analytics.lycolia.info/";
-      _paq.push(['setTrackerUrl', u+'matomo.php']);
-      _paq.push(['setSiteId', '3']);
-      _paq.push(['enableHeartBeatTimer', 10]);
-      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-    })();
-  </script>
-  <!-- End Matomo Code -->
+<?php
+require_once('../template.php');
+
+renderCommonHead(
+  thumbnail: 'https://tool.lycolia.info/slack-remider-creator/OGP.png',
+  title: 'Slackのリマインダーコマンドを作るやつ',
+  description: '必要事項を埋めることでSlackの/remindコマンドを生成するやつ'
+);
+?>
 </head>

template.phpの中身

関心ごとに関数を切り分け、呼び出される側は呼び出す側に依存するように設計することで、親が子の変更に引きずられないように保守性を意識した設計にしている。他にもほとんど固定値であるものについては運用を平易にする観点からOptional化して、初期値を設定している。

<?php

function buildMatomo() {
    return <<<END
  <script>
    var _paq = window._paq = window._paq || [];
    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
      var u="https://analytics.lycolia.info/";
      _paq.push(['setTrackerUrl', u+'matomo.php']);
      _paq.push(['setSiteId', '3']);
      _paq.push(['enableHeartBeatTimer', 10]);
      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    })();
  </script>

END;
}

function buildCommonMeta(string $title, string $thumbnail) {
    return <<<END
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>$title</title>
  <meta name="referrer" content="no-referrer-when-downgrade"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Lycolia Rizzim">
  <meta name="thumbnail" content="$thumbnail">
  <link rel="icon" href="https://lycolia.info/assets/brands/lycolia-32x32.png" sizes="32x32">
  <link rel="icon" href="https://lycolia.info/assets/brands/lycolia-192x192.png" sizes="192x192">
  <link rel="apple-touch-icon" href="https://lycolia.info/assets/brands/lycolia-180x180.png">

END;
}

function buildOG(
    ?string $thumbnail,
    ?string $site_name,
    ?string $title,
    ?string $description,
    ?string $type
) {
    $tags = "  <meta property=\"og:type\" content=\"$type\">\n";
    $tags .= "  <meta property=\"og:site_name\" content=\"$site_name\">\n";

    if ($thumbnail !== null) {
        $tags .= "  <meta property=\"og:image\" content=\"$thumbnail\">\n";
    }
    if ($title !== null) {
        $tags .= "  <meta property=\"og:title\" content=\"$title\">\n";
    }
    if ($description !== null) {
        $tags .= "  <meta property=\"og:description\" content=\"$description\">\n";
    }

    return $tags;
}



function renderCommonHead(
    ?string $thumbnail = 'https://lycolia.info/assets/brands/lycolia-OGP.png',
    ?string $site_name = 'Lycolia.info',
    ?string $title = null,
    ?string $description = null,
    ?string $type = 'website'
) {
  $head = buildCommonMeta($title, $thumbnail);
  $head .= buildOG(
    thumbnail: $thumbnail,
    site_name: $site_name,
    title: $title,
    description: $description,
    type: $type
  );
  $head .= buildMatomo();

  echo $head;
}

また他にも、ドメイン直下にあるページの構造を見直した。

具体的にはulとliでリストにしていた部分をdl dt ddに直し、各ツールの内容を少し解りやすくした。ただ余りにも見た目が殺風景すぎるので、liに戻してカードUIをはめ込むようにするかもしれない。

変更前	変更後

コメント（0件）

Mastodonの本番DBを見る方法

投稿日：2026/01/28

ソフトウェア::Mastodonジャンル::サイト運営

自分の投稿にあるタグの使用回数を知りたかったのでMastodonの本番DBを見る方法を調べた記録。

確認環境

Mastodon v4.5.4

やり方

postgresになってmastodon_productionを開くと見れる。

sudo su - postgres
psql mastodon_production

テーブル一覧は恐らくhttps://mstdn.example.com/pghero/で見れるものがそれだと思う。

DBスキーマ

有志が公開しているMastodonのER図を参考にさせてもらった。

今回打ったクエリ

自分が投稿しているタグの総数が知りたかったので、こんな感じにしてみた。たぶん自インスタンスのdomainはnullと思われる。適当なので知らんけど。

SELECT
  tags.name
  ,COUNT(*) as post_count
FROM statuses
  INNER JOIN statuses_tags
    ON statuses.id = statuses_tags.status_id
  INNER JOIN tags
    ON statuses_tags.tag_id = tags.id
WHERE
  statuses.account_id = (SELECT id FROM accounts WHERE username = 'Lycolia' AND domain IS NULL)
GROUP BY
  tags.name
ORDER BY
  post_count DESC;

クエリの結果

ゾンビランドサガと三宮に対する言及がめちゃくちゃ多いことがよく分かった。

タグ名	使用回数
ゾンビランドサガ	225
三宮	205
神戸	123
兵庫	101
自炊	93
兵庫食材	72
交通	64
サイト運営	32
神戸食材	25
鉄道	22
映画	15
映画館	14
買い物	9
姫路	7
災害	5
夜景	4
経県値	4
lastfm	3
markov	3
web	3
御影	2
明石	2
尼崎	2
カメラ	2
ai	2
ui	2
せちまなと打って性格がわかるらしい	1
しなちくシステム無料ガチャ	1
加古川	1
回線	1
眼鏡っ娘を見るとストレスが減るらしい	1
気動車	1
このタグをみた人は好きな天ぷらを答える	1
阪神	1
山歩しよう	1
児島	1
shindanmaker	1
page42	1
notestocklogincode	1
notestock	1
土産	1
飯屋	1
last	1
fediverseプロフ帳	1
無事下山	1
ガルクラ	1
ガジェット	1
ガルクラタイプ診断	1
ガルクラ総集編	1
ソンビランドサガ	1
インターネット	1
ネットワーク	1
プロフィール帳	1
プロフ帳	1
ライフハック	1

参考

コメント（0件）

重い腰を上げてadiaryのMarkdownパーサーを脚注記法に対応させた

更新日：2026/02/13
投稿日：2026/01/13

ソフトウェア::CMS::adiaryジャンル::サイト運営

この記事はadiary改造シリーズ三本目である。

今回はadiaryの私的改造版であるadiary-extendsを0.11.5から0.12.0にバージョンアップした。

何をしたかというと、adiaryを採用したいが…で導入検討以来ずっと懸念事項だったMarkdownの脚注書式に対応した。なんと二年越し。なおまともな動作確認はしていないので、ちゃんと動くかは不明だ。とはいえ、軽く見た感じとりあえず動いてそうなので、いったん対応したということにしておく。

現状では脚注に書いたMarkdownはパースされないのでそのまま出てくるが、今のところ仕様。そのうち直す。多分。

2026-02-13

Version 0.16.0で脚注記法のMarkdownをHTML展開する対応を行った。

この対応はOpus 4.6に書かせた。

何故やったか？

ミンゲイインターネットの紹介を書くにあたり、古のサイト探究～駄文同盟のID上位100サイトを巡り、今までのネット人生や自サイトの過去を振り返ってみるをリンクしたかったのだが、この記事には破綻した脚注記法が使われており、まさか他のサイトの紹介記事を書くのにこんな状態があってはならないだろうと思い着手した。

どうやったか？

Claude Opus 4.5に9割書いてもらった。

というのもadiaryのコードはPerlで実装されてあり、私はPerlに疎い部分もあるし、パーサー系のコードの理解が難しいためだ。

過去にGPT4やClaude Sonnet 3.5などにトライさせたことはあるのだが、余りにも出てくるコードが使い物にならず、当時は諦めていた。しかしOpus 4.5は極めて性能がいいので、ひょっとしたら今なら行けるのでは！？と思い試してみたところ、大まかには上手くいったので、実装することが出来た。

勿論コピペ実装できる代物ではなかったので、細かいところは手直ししている。

Opus 4.5に任せた流れ

キャプチャでアレだが、こんな感じで出してもらった。最初投げつけてるのはlib/Satsuki/TextParser/Markdown.pmそのものを渡している。

行が破綻していたり、前後の行にあるコードが正しくなく、リンク処理に[]が食われた後に脚注の[]をしようとして失敗したり、正規表現が微妙に間違っていたり、余計なフラグがあったりしたので、そういうのは適当に直している。

あとがき

GitHubのWikiに改造内容をまとめているが、割とそこそこ改造したと思う。

素のadiaryより格段に使いやすくなった。とはいえ、まだ足りないところは多いし、adiaryを保守するのも大変なので、そのうちフルスクラッチで作り直したいところだ。こうやってadiaryに手入れしている現状、その日がいつ来るのかは謎だが…。

ついでにロゴもSVGとPNGで作ってみた。adiaryのオリジナルロゴの改変だが、SVGの書式をMDNで引いて細かいことはOpus 4.5に聞きつつ、手書きしたものだ。

GitHubのリンクは消えるかもしれないので、現時点の版も置いておく。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <rect x="0" y="0" width="64" height="64" rx="12" ry="12" fill="#899aff"></rect>
  <text x="18" y="52" transform="rotate(-10, 25, 62)" font-family="Meiryo, serif" font-size="64" font-weight="bold" fill="#fff">
    a
  </text>
  <text x="25" y="55" transform="rotate(-30, 50, 50)" font-family="Meiryo, serif" font-size="32" font-weight="bold" fill="#001382">
    ex
  </text>
</svg>

SVGをPNGに落とすのにはSVG to PNG / ものおきを利用させていただいた。縁のアンチエイリアスや透過情報がきちんと保たれていて、非常に便利だった。

過去のadiary改造シリーズの記事。

CMSをadiaryに変えてよかったこと
- コピペによる画像添付に対応した話
adiaryを地味に改修している話
- 去年やった改造の全般的な話

コメント（0件）