2023/4/10週 もくもく会 GraphQL, Web Audio API, Live2d Cubism Editor, AWS Polly, Amplify, testing-library,

こんにちは、フロントエンドエンジニアの 谷（@high_g_engineer）です。
最近、自分が所属するチームと興味がある人達を集めて、業務時間内でもくもくと学習する会、
もくもく会を開催し始めました。

もくもく会を開催しようと思ったきっかけは、こちらで紹介しています。

以下は今週の取り組んだ内容になります。

今週のもくもく会

谷

• GraphQLとReactを接続する
  • https://zenn.dev/highgrenade/scraps/09bb436c15a9a5
  • Apoll ClientでGraphQLサーバと通信する
  • ApolloProvider + useQueryを試した
  • GraphQL完全に理解した
  • 次のフェーズ的にGraphQLのサーバを立てたり、Next.jsで扱う方法だったり、実務的なところだったりを調べる
    • 一旦↓を読んでる
    • https://qiita.com/saboyutaka/items/8a75602a3a7b52af1a69
• GraphQLをもう少し深堀り
  • Query, Mutation辺りを知って分かった気になってたが、Subscriptionというものを発見
  • 多分入門ができた気がするのでモノを作る
  • GraphQLサーバを作ることを決意
  • https://zenn.dev/highgrenade/scraps/169d3aa591892f
  • herokuを触りだした
• 磯野さんのWeb Audio APIをモブプロする
  • https://ics.media/entry/200427/
  • https://weblike-curtaincall.ssl-lolipop.jp/portfolio-web-sounder/webaudioapi-basic/overview
  • https://qiita.com/7shi/items/3866fac27ba488ec74c7
  • https://codepen.io/7shi/pen/rNOQyog

磯野

• Live2d Cubism Editor使って、まばたきとリップシンク設定
  • 基本の動きは、Live2d技術者の方が既に作成してくださってたので、チェックボックス３つ、４つ入れるだけで動いた
• Webページで動かすときのリップシンクを再生している音の大きさによって開閉具合を制御できるように設定
  • live2d側のライブラリ内で、既にリップシンクを制御するメソッドはある
  • しかし、再生している音源の音量を取得するところはどこにも説明がなかったので、苦労した
  • 谷さんにWeb Audio APIの使い方について教えていただいたおかげで、なんとか解決
  • これは後日、zennにでもまとめておきたい
• OpenAIのAPIでキャラクターの性格や特徴を持たせて話すように設定
  • 事前の設定値をゴリゴリ書けば、結構それっぽいレスポンス返してくれる
  • ただ、書けば書くほど、トークン（課金対象）が増えていくのでどこまでやるかは要検討
• AWS Pollyを使って、OpenAIで生成したテキストを音声化する
  • IAMロールにAWS Pollyのフルアクセス持たせて、アクセスキーを生成したパターンでは無事成功した
  • 次は、Pre環境でECSにアタッチされているロールに対して、Pollyのフルアクセス権限持たせて動作するかやってみる
• まだまだやることいっぱいです。。
  • prompt injection対策
  • モバイルのデザイン

五十嵐

• Amplify調査
  • Pre, devX環境用のアクセス考慮 Proxy検討
    • WAFで別のCloudFront経由させればいいかという結論になった
    • AmplifyただのBASIC認証しかないのか
  • 本番AWSにCloudFrontとRoute53の設定してもらった
  • amplify.yml
    • 複数のAmplifyのアプリを管理できそうなのでモノレポ構成やりやすそうだなって
    • Amplify自体がデプロイパイプラインのようなモノだからCircleCIとかとは別でデプロイできる仕組みはいいかもしれない（分散的な意味合いで
      • Amplify側でブランチ指定するので必要に応じてビルドタスク動くようになってるし
    • Pre側AWSのAmpifyで作成したアプリに対して本番側のAWSにRoute53、WAFの設定を置くようなterraform書けんのかな？というのが課題
      • Amplifyのブランチ指定もterraformで書けるっぽい

岩崎

• Jest続き→ testing-library導入(コンポーネントテスト)
  • https://zenn.dev/imokeeeenpi/scraps/0d24de9a416877
• screen.getByRoleで要素を取得できる
• userEvent.typeやuserEvent.clickでユーザーのタイピングやクリックを実現
• expect()で要素のその時点の中身を確認することができる
• ボタンを押す”ON”,”OFF”切り替わるだけのコンポーネントを作成
  • 初期状態がOFFなので、「一回押したら”ON”になるか」、「２回目を押したら”OFF”に戻るか」をテストするテストコードを作成
• 入力フォームのコンポーネント作成(検索フォームを想定)
  • 「入力すると文字が入力されているか」、「検索ボタンを押すと入力フォームがリセットされるか」をテストするテストコードを作成

今週の報告は以上です。
週毎に取り組みを掲載していきますので、ご期待下さいませ。