iOSDC2022-ShazamKitの遊び方

Transcript

1. ShazamKitの遊び方 Naoyuki Murata
2. 2 自己紹介 Naoyuki Murata • SPACEMARKET 2022/02 ~ モバイルエンジニア: iOS/Android/Flutter
3. 3 SPACEMARKETについて あらゆるスペースを簡単に貸し借りできるサービス 「スペースマーケット」の開発/運営 事業内容 MISSION スペースシェアをあたりまえに ”スペースシェアをあたりまえの選択肢にすることで 人々の発想を広げ、多様なチャレンジを生み出し、世 の中を面白くしたいと考えています ” https://spacemarket.co.jp/about/
4. 4 SPACEMARKETについて ゲスト向けサービス スペースを借りたい人 ホスト向けサービス スペースを貸し出したい人 ゲスト/ホストに向けたサービス(WEB/アプリ)を運営しています iOS/Androidネイティブ Flutter
5. 5 アジェンダ • Shazam/ShazamKitの概要 • ShazamKitメイン機能紹介 ◦ Shazamカタログ認識 ◦ カスタムカタログ認識 • サンプル実装 ◦ Shazamカタログ認識サンプル実装 ◦ カスタムカタログ認識サンプル実装 • SPACEMARKTアプリへ機能追加
6. 6 Shazam/ShazamKitの概要
7. 7 Shazamとは 流れている楽曲情報を調べることができる音楽検索アプリ 引用: https://www.shazam.com/ja/home iOS/Android Web 検索結果 検索中 ボタン押下で検索開始 引用: Shazamアプリ
8. 8 Shazamの歴史 2002 携帯電話サービス「2580」リリース 1999 Shazam Entertainment 設立 2008 Shazamアプリ AppStore リリース 2017 2018 Apple買収発表 買収 2021 WWDC 2021 ShazamKit発表 🎉
9. 9 ShazamKitとは Shazamの音声認識機能を組み込む事ができるフレームワーク Shazamカタログ認識 カスタムカタログ認識 Shazamライブラリ管理 楽曲認識機能(Shazam同様の機能) 任意の音声に対して認識を行う機能 楽曲の検索結果をShazamアプリのライブラリへ追加する機能
10. 10 ShazamKitメイン機能紹介
11. 11 Shazamカタログ認識
12. 12 Shazamカタログ認識 概要 楽曲認識機能(Shazam同様の機能)を導入 App 楽曲情報 ・曲名 ・アーティスト名 ・ジャケット画像 etc.. 🎶 Shazam表面 1 2 3 4 裏側 取得した音声からシグネチャを生成 シグネチャをサーバーへ送信 Shazamカタログから一致する曲を検索 サーバーから楽曲情報をアプリへ返す 検索結果 音声取得
13. 13 App 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する曲を検索 4. サーバーから楽曲情報をアプリへ返す 音声取得 Signature 生成 音声をlossy圧縮(非可逆圧縮)したデジタルフィンガープリント ”データサイズが小さく、少なくとも元の音声データの1/10以下” ”元の音声を復元することは出来ないため、安全性とプライバシーが保たれる” Shazamカタログ認識 認識の仕組み 🎶
14. 14 サーバー App 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する曲を検索 4. サーバーから楽曲情報をアプリへ返す Signature 送信 Signature Shazamカタログ認識 認識の仕組み
15. 15 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する 楽曲を検索 4. サーバーから楽曲情報をアプリへ返す サーバー Shazam カタログ (楽曲DB) Signature シグネチャのコレクション (楽曲から生成されたSignatureの集合) Signature Signature Signature Signature Signature Signature Signature Signature Signature Signature Signature Signature Shazamカタログ認識 認識の仕組み Signature Metadata
 
 
 ・曲名
 ・アーティスト名 
 ・ジャケット画像URL
 etc.. 
 

16. 16 Signature Reference Signature Signature Mr.children しるし Query Signature Shazamカタログが持つ、 楽曲から生成されたシグネチャ 検索をかける音声から 生成されたシグネチャ Shazamカタログ認識 認識の仕組み 画像引用: https://www.mrchildren.jp/disco/#single
17. 17 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する 楽曲を検索 4. サーバーから楽曲情報をアプリへ返す サーバー Query Signature Reference Signature のコレクション Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Shazamカタログ認識 認識の仕組み Metadata ・曲名 ・アーティスト名 ・ジャケット画像URL etc.. Shazam カタログ (楽曲DB)
18. 18 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する 楽曲を検索 4. サーバーから楽曲情報をアプリへ返す サーバー Query Signature Reference Signature のコレクション Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature 名もなき詩 Mr.children シーソーゲーム Mr.children NOT FOUND Mr.children 君が好き Mr.children しるし Mr.children フェイク Mr.children 旅立ちの詩 Mr.children HANABI Mr.children HERO Mr.children ヒカリノアトリエ Mr.children Birthday Mr.children himawari Mr.children Shazamカタログ認識 認識の仕組み Metadata ・曲名 ・アーティスト名 ・ジャケット画像URL etc.. Shazam カタログ (楽曲DB) 画像引用: https://www.mrchildren.jp/disco/#single
19. 19 サーバー App 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する楽曲を検索 4. サーバーから楽曲情報をアプリへ返す Metadata送信 Shazamカタログ Reference Signature Shazamカタログ認識 認識の仕組み Mr.children しるし Mr.children しるし 画像引用: https://www.mrchildren.jp/disco/#single
20. 20 カスタムカタログ認識
21. 21 カスタムカタログ認識 概要 任意の音声に対して認識を行う機能を導入 任意の音声 🎹🎷🎸 🥁 自作の楽曲 🐶 < わんわ ん！ 鳴き声 󰢧 < 好きです！ 󰣼 < ごめんやで 会話
22. 22 カスタムカタログ認識 カスタムカタログの用意 任意の音声 + カスタムカタログ Custom Reference Signature Metadata
 Custom Reference Signature Metadata
 Custom Reference Signature Metadata
 🎹🎷🎸 🥁 🐶 < わんわ ん！ Custom Reference Signature Metadata
 󰢧 < 好きです！ 󰣼 < ごめんやで + Custom Reference Signature Metadata
 + Custom Reference Signature Metadata

23. 23 App Query Signature カスタムカタログ 1. 取得した音声からシグネチャを生成 2. カスタムカタログから一致するシグネチャを検索 カスタムカタログ認識 認識の仕組み 音声取得 生成 Custom Reference Signature Metadata
 Custom Reference Signature Metadata
 Custom Reference Signature Metadata
 Custom Reference Signature Metadata

24. 24 Shazamカタログ/カスタムカタログ認識 サンプル実装
25. 25 Shazamカタログ認識サンプル実装
26. 26 ボタン押下で検索開始 検索結果モーダル表示 ~ 検索中 ~ 取得音声をサーバへ送信 Shazamカタログ認識サンプル実装 超簡易Shazamアプリ 画像引用: https://www.mrchildren.jp/disco/#album/album17
27. 27 Apple DeveloperよりApp ServicesのShazamKitを有効にする Ref. https://help.apple.com/developer-account/?lang=ja#/dev53371f234 Shazamカタログ認識サンプル実装 事前準備
28. 28 Shazamカタログ認識サンプル実装 サンプルコード 引用: https://developer.apple.com/documentation/shazamkit/shsessiondelegate 引用: https://developer.apple.com/documentation/ shazamkit/shsession
29. 29 Shazamカタログ認識サンプル実装 サンプルコード ボタン押下で検索開始 引用: https://developer.apple.com/documentation/shazamkit/ shsession/3747208-matchstreamingbuffer
30. 30 画像引用: https://www.mrchildren.jp/disco/#album/album17 Shazamカタログ認識サンプル実装 サンプルコード マッチする楽曲が見つかった場合 検索結果モーダル表示
31. 31 画像引用 : https://www.mrchildren.jp/disco/#album/album17 Shazamカタログ認識サンプル実装 サンプルコード マッチする楽曲が見つかった場合 検索結果モーダル表示 MediaItem MediaItems 参考: https://developer.apple.com/documentation/sirikit/inplaymediaintent/2963015-mediaitems
32. 32 Shazamカタログ認識サンプル実装 サンプルコード マッチする楽曲が見つからなかった / エラーが発生した場合
33. 33 Shazamカタログ認識サンプル実装 サンプルコード マッチする楽曲が見つからなかった / エラーが発生した場合 シミュレータで実行した場合 Error Domain=com.apple.ShazamKit Code=202 "Shazam Catalog recognition doesn’t work in simulated devices" AppleDevelopperでShazamKitを有効にしていない場合 Error Domain=com.apple.ShazamKit Code=202 “Please check that you have enabled the ShazamKit App Service for this app identifier”
34. 34 カスタムカタログ認識サンプル実装
35. 35 ボタン押下で判別開始 ~ 判別中 ~ 取得音声を照合 判別結果モーダル表示 カスタムカタログ認識サンプル実装 セミ鳴き声音声判別
36. 36 セミ鳴き声３つ用意 https://pocket-se.info/ ミンミンゼミ ツクツクボウシ + ヒグラシ カスタムカタログ認識サンプル実装 事前準備 + ミンミンゼミ Reference Signature ツクツクボウシ Reference Signature Metadata ・名前: name ・特徴: feature Metadata ・名前: name ・特徴: feature カスタムカタログ ミンミンゼミ Reference Signature Metadata
 ツクツクボウシ Reference Signature Metadata

37. 37 WWDC2022にてmacOS13に Shazam CLI が含まれることを発表 🎉 引用: https://developer.apple.com/videos/play/wwdc2022/10028 カスタムカタログ認識サンプル実装 Shazam CLI
38. 38 カスタムカタログ認識サンプル実装 Shazam CLI リファレンスシグネチャを生成するためのコマンド $ shazam signature カスタムカタログを構築するためのコマンド $ shazam custom-catalog ＄shazam <subcommand>
39. 39 ex.) shazam signature --input <音声/ビデオファイル> --output <XXX.shazamsignature> $ shazam signature -i minmin.mp3 -o minmin.shazamsignature $ shazam signature -i tsukutsuku.mp3 -o tsukutsuku.shazamsignature カスタムカタログ認識サンプル実装 Shazam CLI : Signature生成
40. 40 カスタムカタログ認識サンプル実装 Signatureデータサイズ 782KB 7KB 328KB 3KB
41. 41 ex.) shazam custom-catalog create --signature-asset <XXX.shazamsignature> --media-items <.csv file> --output <XXX.shazamcatalog> 　$ shazam custom-catalog create --signature-asset minmin.shazamsignature --media-items minmin.csv -o semi.shazamcatalog カスタムカタログ認識サンプル実装 Shazam CLI: カスタムカタログ構築 minmin.csv
42. 42 カスタムカタログ認識サンプル実装 Shazam CLI: カスタムカタログ構築 ex.) shazam custom-catalog update --signature-asset <XXX.shazamsignature> --media-items <.csv file> --output <XXX.shazamcatalog> ＄shazam custom-catalog update --signature-asset tsukutsuku.shazamsignature --media-items tsukutsuku.csv -o semi.shazamcatalog tsukutsuku.csv
43. 43 ex.) shazam custom-catalog display --input <XXX.shazamcatalog> ＄shazam custom-catalog display -i semi.shazamcatalog カスタムカタログ認識サンプル実装 Shazam CLI: カスタムカタログ構築
44. 44 カスタムカタログ認識サンプル実装 サンプルコード
45. 45 カスタムカタログ認識サンプル実装 メタデータの定義 minmin.csv
46. 46 カスタムカタログ認識サンプル実装 サンプルコード 判別結果モーダル表示
47. 47 カスタムカタログ認識サンプル実装 動作確認
48. 48 SPACEMARKTアプリへ機能追加（勝手に）
49. 49 SPACEMARKETアプリへの機能追加 スペースまとめとは 用途や季節のイベントに合わせ、おすすめのスペースをまとめた機能 https://www.spacemarket.com/features/
50. 50 SPACEMARKETアプリへの機能追加 スペースまとめ検索 検索画面遷移 バナーのまとめをタップ 👆
51. 51 SPACEMARKETアプリへの機能追加 作成機能 ”スペースまとめに対応する楽曲クイズを出題し、正解したユーザーへクーポンを付与” 対象まとめ 花火ができるスペースまとめ クイズ例 タイトルに「花火」が入る 女性曲といえば？ aiko「花火」 問題 答え 画像引用: https://www.mrchildren.jp/disco/#album/album17
52. 52 SPACEMARKETアプリへの機能追加 作成機能フロー バナーのまとめをタップ 検索画面へ遷移 問題の表示、音楽を流し回答 　付与されたクーポン確認 クーポン一覧画面 まとめ検索表示をトリガーに ホーム画面へ問題表示
53. 53 SPACEMARKETアプリへの機能追加 RemoteConfig × ShazamID { "data": [ ︙ { "url": "https://www.spacemarket.com/features/temochi-hanabi/?utm_source=app_banner&utm_medium=referral&utm_campaign=hanabi&paid_type=0", "image": "https://cdn.braze.eu/appboy/communication/assets/image_assets/images/62e77db0f135f5631db67130/original.png?1659338160", "quiz": { "question": "タイトルに「花火」が入る女性曲といえば？", "coupon": { ︙ }, "shazamID": "12345", ︙ }, }, ︙ ] } 引用: https://developer.apple.com/documentation/shazamkit/shsession/3747208-matchstreamingbuffer
54. 54 SPACEMARKETアプリへの機能追加 動作確認（※音無し）
55. 55 モバイルエンジニア募集中です！ 株式会社スペースマーケット採用ページ https://spacemarket.co.jp/recruit/engineer/ ゲストアプリ iOS/Androidネイティブエンジニア ホストアプリ Flutterエンジニア
56. ご清聴ありがとうございました