JAWS Pankration 2021 にて発表した資料です。 AWS Amplify で翻訳アプリを作った話とAmplifyからカジュアルにCloudWatchLogsにログを送る方法について話しました。
紹介した翻訳アプリはこちら https://webspeechtranslate.yutoogi.com/
Realtime-transate with Web Speech APIbut…@jacoyutorius1
View Slide
w 3VCZJTUw +"846()BNBNBUTVw 'BWPSJUF"84$-*DPQJMPUDMJখ༔ే !KBDPZVUPSJVT安いリプロダクト椅子を使っていましたが、仕事がリモートワークに切り替わってオフィスが解約されて余ったいい感じの椅子がもらえました。(CC BY-SA 2.5 Copyright © 2006, Yukihiro Matsumoto )2
Contentsw)PXUPEFWFMPQ3FBMUJNFUSBOTMBUJPSXJUI"NQMJGZw4FOEMPHTUP$MPVE8BUDI-PHTGSPN"NQMJGZ-PHHFSAmplify で翻訳アプリを作った話とCloudWatchLogsにアプリケーションのログをカジュアルに送る方法について話します。3
Why?+"841BOLSBUJPO 🧐wIPVSTTQFBLFSTGSPNPWFSUIFXPSMEw$SB[Z😇w BOE*DBO`UTQFBL&OHMJTIʜ頭おかしぃ。。。4
Solutionw8FC4QFFDI"1*"NB[PO5SBOTMBUFw3FBMUJNFUSBOTMBUPS📻Web Speech API と AWS Translateでリアルタイム翻訳アプリ作れるのでは?5
構成はこんな感じです。w #VJMEJOHXJUI"NQMJGZ7VFw 5SBOTDSJCFVUUFSBODFCZ8FC4QFFDI"1*w 5SBOTMBUFUIFUFYU KQFOCZ"NB[PO5SBOTMBUFw 4FOEUIFSFTVMUUP$MPVE8BUDI-PHT6
Chromeじゃないとイマイチ調子悪い。7
こんな感じのJavascriptで発話内容をテキストとして取得することができます。Web Speech API8
amplify predictions には既にAmazon Transcribeも統合されていますが、日本語には未対応だったので今回は使っていません (2021/11)Yes, amplify predictions already integratedwith Amazon Transcribe.but Japanese was not.9
Amazon Translateも Amplifyに統合されているので、10
Amplify CLIから add predictions コマンドを実行することでアプリケーションに組み込むことができます。How to add Amazon Translate to Amplify11
こちらもたった10行くらいのJavascriptで翻訳結果を受け取ることができます。How to add Amazon Translate to Amplify12
では出来上がったものを見てみましょう。Demohttps://webspeechtranslate.yutoogi.com/13
14)FMMPUPBMMPGZPVXIPBSFXBUDIJOHKBXTQBOLSBUJPO5IJTJT0HJ*USJFEUPNBLFBUSBOTMBUJPOBQQVTJOHXFCTQFFDIBQJBOEBNB[POUSBOTMBUF5IFSFTVMUJTBTZPVDBOTFF5IFSFJTOPQSPCMFNXJUIUIFUSBOTMBUJPOBDDVSBDZPGBNB[POUSBOTBMBUF CVUUIFIFBSJOHSFTVMUTBSFEJTBQQPJOUJOH"DUVBMMZ *UIPVHIUJUXPVMECFOJDFJG*DPVMEVTFUIJTUPUSBOTDSJCFBNFFUJOH*OTUFBEPGBNFFUJOH UIFSFTVMUXBTMJLFMZUPCFBRVBSSFM*UIJOLJUTTUJMMBMPOHXBZUPVTFJUJOCVTJOFTT
デバッグのためにログを出したいことはよくあることです。We wants to output logs for debugging.15
AmplifyにはLoggerがあります16
.ZNJTVOEFSTUBOEJOH😇w lBNQMJGZMPHHFSzTFOETMPHTUP$MPVE8BUDI-PHT w /P TJNQMZEJTQMBZTUPDPOTPMFAmplifyにはLoggerがありますAmplifyにはLoggerがありますただし、Amplify Loggerはログをコンソールに出力するだけです。17
issueを漁っていたらこれぞ僕が欲しいと思っていた機能のプルリクエストがあり、しかもマージされていました。Finaly, I found this pull-request18
AWSCloudWatchProviderを使うことでAmplify LoggerからCloudWatchにログを送信することができるようです。Moreover, already merged.19
ということでやってみます!使い方はプルリクエストのページに書いてあります。Do it!!20
Vueだったらこのような感じでインスタンスプロパティにLoggerを登録しておけばコンポーネントのどこからでも呼べて便利。Do it!!21
CloudWatchLogsログストリームの最初のログはSDKからだとエラーになる様子..マネジメントコンソールから手作業で最初のログを登録した。Failed🔥UPBWPJEUIJTJTTVF QVUBfiSTUMPHPGMPHTUSFBNGSPN.BOBHFNFOU$POTPMF22
バグのようです。It seems a bug23
やったぜ!I did it!24
By the way,amplify cli returns the following messageAmplifyにAuth関連のリソースが追加されていない場合はそれらを追加するように言われるので従いましょう。認証時と非認証していない時用の2種類のIAMロールが作成されます(authRole, unAuthRole)wBNQMJGZBQQOFFET*".SPMFGPSBDDFTTUP"84SFTPVSDFT FH4 (FP 5SBOTMBUFʜwJGZPVXFSFOPUBEE"VUISFTPVSDFT ZPVTIPVMEBEESVOlBNQMJGZBEEBVUIz w*".3PMFXFSFDSFBUFE BVUI3PMF VO"VUI3PMF25
作成されたIAMロールに対してCloudWatchLogsへの書き込みを許可するアクションを設定します。(IAMポリシーとして定義しておくと便利)BMMPXGPMMPXJOHBDUJPOT‣ MPHT$SFBUF-PH4USFBN‣ MPHT%FTDSJCF-PH(SPVQT‣ MPHT%FTDSJCF-PH4USFBNT‣ MPHT$SFBUF-PH(SPVQ‣ MPHT1VU-PH&WFOUTallow IAMRole to put logs to CloudWatchLogsImportant#126
allowUnAuthenticatedIdentitiesプロパティは、認証されていないユーザーに対してAWSリソースの利用を許可するためのフラグです。allowUnAuthenticatedIdentitiesImportant#2./amplify/#current-cloud-backend/auth/amplifyapp/parameters.json27
allowUnAuthenticatedIdentitiesImportant#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!!IUUQTRJJUBDPNBEWFOUDBMFOEBSBNQMJGZ29
おわり。thank you!30