Webサービスで、会員登録や購買意欲を煽るために、文字をボカす効果をする場合、
単にCSSでBlur処理をすればいいと考えるのは、浅はかです。
だって、ページのソースをみたら、そこにはバッチリとボカしている文字がボケてないテキスト状態で存在しますからね。
でも、それをHTMLソースでもみられないようにするための仕様を考えてみました。
今回はダメパターンの、CSSによるボカし
まず、何の縛りもなく、ボカし表現をするだけであれば、CSSで手軽にできます。
※クリックしたらボカしが取れます。
css
filter:blur(5px);
当たり前ですが、HTMLのソースコードにこの文字はバッチリ書かれているので、
頭隠して尻隠さず状態です。
Canvasを使ったボカし
HTMLソースから文字を隠したければ、Canvasを使えばいいんです。
Javascript
const rawText = `酒が人間をダメにするんじゃない。
人間は元々駄目だということを酒が教えてくれるのだ。
by 立川談志`;
// HTMLエンティティ（。）を正しくデコード
function decodeHTMLEntities(str) {
const textarea = document.createElement("textarea");
textarea.innerHTML = str;
return textarea.value;
}
const text = decodeHTMLEntities(rawText);
const canvas = document.querySelector("canvas.blur");
const context = canvas.getContext("2d");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
let isBlurred = true;
function drawText(blur = true) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.filter = blur ? "blur(5px)" : "none";
context.font = "16px sans-serif";
context.fillStyle = "#FFF";
const lines = text.split("\n");
lines.forEach((line, i) => {
const y = 30 + i * 24;
context.fillText(line, 10, y);
});
}
drawText(isBlurred);
canvas.addEventListener("click", () => {
isBlurred = !isBlurred;
drawText(isBlurred);
});
改行対応や、文字コード対応などをしているので、若干複雑なプログラムになっていますが、
canvasの扱いを知っていれば簡単に扱えるシロモノです。
※Canvasがわからない人、ごめんなさい。
でもこれで、ソースコードにはcanvasタグのみの表示になったと思います。
解説
Canvasで文字を表示するのは、以下のコードです。
context.fillText(text, x, y);
textは、テキスト内で改行コードが入っていても、一行で表示されるので、
改行するときは、ループ文でそれぞれ表示するようになります。
x,yは、表示座標ですが、y軸は、テキストの左下が基軸になるので、文字サイズなどを初期値で保持して、それに行間と文字サイズを行ごとに加算する方式で表示します。
ちなみに、文字サイズは以下のコード。
context.font = "16px sans-serif";
フォントとかをセットすることもできますよ。
あとがき
実はこのツールは、続きがあります。
今回のcanvasに文字を表示してHTMLに痕跡を残さず、ぼかすだけの処理を作ってみたんですが、
「Javascriptコードみれば、テキストあるやん！」
と突っ込まれそうなので、その対応などを次の章で書いてみたいと思います。
この機能、使いたい人は必見ですね。
0 件のコメント:
コメントを投稿