トラブルシューティング

ヘルパーボタンが表示されない

同じテキストエリアの横に重複したヘルパーボタンが表示されます。

考えられる解決策:

• ブラウザのキャッシュをクリアする: ページをハードリフレッシュする（Windows/LinuxではCtrl+Shift+R、MacではCmd+Shift+R）ことで、\
• スクリプトが読み込まれているか確認する: ブラウザの開発者ツール（F12）を開き、コンソールタブに移動してJavaScriptエラーがないか確認します。スクリプトがエラーなく読み込まれていることを確認してください。
• スニペットの配置を確認する: スクリプトタグが <head> セクションにあり、 <body>. スクリプトはページコンテンツの前に読み込まれるべきです。
• テキストエリアを確認する: ヘルパーは <textarea> および <input type="text"> 要素の隣にのみ表示されます。これらの要素がページに存在することを確認してください。
• セレクタを確認する: CSSセレクタが正しく、ページ上の実際のテキストエリア要素をターゲットにしていることを再確認してください。
• 広告ブロッカーを無効にする: 一部の広告ブロッカーやプライバシー拡張機能がヘルパースクリプトに干渉する可能性があります。シークレット/プライベートウィンドウでテストしてください。

コンテンツセキュリティポリシー（CSP）エラー

ブラウザのコンソールにCSP違反が表示され、スクリプトの読み込みが妨げられています。

Content-Security-Policy: script-src 'self' https://ai-anywhere.ai;

HTMLでメタタグを使用している場合:

<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' https://ai-anywhere.ai;">

ヘルパーボタンが反応しない

ヘルパーボタンは表示されますが、クリックしても何も起こりません。

考えられる解決策:

• ブラウザのコンソールを確認する: 開発者ツール（F12）を開き、認証またはネットワークの問題を示す可能性のあるエラーメッセージを探します。
• ネットワークリクエストを確認する: 開発者ツールのネットワークタブで、AI AnywhereへのAPIリクエストが成功している（ステータス200）ことと、ブロックされていないことを確認してください。
• 異なるブラウザでテストする： Chrome、Firefox、またはSafariでテストして、ブラウザ固有の問題を除外してください。
• ブラウザ拡張機能を無効にする： 一部の拡張機能はJavaScriptの実行を妨げることがあります。拡張機能を無効にしてテストしてください。

複数のヘルパーボタンが表示される

同じテキストエリアの横に重複したヘルパーボタンが表示されます。

解決策：

• 重複したスニペットを確認する： HTML/テンプレートを検索して、スクリプトタグがページに一度だけ表示されることを確認してください。 <head> セクションに追加するだけです。
• React/Vue/Angular： スクリプトが一度だけ読み込まれるようにする： useEffect (React)またはマウントフックを使用し、再読み込みを防ぐガードを追加してください。
• ローダーガードを使用する： スクリプトを追加する前に、既に存在するかどうかを確認してください：
  if (!document.querySelector('script[src*="ai-anywhere.ai"]')) { // Add script here }

パフォーマンスまたは読み込みの問題

ヘルパースクリプトがページの読み込みを遅くしたり、パフォーマンスの問題を引き起こしたりしています。

解決策：

• 非同期読み込みを使用する： 追加する async スクリプトタグに属性を追加します（ただし、スクリプトは既に非同期で読み込まれます）。
• スクリプトの読み込みを遅延させる： ページに多くのスクリプトがある場合、ヘルパースクリプトを defer 属性を使用してページ解析後に読み込むことを検討してください。
• ネットワークタイミングを確認する： ブラウザの開発者ツールのネットワークタブを使用して、スクリプトのダウンロードに異常に時間がかかっていないか確認してください。
• ページを最適化する： ヘルパースクリプトは軽量（約50KB）ですが、ページが既に遅い場合は、他のリソースを最初に最適化してください。

スタイルの競合

ヘルパーボタンがサイトのデザインに合わない、またはCSSと競合しています。

解決策：

• CSSで上書きする： より具体的なセレクタを使用するか !important ヘルパースタイルを上書きするには：
  .ai-helper-button { background-color: #your-color !important; border-radius: 8px !important; }
• テーマカスタマイズを使用する： ヘルパー設定でボタンの色とスタイルをブランドに合わせて構成します。
• CSSの特異性を確認する： カスタムスタイルがヘルパーのデフォルトスタイルよりも高いCSS特異性を持つようにしてください。

ブラウザ互換性の問題

ヘルパーは一部のブラウザでは動作しますが、他のブラウザでは動作しません。

問題が解決しない場合：

• ブラウザを更新してください： ブラウザの最新バージョンを使用していることを確認してください。
• JavaScriptが有効になっているか確認してください： ブラウザの設定でJavaScriptが有効になっていることを確認してください。
• シークレットモードでテスト： プライベート/シークレットモードでテストして、拡張機能の競合を排除してください。