2023/3/13週もくもく会 GPT-4, Amplify, VoiceVox WebGPU etc.

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

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

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

今週のもくもく会

谷

Webアプリケーションアクセシビリティ本読書
- https://zenn.dev/link/comments/86bffe30b45236
- 引き続きマシンリーダブルであることの重要性
  - マシンリーダブルだと、音声読み上げ, VUI, 点字などに変換できる
  - 今後出てくる未知の技術とも親和性が高い状態が作れる
- 画像をマシンリーダブルにする場合
  - imgタグ→alt属性をつける
  - svgタグ→titleタグを追加 or aria-label属性を追加

<img src="..." alt="◯◯">

<svg role="img">
  <title>◯◯</title>
  <path ...>
</svg>

<svg role="img" aria-label="◯◯">
  <path ...>
</svg>

- 名前の無いUI（+ボタンなど）
  - aria-laberlもしくは、labelを追加
  - これがないとスクリーンリーダーでの読み上げが出来ない為、UIが存在しない扱い
- 装飾の為の視覚表現がテキスト情報をもっている
  - 装飾の為に —— などのテキストをもちいたりしてしまうと、マシンにはノイズになる
  - 背景にimgタグを用いた場合もノイズ
    - cssのbackgroundを用いる
    - alt属性を空にする
    - aria-hidden=“true” を付与する
- コンテンツとコンテンツ間の関係性も情報になる
  - 表、見出し、キャプションなども正しく設定されていないとマシンが読めない
  - なので、divではなく、h1~h6、p、labelなどは適切に扱う必要がある
  - SEOに影響
- 見た目どおりにマークアップしてしまうと、マシンが正しい順序で読まない

<p>
  <span>姓</span>
  <span>名</span>
</p>
<p>
  <input />
  <input />
</p>

- 上記の場合、スクリーンリーダーでは「姓　名　テキストを編集　テキストを編集」となり、どちらの入力欄に姓名を入力するかの確信が持てなくなる。
- tableをレイアウトに使うのは関係性が見えなくなるので、マシンにとって悪いパターンが多
  - dl, dt, ddの様な定義タグを使う

ChatGPTのモデルGPT-4を触る
- 顔の動きをトラッキングしてカーソルを動かすモック
  - https://twitter.com/high_g_engineer/status/1636061599420276738?s=20

五十嵐

Amplify
- GitHubのレポジトリAdmin権限もらってAWS ConsoleとGitHubの連携してみた
- デプロイがうまくできなかった

磯野

ChatGPTとVoiceVoxのAPIを組み合わせて音声生成
- やりたいことは達成できた
- ただVoiceVoxの音声生成APIがやたら重い
  - 「こんにちは」だけでも15秒
  - 50文字くらいになると、20分くらいレスポンスが返ってこない
DDD実装のドキュメント読む
- だいぶヘキサゴナルアーキテクチャなどが何をするためのものか理解できた

高橋

TypeScript
クラスとインターフェース
- TypeScriptの型宣言の方法　typeとinterface
  - 宣言できる対象（interfaceはオブジェクトとクラスの型宣言のみ、typeはなんでも）や同名で宣言したときの動作、型の拡張の方法などに違いがある

デコレーター

class Sample {
  constructor(private name: string) {}

  @outputLog
  greet() {
    sleep(3);
    console.log(`hello ${this.name}`);
  }
}

new Sample('world').greet();

//Sample#greet: start
//hello world
//Sample#greet: 3001.297ms

@をつけることでその下のオブジェクトに以下のものを付与することができる
- クラス宣言
- メソッド
- アクセサ(get, set)
- プロパティ
- メソッド引数など
上のコードではログ出力するメソッドを付与している

友利

DIコンテナ
- 内部の仕組み
  - 複数インスタンス生成
  - singleton
- CakePHPとLaravelにおける使い方
- アンチパターン
WebGPU
- WebGL, WebGL2などの違いと位置付け
  - 内部の細かい違いは追えてない
- 右手系、左手系の違い
- Wgpuを使って描画
  - https://sotrh.github.io/learn-wgpu/
  - 三角形の描画
  - 立方体の描画
  - textureの貼り付け
  - カメラ位置の移動
  - インスタンス化

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

2023/3/13週 もくもく会 GPT-4, Amplify, VoiceVox WebGPU etc.

今週のもくもく会

関連記事