浅井聖一のオートメーション

お問い合わせカテゴリ

希望連絡方法

資料の種類

お住まいの地域

お問い合わせの優先度

添付ファイル

お問い合わせのステータス

希望する回答期限

会社のウェブサイト

お客様の役職

個人情報の取り扱い

お問い合わせ理由

メールアドレス

お電話番号

お問い合わせ詳細

お名前

ロコアシを知ったきっかけ

会社名・団体名

提出日時

回答者

登録日

To-do

In progress

Complete

ステータス

購読者名

thumbnail

Cover

Feed URL

Title

個人情報の取り扱いradio

個人情報の取り扱い2

個人情報の取り扱い (1)

回答

フォームビルダー

メルマガ購読者一覧

ステータス別

Status Board

All Feeds

お問い合わせ／資料ダウンロード

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MWDKTL2"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<script>
        // CSSとアイコンのリンクを追加する関数
        function addStylesheet(href) {
            let link = document.createElement('link');
            link.href = href;
            link.rel = 'stylesheet';
            document.head.appendChild(link);
        }

        // トグルボタンを作成し、追加する関数
        function createToggleButton() {
            const toggleBtn = document.createElement('div');
            toggleBtn.id = 'chatbot-toggle_button';
            const anchor = document.createElement('a');
            anchor.id = 'chat-button';
            anchor.href = '#';
            anchor.addEventListener('click', event => {
              event.preventDefault();
              toggleChatbox();
            });
            const img = document.createElement('img');
            img.src = 'https://firebasestorage.googleapis.com/v0/b/mabo-f1cc7.appspot.com/o/chaticon.png?alt=media&token=1777070f-a83c-403d-8c83-f387f68ecd52';
            img.width = '100';
            img.height = '100';
            anchor.appendChild(img);
            toggleBtn.appendChild(anchor);
            document.body.appendChild(toggleBtn);
        }

        // チャットボックスのヘッダーを作成する関数
        function createChatboxHeader() {
            const header = document.createElement('div');
            header.id = 'chatbot-header';
            header.style.background = '#4169e1';
            const logo = document.createElement('div');
            logo.id = 'chatbot-logo';
            logo.innerText = 'locoassi_lp_chatbot';
            const closeIcon = document.createElement('i');
            closeIcon.id = 'chatbot-close-icon';
            closeIcon.className = 'material-icons material-symbols-outlined waves-light';
            closeIcon.innerText = 'close';
            closeIcon.addEventListener('click', event => {
              event.preventDefault();
              toggleChatbox();
            });
            header.appendChild(logo);
            header.appendChild(closeIcon);
            return header;
        }

        // チャットボックスを作成し、追加する関数
        function createChatbox() {
            const chatbox = document.createElement('div');
            chatbox.id = 'chatbot';
            chatbox.style.display = 'none';

            const header = createChatboxHeader();
            const body = document.createElement('div');
            body.id = 'chatbot-body';
            const iframe = document.createElement('iframe');
            iframe.id = 'inline-frame';
            iframe.width = '100%';
            iframe.height = '100%';
            iframe.dataSrc = 'https://miibo.jp/chat/481e1bdb-3f36-460e-ae51-22da01bf9d45197a1238dad172?name=locoassi_lp_chatbot';
            iframe.scrolling = 'no';
            iframe.frameBorder = 'no';
            body.appendChild(iframe);
            chatbox.appendChild(header);
            chatbox.appendChild(body);
            document.body.appendChild(chatbox);
        }

        // チャットボックスの表示/非表示を切り替える関数
        function toggleChatbox(utterance, ...states) {
            var chatbox = document.getElementById('chatbot');
            var iframe = document.getElementById('inline-frame');

            // ここでイベントオブジェクトではなく、文字列または未定義の値が渡されることを確認します。
            if (typeof utterance !== 'string') {
                utterance = null;
            }

            if (chatbox.style.display === 'none' || utterance) {
                chatbox.style.display = 'block';
                var src = 'https://miibo.jp/chat/481e1bdb-3f36-460e-ae51-22da01bf9d45197a1238dad172?name=locoassi_lp_chatbot';
                // 可変引数からクエリパラメータを生成
                states.forEach(state => {
                    if (state.key && state.value) {
                        src += src.includes('?') ? '&' : '?';
                        src += `${encodeURIComponent(state.key)}=${encodeURIComponent(state.value)}`;
                    }
                });

                // 以下の条件を追加して、再読み込みの必要性をチェック
                if (!iframeLoaded || (utterance && lastUtterance !== utterance)) {
                    if (utterance) {
                        src += src.includes('?') ? '&' : '?';
                        src += "utterance=" + encodeURIComponent(utterance);
                    }
                    iframe.src = src;
                    iframeLoaded = true;
                    lastUtterance = utterance;
                }
            } else {
                chatbox.style.display = 'none';
            }
        }
        // イベントリスナーを設定する関数
        function setupEventListeners() {
            document.querySelectorAll('.chatButton').forEach(button => {
                button.addEventListener('click', event => {
                    event.preventDefault();
                    const utterance = button.getAttribute('data-utterance');
                    const statesData = button.getAttribute('data-states');
                    let states = [];
                    try {
                        // JSON 形式の文字列をオブジェクトに変換
                        const statesObj = JSON.parse(statesData);
                        // オブジェクトから key-value ペアの配列を生成
                        states = Object.keys(statesObj).map(key => ({ key, value: statesObj[key] }));
                    } catch (e) {
                        console.error("Error parsing states data", e);
                    }

                    toggleChatbox(utterance, ...states);
                });
            });
        }

        // メイン実行部
        addStylesheet('https://fonts.googleapis.com/icon?family=Material+Icons');
        addStylesheet('https://miibo.jp/chat3.css');
        createToggleButton();
        createChatbox();
        setupEventListeners();

        var iframeLoaded = false; // iframeがロードされたかどうかを追跡するフラグ
        var lastUtterance = ""; // 最後に発話した内容を追跡するフラグ
    </script>

ロコアシ

【AIXの前に絶対にやっておくべきDX】ダウンロード