iOSDC2022.pdf

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. サーバーから楽曲情報をアプリへ返す ⾳声取得 Signatur e ⽣成 ⾳声をlossy圧縮(⾮可逆圧縮)したデジタルフィンガープリント ”データサイズが⼩さく、少なくとも元の⾳声データの1/10以下” ”元の⾳声を復元することは出来ないため、安全性とプライバシーが保たれる” 🔊 Shazamカタログ認識 認識の仕組み 🎶 🎶
14. 14 サーバー App 1. 取得した⾳声からシグネチャを⽣成 2. シグネチャをサーバーへ送信 3. Shazamカタログから⼀致する曲を検索 4. サーバーから楽曲情報をアプリへ返す Signatur e 送信 Signatur e Shazamカタログ認識 認識の仕組み
15. 15 1. 取得した⾳声からシグネチャを⽣成 2. シグネチャをサーバーへ送信 3. Shazamカタログから⼀致する 楽曲を検索 4. サーバーから楽曲情報をアプリへ返す サーバー Shazam カタログ (楽曲DB) Signatur e シグネチャのコレクション (楽曲から⽣成されたSignatureの集合) Signatur e Signatur e Signatur e Signatur e Signatur e Signatur e Signatur e Signatur e Signatur e Signatur e Signatur e Signatur e Shazamカタログ認識 認識の仕組み Signature Metadata ・曲名 ・アーティスト名 ・ジャケット画像URL etc..
16. 16 Signatur e Referenc e Signature Signatur e Mr.children しるし Query Signature Shazamカタログが持つ、 楽曲から⽣成されたシグネチャ 検索をかける⾳声から ⽣成されたシグネチャ Shazamカタログ認識 認識の仕組み 🎶 画像引⽤: https://www.mrchildren.jp/disco/#single
17. 17 1. 取得した⾳声からシグネチャを⽣成 2. シグネチャをサーバーへ送信 3. Shazamカタログから⼀致する 楽曲を検索 4. サーバーから楽曲情報をアプリへ返す サーバー Query Signatur e Reference Signature のコレクション Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Reference Signature Shazamカタログ認識 認識の仕組み Metadata ・曲名 ・アーティスト名 ・ジャケット画像URL etc.. Shazam カタログ (楽曲DB)
18. 18 1. 取得した⾳声からシグネチャを⽣成 2. シグネチャをサーバーへ送信 3. Shazamカタログから⼀致する 楽曲を検索 4. サーバーから楽曲情報をアプリへ返す サーバー Query Signatur e Reference Signature のコレクション Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e Referenc e Signatur e 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 Signatur e カスタムカタログ 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/shsessiond elegate 引⽤: 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?16593 38160", "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. ご清聴ありがとうございました