Webサイトの文字ぼかしについて考える

CSSでblur機能が搭載されて、文章記事などを売り物にする場合に、チラ見せするためにこの機能を使ったところで、 HTMLソースや、ブラウザインスペクタには、バッチリぼかす前の文字列が表示されてしまうので、 あまり意味をなさないのではないか？ こんな事を仕事で考えて、色々と試行錯誤したので、結果的にどういう対応が望ましいのかをブログにまとめてみたいと思います。

CSSのblurは便利？

アメンボ赤いなあいうえお

<p class="sample-1">アメンボ赤いな<span class="blur">あいうえお</span></p> <style> .sample-1 .blur{ filter:blur(5px); } </style> インスペックタ（ブラウザコンソール）には、ぼかされていない文字が表示されるので、 まさに、「頭隠して尻隠さず状態」です。 CSSのblurフィルターは、便利なんですが、見た目だけのまやかし状態でもあります。 すりガラス効果などで、画像等に使うのはいいのですが、文字を見せたくなくてボカすことには向いていないようですね。

Canvasを使ったボカし

以前ブログで書いた、canvasでの文字表示機能を利用すると、ブラウザに文字を残さずに表示することができます。 canvasなので、文字を抜き取れないのと、文字列をsha256エンコードを使って、サーバーサイドAPIと連携することで、もはや常人には文字を読み取ることができません。・ でも、問題が発生しました。 Safariブラウザで、古いバージョンの場合に、canvas内で、ぼかし機能が効かないということです。

SVG連携のボカし

次にとった対策として、HTMLコードを、SVGに展開。 その時点で、CSSのボカしを設置。 さらにそれをcanvasでレンダリングして、隠蔽化。 これでcanvasの特定端末での使えない不具合を解消できます。 ※SVG対応CANVAS版は、仕事で使ったバージョンを、githubに適応中なので、出来上がったら、ブログで紹介しますね。 そして、この方法でも、NGポイントがありました！ それは、画像回り込みに向いていないということです。 こんな感じに、画像の周りに文字を配置するのが、回り込み文字です。 どうしても、canvasがブロック単位になってしまうので、inline的な要素にするのが、かなり難しいんですよね。

原点回帰でCSSでのボカし

最終的に、とった策としては、原点に戻り、CSSのfilterでのボカしをするという事です。 問題になるのが、文字列をそのまま掲載することができないので、どうせボカして見れないのであれば、 文字を全く別のランダム文字列に置換して仕舞えばいいという結論になりました。

アメンボ赤いな日月火水木

<p class="sample-1">アメンボ赤いな<span class="blur">日月火水木</span></p> <style> .sample-1 .blur{ filter:blur(5px); } </style> 見えないし、コピっても意味がない状態なので、商用サイトで使うにはこれが一番いいという判断をしました。 結論を聞くと結構簡単でしたでしょ？

あとがき

今回、思考の往来が激しかったですが、結論として、目的に沿った着地ができたのは、よかったです。 難しく考えすぎるのは、エンジニアの悪い癖というのと、 最近のガジェットなどのバージョン違いによる非対応っぷりが、かなり気になりましたが、 下位互換はとても重要な商用思考であると改めて考えさせられた、開発作業（思考）でした。