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

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 identifier”

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

36 セミ鳴き声3つ⽤意 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 file> --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 file> --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アプリへの機能追加 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

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

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