コピペでOK！Googleスプレッドシートにパスワードをつける方法を初心者向けに解説【GAS】

本記事では、Googleスプレッドシートにパスワードを設定する方法を解説します。

プログラムの設定が出てきますが、初心者の方でもできるよう分かりやすく解説していますのでぜひ参考にしてみてください♪

Excelみたいに簡単にパスワードがつけられない・・・！
【事前準備】パスワードをかけたいシートのURLを取得
【STEP1】Google Apps Scriptを開く
1. パスワードとシートのリンクを設定
【STEP2】HTMLファイルの作成
【STEP3】作ったプログラムを公開（デプロイ）する
使い方
仕様・注意点など
まとめ

Excelみたいに簡単にパスワードがつけられない・・・！

Googleスプレッドシートは、Excelファイルにパスワードを設定するみたいにパスワードをつけることができません。

これは、Excelがローカル（自分のPC）上で管理されているのに対して、スプレッドシートはクラウド上（インターネット上）で管理されているためです。

スプレッドシート上で、特定の人しかアクセスできないようにするには

ファイル全体の共有設定を「特定のユーザーのみ」に制限する
シート単位で閲覧・編集制限をかける（範囲の保護）
URLを特定の人にのみ教える（漏れたら意味ないけど）

などの方法があります。

ただ、本記事を見てくださっている方は、スプレッドシートにパスワードをつけたいという目的で来てくださっていると思います。なので上記の方法は割愛し、パスワードをつける方法を以下に記載します。

筆者

手順通りに行えば初心者の方でも設定できるように記載していきますので、ぜひ試してみてください！

【事前準備】パスワードをかけたいシートのURLを取得

事前準備として、パスワードをかけたいスプレッドシートのURLを取得しておきます。

Googleスプレッドシートにログイン　※別タブで開きます

アドレスバーをコピーするか、

右上の「共有」→「リンクのコピー」でURLを取得することができます。

【例】https://docs.google.com/spreadsheets/d/1A2B3C4D5E6F7G8H9I0J/

こちらを次の手順で使いますので控えておいてください！

【補足】スプレッドシートのURLについて

…?usp=sharing ：共有用のURL。シートの最初のタブが開く
…?gid=0#gid=0：特定のタブを開きたい場合はこっちを使う

結論どっちでも良いし、省略しても大丈夫です！

【STEP1】Google Apps Scriptを開く

スプレッドシートにパスワードをかけるには、「Google Apps Script (以降GAS)」というサービスを使います。

Google Apps Script にログイン　※別タブで開きます

Googleにログインしていない場合は、以下の画面になりますので右上のボタンからログインします。

すでにGoogleアカウントで開いている場合、初回は「Apps Script ダッシュボードへようこそ」というポップアップが表示されますので、「ダッシュボードを表示」を押します。

「＋新しいプロジェクト」を押します。

「コード.gs」が自動で作成されますので、すでに入力されている内容を全て消して以下を貼り付けてください。

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index")
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function checkPassword(password) {
  var correctPassword = "★パスワード★";

  if (password === correctPassword) {
    return "★スプレッドシートのリンク★";
  } else {
    return "incorrect";
  }
}

パスワードとシートのリンクを設定

さきほどのスクリプト内の、

★パスワード★ に、任意のパスワードを、

★スプレッドシートのリンク★ に、事前準備で取得したシートのURLを設定します。

【例】
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index")
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function checkPassword(password) {
  var correctPassword = "test123";

  if (password === correctPassword) {
    return "https://docs.google.com/spreadsheets/d/1A2B3C4D5E6F7G8H9I0J/"
  } else {
    return "incorrect";
  }
}

以下のようになります。

【STEP2】HTMLファイルの作成

次に、HTMLファイルを作成します。

ファイルの右側にある＋マーク→「HTML」を押します。

ファイル名が「無題」になっているので3点マーク→「名前の変更」を押し、「index」と入力してください。

すると、「index.html」というファイル名になります。

こちらも、すでに入力されているものは全て消して以下を貼り付けてください。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      form {
        position: relative;
        width: 300px;
        margin: 20px;
      }
      input[type="password"], input[type="text"] {
        font-size: 20px;
        padding: 10px 40px 10px 10px;
        width: 100%;
        box-sizing: border-box;
      }
      #togglePassword {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
        outline: none;
      }
      #togglePassword svg {
        width: 24px;
        height: 24px;
        fill: #555;
      }
      #togglePassword:hover svg {
        fill: #000;
      }
      button[type="submit"] {
        margin-top: 10px;
        font-size: 20px;
        padding: 8px 16px;
        cursor: pointer;
      }
      #link {
        margin-top: 10px;
        color: red;
        white-space: pre-line;
        font-size: 18px;
      }
      p#instruction {
        font-size: 20px;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <p id="instruction">パスワードを入力してください</p>
    <form id="passwordForm">
      <input type="password" id="password" placeholder="パスワードを入力" required autofocus>
      <button type="button" id="togglePassword" aria-label="パスワード表示切替">
        <svg viewBox="0 0 24 24">
          <path d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>
          <circle cx="12" cy="12" r="2.5"/>
        </svg>
      </button>
      <button type="submit">送信</button>
    </form>
    <p id="link"></p>

    <script>
      const maxAttempts = 3;
      let attemptCount = 0;
      const passwordInput = document.getElementById("password");
      const togglePasswordBtn = document.getElementById("togglePassword");
      const linkElem = document.getElementById("link");
      const spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1I-XQYY7LhnwEEwpn-xjzvQnaJz-ThJoWmM2wqbA72Pk/edit?usp=sharing";

      // パスワード表示切替
      togglePasswordBtn.addEventListener("click", function() {
        if (passwordInput.type === "password") {
          passwordInput.type = "text";
          this.innerHTML = `
            <svg viewBox="0 0 24 24">
              <path d="M12 6a9.77 9.77 0 0 1 8.95 5.35l1.44-1.44 1.27 1.27-18 18-1.27-1.27 3.26-3.26A9.89 9.89 0 0 1 3 12c1.73-3.89 6-7 11-7zm0 12a5 5 0 0 0 4.95-4.05l-7.9 7.9A5 5 0 0 0 12 18zM2 3l1.41 1.41 2.3 2.3A9.88 9.88 0 0 0 1 12c1.73 3.89 6 7 11 7a9.94 9.94 0 0 0 5.14-1.38l3.3 3.3L22 20.59 2 3z"/>
            </svg>`;
        } else {
          passwordInput.type = "password";
          this.innerHTML = `
            <svg viewBox="0 0 24 24">
              <path d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>
              <circle cx="12" cy="12" r="2.5"/>
            </svg>`;
        }
        passwordInput.focus();
      });

      // ログイン済みならURL表示＆自動オープン
      window.onload = function() {
        if (localStorage.getItem('loggedIn') === 'true') {
          linkElem.innerHTML = 'スプレッドシートへアクセス: <a href="' + spreadsheetUrl + '" target="_blank"><b>ここをクリック</b></a>';
          window.open(spreadsheetUrl, '_blank');
        }
      };

      // フォーム送信処理
      document.getElementById("passwordForm").addEventListener("submit", function(event) {
        event.preventDefault();
        if (attemptCount >= maxAttempts) {
          linkElem.innerText = "入力回数の上限に達しました。アクセスできません。";
          return;
        }
        checkPassword();
      });

      // パスワードチェック（Google Apps Scriptの関数を呼び出す）
      function checkPassword() {
        const password = passwordInput.value;
        google.script.run.withSuccessHandler(function(result) {
          if (result === "incorrect") {
            attemptCount++;
            const remaining = maxAttempts - attemptCount;
            linkElem.innerText = `「${password}」は間違っています。あと${remaining}回まで試せます。`;
            if (attemptCount >= maxAttempts) {
              linkElem.innerText += "\n入力回数の上限に達しました。";
              passwordInput.disabled = true;
              togglePasswordBtn.disabled = true;
            }
            passwordInput.value = "";
            passwordInput.focus();
          } else {
            localStorage.setItem('loggedIn', 'true');
            linkElem.innerHTML = 'スプレッドシートへアクセス: <a href="' + result + '" target="_blank"><b>ここをクリック</b></a>';
            window.open(result, '_blank');
          }
        }).checkPassword(password);
      }
    </script>
  </body>
</html>

上記スクリプトは変更する箇所はありません。

【補足】HTMLでやっていること

パスワード入力画面の表示（入力内容を確認する目のアイコンは環境によってちょっとずれてるかもしれないですが動作に問題はありません）
STEP1で作成した「コード.gs」の戻り値が index.htmlのresultに入るのでパスワードが正しければスプレッドシートが開く。2回目以降やリロード時はスプレッドシートへのリンクが表示される。
画面まわりに関してはChatGPTに生成してもらったので調整したい場合は適宜調整してください！

【STEP3】作ったプログラムを公開（デプロイ）する

作ったプログラムを、他に人が使えるように公開（デプロイ）します。

１．右上の「デプロイ」→「新しいデプロイ」を押す

２．歯車マークを押し、「ウェブアプリ」を押す

３．「アクセスできるユーザー」を「全員」に変更する

最後に、「デプロイ」を押します。

デプロイを押すと、URLが発行されます。他の人に教える際にはこのURLを伝えます。

使い方

STEP3で発行されたURLにアクセスします。

すると、以下のような画面が表示されます。

テキストボックスにパスワードを入力し、送信ボタン（もしくはEnterキー）を押すと、正しいパスワードの場合はスプレッドシートが開きます。

一度、正しいパスワードを入力すれば、2回目以降はURLにアクセスした時点でスプレッドシートのリンクが表示されます。

パスワードが間違っている場合は以下のようなメッセージが表示されます。

仕様・注意点など

以下、仕様と注意点を記載します。

パスワードが間違っている場合は、3回まで試せるようになっています。（ただし、リロードしたらまた入力できるようになってます。パスワードを間違えたらその後⚫︎分間アクセス禁止する対応はしていません）
スプレッドシートのアクセス範囲が「リンクを知っている全員」になっている場合は、URLが漏れたら誰でもアクセスできてしまいます。
2回目以降はスプレッドシートのURLが表示されますが、間違ったパスワードを入力するとそのリンクは消えてしまいます
レスポンシブ対応（スマホで開いても見やすく）していますが、スマホだと操作しづらいので「スプレッドシート」アプリを入れることをおすすめします（見れなくはないですが）