Zenn
🎽

サークルの会員サイトをGoogle Sitesで作った話

2023/12/12に公開
個人開発
Cloudflare
GAS
googleサイト
ウェブサイト
tech

早稲田大学陸上競技同好会（早大同）のウェブサイトをGoogle Sitesで作った話です。

  • Google Sitesの共有権限を絞ることで、会員のみが閲覧可能なサイトを作成しました。GASを用いることで、会員登録における処理をできるだけ自動化しています。
  • Cloudflare Registrarで取得した独自ドメインをGoogle Sitesに適用しました。

作成にかかった金銭的コストはドメイン取得費、ドメイン維持費のみです。
完成したウェブサイトはこちらから

https://www.waseda.run

新しいウェブサイトの内容


外部公開しているサイト
今回作成したウェブサイトでは、会員サイトもGoogle Sitesを使用して作成しました。

Google Sitesを選んだ理由

早大同では数年前から独自にウェブサイトを作成していました。(今後封鎖する予定です。)
既存のウェブサイトには以下のようなコンテンツがありました。

  • サークル外部の方に向けて
    • 早大同が運営する大会の情報を発信
    • 新規に入会したい人へ向けての情報発信
  • サークル内部の人に向けて
    • 練習会や合宿、大会等で撮影した写真
    • 内部向けのお知らせ

これらの内容をVPSサーバーで運用していたのですが、アルバムを開こうとしても時間がかかる、ホームページ管理者が適切に管理することができないといった問題がありました。
そこで、以下の3点を軸に新しいウェブサイトに使用するプラットフォームの検討を始めました。

  1. 誰でも管理できる
    サークルという性質上、毎年ウェブサイトを管理する人が変わります。年度によってはウェブサイト管理を全くしたことがない人が管理を行うことになる場合もあります。そのため、直感的に操作できる、できればノーコードで管理することのできる方法を探していました。
  2. 会員だけが見れるページを作れる
    既存のウェブサイトではサークル内部の人へ向けて練習会や合宿、大会等で撮影した写真をウェブサイトで共有していました。新しいウェブサイトにおいても会員向けのウェブサイトを残すことを要求されたため、会員サイトを作れることも条件の一つでした。
  3. お金ができるだけかからない
    早大同は200人程度会員のいる早稲田でも有数の規模のサークルではありますが、予算には限りがあります。各会員の会費をもとにウェブサイトを運営することになるため、できるだけ金銭的コストを小さくする必要がありました。

以上のような条件の中で会員のみに画像を見せるためのいくつかの手法を比較、検討しました。

notionを用いて共有

2023年12月現在、notionの学生会員は一つのノートに100人までゲストを無料で招待することができるます。そこで、2つのノートにサークルの会員を招待することで200人程度の会員のみがアルバムを見れる状態になります。
しかし、notionは頻繁に料金改定を行っており、将来に渡ってnotionを使い続けることができるかどうかわからないこと、notionだけでは外部向けのウェブサイトを作成しても検索インデックスに乗らないこと、ノートを2つ作ることが面倒くさいこと、サークルの会員全員にnotionアカウントを作って貰う必要があるといったデメリットがあったため、採用しませんでした。
一方でGoogle Sitesと比べて画質の良い画像をアップロードすることができるというメリットがあります。場合によってはnotionも選択肢に入るかなと思います。

LINEでアルバムは共有

会員を管理者が管理することができないため、早大同のユースケースにはあいませんでした。

Google Driveで共有

アルバムに載せる画像をGoogle Driveで共有する方法です。画像だけではなく、動画、PDFファイルなども簡単に共有できる点、Google Sitesと比べて高画質の画像を共有できる点がメリットです。一方でGoogle Sitesと比べて見た目のカスタマイズ性が低いです。Google Driveを用いて共有する場合、DriveAPIを用いることでGoogle Sheetsから共有する人を選択するできるようにすると管理しやすいと思います。

Google Sitesで共有

Google Sitesに画像をアップロードし、Google Sitesを共有する人をサークルの会員のみに絞ることで会員サイトを作成することができます。画質が落ちてしまう、外部向けのGoogle Sitesとファイルを分けなければならないといったデメリットがあります。さらに、Google Sitesを共有できる人数に制限があるという情報があります（未確認）。一方で直感的に操作することができ、外部向けのGoogle Sitesと同じように作業を進められるので複数のことを覚えなくて良い点、他のGoogleサービスと連携することで会員が用意する必要があるものがGoogleアカウントだけになるというメリットがあるためこの方法を採用しました。

会員サイトの仕組み

作成した会員サイトに会員が登録し、閲覧権限が付与されるまでの流れをまとめます。

会員サイトを閲覧するまでの流れ

  1. （会員）　Google Formから会員登録を行う。
    Google Formを入力する際にGoogleアカウントでのログインを必須とすることによって、後ほどGoogle Sitesを共有する際に必要なGoogleアカウントの情報を取得しています。
  2. （自動）　Google FormからGoogle Sheetsに自動で登録される。
  3. （管理者）Google Sheetsで閲覧権限を付与したい人にチェックを付ける。
    早大同では、会員費を支払った会員のみに会員サイトの閲覧権限を付与しているため、管理者による承認を行っています。
  4. （自動）　Google Apps Scriptを用いて、Google Sheetsにチェックが付けられた人にGoogle Sitesのファイルを共有する。同時にウェブサイトの閲覧権限がついたことをメールで通知する。（後述）
  5. （会員）　リンクをクリックすると会員サイトを見れるようになる。

各種ファイルの作成

会員サイトを作成するに当たって作成したファイルは以下の４つです。

  • 会員登録用のGoogle Form
  • Google Formに紐付けられたGoogle Sheets
  • 外部公開用のGoogle Sites
  • 内部公開用のGoogle Sites

これらのファイルを適切に連携することによって、図で示したように、会員は会員登録をするだけで、管理者はGoogle Sheets上で承認するだけで会員登録を完了することができます。そこで必要になる、Google Apps Scriptについて詳しくまとめていきます。

Google Apps Scriptを用いた共有の自動化

Google FormとGoogle Sheetsを連携するとデフォルトではA列に最後に編集された日時、B列にメールアドレスが入ります。管理者によって閲覧権限付与のチェックマークがつけられた場合、B列のメールアドレスの人にGoogle Sitesの閲覧権限を付与するという処理をGoogle Apps Scriptを用いて行っています。
DriveAppを用いて特定のファイルに共有権限を付与するやり方は以下のとおりです。

function grantViewPermission(email) {
	const fileID = "ひみつ";
	const file = DriveApp.getFileById(fileID);
	file.addViewer(email);
}

なお、Google Sitesを共有したい場合、fileIDはhttps://sites.google.com/d/ の直後の値です。
Google Sheetsで承認が行われると、Google Sitesの閲覧権限が付与されるだけではなく、メールの送信も行いたかったので、Google Sheetsの編集が行われるたびに以下のプログラムを実行するようにしました。

function onHomepage(e) {
  const sheet = e.source.getActiveSheet();
  let range = e.range;
  // W列（23番目の列）のみを対象とする
  if (range.getColumn() === 23) {
    // セルの値がTRUEかどうかを確認
    if (range.getValue() === true) {
      // 同じ行のB列の内容を取得
      const valueInB = sheet.getRange(range.getRow(), 2).getValue();
      // B列が空でない場合
      if (valueInB) {
        try {
          grantViewPermission(valueInB);
          sendEmail(valueInB);
          Browser.msgBox(valueInB + "に共有権限を与えました。");
        } catch (err) {
          Browser.msgBox(valueInB + "に共有権限を与えることに失敗しました。" + err);
        }
      } else {
        // E列のチェックボックスを再度FALSEに設定
        range.setValue(false);
        // ユーザーに警告メッセージを表示
        Browser.msgBox("B列が空のため、W列のチェックボックスをTRUEに設定することはできません。");
      }
    } else {
      var valueInB = sheet.getRange(range.getRow(), 2).getValue();
      // B列が空でない場合
      if (valueInB) {
        try {
          banViewPermission(valueInB);
          Browser.msgBox(valueInB + "の共有権限を剥奪しました。");
        } catch (err) {
          Browser.msgBox(valueInB + "の共有権限を剥奪することに失敗しました。" + err);
        }
      } else {
        // E列のチェックボックスを再度FALSEに設定
        range.setValue(false);
        // ユーザーに警告メッセージを表示
        Browser.msgBox("B列が空のため、E列のチェックボックスをTRUEに設定することはできません。");
      }
    }
  }
}


function grantViewPermission(email) {
  const fileId = "ひみつ";
  const file = DriveApp.getFileById(fileId);
  file.addViewer(email);
}


function banViewPermission(email) {
  const fileId = "ひみつ";
  const file = DriveApp.getFileById(fileId);
  file.removeViewer(email);
}


function sendEmail(email) {
  MailApp.sendEmail(email, "メールのタイトル", "メールの本文");
}

Clouflare Registrarで取得した独自ドメインの設定

ここまでの話はすべて無料のサービスで完結することができますが、ドメインの取得についてはお金がかかります。今回はCloudflare Registrarを用いてドメインの取得を行いました。

ドメインの取得方法については詳しい記事[1]に譲るとして、Cloudflare Registrarで取得したドメインをGoogle Sitesに適用する方法について解説していきます。
基本的には公式ドキュメントに従うだけなのですが、Cloudflare Registrarで行う必要のある設定もあります。

所有権の確認

Cloudflare Registrarでドメインを新規取得しただけの場合、所有権の証明が完了していないため、所有権の確認をGoogle Search Consoleから行います。
公式ドキュメントの「ドメインの所有権を証明する」に従って作業を行います。TXTレコードを追加する段階になったらCloudflare RegistrarでTXTレコードの追加を行います。

Cloudflare RegistrarでTXTレコードを追加する

Cloudflare->DNS->RecordsにあるDNS management for mydomain.comからAdd recordをクリックしてTXTレコードを追加します。

カスタム ドメインを設定する

ここまで完了したら、公式ドキュメントの「カスタム ドメインを設定する」に従ってドメインを登録します。

CNAMEの設定

サードパーティのドメイン登録事業者に接続する段階になったらCloudflare RegistrarでCNAMEの設定を行います。なお、私達はGoogle Sitesのサブドメインにwwwを設定したため、wwwをサブドメインとして設定しています。
先程と同様にCloudflare->DNS->RecordsにあるDNS management for mydomain.comからAdd recordをクリックしてCNAMEを追加します。
このとき、Proxyの設定をOffにしてください。

感想

新しいサイトを見てもらった会員には、アルバムの読み込みが早くなった！見やすくまとまっているといった声を頂いて嬉しかったです。
やっぱり、自分で作った制作物を誰かに使ってもらえるというのはうれしいですね！
これからも積極的にいろんなものを作っていきたいと思います。

謝辞

サイト開発に関わってくれたすべてのメンバーに感謝します。

  • 早大同　48代ホームページ管理者　森上さん：Google Sitesのデザインをすべて作ってくださいました。どうもありがとうございます。
  • 歴代ホームページ管理者のみなさん：みなさんが早大同のウェブサイトを作り、守ってきてくださったからこそ、新しいウェブサイトに移行する土台がありました。どうもありがとうございます。
  • 早大同のみなさん：いつもウェブサイトを見てくれてありがとうございます！毎回楽しく練習に参加させてもらっています！これからもよろしくね！

早大同はインカレサークルです。早稲田大学の人も、他大学の人も、陸上に興味がある方は、https://www.waseda.run から練習に参加してみてください！（大学生 or 大学院生だけだよ）
ブログを見てサークルに参加したという人が現れることを待っています😀

脚注

  1. https://qiita.com/khayama/items/fdda7884033b519aa1fe ↩︎

Discussion