ElectronでSoundCloudプレイヤー開発

アプリ開発とはいえないぐらいショボいのですが、デスクトップPC/Mac向けアプリ開発で、Electronが流行っているため、少し試してみました。

SoundCloudを再生するアプリ

Firefoxなどのブラウザで音楽を再生できるSoundCloudというサービスがありまして、UIが優れていて操作しやすく、音楽もストリーミングでいろんなものが聞けるので、昔から使っていました。

ですが、ブラウザ上でいろんなタブを開いていると、メモリ消費が多くなりすぎるので、ブラウザを再起動することが多いのですが、そうするとSoundCloudも落ちてしまうので、別アプリとして起動したいと考えていました。

いくつかのMac用SoundCloudアプリを試しましたが、いずれも安定せず、曲が再生できなかったり、途中で止まったりと、使えるものがない状況でした。推測ですが、SoundCloud APIを使って、がんばって独自のUIでアプリ開発されたものと思いますが、逆にそれが安定しない理由なのではと考え、思い切って、「ただのPC版SoundCloudを表示して再生するだけのアプリ」を作りました。

SoundCloudのUIが、すでに音楽プレイヤー風になっていることや、ほとんどの画面が非同期遷移で作られていることから、アプリとしてPC版を表示するだけでも、アプリっぽい感じになりました。当然ですが、非常に安定しています。

アプリのイメージ

Dock(下のメニューバー)の「青い音符つき雲」アプリをクリックすると、起動します。

アイコンは、Webalysさん作成の雲アイコンを使わせていただきました。

アプリのソース

こちらに格納しました。

Simply Listen to SoundCloud – GitHub

Electronの仕様が把握できれば、すぐに作れます。ものすごい簡単でした。
いろいろと踏み込んで開発する場合は、HTML、CSS、JSの知識がメインで必要になってきまして、そこからElectronの仕様やAPIを調べて開発する感じになるかと思います。

このアプリは、Electron知識が0の状態から調べていき、環境準備、プログラミング(PC版読み込むだけなので、ほとんど何もしてませんが)、アイコン調整やリリースファイル(Macのappファイル)、GitHubアップなど、全て込みで3〜4時間程度で作りました。リリースファイルの作成にハマってしまい、これで1時間ぐらいは使いました。

参考サイト

以下の2サイトが非常にわかりやすいです。