須那

画像

Date

自己紹介

クラス名

ロールアップ

日付 1

Formula

学生のメールアドレス

ウェブサイトURL

電話番号

学生の出席番号

学生の誕生日

学生の住所

学生の性別

学生の国籍

学生の成績

学生の所属クラブ

学生を選択

投稿者

名前

サムネ画像

作成日

更新日

クラス

タイトル

publish

プロトアウトブログALL📗

運営日記

卒業生インタビュー

ニュース

プロトアウト学生

<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-7', 
        '#header-menu-link-0', 
        '#header-menu-link-1', 
        '#header-menu-link-2', 
        '#header-menu-link-4', 
        '#header-menu-link-7'
    ].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などいろいろ紹介していきます。

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

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

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

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

手順書アプリを内製したい！

手順書アプリを内製したい！

制作物の紹介

なぜそれを作ろうと思ったのか

制作してみた結果