先日公開した「MTML」に続いて「MT Custom Block Editor」という拡張機能を公開してみました。この拡張機能をインストールすると、MTのブロックエディタのスクリプト部分をVSCodeで編集したり、プレビューしたりできるようになります。
まだ細かいところは詰めていなくて検証の一環程度のものですが、CMSでのサイト構築段階におけるこういった形でのVSCodeとの連携について、可能性を感じさせるものにはなっているように思います。
この記事はMovable Type Advent Calendar 2022の20日目の記事です！
記事やウェブページ、またはコンテンツデータのデータとMTMLのテンプレートから画像を生成することができるようになるMovable Typeのプラグインです。主にog:imageやアイキャッチの画像を生成するユースケースを想定しています。
以下が簡単な出力例で、「記事内の画像を背景にして、ウェブサイトのテーマカラーで縁取りして、タイトルと執筆者情報を入れる」という画像です。
og:imageやアイキャッチ画像は、記事ごとにデザイナーさんに作成してもらうことができるのであれば、それがベストだと思っています。そのようにして作られた画像は目を引くうえに、内容も上手に凝縮して詰め込まれていて素晴らしいです。
ただ現実問題としてそこまで整えることのできないことも多く、そういう環境で記事の作成者が画像を用意するとなると、統一感のある画像を用意するのはなかなか難しいのではないかと思っています。このプラグインではそいう環境で作業者に時間やスキルがない場合にも、「あらかじめデザイナーさんにテンプレートを用意してもらう」ことにより、一定の品質で統一感のある画像を用意できるようになるというところを目指しています。
インストール後に、SVGのデータを出力するテンプレートを作成すると使えるようになります。記事やウェブページとの関連付けはテンプレート名で行います。それぞれ以下の名前で作成してください。
image_template_entry_並び順（数字）_表示名
image_template_page_並び順（数字）_表示名
image_template_content_data_コンテンツタイプのID_並び順（数字）_表示名
デモのために作成したテンプレートです。いろいろと決めうちで品質はよくないですが、雰囲気は伝わるかと思います。ルート要素に指定したwidthとheightが、出力される画像のサイズになります。
この記事は Movable Type Advent Calendar 2022 の25日目の記事です。皆様お疲れさまでした。それでは良いお年を！
Visual Studio Codeの拡張機能に興味が出たので、MTML（Movable Type Markup Language）向けのものを作ってみました。以下のように動作します。（音声での説明も入っています）
MTML向けの拡張機能やスニペットのデータはすでに公開されたものがあって、以前のアドベントカレンダーで紹介されているものもあります。
これらは実運用の中での知見が反映されたものでそれぞれすばらしいものなので、今回の拡張機能についてはこれらの置き換えを目指すものではなく、「もう一つの選択肢」というものとして考えています。ただ今回の拡張機能は「オプションで特定の機能のみを有効にする」ということもできるので、「リファレンスの表示機能のみを有効にする」というような形で、既存の機能と併用するという使い方もできるものになっています。
ファイルの編集時に言語を「MTML」にすると、MTタグのシンタックスハイライトが有効になります。「MTML」は「HTML」で書いても概ねいい感じに表示されるものですが、「,」区切りの属性値であったり、属性値の中にMTタグを書く場合にうまくハイライトされないという問題があります。この拡張機能を使うとそのようなケースでもいい感じに表示されるようになります。
また「HTML」のシンタックスも理解するのでHTMLの部分もそのままきれいに表示されます。
ただ、言語として「MTML」を選択してしまうと「HTML」向けのVisual Studio Codeのシンタックスハイライト以外の機能が使えなくなってしまうので、そこは若干、このシンタックスハイライトがほんとに便利なのかどうか、微妙だと思うところです。
MTタグや、タグ毎のモディファイア、そしてグローバルモディファイアを補完することができます。「<」の場合には全てのMTタグが対象になり「<$」まで打てばファンクションタグのみが有効になります。
初期値では「mt:Var」のフォーマットで補完されますが、設定により「MTVar」のフォーマットに変更することもできます。
この機能はデフォルトで「HTML」や「CSS」でも有効になります。設定により「HTML」や「CSS」では無効にすることもできます。
MTタグにマウスカーソルを合わせると、リファレンスマニュアルを表示することができます。
この機能はデフォルトで「HTML」や「CSS」でも有効になります。設定により「HTML」や「CSS」では無効にすることもできます。
ブロックタグを折りたたむことができます。
この機能はデフォルトで「CSS」でも有効になります。設定により無効にすることもできます。
この記事はMovable Type Advent Calendar 2022の7日目の記事となっています。ここまでですでに、API、最近のパッケージリリース、Google Chromeの拡張機能、プラグイン、などいろいろな話題がでていて面白いです。まだまだ前半なので、今後の記事も楽しみです。引き続きよろしくお願いします。
最近honoにコントリビュートをしていて、正規表現の結果からの文字列を探索する際にindexOf()の代わりにlastIndexOf()を使ったら最適化できないだろうかと考えたりしていたのですが、だめでした。これはその際に調べたことのメモです。
まず最初に、1000個のcaptureを返す正規表現の結果から500番目を探すパターンでベンチマークをとってみます。
どのバージョンでもindexOf()が文字通り桁違いに速く、lastIndexOf()はforやwhileにすら負けて最下位になっています。（ただindexOf()を使った場合にも変数へのアサインを挟んだだけでここまでの差にはならなかったりするので、どれも基本的には速く、ちょっとした条件の変化で結果が変わったりする程度のものでもあるとは思います。）単純に1つの空文字列を探索する場合にはindexOf()を使うのがよさそうです。
v8のコードを見てみたところ、indexOfの方はc++のコードで、lastIndexOfはマクロのコードで書かれていたので、その辺りで違いが出ているのかもしれません。
次に、以下のように「最大で2つの連続した空文字列が返ってくる match() の結果から、一番最後の空文字列の位置を取得する（captureは2000個）」というケースでのベンチマークをとってみます。
これはバージョンごとの違いが大きく、v16だと「indexOf()とforループがほぼ同じ性能」で、v17だと「indexOf()が最速で2倍近い性能」、そしてv18(pre)だと「forループが最速」となりました。
結論のようなものはなかなか難しいですが。
というところでしょうか。v18でもネイティブで実装されたlastIndexOf()よりもforループのの方が早くなるケースがあるというのは若干複雑な気持ちにはなりました。
String Literal TypesやTemplate Literal Typesを使うとGenericsや関数の引数の文字列から型を作れるという話を聞いたので、勉強も兼ねて足し算を定義してみました。
以下のような感じになります。 `Expr<"1 + 1">` が `"10"` というString Literal Typeになります。2進数の足し算のみに対応していて、未対応の式ではUnrecognizedExpression型になります。3項以上でも計算できます。
型が補完されるエディタを使っていると、答を自分で打たなくても補完されたりして楽しいです。
これをtscで変換すると以下のようになるのですが、これを見て、TypeScriptの型はほんとに実行時には影響のないものなのだなと実感することもできます。
足し算の定義は業務の役には立たないものの、このあたりを勉強しつつTypeScriptを使っているウェブのフレームワーク（🔥）にAdded type to c.req.param key.というPRを作ってみて、引数から型を生成するようなパターンには可能性があるなと感じたりもしています。
ちなみにTypeScriptではdocument.querySelector(`a`)と指定したときに引数からHTMLAnchorElementが推論されたりして面白いのですが、`div a`や`a[href^="#"]`だとHTMLElementになってしまうというのがあるのですが、以下のように指定すると要素名っぽいものから推論されるようにできます。（面白いけど、やっぱりこれも使う機会はないとは思いますが。）