本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回はAppSheetとGASに関する記事です。

AppSheetでは、ActionやAutomationといった機能を利用することで、簡単な設定だけで様々な処理を自動化できます。

しかし、Google Apps Script（GAS）を習得することで、さらに高度で柔軟な自動化処理を実装できるようになり、アプリ開発の可能性を大きく広げることができます。

私もGASで指示が出来るようになってから、さらにアプリ開発の幅が広がりました！

この記事では、GASの具体的な指示内容はシンプルなものに留め、AppSheetユーザーがGASを導入し、基本的な設定を行えるようになることに焦点を当てて解説していきます。

それでは勉強していきましょう(^^)

抑えておきたいGASの基本ルール

GAS（Google Apps Script）には、スタンドアロン型とコンテナバインド型の2種類のプロジェクトタイプがあります。

これらの違いを初心者の方にも分かりやすく説明します。

スタンドアロン型 (Standalone Script)

作成方法②のやり方でこのあと説明します(^^)

コンテナバインド型 (Container-bound Script)

まとめ

どちらのタイプを使うべきかは、作成したいスクリプトの目的によって決まります。

• 複数のファイルやサービスを連携させたり、独立した処理を実行したり、ウェブアプリケーションとして公開したい場合は、スタンドアロン型が適しています。
• 特定のファイルの内容を操作したり、そのファイルのUIをカスタマイズしたりする場合は、コンテナバインド型が便利です。

初心者の方は、まず自分が操作したいファイル（例えばスプレッドシート）を開いて、そこからスクリプトエディタを開き、コンテナバインド型のスクリプトを試してみるのが分かりやすいかもしれません。

あとは「管理」と「権限」については把握しておくとよいでしょう(^^)

また、AppSheet Automation から GAS を呼び出す場合の制限時間があります。

• データ変更イベントによる自動化: 最大 2分
• スケジュールされたイベントによる自動化: 最大 5分

これらも合わせて覚えておきましょう！

AppSheetとGASを紐つける手順

それでは、実際にGASの設定を行う画面を見ていきましょう。

設定方法はいくつか考えられますが、ここではアプリ開発後のメンテナンスのしやすさを考慮した、おすすめの方法をご紹介します(^^)

Googleドライブ（マイドライブ）にあるアプリのフォルダを開き、左上の ＋新規 をクリックします。

その他 → Google Apps Script をクリックします。

GASエディタを開いたら、最初にプロジェクト名とファイル名を分かりやすい名前に変更する習慣をつけましょう。

GASで実行する処理コードが書けたら、保存ボタンを押して実行をクリックします。

GASを実行する際に以下の確認画面が表示されることがあります。

これは、スクリプトがGoogleサービス（例えばスプレッドシートのデータ）にアクセスするための許可を求めるものです。それぞれ内容を確認し、許可を与えるボタンをクリックしてください。

これでGAS側の設定は完了です。

続いて、AppSheet側でこのGASを実行するためのAutomationを設定していきましょう。

Automationの設定

Automationの設定は難しいところはありません。

新規でAutomationを作成し、下図のようにApps Script Projectをセットしてみてください。

Apps Script Projectのセットが完了したら、Automationに呼び込む関数を指定します。

設定はこれで完了です！

簡単な検証トライ

最後に読者の皆さんも簡単な設定で検証してみましょう。

スプレッドシートの新規作成

下図と全く同じカラムとシート名にしてスプレッドシートを作成する。

スプレッドシートIDを控えておく

Googleアプリには必ずIDが存在します。

このIDを指定することで、対象のファイルを指定したり複数のファイルに対して処理を行うことが可能になります。

GASコードを入力する

スタンドアロン型のGASを新規作成し、以下のコードを貼り付けます。

黄色の下線部分は、STEP.2で控えたスプレッドシートIDに各自切り替えてください。

/**

* スプレッドシートの指定シートのC列に「よくできました」と入力します。

*/

function writeWellDone() {

// スプレッドシートIDを変数に格納

const spreadsheetId = ‘AAAAAAAAAAAAAAAAAAAAAAAA‘; // 自分のスプシIDを指定

// シート名を変数に格納

const sheetName = ‘GAS検証’;

// スプレッドシートを取得

const spreadsheet = SpreadsheetApp.openById(spreadsheetId);

// シートを取得

const sheet = spreadsheet.getSheetByName(sheetName);

// シートが存在しない場合は処理を中断

if (!sheet) {

Logger.log(`シート “${sheetName}” が見つかりません。`);

return;

}

// A列の最終行を取得（データがある最終行を判定するため）

const lastRow = sheet.getLastRow();

// ヘッダー行を除く、データ行の範囲を取得（C列のみ）

// A列にデータがあれば、最終行まで処理を行う

if (lastRow > 1) {

const rangeToWrite = sheet.getRange(2, 3, lastRow – 1, 1); // 2行目から最終行まで、3列目（C列）の1列

const valuesToWrite = Array(lastRow – 1).fill([‘よくできました’]); // 書き込む値を二次元配列で作成

// C列に値を書き込む

rangeToWrite.setValues(valuesToWrite);

Logger.log(‘C列に「よくできました」と入力しました。’);

} else {

Logger.log(‘データがありません。’);

}

}

ブログの内容を参考にAutomationを設定してみる

私は新規登録で発火するAutomationで検証してみました。

まとめ

今回は、AppSheetにGoogle Apps Script（GAS）を組み込む方法について解説しました。

AppSheetの標準機能だけでは少し難しいと感じるような、複雑な自動化や特定のサービス連携も、GASを組み合わせることで驚くほどスムーズに実現できることがたくさんあります。

まさに、あなたのアプリが「もう一段上のステージ」へと進化するイメージですね。

「でも、GASのコードなんて書いたことがないし…」そう思われる方もご安心ください！

今では、ChatGPTやGeminiのような生成AIが強力な助けとなります。

これらのAIに「こんなGASコードを書いてほしい」と具体的に指示するだけで、プログラミングの知識がなくても、読者の皆さんのアイデアを形にできる時代です。

AppSheetとGAS、そしてAIの力を借りて、ぜひあなたのアプリ開発の可能性を広げてみてください。

この記事にあるGASもGeminiに書いてもらいました笑

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回は、AppSheetの数ある機能の中から、個別の記事として深く掘り下げるほどではないものの、日々のアプリ運用や開発において知っておくと格段に便利になる、そんな隠れた機能に焦点を当ててご紹介していきます。

それでは勉強していきましょう！

Dataタブに関係する機能

関数の検証方法

関数入力画面にあるTestをクリックします。

赤で囲った部分に関数で取得できる結果が表示されます。

長い関数を組んだときには、1つずつ細分化してVCに入力 → 検証してみるのがおすすめ(^^)

登録した写真に線を描く

TypeをimageにしてAllow drawing on imagesにチェックを入れます。

ここにチェックを入れることで写真を登録した際に、線を描くことが可能になります。

写真を登録したあとに現れるEditをクリックします。

色付きで線を描くことができます(^^)

Viewタブに関係する機能

Quick edit（Table View）

Table ViewのView OptionsにあるEnable QuickEdit (beta) をONにします。

Table Viewの右上に赤で囲ったアイコンが出現するようになります。

このボタンを押すことで、スプレッドシートを直接編集するようなUIでカラムの値を直接更新することができます。

Automationタブに関係する機能

Schedule型BOTの検証

Schedule型は設定した時間になって発火するBOTですが、Runを押すことで即時に検証することが可能です。

タスクのコピー

タスク設定の画面右上にあるLinkをONにします。

こうすることで別のAutomationに登録したtaskを呼び出せるようになります。

Automationエラーの確認方法

Automationが予期せぬエラーをした場合、エラー箇所のヒントが確認できます。

テキストリンクを意味のわかる文字列に変える

デフォルト設定のままではAutomationでファイルリンクを送信する場合、非常に長い文字列となります。

ここで、HTMLを使うことで任意の文字列とすることが可能です。

<a href=”<<[COL4]>>”>ファイルリンク</a>

黄色下線の部分をカラム値、青下線の部分を任意のテキストに変えてください。

この設定をすることでスッキリしたメール本文になるので、覚えておくといいでしょう(^^)

Settingsタブに関係する機能

アプリ立ち上げ画面の設定

Settings → General → General にあるStarting viewに最初に表示させたいViewを設定できます。

ここには関数も入力できるので、ユーザーによって条件分岐を設けることも可能です。

1列目の固定（Table View）

Settings → General → General にあるPreview new featuresをONにします。

次に、1列目に固定したいカラムをLABELに設定します。（テキスト値のみ）

この設定をしておくことで、Table Viewの1列目を固定することができます。

まとめ

以上、アプリ開発において知っておくと便利な機能をまとめた記事でした。

今回ご紹介した内容を知っておくことで、今後のアプリ開発における理解がより深まるでしょう。

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

AppSheetではAutomation機能を設定することで、比較的簡単にメール送信の仕組みを構築することができます。

AppSheetでアプリ開発をする人は、Googleアカウントを持っていると思うので、普段のメールツールとしてGmailを使っていることが多いのではないでしょうか？

実はAutomationで送信されるメールにアプリのViewを埋め込んで、アプリを開かなくても直接対象となるカラムを更新することが可能です。

まだ開発段階のような気がするので、本記事の内容からさらに今後更新されると思いますが、これを知っておくことでPCスキルが低い（メールの返信は出来るくらい）の人でも業務DXの恩恵をこうむることが出来るような仕組みを導入することも可能だと思います。

それでは勉強していきましょう(^^)

アプリ開発に慣れていない人はまずはこちらからどうぞ

抑えておきたい基本ルール

こちらのページに動的メールの基本ルールが掲載されています。

わかってます。リンク先のページは文字が多すぎますよね？

ということで、私の方で特に重要だと思う部分を書き出してみました。

以下の点を抑えておけば、とりあえず大丈夫だと思います！

• 動的メールを使えるのはGmailユーザーのみ（上限は50通 / 日）
• サポートされているViewは、Detail と Form の2種類
• サポートされていないData typeが複数ある
• 動的メールに使えるアクションボタンは2種類（set the value と add a new row）
• 動的メールを転送すると埋め込み機能が解除される
• 動的メールの効果は受信後30日が期限

特に赤下線のルールは覚えておきましょう(^^)

サポートされていないData typeですが、これはメールに埋め込まれたView画面で編集ができないものと覚えておきましょう。

ChangeCounter
ChangeLocation
ChangeTimestamp
Color
Drawing
File
Image
Price
Progress
Show
Signature

これらのTypeを含むcolumnが存在する場合、Automationエラーが発生します

あと、設定が許されているアクションボタンは、

• あらかじめ設定した値を入力する set the value
• 自身もしくは別のテーブルに行を追加する add a new row

上記2つしかないので、あまりむずかしいロジックを組み立てることができないことも把握しておきましょう(^^)

検証データの紹介

設備トラブルを報告するアプリを想定して、上図のような列構成で検証をしてみます。

続いて、アプリのデータタイプの設定を今回はこんな感じでやってみました。

本記事では動的メールのイメージがつかめればいいので、細かな設定は省略します。

データタイプの設定が終わったら、次はアクションボタンの設定をしておきましょう。

ステータスカラムには未対応の値が入力されているので、これを確認済みにするアクションボタンを作っておきます。

Detail Viewの調整

動的メールに埋め込むことが出来るのは、DetailもしくはForm Viewになるので作り込みを行います。

このViewを作っておくことで、わかりやすいUIを提供する事ができるので妥協せずいきましょう！

ユースケースとして多いのは、Detail Viewの方だと思うので今回はこちらで設定を行います。

今回は埋め込みViewという名前のDetail Viewを作成します。

View optionの設定で特に大事になってくるのは、 Quick edit columns と Colmun order の2つです。

上図の設定では、届いた動的メールに表示されるのは現場写真と報告内容とコメントの3つです。

また、コメントに関してはメール内のカラムの値を直接編集できる設定となっています。

ここの設定は読者の方のユースケースに沿って、適切に設定をしてみてください(^^)

Automationの設定

特に難しい設定はないので、ポイントとなる部分だけまとめていきます。

Automationの発火条件を決める

条件は何でもいいですが、今回は新規にデータが登録された時 とします。

動的メールの設定をする

タスクは Send an email を選択し、Email TypeはEmbedded app view を選びます。

こちらを選ばないと動的メールは作成できません・・・

赤矢印の部分の設定をします。内容は自身のアプリ環境に応じて変えてください。

続いて、メール本文とメールに埋め込むViewを設定します。

動的メールの設定は以上です。

動的メールの検証

最後に、これまでに行った個々の設定が意図したとおりに表現されているか確認しましょう。

上図の Preview email body をクリックすることで、簡易的に確認することもできますが、こちらはスプレッドシートの2行目のデータでしか確認することができません。

その点に注意して検証をしてみましょう！

この画面は実際にGmailに届く動的メールとほぼ同じ画面です。

メールにはアクションボタンやQuick editで設定したカラムの編集が出来るのが確認できます。

動的メール内で操作した情報はスプレッドシートに反映されますので、アプリを開かなくてもアプリを開いて操作をしたことと同じ結果を得ることができます！

まとめ

以上、動的メールの設定についての記事でした。

簡単な承認フローや情報共有を目的とするようなアプリだと、今回ご紹介した設定で十分なことが多いので既存アプリに実装してみてもいいかもしれません。

最後にもう一度動的メールの制約のおさらいです。

• 動的メールを使えるのはGmailユーザーのみ（上限は50通 / 日）
• サポートされているViewは、Detail と Form の2種類
• サポートされていないData typeが複数ある
• 動的メールに使えるアクションボタンは2種類（set the value と add a new row）
• 動的メールを転送すると埋め込み機能が解除される
• 動的メールの効果は受信後30日が期限

もしアプリ開発中にエラーが発生した場合は、大体はData typeの設定だと思います。

エラーメッセージにもその旨が記載されるので、出た場合は解除してあげましょう！

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

AppSheetのAutomation機能には、登録されたデータからファイルを生成する機能があります。

AppSheetで生成したPDFは、メール添付やGoogleドライブ（マイドライブ）への保存は可能ですが、後から過去の特定のPDFを探し出すのは、標準機能だけでは手間がかかります。

そこで本記事では、生成したファイルへのリンクをカラムに保存し、いつでも目的のPDFに容易にアクセスできるようにする設定について解説します。

以下の3つの設定が、特に重要となります。

• アプリを構成するスプレッドシートをマイドライブにある当該アプリのフォルダに投函する
• Automationで生成するファイルの保存先と名前を関数で制御する
• ファイルリンクを保存するカラムに②の関数をセットする

これらの設定をすることで、どんなアプリにもファイルパスをセットすることが可能です！

それでは勉強していきましょう(^^)

検証アプリの下準備

今回の検証に使ったスプレッドシートのカラムは、以下のようにしました。

これをアプリ化し、データタイプの設定は以下のようにします。

ファイル生成のカラムは、Yes/NoタイプにすることでAutomationの発火のフラグを持たせています。

ファイルパスのカラムは、Fileにしておきましょう。

次に、ファイル生成をするAutomationの機能を実装します。

ファイル生成をTRUEにするアクションボタンを作っておいて、それを押したらAutomationが発火してファイルを生成する仕組みを作りましょう！

本記事では、ポイントとなる部分だけ写真を貼っておきます。

これで下準備はOKです。お疲れ様でした！

スプレッドシートとアプリのフォルダ階層を揃える

アプリの設定が完了したら、アプリを構成しているスプレッドシートをアプリのフォルダに移動させます。

これを忘れるとファイルパスを設定しても動作しません・・・

以下の方法を参考にしつつ、スプレッドシートの保存場所を移動させましょう！

まずはGoogleドライブを立ち上げて、検索バーにアプリの名前を入力します。

そうするとアプリの名前が含まれたフォルダが検索にかかるので、ここの中にスプレッドシートを入れましょう！

下図のようになっていればOKです。

Automationで生成するファイルの保存先と名前を関数で制御する

この設定も非常に重要です。

設定のポイントとなるところを確実に抑えていきましょう。

• ファイルの保存先（相対パス）を指定する
• ファイルの名前を決める（タイムスタンプの設定をオフにする）

これら2つの設定を順に解説していきます。

まずはファイルの保存先を設定します。赤枠で囲まれた箇所が該当部分になります。

もしここに何も入力しなかった場合は、アプリフォルダの中に「Files」や「Attachment」といったフォルダが自動生成されるようになります。

• Create a new fileの場合はFile
• Send an emailに添付する（Attachする）場合はAttachment

今回は「PDF」というフォルダの中に「テスト」というフォルダを生成したいとします。

File Folder Pathに “PDF/テスト” と入力します。

また、ここにはフラスコマークがあるので関数を入力することも可能です。

例えば、請求書発行アプリなんかだと取引先別にフォルダを分けることも可能です。

その場合は、 “請求書/”[会社名] みたいな表記になります。

次にファイルの名前を設定します。

先に設定したファイルパスのすぐ下にあるので、わかりやすいです(^^)

デフォルトでは「AppSheetDoc」となっているので、仮に上図の状態でPDFを生成したとすると AppSheetDoc.pdfという名前のPDFが作成されます。

Disable Timestamp? のトグルボタンをONにすることで、タイムスタンプがつかなくなるのでファイル名が一意となります。

今回は簡単なテキスト値と、PDFを作成した日付を入れてみます。

ファイルパスと同じく、カラムの値をファイル名に使うことももちろん可能です。

例えば、 “【請求書】”&” “&[会社名]&TEXT(TODAY(), “YYYYMMDD”) みたいな表記になります。

注意点として、TODAY()関数の書式フォーマットにスラッシュ（/）を入れないことです。

スラッシュを入れると、フォルダ階層と判定されてしまいます！

“PDF作成”&” “&TEXT(TODAY(), “YYYY/MM/DD”)とした場合、フォルダの階層とファイル名が、PDF → テスト →PDF作成2025 → 04 → 15.pdf となり、意味不明な表記になってしまいます・・

生成したファイルへのリンクを取得する

最後の設定として、フォルダリンクと該当ファイルへの相対パスを取得するテキスト値を用意します。

設定はめちゃくちゃ簡単です。下図の手順を参考にしてください(^^)

ファイル生成Automationの下に新しいAutomationを追加する

ファイル生成のAutomationに追加する形でステップを追加します。

追加したステップの設定は、下図の赤枠のようにしましょう。

先に設定したフォルダパスとファイル名をコピーする

一つ前のAutomationで設定したテキスト値や関数をコピーしておきます。

赤枠で囲った部分をそのままコピーしましょう！

ファイルリンクにSTEP.2でコピーした関数を貼り付ける

最後に取得したファイルリンクをテキスト値として格納する設定をします。

入力する関数はSTEP.2でコピーした関数を結合させて作ります。

ファイルパスの作成手順ですが、

• フォルダパスを貼り付ける
• “/” を文字列として結合させる
• ファイル名を貼り付ける
• “.pdf”を文字列として結合させる

上記の手順でそれぞれの文字列を結合させていきましょう！

これで準備は完了です。お疲れ様でした(^^)

設定の確認

それでは最後に今回設定したアプリの挙動を見てみましょう！

Automationの発火条件を対象のアクションボタンを押すことにしてあるので、早速ポチッと(^^)

生成されたファイルパスをクリックすると、Automationで作成したファイル（デフォルトでは保存先はマイドライブ）を閲覧することが可能です(^^)

まとめ

以上、Automationで作成したファイルへのリンクを取得する方法についての記事でした。

今回は作成する資料はPDFを想定していますが、Excelの場合は最後の拡張子を”.xlsx”とすればOKです。

また、今回は一度生成したPDFを再作成する想定で作っていませんので、登録されているデータを更新して再作成するユースケースを想定するなら、ファイル名に枝番（更新のたびにカウントが1増えるような仕組み）を入れてあげましょう(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回の記事はアクションボタンに関するまとめ記事です(^^)

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つの注意点に関しては、別のロジックを組むことで対処可能です

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で使うようにしてください。

App: go to another AppSheet app

これを選ぶことで、別のアプリへ遷移する事が可能です。

次に説明するアクションボタンと違いがないように思いますので、合わせて解説します。

【重要】App: go to another view within this app

直訳すると、このアプリの別のViewへ遷移するですが、別のアプリに行くことも可能です。

私の使用環境では、どちらを使っても大差がないのでどちらを選んでもOKだと思います。

これらをDo thisで選択すると、必ずTargetを設定する必要があり、ここに入力する関数はDeeplink関数と言われるものになります。

Deeplink関数はAppSheet特有の関数で、知っていると使用画面のコントロールが可能です

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()関数はリストを返す関数の代表関数です

【重要】Data: set the values of some columns in this row

これを選ぶことで、テーブルに存在するカラムに値をセットする事が可能です。

上図の設定だと、「値をセット」をクリックするとメモカラムにテストというテキストが入力されます。

Set these columns にセットしたいカラムを複数セットすることも可能です。

アプリのUI/UXを高める設定として使う場面が多いので、ぜひマスターしておきたいアクションです。

また、このアクションはINPUTアクションを設定することができることも知っておきたいです！

INPUTアクションの使用例のアプリです

External: go to a website

これを選ぶことで、設定したURLのウェブサイトを開く事が可能です。

データタイプをUrlにすることで、AppSheet側で自動で生成をしてくれるアクションです。

URLを結合することで便利な機能を実装できます

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を結合することで便利な機能を実装できます

Grouped: execute a sequence of actions

これを選ぶことで、複数のアクションボタンを1つにまとめる事が可能です。

アクションは何個でも合わせることができますが、処理は上から順に実行する事になっています。

注意点として、Deeplink() 関数のように画面遷移を伴うアクションを使用する場合、処理が途中で中断してしまいます。

そのため、該当するアクションを設定する際は、事前に動作確認を行うことを推奨します。

まとめ

以上、AppSheetのアクションボタンで実装できる機能についてのご紹介でした。

本記事で紹介した機能で、現行業務をAppSheetに置き換えることができなければ、別のITツールでの業務効率化を検討したほうがいいと思います。

アプリ開発の際、本記事のことを思い出して活用してもらえれば幸いです(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回は、アプリにGoogle Mapの機能を実装する方法をまとめています。

現在地から目的地までのルート検索や、目的地のストリートビューをワンクリックで検索できるので、アプリユーザーのUI向上に役立つ知識です(^^)

住所を登録するようなアプリには実装する事ができる設定になるので、そういうアプリに使ってみてください！

それでは勉強していきましょう(^^)

住所から緯度経度を入手する

この設定をするためには、緯度経度の情報が必要です。

私はこちらのサイトで住所を検索し、緯度経度の情報に変換してみました。

例えば、東京駅の住所を下記のように入力します。

住所を入力してGPS座標検索をクリックすると、以下の画面が表示されます。

緯度: 35.682454 経度: 139.768283 と表示がされたので、カンマで区切って 35.682454,139.768283を緯度経度情報として、登録をするようにしましょう。

データシートの作成

今回の検証にあたり、使用したシートのカラム情報です。

大事なのは緯度経度のカラムなので、上述した方法で緯度経度を調べて入力しておきましょう！

データの準備ができたらアプリ化します。データタイプの設定は以下のとおり(^^)

緯度経度のデータタイプをLatLongにすることだけ忘れずに設定してください。

次に、現在地の緯度経度情報を取得するためのカラムをVCで準備します。VCの設定は以下のようにしてください。

App formulaには、位置情報を取得するHERE()を入力しましょう。

これで下準備は完了です(^^)

現在地から目的地までのルート検索をする

下準備が完了したら、まずは現在地から目的地までのルート検索を立ち上げるURLを作成してみましょう(^^)

下図を参考に新しくVCを作成します。

TypeはUrlを選択し、App formulaには以下の関数を入力しましょう(^^)

“https://www.google.com/maps/dir/?api=1&origin=” & [現在地] & “&destination=” & [緯度経度] & “&travelmode=” & “driving”

本記事と同じ設定をしている場合は、コピペでOKです！

このままだとカラムにURLがそのまま表示されてしまうので、関数を使って表現を変えてみます。

HYPERLINK(“https://www.google.com/maps/dir/?api=1&origin=” & [現在地] & “&destination=” & [緯度経度] & “&travelmode=” & “driving”, “ルート検索”)

HYPERLINK関数を使うことで、第二引数の文字列（この場合だとルート検索）を表示することができます。

AppSheetは関数の知識が非常に重要です！

ここで設定した関数の挙動を見てみましょう。下図のような表記になっていればOKです。

ルート検索をクリックすると・・・

Google Mapのタブが新規で立ち上がって、現在地から目的地までの走行距離ルートが表示されていればOKです(^^)

上記の設定は、アプリユーザーのニーズに沿って変更してください。

目的地のストリートビューを表示させる

今度は目的地までの経路ではなく、目的地のストリートビューを表示させてみましょう。

設定方法は先ほどと同じようにVCを使って実装をしてみます。

TypeはUrlを選択し、App formulaには以下の関数を入力しましょう(^^)

HYPERLINK(“https://maps.google.com/maps?q=&layer=c&cbll=” & [緯度経度] & “&cbp=12,0,0,0,0″,”ストリートビュー”)

最後に設定した関数の挙動を見てみましょう。下図のような表記になっていればOKです。

ストリートビューをクリックすると・・・

登録してある緯度経度をポイントとして、ストリートビューが立ち上がります(^^)

顧客訪問先管理アプリや日記アプリなどに設定しおくと、アプリの利便性がアップするかと思われます。

作成難易度は高いですが参考記事です！

まとめ

以上、VCを使ったGoogle Map機能をAppSheetに取り込む方法についての記事でした。

住所を記録するようなアプリであれば、本記事の内容は使えるので、UIを向上させる設定として導入してみてはいかがでしょうか？

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

まずはじめに

今回の記事内容はLooker studioについてです。

Googleツールを使って、組織目標の数値管理をするとなったときに

• スプレッドシートにデータを登録
• データソースをスプレッドシートにし、Looker studioを使ってグラフにする
• 作成したグラフをGoogleサイトを使ってWebページまとめる

上記のような手順でグラフを作成、数値進捗をメンバーと共有するというのは、特に難しい設定もなく数値管理をする設定としておすすめです。

Looker studioにはフィルター機能として、「コントロール」を追加することができます。

この設定を有効にしたまま、Googleサイトにグラフを埋め込む方法をまとめましたので参考にしてください(^^)

それでは勉強していきましょう！

Looker studioでグラフを作成

今回使用するLooker studioに取り込むためのデータを準備します。

用意するデータは、フィルターをかけられるようなデータであれば何でもいいです。

上記のデータから円グラフを作成すると・・・

こんな感じになります。

左のグラフはカテゴリー別、右のグラフは商品名別で表示しています。

グラフを作成したら、下図を参考にしてLooker studioのレポートの埋込みを有効にします。

次に表示される画面からコードを埋め込む、またはURLを埋め込みを選択します。

コードを埋め込むの場合

画面下に幅と高さを設定することで、Googleサイトにグラフを埋め込むときの大きさを調整することができます。

クリップボードにコピーのボタンをクリックして使用します(^^)

URLを埋め込むの場合

こちらは表示されているURLをコピーするだけでOKです。

グラフをGoogleサイトに埋め込む

Looker studioでグラフが作成できたら、Googleサイトに埋め込んでみましょう。

Googleサイトの編集画面から、埋め込む → URL → 先ほどコピーしたURLを貼り付けます。

貼り付けた結果がこちら↓

次に、Looker studioのページに戻りコントロールを選択してみましょう。

国を日本にしてみると・・

日本にカテゴライズされた状態のデータになります。

この状態のURLを取得する方法は、共有 → レポートへのリンクを取得をクリックして、

レポートの現在のビューにリンクをする にチェックを入れて、共有リンクをコピーします。

このコピーしたURLをブラウザで検索をすれば、フィルターがかかった状態のページにアクセスできますが、Googleサイトにこのまま埋め込んだ場合は、フィルターがかかった状態のグラフは表示されません。

これを解除する方法を次の見出しでまとめます！

フィルターをかけた状態でグラフをGoogleサイトに埋め込む

手順は以下を参考にしてください(^^)

• グラフのフィルターをかけた状態のURLをコピーしておく
• Looker studioのレポートの埋込みから「コードを埋め込む」を選択し、クリップボードに保存する
• Googleサイトの「埋め込む」を選択し、埋め込みコードに②のコードを貼り付ける
• ③のコードを編集する

それぞれの手順の詳細を書いていきます。

グラフのフィルターをかけた状態のURLをコピーしておく

共有 → レポートへのリンクを取得を選択

この共有リンクをコピーしておきます。

Looker studioのレポートの埋込みから「コードを埋め込む」を選択し、クリップボードに保存する

ファイル → レポートを埋め込む → 埋め込みを有効にするをクリック

コードを埋め込むを選択し、幅と高さを変更してクリップボードにコピーをクリック

Googleサイトの「埋め込む」を選択し、埋め込みコードにSTEP.2のコードを貼り付ける

Googleサイトの編集画面にある「埋め込む」から、クリップボードにコピーしてある埋め込みコードを貼り付ける。

STEP.3のコードを編集する

STEP.3の画面をそのままにして、新規でブラウザを立ち上げ、STEP.1で保存したフィルターがかかった状態のURLをWebで検索します。

次に、上図を参考にして表示されたページのURLを再度コピーします。

STEP.3の画面に戻り、以下のように埋め込みコードを編集します。

青でハッチングされた部分を、先ほどコピーしたURLと入れ替えます。

入れ替えたあとのURLで、上図の 『u/0』の部分を、『embed』に修正します。

このようになっていればOK！(^^)

まとめ

以上、Googleサイトにフィルターをかけた状態でLooker studioのグラフを埋め込む方法 についてまとめた記事でした。

ビジネスニーズとしては、生産本部が集計をしたデータを生産拠点に共有するときに、各生産拠点のデータを表示させる あたりが考えられるかなと思います。

スプレッドシートでは、なかなか凝ったグラフを作成することができないので、Googleアプリを使う人にとっては、Looker studioは強力なグラフ作成ツールになります(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

まずはじめに

今日仕事から帰ってきたら自動車税の支払い用紙がポストに入っていました。

私はスマホからさっと支払いを終わらせたのですが、「これって知らない人もいるのでは？」と思ったので内容をまとめることにしました。

ネット銀行の口座を持っている人限定ですが、とても便利な機能ですのでぜひ知ってもらえたらなって思います(^^)

それでは勉強していきましょう！

必要なもの

アプリで払込票支払いをするために必要なものは次の3つです。

• ネット銀行の口座とそれに連動した銀行口座のアプリ
• バーコードや二次元コードが読み取れる端末機器（スマホ）
• バーコードや二次元コードがある払込用紙

振込やATM手数料がネット銀行だと無料で済むことが多いので、その便利さを知っている人はネット銀行の口座を持っている人も多いと思います。

また、このブログの記事を見ているということは、ネット環境にアクセスができているのでスマホの所持も問題ないかと(^^)

残る払込用紙ですが、

• 自動車税や固定資産税などの税金
• 水道やガス、電気代といった公共料金
• ショッピング代金などの払込票

あたりが使用するチャンスです！

使用できる環境が整っているのなら、一度チャレンジしてみるといいでしょう(^^)

操作手順

特に難しくはありませんが、スマホの操作画面を載せておきます。

楽天銀行の場合

ホーム画面下にある支払うをタップします。

楽天銀行コンビニ支払い（アプリで払込票支払）をタップします。

ページ下にある払込票を読み取るをタップします。

カメラが起動するので、払込票にあるバーコードや二次元コードを読み取れば完了です(^^)

住信SBIネット銀行の場合

ホーム画面にある料金等支払をタップします。

モバイルレジで支払うをタップします。

バーコード/eL-QRコード読み取り開始をタップします。

カメラが起動するので、払込票にあるバーコードや二次元コードを読み取れば完了です(^^)

以上です！

ちなみに私は楽天銀行をメインバンクにしていますが、この機能で支払いをしたら10円が振り込まれました笑

なんだろう？

金融機関の窓口やコンビニ支払いをしようとすると人件費がかかってしまうから、その分のお礼ですかね。

この機能はだれも損することがないと思う素晴らしい機能なので、ぜひ一度トライしてもらえたら嬉しいです(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回は、ダッシュボードViewで働くメンバーのスキルを可視化できるアプリを作ってみたいと思います。

スキルマップなんて言われたりもするそうですが、従業員の能力・技能を評価することで、やる気を引き出すとともに、不足する能力・技能について教育計画を立てて、能力向上を図るツールとして活用するのが目的のようです。

こういうのって一回作ると見直しとか更新はしないんだよなー笑

AppSheetで作ってみると面白いかも？って思って作ってみたら、それなりのものが出来上がったので記事にしました(^^)

AppSheetのテーブル構成を勉強するのにちょうどいいレベルの内容となっているので、ぜひ参考にしてもらえたらなって思います。

それでは勉強していきましょう！

準備するデータについて

今回使用するテーブルは3つです。

それぞれのテーブルに用意したカラムは下図になります。

データタイプの設定

テーブル構成を理解したところで、それぞれのデータタイプの修正を行います。

設定についてはボックス内の写真を参考にしてください(^^)

登録テーブル

IDカラムのSHOW?をはずし、Key値に設定します。

また、LABEL値はスキルにしておきましょう。

評価テーブル

このシートの設定は少し難しいです。最終的なデータ設計は以下になります。

赤枠の部分はさくっと変更しつつ、青枠の部分の設定について説明していきます(^^)

登録IDカラムのTypeをRef、Source tableは登録にします。

続いて、Valid ifに以下の構文を入力します。

登録[ID] – SELECT(評価[登録ID],[メンバー] = [_THISROW].[メンバー]) + LIST([_THISROW].[登録ID])

この記事内では詳しくは説明しませんが、やっていることとしては

全体のリスト：製品[ID] から、すでに登録したリスト：SELECT(評価[登録ID],[メンバー] = [_THISROW].[メンバー]) を除外する。ただし、自分：LIST([_THISROW].[登録ID]) だけはOK

という表示させるリストの足し引きをしています(^^)

メンバーカラムのTypeをRef、Source tableはアプリユーザーにします。

レベルカラムのTypeをProgress、Valueに以下の値を登録します。

Empty, One Quarter, Half, Three Quarters, Full

データタイプの設定が完了したら、最後にVirtual columnを作成します。

VCカラムのTypeをNumber、App formulaに以下の構文を入力します。

IFS([レベル] = “Empty”,0,
[レベル] = “Quarter”,1,
[レベル] = “Half”,2,
[レベル] = “Three Quarter”,3,
[レベル] = “Full”,4)

レベルカラムの登録された値から、それを数値化するための設定です(^^)

実際のProgressのValueの値とは異なる点に注意しましょう！

アプリユーザーテーブル

まずは赤枠の設定をしましょう。次に先ほど作成したスキルポイントを集計するVCを作成します。

VCのTypeをNumber、App formulaに以下の構文を入力します。

SUM(SELECT(評価[スキルポイント],[メンバー] = [_THISROW].[email]))

スキルポイントのVCから、メンバーごとの集計をするための設定です(^^)

以上でデータタイプの設定は完了です。お疲れ様でした(^^)

Viewの設定

続いてViewの設定をしていきます。

私が設定した手順を下記にまとめました。

スキル項目を登録するViewを作成する

赤枠を参考にして、習得目標とするスキル項目を登録するViewを作成します。

登録したスキル項目を評価するためのViewを作成する

赤枠を参考にして、スキル項目を評価するためのViewを作成します。

Sort byとGroup byの設定も合わせて行っておきましょう。

アプリユーザーを管理するViewを作成する

赤枠を参考にして、アプリユーザーを管理するためのViewを作成します。

メンバーの入れ替わりが激しくない場合は、Positionをrefにしておくと良いと思います。

登録メンバーのスキル値を可視化するためのViewを作成する

赤枠を参考にして、ユーザーごとのスキル値を集計するためのViewを作成します。

赤枠で囲まれた選択肢をセットします。

スキルを可視化できるダッシュボードを作成する

これまで作成したViewを一つにまとめます。

赤枠部分を参考にViewのセットをして、Interactive modeをONにします。

Viewの設定としては以上です。お疲れ様でした(^^)

アプリ動作の確認

最後にアプリの動作検証を行いたいと思います。

まずスキル項目を登録Viewから行う

メンバーに習得させたいスキル項目を登録Viewから登録していきます。

登録したスキル項目に対してメンバーのレベルを登録する

登録IDは先ほど登録Viewで入力した項目が表示されます。

メンバーごとに求められているスキルレベルを登録していきます。

基本Viewはこんな感じ(^^)

それぞれのViewから遷移する画面を確認する

評価（Table View）の項目を選択すると、Detail Viewにその情報が表示されます。

アプリユーザーViewに登録されたメンバーを選択すると、そのメンバーの情報のみ表示されます。

基本的な使い方は以上になります。

一度登録した情報は、Editボタンを押すことで更新（メンバーがスキルアップした時に）することが可能です(^^)

まとめ

以上、ダッシュボードでスキル可視化ツールを作成するための記事でした。

Valid if（入力制限）に入力した、登録[ID] – SELECT(評価[登録ID],[メンバー] = [_THISROW].[メンバー]) + LIST([_THISROW].[登録ID])や、Virtual column（スキルポイント）を付けることによって、使い勝手のいいアプリへと昇華させることが可能です。

AppSheetであまりアプリを作成したことのない人が、作ってみるアプリとしては理解しやすいレベルだと思うので、この記事の内容を参考にしつつ、自身の環境に適したものに変化させてもらえればなって思います(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回はプライベートでも使える日記アプリの作成についてまとめたいと思います。

先日、母親から「御朱印集めすることにした！」と言われたので、せっかくなら神社巡りの思い出をアプリに保存してもらおうと思い作りました(^^)

普段まとめている「今日から使えるテクニック！！」みたいなものではなく、原点に立ち返って「自分でアプリを作成してみる楽しさ」を思い出してもらえたらなって思います。

ちなみにその時に見せられた写真がこちら↓

めちゃくちゃ賑やかです・・笑

この派手な写真に負けないようなTIPSを盛り込んだアプリに仕上げましたので、ぜひ参考にしてもらえたらなって思います(^^)

また、行ってみたかったお店の食べ歩きや行ってみたかった旅行先を記録するアプリとしても使えます笑

それでは勉強していきましょう！

準備するデータについて

まずは、いつものようにアプリを構成するデータテーブルについて説明します。

下図のようなカラム構成で今回はまとめたいと思います。

続いてAppSheetのデータタイプの変更をしていきます。

実際の設定は以下を参考にしてください。

データタイプの設定

赤枠のデータタイプに修正します。ここまでは特に難しい設定はありません。

続いて、緯度と経度のカラムの設定を以下のように行います。

データタイプをDecimal、Display modeをLabelにします。

Initial valueに以下の構文を入力します。

DECIMAL(INDEX(SPLIT([緯度経度], “,”),1))

3つの関数をそれぞれ説明します。

SPLIT()関数の使い方

SPLIT(text, delimiter)

第一引数にテキスト、第二引数にそのテキストを区切る文字を指定

また、SPLIT()関数の返り値はリスト型になります。

今回の場合だと、LatLongのデータは 〇〇.〇〇（緯度） , △△.△△（経度）という形を取るので、,（カンマ）で区切るという設定が可能となります。

INDEX()関数の使い方

INDEX(list, which-one)

第一引数にリスト、第二引数にそのリストから取り出したい何番目を指定（リストの一番左が1番目）

使用例) INDEX({“A型”,”B型”,”O型”,”AB型”},2) なら返り値は B型

DECIMAL()関数の使い方

DECIMAL(x)

xは任意の値で、その値が認識可能な場合は同等のdecimal（小数）を返します。

図解で表すと以下のようになります(^^)

経度のInitial valueには、DECIMAL(INDEX(SPLIT([緯度経度], “,”),2))を入力すればOKです。

次にチェックカラムの設定をします。

ここでは、行った or 行っていない のフラグ管理が出来ればOKです(^^)

TIPSとして、現在地から目的地までの直線距離を取得するカラムを作成したいと思います。

アプリに導入したい人は以下の手順を参考にしてください。

VCで距離カラムを作成する

• App formulaにDISTANCE([緯度経度],HERE())を入力
• Show?のチェックを外す
• TypeをDecimalにする

VCで直線距離(km)カラムを作成する

• App formulaに[距離]&”km”を入力
• TypeをTextにする

データタイプの設定は以上です。お疲れ様でした(^^)

アクションボタンの作成

続いてアプリに必要なアクションボタンの作成をしていきます。

私が実装したいアクションボタンは以下の4つです(^^)

• Googleマップで現在地に戻るボタン
• 目的地までのルート検索ができるボタン
• チェックカラムを変更するボタン
• 目的地の10日間の天気予報を見るボタン

上2つに関しては、データタイプやMap viewを設定するだけで実装ができるので、特に意識しなくて大丈夫です(^^)

まずは簡単なチェックカラムを変更するボタンを作りましょう！

チェックボタンの作成

PositionはInlineでやってみたいと思います(^^)

Attach to columnはチェックを指定します。

他にできることとして

• Only if this condition is trueの条件式を入力
• Format rulesでアクションボタンに色を付ける

あたりかなって思います(^^)

チェックのアクションボタンができたら、次に目的地の天気予報を入手するアクションボタンを作成します。

設定は下図を参考にしてください(^^)

天気予報ボタンの作成

Targetには、以下の構文を入力します。

“https://www.weather.com/ja-JP/weather/tenday/” & ENCODEURL([緯度]) & “,” & ENCODEURL([経度])

このURLは、特定の緯度と経度に対応する場所の10日間の天気予報を表示するためのウェブページへのリンクです。

もう少し具体的に説明すると

“https://www.weather.com/ja-JP/weather/tenday/”

天気予報の10日間表示のベースURLであり、tendayをtodayに変えると本日、weekendに変えると週末など検索の対象期間を設定することが可能

ENCODEURL([緯度])とENCODEURL([経度])

特定の場所の緯度および経度をURLエンコードしています。これにより、緯度と経度の座標がURLに挿入される

それぞれのURLを＆を用いて繋げて、1つのURLとして成立させています。

＆の代わりにCONCATENATE()関数を使ってももちろん可能です(^^)

アクションボタンの設定は以上です。お疲れ様でした(^^)

Viewを整える

大事なアプリの画面設定をしていきます。

と言っても、特に難しい設定はありませんので下図を参考に編集をしてみてください。

今回はCard ViewとMap Viewを作ってみたいと思います(^^)

Card Viewの設定

まずはLayoutからlargeを選択します。

私の設定では、赤枠の部分には何も情報を入れないほうがすっきりとした見栄えになったので、今回は使わずにいきたいと思います(^^)

下図のようにそれぞれ該当する箇所をクリックして、セットするカラムを選択していってください。

すべての設定が問題なくできていると、下図のようなViewになります(^^)

Map Viewの設定

Map Viewの設定は以上です。

その他のViewとして、新規作成のためのForm Viewは合ったほうがいいかもしれません。

このあたりはアプリ開発者の好みです(^^)

Format Ruleの設定

アプリの視認性を高めるために、ちょっとしたフォーマットルールを追加したいと思います。

別になくても構わない設定なので、不要な人は飛ばしていただいても結構です。

私が試しに設定してみたものは、以下の6つです(^^)

アプリ動作の確認

最後に作成したアプリの動作検証を行いたいと思います。

このアプリはモバイル（スマホ）を意識して作成しているので、そのViewで確認するのがいいです(^^)

行ってみたい場所 or 行ったことのある場所を登録する

赤矢印の項目を登録していきます。

今回は一度行ったことがある、チェック＝完了 で検証をしてみます(^^)

アプリに登録されている登録地をタップする

登録したデータをタップすることで、Map Viewに画面が遷移します。

作成したアクションボタンの動作確認

アプリのGマップを移動させたあと、最初の登録座標に戻したい場合は赤のマップアイコンをタップします。

天気予報をタップすることで、外部サイトから登録地点の天気予報が取得できます。

車のアイコン（AppSheetが自動で作成するアクションボタン）をタップすると、Googleマップのルート検索ができる

まとめ

以上、プライベートでも使える日記アプリについての記事でした。

AppSheetが求めているカラムを用意すると完成度の高いアプリが作れますので、こういうアプリから勉強してもらえると楽しく学べていいかなって思います(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)