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


アスキーアート(AA)の悲哀

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

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

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

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

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

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

作成したブックマークレットは以下5。 Gistのコメントにも記載した通り、スニペット自体はCC0としています。

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を持つサイトでは正常に機能しません6。これはどうしようもないため、解決するには拡張機能等、別の手法が必要になると考えられます。が、現状、大抵のアーカイブサイトはCSPを適用していないので大丈夫なはず。今後はどうなるか分かりませんが、そもそもCSP対応するくらいの気概があるサイトならウェブフォントも導入するだろうという気がしますね。

最後に

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


  1. これは本当に完成度が高く、分析すればするほど舌を巻かざるを得ません。心情描写も魂が震えるほど凄いのですが、特筆すべきは生活の描写でしょう。一切の妥協なく、小手先の技のみに頼らず細かく行動を描いているからこそ、読者は違和感なく世界に潜り込むことができます。また、The End Of編からサバイブド編にかけてのやる夫の絶望、葛藤、その超克の描写が実に、極めて、最高に素晴らしいので必見。今年読んだ作品群の中でも暫定トップの美しさなので、是非読んでみてください。詳細は こちら を参照のこと。 [return]
  2. 特にAndroidの場合、有名な専用アプリがAmazonのストアのみで配信されているため、アプリケーション本体の導入の前にAmazonのストアをまず導入する必要があり、ちと厄介です。 [return]
  3. やる夫スレ文化が下火になった原因の一つだと考えられます。無論それだけではないでしょうけれど。 [return]
  4. http://keagelog.blogspot.com/2012/12/iosandroid-aa.html [return]
  5. ブックマークレットの導入方法は割愛します。ググったら一発で出てくるので。 [return]
  6. インラインスタイルやインラインスクリプトが無効化されるため。 [return]