lattendance

研究室の出席管理ツール（Node.js, Express）
レスポンシブ対応済

概要

研究室用の出席登録システムです。
GitHubアカウントでログインし、予定の作成・削除・編集が可能です。
予定のURLを共有することで、予定の出欠登録状況を共有することができます。
N予備校の教材をベースに制作しました。
言語は主にJavascript(Node.js)、フレームワークはExpressを用いて作成しました。
特に工夫した点は、Slackのbotを使って簡単に出欠の登録や確認をできるようにした点です。

デモ

lattendance_demo2_hd.mp4

ダウンロードとHerokuへのデプロイ方法

1.このリポジトリをダウンロードする
2.Herokuのアカウントを作成し、Heroku CLIをインストール
3.Herokuへログインし、Heroku上にアプリを作成

heroku login -i  
heroku create

4.Heroku上にデータベースを作成

heroku addons:create heroku-postgresql:hobby-dev

5.環境変数のセット

heroku config:set HEROKU_URL='作成したHerokuアプリのURL'  
heroku config:set GITHUB_CLIENT_ID='GitHub OAuthで登録したアプリのクライアントID'  
heroku config:set GITHUB_CLIENT_SECRET='GitHub OAuthで登録したアプリのクライアントシークレット'  
heroku config:set SESSION_INFO='あらかじめ定めたセッションシークレット'
heroku config:set SERVER_API_SECRET='あらかじめ定めたJWT認証に用いるAPIシークレット'  
heroku config:set DATABASE_SSL='true'  
heroku config:set BASIC_USER_ID='Basic認証のユーザー名'  
heroku config:set BASIC_PASSWORD='Basic認証のパスワード'  

6.Heroku環境へのプッシュ

git push heroku main:main

ローカル環境での確認方法

事前にGit・Node.js・yarn・PostgreSQLのインストールが必要です。
検証環境はUbuntu 20.04 LTSです。

プロジェクトの初期設定

1.このリポジトリをダウンロードする
2.GitとNode.js、yarnのインストール
3.必要なパッケージをインストール

yarn install

4.secret_info_sampleのフォルダ名をsecret_infoに変更し、各種変数を設定

PostgreSQLのインストールと起動

5.PostgreSQLのインストール

sudo apt install -y postgresql

4.PostgreSQLの起動

sudo service postgresql start

5.psqlへのログイン

sudo -u postgres psql

6.psql上でデータベースの作成

create database lattendance;

7.psql上でパスワードの変更

alter role postgres with password 'postgres';

8.psqlから出る

exit

プロジェクトの起動

9.起動

PORT=8000 yarn start

終了時

10.Ctrl+Cを押し、起動コマンドを終了
11.PostgreSQLの停止

sudo service postgresql stop

特徴

Slackとの連携設定をすることにより、Slackのチャンネル上でbotにメッセージを送信するだけで出欠の確認・登録ができます。
botから本システムのAPIを叩く構成になっており、botのシステムを変更することで理論上すべてのチャットツールで利用できます。
APIにはJWT認証があり、セキュリティ的にも安全です。
Slackとの連携をする場合、lattendance-botを同時に起動し、事前に設定を行う必要があります。
lattendance-botの設定方法はREADMEを確認してください。

また、Bootstrap4を用いているため、全ページレスポンシブ対応です。

構成図

lattendance-botとの連携時の構成は以下のようになっています。

機能

トップページ

ログイン・ログアウト機能

GitHub OAuthを用いたログイン機能があります。
GitHubのアカウントがあれば、誰でもログイン可能です。
ログアウトは上のナビゲーションバーの自分のユーザー名の部分をクリックすると、ログアウトボタンが出てきます。

URL共有機能

自分が作成した予定のURLを他の人に共有することができます。
コピーボタンは1度しか押せません。
再度押したい場合はリロードしてください。

lattendance_url_share_hd.mp4

予定一覧表示機能

ログインしている場合、ログイン済みのユーザーが作成した予定の一覧が更新日時の近い順に表示されます。
それぞれの予定をクリックすると、その予定のページに移動します。

予定作成機能

新規の予定を作成できます。
予定名と説明、日程を改行区切りで入れることで予定の作成が可能です。

予定削除・編集機能

削除・編集ボタンから予定の削除・編集ができます。
削除・編集ができるのは、予定の作成者のみです。
編集後、出欠情報はリセットされます。

予定作成者ではない場合は、この項目は表示されません。

Slackとの連携登録機能

Slackとの連携登録ができます。
記載されている手順に従い、チャンネルIDを登録・トークンを発行・環境変数としてトークンを登録することでbot経由で出欠登録が可能になります。

登録が完了すると、予定ページに「Slack連携済み」と記載されます。

予定作成者ではない場合は、この項目は表示されません。

Slackとの連携設定変更機能

Slackとの連携設定の変更ができます。
変更可能な項目は、以下の3つです。

• Slack連携の解除
• チャンネルIDの変更
• トークンの再発行

出欠登録機能

チェックが出席、はてなが不明、ばつが欠席を示しています。
出欠登録の方法は、以下の2種類あります。

1.サイト上で登録する

ログインしているユーザーのみ、自らの出欠の登録ができます。
他のユーザーの出欠については閲覧のみ可能です。
変更したい出欠のボタンを押すことで出欠の変更が可能です。
Ajaxを使っています。

2.Slackのbot経由で登録する

事前にユーザー登録と設定を行うことで、Slackのbot経由で出欠の登録ができます。
HubotとAPIの認証にJWTを用いています。

具体的には、以下の形式で出欠の登録・確認が可能です。

@[ボット名][コマンド名][半角または全角のスペース1つ以上][日付(月/日)]

例えば、ある予定に7/1に出席と登録したい場合、対応するSlackチャンネル上のbotに対して、以下のメッセージを送信します。

@lattendance-bot 出席　7/1

正常に完了した場合、以下のように登録が完了したというメッセージがbotから返され、lattendance上の出欠情報も更新されます。

推奨環境

モバイル

OS	Chrome	Safari	Android Browser & WebView	Firefox
Android	〇	-	Android 5.0 以降	〇
iOS	〇	〇	-	〇

デスクトップ

OS	Chrome	Firefox	Microsoft Edge (chromium)	Safari	Internet Explorer
Windows	〇	〇	〇	-	×
macOS	〇	〇	△	〇	-

デプロイ環境

• Heroku

使用したライブラリ・フレームワーク

バックエンド

• Node.js 14.17.3
• Express 4.17.1
• Passport 0.4.1

データベース

• PostgreSQL 10.17
• Sequelize 5.22.4

テスト

• Jest 25.1.0

フロントエンド

• jQuery 3.6.0
• webpack 4.26.1
• Bootstrap 4.5.3
• Pug 3.0.2