ทันเอไอ

Styled Loggingとは?Console内の文字を装飾する機能、その起源は14年前のFirebugプラグイン

TH AI PassportのDeveloper Consoleに表示される巨大な「止まれ」の文字に多くの人が驚いたが、実は2012年のFirebugプラグインの時代から存在するStyled Loggingという機能だった

最近、タイのネットユーザーの多くは、政府のTH AI Passportのサイトにアクセスした際にDeveloper Console(ブラウザに内蔵された開発者向けツール)を開いて、大きく目立つ「止まれ」という文字を見て驚いたかもしれない。コンソールにこのような装飾された文字を表示できることを初めて知った人も多いが、実はこの機能は10年以上前から開発者に開放されていた。

この機能はStyled Loggingと呼ばれ、console.logコマンドで%cという指定子を文字列の前に置き、続けて文字色、フォントサイズ、背景色などのCSS(ウェブページのスタイルを定義する言語)の値を渡すことで、Console内の文字を装飾するものだ。例えば console.log("%cメッセージ", "color: red; font-size: 20px;") と書けば、コンソールに表示される文字は即座に大きな赤文字になる。

2006年当時を振り返ると、ブラウザには現在のようなDeveloper Consoleは内蔵されていなかった。そこでNetscape出身の元ソフトウェアエンジニアでFirefoxプロジェクトの共同創設者でもあるJoe Hewittが、開発者がブラウザから直接ウェブをデバッグ(エラーの発見と修正)できる拡張プラグインとしてFirebugを作り上げた。その後2012年、Firebugバージョン1.11が%cによるStyled Logging機能を追加し、1つのログ内で複数のCSS指定をサポートした。これがこの機能が知られるきっかけとなった。

その後、主要ブラウザが次々と自社ツールにこの機能を組み込んでいった。Firefoxは2014年のバージョン31からStyled Console Logsを標準機能として搭載し、Chrome、Edge、Safariも同様にサポート。現在、%cはWHATWG Console Specificationで国際標準として正式に定められている。

TH AI Passportのケースでは、コンソールに大きな警告文を表示するのは、一般ユーザーが怪しいコードをコンソールに貼り付けないようサイト側が用いる一般的な手法だ。悪意ある人物に危険なコマンドを実行させられる恐れがあるためだ。したがって、この種のメッセージを見ても慌てる必要はない。見知らぬ人物の指示に従ってどこかからコピーしたコードを貼り付けさえしなければ安全だ。