<p>シャドウ<br>https://getcssscan.com/css-box-shadow-examples<br>アイコン<br>https://iconoir.com/<br><br>cssを外部ファイル化する<br>https://tonari-it.com/gas-html-css/#toc4<br>https://qiita.com/dadadaiiiiiii/items/beb33b838d0516cade05</p>

<p>Google スプレッドシートやドキュメントを開いているとき、今開いている資料がドライブのどのフォルダに入っているのか知りたいことがあります。</p><p>毎回移動アイコンをクリックして現在の場所を新しいタブで開くのは面倒です・・。特に、フォルダのURLが共有されておらず、資料のURLだけが共有された場合や、同じフォルダに新たな資料を追加したい場合には不便です。</p><p>そこで、今開いている資料のディレクトリを簡単に見えるようにするGoogle Apps Script (GAS)を作成しました。</p><p><span class="txt-small">※このページで紹介しているスクリプトは自己責任でお使い下さい。</span></p><p><span class="txt-small">※CSSや（一部）見た目のための処理は記載のコードに含まれていません。</span></p>

<h2 id="h11dda479b2">完成したGAS</h2>

<h3 id="ha6ef7803ed">コード.gsの解説</h3><ul><li><code>doGet(e)</code><strong> 関数</strong>:<ul><li>HTTP GET リクエストを処理し、<code>index.html</code> ファイルを表示します。</li></ul></li><li><code>getParentFolders(url)</code><strong> 関数</strong>:<ul><li>渡されたURLから、Google Drive上のファイルまたはフォルダの親フォルダを取得します。</li><li>渡されたURLからファイルまたはフォルダのIDを抽出し、そのIDを使用して対象のファイルまたはフォルダを特定します。</li><li>対象のファイルまたはフォルダの親フォルダを取得し、それらの情報を配列に格納します。</li><li>最終的に、親フォルダの情報、ファイルまたはフォルダの名前、およびそのタイプ（ファイルまたはフォルダ）を含むオブジェクトを返します。</li><li>例外が発生した場合、エラーメッセージを含むオブジェクトを返します。</li></ul></li></ul>

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <style>
    /* スタイル */
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="form">
      <input type="text" id="url" name="url">
      <button onclick="getParentFolders()">実行</button>
    </div>
    <div id="result"></div>
  </div>

  <script>
    const getParentFolders = () => {
      const url = document.getElementById('url').value;
      google.script.run.withSuccessHandler(result => {
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = '';

        if (result.error) {
          resultDiv.innerHTML = `<p class="error">Error: ${result.error}</p>`;
        } else {
          // ファイル名を表示
          const nameParagraph = document.createElement('p');
          nameParagraph.textContent = result.name;
          resultDiv.appendChild(nameParagraph);

          // 親フォルダのリストを表示
          const list = document.createElement('ul');
          result.parents.forEach(folder => {
            const listItem = document.createElement('li');
            const folderLink = document.createElement('a');
            folderLink.href = folder.url;
            folderLink.target = '_blank';
            folderLink.textContent = folder.name;
            listItem.appendChild(folderLink);
            list.appendChild(listItem);
          });
          resultDiv.appendChild(list);
        }
      }).getParentFolders(url);
    }
  </script>

</body>

</html>

<h3 id="hdd96d86586">index.htmlの解説</h3><ul><li><strong>実行ボタンのクリック時の処理</strong>:<ul><li>ユーザーが実行ボタンをクリックすると、<code>getParentFolders()</code> 関数が呼び出されます。</li></ul></li><li><code>getParentFolders()</code><strong> 関数の処理</strong>:<ul><li>入力されたURLを取得します。</li><li>Google Apps Scriptの <code>getParentFolders()</code> 関数を呼び出します。これは、指定されたURLの親フォルダを取得するサーバー側の関数です。</li><li><code>withSuccessHandler()</code> メソッドを使用して、サーバーからのレスポンスを処理します。</li><li>レスポンスがエラーを含む場合は、エラーメッセージを表示します。</li><li>エラーがない場合は、次の処理を行います：<ul><li>取得したファイルの名前を表示します。</li><li>ファイルの親フォルダのリンクをリスト表示します。リンクは新しいタブで開きます。</li></ul></li></ul></li></ul>

<h2 id="h5342a01a7e">完成までの流れ</h2><h3 id="h84cc25af71">Google Apps Scriptファイルの作成</h3><ol><li>Google Apps Scriptにアクセス</li><li>新しいプロジェクトをクリック</li><li>コード.gsの画面が開く<ol><li>コード.gsに処理を書く</li></ol></li><li>ファイルを追加で「HTML」を選択<ol><li>名前をindexにする（別のファイル名でもOK）</li><li>URLを入力する&lt;input&gt;と実行する&lt;button&gt;を書く</li><li>実行結果を出力する処理を書く</li><li>CSSで見た目を調整</li></ol></li></ol>

<h3 id="hbcdff16b33">OAuthのScopeの設定</h3><p>作成したGASには、スコープによる承認が必要なメソッドが含まれています。ここではスコープを設定するためのマニュフェストの編集手順を記載します。</p><h4 id="hf909dc458f">スコープによる承認が必要なメソッド</h4><ul><li><a href="https://developers.google.com/apps-script/reference/drive/file?hl=ja#getname" target="_blank" rel="noopener noreferrer nofollow">getName()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/file?hl=ja#getparents" target="_blank" rel="noopener noreferrer nofollow">getParents()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/folder?hl=ja#getid" target="_blank" rel="noopener noreferrer nofollow">getId()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/folder?hl=ja#geturl" target="_blank" rel="noopener noreferrer nofollow">getUrl()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/drive-app?hl=ja#getfolderbyidid" target="_blank" rel="noopener noreferrer nofollow">getFolderById()</a></li></ul><blockquote><p>この方法を使用するスクリプトには、次の 1 つ以上のスコープによる承認が必要です。<br>https://www.googleapis.com/auth/drive.readonly<br>https://www.googleapis.com/auth/drive</p><p><span class="txt-small">引用元：</span><a href="https://developers.google.com/apps-script/reference/drive/file?hl=ja" target="_blank" rel="noopener noreferrer nofollow"><span class="txt-small">https://developers.google.com/apps-script/reference/drive/file?hl=ja</span></a></p></blockquote><p>「<a href="https://developers.google.com/drive/api/guides/api-specific-auth?hl=ja" target="_blank" rel="noopener noreferrer nofollow">Google Drive API のスコープを選択する</a>」ページにスコープの説明が記載されています。今回はドライブのディレクトリを辿りたいだけなので、<strong>drive.readonly</strong>のスコープを指定します。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>スコープコード（省略）</p></th><th colspan="1" rowspan="1"><p>説明</p></th><th colspan="1" rowspan="1"><p>使用量</p></th></tr><tr><td colspan="1" rowspan="1"><p>drive.readonly</p></td><td colspan="1" rowspan="1"><p>ドライブのファイルを表示、ダウンロードする。</p></td><td colspan="1" rowspan="1"><p>制限付き</p></td></tr><tr><td colspan="1" rowspan="1"><p>drive</p></td><td colspan="1" rowspan="1"><p>ドライブのファイルの表示と管理を行います。</p></td><td colspan="1" rowspan="1"><p>制限付き</p></td></tr></tbody></table><ol><li>編集画面の左にあるプロジェクト設定（⚙アイコン）に移動</li><li>全般設定の「「appsscript.json」マニフェスト ファイルをエディタで表示する」を有効にする</li><li>エディタに移動<ol><li>appsscript.jsonに移動</li><li>oauthScopesを追記</li></ol></li></ol><pre><code>&quot;oauthScopes&quot;: [
  &quot;https://www.googleapis.com/auth/drive.readonly&quot;
]</code></pre><h4 id="hb40d397465">使用量：制限付きとは？</h4><blockquote><p>「使用量」列は、各スコープの機密性を示しています。定義は次のとおりです。</p><p><strong>制限付き</strong>: このスコープでは、Google ユーザーデータに幅広くアクセスできます。制限付きのスコープの検証プロセスを行う必要があります。この要件については、<a href="https://developers.google.com/terms/api-services-user-data-policy?hl=ja" target="_blank" rel="noopener noreferrer nofollow">Google API サービスのユーザーデータに関するポリシー</a>と<a href="https://developers.google.com/terms/api-services-user-data-policy?hl=ja#additional_requirements_for_specific_api_scopes" target="_blank" rel="noopener noreferrer nofollow">特定の API スコープの追加要件</a>をご覧ください。制限付きのスコープのデータをサーバーに保存（または送信）する場合は、セキュリティ評価を行う必要があります。: このスコープでは、Google ユーザーデータに幅広くアクセスできます。制限付きのスコープの検証プロセスを行う必要があります。この要件については、Google API サービスのユーザーデータに関するポリシーと特定の API スコープの追加要件をご覧ください。制限付きのスコープのデータをサーバーに保存（または送信）する場合は、セキュリティ評価を行う必要があります。</p><p><span class="txt-small">引用元：</span><a href="https://developers.google.com/drive/api/guides/api-specific-auth?hl=ja#drive-scopes" target="_blank" rel="noopener noreferrer nofollow"><span class="txt-small">https://developers.google.com/drive/api/guides/api-specific-auth?hl=ja#drive-scopes</span></a></p></blockquote><h4 id="hde6b25aa3e">drive.readonlyとdriveの認証画面はどう違う？</h4><p>初回実行時に、このアプリがあなたのGoogleアカウントのデータにアクセスすることを許可するかどうかを確認する認証・承認画面が表示されます。スコープの設定によって、リクエストされるアクセス権の内容が変わります。</p>

<p>左）drive.readonly・・・表示、ダウンロード<br>右）drive・・・表示、編集、作成、削除</p>

<h3 id="h9dcc071ccd">デプロイ</h3><ol><li>デプロイボタンをクリックして「新しいデプロイ」を選択<ol><li>種類の選択で「ウェブアプリ」を選択</li><li>説明（任意）、次のユーザーとして実行を「ウェブアプリケーションにアクセスしているユーザー」、アクセスできるユーザー「自分のみ」を設定する</li></ol></li><li>デプロイ</li><li>ウェブアプリのURLが発行される</li><li>URLにアクセスすると、作成したindex.htmlの内容が表示される</li></ol><p><span class="txt-small">※制限付きのスコープのため、アクセスできるユーザーは自分のみにしておくのが安心かと思います。不安な点がある場合は、ご自身で詳細を調べて設定してください。</span></p>

<h2 id="ha214098e44">まとめ</h2><p>今回Googleフォルダに関するGASを作成し、数多くのメソッドが用意されているということを知ることができました。</p><p>またスコープの設定について学んで、データへのアクセスと許可について考えさせられました。特に制限付きスコープを扱う際は、データの適切な使用や第三者への転送制限、広告目的でのデータ使用の禁止などに留意する必要があります。これらのポイントを考えると、作成者としてはデータの取り扱いに慎重さが求められることがわかります。</p><p>同時に、実行者としても、自身のデータにアクセスされる範囲を理解し、プライバシーを守るために注意が必要だと感じました。個人情報や機密データが含まれる場合には、特に慎重にならなければなりません。情報を守るために、正確な設定と適切なリクエスト許可が重要だと感じました。</p><p>アイコンは、<a href="https://iconoir.com/" target="_blank" rel="noopener noreferrer nofollow">Iconoir | Free Icons</a>のSVGを利用しました。</p>

効率アップ！GASで Google ドライブ 内の資料ディレクトリを見える化

<p><span class="txt-small">この記事の一部はChatGPTで文章校正をしています。</span></p><p>スプレッドシートでデータを整理する際、見やすさを向上させるためには、罫線や背景色の設定が欠かせません。</p><p>全体に罫線を引くのは簡単ですが、項目ごとに罫線で囲むことや、後から行が増えたり移動したりする場合の管理は面倒です。そこで、自動で罫線を引くGoogle Apps Script（GAS）を作成しました。</p><p>※特定のデータ入力形式を想定したGASになります。<br>※デプロイ手順は省きます。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/9ca710eb801849ca9d5113539d985542/image.png" alt="" width="1298" height="270"><figcaption>左）罫線未設定　右）GASの自動罫線を適応した状態</figcaption></figure>

<h2 id="h8ef3fd67b8">出来上がりのイメージ</h2><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/705ca8afb3364b299974ce1aadef5d75/borders.gif" alt="" width="1005" height="620"></figure><ul><li>大・中分類はグループとして複数のセルをまとめて罫線で囲む</li><li>指定列以降は全てのセルに罫線を引くように設定</li><li>入力画面から指定列を設定できるようにする</li></ul>

<h2 id="h1d69706914">完成したコード</h2>

//01. カスタムメニューの作成とダイアログの実行
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Menu')
    .addItem('自動で罫線を引く', 'showDialog')
    .addToUi();
}

//02. ダイアログ画面Page.htmlを表示させる
function showDialog() {
  const html = HtmlService.createHtmlOutputFromFile('Page')
    .setWidth(400)
    .setHeight(180);
  SpreadsheetApp.getUi()
    .showModalDialog(html, '自動で罫線を引く');
}

//04. アルファベットを数字に変換して返す
function letterToColumn(letter) {
  let column = 0;
  const length = letter.length;
  for (var i = 0; i < length; i++) {
    column += (letter.toUpperCase().charCodeAt(i) - 64) * Math.pow(26, length - i - 1);
  }
  return column;
}

//03. 罫線を自動で引く
function optimizeBorders(specifiedColumn) { 
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const lastRow = sheet.getLastRow();
  const lastColumn = sheet.getLastColumn();
  const specifiedColumnNumber = letterToColumn(specifiedColumn);  //指定列のアルファベットを数字に変換

  //データのある範囲の上下左右に罫線＋内側の垂直に罫線
  sheet.getRange(1, 1, lastRow, lastColumn).setBorder(true, true, true, true, true, false);

  //指定した列以降のすべてのセルに罫線を引く
  sheet.getRange(1, specifiedColumnNumber, lastRow, lastColumn - specifiedColumnNumber + 1).setBorder(null, null, null, null, null, true);

  const data = sheet.getDataRange().getValues();

  for (var row = 1; row < lastRow; row++) {
    // 各行をチェックして罫線を引く
    for (var column = 1; column <= specifiedColumnNumber; column++) {
      // セルが空白でない場合に自身の下に罫線を引く
      if (
        (data[row][column - 1] !== '') ||
        (column !== 1 && data[row][column - 1] === '' && data[row][column - 2] !== '') ||
        (column !== 1 && data[row - 1][column - 1] === '' && data[row - 1][column - 2] !== '')
      ) {
        sheet.getRange(row, column, 1, 1).setBorder(null, null, true, null, null, null);
      }
    }
  }
}

<p>自動でグループ判定し罫線を引くスクリプトです。<br>
すべての列のセルに罫線を引く場合は、列のアルファベットを指定してください。<br>
  <em>例）AA</em>　指定列以降の上下左右に罫線が適用されます。
</p>
<div class="box">
  <table>
    <tr>
      <td>
        列名<span class="small">（アルファベット）</span>
      </td>
      <td>
        <input type="text" max="4" name="specifiedColumn" id="specifiedColumn" />
      </td>
      <td>
        <input type="button" value="実行する" onclick="executeBorderFunction(this)" />
      </td>
    </tr>
  </table>
</div>
<script>
//05. 関数の実行と処理結果のダイアログ表示
  function executeBorderFunction(button) {
    const specifiedColumn = document.getElementById("specifiedColumn").value;
    button.value = "実行中...";

    google.script.run.withSuccessHandler(function(){
      button.value = "完了";
      google.script.host.close();
    }).optimizeBorders(specifiedColumn);
  }
</script>
<style>
  p {
    font-size: 80%;
  }

  .box {
    margin-top: 10px;
    padding: 15px;
    background: #f9fbfd;
    border-radius: 5px;
  }

  .small {
    font-size: 70%;
  }

  table td {
    padding: 0 5px;
  }

  input[type="text"] {
    padding: 0 10px;
    width: 80px;
    height: 35px;
    box-sizing: border-box;
  }

  input[type="button"] {
    height: 35px;
    border: 0;
    padding: 0 10px;
    background: #c2e7ff;
    border-radius: 5px;
    box-sizing: border-box;
  }
</style>

<h3 id="hba51ec0282">01. カスタムメニューの作成とダイアログの実行</h3><p>onOpen() 関数では、Google Sheetsのスプレッドシートを開いた際に自動的に実行されるイベントを定義しています。</p><p>この関数は、スプレッドシートのユーザーインターフェースにカスタムメニューを作成し、「自動で罫線を引く」という項目を追加しています。ユーザーはこの項目を選択することで、showDialog()が実行されます。</p><h3 id="h00adcd9568">02. ダイアログ画面Page.htmlを表示させる</h3><p>showDialog() 関数を定義し、モーダルダイアログを表示します。</p><p>HtmlService.createHtmlOutputFromFile() で 'Page' ファイルからHTMLを取得し、setWidth(400)とsetHeight(180)でダイアログのサイズを設定します。</p><p>SpreadsheetApp.getUi().showModalDialog(html, '自動で罫線を引く') でダイアログを表示します。</p><h3 id="h5d946290aa">03. 罫線を自動で引く</h3><h4 id="hde29f3733c">03-01. データがある範囲を取得</h4>

const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const lastRow = sheet.getLastRow();
const lastColumn = sheet.getLastColumn();

<p>アクティブなスプレッドシートを取得し、シート内で最後にデータが入力されている行と列の番号を取得します。</p><h4 id="h432008ac85">03-02. 一番外側を罫線で囲み垂直線を引く</h4><p><code>sheet.getRange(1, 1, lastRow, lastColumn)</code>でデータのある範囲を指定しています。</p><p><code>setBorder(true, true, true, true, true, false);</code></p><p><code>setBorder(上, 左, 下, 右, 垂直, 水平);</code></p><p>データの状態に関係なく、全てのセルに左右の罫線を引くために、各セルに個別に罫線を設定せず、まとめて指定した範囲内の垂直線を一括で設定しています。</p><h4 id="hbc9fabc27f">03-03. 指定した列以降のすべてのセルに罫線を引く</h4><p>ダイアログで入力したアルファベット（列）を数字に変換し、その列以降のセルに罫線を引く範囲を指定しています。</p><pre><code>sheet.getRange(1, specifiedColumnNumber, lastRow, lastColumn - specifiedColumnNumber + 1)</code></pre><p>getRange(開始行, 開始列=ダイアログで入力した列, 最終行=取得した最終行, 最終列=取得した最終列-ダイアログで入力した列+1)</p><p><code>setBorder(null, null, null, null, null, true)</code></p><p>[03-02]で設定した罫線が消えないように、上下左右・垂直には<code>null</code>を指定し、水平方向には<code>true</code>を指定して、罫線を設定します。</p><h4 id="hfaec924370">03-04. 残りの行・列をループチェックして罫線を引く</h4><ul><li>セルが空白でない場合</li><li>セルが1列目でない場合で、その左隣のセルが空白で、その左隣のセルの上下にデータがある場合</li><li>セルが1行目でない場合で、その上のセルが空白で、その上のセルの左隣にデータがある場合</li></ul><p>この条件の場合にセルの下に罫線を引きます。</p><h3 id="h0e8d5ac8e7">04. アルファベットを数字に変換して返す</h3><pre><code>const specifiedColumnNumber = letterToColumn(specifiedColumn);</code></pre><p>スプレッドシートの列はアルファベット表記のため、列番号を数える手間を省くため、数字ではなく列のアルファベットを与えて、アルファベットの列名を数字に変換するようにしました。</p><p>アルファベットの各文字を数値に変換し、26進数の基数で桁ごとに計算して、最終的な列番号を求めます。</p>

<h3 id="h145fdb3ec8">05. 関数の実行と処理結果のダイアログ表示</h3><p>ボタンがクリックされたときに実行されます。まず、指定された列のアルファベット表記を取得し、その値は specifiedColumn 変数に格納されます。次に、ボタンの値を「実行中...」に変更し、スクリプトが処理中であることをユーザーに通知します。</p><p>その後、google.script.run.withSuccessHandler() メソッドを使用して、optimizeBorders() 関数を実行します。この関数は、指定された列のアルファベット表記を引数として受け取ります。処理が完了した後、ボタンの値は「完了」に変更され、その後 google.script.host.close() を呼び出して、ダイアログを閉じます。</p><blockquote><p>ダイアログは、HTML サービス インターフェースのクライアント側で google.script.host.close() を呼び出すことで閉じることができます。このダイアログは、他のインターフェースでは閉じることができません。閉じる操作は、ユーザー自身または自身で行う必要があります。</p><p><a href="https://developers.google.com/apps-script/guides/dialogs?hl=ja" target="_blank" rel="noopener noreferrer nofollow">Google for Developers</a></p></blockquote>

<h2 id="h959a42ac9c">実行時間</h2><p>実行範囲が広いと完了するまでに時間を要します。</p><ul><li>5列10行の範囲で3～5列目を全罫線設定した場合・・・2.141秒</li><li>5列10行の範囲で5列目を全罫線設定した場合・・・3.706秒</li><li>4列2300行の範囲で3～4列目を全罫線設定した場合・・・8.689秒</li><li>4列2300行の範囲で4列目を全罫線設定した場合・・・20.032秒</li></ul><p></p>

<h2 id="ha214098e44">まとめ</h2><p>基本的には、大分類や中分類などのグループ化する項目はデータ開始行と揃えることで、今回のGASでの自動罫線が有効に利用できます。</p><p>意図していない箇所に空白セルが混ざると、罫線の位置がずれることがありますが、データの追加や変更後に毎回罫線を修正する手間を省くために、ある程度のルールを設けて入力することで、罫線の引き直しをする手間を省くことができるようになりました。</p><h4 id="h9a3f3348bf">📝参考</h4><ul><li><a href="https://zenn.dev/matsumaru/articles/840f6aaa905f39" target="_blank" rel="noopener noreferrer nofollow">【GAS】スプレッドシートへの勤務表自動入力システムを作ってみた</a></li><li><a href="https://developers.google.com/apps-script/guides/dialogs?hl=ja#page.html_1" target="_blank" rel="noopener noreferrer nofollow">Google Workspace ドキュメントのダイアログとサイドバー</a></li></ul>