v0でGoogleドライブ検索窓にファイルの種類の選択をつけたーGoogleサイトで作るグループウェア(215)ー
🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！
この記事を読んで欲しい方
AIの利用に悩んでいる方、とくに学校の先生
AIでノーコードWebアプリを作ってみたい方
学校DXに興味がある方
①Googleサイトの画面からファイルの種類を選択し検索する窓
いままで、幾度となくGoogleサイトに埋め込むサーチ窓（検索窓）を作って投稿してきましたが、ファイルの種類も入れて検索したいとコメントが入っていたので、作ってみました。
②ファイルの種類とは？
Googleドライブの検索で指定できる資料形式の種類は以下のようになっていました。
type:image 画像
type:pdf PDF
type:document Googleドキュメント
type:spreadsheet Googleシート
type:presentation Googleスライド
type:form Googleフォーム
type:audio 音声
type:video 動画
type:archive アーカイブ（ZIP）
type:drawing 図形描画
type:shortcut ショートカット
type:folder フォルダ
type:site Googleサイト
type:vids GoogleVids（動画作成）
③埋め込みHTMLコード
以下の、HTMLコードを、Googleサイトの埋め込む＞埋め込みコードで埋め込みます。
<!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;
background-color: transparent;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0px;
box-sizing: border-box;
}
.search-form {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 800px;
gap: 10px;
background-color: lightgray;
padding: 10px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.drive-select-wrapper, .file-type-wrapper, .search-input-wrapper {
border: 1px solid #dfe1e5;
border-radius: 24px;
font-size: 14px;
outline: none;
background-color: white;
}
.drive-select-wrapper, .file-type-wrapper {
flex: 1 1 200px;
display: flex;
align-items: center;
padding-left: 12px;
}
.material-icons {
color: #5f6368;
font-size: 20px;
margin-right: 8px;
}
.drive-select, .file-type-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 1 300px;
display: flex;
align-items: center;
padding: 0 0 0 12px;
}
.search-input {
border: none;
outline: none;
padding: 8px 0 8px 8px;
width: 100%;
font-size: 14px;
background: transparent;
}
.search-button {
background: none;
border: none;
cursor: pointer;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
}
.search-button:hover, .search-button:focus {
background-color: rgba(0, 0, 0, 0.05);
}
.search-button .material-icons {
margin: 0;
}
.drive-select option[value=""], .file-type-select option[value=""] {
font-weight: bold;
}
.drive-select option[value="separator"], .file-type-select option[value="separator"] {
font-weight: bold;
background-color: #f1f3f4;
}
</style>
</head>
<body>
<div class="container">
<form id="searchForm" class="search-form" aria-label="Googleドライブ検索フォーム">
<div class="drive-select-wrapper">
<label for="driveSelect" class="material-icons" aria-label="フォルダ">folder</label>
<select id="driveSelect" class="drive-select" required aria-label="ドライブ選択">
<option value="">ドライブ選択</option>
<option value="mydrive">マイドライブ</option>
<option value="separator" disabled>-- 共有ドライブ --</option>
<!-- ここに共有ドライブのオプションが動的に追加されます -->
</select>
</div>
<div class="file-type-wrapper">
<label for="fileTypeSelect" class="material-icons" aria-label="ファイルタイプ">description</label>
<select id="fileTypeSelect" class="file-type-select" aria-label="ファイルタイプ選択">
<option value="">すべてのファイル</option>
<option value="type:image">画像</option>
<option value="type:pdf">PDF</option>
<option value="type:document">ドキュメント</option>
<option value="type:spreadsheet">スプレッドシート</option>
<option value="type:presentation">プレゼンテーション</option>
<option value="type:form">フォーム</option>
<option value="type:audio">音声</option>
<option value="type:video">動画</option>
<option value="type:archive">アーカイブ (ZIP)</option>
<option value="type:drawing">図形描画</option>
<option value="type:shortcut">ショートカット</option>
<option value="type:folder">フォルダ</option>
<option value="type:site">サイト</option>
<option value="type:vids">動画</option>
</select>
</div>
<div class="search-input-wrapper">
<input type="text" id="searchQuery" class="search-input" placeholder="キーワード入力" aria-label="キーワード">
<button type="submit" class="search-button" aria-label="検索実行">
<span class="material-icons">search</span>
</button>
</div>
</form>
</div>
<script>
// 共有ドライブの情報
const sharedDrivesConfig = {
"講座関係": "0ADSWNfQaLNQbUXXXXX",
"営業部": "0AGtmPEvfGEyRUkXXXX",
"社内基本書類": "0APZxiLk51WpVUkXXXX"
};
// プルダウンメニューにオプションを追加
const driveSelect = document.getElementById('driveSelect');
for (const [driveName, driveId] of Object.entries(sharedDrivesConfig)) {
const option = document.createElement('option');
option.value = driveId;
option.textContent = driveName;
driveSelect.appendChild(option);
}
// 検索実行関数
function executeSearch() {
const driveId = driveSelect.value;
const fileType = document.getElementById('fileTypeSelect').value;
let searchQuery = document.getElementById('searchQuery').value.trim();
if (driveId) {
if (fileType && searchQuery) {
searchQuery = `${fileType} ${searchQuery}`;
} else if (fileType) {
searchQuery = fileType;
}
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', 'noopener,noreferrer');
}
}
// フォーム送信時の処理
document.getElementById('searchForm').addEventListener('submit', function(e) {
e.preventDefault();
executeSearch();
});
// 検索ボタンクリック時の処理
document.querySelector('.search-button').addEventListener('click', function(e) {
e.preventDefault();
executeSearch();
});
// エンターキーでの検索実行（入力フィールドでのみ）
document.getElementById('searchQuery').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
executeSearch();
}
});
</script>
</body>
</html>共有ドライブのフォルダIDの設定は以前と同じで、この部分に共有ドライブ名称と共有ドライブのフォルダIDを入れます。
// 共有ドライブの情報
const sharedDrivesConfig = {
"講座関係": "0ADSWNfQaLNQbUXXXXX",
"営業部": "0AGtmPEvfGEyRUkXXXX",
"社内基本書類": "0APZxiLk51WpVUkXXXX"
};埋め込むと、以下のように表示されます。
検索実行は、キーワード入力部分でRETURN(ENTER)キーを押すか、虫眼鏡部分をクリックすると実行されます。（キーワードに何も入っていなくても検索するようにしました）
実際の検索する仕組みは、以下のURLをプログラムで作って実行させるだけです。
https://drive.google.com/drive/folders/共有フォルダのID?restrict=sharedDrive&q=type:pdf一番最後のq=の後ろにファイルタイプ指定をしてあげると特定の資料形式で検索されます。また、キーワードとの組み合わせでは間に%20（空白）を入れて繋ぎます。
q=type:pdf のように特定の資料形式を指定
q=営業資料%20type:pdf 含まれている語句（営業資料）との組み合わせは間に%20(空白)を入れてtypeを指定する③おわりに
すでに、v0にHTMLコードを移動させて作成しているため、簡単に機能アップさせることができました。
ほんとうにAIコーディングって楽ですね！