Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@iwama_takumi(巧 岩間)

【GAS】Spreadsheetを用いたGoogleサイトのユーザごとの表示内容変更

Posted at

はじめに

Googleサイトは便利なサービスですが、ページ単位で閲覧制限が設定できないのが困りものです。
今回は(万全ではありませんが)閲覧ユーザごとに表示内容を変更させることで、特定のユーザにのみ特定のリンクを表示する、といったことをGASとSpreadsheetを用いて実現します。

例えばGoogleサイト上で特定のユーザにのみ見せたいページがある場合、
①ページをナビゲーションに表示させないようにする。
②特定のユーザにのみ、当該ページへのリンクを表示する。
とすることで、Qiitaの限定共有のような運用を行うことができます。

ユーザごとの表示内容変更処理の実装

権限管理用Spreadsheetの作成

Google Driveの適当な場所に、権限管理用のSpreadsheetを作成します。新規でSpreadsheetを作成し、以下のような内容とします。
image.png

※「ユーザアカウント」列には、xxxx@xxx.comのようなGoogleアカウントを記載します。
※シート名は任意ですが、今回は「アクセス権限」という名称の想定で進めます。

このとき、作成したSpreadsheetのID(URLの以下の部分)を控えておきます。

https://docs.google.com/spreadsheets/d/<ID>/edit#gid=0

GASによるWebサイト作成

Google Driveの適当な場所に、Webサイト用のGoogle Apps Scriptファイルを作成します。
ファイルを作成するとスクリプトエディタが自動で表示されるので、プロジェクト名を「無題のプロジェクト」から適切な名称に変更します。
image.png

ツールバーの「ファイル」をクリックします。「New」-「HTMLファイル」を選択し、index.htmlという名前のHTMLファイルを作成します。
image.png

Spreadsheetの読み込み

「権限管理用Spreadsheetの作成」にて作成したシートを以下のように読み込みます。

コード.gs
const TARGET_SPREADSHEET_ID = '<SpreadsheetのID>';
const TARGET_SHEET_NAME = 'アクセス権限';
const TARGET_SPREADSHEET = SpreadsheetApp.openById(TARGET_SPREADSHEET_ID);
const TARGET_SHEET = TARGET_SPREADSHEET.getSheetByName(TARGET_SHEET_NAME);

// 権限管理用シート内の情報
const START_COL = 1;
const START_ROW = 2;
const ACCOUNT_INDEX = 0;
const AUTH1_INDEX = 1;
const AUTH2_INDEX = 2;
const AUTH3_INDEX = 3;
const AUTH4_INDEX = 4;
const AUTH5_INDEX = 5;
const AUTH_FLG = '〇';

const LAST_COL = TARGET_SHEET.getLastColumn();
const LAST_ROW = TARGET_SHEET.getLastRow();
const TARGET_DATA = TARGET_SHEET.getRange(START_ROW, START_COL, LAST_ROW - START_ROW + 1, LAST_COL).getValues();

権限取得用関数

権限取得用関数getAuthを定義します。引数のemailはGoogleアカウントの想定です。

コード.gs
function getAuth(email) {
  var result = {'auth1': false, 'auth2': false, 'auth3': false, 'auth4': false, 'auth5': false};
  for(var data of TARGET_DATA) {
    if(data[ACCOUNT_INDEX] == email) {
      if(data[AUTH1_INDEX] == AUTH_FLG) result['auth1'] = true;
      if(data[AUTH2_INDEX] == AUTH_FLG) result['auth2'] = true;
      if(data[AUTH3_INDEX] == AUTH_FLG) result['auth3'] = true;
      if(data[AUTH4_INDEX] == AUTH_FLG) result['auth4'] = true;
      if(data[AUTH5_INDEX] == AUTH_FLG) result['auth5'] = true;
      break;
    }
  }
  return result;
}

サイト表示用関数

サイト表示用関数doGetを定義します。

コード.gs
function doGet() {
  var html = HtmlService.createTemplateFromFile('index');
  var user = Session.getActiveUser();
  var email = user.getEmail();
  html.auth = getAuth(email);
  return html.evaluate();
}

Session.getActiveUserとuser.getEmailでサイト閲覧ユーザのGoogleアカウントを取得し、先ほど作成したgetAuth関数の引数としています。

コード.gs完成版

コード.gs
const TARGET_SPREADSHEET_ID = '<SpreadsheetのID>';
const TARGET_SHEET_NAME = 'アクセス権限';
const TARGET_SPREADSHEET = SpreadsheetApp.openById(TARGET_SPREADSHEET_ID);
const TARGET_SHEET = TARGET_SPREADSHEET.getSheetByName(TARGET_SHEET_NAME);

// 権限管理用シート内の情報
const START_COL = 1;
const START_ROW = 2;
const ACCOUNT_INDEX = 0;
const AUTH1_INDEX = 1;
const AUTH2_INDEX = 2;
const AUTH3_INDEX = 3;
const AUTH4_INDEX = 4;
const AUTH5_INDEX = 5;
const AUTH_FLG = '〇';

const LAST_COL = TARGET_SHEET.getLastColumn();
const LAST_ROW = TARGET_SHEET.getLastRow();
const TARGET_DATA = TARGET_SHEET.getRange(START_ROW, START_COL, LAST_ROW - START_ROW + 1, LAST_COL).getValues();

function doGet() {
  var html = HtmlService.createTemplateFromFile('index');
  var user = Session.getActiveUser();
  var email = user.getEmail();
  html.auth = getAuth(email);
  return html.evaluate();
}

function getAuth(email) {
  var result = {'auth1': false, 'auth2': false, 'auth3': false, 'auth4': false, 'auth5': false};
  for(var data of TARGET_DATA) {
    if(data[ACCOUNT_INDEX] == email) {
      if(data[AUTH1_INDEX] == AUTH_FLG) result['auth1'] = true;
      if(data[AUTH2_INDEX] == AUTH_FLG) result['auth2'] = true;
      if(data[AUTH3_INDEX] == AUTH_FLG) result['auth3'] = true;
      if(data[AUTH4_INDEX] == AUTH_FLG) result['auth4'] = true;
      if(data[AUTH5_INDEX] == AUTH_FLG) result['auth5'] = true;
      break;
    }
  }
  return result;
}

index.html

index.html側では、権限により表示/非表示を切り替える処理を実装します。

index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? if(auth['auth1']) { ?>
    <p>権限1が〇の場合は表示されます。</p>
    <? } ?>
    <? if(auth['auth2']) { ?>
    <p>権限2が〇の場合は表示されます。</p>
    <? } ?>
    <? if(auth['auth3']) { ?>
    <p>権限3が〇の場合は表示されます。</p>
    <? } ?>
    <? if(auth['auth4']) { ?>
    <p>権限4が〇の場合は表示されます。</p>
    <? } ?>
    <? if(auth['auth5']) { ?>
    <p>権限5が〇の場合は表示されます。</p>
    <? } ?>
  </body>
</html>

Webサイトのデプロイ

作成したサイトをデプロイします。
スクリプトエディタのツールバーから「公開」をクリックし、「ウェブアプリケーションとして導入」を選択します。
image.png

「Deploy as web app」ダイアログが表示されるので、「Execute the app as」に「User accessing the web app」を、「Who has access to the app」に「Anyone within G Suiteユーザ」を選択し、「Deploy」ボタンをクリックします。

image.png

デプロイ後、ダイアログの表示内容が変わります。
「Current web app URL」の内容をコピーして控えておき、「latest code」リンクをクリックします。
image.png

別タブでWebサイトが表示されます。
※初回は以下のようなダイアログが表示されるので、「REVIEW PERMISSIONS」をクリックしてください。
image.png

結果

image.png

あとは控えたURLをGoogleサイトに埋め込めば完成です。

6
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?