サイトのロゴ
記事一覧に戻る
【実践】Web Speech APIとGoogle翻訳で作る多言語音声変換アプリ —— サーバーレス関数を学ぶ実践プロジェクト

【実践】Web Speech APIとGoogle翻訳で作る多言語音声変換アプリ —— サーバーレス関数を学ぶ実践プロジェクト

このプロジェクトでは、Web Speech APIとGoogle翻訳APIを使ったテキスト読み上げ・翻訳アプリの開発を通じて、サーバーレス関数の実装方法を学べます。Vercel CLIを使ってAPIキーを安全に管理し、フロントエンドとバックエンドの連携、複数言語での音声出力機能の実装、そしてクラウドへのデプロイまでの一連の流れを習得できるようになります。

JavaScriptTailwind CSS

TTS & Translate App プロジェクト概要

https://www.youtube.com/watch?v=V0P3Opf-zUs&list=LL&index=1&t=3s

  • このプロジェクトでは、テキストを音声に変換し（TTS）、かつ異なる言語に翻訳できるアプリケーションを作成します。

  • プロジェクトの主要な学習ポイントは「サーバーレス関数」で、Google翻訳APIのキーをクライアントサイドに公開せずに使用する方法が含まれています。

  • VercelのCLIを使用してローカルマシン上でサーバーレス関数を作成し、最終的にVercelにデプロイしてライブアプリケーションを公開します。

  • ウェブスピーチAPIを使用して様々な声と言語（英語、スペイン語、フランス語、ドイツ語、イタリア語、日本語、中国語）でテキストを読み上げる機能を実装しています。

  • プロジェクト構造はシンプルで、publicフォルダ（HTML、CSS、クライアントサイドJavaScript）とapiフォルダ（サーバーレス関数、Google翻訳API通信）に分かれています。

  • プロジェクトではTailwind CSSを使用してUIをスタイリングし、フロントエンドはフレームワークを使わずバニラJavaScriptで実装しています。

  • Google Cloud PlatformでTranslation APIを有効にし、APIキーを生成してプロジェクトに統合する手順も説明されています。

  • このプロジェクト全体を通して、フロントエンドでのWeb Speech API利用、サーバーレスバックエンド開発、APIキーの安全な管理など、実践的なウェブ開発スキルを学ぶことができます。