先週公開された新機能を試してみたのでメモしておく。
設定方法
公式のヘルプが大変よくできていて助かる。
「すべての人に公開」が必須
ブログの公開設定を「すべての人に公開」にしておく必要がある。「カスタム」や「自分のみ」にすると、<meta property="og:image">などのアイキャッチ画像のタグ自体は出力されるが、画像のURLにアクセスすると404 Not Foundとなる。
この挙動も公式のヘルプに記載されているのだが、読まずに非公開のテスト用のブログを作って検証しようとして引っかかってしまった。
動作確認テクニック
自動設定アイキャッチの設定画面にプレビュー機能が付いているが、実際に動かしてみないと確認できない場合もある。
以下のような手順で動作確認するとスムーズだった。
- 自動生成アイキャッチの設定を変更する
- 検証に使う記事を更新する
- 記事を更新するとアイキャッチ画像も即座に更新される
- 記事内の
<meta property="og:image">のcontent属性のURLをダウンロードする- アイキャッチ画像が更新されるとURLも変わる
画像生成部分の仕様
ヘルプに書かれていない細かい仕様を確認してみた。今後変わるかもしれない。
ブラウザはたぶんChromium
CSSの@supportsを使ってブラウザエンジンを推定してみた。おそらくChrome/Chromiumだと思う。
2024年9月時点では、レンダラーとして使われそうなブラウザエンジンは
-moz-appearance: noneをサポートしていればFirefox-webkit-initial-letter: 1をサポートしていればWebkitinitial-letter: 1をサポートしていればChrome/Chromium
というように切り分けられる。
<!doctype html> <html> <head> <meta charset="utf-8" /> <style> body { font-size: 120px; text-align: center; } .wrapper p { display: none; } @supports (-moz-appearance: none) { .firefox { display: block !important; } } @supports (-webkit-initial-letter: 1) { .webkit { display: block !important; } } @supports (initial-letter: 1) { .chrome { display: block !important; } } </style> </head> <body> <div class="wrapper"> <p class="firefox">Firefox</p> <p class="webkit">Webkit</p> <p class="chrome">Chrome</p> </div> </body> </html>
PlaywrightとかPuppeteerとかでChromiumを自動操作してスクリーンショットを取るという感じで実装されていそうな気がする。
JavaScriptは無効化されている
<noscript>タグの中身がレンダリングされるので、JavaScriptは無効化されていることが分かる。
<!doctype html> <html> <head> <meta charset="utf-8" /> </head> <body> <noscript>noscript</noscript> </body> </html>
HTMLのテキストの上限は約65000文字
とのことなので、BudouXなどのJavaScriptのライブラリを丸ごと埋め込んでタイトルにいい感じの改行を加えられないかと思っていたが、さすがにそのような無法は許されなかった。
感想
いくつかの制約があるとはいえ、任意のHTMLとCSSを書いたら（たぶん）本物のブラウザでレンダリングしてくれるというのは夢とロマンを感じる。活用事例集とか実装の裏側紹介とかがあれば読みたい。
id:sago35
