シン・サーチ窓にラベル検索を追加！【アーティファクト編⑰】ーGoogleサイトで作るグループウェア(171)ー
🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！
この記事を読んで欲しい方
企業DXや校務DXの進め方に悩んでいる方
クラウドアプリの導入に悩んでいる方
自分だけのGoogleサイトを作ってみたい方
①シン・サーチ窓にラベル検索を追加！
みなさんこんにちは。
アーティファクト使ってますか？
以前、シン・サーチ窓を作成しましたが、ご要望があったラベル検索を実装しました
②ラベル検索とは？
ラベル検索は、Gmailドメイン以外の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: 16px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.search-form {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 800px;
gap: 12px;
}
.drive-select-wrapper, .search-input-wrapper, .label-select-wrapper {
border: 1px solid #dfe1e5;
border-radius: 28px;
font-size: 16px;
outline: none;
}
.drive-select-wrapper, .label-select-wrapper {
flex: 1;
min-width: 180px;
max-width: 220px;
display: flex;
align-items: center;
padding-left: 14px;
position: relative;
}
.search-input-wrapper {
flex: 1;
min-width: 150px;
max-width: 300px;
display: flex;
align-items: center;
padding: 0 14px;
}
.material-icons {
color: #5f6368;
font-size: 24px;
margin-right: 10px;
cursor: pointer;
}
.drive-select, .label-select {
width: 100%;
padding: 10px 34px 10px 0;
border: none;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
.drive-select-wrapper::after, .label-select-wrapper::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #757575;
pointer-events: none;
}
.search-input {
border: none;
outline: none;
padding: 10px 0 10px 10px;
width: 100%;
font-size: 16px;
background: transparent;
}
.drive-select option[value=""], .label-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">
<option value="">ドライブ選択</option>
<option value="mydrive">マイドライブ</option>
<option value="separator" disabled>-- 共有ドライブ --</option>
<!-- ここに共有ドライブのオプションが動的に追加されます -->
</select>
</div>
<div class="search-input-wrapper">
<span class="material-icons" id="searchIcon">search</span>
<input type="text" id="searchQuery" class="search-input" placeholder="キーワード">
</div>
<div class="label-select-wrapper">
<span class="material-icons">label</span>
<select id="labelSelect" class="label-select">
<option value="">ラベル選択</option>
<!-- ラベルオプションはJavaScriptで動的に追加されます -->
</select>
</div>
</form>
</div>
<script>
// 共有ドライブの情報（実際の値に置き換えてください）
const sharedDrives = [
{ name: "営業部ドライブ", id: "0ABCdefGHIjklMNopqr" },
{ name: "開発部ドライブ", id: "0DEFghiJKLmnoPQRst" },
{ name: "マーケティング部ドライブ", id: "0UVWxyzABCdefGHIjk" }
];
// ラベルの情報（実際の値に置き換えてください）
const labels = [
{ name: "赤", id: "label_red" },
{ name: "オレンジ", id: "label_orange" },
{ name: "黄", id: "label_yellow" },
{ name: "緑", id: "label_green" },
{ name: "青", id: "label_blue" },
{ name: "紫", id: "label_purple" },
{ name: "灰色", id: "label_gray" }
];
// プルダウンメニューにオプションを追加
const driveSelect = document.getElementById('driveSelect');
sharedDrives.forEach(drive => {
const option = document.createElement('option');
option.value = drive.id;
option.textContent = drive.name;
driveSelect.appendChild(option);
});
// ラベル選択メニューにオプションを追加
const labelSelect = document.getElementById('labelSelect');
labels.forEach(label => {
const option = document.createElement('option');
option.value = label.id;
option.textContent = label.name;
labelSelect.appendChild(option);
});
// 検索実行関数
function executeSearch(forceSearch = false) {
const driveId = driveSelect.value;
const searchQuery = document.getElementById('searchQuery').value.trim();
const labelId = document.getElementById('labelSelect').value;
if ((driveId || labelId) && (searchQuery || forceSearch || labelId)) {
let query = searchQuery;
// ラベルが選択されている場合、検索クエリに追加
if (labelId) {
query += (query ? ' ' : '') + `cat:${labelId}`;
}
let searchUrl;
if (driveId === 'mydrive' || !driveId) {
searchUrl = `https://drive.google.com/drive/search?q=${encodeURIComponent(query)}`;
} else {
searchUrl = `https://drive.google.com/drive/folders/${driveId}?restrict=sharedDrive&q=${encodeURIComponent(query)}`;
}
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();
}
});
// 虫眼鏡アイコンクリックでの検索実行
document.getElementById('searchIcon').addEventListener('click', function() {
executeSearch(true);
});
// ドライブ選択時の処理
driveSelect.addEventListener('change', function() {
// ここでは何もしない
});
// ラベル選択時の処理
labelSelect.addEventListener('change', function() {
// ここでは何もしない
});
</script>
</body>
</html> ラベルの設定は、ラベルIDを入れる必要があります。
ラベルIDを調べるには、検索オプションでラベルを選択して検索した場合に出てくるURLのcat:以下がラベルIDになります。（ラベルIDは120文字とかなり長いです。）
https://drive.google.com/drive/u/0/search?q=cat:ラベルID
コードのconst labelsの配列に、ラベル名とラベルIDのを書き込んでください。
実際に検索する場合は、ラベルを選択してキーワードの虫眼鏡をクリックすることで検索が実行されます。
なお、ドライブとラベルは、OR検索にしか対応していませんので、ご了承ください。
改造したい場合は、以下のRemixからどうぞ。
④おわりに
いかがでしたでしょうか？
このように、クロードを使うと、埋め込みコードも簡単に作成できますので、Googleサイトの機能拡張のプログラム作成にはもってこいです。
まあ、ノーコードとまでは行きませんが、コピペしてちょっといじるだけで楽々作成できますので、お使いください。
