完全なチュートリアル

まず、AI Anywhereアカウントにサインアップする必要があります。

1. 次に移動： AI Anywhere ホームページ
2. クリック "始める" ヘッダーのボタン
3. お好みのソーシャルアカウント（Google、GitHubなど）でサインアップしてください
4. You'll be automatically logged into your dashboard

次に、ユーザーがコンタクトフォームメッセージを書くのを支援するヘルパーを作成しましょう。

1. ダッシュボードに移動 "新しいヘルパー"
2. ヘルパーに「」のような説明的な名前を付けてください "お問い合わせフォームの例"
3. このヘルパーが属するグループを選択してください
4. クリック "ヘルパーを保存"

ヘルパーを設定

ヘルパーを作成または編集する際に設定するもの：

• ヘルパーアンサー: Enter a well-written example of what you want users to write. For a contact form, this might be a complete, professional message that includes all necessary information. The example should be complete with mock names, specific details, and realistic content (e.g., "Hello, I'm John Smith writing to inquire about your web development services. I'm particularly interested in building an e-commerce platform for my business. Could you please provide more information about your pricing and timeline? Thank you for your time.").
• キーワードおよび/またはルール: ユースケースに重要なキーワードやルールを追加してください（例：「連絡」、「問い合わせ」、「質問」、「サポート」）。
• ボタンテーマ設定 サイトのデザインに合わせて、ヘルパーボタンの外観（色、テキスト）をカスタマイズします。

テキストエリア、フォーム、入力フィールドのCSSセレクタを見つけて、AI Anywhereヘルパーをウェブサイトに統合する方法を学びましょう。

1. ヘルパー設定で、 "スニペットを生成" ボタンをクリックします
2. 2つのコードスニペットが表示されます:
   • スクリプトタグ: サイトに貼り付け
   • アンカースパン: ヘルパートークンを含む
3. 両方のスニペットをコピーしてください - 次のステップで必要になります

スニペットは2つの部分で構成されています：

<!-- スクリプトタグ（<head>に配置） -->
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<!-- 例：テキストエリアの横にヘルパーボタンが表示されます -->
<span data-helper-anchor data-helper-token="your-helper-token"></span>

ヘルパースクリプトを読み込む

1. ウェブサイトのHTMLファイル（またはテンプレート）を開いて、次を見つけてください
2. 見つける <head> セクション
3. セクション。スニペットを閉じタグの直前に貼り付けてください </head> タグ。

このように見えるはずです：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>お問い合わせ：</title>
  
  <!-- ヘルパースクリプトの埋め込み -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>

次に、ヘルパーボタンを表示したいテキストエリアの隣にアンカースパンを追加します。

1. 連絡フォーム（またはヘルパーを配置したいフォーム）を見つける
2. ユーザーがメッセージを入力するテキストエリアを見つける
3. テキストエリアの直後（または近くの場所）にアンカースパンを追加します

こちらは両方の部分を示す完全な例です：

<form id="contact-form">
  <div>
    <label for="name">名前</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">メール：</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="message">あなたのメッセージ：</label>
    <textarea id="message" name="message" rows="6" required></textarea>
    <!-- ヘルパーボタンはこの要素の隣に表示されます。 -->
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </div>
  
  <button type="submit">連絡メッセージ：</button>
</form>

すべてが正しく動作していることを確認しましょう。

1. ヘルパーを保存
2. ウェブサイトを開いて
3. 連絡フォームのあるページに移動します
4. ページのテキストエリアの横にヘルパーボタンがあるか確認してください

私たちが保存するもの

• 例：テキストエリアの横にヘルパーボタンが表示されます
• ボタンは設定した正しいスタイリング（色、テキスト、サイズ）を持っています
• ボタンをクリックすると、ヘルパーインターフェースが開きます
• テキストを入力してヘルパーボタンをクリックすると、提案が表示されます

トラブルシューティング

ヘルパーボタンが

• Check your browser's developer console (F12) for any JavaScript errors
• スクリプトタグが <head> セクション
• アンカースパンが存在し、正しいヘルパートークンを含んでいることを確認してください
• キャッシュされたファイルをクリアするには、ページをハードリフレッシュしてください（Ctrl+Shift+R または Cmd+Shift+R）。
• サイトIDとヘルパートークンが正しいことを確認してください

ラベルを「ヘルパー」に設定するか、ブランドに合わせてカスタマイズします。

カスタマイズできる内容

• 外観をカスタマイズ ヘルパーボタンの色とテキストを変更します。
• ヘルパーアンサー: ユーザーに達成してほしい内容を示す高品質な例文を貼り付けてください。
• キーワード: 提案の精度を向上させるためにキーワードを追加または削除する
• 総ヘルパー数: 異なるフォームやテキストエリア用に追加のヘルパーを作成する

カスタマイズ

1. ダッシュボードに移動
2. 選択 "ヘルパー", 編集したい特定のヘルパーを選択します
3. クリック "編集" ボタンをクリックします
4. 変更を保存
5. 変更を保存

すべてをローカルでテストしたら、本番サイトにデプロイする時です。

デプロイ前のチェックリスト

• ローカル/ステージング環境でヘルパーをテスト済み
• ヘルパーボタンが次の要素の横に表示されるはずです：
• 異なるブラウザでテストする：
• モバイルデバイスでテスト済み
• ヘルパーの提案が有用で正確であることを確認済み

遅延したデプロイ

1. 更新されたHTMLファイルをウェブサーバーにアップロードする
2. スクリプトタグが <head> ヘルパーボタンを配置したい場所にアンカーを追加
3. アンカースパンがテキストエリアの隣に正しく配置されていることを確認する
4. ライブサイトでヘルパーをテストする
5. 問題やエラーがないか監視する