なぜにそれをしたかったか
自宅の音楽サーバーとして稼働しているSubsonicサーバーに接続するためのMac用のアプリケーションにろくなものがなかったため。
まったく音楽が聞けないわけではなかった
いくつか試してみて気に入らなかったのは
- Subsonicは曲の管理が基本はフォルダ管理なのだが、アプリによってはそうではなくアーティストとかアルバムでしかアクセスできない
- そもそも安定して自宅サーバーと接続して曲を再生・コントロールすることができない(次の曲を選ぶと、今の曲とさらに次の曲が再生されたりしていた)
- Chromeアプリだったりするので、アプリを起動するとChromeも起動してしまう
- Subsonicサーバー側で動作するUIが使いにくい
一番好みのUIをしているのが、Jamstash
- Chromeアプリもしくはhtml5アプリとして動作可能
- しかしsafariでアクセスすると動作しない
Electronでネイティブアプリ化
Chromeと同じエンジンを持つElectronでJamstashをネイティブアプリ化してしまえば問題なく、しかもChromeに依存せずに動作できるはず
Electron化するためにWebアプリをwrapしてネイティブアプリ化できるパッケージがある
どこかで情報を得て持っていたので、試してみる
(http://www.softantenna.com/wp/software/nativefier/ こちらで見て、いつかやってみたいと思ってた)
Nativefierのサイト
https://github.com/jiahaog/nativefier
※以下は、Macでbrewを導入済みで、さらにnode.js並びにnpmが使用可能の環境であること。
$ npm install -g nativefier
$ brew install imagemagick
デフォルトではアイコンがElectronアイコンになってしまうため、あらかじめSubsonicのアイコンをダウンロード
http://www.easyicon.net/language.en/1091763-subsonic_icon.html
から ICNS Download
ダウンロードしてicnsファイルを
- ホームディレクトリに移動
- ファイル名をsubsonic.icnsに変更
Nativefierコマンドを実行
Mac向けアプリの出力
特にオプションを指定しない場合は実行環境に合わせたアプリが出力される
$ nativefier --name "Subsonic" "jamstash.com" --badge --icon=subsonic.icns
- —name でアプリケーション名を指定
- 次にアプリ化したいURLを指定
- —badgeで通知表示を可能にする
- —iconで取得済みのアイコンファイルを指定する
Windows向けアプリの出力の場合
$ nativefier --name "Subsonic" "jamstash.com --platform "win32" --badge --icon=subsonic.png
- —platform “win32”をつける
- アイコンファイルとしてpng画像を指定する
プラットフォーム指定の出力について
- —platform “win32” → Windows向け
- —platform “darwin” →Mac向け
- —platform “linux” → Linux向け
ホームディレクトリにアプリが作成される
/users/username/Subsonic-darwin-x64
後は起動して、設定で自宅のサーバー情報を入力すれば使用可能となる
思ったこと、今後やってみたいこと
- 使用するためにアプリの作成元を参照して作るのではなくgithubからソースをダウンロードしてそれを使用してアプリ化することはできないかと思ったけど、このElectronでネイティブアプリ化は結局ブラウザでアクセスしているのをラップしているだけなので、意味ないか。完全にネイティブアプリ化するのなら、nativefierを使用するのではなくJamstashのソースからElectronでネイティブアプリ化することを考える必要がある
- Electronの優れているところ、buildしたときのElectronのバージョンを指定できるので、あるブラウザのバージョンを固定でWebアプリケーションを動作し続ける環境ができること(ブラウザ依存で考えることが大幅に減る)
- アドレスバー、ナビゲーションボタンなどのWebブラウザ的部分がないことからユーザーに余計なことをさせない制限されたWebアプリを提供することが可能(でも、メニューから進む戻るが操作できてしまう?)
0 件のコメント:
コメントを投稿