OpenAI Realtime API の音声会話アプリを WebRTC を使って実装する
2024年10月に登場したOpenAIのRealtime APIは、任意のアプリでAIとリアルタイム音声会話を実現する画期的なAPIです。 これまでWebSocketのみをサポートしていたRealtime APIですが、先日WebRTCへの対応が発表されました。 さらに、価格の大幅な引き下げや、音声品質の向上といったアップデートも加わり、より手軽に使えるAPIとなっています...
記事を読むAWS AppSync Events でリアルタイム配信を試してみる
先月末にAWS AppSyncに新しいAPIが導入されました。 https://aws.amazon.com/jp/blogs/news/announcing-aws-appsync-events-serverless-websocket-apis/ AppSyncといえばGraphQLのマネージドサービスでしたが、新しくWebSocketベースのEvent APIという選択肢が追加されました。 Event APIはWebSocketベースなので、イベント発行は即時にクライアント側で受信できます...
記事を読むOpenAI の Realtime API を使ってAIと音声会話するWebアプリを実装してみる
今までOpenAIのRealtime APIを使ってCLIベースの音声会話スクリプトを作成しました。 新登場の OpenAI の Realtime API でAIと音声会話する OpenAI の Realtime API で音声を使って任意の関数を実行する(Function calling編) このスクリプトは音声変換ツールのSoX(Sound eXchange)のおかげで簡単に実装できましたが、やっぱりWebアプリも作ってみたいですね...
記事を読むNuxt3 - 単体テスト後編 - モック・スタブ用のユーティリティを使う
前回はNuxt3の単体テスト方法として以下の内容を見てきました。 Nuxtのテストユーティリティ(@nuxt/test-utils)をセットアップする テスト用のNuxt環境上でNuxtコンポーネントをマウントしてテストを書く 後半となる今回は、テストユーティリティが提供するモック・スタブに関する機能について見てみたいと思います。 --> InformationここではVitest自体のモック機能について詳細は触れません。 少し昔のものですが、以下の記事でVitestの概要をご紹介してます...
記事を読むNuxt3 - 単体テスト前編 - セットアップ・コンポーネントをマウントする
Nuxt3がリリースされて結構時間が経ちました。その間にも様々な改良が施されて今では成熟したフレームワークになったと言えるかと思います。 ただ、リリースしてしばらくの間はテストに関するドキュメントはほとんどなく手探りの状態でした。それから時が流れ、ふと公式ドキュメントを見ると、現在はテストユーティリティやドキュメントが充実してきました。 ということで、複数回に分けてNuxt3のテストを整理してみたいと思います...
記事を読むAWS AmplifyにNuxt3のSSRアプリをゼロコンフィグでデプロイする
GAリリースから約1年経過してだいぶ成熟してきた感のあるNuxt3ですが、利用するアプリのタイプに応じてデプロイ方法が異なってきます。 SPAやプリレンダリングを使用した静的ホスティングであれば、生成した静的リソースをデプロイするだけなので比較的簡単です。 ただ、最近主流となりつつあるサーバーサイドでページを生成するSSRアプリを採用した場合は、コンテナ等のサーバー環境を別途準備する必要があり何かと手間がかかります...
記事を読むPiniaを使ってNuxtアプリの状態を共有をする
全てのアプリケーションに当てはまるものではありませんが、規模の大きなアプリケーションではどこからでもアクセスできる中央集権的なストアがほしくなってきます。 今回はNuxtを使って、Vueの状態管理ライブラリとして推奨されているPiniaの使い方を簡単に紹介したいと思います。 なぜPinia？ # Vueの状態管理ライブラリと言えば、長らくVuexでしたが現在は違います。 Vuexの公式ドキュメントのトップには以下のように書かれています...
記事を読むVue3ベースのバリデーションフレームワークVeeValidate(v4)を使う
Vue2ユーザーの皆さん、Vue3への移行はお済みでしょうか？[1] 今回はこの移行で悩ましいバリデーションフレームワークのお話です。 Vueで代表的なバリデーションフレームワークと言えばVeeValidateがあります。 VeeValidateは多機能で使いやすいフレームワークですが、Vue2系に対応するv3とVue3系に対応するv4では、別物と言ってもいいくらい使い方が変わっています。 今回はそんなVeeValidate v4の使い方を整理したいと思います...
記事を読むNuxt版のServer Componentsでサーバー環境限定でレンダリングする
Server Componentsと言えば、React[1]やNext.jsのApp Router[2]を思い浮かべる方が多いと思います。 特に、Next.jsのApp RouterはデフォルトでServer Componentsが適用されるので、今後目にするケースが増えていくことと思います。 Server Componentsは文字通りサーバー環境のみでレンダリングされるコンポーネント技術です。 これによる制約もありますが、パフォーマンスや効率性が大きく改善されます...
記事を読むVue3+D3.js アプリを Nuxt3 に移植して Netlify にデプロイしてみた
「Vue 3 と D3.js で作る可視化アプリ」の記事では、D3.js を使った可視化のための簡単な Web アプリを Vue3 の SPA で作成しました。 Nuxt3 への移植 # Vue3 がなんとなく分かった気がしたので、次に Nuxt3 への移植にトライしました。 --> Information豆蔵デベロッパーサイトには Nuxt3 の充実した入門記事があります。以下のインデックスページからどうぞ...
記事を読む
