Realtime-transate with Web Speech API but… @jacoyutorius 1

w 3VCZJTU w +"846()BNBNBUTV w 'BWPSJUF"84$-*DPQJMPUDMJ খ໦༔ే !KBDPZVUPSJVT 安いリプロダクト椅子を使っていましたが、 仕事がリモートワークに切り替わってオフィスが解約されて余ったいい感じの椅子 がもらえました。 (CC BY - SA 2.5 Copyright © 2006, Yukihiro Matsumoto ) 2

Contents w)PXUPEFWFMPQ3FBMUJNFUSBOTMBUJPSXJUI"NQMJGZ w4FOEMPHTUP$MPVE8BUDI-PHTGSPN"NQMJGZ-PHHFS Amplify で翻訳アプリを作った話と CloudWatchLogsにアプリケーションのログをカジュアルに送る方法について話します。 3

Why? +"841BOLSBUJPO 🧐 wIPVSTTQFBLFSTGSPNPWFSUIFXPSME w$SB[Z😇 w BOE*DBO`UTQFBL&OHMJTIʜ 頭おかしぃ。。。 4

Solution w8FC4QFFDI"1*"NB[PO5SBOTMBUF w3FBMUJNFUSBOTMBUPS📻 Web Speech API と AWS Translateで リアルタイム翻訳アプリ作れるのでは？ 5

構成はこんな感じです。 w #VJMEJOHXJUI"NQMJGZ7VF w 5SBOTDSJCFVUUFSBODFCZ8FC 4QFFDI"1* w 5SBOTMBUFUIFUFYU KQFO CZ "NB[PO5SBOTMBUF w 4FOEUIFSFTVMUUP$MPVE8BUDI-PHT 6

Chromeじゃないとイマイチ調子悪い。 7

こんな感じのJavascriptで発話内容をテキストとして取得することができます。 Web Speech API 8

amplify predictions には既にAmazon Transcribeも統合されていますが、 日本語には未対応だったので今回は使っていません (2021/11) Yes, amplify predictions already integrated with Amazon Transcribe. but Japanese was not. 9

Amazon Translateも Amplifyに統合されているので、 10

Amplify CLIから add predictions コマンドを実行することでアプリケーションに組 み込むことができます。 How to add Amazon Translate to Amplify 11

こちらもたった10行くらいのJavascriptで翻訳結果を受け取ることができます。 How to add Amazon Translate to Amplify 12

では出来上がったものを見てみましょう。 Demo https://webspeechtranslate.yutoogi.com/ 13

14 )FMMPUPBMMPGZPVXIPBSFXBUDIJOHKBXTQBOLSBUJPO 5IJTJT0HJ *USJFEUPNBLFBUSBOTMBUJPOBQQVTJOHXFCTQFFDIBQJBOEBNB[PO USBOTMBUF 5IFSFTVMUJTBTZPVDBOTFF 5IFSFJTOPQSPCMFNXJUIUIFUSBOTMBUJPOBDDVSBDZPGBNB[POUSBOTBMBUF CVUUIFIFBSJOHSFTVMUTBSFEJTBQQPJOUJOH "DUVBMMZ *UIPVHIUJUXPVMECFOJDFJG*DPVMEVTFUIJTUPUSBOTDSJCFB NFFUJOH *OTUFBEPGBNFFUJOH UIFSFTVMUXBTMJLFMZUPCFBRVBSSFM *UIJOLJUTTUJMMBMPOHXBZUPVTFJUJOCVTJOFTT

デバッグのためにログを出したいことはよくあることです。 We wants to output logs for debugging. 15

AmplifyにはLoggerがあります 16

.ZNJTVOEFSTUBOEJOH😇 w lBNQMJGZMPHHFSzTFOETMPHTUP$MPVE8BUDI-PHT w /P TJNQMZEJTQMBZTUPDPOTPMF AmplifyにはLoggerがあります AmplifyにはLoggerがあります ただし、Amplify Loggerはログをコンソールに出力するだけです。 17

issueを漁っていたらこれぞ僕が欲しいと思っていた機能のプルリクエストがあり、 しかもマージされていました。 Finaly, I found this pull-request 18

AWSCloudWatchProviderを使うことで Amplify LoggerからCloudWatchにログを送信することができるようです。 Moreover, already merged. 19

ということでやってみます！ 使い方はプルリクエストのページに書いてあります。 Do it!! 20

Vueだったらこのような感じでインスタンスプロパティにLoggerを登録しておけば コンポーネントのどこからでも呼べて便利。 Do it!! 21

CloudWatchLogsログストリームの最初のログはSDKからだとエラーになる様子.. マネジメントコンソールから手作業で最初のログを登録した。 Failed🔥 UPBWPJEUIJTJTTVF QVUB fi STUMPHPGMPHTUSFBNGSPN.BOBHFNFOU$POTPMF 22

バグのようです。 It seems a bug 23

やったぜ！ I did it! 24

By the way, amplify cli returns the following message AmplifyにAuth関連のリソースが追加されていない場合はそれらを追加するように言われるので従いましょう。 認証時と非認証していない時用の２種類のIAMロールが作成されます(authRole, unAuthRole) wBNQMJGZBQQOFFET*".SPMFGPSBDDFTTUP"84SFTPVSDFT FH4 (FP 5SBOTMBUFʜ wJGZPVXFSFOPUBEE"VUISFTPVSDFT ZPVTIPVMEBEESVOlBNQMJGZBEEBVUIz w*".3PMFXFSFDSFBUFE BVUI3PMF VO"VUI3PMF 25

作成されたIAMロールに対してCloudWatchLogsへの書き込みを許可するアクションを設定します。 （IAMポリシーとして定義しておくと便利） BMMPXGPMMPXJOHBDUJPOT ‣ MPHT$SFBUF-PH4USFBN ‣ MPHT%FTDSJCF-PH(SPVQT ‣ MPHT%FTDSJCF-PH4USFBNT ‣ MPHT$SFBUF-PH(SPVQ ‣ MPHT1VU-PH&WFOUT allow IAMRole to put logs to CloudWatchLogs Important#1 26

allowUnAuthenticatedIdentitiesプロパティは、認証されていないユーザーに対してAWSリソースの利用 を許可するためのフラグです。 allowUnAuthenticatedIdentities Important#2 ./amplify/#current-cloud-backend/auth/amplifyapp/parameters.json 27

allowUnAuthenticatedIdentities Important#2 これがtrueになっていないとエラーになります。 28

Amplifyは簡単にデプロイできて楽しいけど 使い込んでいくとハマるポイントがあったりするので皆で知見を共有していき ましょう！！ Amplify is powerful & useful. easy to deploy, easy to integrate AWS services to your app. but if you use amplify heavy, you may encounts unfortunate error. so lets share your knowledge with everyone!! IUUQTRJJUBDPNBEWFOUDBMFOEBSBNQMJGZ 29

おわり。 thank you! 30