Zenn
💤

個人開発で使用した技術の話 vol.1【希望の睡眠】

2021/07/16に公開
Electron
JavaScript
Node.js
npm
idea

今回は2021年06月20日に行われた「技育CAMP vol.4 無駄開発をしよう！」に参加した際に見たアイデア視点での振り返りです。
技術視点での振り返りは「【技育CAMP参戦記録 - 無駄開発編】希望の睡眠【アイデア/振り返り編】」をご覧ください。

簡単に自己紹介とそもそもどんなものを作ったのかの話

3項目でまとめる自己紹介

  • 19才の大学2年です。
  • おそらく、ボクの自己紹介は文章でまとめるよりもTwitterを見た方が早い気がするのでそちらを見てください。今は大学で衛星打ち上げようかな～、ロボット作ろうかな～、と右往左往しながら毎日過ごしています。
  • Twitterはフォローしておくと過去の経歴だけでなく未来の経歴も見ることができるのでフォローしておいた方がよいです。

3項目でまとめる制作物紹介

  • 希望の睡眠(Desires of Sheep) という名前のWindows/Mac/Linux上で動作するデスクトップアプリケーションを作りました。
  • 寝る時間を設定しておき、その時間になると強制的にPCをシャットダウンしたり、その一時間前から同じく設定しておいたYoutube動画をBGMとして再生し始めます。
  • 今回は深掘りしませんが、Electronをベースにいろいろな物を重ね合わせて作りました。技術選定の理由などは「個人開発で使用した技術の話 vol.1【希望の睡眠】」をご覧ください。

技術選定について

今回は Electron をベースに、 npm で取得した既存の外部パッケージを利用してWindows/Mac/Linux対応のクロスプラットフォームなデスクトップアプリケーションを作成しました。

1. なぜクロスプラットフォームなデスクトップアプリケーションなのか

GitHubのReadme.mdにも書いたのですが、今回の制作動機に「夜中まで作業し続けるエンジニアに対し、作業を半強制的に停止させる」ということを目的に作りました。これはつまり、作業を行っているデバイスに対して直接的に作用するようなプロダクトでなければなりません。PCで作業しているエンジニアが多いと判断したためです。また、エンジニアである関係上、WindowsやMacだけでなくLinuxにも対応させる必要があると考えて、今回はクロスプラットフォームにしました。

2. なぜ Electron なのか

実は、今回プロダクトを制作するにあたりいくつか選択肢を検討して悩んだ部分だったので、ここは少し丁寧に書きます。
結論から言うと、以下の2点が今回の技術選定に大きく関与しました。

  1. クロスプラットフォームに対応している（最低要件）
  2. UIにこだわることができたから

また、あとから知った副次的なメリットで以下のような事も技術選定に影響しています。

  1. 公式の日本語ドキュメントが存在し、情報が充実している。
  2. npm の潤沢なパッケージを利用できる

使用技術候補として挙がった技術

C#(.NET)

元々Windows上で実行するために作られており、最近ではクロスプラットフォームにも対応している（らしい）し、何より、ボクがC#を書き慣れていたこともあって最初に選択肢として挙がりました。
これが不採用になった理由は、クロスプラットフォームにするために書かなければいけないコードが多く、そもそもクロスプラットフォームにすることができるかどうかがいまひとつわからなかったので断念しました。

Python(wxPython)

Pythonであれば pip による豊富なライブラリによって実現が可能であるだろう、ひいてはクロスプラットフォームなウィンドウアプリケーションを作るためのライブラリも一つや二つはあるだろう、という見立てにより次に選択肢に上がりました。
確かに、これは途中まで完成し、実際に内部クロックの一部を完成させました。
これが不採用になった理由は、このクロスプラットフォームなウィンドウアプリケーションを作るためのライブラリではUIを凝ることが困難に思われたためです。
今回、ハッカソンで制作する以上、ある程度UI/UXを求められる中、他はCSSの力を借りた強力なモダンUIを持つプロダクトをプレゼンしているにもかかわらず、一人味気のないUIを持つプロダクトを出すわけにはいかない、と強く意識したからです。

Electronにした理由

前述したように、ボクはUIを強く意識していました。さらに言えば、CSSによるモダンなUIを作成することにこだわった結果、Electronを採用するに至ったということです。内部としては Chrominium であるため、体感としてはサーバーを立てなくていいウェブサービスを作っているくらいの感覚で書くことができました。しかも、 Node.js の恩恵も受けられたため強力なアプリケーションを作ることができました。

工夫した点・苦労した点

音声の再生方法

Electronには音声を再生するための関数がありません。そこで、 音声を再生するためだけの、言い換えればaudioタグだけのHTMLウィンドウ を用意してそこにファイル名を送ることで解決しました。

インストールファイルの作成

多くの人に使ってもらうためにインストーラーを制作するため、今回は electron-builder を使用することにしました。

Discussion