Google カレンダーの自動変更 (JavaScript)

□ 概要
カレンダーを変更するために Google Clould Platform で API キーと OAuth 2.0 クライアント ID の両方を作る (API Discovery Document は無くて良い)。クライアント ID 作成時に JavaScript origin を指定する (例、https://hoge-hoge.com) (リダイレクト URL は不要)。google-api-javascript-client を使う (async defer src で読み込み)。初期処理で gapi.load と gapi.client.init を実行。gapi.auth2.getAuthInstance().signIn() でユーザー認証を行う。resource 変数に予定を作る。gapi.client.request で予定をカレンダーに書き込み。

 

 

□ 予備知識

Google Clould Platform
    https://console.cloud.google.com/

 

 

□ 参考ページ

google-api-javascript-client:
https://github.com/google/google-api-javascript-client

Request Body Sample:
https://github.com/google/google-api-javascript-client/blob/master/samples/requestWithBody.html

Getting Started:
https://github.com/google/google-api-javascript-client/blob/master/docs/start.md

JavaScript Quickstart:
https://developers.google.com/calendar/api/quickstart/js

Events Insert:
https://developers.google.cn/calendar/api/v3/reference/events/insert

Try Lifelog 様:
http://lifelog.main.jp/wordpress/?p=2202

 

 

□ カレンダー API の有効化

https://console.cloud.google.com/
プロジェクトを作成後、
上部ボタン左、ナビゲーション メニュー

APIとサービス
ライブラリ
Google Calender API
有効にする

 

 

□ APP_KEY の作成

APIとサービス
認証情報
上部ボタン、認証情報を作成
API キー
******

f:id:sato-7411:20220111232354p:plain

 

f:id:sato-7411:20220111232454p:plain

 

 

□ OAuth 2.0 クライアント ID の作成 (ウェブ アプリケーション)

APIとサービス
認証情報
上部ボタン、認証情報を作成
OAuth クライアント ID

アプリケーションの種類:ウェブ アプリケーション
名前:ウェブ クライアント2

承認済みの JavaScript 生成元: https://hoge-hoge.com
承認済みのリダイレクト URI: (なし)

クライアント ID:******
クライアント シークレット:******
JSON をダウンロード (未使用)

f:id:sato-7411:20220111232634p:plain

 

f:id:sato-7411:20220111232736p:plain

 

f:id:sato-7411:20220111232841p:plain

 

 

□ Client with Request Body サンプルの試し方 (Lolipop 環境)
https://github.com/google/google-api-javascript-client/blob/master/samples/requestWithBody.html
本ファイルを JavaScript origin の場所に配置する

変更①:
var apiKey = '...

変更②:
var clientId = '...

変更③:
var resource = { ...
"start": {
"end": {
予定の日付は近日に変更
,"visibility": "public" を追加。予定の設定が、予定あり、公開、になる

Lolipop にアップロード、ブラウザで https://hoge-hoge.com/requestWithBody.html を開く
Sign in ボタンを押下
OAuth 同意画面が開くので
ユーザーを選択
Continue
Continue

Make Request ボタンを押下

 

 

(20220228 追加コメント)

1回目
[Sign In] [Make Request]
※ Make Request ボタンを押しても、何も起こらない

Sign In ボタン押下

アカウント (hoge.hoge@gmail.com) のログインと認証 (許可) (「招待元のデベロッパーを信頼できる場合のみ、続行してください。」)

[Sign In] [Make Request] の画面に戻る
Sign In ボタンは何度も押せて、認証画面に進む
Make Request ボタン押下

Calendar entry successfully created 


2回目
※ セッションを閉じ (ブラウザを閉じ)、ブラウザを再起動した後。またはPC再起動後
[Sign In] [Make Request]
Make Request ボタン押下

Calendar entry successfully created 
Sign In ボタンで認証しなくても、カレンダーに書き込める

 

 

(20220315 追加)

□ 他の一般ユーザーでのカレンダー書き込み

指定する calendarId は、「一般公開して誰でも利用できるようにする」が設定されていること

プロジェクトに (テスト) ユーザーを追加する: API とサービス, OAuth 同意画面, テストユーザー, ADD USERS

JavaScript (Project No. での apiKey, clientId) では、ログインした人のカレンダーに書き込める

makeRequest で calenderId を指定する、他のページから書き込めてしまうので primary にはしない

Google カレンダーの「特定のユーザーとの共有」に「ユーザーを追加」した場合、複数ユーザーから1つのカレンダーに書き込めるか?
→ 書き込めない、表示のみ