Asyntai AIチャットボットをSilverStripeに追加する方法

SilverStripe CMS向けのステップバイステップガイド

埋め込みコードの取得

プラットフォーム:

ステップ1：埋め込みコードを取得する

まず、Asyntaiダッシュボードに移動し、「埋め込みコード」セクションまでスクロールしてください。次のような固有の埋め込みコードをコピーしてください：

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

注記: 上記のコードは一例です。個人のウィジェットIDが含まれているため、ダッシュボードから固有の埋め込みコードをコピーしてください。

ステップ2：SilverStripeテンプレートに追加する（推奨）

SilverStripeサイトにチャットボットを追加する最も簡単な方法は、テーマのメインテンプレートファイルを直接編集することです：

テーマのテンプレートファイル（例：themes/yourtheme/templates/Page.ss）を開きます
閉じ</body>タグの直前に埋め込みコードを追加してください：

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

ファイルを保存し、サイトURLに?flush=1を追加してSilverStripeのキャッシュをフラッシュします

ヒント: SilverStripeは、テンプレート継承システムを備えた.ssテンプレートファイルを使用しています。ベースのPage.ssテンプレートにスクリプトを配置することで、サイトのすべてのページにチャットボットが表示されます。テーマがIncludesフォルダを使用している場合は、共有インクルードファイルにスクリプトを配置することもできます。

代替方法1：コントローラーでRequirementsクラスを使用する

SilverStripeは、JavaScriptとCSSの依存関係をプログラムで管理するためのRequirementsクラスを提供しています。これは開発者に推奨されるアプローチです：

app/src/PageController.php（またはページコントローラーファイル）を開きます
init()メソッドで、Requirements::customScript()を使用してウィジェットを動的にロードします：

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        JS);
    }
}

ファイルを保存し、yourdomain.com?flush=1にアクセスしてキャッシュをフラッシュします

注記: Requirementsクラスは、スクリプトやスタイルシートを含めるためのSilverStripe標準の方法です。Requirements::customScript()を使用すると、インラインJavaScriptが出力されます。この方法により、PageControllerで処理されるすべてのページでウィジェットがロードされます。

代替方法2：テンプレートでRequirementsを使用する

SilverStripeのテンプレート構文を使用して、.ssテンプレート内で直接JavaScriptファイルを要求することもできます：

テーマのテンプレートファイル（例：themes/yourtheme/templates/Page.ss）を開きます
テンプレートの下部、</body>の前に以下を追加します：

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

ヒント: <% require %>構文は、SilverStripeのテンプレートレベルでアセットを含める方法です。この方法ではスクリプトタグにカスタムデータ属性をネイティブに追加できないため、ウィジェットIDを設定するための小さな初期化スニペットを追加します。

代替方法3：SilverStripe設定（YAML）を使用する

設定駆動のアプローチとして、SilverStripeのYAML設定を使用してグローバルな要件を追加できます：

app/_config/app.ymlファイルを開くか作成します
カスタムエクステンションまたはコントローラーのセットアップでウィジェットを含めるための設定を追加します：

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

エクステンションファイルapp/src/Extensions/AsyntaiChatbotExtension.phpを作成します：

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        ");
    }
}

app/_config/app.ymlでPageControllerにエクステンションを適用します：

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

?flush=1を実行して設定キャッシュを再構築します

注記: YAML設定とエクステンションを使用することは、最もモジュール化されたSilverStripeのアプローチです。チャットボットの統合をメインのコントローラーロジックから分離し、コードを変更せずに簡単に有効化・無効化できます。

ステップ3：インストールの確認

コードを追加してSilverStripeのキャッシュをフラッシュした後、新しいブラウザタブでサイトを開いてください。右下にチャットウィジェットボタンが表示されます。クリックして、正しく開いて機能することを確認してください。

ウィジェットが表示されませんか？ サイトURLに?flush=1を追加してキャッシュをフラッシュしたことを確認してください。YOUR_WIDGET_IDをダッシュボードの実際のウィジェットIDに置き換えたことを確認してください。ブラウザのキャッシュをクリアするか、シークレットモードで表示してください。ブラウザコンソール（F12）を開いて、JavaScriptエラーがないか確認してください。Requirementsクラスを使用している場合は、PageControllerのinit()メソッドが正しく呼び出されていることを確認してください。