お知らせ
この記事の最新記事を新たに作成しています。こちらを参照していただけると幸いです
はじめに
今回もGsuite(google)のサービスのみで掲示板アプリを作ってみました。
これを作ろうと思ったきっかけとしては、
Gsuiteのサービス一覧に組織全体に知らせるための掲示板のようなアプリケーションってないなー。
ないなら勉強がてら作ってみるかーと思ったのがきっかけです。
イメージフロー
①：掲示板に新規に投稿したり、投稿している掲示板に対して返信を実行
②：返信の投稿の際に返信元の投稿者にメールを送信
③：掲示板の投稿を確認を行います。記事を閲覧したユーザは自動で既読情報を更新
デモ環境
今回、自分の個人googleアカウントでデモ環境を作って公開しようと思います。
デモなので本来のアプリケーションと違う部分や制限機能を設けています。
名前や、記事に内容は全てサンプル用に用意したものになります。
アプリケーションのアクセス方法は匿名アクセスにしています。
デモ環境はこちら
ソースコードはこちら(Github)
アプリケーション解説
これからはアプリケーションの解説を行なっていきます。
スプレッドシート
使用しているスプレッドシートは2つです。
- 投稿内容保持するスプレッドシート（データ）
- シートIDやファルダIDを保持するスプレッドシート（マスタ）
データプレッドシート
カラムは以下のようにしています。
| id | 親id | 削除フラグ | タイムスタンプ | ... |
|---|
新規投稿内容も返信内容も一つのスプレッドシートで保持しています。
「親id」の部分で親子関係を管理しています。
マスタスプレッドシート
UPDATA_FLG
データスプレッドシートのデータがスプレッドシートのセル制限を超えないかを時間のトリガー処理で行なっています。
もし、セル制限を超えそうな場合は、スプレッドシートのデータを直近投稿１０件以外を別のシートに退避させます。
処理実行中時の画面
そのトリガー処理時はアプリケーションにアクセスできないようにするためのフラグになります。
SNS_ACCESS_KEY
仮にトリガー処理でバックアップ処理を実行した場合、投稿記事の一意キーが変わってしまします。
そのバックアップ処理が変わったことを判断するための判断として使用するキーになります。
アプリケーションアクセス時にクライアント側で保持し、実際にデータシートを更新時にキーが一致するかを判断しています。
SNS_BORAD_DATA , SNS_FILE
データのスプレッドシートIDと添付ファイルを保存するフォルダIDを設定しています。
web画面
ライブラリはVue.js
フレームワークはvuetify.js
この二つを利用して作成しました。
投稿一覧画面
アプリケーションアクセス時、初めに表示する画面です。
自動で、直近の掲示板数件の投稿を取得します。
「さらに読み込む」をクリックすることでさらに数件読み込む仕様になっています。
複数の検索ワードから検索が可能になっています。
表示するのを数件ずつ表示する関係上、リアルタイム検索は出来ないのが残念です。
「新規投稿」ボタンから新規投稿が可能で、「リロード」ボタンで記事の再読み込みを行います。
一覧をクリックすることで詳細内容が表示されます。
新規投稿
特に説明することはないかと思います。
添付ファイルはGASのアップロード制限？で50Mbまでにしています。
※デモ環境では新規投稿できないです。
詳細画面
枠内に表示されている、文章が掲示板の全本文になります。
投稿者本人の場合、左上に「ゴミ箱」ボタンが表示され、削除することが可能です。
※デモ環境では投稿者の名前は「デモ投稿太郎」になります。
下に表示しているメッセージは掲示板に対してコメントをした内容を表示しています。
「リプライ」ボタンで返信画面の表示
「目」ボタンで閲覧者の確認（デモ環境では仮の人しか入っていません）
「リンク」ボタン、「添付ファイル」ボタンは投稿者が添付した場合、クリックし表示されます。
返信画面
こちらも特に説明することはないと思います。
メール送信のチェックボックスでメール送信の有無を選択できます。
※返信投稿は実際に、スプレッドシートに書き込まないので自由に試してください。
返信も返信者の投稿のみ削除が可能です。
以上で説明を終わります。
最後に
Gsuiteのサービスで組織全体に周知する掲示板が出来てくれたらもっと便利になるきがするんですけどねー。
あんまり需要がないのでしょうか？
それと、一部スマホで操作すると思い通りの操作をしてくれないのでそこは改良する必要があると思っています。
なにかご質問や、指摘等がありましたらよろしくお願いします。