kの雑記ブログ
本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
UIの新旧画面への切り替えは、下写真を参考にアイコンをクリックしてください(^^)
まずはじめに
スケジュール管理アプリの登録内容をGカレンダーにも反映させたい人
アクションボタンで必要な情報を反映した状態でGカレンダーの作成画面を立ち上げる
今回の記事は、アクションボタンでGカレンダーへアプリの登録情報を送信する設定方法についてです。
内容としては別の記事でまとめた「承認フローにおける差戻しメールの発信機能」と親戚関係みたいなものです。
先に結論であるコピペでOKな構文を貼っておきます。
concatenate(“https://calendar.google.com/calendar/render?action=TEMPLATE&text=”, [予定], “&dates=”, TEXT([開始日], “YYYYMMDD”), “T”, TEXT([開始時間], “HHmmss”), “/”, TEXT([終了日], “YYYYMMDD”), “T”, TEXT([終了時間], “HHmmss”), “&add=”, [対象者], “&details=”,[メモ],”%0A%0A★参考URL：”,”<a href=” ,[参考URL],”>”, [参考URL], “</a>”)
この構文でタイトル、開催日時、ゲスト、詳細があらかじめ入力された状態でGカレンダーの予定作成が可能になります。
黄色下線の部分をご自身のアプリのカラムに置き換えてご使用ください(^^)
構文がものすごく複雑なように見えるので詳しく解説していきます。
それでは勉強していきましょう！
準備するデータについて
まず本記事の内容を理解することで、下図のような画面をアクションボタンから立ち上げられるようになります。
そのためには準備するデータが大事で、下図のようなデータテーブルを用意するのをおすすめします(^^)
対象者カラムはアプリユーザーテーブルとref関係を結びます。
このテーブルには予定を共有したい人を登録します。
2つのテーブルの準備ができたら、appsheetにデータを送りデータタイプの設定を行います。
特に難しい設定はないので、データタイプの選択は下図を参考にしてください。
まずは、スケジュールテーブルの設定です。
対象者のEnumlistはBase typeをRefにして、参照先のテーブルをアプリユーザーにしましょう
残りの設定は特に注意することはないですが、終了時間のInitial valueにtime([開始時間]+1)と入れるとデフォルトで予定時間が1時間となるのでおすすめです(^^)
アプリユーザーテーブルの方は、emailをkey値、名前をLabel値に変更します。
データタイプの設定は以上です。お疲れ様でした(^^)
アクションボタンの作成
データタイプの設定が完了したら、次はアクションボタンの作成をします。
まずは、下図の赤枠部分を参考にして設定の変更をしてください。
次にこの記事で最も大事な部分であるGカレンダーを立ち上げるためのURLを設定します。
Targetに以下の構文をまずは貼り付けてください。
concatenate(“https://calendar.google.com/calendar/render?action=TEMPLATE&text=”, [予定], “&dates=”, TEXT([開始日], “YYYYMMDD”), “T”, TEXT([開始時間], “HHmmss”), “/”, TEXT([終了日], “YYYYMMDD”), “T”, TEXT([終了時間], “HHmmss”), “&add=”, [対象者], “&details=”,[メモ],”%0A%0A★参考URL：”,”<a href=” ,[参考URL],”>”, [参考URL], “</a>”)
この構文が表している役割を色分けすると下図のようになります。
まずは知っておくと便利なconcatenate()関数の使い方をマスターしましょう(^^)
concatenate(part,part,…)
括弧の中に繋ぎたいカラム値や文字列をカンマで区切って引数として指定します
複数のパーツを指定する場合は、各パーツをダブルクオーテーションで囲み、カンマで区切ってつなげる必要があります。
図解の赤文字がconcatenate()関数を意味します！
concatenate()関数の基本を抑えたところで、残りのタイトル、開催日時、ゲスト、詳細を指定するURLについて解説します。
タイトル
タイトル部分のURLは、図解のオレンジ文字の部分が該当します。
concatenate(“https://calendar.google.com/calendar/render?action=TEMPLATE&text=”, [予定])
ダブルクオーテーションで囲まれたURL（第一引数）が、Gカレンダーの立ち上げとタイトルに何を入力するか？を表し、第二引数でappsheetに入力された[予定]の文字列を取得しています。
ちなみに、上記のconcatenate()関数を入力した場合は、タイトルのみ入力された状態でGカレンダーが立ち上がります(^^)
開催日時
開催日時部分のURLは、図解の青文字の部分が該当します。
“&dates=”, TEXT([開始日], “YYYYMMDD”), “T”, TEXT([開始時間], “HHmmss”), “/”, TEXT([終了日], “YYYYMMDD”), “T”, TEXT([終了時間], “HHmmss”)
複雑そうに見えるこの部分ですが、やっていることは
appsheetで入力された開始日、終了日のDateタイプのデータをText()関数で変換
appsheetで入力された開始時間、終了時間のTimeタイプのデータをText()関数で変換
これだけです。
ゲスト
ゲスト部分のURLは、図解の緑文字の部分が該当します。
“&add=”, [対象者]
appsheetの設定で、[対象者]にはenumlist（ベースタイプはref）で、対象者のメールアドレスが入力されるようになっています。当ブログの読者の皆さんには、ここは特に難しい設定ではないと思います。
詳細
詳細部分のURLは、図解の紫文字の部分が該当します。
“&details=”,[メモ],”%0A%0A★参考URL：“,”<a href=” ,[参考URL],”>”, [参考URL], “</a>“
この部分の構成は少し複雑ですが、それぞれ意味する部分を色分けしました。
黄色下線の部分は純粋なテキスト情報としてGカレンダーに表示
青色下線の部分の「%0Aは改行」を表す
赤色下線の部分はHTMLで使用されるリンクを作成するためのタグ
赤下線の部分は私もあまり詳しくないのですが、簡単に説明するなら
<a href=”https://www.example.com”>リンクのテキスト</a>
この場合、https://www.example.comへのリンクが「リンクのテキスト」というテキストで表示されます。
となります。
今回の場合だと、[参考URL]のリンクをそのままテキストとして表示 という意味になります(^^)
設定の検証
最後に設定の検証を行います。
まずはスケジュールの登録をしてみます。
次にDetail Viewに表示されているGカレンダー転送のアクションボタンをクリックします。
予定、対象者、メモ、開始時間が反映されたスケジュール登録画面が立ち上がります(^^)
まとめ
以上、appsheetで作成したスケジュール管理アプリのデータをGカレンダーに転送する方法についての記事でした。
concatenate(“https://calendar.google.com/calendar/render?action=TEMPLATE&text=”, [予定], “&dates=”, TEXT([開始日], “YYYYMMDD”), “T”, TEXT([開始時間], “HHmmss”), “/”, TEXT([終了日], “YYYYMMDD”), “T”, TEXT([終了時間], “HHmmss”), “&add=”, [対象者], “&details=”,[メモ],”%0A%0A★参考URL：”,”<a href=” ,[参考URL],”>”, [参考URL], “</a>”)
この構文なら似たようなカラム構成のアプリはデータ転送が可能になるので、ぜひ頭の片隅にでも覚えていてもらえればと思います(^^)
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)