石井 悠貴 / yuki.ishii

Date
タグ
Frontend
写真
a74f240b-936a-4c64-aaab-41cc5d9d6efc_vuK%253B.jpg

自己紹介

東京生まれ、東京育ちの石井です。社内ではきーくんと呼ばれています。
インターネットでは、komura-cというハンドルネームで活動しています。趣味は、音楽とプログラミング、ボードゲーム、お笑いを見ること、DTMでの作曲、アカペラをすることです。
Voicyでは、Webフロントエンドを中心にエンジニアをしています。
 

Voicyの好きなところ

あたたかい人が集まるサービスなところ、本気で音声とテクノロジーでワクワクする社会を作ろうとしているところ、社内文化が楽しいところ
 

好きなVoicyパーソナリティ

 

私が思う「声で未来をつくる」

 

カジュアルに話してみる

 

ピックアップコンテンツ

Web Speech APIの音声認識を使ってWebページを作ってみる - voicy tech blog
Voicy アドベントカレンダー 2021 12日目の記事です。 こんにちは、学生 インターン としてVoicyのWebフロントエンド開発をしている、きーくん(komura-c)です。 みなさんは、手を使わず音声でブラウザを操作したいなと思ったことはありませんか?僕はあります。それを実現する手段の一つとして、 音声認識があります。この記事は、現状のWeb技術においての 音声認識 で、自分でもできそうな技術を使ってみようといった趣旨の記事です。 Webブラウザ上での 音声認識について調べてみるとTensorflow.jsか、Web Speech APIが出てきます。今回は、 機械学習のモデルを用意せずとも日本語で 音声認識ができるWeb Speech API を使ってみました。 Web Speech APIは、 音声合成(Text-to-Speech)と非同期 音声認識(Asynchronous Speech Recognition)の2つをウェブアプリに組み込むことを可能にするブラウザの API です。 この APIは、Web技術の標準化団体 W3C のコミュニティグループの一つであるWICGが策定しており、現在はドラフトの段階で実験的な機能となっています。 各ブラウザの対応状況は、以下の通りです。 https://caniuse.com/speech-recognition 自分で試した環境では、 GoogleChrome( MacOS)と Safari( MacOS, iOS)で動きました。 今回は、 音声認識の方を使い、実際に以下のコードを書いてみました。 (TypeScriptで書きたかったため若干型が書いてありますが、ネイティブの JavaScript でも変わりません) https://github.com/komura-c/web-voice-recognizer/blob/main/src/scripts/index.ts const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognizer = new Recognition(); recognizer.lang = 'ja-JP'; recognizer.interimResults = true; recognizer.continuous = true; ...
ngコマンドの実装を追う - komura-c.log
Angular.jsを使った開発を1年ぐらいしていながら、いつも使っているng serveの実装について追ったことがなかったので追う たまたまng-japan OnAirの アーカイブ を見ていたら、ng buildの実装を追う話をしていて参考になったので、試す npm scriptsに書いてあるng 〇〇(global installでない)がなぜ動くか、 angular- cliのpackageのpackage. jsonにbinを指定する項目があり、 インストールした時に指定されたパスに対して、 シンボリックリンク が作られる node_modules/@angular/cli/package.json どこに作られるかというと、 node_modules/.bin内で node_modules/.bin/ngの実態はpackage内の@angular/cli/bin/ng.js ということになる なぜ シンボリックリンクが作られると動くのかというと、 npm runは、実行したPATHに加えて、 node_modules/.bin をnpm scriptsの実行PATHに追加するという仕様になっているからである ng.jsを見ていくと、nodeの対応versionによってwarnやerrorを出した後、 同じpackage内の bootstrap.jsを読み込み、 bootstrap.jsは../lib/init.jsを読み込む init.jsはAngularのバージョンチェックなどを行なった後、./cli/index.jsからdefault exportされている default_1 という関数にng 〇〇の〇〇の部分を渡している この default_1という関数でng newしたangularのプロジェクト( ワークスペース)のangular. jsonファイルを読み込み コマンド名とcommand/xxx.
 

テキストアウトプット

 

その他アウトプット