【wScratchPad】Web上で銀はがし(スクラッチカード)を作る

    icon-clock-o読了時間:約11分14秒

先日スマホに出てきた広告が 「 ここをタップすると削れるよ! 」 という
あまり見かけたことが無いもので 「 どういうこと…? 」 と思い、
念のために広告URLを調べて、ちゃんとした企業さんの広告だったので
言われるがまま広告部分の画面を指でササッと触ってみました。
すると、そこがコインで削ったみたいに消えて下の画像が見えました。
すげえコレ…!と感動したので、どうやって作るのか調べてみました。

どうやらjavaScriptのwScratchPadというプラグインを使って作られているようです。
そして作ってみたのが ↓ こちら。
PCの場合はマウスポインタ(マウスを動かす時の矢印)を画像に乗せると
ポインタ画像が五円玉に変わると思うので、
そこでクリックしたままシャカシャカしてみてください。


      

パソコンでもスマホでも動いてるので、これで合ってるんだと思うのですが
皆さんのお使いの環境ではいかがでしょうか。

とりあえず今わかってる設置方法をご説明してみます。

 目次 

スクラッチ風プラグイン・wScratchPadとは
wScratchPad を GitHub からインストール
スクリプトコードを書く
応用編:複数画像がランダムに表示されるようにする
ポイント:マウス画像は背景透過で


スクラッチ風プラグイン・wScratchPadとは

このスクラッチを模した動作をするために使われているのは
jQuery(ジェイクエリー)プラグインのwScratchPadというプログラムです。

HTML5対応。
そのため、HTML5に対応していない古いバージョンのブラウザをお使いの場合は
表示されない、あるいは正常に動作しないかと思います。

jQueryはJavaScriptコードのライブラリです。
Web上で様々な動作をさせられるJavaScriptのプログラムコードを
便利なひとまとめのパッケージにしたものがライブラリ。

今回の場合は
画像を表示
その画像に別の画像をオーバーレイ(重ねる)
マウス操作(あるいはタップ操作)の軌道に合わせて最上面の画像を透過
透過した部分は下にある画像が表示される

といったプログラムがひとまとめにされているので、
wScratchPadをダウンロードし、自分のサーバーにアップロードし、
スクラッチを表示させたい箇所にコードを記述すれば
スクラッチカードが出来上がる、ということですね。すごい。
プラグインの作者さん有難うございます!

でも記述の仕方を間違えてしまうとサイトが表示されなくなったり、
負荷を掛けすぎてサーバーに迷惑を掛けたり、といったこともあるかもしれないので
こうしたスクリプトを使う時はあらかじめ元ファイルのバックアップを取ってから、
間違いのないように慎重に記述してくださいね。


wScratchPad を GitHub からインストール

まずwScratchPadのプログラムを自分のPCにダウンロードします。

サイト・GitHubのjQuery Scratch Pad Pluginにアクセス。
(GitHubはソフトウェア開発プロジェクト用のコードや知識の共有に使われるウェブサービスです)
(プラグインの説明ページはこちら

一番上に表示されているのが最新バージョンです。
【 zip 】をクリックしてダウンロード。
wScratchPadインストール
保存されたZIPファイル(データ圧縮ファイル)を解凍します。
ファイルを解凍
ファイル【 wScratchPad-●.●.● 】(●の部分はバージョンナンバー)を
FTPソフトで自サイトのサーバーにアップロードします。
※使うファイルだけアップロードしても良いですし、フォルダごと上げても良いです。
wScratchPadをアップロード

これで下準備ができたので、今度は実装するためのコードを記述します。


スクリプトコードを書く

概要説明やコードサンプルなどは作者さんの公式サイト・Websanova内の
HTML5 jQuery Scratch Pad Plugin にも記載されています。

ここでは、この記事の一番上で動かしていたスクリプトのコードを例にしてご説明します。
本当はもっとスマートな記述方法があるのでは…とちょっと不安なので
他のサイトさんのコードなども参考になさってみてくださいね。

 icon-cog <!– –> の部分は説明コメントです。記述する際に削除して構いません。

 icon-cog ◆ ◆の部分を削除して、ご自分の実装環境に合わせて記述してください。

 icon-cog test2018 の部分は私が適当に入れた名前なので、お好みの英数字に変更してください。
  (12、16、24、27、32、32行目の6ヶ所あります)

コードが出来上がったらhtmlファイル内、もしくはブログの記事本文に記述してアップすればOK。


応用編:複数画像がランダムに表示されるようにする

削ると出てくる画像を複数用意すれば、おみくじ等も作れますね。
試しにおみくじ作ってみました。
(引き直したい場合はページ更新 icon-repeat してください)


コードはこんな感じ。
<!– –> の部分は説明コメントです。記述する際に削除して構いません。
それぞれ、マークを付けてあるところを間違えないように書き直してください。

※1~4行目のファイル呼び出しは、同じページに複数のスクリプトを
設置するのであれば繰り返し記述する必要はありません。
例えばこの記事だと、一番上にスクラッチ、二番目におみくじが設置してあるので、
一番上のコードにのみファイル呼び出しを記述し、
おみくじのコードには記述していません。
重複して記述すると、上手く動作しなくなるかと思うのでご注意を。

※マウスを動かして削れる部分は、画像がちょっと大きめなのに合わせて
ささっと削れるように【size:100】にしてあります。
この数値は画像の大きさ等に合わせて調節してください。


ポイント:マウス画像は背景透過で

マウスポインタ用の画像には背景透過の画像を使うのがオススメです。
背景透過とは、絵の部分のみが描かれ、それ以外は背景が透けて見えるようになっている状態。

例えばこちらは背景透過の画像。
透過画像の例1
透過なので、前面や背面に他の画像を自然に重ね合わせることができます。
透過画像の例2
こちらは透過ではない普通の画像。
透過でない画像の例1
他の画像と組み合わせにくくなりますね。
透過でない画像の例2

今回スクラッチで使った硬貨の画像も背景透過の画像なので、
こんな感じで真ん中が透けて見えてよりリアルな感じになります。
硬貨・背景透過

ちなみに硬貨などの画像はイラストACのイラストレーターさんのものをお借りしています。
無料でイラストダウンロードできるのでおすすめ。
背景透過の画像(AI or EPSの形式の画像)は無料会員だと1日に1つまでダウンロード可能です。
詳しくはこちら icon-arrow-right 無料画像素材サイト・イラストACの使い方

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket