Javascript
【SharedArrayBuffer is not defined】を【.htaccess】で解決する
Web 開発中に「SharedArrayBuffer is not defined」というエラーに出会った経験はありませんか？この記事では、エラーの原因となる仕組み、そしてその解決方法について詳しく解説します。初心者の方でも理解できるよう、用語の説明や設定方法、実際のコード例も紹介しますので、ぜひ最後までご一読ください。 1. エラーの概要 1.1 SharedArrayBuffer とは？ まず初めに、SharedArrayBuffer について理解しましょう。SharedArrayBuffer は、JavaScript の一種のオブジェクトで、複数のスレッド間でバイナリデータを共有できる仕組みを提供します。 Web アプリケーションで高パフォーマンスを求める場合、メインスレッドとバックグラウンドで動作するワーカー間で効率的にデータをやり取りする必要があります。そこで SharedArrayBuffer が利用されますが、セキュリティ上の理由から使用するための条件が厳しくなっています。 1.2 エラーが発生する原因 「SharedArrayBuffer is not defined」というエラーが表示される場合、ブラウザが SharedArrayBuffer を有効にしていないか、あるいは正しいセキュリティ設定がなされていない可能性があります。このエラーが出る主な理由は、クロスオリジン分離（Cross-Origin Isolation） が有効になっていないことにあります。 2. クロスオリジン分離 (Cross-Origin Isolation) とは？ 2.1 用語の定義と背景 クロスオリジン分離 は、ブラウザのセキュリティモデルの一部です。ここで使われるいくつかの用語について説明します。 2.2 なぜクロスオリジン分離が必要なのか？ SharedArrayBuffer を利用すると、メモリの共有が可能になるため、高速な並行処理が実現できます。しかし、この仕組みは悪意のある攻撃（たとえば、メモリの不正読み取りやサイドチャネル攻撃）に悪用されるリスクがあります。そのため、ブラウザは SharedArrayBuffer を有効にする際に、通信が安全な環境（クロスオリジン分離が実現された環境）であることを求めます。 3. SharedArrayBuffer を利用するための条件 3.1 必須の HTTP ヘッダー SharedArrayBuffer を利用するためには、Web サーバーが以下の HTTP ヘッダーを正しく送信する必要があります。 3.2 なぜこれらのヘッダーが必要なのか？ これらのヘッダーを設定することで、以下のようなメリットがあります。 4. サーバー側での設定方法 4.1 サーバーを立てる必要性 多くの場合、開発中はローカル環境で HTML ファイルを直接ブラウザで開いてテストすることがよくあります。しかし、HTML ファイルをローカルで直接開く場合は、HTTP ヘッダーをサーバー側から送信することができません。そのため、SharedArrayBuffer を有効にするためには、Web サーバーを立てて HTTP 経由でアクセスする必要があります。 4.2 .htaccess を利用した設定例 Apache などの Web サーバーを利用している場合、.htaccess ファイルを用いて HTTP ヘッダーを設定することができます。以下は、HTML、HTM、JavaScript ファイルに対して必要なヘッダーを送信する設定例です。 .htaccess ファイルのポイント この設定を行うことで、Web サーバーはすべての HTML、HTM、および JavaScript ファイルに対して COEP と COOP のヘッダーを送信し、クロスオリジン分離を有効にします。 5. クロスオリジン分離が有効になった環境での確認方法 5.1 ブラウザの開発者ツールの利用 実際に設定が正しく適用されているかどうかは、ブラウザの開発者ツールを使って確認することができます。 5.2 テストページの作成 簡単なテストページを作成し、SharedArrayBuffer が正しく利用できるかどうか試してみるのも良いでしょう。以下はテスト用のサンプルコードです。 このコードを HTTP 経由でアクセスし、コンソールに「SharedArrayBuffer は利用可能です。」と表示されれば、正しく設定が反映されていると言えます。 6. 実際の利用例と応用 6.1 Web […]
JavaScriptによる音声入力
Web Audio APIのAudioContextとWeb Speech APIのSpeechRecognitionを詳しく解説しています。AudioContextはマイク入力から音声データを取得し、AnalyserNodeなどで波形解析を行い、音量や環境ノイズを検出します。一方、SpeechRecognitionはユーザーの発話をリアルタイムでテキスト変換し、イベントで結果を返します。これらを連携することで、効率的かつ動的な音声認識システムの構築方法を、初心者から上級者向けに説明しています。
Gemini API を使ったチャットボット
はじめに 近年、AI の急速な進化により、自然言語処理（NLP）の分野では高性能な生成系モデルが次々と登場しています。Google Generative AI は、その一例として、対話やコンテンツ生成に活用できる先進的なモデルです。この記事では、Google Generative AI を用いてシンプルなチャットボットを構築する方法を、サンプルコードを交えながら解説します。 対象は、プログラミング初心者から上級者まで幅広い読者を想定しています。まずは、基本的な構成や仕組みを理解し、次に実際のコードの解説、そして応用的な機能追加やセキュリティ対策について学んでいきます。 この記事を読み終える頃には、以下の内容が身につくことを目標とします。 １．Google Generative AI の概要 Google Generative AI は、自然言語生成（NLG）をはじめとする高度な生成系タスクに対応する AI モデルです。以下の特徴があります。 Google Generative AI を活用することで、ユーザーからの質問や依頼に対して、柔軟で自然な応答を返すチャットボットを構築することが可能になります。 ２．システム全体のアーキテクチャ ここで実装するチャットボットは、シンプルなクライアント・サーバーモデルに基づいています。 このような構造により、フロントエンドはシンプルなユーザーインターフェイスを提供し、バックエンドが実際の AI 処理を担う役割分担がなされています。 ３．サンプルコードの全体像 以下は、今回のサンプルコード全体です。まずは全体像を確認し、その後各パートごとに詳細に解説していきます。 GitHub：https://github.com/ar-note/gemini_apiサンプルサイト：https://gemini-api-delta-jade.vercel.appアプリURL：https://gemini-api-delta-jade.vercel.app/api バックエンド（api/index.js） フロントエンド（index.html） このサンプルコードをもとに、バックエンドとフロントエンドの各パートについて詳細に解説していきます。 ４．バックエンドの実装（api/index.js） バックエンドは、サーバーレス関数として実装され、クライアントからのリクエストを受け付けて Google Generative AI を呼び出す役割を果たします。ここでは主な実装ポイントを解説します。 CORS の設定 Web アプリケーションにおいて、異なるオリジン間でリソースを共有する場合、CORS（クロスオリジンリソースシェアリング）の設定が不可欠です。以下のコードでは、全てのオリジンからのリクエストを受け入れる設定をしています。 特に プリフライトリクエスト（OPTIONS メソッド） に対しては、すぐにステータスコード 200 を返すことで、実際のリクエストがスムーズに行われるようにしています。 API キーとプロンプトの受け取り クライアント側からは、ユーザーが入力した API キーとプロンプトが JSON 形式で送信されます。まず、これらの値が正しく存在するかをチェックし、不足している場合は 400 番のエラーを返す処理を実装しています。 Google Generative AI の呼び出し 受け取った API キーを用いて、Google Generative AI のインスタンスを生成します。利用するモデル名は 'gemini-2.0-flash' と記述していますが、実際の利用環境に合わせて更新してください。 この処理で、ユーザーのプロンプトに応じた生成コンテンツが取得され、そのテキストを JSON 形式でクライアントに返しています。 エラーハンドリング try-catch ブロックを利用して、API 呼び出し中にエラーが発生した場合の処理を行っています。エラーメッセージはログに出力し、500 エラーと共にクライアントに返す実装です。 ５．フロントエンドの実装（index.html） フロントエンドは、シンプルな HTML と JavaScript により構成されています。以下にその主な機能について説明します。 UI の作成とスタイル HTML 内では、ユーザーが API キーとプロンプトを入力できるフォーム、送信ボタン、そして結果表示用の領域が用意されています。CSS により、シンプルかつ使いやすいレイアウトが実現されています。 localStorage を利用した API キーの管理 ユーザーの利便性を向上させるため、ブラウザの localStorage を利用して API キーを保存・復元する仕組みを実装しています。これにより、再度ページを読み込んだ際に、以前入力した API キーが自動的に反映されるようになります。 AJAX による API 呼び出し 送信ボタンがクリックされると、入力されたプロンプトと […]