これは何か Movable Typeの管理画面へのサインインでPasskeyの認証を利用できるようにするプラグインです。
mt-plugin-Passkey
VIDEO 必要な環境 サーバー環境に以下のPerl moduleが必要なので、ちょっと環境は選ぶかもしれません。
Crypt::PK::ECC
Crypt::PK::RSA
感想 1Passwordなどのパスワードマネージャを利用している場合には、普段からサインインの際の手間は殆どないのであまり変わらないようにも思いますが、「システムとして、パスワードよりも安全で手間のかからないサインインの方法を提供できる」というのが、Passkeyでサインイン可能にする際のシステム側のモチベーションであるように思いました。
（Passkey対応なので当然ですが）iCloudにPasskeyを登録しておけば、「デスクトップの端末からMTにサインインする際にiPhoneを経由して顔認証でサインインする」というのも思いの他さくっと成功するのでちょっとした感動があります。
TODO
サインインをしたタイミングでPasskeyの登録を促す
セッションの有効期限切れからの再サインインでパラメータを引き継ぐ（今は簡易的に実装しているのでダッシュボードに戻ります）
HTMLを書くのが面倒でalert()やprompt()を多用しているのでちゃんとする（でも今のブラウザはalert()も野暮ったくないので、意外と気にならないような気がしますが）
MFAプラグインと連携して他要素認証としてちゃんと扱われるようにする
というのができるともう少し「Passkey対応サービス」の雰囲気が出せそうな気がしました。
この記事について この記事はMovable Type Advent Calendar 2023 の2日目の記事です！
これは何か Honoのv3.8.0のリリース では「Improve path matching in the router」が入り、内部で利用しているルーターの仕様が変更になったのですが、高速なルーターの実装であるRegExpRouterは変更に対応しつつも速度を維持することができました。これはその経緯を解説する記事です。
「Improve path matching in the router」とはどのような変更であったか？ RegExpRouterの話に入る前に「Improve path matching in the router」の説明をします。リリースノートにもありますが以下のような定義のとき、以前は1つのアプリケーション内で「異なる階層に、同じ名前のパラメータ」を指定すると例外が投げられてしまい実行できなかったのですが、これができるようになりました。
この例だけ見ると「なぜ今までこれができなかったのか？」というように見えますが、例えば以下のような定義のときに、今までは内部のインターフェイスが「`c.req.param()` の戻り値をすべてのハンドラで共有」となっていて、両方に一致した時に妥当な結果を返せなかったため、ルーティングの登録の時点で例外を投げる仕様にしていました。
この仕様を改善するために、「`c.req.param()` の戻り値をすべてのハンドラで共有」となっていた内部のインターフェイスを「`c.req.param()` の戻り値は対応するルーティングで指定されたもののみ」とするように変更して、パラメータ名がルーティング間で重複するような定義も受け入れるようにしたのが「Improve path matching in the router」の変更になります。
リクエストとレスポンスの対応で見ると、以下のように変わっています。
この変更のルーターへの影響
以前の仕様だとルーターが返すのは以下でしたが、
一致したハンドラのリスト
一致したパスのパラメータ
新しい仕様だと以下になります。
インターフェイスはだいたい以下のように変わっています。（最終的にはもう少し複雑になります。）
以前の仕様だと、一致したハンドラの数に関わらずリクエスト時に生成するオブジェクトの数は一定でしたが、このインターフェイスだとハンドラの数に比例して増えることになります。
オブジェクトの生成はどのランタイムでも特別遅いわけではないので、一般的なJSのアプリケーションの中ではそこまで避けるべきものでもないと思いますが、RegExpRouterは「JSのルーター界隈」という（ニッチな😀）世界で戦っているのでこの辺りが問題になりました。
RegExpRouterでの対応 RegExpRouterは（ご存知でない方は過去の資料 を参照してください）正規表現の結果を可能な限りそのまま使うことで高速化しているので、それを活かせるようにルーター側のインターフェイスの方でも歩み寄ってもらって、以下のようにすることで対応しました。実際のコードではコメント付きでこんな感じ になっています。詳細については実際のコードを見てもらうほうがいいかもしれません。
RegExpRouterに関してはこのインターフェイスにあわせて、上で出した例に対してはこのようなルーティングの結果を返すようになりました。
これは `[T, ParamIndexMap][]` と `ParamStash` のタプルですが、前者は `match()` の呼び出し前に準備しておくことができ、後者についてはコメントにある通り `String.prototype.match()` の戻り値そのものとなっています。`c.req.param(key)` の呼び出しではこのデータ構造から値を引いて返すので、その際には以前の仕様では発生しなかったオーバーヘッドが発生するのですが、実際の運用の環境でも多くは以下のような条件を満たすので、
同じkeyで何度も `c.req.param(key)` が呼ばれるようなことはない
パスから取得するパラメータは多くても2〜3程度
middlewareは '*' や、静的なパス以下の '/js/*' のような使い方が多く、パラメータを取るケースは少ない
実運用の環境でも、そしてベンチマークでも、このオーバーヘッドが見える形で影響してくることはないものと思われます。
以上が、RegExpRouterが「Improve path matching in the router」の変更でも速度を維持できた（パラメータが少ない場合にはむしろ速くなるケースもある）理由です。
この記事について この記事は Hono Advent Calendar 2023 の1日目の記事です。明日から毎日楽しみです。よろしくお願いします！
これはなにか？ 先日公開した「MTML 」に続いて「MT Custom Block Editor 」という拡張機能を公開してみました。この拡張機能をインストールすると、MTのブロックエディタのスクリプト部分をVSCodeで編集したり、プレビューしたりできるようになります。
VIDEO まだ細かいところは詰めていなくて検証の一環程度のものですが、CMSでのサイト構築段階におけるこういった形でのVSCodeとの連携について、可能性を感じさせるものにはなっているように思います。
今後のやることリスト
エディタ内のwebviewで表示するのは簡単で見た目も悪くないけれども、実際には任意のウェブブラウザで開けた方が便利であると思う
実際の環境と同じように、画像ブロックも扱えるようにしたい
その他たくさん
この記事について この記事はMovable Type Advent Calendar 2022 の20日目の記事です！
これは何か 記事やウェブページ、またはコンテンツデータのデータとMTMLのテンプレートから画像を生成することができるようになるMovable Typeのプラグインです。主にog:imageやアイキャッチの画像を生成するユースケースを想定しています。
ImageTemplate
以下が簡単な出力例で、「記事内の画像を背景にして、ウェブサイトのテーマカラーで縁取りして、タイトルと執筆者情報を入れる」という画像です。
どのような問題を解決するか og:imageやアイキャッチ画像は、記事ごとにデザイナーさんに作成してもらうことができるのであれば、それがベストだと思っています。そのようにして作られた画像は目を引くうえに、内容も上手に凝縮して詰め込まれていて素晴らしいです。
ただ現実問題としてそこまで整えることのできないことも多く、そういう環境で記事の作成者が画像を用意するとなると、統一感のある画像を用意するのはなかなか難しいのではないかと思っています。このプラグインではそいう環境で作業者に時間やスキルがない場合にも、「あらかじめデザイナーさんにテンプレートを用意してもらう」ことにより、一定の品質で統一感のある画像を用意できるようになるというところを目指しています。
デモ VIDEO 使い方 インストール後に、SVGのデータを出力するテンプレートを作成すると使えるようになります。記事やウェブページとの関連付けはテンプレート名で行います。それぞれ以下の名前で作成してください。
記事 image_template_entry_並び順（数字）_表示名
ウェブページ image_template_page_並び順（数字）_表示名
コンテンツデータ image_template_content_data_コンテンツタイプのID_並び順（数字）_表示名
テンプレートの例 デモのために作成したテンプレートです。いろいろと決めうちで品質はよくないですが、雰囲気は伝わるかと思います。ルート要素に指定したwidthとheightが、出力される画像のサイズになります。
TODOリスト
SVGでなくて、HTMLで書くこともできるようにする
現在は「埋め込める画像はjpegのみ」「出力できる画像はpngのみ」なので、ちゃんと他のフォーマットも扱えるようにする
JavaScriptで、SVGの要素を調整して、その結果を出力できるようにする
管理画面で関連付けや並べ替えができるようにする
その他、たくさんあります。
この記事について この記事は Movable Type Advent Calendar 2022 の25日目の記事です。皆様お疲れさまでした。それでは良いお年を！
これはなにか？ Visual Studio Codeの拡張機能に興味が出たので、MTML（Movable Type Markup Language）向けのものを作ってみました。以下のように動作します。（音声での説明も入っています）
VIDEO 既存の拡張機能との関係 MTML向けの拡張機能やスニペットのデータはすでに公開されたものがあって、以前のアドベントカレンダーで紹介されているものもあります。
これらは実運用の中での知見が反映されたものでそれぞれすばらしいものなので、今回の拡張機能についてはこれらの置き換えを目指すものではなく、「もう一つの選択肢」というものとして考えています。ただ今回の拡張機能は「オプションで特定の機能のみを有効にする」ということもできるので、「リファレンスの表示機能のみを有効にする」というような形で、既存の機能と併用するという使い方もできるものになっています。
機能の説明 シンタックスハイライト ファイルの編集時に言語を「MTML」にすると、MTタグのシンタックスハイライトが有効になります。「MTML」は「HTML」で書いても概ねいい感じに表示されるものですが、「,」区切りの属性値であったり、属性値の中にMTタグを書く場合にうまくハイライトされないという問題があります。この拡張機能を使うとそのようなケースでもいい感じに表示されるようになります。
ただ、言語として「MTML」を選択してしまうと「HTML」向けのVisual Studio Codeのシンタックスハイライト以外の機能が使えなくなってしまうので、そこは若干、このシンタックスハイライトがほんとに便利なのかどうか、微妙だと思うところです。
補完 MTタグや、タグ毎のモディファイア、そしてグローバルモディファイアを補完することができます。「<」の場合には全てのMTタグが対象になり「<$」まで打てばファンクションタグのみが有効になります。
初期値では「mt:Var」のフォーマットで補完されますが、設定により「MTVar」のフォーマットに変更することもできます。
この機能はデフォルトで「HTML」や「CSS」でも有効になります。設定により「HTML」や「CSS」では無効にすることもできます。
リファレンスマニュアルの表示 MTタグにマウスカーソルを合わせると、リファレンスマニュアルを表示することができます。
この機能はデフォルトで「HTML」や「CSS」でも有効になります。設定により「HTML」や「CSS」では無効にすることもできます。
ブロックタグの折りたたみ ブロックタグを折りたたむことができます。
この機能はデフォルトで「CSS」でも有効になります。設定により無効にすることもできます。
今後のやることリスト
リファレンスの表示の整形や、保管される値の候補の改善
同じフォルダ内の他のファイルも考慮した、変数名の補完
theme.yamlのデータを参照した、カスタムフィールドのMTタグの補完
この記事について この記事はMovable Type Advent Calendar 2022 の7日目の記事となっています。ここまでですでに、API、最近のパッケージリリース、Google Chromeの拡張機能、プラグイン、などいろいろな話題がでていて面白いです。まだまだ前半なので、今後の記事も楽しみです。引き続きよろしくお願いします。
