見出し画像

シン・サーチ窓登場！埋め込み検索窓をクロードで刷新【アーティファクト編⑯】ーGoogleサイトで作るグループウェア(168)ー

R連続体

🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！


この記事を読んで欲しい方

企業DXや校務DXの進め方に悩んでいる方
クラウドアプリの導入に悩んでいる方
自分だけのGoogleサイトを作ってみたい方

①Claude3.5で埋め込み検索窓を刷新！

　みなさんこんにちは。
　クロードアーティファクト使ってますか？
　引き続き、いろいろなユースケースを探っていますが、今回は、以前作成していたGoogleサイトの「埋め込み検索窓」をクロード3.5を使って刷新しました！
　内容は、マイドライブと共有ドライブに分かれていたコードを一体化し、すべてクロードで作り直しました。

②表示とコードの説明

　　以下が、埋め込んだ検索窓とコードです。クロードに指示していちから作成したので綺麗になっています。

埋め込んだ検索窓
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Googleドライブ検索</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        .search-form {
            display: flex;
            width: 100%;
            max-width: 600px;
            gap: 10px;
        }
        .drive-select-wrapper, .search-input-wrapper {
            border: 1px solid #dfe1e5;
            border-radius: 24px;
            font-size: 14px;
            outline: none;
        }
        .drive-select-wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            padding-left: 12px;
        }
        .material-icons {
            color: #5f6368;
            font-size: 20px;
            margin-right: 8px;
        }
        .drive-select {
            flex: 1;
            padding: 8px 30px 8px 0;
            border: none;
            background: transparent;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: url('data:image/svg+xml;utf8,<svg fill="%23757575" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 8px center;
            background-size: 20px;
        }
        .search-input-wrapper {
            flex: 2;
            display: flex;
            align-items: center;
            padding: 0 12px;
        }
        .search-input {
            border: none;
            outline: none;
            padding: 8px 0 8px 8px;
            width: 100%;
            font-size: 14px;
            background: transparent;
        }
        .drive-select option[value=""] {
            font-weight: bold;
        }
        .drive-select option[value="separator"] {
            font-weight: bold;
            background-color: #f1f3f4;
        }
    </style>
</head>
<body>
    <div class="container">
        <form id="searchForm" class="search-form">
            <div class="drive-select-wrapper">
                <span class="material-icons">folder</span>
                <select id="driveSelect" class="drive-select" required>
                    <option value="">ドライブを選択</option>
                    <option value="mydrive">マイドライブ</option>
                    <option value="separator" disabled>-- 共有ドライブ --</option>
                    <!-- ここに共有ドライブのオプションが動的に追加されます -->
                </select>
            </div>
            <div class="search-input-wrapper">
                <span class="material-icons">search</span>
                <input type="text" id="searchQuery" class="search-input" placeholder="検索キーワードを入力" required>
            </div>
        </form>
    </div>

    <script>
        // 共有ドライブの情報（実際の値に置き換えてください）
        const sharedDrives = [
            { name: "営業部ドライブ", id: "0ABCdefGHIjklMNopqr" },
            { name: "開発部ドライブ", id: "0DEFghiJKLmnoPQRst" },
            { name: "マーケティング部ドライブ", id: "0UVWxyzABCdefGHIjk" }
        ];

        // プルダウンメニューにオプションを追加
        const driveSelect = document.getElementById('driveSelect');
        sharedDrives.forEach(drive => {
            const option = document.createElement('option');
            option.value = drive.id;
            option.textContent = drive.name;
            driveSelect.appendChild(option);
        });

        // 検索実行関数
        function executeSearch() {
            const driveId = driveSelect.value;
            const searchQuery = document.getElementById('searchQuery').value.trim();
            if (driveId && searchQuery) {
                let searchUrl;
                if (driveId === 'mydrive') {
                    searchUrl = `https://drive.google.com/drive/search?q=${encodeURIComponent(searchQuery)}`;
                } else {
                    searchUrl = `https://drive.google.com/drive/folders/${driveId}?restrict=sharedDrive&q=${encodeURIComponent(searchQuery)}`;
                }
                window.open(searchUrl, '_blank');
            }
        }

        // フォーム送信時の処理
        document.getElementById('searchForm').addEventListener('submit', function(e) {
            e.preventDefault();
            executeSearch();
        });

        // エンターキーでの検索実行
        document.getElementById('searchQuery').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                executeSearch();
            }
        });
    </script>
</body>
</html>

　いつものように、コードをコピーして、Googleサイトに埋め込むでHTMLを埋め込んでください。

　表示は、左にドライブの選択、右に検索キーワード入力が並びます。　
　ドライブを選択をプルダウンすると、検索するドライブ（マイドライブか各共有ドライブ）が出てきます。共有ドライブは、以前お話したようにGoogleの仕様で共有ドライブ全体での一括検索はできません。

　ドライブを選択して、検索キーワードを入れ、ENTER（RETURN)キーを入力すると、検索が実行されます。
　ドライブが選択されていないと、検索は実行されません。

ドライブを選択できる

　実際に使う場合の共有ドライブの設定ですが、コードのconst sharedDrivesの中にフォルダ名とフォルダIDの配列として組み込みますので、実際に利用する場合は、ここだけを変更してください。（　name:に共有ドライブフォルダ名、id:にフォルダID　）

実際に使う場合は共有ドライブの名前とフォルダIDを置き換えること

　また、今回作成した、クロードのファイルを公開していますので、フォントを大きくしたい、色を変えたい等、改良したい方はRemixでやってみてください。（P.SにRemixを２種類のせています）


③おわりに

　いかがでしたでしょうか？
　以前作っていたプログラムも、クロードで新しく刷新でき、再プログラムへの精神的負担も非常に下がりました。

　また、今回のやり方だと、検索窓へ、いろいろな機能を追加できますので、以前要望のあった、ラベル検索等にも今後挑戦してみたいと思います。

挑戦！

P.S Remix用

プロンプト＞フォントを16ポイントに大きくして

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Googleドライブ検索</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            font-size: 16px;  /* ベースフォントサイズを16pxに変更 */
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        .search-form {
            display: flex;
            width: 100%;
            max-width: 700px;  /* フォームの最大幅を広げる */
            gap: 12px;  /* ギャップを少し広げる */
        }
        .drive-select-wrapper, .search-input-wrapper {
            border: 1px solid #dfe1e5;
            border-radius: 28px;  /* 境界線の丸みを増やす */
            font-size: 16px;
            outline: none;
        }
        .drive-select-wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            padding-left: 14px;  /* パディングを少し増やす */
        }
        .material-icons {
            color: #5f6368;
            font-size: 24px;  /* アイコンサイズを大きくする */
            margin-right: 10px;  /* マージンを少し増やす */
        }
        .drive-select {
            flex: 1;
            padding: 10px 34px 10px 0;  /* パディングを調整 */
            border: none;
            background: transparent;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: url('data:image/svg+xml;utf8,<svg fill="%23757575" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 10px center;
            background-size: 24px;  /* 背景アイコンサイズを大きくする */
            font-size: 16px;  /* フォントサイズを16pxに */
        }
        .search-input-wrapper {
            flex: 2;
            display: flex;
            align-items: center;
            padding: 0 14px;  /* パディングを少し増やす */
        }
        .search-input {
            border: none;
            outline: none;
            padding: 10px 0 10px 10px;  /* パディングを調整 */
            width: 100%;
            font-size: 16px;  /* フォントサイズを16pxに */
            background: transparent;
        }
        .drive-select option[value=""] {
            font-weight: bold;
        }
        .drive-select option[value="separator"] {
            font-weight: bold;
            background-color: #f1f3f4;
        }
    </style>
</head>
<body>
    <div class="container">
        <form id="searchForm" class="search-form">
            <div class="drive-select-wrapper">
                <span class="material-icons">folder</span>
                <select id="driveSelect" class="drive-select" required>
                    <option value="">ドライブを選択</option>
                    <option value="mydrive">マイドライブ</option>
                    <option value="separator" disabled>-- 共有ドライブ --</option>
                    <!-- ここに共有ドライブのオプションが動的に追加されます -->
                </select>
            </div>
            <div class="search-input-wrapper">
                <span class="material-icons">search</span>
                <input type="text" id="searchQuery" class="search-input" placeholder="検索キーワードを入力" required>
            </div>
        </form>
    </div>

    <script>
        // 共有ドライブの情報（実際の値に置き換えてください）
        const sharedDrives = [
            { name: "営業部ドライブ", id: "0ABCdefGHIjklMNopqr" },
            { name: "開発部ドライブ", id: "0DEFghiJKLmnoPQRst" },
            { name: "マーケティング部ドライブ", id: "0UVWxyzABCdefGHIjk" }
        ];

        // プルダウンメニューにオプションを追加
        const driveSelect = document.getElementById('driveSelect');
        sharedDrives.forEach(drive => {
            const option = document.createElement('option');
            option.value = drive.id;
            option.textContent = drive.name;
            driveSelect.appendChild(option);
        });

        // 検索実行関数
        function executeSearch() {
            const driveId = driveSelect.value;
            const searchQuery = document.getElementById('searchQuery').value.trim();
            if (driveId && searchQuery) {
                let searchUrl;
                if (driveId === 'mydrive') {
                    searchUrl = `https://drive.google.com/drive/search?q=${encodeURIComponent(searchQuery)}`;
                } else {
                    searchUrl = `https://drive.google.com/drive/folders/${driveId}?restrict=sharedDrive&q=${encodeURIComponent(searchQuery)}`;
                }
                window.open(searchUrl, '_blank');
            }
        }

        // フォーム送信時の処理
        document.getElementById('searchForm').addEventListener('submit', function(e) {
            e.preventDefault();
            executeSearch();
        });

        // エンターキーでの検索実行
        document.getElementById('searchQuery').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                executeSearch();
            }
        });
    </script>
</body>
</html>

プロンプト＞　色合いを落ち着いたおしゃれな感じにしてください

モダンでエレガント？
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Googleドライブ検索</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
            background-color: #f7f7f7;
            color: #333;
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
        }
        .search-form {
            display: flex;
            width: 100%;
            max-width: 700px;
            gap: 15px;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .drive-select-wrapper, .search-input-wrapper {
            border: 1px solid #d1d9e6;
            border-radius: 8px;
            font-size: 16px;
            outline: none;
            transition: all 0.3s ease;
        }
        .drive-select-wrapper:hover, .search-input-wrapper:hover {
            border-color: #a0a8b8;
        }
        .drive-select-wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            padding-left: 14px;
            background-color: #f0f4f8;
        }
        .material-icons {
            color: #5c6a7d;
            font-size: 24px;
            margin-right: 10px;
        }
        .drive-select {
            flex: 1;
            padding: 12px 34px 12px 0;
            border: none;
            background: transparent;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: url('data:image/svg+xml;utf8,<svg fill="%235c6a7d" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 10px center;
            background-size: 24px;
            font-size: 16px;
            color: #333;
        }
        .search-input-wrapper {
            flex: 2;
            display: flex;
            align-items: center;
            padding: 0 14px;
            background-color: #f0f4f8;
        }
        .search-input {
            border: none;
            outline: none;
            padding: 12px 0 12px 10px;
            width: 100%;
            font-size: 16px;
            background: transparent;
            color: #333;
        }
        .drive-select option[value=""] {
            font-weight: bold;
        }
        .drive-select option[value="separator"] {
            font-weight: bold;
            background-color: #e6eaf0;
        }
        ::placeholder {
            color: #8896a6;
        }
    </style>
</head>
<body>
    <div class="container">
        <form id="searchForm" class="search-form">
            <div class="drive-select-wrapper">
                <span class="material-icons">folder</span>
                <select id="driveSelect" class="drive-select" required>
                    <option value="">ドライブを選択</option>
                    <option value="mydrive">マイドライブ</option>
                    <option value="separator" disabled>-- 共有ドライブ --</option>
                    <!-- ここに共有ドライブのオプションが動的に追加されます -->
                </select>
            </div>
            <div class="search-input-wrapper">
                <span class="material-icons">search</span>
                <input type="text" id="searchQuery" class="search-input" placeholder="検索キーワードを入力" required>
            </div>
        </form>
    </div>

    <script>
        // 共有ドライブの情報（実際の値に置き換えてください）
        const sharedDrives = [
            { name: "営業部ドライブ", id: "0ABCdefGHIjklMNopqr" },
            { name: "開発部ドライブ", id: "0DEFghiJKLmnoPQRst" },
            { name: "マーケティング部ドライブ", id: "0UVWxyzABCdefGHIjk" }
        ];

        // プルダウンメニューにオプションを追加
        const driveSelect = document.getElementById('driveSelect');
        sharedDrives.forEach(drive => {
            const option = document.createElement('option');
            option.value = drive.id;
            option.textContent = drive.name;
            driveSelect.appendChild(option);
        });

        // 検索実行関数
        function executeSearch() {
            const driveId = driveSelect.value;
            const searchQuery = document.getElementById('searchQuery').value.trim();
            if (driveId && searchQuery) {
                let searchUrl;
                if (driveId === 'mydrive') {
                    searchUrl = `https://drive.google.com/drive/search?q=${encodeURIComponent(searchQuery)}`;
                } else {
                    searchUrl = `https://drive.google.com/drive/folders/${driveId}?restrict=sharedDrive&q=${encodeURIComponent(searchQuery)}`;
                }
                window.open(searchUrl, '_blank');
            }
        }

        // フォーム送信時の処理
        document.getElementById('searchForm').addEventListener('submit', function(e) {
            e.preventDefault();
            executeSearch();
        });

        // エンターキーでの検索実行
        document.getElementById('searchQuery').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                executeSearch();
            }
        });
    </script>
</body>
</html>

いいなと思ったら応援しよう！

この記事が参加している募集

#AIとやってみた

44,662件