Googleサイトで作るグループウェア（5）ーサーチ窓の設置ー

2023年1月14日 10:36

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

Googleワークスペースを企業DXに導入したが、上手く広げられていない方
Googleワークスペースを導入しようと考えてる中小企業の方
無料のGmailやクラウドアプリだけ使っているテレワーカー
GIGAスクールなどでGoogle for Eduを導入している学校

①サーチ窓の設置

前回まで、機能アイコンに、URLを挿入してきました。
この中で、クラウドトップメタファーとしては、チャット（コミュニケーション）とマイドライブ（ストレージ）を設定しました。
今回は、最後のサーチの設置です。

サーチは、見出しの「グループウェア」のすぐ真下に設置します。
サーチ・コミュニケーション・ストレージは常に三角形でマウスポインタが移動できるように配置します。

②サーチ窓の作成1

それでは、サーチ窓を作成していきます。
サーチ窓は、Googleワークスペースが有料（Business Standard以上）であれば、クラウドサーチがそのまま配置できます。
見出しのグループウェアの下に、挿入＞CloudSearchを選択して、配置します。最後に公開ボタンを押して保存します。
クラウドサーチの優れていることろは、Googleドライブ内だけではなく、カレンダー、コンタクト、Gメール、グループ、Keepなど、クラウドアプリの中身を横断的に検索できることです。
これは、ユニバーサルサーチと呼ばれています。

③サーチ窓の作成2

さて、有料版ではCloudSearchが挿入できますが、無料版など（Googleworkspace for Education含む）では、クラウドサーチのサーチ窓を設置することはできません。
ここで、「HTML埋め込み」機能の出番です。
以下のプログラムを埋め込めば、CloudSearchのようにアプリ横断の検索はできませんが、マイドライブ内のファイル検索が見出しからできるようになります。

<!DOCTYPE html>
<html>
  <head>
    <base target="_blank">
<!-- Pleace this snippet right after opening the head tag to make it work properly -->
<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
  function submitSearch(){
        var siteSearchUrl = 'https://drive.google.com/drive/search?q=';  // Replace with your site's search URL
        var query = document.getElementById("search-query-input").value;
        var url = siteSearchUrl + query
  if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
  {
   var referLink = document.createElement("a");
   referLink.href = url;
   document.body.appendChild(referLink);
   referLink.click();
  }
  else { window.open(url,'_blank'); } // All other browsers
 }
function searchKeyPress(e){
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('search-icon').click();
        return false;
    }
    return true;
}
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->  
    <link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <style>
      body {margin:0;padding:14px 6px 0 6px;background-color:transparent;font-family: 'Roboto', sans-serif;overflow:hidden;}
      #search-icon,#clear-icon {padding:12px;height:24px;vertical-align:middle;cursor:pointer;}
      #clear-icon {visibility:hidden;}
      #search-query {
        width:50vw;min-width:480px;max-width:720px;
        margin:0 auto;overflow:hidden;border:0;border-radius:4px;color: #212121;background-color:#FFF;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);font-size:16px;line-height:24px;}
      #search-query-input {
        min-width:104px;width:66%;height:24px;font-size:16px;font-stretch: normal;letter-spacing: normal;line-height:24px;border:0;color:#000;background-color:transparent;cursor:text;
        text-align:start;vertical-align:middle;}
      @media all and (max-width: 480px) {  
          #search-query {min-width:200px;width:100%;}　
       }
    </style>
  </head>
  <body>
        <!-- <input type="text" id="query" />
        <button id="search" onclick="submitSearch()">Search</button> -->
        <div id="search-query">
          <img id="search-icon" alt="Search"  onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
          <input type="text" id="search-query-input" placeholder="マイドライブを検索 " onkeypress="return searchKeyPress(event);" style="box-shadow:none";>
        </div>
  </body>
</html>

④サーチ窓の作成3

上記のプログラムをコピーして、挿入＞埋め込み＞埋め込みコードを選択し、htmlコードを貼り付けます。
貼り付けたら次へボタンを押してください。

コードが正常に埋め込まれると以下の画面になりますので、挿入ボタンを押してください。

あとは、挿入されたサーチ窓の大きさを調整して、見出しのグループウェアの下に配置します。最後に公開ボタンを押して、画面を保存してください。
これで、コミュニケーション・ストレージ・サーチの３つのメタファーが画面上に配置されました。

実際に、マイドライブ内が検索できるか試してください。

このサーチ窓は、とくにGIGAスクール用の無料のGoogle教育版や、通常の無料版を利用している方々には有効ですので、ぜひ利用してください。

P.S. 共有ドライブを検索窓で検索するコードはこちらで説明しています。あわせて御覧ください。