ウェブアプリでオレオレ音楽プレイヤーをこしらえた

https://pbs.twimg.com/media/BQbl782CQAEf-Ws.png

(https://w8p-app.appspot.com/index.html?platform=ie10 でアクセスできるけど使うなら以下の記述に目を通すことをおすすめします)。

これは何か

以下の機能がある

  • モバイル端末での動作サポート
  • Dropbox内にある音楽ファイルの読み込み
  • 再生・停止・シーク・ボリューム設定

そんなの適当にApp StoreGoogle Playで探せや出てくるがやと皆さんはお思いだろうが、以下のMUST条件があるので無理だった

注意点として自分専用で作ってあるのを公開してるだけなので他の人から見たら以下の制約がある

  • /Music フォルダ決め打ちである
  • 連続再生はしない

/Music フォルダ決め打ちなのは当然俺がそこに全部ツッこんでいるからというだけである。
連続再生は所持する音楽ファイルが以下のシステムで録音しているラジオ番組なので再生時間が数時間に及びものが主であることに由来する。

Radikoを録音したものをPodcast配信してスマートフォンで聴く環境を作った - laiso

ちなみにこれを書いた頃はAndroidユーザーだったし、Google Musicが日本からうまく使えてたのでGoogleの公式アプリを使っていたので不自由はなかった。

制作の経緯

そもそも現状のWindows Phoneしかも8かつ日本人ユーザーとしてはこのMicrosoftの第3(以降)のモバイルアプリプラットフォームは砂漠の真ん中で朽ち果てたプレイヤーの肉を食うようなエコシステムが形成されていてアプリが少なく非常に困っていた

使ったツール

そもそもWindows Phone 8にだけ向ければいいのでWindows Phone 8 SDKC#でネイティブアプリを作ればよかったんだけど。スキルセットとしてWindows Phone 8 開発プラットフォームに詳しくなっても……(がんばっている方すいません)と日和ってきたのでいっちょウェブでがんばるか〜という方向性にした。

Sencha Touch

http://www.sencha.com/products/touch

GPLv3版を使ってる。

Sencha and the GPL v3

UIフレームワークの中でIE10でデモがまともに動くのがSencha Touchしかなかったので神々しくさえ見えて採用してしまった。結構癖があるけど、独自MVCシステムが使ってておもしろいし。Java製のビルドツール含めてよくできてると思った。

HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイドを達人出版社で購入した。

HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド

HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド

New Themes in Sencha Touch 2.2 | Blog | Sencha

丁度最近Windows Phone向けの新テーマが提供されたみたいでそれ使ってる。

Google App Engine

このアプリはサーバーサイドを必要としないんだけど、インストール不要にしたかったのでどこかでホストすることにした。Github Pages, Google Drive, Dropboxの公開ページなどいろいろ候補はあったんだけど、DropboxOAuth認証HTTPSのコールバック先が必要なこと+サーバーサイドもあとから足したくなるかもしれないことを考慮してHerokuかApp Engineかということになったんだけど、いくつか*.heroku.com と *.appspot.com でホストされてる静的サイトの応答速度などを比較してみたところApp Engine のが早い気がしたので決めた。

Python SDKを使っているんだけど前述のとうりサーバーサイドは一切使用せず静的配信してあとはブラウザ上で動かしてる。

dropbox.js

https://github.com/dropbox/dropbox-js

最初DropboxPython SDKを使ってサーバーサイドで認証を実装してたんだけど途中でdropbox.jsを知って、ああサーバーいらんわと思って乗り換えた。このライブラリはhttps://www.dropbox.com/developers/core には載ってないんだけど、公式に開発されてるもので、ブラウザベース、Node.jsによるサーバー、PhoneGap,Chrome拡張などを委任するDriverオブジェクトを切り替えることで使えるようにしていてクールだった。CoffeeScriptで開発されている。

Windows Phone 8 Platform Guide - Apache Cordova API Documentation

Apache Cordova はもうWindows Phone 8 に対応している。ネイティブAPIもアプリのパッケージングもしなかったので未使用。チェックだけした。

ソースコード

GPLv3ライセンスに基く自由なソフトウェアとして以下で公開しています

https://github.com/laiso/w8p

まとめ

山奥で自給自足の生活をしている気分です。