集中線を画像に追加するプラグインを作りました

そうさん（@sou_lab）が書いた記事が超面白かったのでそうさんリスペクトの僕としては僕なりの方法でリスペクトぶりを表現するしかないと思い、この記事を書くに至りましたよ。

AdobeCCの拡張機能はMXPファイルが使えないからCS6で変換した | Sou-Lablog

まぁ記事が面白いというか、記事に表示されている画像が面白いんですね。記事はね、僕よく分かんないの。Photoshopは切り出すためのものな使い方しか普段しないから。

これが面白い画像。ずっとこのノリで紹介してます。まじうけるんですけどー。

jQueryプラグイン作りました

そうさんがこれをどうやって作ったのかは分かりませんが、僕はあいにくPhotoshopで集中線を作る方法は知りません（とか言ってる間にWebcre8の優さん（@glatyou）に作り方を教わったので今度頑張って作ります）し、ブログに掲載するための画像を作る時に毎回Photoshopを開くなど考えられません。めんどくさい。

ちなみに優さんが教えてくれたのは「[Photoshop]極座標フィルタでできるクリエイティブ表現色々 – WEBCRE8.jp」です。

しかしそうさんをリスペクトしてやまない僕は何とかして僕なりのこの「おもしれーじゃねーかちくしょー！！」を表現したくて、「あ、プラグインにすれば良いんだ」に落ち着きました。

集中線を追加するjQueryプラグインをダウンロードする

下に解説書いてるけど、デモも作ってるけど、先に作ってたデモページ

使い方

divの中に画像を入れてもらって、そのdivにクラスを指定します。

<div class="line">
  <img src="tsuyopon01.jpg" alt="デートをすっぽかされて半べそになりかけのつよぽん">
</div>

画像はいつもお世話にになってるPAKUTASO/ぱくたそさんで配布されている、ともだちのつよぽんの画像を使わせてもらいました。イケメン！！

このままだと普通に表示されますね。

最初にプラグインファイルを読み込みます。

<script src="/osukinabasho/booom.js"></script>

次に、クラスを指定してBooomメソッドを記述します。

<script>
$(function(){
  $(".line").Booom();
});
</script>

集中線が追加されます！！

でもこれだと顔に集中しているようにはなってないですね、残念。

オプション

なので、どこにフォーカスを当てるかと、一応画像のディレクトリを自由にしたい場合のオプションをつけてます。

$(ele).Booom({path:"../img/shuchusen.png", width:-80, height: -80});

こんなかんじで、Booom()の中にパラメータを入力します。

• width: 集中線を中心から何px右にずらすか
• height: 集中線を中心から何px下にずらすか
• img: 画像を置いてるディレクトリ（htmlからのパス。デフォルトは /img/）

顔を中心に移動した！！

もしお気に召された場合はどうぞ。というかだれか集中線くれ。

最後に

今回は集中線をつけるプラグインということで、名前は「Booom」としました。アメコミっぽくね？アメコミの効果音な感じですｌハッハー！ジェニーどうしたんだい！元気がないじゃないか！的なノリ。