AppSheet実践編㉓～Googleカレンダーとの連携～
こんにちは！肉球です！皆様いかがお過ごしでしょうか！パッとしない天気が続いてますね～。
こんなじめじめした毎日ですが、季節は夏です。というわけでダイエット始めました。同士はおりませんか！！一緒に頑張りませんか。。。（切実）
はいはい、それでは今回もAppSheetのお話していきましょうかね～。
Googleカレンダーと連携してToDo管理アプリを作るよ！
きっかけ話
仕事で活用するグループウェアはMicrosoft365がトップシェアなのは皆さんご存じの通りとは思いますが、中にはGoogleWorkSpaceを採用されているお客様もいらっしゃいます。
（ちなみに弊社ではMicrosoft365だけではなく、GoogleWorkSpaceの運用支援も行っています。）
ただ、普段からこのようなツールを使い慣れていないと予定やその予定のToDoの管理方法に困ってしまうパターンもあるのではないでしょうか。
Googleカレンダーの方にもToDoリスト機能はあるのですが、予定との紐づけができないのです。
例えばあの会議に向けてToDoがあるな～、このイベントには準備がいろいろあるからToDo登録しとかなきゃな～とか予定に関するToDoが多くて管理に困ってる！という方は今回の内容をぜひ参考にしてみてください！
AppSheetもGoogle社なのでGoogleWorkSpaceとの相性はばっちりです。
ということで今回は、GoogleカレンダーとAppSheetを連携させてToDo管理アプリを作ってみようと思います！
※一応どのライセンスでも基本機能としてGoogleカレンダーは使えるのですが、使えない場合はシステム管理者へ問い合わせてみてください！
参考：ビジネス向けの合理化とコラボレーション ソリューション | Google Workspace
完成形からみていこう！
完成形はこれ！
※執筆時期5月時点でのカレンダーです。
予定詳細画面はみやすいようにPCモードにしています。
このアプリでは予定を登録するとGoogleカレンダーの方にも反映されるので、Googleカレンダーへ改めて登録する必要もなく、その予定に対するToDoが一目で確認できるようになっています。
また、WebリンクからはGoogleカレンダーのこの予定の詳細へ飛ぶこともできます。
事前準備
では早速アプリを作っていきます。いつもはスプレッドシートを準備するくらいなのですが、今回は以下の準備が必要になってきます。
Googleカレンダーの設定
GoogleカレンダーとAppSheetの連携
ToDoテーブル（スプレッドシート）の準備
いつもより準備するものが多いですが、そんなに手間はかかりませんのでご安心ください。
■Googleカレンダーの設定
まずはGoogleカレンダーの設定から行います。
GoogleWorkSpaceへログインし、「Googleアプリ」アイコン（９つの点）を押下し、Googleカレンダーを選択します。
余計なカレンダーは一旦非表示にさせたいので、Googleカレンダー左側の「マイカレンダー」でチェックが入っているカレンダーのチェックを外します。
そして「他のカレンダー」の右側の「＋」を押下し、「新しいカレンダーを作成」を選択します。このカレンダーが今回使用する、AppSheet連携用のカレンダーです。
任意のカレンダー名をつけて、「カレンダーを作成」を押下し、前画面へ戻ると、「マイカレンダー」に今作成したカレンダーが追加されているので、表示させるようにチェックを入れましょう。
これでカレンダーはできたので、一つ適当な予定を入れてみました。
こんな感じでGoogleカレンダーの設定はOKです。
AppSheetではどのように表示されるのでしょうか？
■GoogleカレンダーとAppSheetの連携
続いて、AppSheetへ連携させてみましょう。
AppSheetの管理画面を開き、Create＞App＞Start with existing dataを押下し、任意のアプリ名を入力します。
Choose your dataでどのデータからアプリを作成するか選択画面に遷移します。
Googleカレンダーを過去一度も連携したことがない場合は、この画面には表示されませんので「＋New source」でGoogleカレンダーを追加します。
Googleカレンダー追加時にログイン画面が表示される場合は、下図のように手順に従ってログインしてください。
少し話戻りまして、追加したGoogleカレンダーを選択するとどのカレンダーを使うのか聞かれるので、先ほど用意したAppSheet連携カレンダーを選択します。
これでGoogleカレンダーとAppSheetが連携され、アプリが生成されます。
■ToDoテーブル（スプレッドシート）の準備
最後にToDo管理用のテーブル（スプレッドシート）を用意します。簡易的なものでOKです。
今回は下図のようなシンプルなテーブルにしました。
事前準備は以上です！
設定手順
それでは先ほど生成されたアプリの設定に入っていきましょう。
■Data設定
※improved editorモードで開発していきます！
現時点ではGoogleカレンダーが連携されているのみなので、メニューバーのDataで開発画面を開き、左側Dataの横にある「＋」からToDoシートを取り込みます。
取り込んだら、Googleカレンダーテーブル、ToDoテーブルそれぞのData設定を行います。
【Googleカレンダーテーブル】
下図のようにカラムが全て英語表記になっているので、DISPLAY NAMEに日本語表記を入力し、TYPEを微調整していきましょう。
私は下図のように赤枠部分を設定しました。
WARNINGが出ていますが、特に気にしなくてもOKです。
【ToDoテーブル】
ToDoテーブルは下図のように設定しました。
ID列はRef設定し、AppSheet連携カレンダーの方からToDoが確認できるようにしてます。
Refについてはこちらの記事を読んでみてね。
RefによってできたAppSheet連携カレンダー側の仮想カラムには以下のように設定しました。
Descriptionに説明を入れてあげると、入力時にわかりやすくなります。
Dataの設定は以上です。
■View設定
次にView設定を行います。下の図でわかるように、現状Mapビューが表示されています。これはGoogleカレンダーとの連携時に自動生成されるようですが、使わないので削除しちゃいましょう。
メニューバー＞Viewsでビューの設定画面を開き、PRIMARY NAVIGATIONの下にある「Map」の右側の3点ポチからDeleteを選択します。これでこのビューの削除は完了です。
①カレンダービュー
カレンダービューの設定では以下３つのView設定を行います。
カレンダーテーブルのView設定
カレンダーdetailのView設定（予定詳細画面）
カレンダーformのView設定（入力時）
【カレンダーテーブルのView設定】
基本設定からDisplayまではこんな感じで設定します。
※ビュー名は長かったのでシンプルな名前に変えました！
【カレンダーdetailのView設定（予定詳細画面）】
続いてカレンダーdetailのView設定を行います。
Viewの左下にSYSTEM GENERATEDという項目があり、その中にAppSheet連携カレンダー_Detailがあるのでこちらを押下します。
ある程度お好みで設定してOKですが、今回は見やすそうなカードレイアウトを使います。
Use Card Layoutの切り替えボタンを押下してONにします。
そして下図のようにカードレイアウトの詳細設定をしていきます。
また、この詳細画面で見せたい項目をColumn orderで設定します。
最低限必要な情報を入れましょう。今回は以下７つの項目を表示するように設定しました。
実際の予定詳細画面はこんな感じです。
※DescriptionとMeet Linkは今回未入力ですが、どうやらこれらの項目は未入力だと表示されないみたいです。
【カレンダーformのView設定（入力時）】
最後にカレンダーformのView設定です。先ほどのSYSTEM GENERATEDから、AppSheet連携カレンダー_Formを選択し、設定画面を開きます。
ここではColumn orderのみ設定し、他はそのままでOKです。
実際の予定入力画面はこんな感じです。
これでカレンダーformのView設定も完了しました。
②ToDoビュー
ToDoビューは以下の２つのビューを設定します。ToDoテーブルViewは作りません！
入力フォーム（ToDo_Form）のView設定
ToDo_InlineのView設定
【入力フォーム（ToDo_Form）のView設定】
SYSTEM GENERATEDからToDo_Formを選択します。
カレンダーform同様、設定するのはColumn orderくらいで大丈夫です。
入力画面はこんな感じでとてもシンプルです。
【ToDo_InlineのView設定】
SYSTEM GENERATEDからToDo_Inlineを選択します。
ここでは期限を昇順にソートし、Column orderは以下のように設定しました。他はいじらなくてOKです。
View設定は以上になります。
これでアプリは完成です。
使ってみる！
では実際に使ってみましょう。
予定を適当に入れていきます。ToDoも予定を保存する前に入力できるので入れてみました。
入力した予定にはGoogleMeetのリンクも自動で生成されていました。予定詳細画面はPCモードにしています！
生成されたGoogleMeetのリンクを踏んでみると、Meet参加画面へ遷移しました。
※顔バレ防止のためビジュアルエフェクトのフィルタを使っていますが肉球本人です。。。
Googleカレンダーの方にも反映されているか確認しましょう。
しっかり反映されていました。でもToDoは表示されません。。。
GoogleカレンダーでのToDoリストを使った場合、ToDoの一覧化はされているものの、予定ごとのToDo、、という見せ方はできないので、そうようなニーズの場合は今回ご紹介したようなAppSheetのアプリと連携した管理のやり方がオススメです。
まとめ
予定とToDoが一目でわかるのはありがたいですし、使い方もとても簡単でした。
また、GoogleMeetのリンクが自動生成されるのは、作るまで私も知らなかったので驚きました。
Googleカレンダー側で予定登録した際、GoogleMeetを未設定にするとGoogleMeetのリンクは当然発行されません。
それがAppSheet側で登録すると発行されるんですね～。
ただし、参加者へのインビテーション送付機能までは連携できないので、参加者がいる場合はGoogleカレンダーの方から登録したほうがよさそうです。
※Actionを使えばメールやSMSを使って参加者へ通知する、という機能は作れそうですが、Googleカレンダーのインビテーションと同一ではないので、公式で使うのは難しそうです。
なので、冒頭でも説明したように、あくまでもメインのカレンダーとして使用する、というよりは予定とToDoの状況をご自身で管理するためのアプリとして使用するのがベターな気がします。
ソシオネット株式会社について
IT内製化支援、Salesforceの運用・導入、および、DX化推進に関するご相談を承っております。
弊社では、ノーコード開発ツールを用いたIT内製化支援、Salesforceの運用・導入、および、DX化推進に関するご相談を承っております。お気軽に弊社お問い合わせサイトよりご相談などをお寄せいただければと思います。
ソシオネットHP：http://www.socionet.co.jp/
対話型定額制アプリ開発サービス「DXデビュー」：https://socionet.co.jp/dxdebut/
IT内製化支援支援サービス「DXオープンラボ」：https://socionet.co.jp/insourcing-support-service/
IT運用とDX化のワンストップサポートサービス「DXサポーターズ」：https://socionet.co.jp/dx-supporters/
Salesforce最適化支援サービス：https://socionet.co.jp/salesforce-service/
お問い合わせ：https://socionet.co.jp/contact/
AppSheet勉強会もやってるよ！
弊社主催のAppSheet勉強会を定期開催しております。8月開催分のお申込みは以下からお願いいたします。
ホーム - 8/13(火)【毎月第2火曜開催】AppSheetを知ろう！初心者向けかんたんハンズオン勉強会！ | Peatix
8/20(火)【毎月第3火曜開催】実践的なスキルが学べる！AppSheetアプリ開発ワークショップ | Peatix
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？