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