confetti(紙吹雪)アニメーション

dtnディレクトリでは登録サイトのためにクリックランキング、応援ランキングといった機能をつけてありますが、クリック数や応援ポチが多い順にサイトが並んでいるだけのそっけないページだったので、JavaScriptのアニメーションでもつけてみることにしました。

設置するJavaScriptのアニメーションは「ランキング受賞サイト発表!!」とかのサイトによくあるような、金や銀の紙吹雪がひらひら舞い落ちる感じがよさそうなので、紙吹雪みたいなスクリプトを探してみることにしました。

知らなかったですが、紙吹雪は英語で「confetti」というようです。

さっそく「cofetti JavaScript」でぐぐってみると、jsのスクリプトやライブラリが色々見つけることができました。HTML5でcanvas要素が追加されたあたりで、紙吹雪のスクリプト作成が流行っていたのかもしれないです。

とりあえず日本語ブログで紹介されていたJavaScriptライブラリの「Canvas Confetti」を試してみることにしました。

canvas-confettiライブラリ

下のボタンを押すと紙吹雪がポンとでます。

Canvas Confetti」JavaScriptライブラリを使うと、こんなアニメーションが簡単にできてしまいました。あまりの簡単さにビックリです。

canvas-confettiライブラリの使い方

Node.jsがあればnmpでライブラリのインストールが可能ですので、npm installで「canvas-confetti」ライブラリが追加できます。

npm install --save canvas-confetti

そんなことをしなくても、CDNでライブラリが配信されているので、面倒な場合はこのコードを追加するだけで準備完了です。

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2/dist/confetti.browser.min.js"></script>

上のボタンにつけたシンプルな「紙吹雪発射!!」をする場合には、下記のコードを書くだけで実現できてしまいます。

confetti({
  particleCount: 100,
  spread: 70,
  origin: { y: 0.6 }
});

他にも「canvas-confetti」のコードサンプルページをみると、色々な紙吹雪噴射パターンが紹介されているので、使いたいものをコピペすれば簡単に動かすことができます。

WordPressの記事の中で使うには

JavaScriptをWordPressに読み込ませるには、テンプレートのfunctions.phpやheader.phpに設定するとかの流れになりますが、この投稿のように、1記事内でとりあえず動かす程度であれば「カスタムHTML」に直接スクリプトを書けば動かすことができました

上に設置したボタンも「カスタムHTML」に置いたスクリプトで動かしています。特定の記事だけに使うスクリプトであればこれで十分ですね。

WordPressの記事でスクリプトを実行させるには「カスタムHTML」で設定

WordPressの記事に設置したボタンと紐付けてスクリプトを動かす場合には、ボタンに適当なIDをつけてあげて、IDのonclick()でキックさせるとかにすればOKです。

実際に設置したコードサンプル

この記事では下のようなコードを「カスタムHTML」に設定してあります。

//CDNの読み込み
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2/dist/confetti.browser.min.js"></script>

//クリックで紙吹雪噴射!
<script>
	window.onload = function(){
		//confetti-btnをクリックすると発火
		document.getElementById("confetti-btn").onclick = function() {
    	confetti({
				particleCount: 100,
				spread: 70,
				origin: { y: 0.6 }
			});
		};
	};
</script>

設置したスクリプトがしっかりDOMレンダリング後に動いてくれるように、念のため、window.onload()を付けてonclickを取っておきました。設置したボタンの方には「confetti-btn」というID名をつけてあります。

花火っぽい紙吹雪をランキングページに設置

簡単に紙吹雪が実現できることが分かったので、dtn.jpのランキングページに「Canvas Confetti」のサンプルに置かれていた「Fireworks」というサンプルを設置してみました。花火のように紙吹雪がランダムにパンパンでてくるやつです。

下のボタン押すと「Fireworks」のデモができます。パンパン紙吹雪が噴出します。

噴射型の紙吹雪だと微妙

ページを開いたときに花火がパンパンするようにonload()のタイミングで「Canvas Confetti」を動かしてみたところ、無事にきれいな紙吹雪をパンパン噴出させることができました。

が、華々しくはなったものの、元々設置したかったものは金や銀の紙吹雪がひらひら舞い落ちる穏やかなイメージだったので、イメージとは逆のかなり騒がしい印象のページになってしまいました。

それと、ランキングページもレスポンシブにはなっているので、スマホでこれを見たらうっとおしい感じになっていたので、もう一度別のサンプルを探してみることにしました。

みかづきブログさんの紙吹雪スクリプト

探して見つけたのが、「みかづきブログ」さんが公開していたJavaScriptの紙吹雪でした。「canvas-confetti」ライブラリにも「snow」という雪が降るようなサンプルが置いてありましたが、こちらはきちんと紙吹雪がくるくる回転しつつ落ちてくれるので、まさにイメージ通りという感じでした。

ランキングページに設置

再度dtn.jpの各ランキングページに設置をしてみたところ、ちょうどいい感じに収まってくれました。スマホで見てもいい感じです。

他にもまだまだありました

confetti.js

MITライセンスで配布されていた「Confetti Falling Animation In Pure JavaScript – confetti.js」も、紙吹雪の動き方がよりリアルになっていていい感じです。時間があれば、こちらもそのうち試してみたいと思いました。

紙吹雪の動きがかなりリアルです

おわりに

アニメーションを入れたことで、ランキングページも多少にぎやかしくすることができました。PCで見るともう少し紙吹雪のサイズを大きくしても良いかとは思いましたが、スマホでみるとこのくらいがちょうど良い感じなので、ひとまずこれで様子見したいと思います。

同じように紙吹雪アニメーションをお探しの方はぜひ参考にしてみて下さい。

追記:

噴射型の紙吹雪アニメーションを「2020年 年間Twitterトレンドランキング」のページに設置をしてみました。ご利用を考えている方は参考にしてみて下さい。

PHPが学べるおすすめプログラミングスクール

この運営ブログをみて、もしdtn.jp管理人のようにサイトをゼロから作ってみたいという思いに駆られた方は、サイト開発やプログラミングをオンラインで受講できるプログラミングスクールの活用をしてみてはいかがでしょうか。サーバ/WordPress/HTML/CSS/JS/PHP/SQLなどの基本さえ分かれば、ゼロからサイト立ち上げもポンポンできるようになって、今なら仕事や転職にも役立つのでオススメです。

PHPも学べるオンラインスクール

  • CodeCampAWS Cloud9を使ったクラウド上のIDEが用意されているので、ネットにつながればスタート開始可能というゴージャスなスクールです。講師も選べて、Webマスターコースならプログラミング経験0でも一気にフロントエンドからバックエンドまでマスターできます。
  • ウェブカツJava言語やRuby言語なんぞ教えん!という、初心者にありがちな挫折ポイントがよく分かってるスクールです。フロントエンドエンジニアに必要なスキルセット&PHPがマスターできます。
  • フリークス HTML/CSSから始まり、MySQLやLinuxからPHPの変数や分岐やループ、クラスやPDOに最後はMVCまで教えてくれるので、そこまで分かればなんでもできそうです。メンターに質問もし放題がいいですね。
  • テックアカデミー法人のIT研修もやってる業界最大手・受講者数No.1のスクールです。メンターとの定期オンライン面談やチャットサポートなどもあり、大手ならではインフラ環境がウリです。PHPと合わせてjQueryもマスターできる、PHP/Laravelとフロントエンドコースがおすすめです。

オンラインスクールのデメリット

孤独になりがちなサイト制作も、優しいメンターがそばにいてくれれば凄い楽しそうですが、もちろんデメリットもあります。お金がかかるという点です。ひたすらググって、本を読んでよりは確実にコストがかかってしまいます。とはいえ、多少の余裕があるなら、こんなご時世なので時間と労力を買った方が良いと思います。