ナビゲーション
はじめに
ようこそ 完全なチュートリアル クイックスタート / 概要
ガイド
インストール 設定 セレクターの検索 コード例 トラブルシューティング
高度 & セキュリティ
埋め込み & スニペットパラメータ テーマ & カスタマイズ セキュリティ & プライバシー

コード例

一般的なAI Anywhereのユースケースに対するすぐに使える実装例。

13分で読めます

これらのコード例は、AI Anywhereの実際の実装を示しています。自分のプロジェクトに合わせてコピーして適用してください。

最新のHTML統合

セマンティックマークアップを使用した最新のHTML5実装。スクリプトを追加してください <head> セクションに追加し、データ属性を使用して設定します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="AI支援付きお問い合わせフォーム">
  <title>Contact Form 7用）</title>
  
  <!-- ヘルパースクリプトの埋め込み -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" 
          data-site="your-site-id"
          defer></script>
</head>
<body>
  <main>
    <form id="contact-form">
      <label for="message">あなたのメッセージ：</label>
      <textarea id="message" 
                name="message" 
                rows="5" 
                placeholder="ここにメッセージを入力してください..."
                required></textarea>
      <span data-helper-anchor 
            data-helper-token="your-helper-token"></span>
      <button type="submit">送信</button>
    </form>
  </main>
</body>
</html>

お問い合わせフォームの例

メッセージフィールドにヘルパーの支援を受けた完全なお問い合わせフォーム。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせ：</title>
  
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>
<body>
  <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>
</body>
</html>

異なるヘルパーを持つ複数のテキストエリア

異なるフォームフィールドに対して異なる設定で複数のヘルパーを初期化します。

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<form>
  <label>製品説明テキスト</label>
  <textarea id="description"></textarea>
  <span data-helper-anchor data-helper-token="product-helper-token"></span>
  
  <label>内部メモ:</label>
  <textarea id="notes"></textarea>
  <span data-helper-anchor data-helper-token="notes-helper-token"></span>
</form>

WordPress統合

テーマにスニペットを含めることで、WordPressテーマにAI Anywhereを追加します\

<?php
// Add to your theme's functions.php or a custom plugin

function add_ai_anywhere_helper() {
  ?>
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="<?php echo get_option('aia_site_id', 'your-site-id'); ?>"></script>
  <span data-helper-anchor data-helper-token="<?php echo get_option('aia_helper_token', 'your-helper-token'); ?>"></span>
  <?php
}
add_action('wp_footer', 'add_ai_anywhere_helper');
?>

WordPressオプションにヘルパー設定を保存して簡単に管理します。

React統合

フックとTypeScriptサポートを使用して、AI AnywhereをReactアプリケーションに統合します。React 16.8+および最新のReactパターンで動作します。

import { useEffect, useRef } from 'react';

interface ContactFormProps {
  siteId: string;
  helperToken: string;
}

function ContactForm({ siteId, helperToken }: ContactFormProps) {
  const scriptLoaded = useRef(false);
  
  useEffect(() => {
    // AI Anywhereスクリプトを一度だけ読み込む
    if (!scriptLoaded.current) {
      const script = document.createElement('script');
      script.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
      script.setAttribute('data-site', siteId);
      script.defer = true;
      document.head.appendChild(script);
      scriptLoaded.current = true;
      
      return () => {
        // アンマウント時にクリーンアップ
        const existingScript = document.querySelector(
          'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
        );
        if (existingScript) {
          document.head.removeChild(existingScript);
        }
        scriptLoaded.current = false;
      };
    }
  }, [siteId]);
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // フォーム送信ロジック
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="message">あなたのメッセージ：</label>
      <textarea 
        id="message" 
        name="message"
        placeholder="ここにメッセージを入力してください..."
        required
      />
      <span 
        data-helper-anchor 
        data-helper-token={helperToken}
      ></span>
      <button type="submit">送信</button>
    </form>
  );
}

export default ContactForm;

使用法: コンポーネントをインポートして使用します: <ContactForm siteId="your-site-id" helperToken="your-helper-token" />

Angular CLI 統合

Angular サービスとライフサイクルフックを使用して、Angular アプリケーションに AI Anywhere を追加します。Angular 12+ に対応しています。

// contact-form.component.ts
import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-contact-form',
  template: `
    <form (ngSubmit)="onSubmit()">
      <label for="message">あなたのメッセージ：</label>
      <textarea 
        id="message" 
        name="message"
        [(ngModel)]="message"
        placeholder="ここにメッセージを入力してください..."
        required></textarea>
      <span 
        data-helper-anchor 
        [attr.data-helper-token]="helperToken"></span>
      <button type="submit">送信</button>
    </form>
  `,
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent implements OnInit, OnDestroy {
  message = '';
  siteId = 'your-site-id';
  helperToken = 'your-helper-token';
  private scriptElement?: HTMLScriptElement;

  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit(): void {
    // AI Anywhere スクリプトを読み込む
    this.scriptElement = this.document.createElement('script');
    this.scriptElement.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
    this.scriptElement.setAttribute('data-site', this.siteId);
    this.scriptElement.defer = true;
    this.document.head.appendChild(this.scriptElement);
  }

  ngOnDestroy(): void {
    // コンポーネント破棄時にスクリプトをクリーンアップ
    if (this.scriptElement && this.document.head.contains(this.scriptElement)) {
      this.document.head.removeChild(this.scriptElement);
    }
  }

  onSubmit(): void {
    // フォーム送信ロジック
    console.log('Message:', this.message);
  }
}

注意： 必ずインポートしてください FormsModule あなたの app.module.ts のために ngModel が動作するように。

Vue.js 統合

コンポジション API またはオプション API を使用して、Vue.js アプリケーションに AI Anywhere を統合します。Vue 3 に対応しています。

<template>
  <form @submit.prevent="handleSubmit">
    <label for="message">あなたのメッセージ：</label>
    <textarea 
      id="message" 
      v-model="message"
      placeholder="ここにメッセージを入力してください..."
      required></textarea>
    <span 
      data-helper-anchor 
      :data-helper-token="helperToken"></span>
    <button type="submit">送信</button>
  </form>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const message = ref('');
const siteId = 'your-site-id';
const helperToken = 'your-helper-token';
let scriptElement: HTMLScriptElement | null = null;

onMounted(() => {
  // AI Anywhere スクリプトを読み込む
  scriptElement = document.createElement('script');
  scriptElement.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
  scriptElement.setAttribute('data-site', siteId);
  scriptElement.defer = true;
  document.head.appendChild(scriptElement);
});

onUnmounted(() => {
  // コンポーネントのアンマウント時にスクリプトをクリーンアップ
  if (scriptElement && document.head.contains(scriptElement)) {
    document.head.removeChild(scriptElement);
  }
});

const handleSubmit = () => {
  // フォーム送信ロジック
  console.log('Message:', message.value);
};
</script>

代替案（オプション API）： 使用する mounted() および beforeUnmount() オプション API を好む場合はフックを使用します。

バニラ SPA 統合

AI AnywhereをバニラJavaScriptのシングルページアプリケーションに追加します。どのルーティングライブラリやフレームワークなしのSPAアーキテクチャでも動作します。

// ai-anywhere-loader.js
class AIAnywhereLoader {
  constructor(siteId) {
    this.siteId = siteId;
    this.scriptLoaded = false;
  }

  load() {
    if (this.scriptLoaded) {
      return Promise.resolve();
    }

    return new Promise((resolve, reject) => {
      // スクリプトが既に存在するか確認
      const existingScript = document.querySelector(
        'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
      );
      
      if (existingScript) {
        this.scriptLoaded = true;
        resolve();
        return;
      }

      // スクリプトを作成して読み込む
      const script = document.createElement('script');
      script.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
      script.setAttribute('data-site', this.siteId);
      script.defer = true;
      
      script.onload = () => {
        this.scriptLoaded = true;
        resolve();
      };
      
      script.onerror = () => {
        reject(new Error('AI Anywhereスクリプトの読み込みに失敗しました'));
      };
      
      document.head.appendChild(script);
    });
  }

  unload() {
    const script = document.querySelector(
      'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
    );
    
    if (script) {
      document.head.removeChild(script);
      this.scriptLoaded = false;
    }
  }
}

// アプリの読み込み時に初期化
const aiLoader = new AIAnywhereLoader('your-site-id');

// DOMが準備完了したら読み込む
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => aiLoader.load());
} else {
  aiLoader.load();
}

// SPAルートでの使用法
function renderContactForm() {
  return `
    <form id="contact-form">
      <label for="message">あなたのメッセージ：</label>
      <textarea id="message" placeholder="ここにメッセージを入力してください..." required></textarea>
      <span data-helper-anchor data-helper-token="your-helper-token"></span>
      <button type="submit">送信</button>
    </form>
  `;
}

使用法: メインアプリファイルにローダーをインポートし、SPAルート全体で使用します。

カスタムスタイリングの例

デフォルトのヘルパーボタンスタイルを上書きしてサイトに合わせます\

<style>
  /* ヘルパーボタンの外観をカスタマイズ */
  .ai-helper-button {
    background-color: #007bff !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  .ai-helper-button:hover {
    background-color: #0056b3 !important;
  }
</style>

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<form>
  <textarea id="message" placeholder="あなたのメッセージ："></textarea>
  <span data-helper-anchor data-helper-token="your-helper-token"></span>
</form>