音源を管理するなんやかんやを作ったお話

2018年もそろそろ終わりということで、今年の春から秋ぐらいまで開発していたサービスの話をまとめようと思います。

 

開発していたのは、クラウド上で音源（音楽ファイル）を管理するためのシステムです。

普通にGoogle DriveやDropboxなどのストレージサービスに音源を置いておくよりは、ユーザフレンドリーに音源にアクセスできるシステムを目指しました。 具体的には、次の画像のようなUIを持ち、ストレージ内の音源を検索・ソートしたりダウンロードできたりするWebページなんかを作りました。

アルバムのジャケットをクリックするとモーダルがポップアップして、トラック単位やアルバム単位でダウンロードすることができます。UIは完全にitunesを意識しています。

ただ、実際にはWebページを作った以上に色々なことをやっていて、以下ではそれについて説明していきます。一応言っておくと、この記事はポエムに属します。

システム構成

音源管理システムの構成は次の図のようになっています。

サーバサイドはAzureで固めていて、音源もAzureのストレージ（Blob Storage）に配置しています。 そして、その音源にアクセスする手段として次の2つを提供しています。

• UWPアプリ（Windowsデスクトップクライアント）
• Webアプリ

この2つについては後述したいと思います。

 

で、このシステム全体の動作は以下のような流れになっています。

1. 音源をAzureのストレージにアップロードする（アップロードには既存のアプリを使用：Azure Storage Explorer）
2. ストレージに音源がアップロードされるとAzure Functionsの関数がトリガされる。関数では音源からメタデータを取り出してSQL Databaseに保存する。ジャケット画像はBlob Storageに保存する。
3. 同時に、取り出したメタ情報をLINE BOTで通知する。メタデータを加工したりLINE Messaging APIを操作したりする処理はAzure Logic Appsに担当させている。ノンコーディングめっちゃ楽。
4. ついでに、SQL Databaseから全件データをJSONデータとして生成しておく。

LINE BOTの通知はこんな感じです。加藤恵さんが教えてくれます。加藤恵と限定的に会話することも可能です。

 

ここまでがアップロードしたときの一連の処理です。ここからはダウンロードするときの話。

• UWPアプリはSQL Databaseにアクセスして音源の一覧を得る。ダウンロードする。
• Webアプリは予め生成したJSONファイルを用いてVue.jsでいい感じに音源の一覧を表示する。ダウンロードする。

ダウンロード時はとくにサーバサイドでやることはないです。改善したいところはたくさんありますが。

 

話は変わりますが、Webアプリをデプロイするときはちょっと一工夫あって、次のような流れになっています。

1. WebアプリのソースコードをGitHubにプッシュする。このWebアプリはDockerの上に乗っている。
2. プッシュされると自動的にDockerのビルドが始まる。ビルドにはACR Buildを使っている。
3. ビルドされたDockerイメージがAzure Container Registoryに登録される。
4. Azure Web Appsがそのイメージをフェッチしてホストする。

このAzure + Docker + GitHubの話は過去の記事にまとめました。 GitHub + Azure Container Registry Build + Azure Web App for Containers でコンテナ化された Web アプリを自動デプロイする

 

という感じのシステムを半年ぐらいの期間、片手間に開発していました。

UWPアプリについて

Windows純正の音楽アプリ（Grooveミュージック）そっくりなUWPを作りました。現行バージョンはデザインが変わったので、いま見比べるとあまり似ていないです。

ソースコードはGitHubで公開しています。 4423/Blob0ngenClient

機能としては、上のGIFでやっていることと、ダウンロード履歴の記録・表示機能を提供しています。Webアプリ版と比較して、まだダウンロードしていない音源を一覧表示できたり、アルバム単位でフォルダを自動作成して一括ダウンロードできたりします。

たいした機能を実装していないのは、開発の動機がFluent Design Systemを実装したUWPアプリを書きたいという気持ちしかなかったからです。めっちゃ満足した。 Fluent Design SystemについてはQiitaにまとめました。Parallaxとかどこかで使ってみたいのだけど、あまり活用できる場面が思いつかないですね。 UWP アプリに Fluent Design System を実装する方法 - Qiita

 

なんというか、UWP/WPF + マルチメディア管理 + ローカルDB + MVVMみたいなアプリをこれまでに3件ぐらい作ってきていたので、いい加減飽きてきたというか伸びがないので一旦距離を置こうみたいな気持ちになりました。 それから紆余曲折を経て、Webアプリ版を開発することにしました。

Webアプリについて

これまでのWebアプリ開発ではASP.NET MVCぐらい（あとは申し訳程度のPHPとRuby）しか触ったことがなかったので、ナウでイケてるフレームワークとか最近のWeb関連技術を新しく習得したいという気持ちがありました。 その結果（？）Vue.jsで書いたSPAをDockerにホストするという構成になりました。Webフロントエンドとインフラを学ぶぜという気持ちです。実際のところ、DBがSQL ServerなのでASP.NET MVCが一番相性が良さそうに思えます。

Vue.jsは素晴らしいですね。検索やソーティングが驚くほど簡単に実装できました。二度と生のjsでDOMを触りたくないという気持ちです。ただ、プロジェクト毎に数百MB消費されるのは厳しいものがあります。webpackとかルーティングまわりとかは何も理解していないので頑張りたいですね。

Dockerは最低限は使えるようになりました。 そういえば、DockerfileもGitで管理しているのですが、Dockerに乗せるWebアプリをGitのサブモジュールとして構成すると、サブモジュール単位でWebアプリを追加・バージョン管理できたりして良いんじゃないかという発見がありました。

あと、WebアプリにはFirebaseでユーザ認証を追加しています。Firebaseみたいに簡単に認証を実装できるやつがAzureにも欲しいですね。

 

Webアプリは色々と改善の余地があると思っていて、例えば以下のようなことを考えています。

• パフォーマンス改善：ページの表示が遅いという問題があります。Webアプリアクセス時に数MBあるJSONデータに直接アクセスする実装やジャケット画像を全部ダウンロードする実装をどうにかしたい。
• アルバム一括ダウンロード機能の追加：現状ではHTML5のdownload属性を使って全曲アクセスすることで実現してはいるのですが、Content-Typeによっては正しくダウンロードできません。音楽配信サイトのように一度zipに圧縮する必要がありそうです。
• Azure使用料金の問題：DockerをWeb Appsでホストするには月3kぐらいのプランでないといけません。ちょっと高い。あと関数の実行にも無駄に時間がかかっている部分がある。

 

Webアプリ以外にも、バックエンドの通知処理とかメタデータ取得処理とか、色々と改善したいところがあるので、実装欲が高まったら取り組みたいですね。ちょっとした実装欲を満たしたり、新しい技術をキャッチアップしたりするための土台があるのはとても良いです。

来年の目標は、Web関連技術に幅広く手を出すことと、Azure学生無料枠を完全に理解することと、.NET Core 3.0であれこれ試すことと、dotnet/wpfにコントリビュートすることです。

良いお年を。