$30 off During Our Annual Pro Sale. View details »

iOSDC2022.pdf

Spacemarket
September 28, 2022

 iOSDC2022.pdf

Spacemarket

September 28, 2022
Tweet

More Decks by Spacemarket

Other Decks in Technology

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. サーバーから楽曲情報をアプリへ返す

    ⾳声取得 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 セミ鳴き声3つ⽤意 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. ご清聴ありがとうございました