CSSとJavaScriptのインライン化

CSSやJavaScriptをインライン化してみている。速い。ラスター画像もBase64で埋め込めみたくなる。しかしインライン化はやはり気持ちが悪く、落ち着かない。この気持ち悪さはウェブサイトと言う単位に意味が薄くなってしまうことにあるのではないか。

ウェブサイトは全体で一冊の本になっているようなイメージが漠然とある。フレーム全盛期を体験していることが大きい。このイメージではそれぞれのウェブページはその本のページにあたり、それぞれから参照されるCSSやJavaScriptファイルはそのページ群を留める接着剤やひもにあたる。それらをインライン化してしまうと、本のページそれぞれを切り離し、ペラペラな紙にしてしまっているような印象を持ってしまう。

実際にはそれぞれのウェブページは半ば独立したもので、ユーザーからも様々なウェブサービスからもそう扱われるようになって久しい。直帰率が限りなく100%に近い時代だ。だから制作者がペラペラと感じようと、そうしてやることがユーザーには正しいだろう。今だに存在する分割されたウェブページがバカバカしいことと同様、そこに疑問の余地はない。


一方でそういったコンテンツを—ペラペラであっても—自分が提供していることは明確に示したい。また示すべきだろう。AMPやMobile Safariのリーダー・モードの強制(単なる噂だが)を含めて、ウェブサイトという存在が薄まった世界では、価値のあるコンテンツであることは示せても、その帰属他を示すことはとても難しい。そしてそのことは短期的な収入(広告やチップなど)を生むことはできても、長期的な価値を生みづらくする。

そうなるとペラペラであることはユーザーや巨大企業には利することになっても、制作者たる自分には何の益もないことになる。書くことによって自分の考えをまとめ、それが成長させる、などと達観するのは無理な話だ。するとたかがMediumのClapやQiitaのいいね、noteのお金などで満足するしか未来がないように思えてしまう。MediumもQiitaもnoteも色々と記事を読む機会はあり、内容はそれなりに覚えているが、誰が書いたかなどこれっぽっちも—お金を払ったものですら—覚えていない。


ウェブサイトとは別の形で明示的にコンテンツをまとめる仕組み(RSSもそうだが、Apple Newsのようなものも含めて)が必要だったのかもしれない。そういった仕組みがもっとうまく利用される世界になっていたら、インライン化したペラペラなものを提供するだけで不満はなかっただろう。

唯一の自家製コンテンツの集合体たりえるウェブサイトを維持するには、それらをゆるやかにつなぎ合わせることが重要だ。それはロゴやプロフィール・アイコンのような表層的部分だけではなく、共通のCSSやJavaScriptファイルを始め、リニアなウェブページ構築システムというような基盤から構成することで達成できるのではないか。問題は、単純に構成してしまうと実情(パフォーマンスはもちろん、ユーザーの閲覧スタイルなど)にそぐわないことで、そこをどうすり合わせていくか、それとも諦めるかということが課題になる。


インライン化は、適切に処理して最小化したCSSやJavaScriptファイルをmustacheのパーシャルとして置き、それを展開するという手法を取った。普通に参照でHTMLファイルを作成し、後にjsdomなりで展開しても良さそうだったが、既存の環境を再利用しやすい方で行った。展開するパターンの方はjsdomとcheerioで試してはみたが、あまり意味はなかった。

素のmustacheだと{{の出現だけに気を付ければ良い。CSSやJavaScriptだとまず出てこないんじゃないかと想定しているが、どうなんだろう。もうちょっと調べる必要はありそうだ。CSSやJavaScriptのHTMLでのエスケープの問題も10年近く前に実装レベルでも仕様レベルでも解決しているはずなので、そのままstylescript要素へそのまま放り込めば({{{...}}}を使えば)よい。

既に利用しているHTML minifierでインライン化できれば効率的だが、そういった機能はない。もしできればパーシャル化する必要もなく、パースも一度で済むため、色々明快に処理できただろうが、ツールのフィールドがまったく違う。HTML minifierはファイル単位の最小化を行うもので、インライン化はプロジェクト・レベルでの最適化を目的とするものだ。


このウェブサイトはウェブアプリではないので、遅くなければ良いくらいですっぱりと見切りをつけたい。つまりインライン化はやめたい。こういったことを考えているうちにHTMLの最小化ですらどうでもよくなってきたし、再びAdSenseを付けたくなってきた。お金が欲しい。