kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- AppSheetのアクションボタンでできることを知りたい人
- AppSheetを学び始めたばかりの人
今回の記事はアクションボタンに関するまとめ記事です(^^)
AppSheetでアプリ開発を進めるうえで、ユースケースに応じた機能を実装したい となったときに触ることになるのがアクションボタンの設定になります。
ここでロジックを組めないなら、AppSheet以外の解決策を考える必要があります
これまでAppSheetでアプリ開発をしてきましたが、アクションボタンでできることが増えたり減ったりした記憶がないので、一旦まとめてみようと思います。
これまで何となく触っていた人もぜひ本記事を読んでもらえればと思います。
それでは勉強していきましょう！
データの下準備
今回の記事をまとめるのに使用したデータの紹介です。
アクションボタンの機能を確認したいので、シート1にはURLとファイル、電話番号、メールアドレスのカラムを用意しておきました。
シート2の方は、シート1のカラムの一部を用意しておきました。
これらテーブル情報をAppSheetに取り込み、データタイプの設定を以下のようにします。
URL、ファイル、電話番号、メールアドレスのカラムはそれぞれ、Url、File、Phone、Emailのデータタイプに変更するようにしてください。
データタイプを適切に変更しておくことで、AppSheetが自動でアクションボタンを作ってくれます
シート2の方は、特にデータタイプの設定を変更しなくてOKです。
続いて、アクションボタンの機能を見ていきましょう！
アクションボタンの解説
アクションボタンはアクションペイン（⚡マーク）で作り込むことができ、AppSheet側で自動生成したアクションボタンについては、System generated という表記がついています。
System generatedの表記があるアクションボタンについては、削除ができないので不要なときはPositionをHideにして非表示にしておきましょう！
ちなみにPositionには、Primary、Prominent、Inline、Hideの4つがありそれぞれの特徴として
- Primary：スマホだと画面右下、PCでは画面右上に配置
- Prominent：Detail画面の画面上部に配置
- Inline：主にTableもしくはDetail Viewの任意箇所に配置
- Hide：アプリ上では表示させない（アクションボタンの機能としては存在する）
が挙げられます。この4つのPositionについては記憶しておきましょう。
次は、本題であるアクションボタンで実装できる機能についてです。
機能の開発は、Do thisにあるリストを上から順に解説していきます。
App: copy this row and edit the copy
これを選ぶことで、今選択している行のデータ（カラム値）をコピーした状態で、編集画面を立ち上げる事が可能です。
Do thisにApp: copy this row and edit the copyをセットした状態で、Detail Viewにあるアクションボタンを押すと・・
テキストやステータスのカラムに、直前まで選んでいた情報がそのままコピーされた状態でフォーム画面が立ち上がっていることが確認できます。
ユースケースは、一度登録したデータをコピーする時 となります。
設定としては非常に簡単ですが、注意点もあります。
- 全てのカラムの情報をコピーしてしまう（コピーしたいカラムを選択することができない）
- refで紐ついている情報をコピーすることができない（親テーブルのデータのみコピー可能）
上記2つの注意点に関しては、別のロジックを組むことで対処可能です
①はLINKTOFORM関数を使いましょう(^^)
【脱初心者！】Deeplink関数の使い方
②はアクションボタンの機能を組み合わせましょう(^^)
【楽々設定！】Refで紐ついたデータを一括でコピーする方法
App: edit this row
これを選ぶことで、今選択している行の編集画面を立ち上げる事が可能です。
これはSystem generatedのEditと全く同じアクションボタンです。
App: export this view to a CSV file (not a row-level action)
これを選ぶことで、今見えているViewを構成しているデータをCSV形式でエクスポートする事が可能です。
また、これは特定の行に対して行うことはできず、テーブルやスライス単位での実行となります。
このアクションボタンは、PositionをPrimaryにしておくのがいいです。
CSV file localeは、自国の国名を選ぶようにしましょう。
日付や月、時間の表現が国によって違うので、自国を選んでおくのが無難です。
このアクションボタンはTable Viewで使うようにしてください。
このアクションボタンについての注意点をまとめています(^^)
【確認が必要！】CSVエクスポートの注意点
App: go to another AppSheet app
これを選ぶことで、別のアプリへ遷移する事が可能です。
次に説明するアクションボタンと違いがないように思いますので、合わせて解説します。
App: go to another view within this app
直訳すると、このアプリの別のViewへ遷移するですが、別のアプリに行くことも可能です。
私の使用環境では、どちらを使っても大差がないのでどちらを選んでもOKだと思います。
これらをDo thisで選択すると、必ずTargetを設定する必要があり、ここに入力する関数はDeeplink関数と言われるものになります。
Deeplink関数はAppSheet特有の関数で、知っていると使用画面のコントロールが可能です
AppSheetに用意されているDeeplink関数を詳しく学べます(^^)
【脱初心者！】Deeplink関数の使い方
App: import a CSV file for this view (not a row-level action)
これを選ぶことで、今見えているViewに対してCSVデータをインポートする事が可能です。
注意点として、読み込ませるCSVデータとテーブルの列情報を一致させる必要があります。（異なる場合はエラーメッセージが出ます）
先に説明したCSVエクスポートのアクションボタンと同じような設定にしておきましょう。
次に、以下のように列情報を揃えたCSVデータを用意します。
アクションボタンからインポートするCSVデータを選択し、成功すると以下のようなポップアップが出現します。
既存のシステムをAppSheetに置き換えるときとかに使えるアクションボタンです。
App: open a form to add a new row to this table (not a row-level action)
これを選ぶことで、今のテーブルにデータを登録するフォーム画面を立ち上げる事が可能です。
これはSystem generatedのAddと全く同じアクションボタンです。
Data: add a new row to another table using values from this row
これを選ぶことで、今選択している行のデータを別のテーブルに追加する事が可能です。
another tableとありますが、実は自テーブルを選択することも可能です。
端的に言えば、フォーム画面を立ち上げずにデータを転記したい場合に使用します。
上図の設定だと、Add rowのアクションボタンを押すと、テキストカラムに「入力しましょう」、ステータスに「入力」の値が入った状態の行が追加されます。
Data: delete this row
これを選ぶことで、今選択している行データを削除する事が可能です。
これはSystem generatedのDeleteと全く同じアクションボタンです。
Data: execute an action on a set of rows
これを選ぶことで、別のテーブルに存在するアクションボタンを別のテーブルに呼び出す事が可能です。
設定が少し複雑なので、下図を参考にしてください。
上図の設定だと、シート2にある「CSVインポート」を全ての行に対して実行する になります。
端的に言えば、「CSVインポート」のアクションボタンはシート2に存在しますが、これがシート1に表示されるようになった
と思ってください。
高度なアプリを作るときに必要なアクションと思っておけばOK！
Referenced Rows にはリストを設定する必要があり、ここをどうするのか？が最初はとても難しいと思います。
リストを返す関数として、SELECT()関数を必ず習得しておきましょう(^^)
SELECT()関数はリストを返す関数の代表関数です
SELECT()関数の基礎にについて学べます(^^)
【これで解決！】SELECT()関数の使い方
Data: set the values of some columns in this row
これを選ぶことで、テーブルに存在するカラムに値をセットする事が可能です。
上図の設定だと、「値をセット」をクリックするとメモカラムにテストというテキストが入力されます。
Set these columns にセットしたいカラムを複数セットすることも可能です。
アプリのUI/UXを高める設定として使う場面が多いので、ぜひマスターしておきたいアクションです。
また、このアクションはINPUTアクションを設定することができることも知っておきたいです！
INPUTアクションの使用例のアプリです
実用的なアプリで勉強しつつ、INPUTアクションの設定を学びましょう(^^)
【実用レベル】AppSheetで出勤アプリを作ってみよう
External: go to a website
これを選ぶことで、設定したURLのウェブサイトを開く事が可能です。
データタイプをUrlにすることで、AppSheet側で自動で生成をしてくれるアクションです。
URLを結合することで便利な機能を実装できます
アプリの情報をGカレンダーに登録する方法をまとめています(^^)
【超おすすめ！】スケジュール管理アプリの内容をGカレンダーに反映する方法
External: open a file
これを選ぶことで、設定したファイルパスを開く事が可能です。
データタイプをFileにすることで、AppSheet側で自動で生成をしてくれるアクションです。
External: start a phone call
これを選ぶことで、カラムに登録されている電話番号に電話をかける事が可能です。
データタイプをPhoneにすることで、AppSheet側で自動で生成をしてくれるアクションです。
注意点として、このアクションはモバイル端末しか使うことができません。
External: start a text message
これを選ぶことで、カラムに登録されている電話番号にショートメッセージを送る事が可能です。
データタイプをPhoneにすることで、AppSheet側で自動で生成をしてくれるアクションです。
注意点として、このアクションはモバイル端末しか使うことができません。
External: start an email
これを選ぶことで、カラムに登録されているメールアドレス宛てGmailを送る事が可能です。
データタイプをEmailにすることで、AppSheet側で自動で生成をしてくれるアクションですが、自分で設定することも可能です。
上図のように直感的にメール作成の設定が可能ですが、CCやBCCの設定などはできないため、細かな設定をしたい場合は別のアクションで設定をする必要があります。
URLを結合することで便利な機能を実装できます
Gmailを初期値が登録された状態で立ち上げる方法をまとめています(^^)
【超おすすめ！】承認アプリの差戻しメールの設定方法
Grouped: execute a sequence of actions
これを選ぶことで、複数のアクションボタンを1つにまとめる事が可能です。
アクションは何個でも合わせることができますが、処理は上から順に実行する事になっています。
注意点として、Deeplink() 関数のように画面遷移を伴うアクションを使用する場合、処理が途中で中断してしまいます。
そのため、該当するアクションを設定する際は、事前に動作確認を行うことを推奨します。
まとめ
以上、AppSheetのアクションボタンで実装できる機能についてのご紹介でした。
本記事で紹介した機能で、現行業務をAppSheetに置き換えることができなければ、別のITツールでの業務効率化を検討したほうがいいと思います。
アプリ開発の際、本記事のことを思い出して活用してもらえれば幸いです(^^)
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)