須那

備考

submitted

Qiita

クラス（その他）

作品名

フリガナ

氏名

Email

作品を紐付けるスタジオ

作品概要

応募部門

受賞イベントの参加可否

 受賞

何期ですか

クラス

ハンドルネーム

Youtube

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPR78R9"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>


<script>
const updateBlogHeader = () => {
    // ヘッダーリンクのセレクタをまとめて取得
    const headerLinks = document.querySelectorAll([
        '#header-link-0', 
        '#header-link-1', 
        '#header-link-2', 
        '#header-link-4', 
        '#header-link-5',
        '#header-link-6',
        '#header-link-9',
        '#header-menu-link-0', 
        '#header-menu-link-1', 
        '#header-menu-link-2', 
        '#header-menu-link-4',
        '#header-menu-link-5',
        '#header-menu-link-6',
        '#header-menu-link-9'
    ].join(', ')); // 複数セレクタをカンマ区切りで結合

    // 一括で display: none を適用
    headerLinks.forEach(link => {
        if (link) {
            link.style.display = 'none';
        }
    });
};

// 特定のパスや単語を除外するための単語リスト
const exclusionWords = ['/', '/biz', '/school', '/contact', '/lp-fb'];

// 現在のパスを取得
const currentPath = window.location.pathname;

// 現在のパスが特定のページかどうかを確認
const isSpecificPage = exclusionWords.some(word => currentPath === word);

// 特定のページの場合にのみ実行される処理を実行
if (isSpecificPage) {
    console.log("特定のページです");
} else {
    updateBlogHeader(); // ヘッダーを更新
}

</script>
<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://protoout.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F5517de10-df3a-4ff4-9762-9d42e46cdf55%2F77364db4-25ca-4ba7-90ca-6005a2f39bb2%2FFrame_13.webp?table=block&id=a388dced-7312-4d1b-86a8-729b6a74b5cb&spaceId=5517de10-df3a-4ff4-9762-9d42e46cdf55&width=200&userId=&cache=v2';
            img.width = '80';
            img.height = '80';
            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 = 'プロトアウトbot';
            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/e57b98e5-0407-477b-85fa-a9549631dfb91934f178239d5?name=%E3%83%97%E3%83%AD%E3%83%88%E3%82%A2%E3%82%A6%E3%83%88bot';
            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/e57b98e5-0407-477b-85fa-a9549631dfb91934f178239d5?name=%E3%83%97%E3%83%AD%E3%83%88%E3%82%A2%E3%82%A6%E3%83%88bot';
                // 可変引数からクエリパラメータを生成
                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>

ChatGPTやClaudeなどの生成AIを活用した実践的研修カリキュラムを提供する日本初のプロトタイピング専門スクール。テクノロジーを活用する文化を組織に根付かせ、Difyなどの最新ツールを使いこなし、問題解決力を持つ次世代の人材を育成します。

「プロトアウトスタジオ | 日本初のプロトタイピング専門スクール」

プロトアウトスタジオのWebサイトはNotionを使って作っていますが、
同じようにNotionからWebサイトを作成するサービスは調べるとそこそこあるみたいなので、少し使いつつ紹介したいと思います。だいたい調べるとSuperが出てきますが、Potion、Simple.ink、Bullet、Wraptasなどいろいろ紹介していきます。

プロトアウトスタジオは、ビジネスを加速するために必要なプログラミングとプランニング（企画）のスキルを兼ね備えた人材を育成する専門スクールです。法人向けのコースも充実しています。お問い合わせはこちらから。

ビジネスを加速するスキルを身につける | プロトアウトスタジオ 

プロトアウトスタジオは、初心者でも簡単にプロトタイピングが学べるスクールです。プログラミングとプランニング（企画）の両方のスキルを身につけ、アイデアをかたちにすることができます。自分の可能性を広げたい方におすすめです。無料体験会も随時開催中。

アイデアを形にするスキルを身につける | プロトアウトスタジオ

沖中 優宜(おきなかまさよし)

沖中優宜(おきなかまさよし)