【情緒的なITお遊び】Electronで画面に桜の花びらを降らせてみた！

こんにちは。

本日はElectronを使って、画面に桜吹雪を降らせてみたいと思います。

やはり視覚から入る技術は、直感的な分最初のインパクトがありますよね！

私はサーバーサイドの技術も大好きですが、見た目(UI)も非常に大事だと思っております。

さて、話をElectronに戻しまして、桜吹雪を降らせる前にElectronを一文で説明しておきたいと思います。

Electronとは、HTMLやCSS・JavaScriptを使うことで、デスクトップアプリを作れるフレームワークです。

この威力は凄まじいと最初に触ったときに感動しました！

まだElectron触ってないよって方は、以下の記事も参考にしてみてください。(後ほどの手順でも使用します。)

【Electron入門】Electronでデスクトップアプリをサクッと作ってみる

2018.11.17

それでは早速作っていきましょう！

Electronで桜を降らせるまでにやる手順

手順1. Electronを導入する

導入に関しましては、上で挙げた記事の「Electronをインストールする手順」まで全く同じ内容なので、ご参照ください。

それが終わりますと、Electronを使う準備まで完了となります。

手順2. 桜の花びらをセットする

手順2では、桜吹雪として降らせたい桜の花びらの画像をネットから探してきます。

インターネットのマナーは守りつつ探してきます。

お目当ての桜の花びらを見つけてきたら、それを手順1で作成した Electron/ ディレクトリ以下に配置します。

手順3. index.jsを作成する

さて次は、アプリケーションのエントリーポイントの作成です。こちらも、Electron/ディレクトリ配下にindex.jsというファイルを作成します。

内容は以下のコードのようにします。

index.jsファイル作成、終わりましたでしょうか？

今回は、透明でウィンドウ全体に桜吹雪を降らせたいので、以下のような処理を入れました。

• 背景を透過する処理
• マウスを無効化して、Electronに対するクリックなどを出来ないようにする処理

手順4. index.htmlを作成する

手順4では、いよいよ桜吹雪を降らせるHTMLとJavaScriptの処理です。

またもElectron/配下にindex.htmlと言う名前でファイルを作成します。

中身は以下のコードです。

このコードは、基本的にはcanvasに対して描画を有効にした形で、描画内容をjsで操作しています。

手順5. 桜吹雪を降らせてみよう

さてここまで、うまいこと滞りなくたどり着けたら、いよいよ桜吹雪を降らせてみましょう。

npm startというコマンドをターミナルでElectron/配下で実行します。

以下のような画面になったら成功です。お疲れさまでした！

↓画面がマウス無効化されているので、vscodeの上でも桜吹雪が振ります。綺麗…

まとめ

本日は、Electronを使って桜吹雪を降らせてみました。いかがだったでしょうか。

やはり桜はいいですよね。日本の心ですよね！^ ^

それをこんなに簡単に実装できてしまうなんて、すごい技術ですよね。

非常に情緒的なITお遊び・Electronの勉強でした。

ここまで読んでいただき、ありがとうございました！