アスキーアート（AA）を崩さずに表示させる汎用ブックマークレット

アスキーアート（AA）の悲哀

最近、所謂やる夫スレにハマっています。何年前の流行だよとか突っ込まれそうですが、それでも面白いものは面白いのです。ちなみに今の個人的ベストは『サバイバルヤルオ』¹。圧倒的な傑作です。

ただ、やる夫スレ（のアーカイブ）を閲覧するにあたって気をつける点があります。それは、ご存知の通り、環境によってはアスキーアート（AA）が崩れてしまうという点です。
といっても、パソコンで閲覧している場合はどうとでもなります。表示フォントが容易に変更できるためです。が、問題となってくるのはスマートフォンでの閲覧。スマートフォンのブラウザは一般にフォントを自由に変更できるようになっていません。また、専用アプリを導入するのも少々面倒くさいものです²。したがって、何もしないままではまともに閲覧できません。これは問題でしょう³。

アーカイブを公開しているサイトによっては、Saitamaar等のウェブフォントを利用することでこの問題を解決しています。
が、全てのサイトがウェブフォントを採用しているわけではないため、ウェブフォント非採用のサイトのみで公開されている作品はスマートフォンでの表示がやはりズレズレになってしまいます。

ここで、問題の別の解決手法として、ブックマークレットが挙げられます。ブックマークレットを利用することで、ブラウザ側でウェブページに対し動的にスタイル、フォントを適用できるわけです。
しかし、既存の手法として Saitamaar.js を利用するものなどがあるようですが⁴、私の環境では上手く動作しませんでした。閲覧するサイトによるのかもしれませんが、いずれにせよ崩れるのは困ります。

そこで、大抵のサイトで動作するであろう汎用的なブックマークレットを作成してみました。このブックマークレットを利用することで、ウェブフォントを採用していないサイトのAAも正しく表示できるようになります。

作成したブックマークレット

作成したブックマークレットは以下。これをブックマークのURLに設定すれば利用できるようになります。細かい登録方法はググってください⁵。

javascript:(function(){var d=document,s=d.createElement('style'),h=d.getElementsByTagName('head');s.setAttribute('type', 'text\/css');s.innerHTML='@font-face {font-family: "Saitamaar";src: url("https://keage.tokyo/fonts/Saitamaar.woff2") format("woff2");}* {font-family: "Saitamaar" !important;}';h[0].appendChild(s);})();

Gistがお好きな方は以下からどうぞ。内容は同じです。共有とかスターには便利かもしれません。

https://gist.github.com/clvs7-gh/d279ea09523b5c894e43198ee4150251

動作は単純。ウェブフォントであるSaitamaarを読み込み、それをページ全体に適用する。それだけです。

これで、たとえスマートフォンのブラウザであっても、あらゆるサイトのAAを正しく表示することが可能になりました。画面の向こう側でやる夫も満足げに笑っているようです。やったお！　
ちなみに、サイトによってはスマートフォン向け表示になって勝手に改行されたりするので、デスクトップ表示（PC表示）モードにしておくと吉です。

なお、本ブックマークレットは当然パソコンのブラウザでも動作するだろ、常識的に考えて。

動作検証環境

• ArchLinux / Firefox 69
• Android 9 Pie / Chrome 77.0
• Android 9 Pie / Firefox for Android 68.1.1

制限事項

試していて気づいたのですが、弊サイトのようにインラインスタイル・インラインスクリプトを無効化するCSPを持つサイトでは正常に機能しません⁶。これはどうしようもないため、解決するには拡張機能等、別の手法が必要になると考えられます。が、現状、大抵のアーカイブサイトはCSPを適用していないので大丈夫なはず。今後はどうなるか分かりませんが、そもそもCSP対応するくらいの気概があるサイトならウェブフォントも導入するだろうという気がしますね。

最後に

『サバイバルヤルオ』は本当に傑作なので是非読んでみてほしい。この美しさを越える作品を書くのが、私の当面の人生の目標です。