社内連絡用掲示板アプリ【GAS】

社内で利用してる掲示板アプリが外部の有償サービスながらも、結局は単純な通知的な意味合いでしか利用されていないということから単なるコストとみなされ、尚且つカスタマイズも出来ないという不自由さから、外部サービスを廃止してGASで作成し直そうという事になりました。

そこで共有ドライブをファイル置き場にしつつ、CKEditorを利用したスプレッドシート連携の社内掲示板アプリを作成しました。若干癖があるものの、単純な通知系であるならばこの程度は自作出来てしまうのがGoogle Apps Scriptの良いところです。

今回使用するスプレッドシート等

部署別連絡帳アプリと同じ仕組みを利用しつつ、掲示板エディタとしてCKEditorを利用しつつ、検索機能やGoogle Driveへのアップロード機能を装備して、掲示板としての機能を構築しています。レスなどを付けるタイプの掲示板ではなく通知専用の掲示板となります。

今回はファイルのアップロード先としては共有ドライブを利用しますので、Google Workspace Business Standard以上のアカウントを持って説明しています。

部署別連絡帳アプリ

Google Picker アップローダを作る【GAS】

事前準備

初期セットアップ

まずは、スプレッドシートを開き、メニューから「アプリ設定」⇒「初期セットアップ」を実行します。スプレッドシートのIDがスクリプトプロパティに格納されます。

この作業を行わないとスプレッドシートの読み書きが行えないので必ず実行しましょう。その際に初回実行時認証がされるので、認証を実行します。ただ初回は初期セットアップが走らないので、再度初期セットアップを実行しメッセージが出るのを確認しましょう。

メンバーデータの準備

投稿をする際に、投稿者の部署名などを取得する為に利用してるデータです。対象となるシートは「meiboシート」で、手動で登録しても良いのですが、面倒だと思いますので、メニューから「アプリ設定」⇒「ユーザ情報取得」を実行することで自動的に、Admin Directory APIを利用してGoogle WorkspaceのDirectoryからユーザ情報を取得し反映することが可能です。

ただしこの機能はGoogle Workspaceの管理者権限を持つ人しか実行が出来ませんので要注意。Directoryに未登録の情報は反映されないので手動で追記が必要になります。

本アプリでは、雇用形態については「正社員」「派遣・業務請負」のどちらかを入れる必要があります（投稿の通知先区分として利用します）

部署データの準備

部のコードと、課のコードの一覧を整備しておきます。

部のIDは今回は連番とし、課のコードの方でぶら下がる部IDの部分と同じIDを利用します。課のコードも連番にしておきます。重複しないように整備しましょう。アプリでフィルタして使うのはこの課のコードのほうが中心になりますが、部と課のそれぞれを持って、サイドバーの部課一覧で利用しているので、きちんと整備しておきましょう。

図：部と課のコードをきちんと整備しておく

図：設定した内容がサイドバー等で利用される

アップロード先指定

Picker APIの準備

Picker APIはGoogle Apps Scriptの為に用意されているライブラリではありませんが、JavaScriptからは利用できます。使う為にはデベロッパーキー（APIキー）が必要となるので、事前準備が必要です。事前準備の手順は以下の通りです。

Google Cloud Consoleを開く
Google Cloud Platformが開かれるので、左サイドバーから「APIとサービスの有効化」をクリック
「Picker API」を検索しクリックします。
有効化をクリックします。
引き続き、「認証情報を作成」をクリックします。
認証情報ウィザードが開かれます。使用するAPIでは、Picker APIを選択します。
「必要な認証情報」をクリックすると、APIキーが手に入ります。これで準備完了。コピーしておきましょう。
スクリプトエディタに戻り、OKを押して終了します。

図：Picker APIは活用範囲が広いです。

図：API Keyを生成して取得する

共有ドライブの作成

今回作成する共有ドライブは、画像や添付ファイルのアップロード先として利用します。ただし、アップロード自体はアプリから実行するのと実行権限は設置者の権限で行わせるので、共有ドライブ自体に掲示板利用者のメンバーへの権限は「閲覧者権限」で設定します（ダウンロードは可能）。理由は掲示板以外のファイルをアップロードして利用されるのを防ぐ為です。

設置者は投稿者以上の権限でメンバーを追加しましょう。そして、1つアップロード用のフォルダを作成し、フォルダのIDを取得しておきます。

図：通常利用者は閲覧権限にて設定

アップロード先の指定

スプレッドシートを開き、メニューより「アプリ設定」⇒「アップロード先指定」をクリック。前述の項目で取得しておいたフォルダのIDを指定します。この指定をしておかないと、掲示板アプリから添付ファイルや画像のアップロードを行うことが出来ません。

各種トリガーの設置

本アプリケーションは2種類のトリガーが用意されています。

掲示板データ投稿時にアップロードしたけれど、キャンセルした場合のファイルの自動削除用
公開期限設定をした掲示板データが公開期限を超えたものについて自動でアーカイブする機能

共有ドライブをアップロード場所として利用してるため、放置すると40万ファイルの制限に将来的に引っかかる可能性がある点と、いつまでも古い掲示板データをスプレッドシートに残しておくことで動作が緩慢になるのを防ぐ為の機能です。

スプレッドシートのメニューより「アプリ設定」⇒「自動ファイル削除トリガー設置」「自動アーカイブトリガー設置」をそれぞれ実行します。設置する人はこのスプレッドシートの管理者１名だけでOKです。

深夜2時〜3時の間でuploadlistシートを走査したり、bbsシートを走査して該当のデータに対して処理を自動で実行します。

通知先の設定

掲示板へデータが投稿された場合の通知先を指定します。3種類存在し

正社員にチェックを入れた場合に一斉通知するメーリングリストアドレスの設定
派遣・業務請負にチェックを入れた場合に一斉通知するメーリングリストアドレスの設定
各種エラーが発生した場合の管理者へ通知するメールアドレス設定

それぞれ、スプレッドシートのメニューより「アプリ設定」⇒「正社員ML指定」「派遣ML指定」「管理者メアド指定」からクリックして、メールアドレスを入れてOKをクリックします。

ウェブアプリケーションとしてデプロイ

ここまで準備が整いましたら、最期にウェブアプリケーションとしてデプロイを行います。ただし、1つ注意点もあります。以下の手順でまずはウェブアプリケーションとしてデプロイを行いましょう。

スプレッドシートはあくまでも管理者が使う為だけのもので、ユーザが利用するのはGASで生成したウェブアプリの側を利用します。ウェブアプリケーションをデプロイをします。

スクリプトエディタを開く
右上のデプロイをクリック
新しいデプロイをクリック
種類の選択ではウェブアプリを選択し、「次のユーザとして実行は自分」にしておきます（管理者権限で動作しますが、スプレッドシートを公開する必要はありません）
アクセスできるユーザは、社内公開する必要があるので「ドメイン内組織内全員」としておきます
末尾がexecで終わるURLが発行される。これがウェブアプリケーションのページとなります。
execで終わるURLをスクリプトエディタを開いて、recordman.gsのwebapp変数に記入します。
次回以降コードを編集して再デプロイ時はデプロイを管理から同じURLにて、新しいバージョンを指定して発行することが出来ます。

GASのウェブアプリですので、複数アカウントでログインした状態の場合、403エラーで表示されないこともあるので、基本は1プロファイル1アカウントでログインしての運用が必要です。

※注意点としてこのウェブアプリの場合、Google Sitesに埋め込みを行うと、投稿した掲示板への直リンクを取得する機能（URLをコピー）が使えなくなります（これはGoogle Sitesの仕様で、navigator.clipboard.writeTextが動作しません）

図：組織内の全員が使えるようにしておきます。

使い方

掲示板の閲覧

概要

ウェブアプリを開いたら、左サイドバーを開き、項目をクリックすると、そのジャンルに合致したデータがbbsシートから呼び出されて表示されるようになっています。

タイルの中の「開く」をクリックすることで、掲示板データの詳細を閲覧する事が可能です。左上のチップが添付ファイルとなり、右上に各種コマンドが用意されています。下部は部署名と投稿者の氏名、メールアドレスリンクがついてきます。

図：タイル状に掲示板データが表示されます

図：詳細な掲示板データ

各種コマンド

右上の各種コマンドは左から

URLをコピー：このエントリーへの直リンクを取得出来ます。
投稿編集：投稿した人にだけ表示され、投稿内容を修正する事が可能です。
削除：投稿した人にだけ表示され、投稿エントリーを削除出来ます（同時に添付ファイルもドライブから削除されます）

掲示板に投稿

右上の新規投稿もしくは投稿編集をクリックした場合、下の図のような投稿画面が出てきます。

左サイドバーから、ジャンル選択・公開範囲・公開日・公開期限・通知の有無を入力していきます。公開範囲はチェックしたものとmeiboの雇用形態が一致する人だけ閲覧する事が可能になります。通知はチェックを入れることで公開範囲に合致したMLに対して投稿通知のメールを送信します。また、公開日を未来にしておくと、その日より公開されるようになり、公開期限を入れておくとトリガーで自動でその日以降は非公開となります。

右側のCKEditor画面はWYSIWYGのHTMLエディタであり、書いた文章が裏側でHTMLとして出力されています。ソースでその内容を確認することが可能。

また追加機能として、Google Driveのアイコンをクリックするとファイルのアップロードが可能。指定した共有ドライブにファイルはアップロードされて、右上のChipに添付ファイルとして追加されるようになります。添付されたファイルがJPG/PNG形式の場合は本文にも挿入されます。添付ファイルの✕をクリックするとドライブから削除されますが、本文に挿入された画像のタグは削除されないので、本文を再編集した場合、不要な画像の場合は添付ファイルからも手動で削除が必要です。

添付ファイルはエントリーの削除と共に合わせて自動で削除される仕様になっています。

また、本文に挿入された画像は基本が縦500pxで画面のサイズに合わせてアスペクト比を維持したまま収縮するように作られていて、クリックすると新しいタブで画像を直接表示するようになっています。

最期に、右上の保存ボタンをクリックする事でbbsシートに記録されてエントリーとして表示できるようになります。

図：投稿編集画面

その他の機能

その他の機能として、メイン画面の右上に表示されてる検索より、投稿データの全文検索が可能です。ヒットしたエントリーを表示する事が可能です。クリアを実行することで現在開いてるジャンルのデータをリロードするようになっています。

図：検索窓から全文検索出来る

改訂履歴

2023年12月19日
・直リンクのURLをコピーについて、Google Sites貼り付け時に動かない問題を修正
・直リンクでオープン時に添付ファイルが見えない問題を修正
2023年6月29 - 初版リリース