iOSDC2022.pdf - Speaker Deck

Slide 1

Slide 1 text

ShazamKitの遊び⽅ Naoyuki Murata

Slide 2

Slide 2 text

2 ⾃⼰紹介 Naoyuki Murata ● SPACEMARKET 2022/02 ~ モバイルエンジニア: iOS/Android/Flutter

Slide 3

Slide 3 text

3 SPACEMARKETについてあらゆるスペースを簡単に貸し借りできるサービス「スペースマーケット」の開発/運営事業内容 MISSION スペースシェアをあたりまえに ”スペースシェアをあたりまえの選択肢にすることで⼈々の発想を広げ、多様なチャレンジを⽣み出し、世の中を⾯⽩くしたいと考えています” https://spacemarket.co.jp/about/

Slide 4

Slide 4 text

4 SPACEMARKETについてゲスト向けサービススペースを借りたい⼈ホスト向けサービススペースを貸し出したい⼈ゲスト/ホストに向けたサービス(WEB/アプリ)を運営しています iOS/Androidネイティブ Flutter

Slide 5

Slide 5 text

5 アジェンダ ● Shazam/ShazamKitの概要 ● ShazamKitメイン機能紹介 ○ Shazamカタログ認識 ○ カスタムカタログ認識 ● サンプル実装 ○ Shazamカタログ認識サンプル実装 ○ カスタムカタログ認識サンプル実装 ● SPACEMARKTアプリへ機能追加

Slide 6

Slide 6 text

6 Shazam/ShazamKitの概要

Slide 7

Slide 7 text

7 Shazamとは流れている楽曲情報を調べることができる⾳楽検索アプリ引⽤: https://www.shazam.com/ja/home iOS/Android Web 検索結果検索中ボタン押下で検索開始引⽤: Shazamアプリ

Slide 8

Slide 8 text

8 Shazamの歴史 2002 携帯電話サービス「2580」リリース 1999 Shazam Entertainment 設⽴ 2008 Shazamアプリ AppStore リリース 2017 2018 Apple買収発表買収 2021 WWDC 2021 ShazamKit発表 🎉

Slide 9

Slide 9 text

9 ShazamKitとは Shazamの⾳声認識機能を組み込む事ができるフレームワーク Shazamカタログ認識カスタムカタログ認識 Shazamライブラリ管理楽曲認識機能(Shazam同様の機能) 任意の⾳声に対して認識を⾏う機能楽曲の検索結果をShazamアプリのライブラリへ追加する機能

Slide 10

Slide 10 text

10 ShazamKitメイン機能紹介

Slide 11

Slide 11 text

11 Shazamカタログ認識

Slide 12

Slide 12 text

12 Shazamカタログ認識概要楽曲認識機能(Shazam同様の機能)を導⼊ App 🔊 楽曲情報・曲名・アーティスト名・ジャケット画像 etc.. 🎶 🎶 Shazam表⾯ 1 2 3 4 裏側取得した⾳声からシグネチャを⽣成シグネチャをサーバーへ送信 Shazamカタログから⼀致する曲を検索サーバーから楽曲情報をアプリへ返す検索結果⾳声取得

Slide 13

Slide 13 text

13 App 1. 取得した⾳声からシグネチャを⽣成 2. シグネチャをサーバーへ送信 3. Shazamカタログから⼀致する曲を検索 4. サーバーから楽曲情報をアプリへ返す⾳声取得 Signatur e ⽣成⾳声をlossy圧縮(⾮可逆圧縮)したデジタルフィンガープリント ”データサイズが⼩さく、少なくとも元の⾳声データの1/10以下” ”元の⾳声を復元することは出来ないため、安全性とプライバシーが保たれる” 🔊 Shazamカタログ認識認識の仕組み 🎶 🎶

Slide 14

Slide 14 text

14 サーバー App 1. 取得した⾳声からシグネチャを⽣成 2. シグネチャをサーバーへ送信 3. Shazamカタログから⼀致する曲を検索 4. サーバーから楽曲情報をアプリへ返す Signatur e 送信 Signatur e Shazamカタログ認識認識の仕組み

Slide 15

Slide 15 text

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..

Slide 16

Slide 16 text

16 Signatur e Referenc e Signature Signatur e Mr.children しるし Query Signature Shazamカタログが持つ、楽曲から⽣成されたシグネチャ検索をかける⾳声から⽣成されたシグネチャ Shazamカタログ認識認識の仕組み 🎶 画像引⽤: https://www.mrchildren.jp/disco/#single

Slide 17

Slide 17 text

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)

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19 サーバー App 1. 取得した⾳声からシグネチャを⽣成 2. シグネチャをサーバーへ送信 3. Shazamカタログから⼀致する楽曲を検索 4. サーバーから楽曲情報をアプリへ返す Metadata送信 Shazamカタログ Reference Signature Shazamカタログ認識認識の仕組み Mr.children しるし Mr.children しるし画像引⽤: https://www.mrchildren.jp/disco/#single

Slide 20

Slide 20 text

20 カスタムカタログ認識

Slide 21

Slide 21 text

21 カスタムカタログ認識概要任意の⾳声に対して認識を⾏う機能を導⼊任意の⾳声 🎹🎷🎸🥁 ⾃作の楽曲 🐶 < わんわん︕ 鳴き声 🙋 < 好きです︕ 🤦 < ごめんやで会話

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24 Shazamカタログ/カスタムカタログ認識サンプル実装

Slide 25

Slide 25 text

25 Shazamカタログ認識サンプル実装

Slide 26

Slide 26 text

26 ボタン押下で検索開始検索結果モーダル表⽰ ~ 検索中 ~ 取得⾳声をサーバへ送信 👆 Shazamカタログ認識サンプル実装超簡易Shazamアプリ画像引⽤: https://www.mrchildren.jp/disco/#album/album17

Slide 27

Slide 27 text

27 Apple DeveloperよりApp ServicesのShazamKitを有効にする Ref. https://help.apple.com/developer- account/?lang=ja#/dev53371f234 Shazamカタログ認識サンプル実装事前準備

Slide 28

Slide 28 text

28 Shazamカタログ認識サンプル実装サンプルコード引⽤: https://developer.apple.com/documentation/shazamkit/shsessiond elegate 引⽤: https://developer.apple.com/documentation/ shazamkit/shsession

Slide 29

Slide 29 text

29 Shazamカタログ認識サンプル実装サンプルコードボタン押下で検索開始 👆 引⽤: https://developer.apple.com/documentation/shazamkit/ shsession/3747208-matchstreamingbuﬀer

Slide 30

Slide 30 text

30 画像引⽤: https://www.mrchildren.jp/disco/#album/album17 Shazamカタログ認識サンプル実装サンプルコードマッチする楽曲が⾒つかった場合検索結果モーダル表⽰

Slide 31

Slide 31 text

31 像引⽤: https://www.mrchildren.jp/disco/#album/album17 Shazamカタログ認識サンプル実装サンプルコードマッチする楽曲が⾒つかった場合検索結果モーダル表⽰ MediaItem MediaItems 参考: https://developer.apple.com/documentation/sirikit/inplaymediaintent/2963015- mediaitems

Slide 32

Slide 32 text

32 Shazamカタログ認識サンプル実装サンプルコードマッチする楽曲が⾒つからなかった / エラーが発⽣した場合

Slide 33

Slide 33 text

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 identiﬁer”

Slide 34

Slide 34 text

34 カスタムカタログ認識サンプル実装

Slide 35

Slide 35 text

35 ボタン押下で判別開始 ~ 判別中 ~ 取得⾳声を照合 👆 判別結果モーダル表⽰カスタムカタログ認識サンプル実装セミ鳴き声⾳声判別

Slide 36

Slide 36 text

36 セミ鳴き声３つ⽤意 https://pocket- se.info/ ミンミンゼミツクツクボウシ + ヒグラシカスタムカタログ認識サンプル実装事前準備 + ミンミンゼミ Reference Signature ツクツクボウシ Reference Signature Metadata ・名前: name ・特徴: feature Metadata ・名前: name ・特徴: feature カスタムカタログミンミンゼミ Reference Signature Metadata ツクツクボウシ Reference Signature Metadata

Slide 37

Slide 37 text

37 WWDC2022にてmacOS13に Shazam CLI が含まれることを発表 🎉 引⽤: https://developer.apple.com/videos/play/wwdc2022/10028 カスタムカタログ認識サンプル実装 Shazam CLI

Slide 38

Slide 38 text

38 カスタムカタログ認識サンプル実装 Shazam CLI リファレンスシグネチャを⽣成するためのコマンド $ shazam signature カスタムカタログを構築するためのコマンド $ shazam custom-catalog ＄shazam

Slide 39

Slide 39 text

39 ex.) shazam signature --input <⾳声/ビデオファイル> --output $ shazam signature -i minmin.mp3 -o minmin.shazamsignature $ shazam signature -i tsukutsuku.mp3 -o tsukutsuku.shazamsignature カスタムカタログ認識サンプル実装 Shazam CLI : Signature⽣成

Slide 40

Slide 40 text

40 カスタムカタログ認識サンプル実装 Signatureデータサイズ 782KB 7KB 328KB 3KB

Slide 41

Slide 41 text

41 ex.) shazam custom-catalog create --signature-asset --media-items <.csv ﬁle> --output $ shazam custom-catalog create --signature-asset minmin.shazamsignature --media-items minmin.csv -o semi.shazamcatalog カスタムカタログ認識サンプル実装 Shazam CLI: カスタムカタログ構築 minmin.csv

Slide 42

Slide 42 text

42 カスタムカタログ認識サンプル実装 Shazam CLI: カスタムカタログ構築 ex.) shazam custom-catalog update --signature-asset --media-items <.csv ﬁle> --output ＄shazam custom-catalog update --signature-asset tsukutsuku.shazamsignature --media-items tsukutsuku.csv -o semi.shazamcatalog tsukutsuku.csv

Slide 43

Slide 43 text

43 ex.) shazam custom-catalog display --input ＄shazam custom-catalog display -i semi.shazamcatalog カスタムカタログ認識サンプル実装 Shazam CLI: カスタムカタログ構築

Slide 44

Slide 44 text

44 カスタムカタログ認識サンプル実装サンプルコード

Slide 45

Slide 45 text

45 カスタムカタログ認識サンプル実装メタデータの定義 minmin.csv

Slide 46

Slide 46 text

46 カスタムカタログ認識サンプル実装サンプルコード判別結果モーダル表⽰

Slide 47

Slide 47 text

47 カスタムカタログ認識サンプル実装動作確認

Slide 48

Slide 48 text

48 SPACEMARKTアプリへ機能追加（勝⼿に）

Slide 49

Slide 49 text

49 SPACEMARKETアプリへの機能追加スペースまとめとは⽤途や季節のイベントに合わせ、おすすめのスペースをまとめた機能 https://www.spacemarket.com/features/

Slide 50

Slide 50 text

50 SPACEMARKETアプリへの機能追加スペースまとめ検索検索画⾯遷移バナーのまとめをタップ 👆 👆

Slide 51

Slide 51 text

51 SPACEMARKETアプリへの機能追加作成機能 ”スペースまとめに対応する楽曲クイズを出題し、正解したユーザーへクーポンを付与” 対象まとめ花⽕ができるスペースまとめクイズ例タイトルに「花⽕」が⼊る⼥性曲といえば︖ aiko「花⽕」問題答え画像引⽤: https://www.mrchildren.jp/disco/#album/album17

Slide 52

Slide 52 text

52 SPACEMARKETアプリへの機能追加作成機能フロー 👆 👆 バナーのまとめをタップ検索画⾯へ遷移問題の表⽰、⾳楽を流し回答付与されたクーポン確認クーポン⼀覧画⾯まとめ検索表⽰をトリガーにホーム画⾯へ問題表⽰

Slide 53

Slide 53 text

53 SPACEMARKETアプリへの機能追加 RemoteConﬁg × 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

Slide 54

Slide 54 text

54 SPACEMARKETアプリへの機能追加動作確認（※⾳無し）

Slide 55

Slide 55 text

55 モバイルエンジニア募集中です︕ 株式会社スペースマーケット採⽤ページ https://spacemarket.co.jp/recruit/engineer/ ゲストアプリ iOS/Androidネイティブエンジニアホストアプリ Flutterエンジニア

Slide 56

Slide 56 text

ご清聴ありがとうございました