Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
たどころくん1号を支える技術
Search
ikuma-t
September 17, 2023
Programming
1
270
たどころくん1号を支える技術
社内LT会の資料
ikuma-t
September 17, 2023
Tweet
Share
More Decks by ikuma-t
See All by ikuma-t
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
650
いまさらのStorybook
ikumatadokoro
0
520
これで最後にしたい! Astroと立ち向かう 6度目の個人ブログ再開発
ikumatadokoro
5
1.2k
Panda CSS と Ark UI ではじめる個人開発
ikumatadokoro
4
1.9k
見た目から始める生産性向上
ikumatadokoro
11
5.6k
ぼくが 美容師さんに伝えたかった バンドの話
ikumatadokoro
0
220
Railsアプリをコスパよく読むための環境整備
ikumatadokoro
2
1k
HTTPを手で書いて学ぶ ファイルアップロードの仕組み
ikumatadokoro
80
30k
なんだか うまくいっている を 自分たちの いつもどおり に 定着させるためのチーム戦略
ikumatadokoro
4
730
Other Decks in Programming
See All in Programming
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
130
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
180
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
810
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
170
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
480
SwiftUI API Design Lessons
niw
1
290
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
160
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
3
1.2k
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
170
List とは何か? / PHPerKaigi 2025
meihei3
0
870
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.1k
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
150
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing for humans not robots
tammielis
252
25k
The Language of Interfaces
destraynor
157
24k
Building Applications with DynamoDB
mza
94
6.3k
GitHub's CSS Performance
jonrohan
1030
460k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Code Reviewing Like a Champion
maltzj
522
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
520
Making Projects Easy
brettharned
116
6.1k
Transcript
たどころくん 1 号を支える技術 ikuma-t むせていたって喋りたい! エンペイてくtech 大LT 大会 ver 0.1.0
2023-09-15
ikuma-t IkumaTadokoro ikumatdkr ikuma-t.com ikumatadokoro 株式会社エンペイで働く、フロントエンドが好きなエンジニア。 表情パターンは9 割笑顔、1 割(´ ・ω
・`) なやさおです。
コロナ後で声がうまく出せない 状況を技術でどう乗り切ったか 今回のテーマ
製品紹介
たどころくん 1 号 ローカルで動く機械音声通話アプリ ブラウザさえあれば動作する 搭載している機能 発話 ピッチ調整 プリセット機能 履歴機能
竹村さん腹筋崩壊機能
導入実績 開発チームの日常におけるコミュニケーション:導入事例多数 イベントファシリテーション:多くのデイリースクラムでご利用いただいてます! 登壇: 重要なイベントでも肉声による発表と一切遜色なく遂行した実績あり ライトなLT イベントでもご利用いただいてます 竹村さんの腹筋を崩壊させた数:プライスレス 様々なシーンでご利用いただいてます
技術紹介
SpeechSynthesisUtterance 音声読み上げのコアとなる技術 SpeechSynthesisUtterance はウェブ音声 API のインターフェイスで、発話リクエストを表します。 これには、発話サービスが読み上げ るコンテンツと、その読み上げ方についての情報(言語、音の高低、音量)が含まれます。 これだけで機械音声による読み上げが実装できます。 ちなみに「Synthesis
」は「合成」、「Utterance 」は「発声」という意味です(合成音声読み上げAPI ) ブラウザ標準の音声合成API const uttr = new SpeechSynthesisUtterance(" ずんだもんだぞ"); window.speechSynthesis.speak(uttr);
たどころくん 1 号の正体 … 実際にブラウザで確認してみます たどころくん 1 号の正体は ... 「
Kyoko 」! 見た目は機械音声、中身は… const voices = window.speechSynthesis.getVoices() // 日本語向けの音声を確認する const locale = 'ja-JP' const japaneseVoices = voices.filter((voice) => voice.lang === locale) // これが機械音声を喋っている人の真の名前... japaneseVoices[0].name
履歴管理 永続化にはlocalStorage を使用しています。プレゼンもこれで乗り切ります。 意外と便利
システム音声を通話アプリに載せる 1. (スピーカーに漏れ出る前にキャッチ)Blackhole でシステム音を拾えるようにする 2. (正直よくわからん)Audio MIDI 設定でBlackhole と音声出力デバイスを合成した装置を作る 3.
(システム音声を外部にむける)通話アプリのマイクをBlackhole にする 試行錯誤してM1 Mac だとこれでできたってやつ
開発小話 開発リポジトリの名前は「 bossun 」 機械音声といえば、ということで「スイッチ」と名付けようとしたが、「switch 」 がプログラミングとしては汎用的な名前すぎて、ネタアプリに使うのは微妙という ことで、同じSKET DANCE から「ボッスン」を採用
制作は高速、されど仕事は進まず 「明日は復帰できるかな?」と思った日に勢いで1h もかからないでアプリ実装。 実装は高速で終わったものの、体調が万全でない中無理をしたため、翌日は一日中 頭がぼーっとして仕事どころではなかったです。
喋らなくていいおかげで肺の負担は下げられたし、 皆さんにも楽しんでいただけたようでなによりです おわり
ありがとうございました! Slides on ikuma-t.com