🏐

AppSheetとGoogleカレンダーの連携

2022/12/09に公開約8,300字

はじめに

AppSheetで予定表を作成し、Googleカレンダーに転記する方法を紹介します。
ここではBehaviorのActionで実装していますが、AutomaitionのBotでも可能かと思います。

新しいAppを用意する

AppSheetのHome画面から、新しいAppを作成します。

https://www.appsheet.com/home/apps#owned


新しいAppの作成

  1. 「Create」ボタンを押し、「App」から「Blank app」を選択します。
  2. 「App name」欄にアプリの名前(今回は「予定表」と付けています)を入力して、「Category」のリストの中から適当なものを選択します。
  3. 「アプリの準備ができたよ!」の画面が出てくるので、「Customaize your app」を押す。


デフォルトのテーブル

  1. すでにデフォルトのテーブルが一つ用意された状態でエディタ画面が表示されます。個人的にはエディタ画面は「legacy editor」の方が好きなので、右上の四角の中に目が入っているようなアイコンで切り替えます。


デフォルトのテーブルとビューの削除

  1. デフォルトで用意されているテーブルとビューを削除します。


テーブルもビューもない状態

テーブルを準備する

スプレッドシートで予定を管理するテーブルを作成します。


マイドライブに生成されたフォルダ

  1. マイドライブの直下に、「/appsheet/data/予定表-(シリアルナンバー)」のフォルダが生成されているので、スプレッドシートで新規にテーブルを作成する。


テーブルのカラムの設定

  1. スプレッドシートの1行目にデータを格納していくカラム(列)を設定します。
  • Keyを設定するカラム(赤)
    • ID予定表:レコード(行)の固有の値=Key
  • レコードを管理するためのカラム(緑)
    • 作成日時:レコードを作成した年月日時間
    • 作成日:レコードを作成した年月日
    • 作成時間:レコードを作成した時間
    • 編集日時:レコードを編集した年月日時間
    • 編集日:レコードを編集した年月日
    • 編集時間:レコードを編集した時間
    • メモ:レコードに関するメモ書き
    • フラグ:動作確認用のフラグ
  • データを記録するためのカラム(白)
    • タイトル:カレンダーに記録する予定のタイトル
    • 開始日:予定の開始日
    • 開始時間:予定の開始時間
    • 終了日:予定の終了日
    • 終了時間:予定の終了時間
    • 場所:予定が行われる場所
    • 説明:予定の説明


テーブルの新規作成

  1. DataのTablesタグからNew Tableボタンを押して、新しくテーブルを作成します。
  2. Add dataでGoogle Sheetsを選択します。
  3. 2で作成したシート(予定表)を選択し、Selectボタンを押します。
  4. Create a new tableで内容を確認し、Add This Tableボタンを押します。


カラムの設定

  1. 予定表のテーブルのView Columnsを押して、カラムの設定画面を開きます。詳細設定画面とプレビュー画面の間にある「▶」のボタンを押すと、プレビュー画面が閉じて詳細設定画面が広くなるので、編集作業がしやすくなります。
  2. 各カラムを以下のように設定します。
    「VC開始」と「VC終了」というバーチャルカラムも、「Add Virtual Column」のボタンを押して、設定します。
NAME TYPE KEY LABALE FORMULA SHOW EDITABLE REQUIRE INITIAL_VALUE DISPLAY_NAME DESCRIPTION
_RowNumber Number = = = =Number of this row
ID予定表 Text = =UNIQUEID() = =
作成日時 DateTime = =NOW() = =
作成日 Date = =DATE([作成日時]) = =
作成時間 Time = =TIME([作成日時]) = =
編集日時 ChangeTimestamp = = = =
編集日 Date =DATE([編集日時]) = = =
編集時間 Time =TIME([編集日時]) = = =
メモ LongText = = = =
フラグ Yes/No = = = =
タイトル Name = = = =
開始日 Date = =TODAY() = =
開始時間 Time = = = =
終了日 Date = =TODAY() = =
終了時間 Time = = = =
場所 Text = = = =
説明 LongText = = = =
VC開始 DateTime =[開始日]&" "&[開始時間] = =開始 =
VC終了 DateTime =[終了日]&" "&[終了時間] = =終了 =
  1. SAVEボタンを押して、設定を保存します。

テーブルのビューを設定する

予定表テーブルのビューを設定します。ビュータイプはtableにしています。


ビューの設定

次に、「Show system views」ボタンを押して、詳細を表示するビュー「予定表_Detail」、入力をする時のビュー「予定表_Form」を表示させて、「予定表_Form」を設定します。


「Show systemu views」ボタン


入力フォームビューの設定

OptionsタブからFormの設定が変更できます。「Form style」を「Default」から「Side-by-side」に変更すると、下図のように入力枠の左側に入力項目名が表示され、1画面に表示される項目数が増えます。


Formのオプション設定

試しに入力フォームからいくつかの予定を入力し、表示状態を確認します。
予定表の表示ビュー設定の「Column width」を「Default」から「Narrow」に変更すると、表の列幅がいい感じで狭くなります。


予定表ビューの確認

Googleカレンダーの準備

AppSheetと連携させるGoogleカレンダーを準備します。
マイカレンダーとは別に新しいカレンダーを用意して、予定表と連携させます。


新しいカレンダーの作成

  1. Googleカレンダーの「他のカレンダー」の+ボタンを押して、他のカレンダーを追加します。
  2. 「新しいカレンダーを作成」を選択します。
  3. 「新しいカレンダーを作成」画面で名前(ここでは「G連携カレンダー」にしています)をつけます。また、タイムゾーンを「日本標準時」に設定し、「カレンダーを作成」ボタンを押します。
  4. マイカレンダーの下に新しく作成したカレンダーが表示されたのを確認します。


新しいソースの追加

  1. AppSheetにGoogleカレンダーをソースデータとして追加します。
    まず、New Tableボタンを押します。
  2. 「+New source」ボタンを押します。
  3. 「Add a new data source」から「Google Calendar」を選択します。
  4. アカウントの選択で、先程用意したカレンダー(G連携カレンダー)のアカウントを選択します。
  5. 「Google AppSheetがGoogleアカウントへのアクセスをリクエストしています」と表示されるので、「許可」のボタンを押します。


Googleカレンダーをテーブルとして取り込む

  1. Googleカレンダーがソースに追加されましたので、再び、New tableボタンを押し、「Google Calendar」を選択します。
  2. 「Choose a Sheet/Table」で用意しておいたカレンダー(G連携カレンダー)を選択します。
  3. 「Create a new table」で「Add This Table」ボタンを押します。


取り込んだGoogleカレンダーのテーブル

Googleカレンダーをテーブルとして取り込むことができました。
カラムの設定を変更していいかどうか、正直、よく分かりませんので、そのまま使うことにします。

カレンダービューの設定

取り込まれたカレンダーのビューはmapタイプ[1]になっていますので、calendarタイプに変更します。


mapタイプで追加されたカレンダーのビュー

View typeを「calendar」に変更して、View Optionsを下図のように設定します。


G連携カレンダービューの設定

プレビュー画面のカレンダーから予定を登録して、Googleカレンダーに反映されるか確認します。
Googleカレンダーの方からも予定を変更したり、削除したりするとAppSheet側のカレンダーも変更されます。


AppSheetとGoogleカレンダーの連携の確認

予定をG連携カレンダーに転記するActionを作成する

いよいよ最後の工程です。
予定表に入っている予定を、G連携カレンダーに転記するActionを作成します。
1つ1つの予定ごとにボタンを押して転記する方法もあるのですが、ここでは転記したい予定を複数選択して、一括で転記する方法を実装します。
作成するActionは2つです。

  • 「Data : add a new row to another table using values from this row」を使って、予定をG連携カレンダーに転記するアクション
  • 「Data : execute an action on a set of row」を使って、選択した予定を一括で操作するアクション


予定をG連携カレンダーに転記するAction

  1. BehaviorのActionsタブからNew Actionボタンを押し、Add a new actionで「Create a new action」ボタンを押して、予定をG連携カレンダーに転記するActionを作成します。
    設定は以下の通りです。
  • Action name:予定をG連携カレンダーに連携する
  • For a record of this table:予定表
    (対応するテーブル)
  • Do this:Data : add a new row to another table using values from this row
     (対応するテーブルの値を使って、他のテーブルに新しい行を追加する)
  • Table to add to:G連携カレンダー
    (行を追加するテーブル)
  • Set these columns(セットするカラム)
G連携カレンダー 予定表
Title [タイトル]
Start [VC開始]
End [VC終了]
Location [場所]
Description [説明]
  • Prominence:Do not display(非表示)


一括転記するAction

  1. 一括転記するActionを作成します。
    設定は以下の通りです。
  • Action name:一括転記
  • For a record of this table:予定表
    (対応するテーブル)
  • Do this:Data : execute an action on a set of row
     (選択された行に対し実行する)
  • Referenced Table:予定表
    (参照するテーブル)
  • Referenced Rows:LIST([ID予定表])
    (参照する行:複数の行を選択するので、リストタイプで指定します。)
  • Referenced Action:予定をG連携カレンダーに転記する
    (参照するアクション)
  • Prominence:Display inline(インラインに表示)


予定表テーブルで動作するAction

  1. 予定表テーブルに2つのアクションが正常に動作するか確認します。
    プレビュー画面の予定表ビューから、右上のチェックボックス(☑)を押します。


G連携カレンダーに転記する予定を選択する

4.予定表の行の先頭にチェックボックス(☐)が表示されるので、転記する予定にチェック(☑)を入れて、右上の縦3点リーダーを押します。


縦3点リーダーのメニュー

  1. 縦3点リーダーのメニューが開かれるので、「一括転記」を選択します。


AppSheetのG連携カレンダーとGoogleカレンダー

選択した4つの予定がAppSheet側のG連携カレンダーと、Googleカレンダーの両方に転記されました。
以上でAppSheetとGoogleカレンダーの連携の一例についての説明を終わります。
長文になりましたが、最後まで閲覧して頂き有難うございます。

追加情報


カレンダー表示期間のデフォルトの設定

DataメニューのTablesタブ内のSTORAGEにあるWorksheet Name/Qualifierを参照してください。
デフォルトでは、カレンダーの表示期間を「-90」~「+90」日間で設定されています。
この「-90」や「90」の値を変更することで、表示期間を変更することができます。

脚注
  1. カレンダーのLocationに正しい場所の名前や位置情報が入っていれば、Googleマップでの表示も可能です。 ↩︎

Discussion

ログインするとコメントできます