kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- Deeplink関数とは何かを知りたい人
- アクションボタンで出来ることを増やしたい人
- 6種類のDeeplink関数の引数の渡し方が分かる
- アプリ内に高度な画面推移の機能を持たせる
AppSheetには、アプリ内の画面遷移を制御するための強力な機能「Deeplink」が用意されています。
現在、AppSheetには6種類のDeeplink関数があります。これらの関数は、引数の渡し方に独特のクセがあり、「とっつきにくくてワケが分からない！」と感じる方も多いかもしれません。
しかし、一度使えるようになると、これまで実現できなかった「やりたかったこと」が驚くほどスムーズにできるようになることが多いんです。
Deeplink関数は、アプリのUX（ユーザー体験）やUI（ユーザーインターフェース）を格段に高める、非常に重要な関数だと言えます。
今回は、そんなDeeplink関数の引数の渡し方や、役立つTIPSをまとめました。私なりの理解の仕方にはなりますが、これからDeeplink関数を勉強される方には、ぜひ参考にしていただければ幸いです。
それでは、さっそく勉強していきましょう！
Deeplink関数とは？
DEEPLINK()関数は、AppSheetに用意されている、まさにアプリ開発者の「やりたいこと」を叶える魔法の関数だと考えてください。
他の関数の多くが「値」を返すのに対し、DEEPLINK()関数は返り値ではなく、アプリ内の「画面の遷移」を行うという点が最大の特徴です。
DEEPLINK()関数が求めている引数の形式はAppSheet独特のもので、知っていないと本当に「どうすればいいの！？」と途方に暮れてしまうかもしれません。
そんな読者の皆さんの悩みを解決できるよう、気合いを入れてまとめました！ （正直なところ、私もまだ全てを完璧に使いこなせているわけではないですが！笑）
また、DEEPLINK関数を使用する場合、アクションボタンのDo this（このアクションを実行）の設定では、必ずApp: go to another AppSheet Appを選ぶ必要があります。
このことは覚えておきましょう(^^)
LINKTOAPP()関数
LINKTOAPP()関数は、現在開いているAppSheetアプリから別のAppSheetアプリへ画面を遷移させることができる関数です。
LINKTOAPP(app-name)
- 括弧
()の中に、遷移先のアプリのapp-name（アプリID）を二重引用符"で囲んで指定します。
「app-name（アプリID）って何！？」と私も初めて使った時に調べまくったので、以下を参考にしてください。
AppSheetのEdit画面を開き、URLの上部を見てみましょう。
例えば、URLがhttps://www.appsheet.com/template/editor?appId=deeplink-5497651&appName=MySampleAppのようになっている場合、appId=の後に続くdeeplink-5497651がアプリIDとなります。
例えば、別のアプリで以下のような設定でアクションボタンを作成するとします。
このアクションボタンを押すことで、アプリIDが"deeplink-5497651"のアプリに画面を遷移することが可能です。
設定としてはこれだけなので、非常に簡単ですね。
複数のAppSheetアプリを開発していて、それらを連携させたい時などに非常に便利な関数です。
LINKTOAPP()関数を使ったアプリの作成例です
自分がお気に入りで登録しているアプリやURLを1画面にまとめる方法です(^^)
【初心者におすすめ】AppSheetで簡単に作成できるアプリ
LINKTOVIEW()関数
LINKTOVIEW()関数は、AppSheetアプリ内で別のView（画面）へ利用者を直接遷移させることができる関数です。
LINKTOVIEW(View-name, [app-name])
View-name(第一引数): 遷移させたいViewの名称を二重引用符"で囲んで指定します。app-name(第二引数): （オプション）別のアプリ内のViewへ遷移させたい場合に、そのアプリのIDを二重引用符"で囲んで指定します。省略した場合、現在のアプリ内のViewを参照します。
「View-nameって何！？」という方は、以下を参考にしてください。
画面遷移させたいViewを表示させて、AppSheetエディターでそのViewの設定画面を開き、「Edit View」をクリックする。
「View name」に表示されている名称を確認する。この写真の場合だと、"map"がView-nameです。
例えば、以下のような設定でアクションボタンを作成します。
設定としてはこれだけです。
これにより、ある特定のViewにアプリ利用者を直接画面遷移させたい時に非常に便利です。
小技として知っておくと良いのが、Form ViewのSAVE時にアクションを1つセットできる点です。
フォームの保存後に特定のViewへ自動的に遷移させたい場合に活用できます。
LINKTOVIEW()関数は、特にForm View（データ入力フォーム画面）の保存時と組み合わせることで、アプリのUIを向上させることができます。
データの保存後に、任意のViewへ自動的に画面遷移させる設定は以下の手順で行います。
- アクションを仕込みたいテーブル名に対応する
〇〇_FormViewを選択します。（例: オリジナル_Form) - そのViewの設定画面で、
Behaviorタブを展開し、Event Actionsセクションに進みます。 Form Savedの項目で、事前に作成しておいたLINKTOVIEW()関数を設定したアクションをセットします。
このようにLINKTOVIEW()関数のアクションを仕込んでおくことで、データを登録した直後のView画面を自由にコントロールすることが可能となり、よりUIの高いアプリを作成することができます。
このTIPSは特にDeeplink関数と相性の良い組み合わせなので、この機会にぜひ覚えておきましょう！
LINKTOROW()関数
LINKTOVIEW()関数が「指定したViewに遷移する」のに対し、LINKTOROW()関数はさらに一歩進んで、対象のデータレコード（行）まで指定して画面を遷移させることが可能です。
これは、特定のデータに直接アクセスしたい場合に非常に便利な関数です(^^)
LINKTOROW(row-key, View-name[, app-name])
row-key(第一引数): リンク先となる**データ行のキー項目（Keyカラム）**を指定します。View-name(第二引数): ターゲットとなるViewの名前を二重引用符"で囲んで指定します。app-name(第三引数): （オプション）別のアプリ内の特定の行へ遷移させたい場合に、そのアプリのIDを二重引用符"で囲んで指定します。省略した場合、現在のアプリを参照します。
この関数を使うことで、例えば一覧画面から特定のレコードの詳細画面へ直接ジャンプさせたり、関連する別のアプリの特定データを参照させたりといった、より高度なUXを提供できます。
LINKTOROW関数については、別記事に便利なTIPSをまとめています。
特に、AppSheetの操作に慣れていないユーザーが、データを同期する前に画面を閉じてしまうのを防ぐ事ができます！
気の利いたUXの提供が可能になります
データを保存したあとに即座に同期させる方法についてまとめています(^^)
【効果あり】データの保存と同期を同時にする方法
LINKTOFORM()関数
このLINKTOFORM()関数は、めちゃくちゃ使える関数です！ぜひこの記事で使い方をマスターしてほしいです。
既存のデータを別のテーブルにコピーするように使えるため、AutomationのAdd onlyと組み合わせることで、簡単に自動化ができてしまいます。
自動化については別記事でまとめています
ある特定のカラムが更新されたら発火する設定方法がわかります(^^)
【簡単設定！】[_THISROW_BEFORE]の使い方
条件を満たす対象リストを全て表示させる方法が学べます(^^)
【TIPS】Start 〜 End 構文の使い方
仕事のリマインドメールを送信する設定方法に使えます(^^)
【簡単設定！】Automationで期限が差し迫った案件をメールで知らせる方法
LINKTOFORM(View-name, column-name, column-value[, column-name, column-value]...[, app-name])
View-name(第一引数): 対象となるフォームViewの名前を指定します。column-name(第二引数): データを送りたいテーブルのカラム名を指定します。column-value(第三引数): 第二引数で指定したカラムに渡したい値を指定します。[app-name](省略可能): 別のアプリのフォームへ遷移させたい場合に、そのアプリのIDを指定します。
この関数を使いこなせば、ユーザーの入力を大幅に簡素化したり、特定のワークフローを自動的に進めたりと、アプリの利便性を飛躍的に高めることができます(^^)
よりシンプルにまとめると、このように覚えてください。
LINKTOFORM("編集したいテーブル名_Form", "データを送りたいカラム名", [送りたい値], ...)
- 第一引数は、
"（ダブルクォーテーション）で囲んだデータを送りたいView名に_Formを付けたものです。 - 第二引数は、
"（ダブルクォーテーション）で囲んだデータを送りたいフォームにあるカラム名です。 - 第三引数は、第二引数のカラムに送りたい値を渡します。
それでは、具体的な例を用いてLINKTOFORM()関数の動作を確認してみましょう。
今、2つのテーブルがあるとします。一つ目のテーブルは「オリジナル」、もう一つは「コピー先」です。それぞれのテーブルのカラム構成は以下のとおりです。
| テーブル名 | オリジナル | コピー先 |
|---|---|---|
| ID(Key値) | オリジナルID | コピーID |
| 日付 | 日付 | 日付 |
| 登録者 | 登録者 | 登録者 |
| 内容 | 内容 | 内容 |
ここで、「オリジナル」テーブルにある情報を「コピー先」テーブルに送ってみたいと思います。
作成したアクションボタンの内容は以下のとおりです。このアクションボタンは「オリジナル」テーブルに作成します。
オリジナルの情報をコピー先に送りたいので、アクションボタンはオリジナルに作ります。
Targetには以下の関数を入力しています。
LINKTOFORM(
“コピー先_FORM”,
“コピーID”, [オリジナルID],
“日付”, [日付],
“登録者”, [登録者]
)
この設定では、「オリジナル」テーブルの[オリジナルID]、[日付]、[登録者]の各カラムの値を、それぞれ「コピー先」テーブルの[コピーID]、[日付]、[登録者]カラムに引き継いで、新しいフォームを開くよう指示しています。
値を送りたいのは「コピー先」テーブルなので、第一引数は"コピー先_FORM"となります。
ちなみに、「内容」のカラムについては値を送らなかったため、開かれるフォームでは空白（Initial Value）になります。
💡 大事なポイント！
LINKTOFORM()関数のView nameや登録先のカラム名は、必ずダブルクォーテーション " で囲む必要があります。
入力エラーが出ている場合は、まずこの点を確認してみてください。
LINKTOFILTEREDVIEW()関数
LINKTOFILTEREDVIEW()関数は、スライステーブルの考え方に非常に近い関数です。
特定のViewへ遷移するだけでなく、そのViewに表示するデータを事前に条件で絞り込むことができます。
LINKTOFILTEREDVIEW(View-name, filter-expression)
View-name(第一引数): 遷移させたいViewの名称を指定します。filter-expression(第二引数): そのViewに表示するデータを絞り込むためのフィルター条件式を指定します。
イメージとしては、スライステーブルのように「特定の条件に合うレコードだけを一時的に表示する」という機能が、画面遷移と同時に行われるようなものです。
一例として、所属部署別の組織表をAppSheetで再現してみましょう。
下図のようなテーブル構成（例: 組織表テーブルに名前、組織などのカラムがある）を用意します。
以下の手順を参考にViewやアクションボタンを作成していきましょう。
読み込んだ「組織表」テーブルをrefタイプでViewを作成します。（例: 組織表ref）
+アイコンから、同じ部署に所属する代表者を取得するVCを作成します。
Show?のチェックを外し、App formulaに以下の関数を入力します。
MAXROW(“組織表”, “_RowNumber”, [組織] = [_THISROW].[組織])
これは、同じ[組織]に属するレコードの中で、最も行番号が大きいレコードのIDを取得する式です。
先ほど作成したVCの値と等しいレコードを抽出するスライス条件を作成します。
（このスライスが、各部署の代表者のみを表示する役割を果たします。）
赤い矢印で示される部分を参考にアクションボタンを作成します。
Targetに以下の関数を入力しています。
LINKTOFILTEREDVIEW(“組織表ref“, [組織] = [_THISROW].[組織])
このアクションは、クリックしたレコードの[組織]と同じ組織に属するメンバーだけを組織表refViewに表示するよう指示しています。
ユーザーが最初に目にするViewを作成します。このViewの対象テーブルは、先ほど作成したスライステーブルとします。
そして、このViewのEvent Actionsに、先ほど作成したアクションボタンをセットします。
この設定でどういった画面の遷移が発生するのか確認してみましょう(^^)
トップViewには組織表の代表部署名（あるいは各部署の行）が表示され、それをクリックすることで、その部署に所属しているメンバーだけが絞り込まれて表示されるViewへ遷移します。
個人的には、デスクトップモードでのGroup by機能を使った方がよりスマートに同じような表示を実現できるため、そちらをおすすめします。（設定も楽ですし）
しかし、LINKTOFILTEREDVIEW()は、Viewを増やしたくないときに非常に頼もしい選択肢となります。
デスクトップモードの仕様がこれからのベースになりそうです
最低限覚えておきたいデスクトップモードの仕様について学べます(^^)
【プレリリース！】Desktop modeの基本を学ぶ(^^)
LINKTOPARENTVIEW()関数
LINKTOPARENTVIEW()関数は、Deeplink関数の中でも少し特殊で、引数を必要としません。
この関数でできることは、シンプルに「前のView（画面）に戻る」ことです。
具体的な使用例を見てみましょう！
この関数は、ユーザーが直前に見ていた画面に戻るための「戻るボタン」を実装する際に利用できます。
この「戻るボタン」をいつ表示させるか（または表示させないか）を、条件式を使って自在にコントロールすることが可能です。
これにより、ユーザーにとってより直感的で使いやすいUIを提供できます。
実用例については別の記事でまとめています
CONTEXT()関数を使うことで、アプリのUIを高めることが可能です(^^)
【簡単設定！】CONTEXT()関数の使い方
まとめ
今回は、AppSheetに用意されている6種類のDeeplink関数について解説しました。
特にLINKTOFORM()関数は、ぜひマスターしてほしい関数です。
この関数を使いこなせるようになれば、既存データのコピーや事前入力済みフォームの表示など、本当に様々な自動化やUI改善が可能になります。
他のDeeplink関数についても、知っているとアプリの画面遷移が格段にスムーズになり、ユーザーにとって使いやすいアプリを提供できます。
これらの関数を、アプリやViewを「繋げる」ための強力なツールとして、覚えておいて損はないと思います。
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)