福野泰介の一日一創

「守る環境ハッカソン作品集.csv」に記載されたオープンソース、GitHubへのリンク、「haruyuki-16278/chiritsumo」をたどり、ダウンロードします。

コンソールにてまずはインストール

yarn install

動かなければ、yarnをインストールしましょう。（参考、yarnをインストールする - Qiita）
依存するパッケージをいろいろインストールが始まり、1分ちょっとで終了（依存モジュールはnode_modulesに格納され、388MBストレージを消費！）

続いて、次のコマンドでローカル環境で動かせます。

yarn run start

30秒ほど待って、表示されたURLをブラウザで開くと「ちりつも」が表示！ソースコードを辿りながら、ちょっと変更してみましょう。

おてつだいするとステキな紙吹雪と花火の演出。我々の作品「poipoi.life」にも採用してみました！

「poipoi.life」src on GitHub

ソースコードを辿って見ると、この演出には「canvas-confentti.js」が使われていました。せっかくなので、yarnを使わない軽量開発に対応した「confetti-es」としてESモジュール化。

「confetti-es」

ドキュメントにも記載したように、下記のようなコードをJavaScriptに書くだけで簡単に使えるようになりました！ import { confetti } from "https://code4fukui.github.io/confetti-es/confetti.js"; confetti(); 「ちりつも」の左右からの紙吹雪と花火の演出を移植したデモはこちら「LevelUp - confetti-es」で見えます（ES-Jamで開く）。

poipoi.lifeのソースコードで、blessing.js としてまとめたので、下記コードだけでこの演出が使えます。 import { blessing } from "https://code4fukui.github.io/poipoi/static/blessing.js"; blessing(); みなさんのアプリにもステキな祝福演出、加えてみましょう！

links
- 毎日分別してポイントゲット、poipoi.life プロトタイプ - 守る環境ハッカソン in 鯖江