Javascriptで画像やテキストにモザイクをかける方法【SPOILER ALERT!】
例えば、読書や映画の批評サイトを運営していると必ず悩みの種になるのが「ネタバレをどう表現しよう…」という点だと思います。ネタバレがなければ充分な批評にならないし、充分な批評をすると今度は未視聴のユーザーから敬遠されてしまう…。そういった場合の1つの解決策として、今回は画像やテキストにお手軽にモザイク処理をかけられる軽量ライブラリ、SPOILER ALERT!の使い方を解説します。
サンプルデモ
下記は、SPOILER ALERT!を利用して、画像やテキストにモザイクをかけたサンプルデモです。マウスを乗せると中身を見ることができます。クリックするとモザイクが解除され、再びクリックするとモザイクがかかります。
サンプルテキスト：昨日の「名探偵コナン」はとても面白かった。特に、犯人があらゆだったことは予想できませんでした。また、凶器がタコだったトリックも見事としか言いようがありません。恐らく、犯人のあらゆは当日、魚屋で凶器のタコを購入し、スマホを使ってうんたらかんたらでBにまだ魚屋にいると錯覚させることでアリバイを作り、Cが自宅に帰る時刻を待って訪問、犯行に及んだのでしょう。
ライブラリの入手
GitHubでライブラリを入手することができます。まずはダウンロードして下さい。
ダウンロードしたファイル(spoiler-alert-master.zip)を解凍し、フォルダの中にあるspoiler.min.jsを利用します。
ファイル構成
- spoiler-alert-master
- spoiler.min.js
使い方
早速、画像とテキストにモザイク処理を入れてみましょう。まずはヘッダー部分でライブラリを読み込んで下さい。このライブラリの利用には、jQueryが必要なので、先に読み込んでおきます。
HTML
<!-- jQueryライブラリの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- ライブラリの読み込み -->
<script src="./spoiler.min.js"></script>まずは、モザイクの対象となるコンテンツに、どのようなクラス属性値を付けるか決めておきましょう。例えば、mosaicにします。ということで、モザイクをかけるコンテンツに、mosaicのクラス属性値を付けます。
HTML
<!-- 画像にモザイクをかける -->
<p><img src="./sample.png" class="mosaic"></p>
<!-- テキストにモザイクをかける -->
<p>これは、テキストに<span class="mosaic">モザイク</span>をかける<span class="mosaic">サンプル</span>です。</p>HTMLの準備ができたら、後はプログラムを発火するだけです。それには、対象となるエレメントにspoilerAlert()メソッドを実行します。引数として、モザイクのレベル、マウスを乗せたときにどのレベルまでモザイクを軽減するか、また、マウスを乗せたときに出るポップアップメッセージのテキスト、の3要素を指定することができます。
Javascript
$(function(){
$(".mosaic").spoilerAlert(
{
max:10, //モザイクのレベル
partial:4, //マウスオーバー時のモザイクのレベル
hintText:"クリックでモザイク解除" //マウスオーバー時のポップアップ
}
);
});引数は省略可能です。その場合、デフォルト値(モザイクレベル:2、マウスオーバー時:2、テキスト:"Click to reveal completely")が適用されます。
Javascript
$(".mosaic").spoilerAlert();
//デフォルト値を変更するには、ライブラリ内の下記部分を変更する
//defaults={max:4,partial:2,hintText:"Click to reveal completely"}以上、HTMLを読み込めば、指定した場所にモザイク処理がかかって、クリックしないと内容が分からないようになります。サンプルデモを見たい人は下記ページへどうぞ。
ダウンロード
この記事で紹介したチュートリアルのコードを配布しています。ライブラリをお手軽に調整したい人は、ぜひ、ダウンロードしてお使い下さい。
ファイル構成
- ...
- mosaic.html(ダウンロード)
- spoiler.min.js
- sample.png(ダウンロード)
ファイルの内容
mosaic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>画像とテキストにモザイクをかけるデモ</title>
<!-- スタイルシート -->
<style>
img{
max-width:100%;
height:auto;
}
</style>
<!-- jQueryライブラリの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- ライブラリの読み込み -->
<script src="./spoiler.min.js"></script>
<!-- 処理の実行 -->
<script>
$(function(){
$(".mosaic").spoilerAlert(
{
max:10, //モザイクのレベル
partial:4, //マウスオーバー時のモザイクのレベル
hintText:"クリックでモザイク解除" //マウスオーバー時のポップアップ
}
);
});
</script>
</head>
<body>
<h1>画像とテキストにモザイクをかけるデモ</h1>
<p>任意の要素にモザイクをかけるサンプルデモです。クリックするとモザイクを解除でき、もう一度クリックをすると、モザイクを復活できます。</p>
<p>(解説：<a href="http://syncer.jp/how-to-applying-a-blur-to-image-and-text-by-javascript" target="_blank" rel="nofollow">Syncer</a>)</p>
<h2>画像の場合</h2>
<p><img src="./sample.png" class="mosaic"></p>
<h2>テキストの場合</h2>
<p>サンプルテキスト：昨日の「名探偵コナン」はとても面白かった。特に、犯人が<span class="mosaic">あらゆ</span>だったことは予想できませんでした。また、凶器が<span class="mosaic">タコ</span>だったトリックも見事としか言いようがありません。<span class="mosaic">恐らく、犯人のあらゆは当日、魚屋で凶器のタコを購入し、スマホを使ってうんたらかんたらでBにまだ魚屋にいると錯覚させることでアリバイを作り、Cが自宅に帰る時刻を待って訪問、犯行に及んだのでしょう。</span></p>
</body>
</html>