🎧

[初リリース]YouTubeの複数曲mix動画をSpotifyプレイリストに変換するアプリ！

2021/03/14に公開

iOS

こんにちは！趣味でエンジニアリングをしているcanalunです。こちらが自己紹介です！

去年の12月頃から初めてのiOSアプリ開発に取り組み、紆余曲折を経てなんとかYouTube-Spotify連携型プレイリスト作成アプリを完成・リリースさせることができました！
[2021年4月16日追記: Apple Musicにも対応させました！！以下ではApple Music対応で追加された機能を追記しております。]
せっかくなので、作成の経緯や苦労したポイントを自分なりにここに書き残してみようかと思います！

なお、アプリストアへのリンクはこちらです😊
mixed!

どんなアプリなのか？？

YouTubeには複数の曲を1つのクリップにまとめた"mix"と呼ばれるタイプの動画が多く存在します。hiphopやlofiと呼ばれるジャンルの音楽が好きな方は、きっとよくご存知ですよね👶

例えばこのような動画です。

今回作成したアプリは、こういった動画をSpotify上のプレイリストに変換するものです！
具体的には、下記のような操作およびUIで動きます。

Spotify/Apple Musicでログイン
好きなmix動画のURLを入力し、プレイリスト作成を開始
プレイリスト作成の成功/失敗を通知(成功の場合はSpotify/Apple Musicプレイリスト画面への遷移機能も提供)

なぜ作ろうと思ったのか？？

私はlofiやhiphopが好きなのですが、特にこれらのジャンルはYouTube上にmix動画が多くあげられており、よく再生しています。
ただ、いつも再生しながらmixの曲順や構成を編集したいなあとかバックグラウンドで再生したいなあと思うことがよくありました。(YouTubeプレミアムには入っていないんですわ)
そこである日、「こういうのってもしかしたら動画を音楽プラットフォームのプレイリストに変換できれば解決するのでは？？」と考え、アプリ開発を始めてみました！
幸い、いちおう調べた範囲で同じようなアプリはありませんでした😊

使ってくれる人はいるだろうか？？

[2021年4月16日追記: このセクションはアプリリリース当初、Spotifyのみに対応している頃に書いたものです！]
結論としては「lofiやhiphopのような音楽を好むようなわりかし音楽が好きな人たちを中心に、需要自体はそれなりにあるのではないか」と考えました。
下記のような考え方をしましたが、自分の感覚で推測したに過ぎないので実際にはあまり当たっていない可能性もあるなと考えています😂

めちゃ単純に"lofi mix"でGoogle検索すれば52,800,000本、"hiphop mix"でGoogle検索すれば12,100,000本の動画が見つかります。動画の多さを需要の大きさであると単純解釈すれば、lofiやhiphopのmixってそんな少ないわけではなくて、そこそこ多くの人に再生されているんだろうなと考えられます。

すなわち、今回のアプリを使ってくれる人が満たしているべき最低条件である「mix動画を好んでよく聴いている人」というのはまあまあいることになります(たぶんだけど)。
問題はこの人たちが下記2点を満たすかです。

Spotifyを使っているのか
mix動画をプレイリストにしたいと思っているか

1「Spotifyを使っているのか」については、十中八九Yesかと考えました。
lofiもhiphopも日常生活で話題に出ると、よく聴く人とあまり聴かない人に二分されるイメージがあります。lofiって言った時、たいてい反応は「lofiって何？」or「lofiいいよね！」です。肌感覚としては、そういう感じです。
そしてlofiなんていうジャンルを知っている人はけっこう音楽が好きなタイプですので、たいていはサブスクリプションサービスに登録していて、結構マニアックでかっこいい曲を知っています。
問題はSpotifyを使っているのかということになりますが、これについてはサブスクリプションの双璧をなすApple Musicとのユーザー数比較から、Spotifyにフォーカスしてもよいのではと思わされます。
2.5億人利用のSpotifyが見せつけるApple Musicとの「差」

Spotifyは2019年第3四半期の決算報告書を公開し、月間アクティブユーザー（MAU）の合計が2億4800万人に達したことを明らかにした...Appleは今年6月に同社が運営する音楽ストリーミングサービス「Apple Music」のユーザー数を6000万人と発表した。現段階では多少の増加をしていることは想定されるが、それでもSpotifyが世界的に多くのシェアを占めている状況に変わりない。

ただ、今回はiOSアプリを作るというわけで、iPhoneを使っている人はけっこうApple Musicなんじゃないのというのは考慮すべきでした……実際、友人たちと話しながら最近そんな気がしてきています🥺
ss
2「mix動画をプレイリストにしたいと思っているか」については、まあ多分そうなんじゃないのという感じです。
アプリを作ろうと思ったきっかけにも書きましたが、mixの曲順や構成を編集したいなあとかバックグラウンドで再生したいなあという思いはlofiやhiphopのmixを聴いているような人も多く抱えている気持ちだろうと推測できます。
まず編集モチベーションは、先程も述べたlofiやhiphopを聴いている人たちって結構マニアックだというところから、気に入ったプレイリストに曲の追加なんかをしたいということは十分にありうるかと考えました。
また、lofiやhiphopのmixは特に「作業用」という位置づけで動画が作られていることが多いことから、バックグラウンド再生の需要は相当あるのではと推測しました。パソコンの作業中であればYouTubeで事足りますが、電車の移動中や勉強中のバックグラウンド再生に十分に需要がありえます。

以上より、lofiやhiphopに限ってもそれなりにいるのではないかと推測し、また実際にはmix動画は他音楽ジャンルにも多くあるので、必ずしも小さいとは言えないアンメットニーズが存在しうると考えました。(いちおう調べた範囲で同じようなアプリはありませんでした！よかった……)

技術的に苦労または工夫したポイント

ここからは技術的に苦労や工夫をしたポイントについて軽く触れていきたいと思います。
これらのポイントについては個別に深堀りした記事を今後作るつもり満々です。一旦、ここでは簡単に自分にとっての現段階での要点をおさえるに留めさせてください！
なお、今回は初めてのiOSアプリ開発ということもあり、4ヶ月前には「Storyboardsってなんや……」とか「API……アピ？？」とか言っていました。そんな人間にとっての「要点」だということを心に留めておいていただけますと幸いです！
……要は、間違っているかもしれませんよということです！もし何かお気づきになったことやアドバイスがあったら、コメントいただけますと幸いです👶

動画に用いられている曲情報の取得

動画そのものから曲の情報を取得するのは厳しかったので、概要欄から攻めることにしました。
競プロでの経験が活きて、簡単なアルゴリズムではありますが時間をかけずに作成できました！

たいていのmix動画は概要欄に曲の情報が記載されており、その多くは下記のような作りになっています。これはあくまでも私の経験則です！

[曲の情報以外のこと]
XX:XX(再生時間) XX(曲名) [区切り文字(/や;や空白)] XX(アーティスト名)
XX:XX(再生時間) XX(曲名) [区切り文字(/や;や空白)] XX(アーティスト名)
……(繰り返し)
[曲の情報以外のこと]

ことが少し複雑化する要因は再生時間や曲名の記載順が動画によって前後することです。
例えば先ほど上で貼った動画の概要欄はこうなっています。

IV△７ - III7 - VIm7 - Vm7 - I7 とか
Track List
01 スチャダラパー × Nice & Smooth / 今夜はBoogie Down Bronx (original mix) 0:00
02 Yogee New Waves / CLIMAX NIGHT 0:19
03 宇宙ネコ子 / Night Cruising Love (with 入江陽 & lulu & Enjoy Music Club) 2:28
……
30 TOCCHI / これだけで十分なのに 39:24
#CITYPOP #HIPHOP
#MIX
#JAPANESECITYPOP #JAPANESEHIPHOP
#シティポップ #日本語ラップ
当動画で表示される広告は楽曲の使用許可に基づくものであり、動画制作者は管理できません。また、全ての広告収入は著作権者並びに各アーティストの方々に支払われます。ご理解のほど宜しくお願い致します。

そこで、今回はこういった概要欄をAPIで取得した上で、以下の手順でプレイリストを作成しています。

:が入っている行のみ抽出
抽出した各行に対して、数字と記号を除去する操作を実行
"feat."など、Spotify検索時にノイズとなってしまう特定種類の文字列を除去
各行を検索にかけ、検索結果トップの曲をプレイリストに追加

ただ当然、現段階ではこれで対応できない動画も多くあります。

:が入っていない動画
時間の表記をXX'XX"としている動画もあります。これは今後、対応が簡単です！
[2021年4月16日追記: いまではこちらには対応させられました！]
時間が書いていない動画
これは相当厄介です。ただのテキストから曲名とアーティスト名だけを抜き出す方法は現段階では思いついていません。連続する単語列を片っ端からSpotify検索にかけてもいいのですが、最適列幅の特定やノイズとして入り込む無関係曲の除去をどうすればいいのでしょうか
概要欄に何も書いていない動画
これが一番きついです。しかもまあまあこういう動画もあります。「今後実装したいこと」で述べるmusic recognitionとの連携が必須になるでしょう

このアルゴリズム部分が当該アプリのクオリティを80%決定する気がするので今後改善していかなければならないなと思っています……！

クロージャーを用いた通信待ち

API通信を主として、外部との通信を行うアプリの制作においては、通信した結果に得られたデータを用いてこの処理がしたい！という瞬間が必ず存在すると考えています。
この時、普通にプログラムを書いてしまうと、通信を実施するのに必要な時間が考慮されないまま、通信している間にプログラムが実行されていってしまい、サーバーからデータが得られたときにはプログラムが終わっているなんていうことがあります。というか、めちゃありました。
そこで、SwiftのClosuresと呼ばれる関数を用いてこれを解決します。Closuresには様々な説明の仕方があるようですが、今は一旦処理対象の値が確定してから処理を実行するタイプの関数であると理解しています。
そうです、通信して取得したデータに行いたい処理はClosuresの形で書けば、対象であるデータが確定(=取得)されるまでは待っていてくれるようになるのです！初めはClosuresってややこしそうだな、使うのやめとことか思っていましたが、こういった用途を学んだときはとても感動しました。

ライフサイクルを把握した上での実装

いっとき、Viewに配置したボタンがどうがんばってもズレる。いくらコードを見直しても設定値は全く間違っていないという自体に心を折られました。
結局の所、Viewのライフサイクルを理解せず、画面のレイアウトが決定される段階以前の部分で座標計算をしようとしていたことが原因でした。
また、UI実装にとどまらず、GitHubで見つけたライブラリを使用した際にも、iOSのバージョンアップによるライフサイクルチェンジに対応させることが必要でした。
このときも、なぜか全然動かないライブラリを前に途方にくれた記憶があります。デバッグの手段をprint()を配置することしか知らない私は、とりあえずあらゆる部分にprintを配置し、2時間ほど溶かしたあとにAppDelegateの関数が呼び出されていないことに気づいた次第です。デバッグの方法は今後勉強していきたいです。どなたかよい文献をご存知でしたら教えて下さい泣

SegueとPresentの使い分け

遷移の仕方や値渡しの仕方が異なる2つの画面遷移方法、SegueとPresentをどう使い分ければよいかを考えました。
他論点と同様に詳細は別記事にまわしますが、今回は異なるView間での値渡しが、クロージャーを用いていたとしても容易なPresentを主軸に実装を行いました。

ユーザーの動きを想定したUI設計

今回アプリのUI設計は、とても親しいUIデザイナーの方に手伝ってもらいました。私のイメージしていた第一案は、そうとうbrush upされました。なんならもともと、アイコンはipadで作った手書きのニコニコマークでいくつもりでした。正気じゃないです。
この過程は相当勉強になりました。本当にありがとうございます泣
ここはまだ言語化できていない学びが多く、あとでまた記事にしていきたいと思います！！！

どう広めるか

アプリを作ったはいいものの、使う可能性のある人にどう届けるかが課題です。
広告を打つとかそんなことをするようなアレではないので、今回は一旦Redditといった海外のものも含めたオンラインコミュニティ上で、適当な場所を見つけ、リンクと共に紹介文を投稿するやり方を取りました。
せっかく音楽関連であれば言語の垣根を越えようと思い、積極的に英語での使用を意識して作成しました！
他の方たちはどのような広め方をしているのか、もう少し今後勉強していきたいと思っています👶

今後実装したいこと

今後実装したいことはいまのところ下記の通りです。

アルゴリズムの向上

先程も述べたアルゴリズムを採用していることから、実際にプレイリストを作成できる動画はかなり限られます。今後のaspirationとして、music recognition技術を連携することで「動画で使用されている音楽をplaylistにするアプリ」を実現できたら面白いなと考えています。
ShazamやSound Houndに代表されるmusic recognition技術はAPIがかなり限られており、いまのところの第一候補はAudDです。まさかの無料です(たぶん)。
もし実現すれば、mix動画だけでなく、例えばファッションショーのBGMをプレイリスト化する、気になる映像作品のBGMを特定するといった幅広い用途が拓かれていきます。
なんとかしてYouTube動画の音声を抽出できればチャンスは十分あると考えていますが、調べてみた範囲ではYouTubeの規約では動画のDLは禁止されており、なんとかできないのかなあと検討しています。

ユーザー登録とレコメンド機能

これはもうおなじみですが、ユーザー登録できるようにしてレコメンドができるようにしてみたいです。
これは本当にシンプルなミドルウェアから、所有IPを伴ったミドルウェアへの価値向上という意味でも重要かと考えていますし、DBとサーバー連携の実装を勉強する意味でもかなりいい題材かもなと考えています。

変換履歴の蓄積

ユーザーの変換を履歴として蓄積するのも下記の効果をもたらす意味で有効かと思っています。

キャッシュの利用によるプレイリスト作成の高速化
これは特に、先ほど書いたようなmusic recognitionの実装を通じてアプリの処理が重くなってきたらクリティカルになるでしょう。計算量を線形から定数にできる(はずですよね流石に？？)ので、大事です。
ランキングの作成
動画の変換される回数ランキングが作れるようになります。面白いかどうかはわかりませんが、「ユーザー登録とレコメンド機能」でも述べた意味をこれも同様に持つでしょう。

以上が初めて作ったiOSアプリの解説記事です！長く書いて疲れてしまいました😫
こんな長文で書いて誰か読んでくれるのかな……もしここまで読んでいただいた方がいたら、本当にありがとうございました！！😊😊