画像つきの詳細な解説はBlogを参照ください。
Blogへ移動
- Spreadsheetからカレンダーを自動生成
- 今日のイベントの一覧、カレンダーの一覧を表示
- 選択した日にちのイベントの確認も可能
- フルスクリーン表示も可能
- QRコードをクリックでも移動できる
- Google Calendar埋め込み
- 複数日にまたがったイベント、時間指定のあるイベント
- SpreadsheetのQuickstart等を使ってtokenを取得
スコープの変更が必要。
const SCOPES = ['https://www.googleapis.com/auth/spreadsheets', '``https://www.googleapis.com/auth/calendar'];
https://developers.google.com/sheets/api/quickstart/nodejs
- dev.envをboilerplateに沿って入力(Backend)
Firebaseプロジェクト、Token、Spreadsheetを準備する必要があります。
- Frontendの環境変数
.env.localにBackendをデプロイしたAPI_URLを入力します。上手くいけば予定が表示される様になります。
Sheet名をイベントの名前に変更して、必須項目の[A行:タイトル,B行:開始時刻]を入力します。
D行:担当をカンマ区切りで入力すると、イベントの詳細に表示されます。
以下のURLにアクセスするとカレンダーが更新されます。
[backend url]/[calendar/update](https://class-post-web-backend-o3mmnjeefa-an.a.run.app/calendar/update)
- スマホ表示
日にちを選択して、その日の予定を表示できます。下には、クリック可能なカレンダーへのQRコードが表示されます。スマホでの使用を想定しています。
[frontend url]
- スクリーン表示
フルスクリーンボタンがあり、教室の画面全体に映すことができます。カレンダーと簡易表示がセットで表示されます。
[frontend url]/test
- Frontend
https://github.com/Nekodigi/class-post-web-frontend
- Backend