今回は、以前ご紹介した「販売管理データで請求残高をチェックできる AppSheet アプリ」の応用編をお届けします。
以前の記事では、社内で利用している販売管理システムから出力したCSVファイルのデータを、AppSheetアプリで分かりやすい一覧画面や詳細画面として閲覧できるようにする仕組みを構築しました。
まだ記事をチェックされていない方は、ぜひご覧ください。
外出先で社内データが見られない...そんな悩みありませんか?本記事では、高額な費用やシステム改修は一切不要、Google AppSheet(アップシート)を活用し、既存システムに手を加えず、初期費用ゼロで誰でも簡単にノーコードで業務アプリを作成する方法をご紹介。「脱・社内限定」営業担当者のスマホでデ...
この記事で作成したアプリは便利ではありますが、データを最新の状態に保つためには、「AppSheetのデータソースであるスプレッドシートを開き、新しいCSVファイルの内容を手動で読み込み直す作業」が必要でした。この作業が、日々の運用の中で負担になるのではないかと思います。
今回の目標は、その手動作業をなくすことです。
社内システムから出力した新しいCSVファイルを特定のフォルダ(Google Drive)に上書きするだけで、AppSheetアプリのデータが自動的に最新の状態に更新される仕組みを、GAS(Google Apps Script) を使って一緒に構築していきましょう!
ステップ1:GASでCSVファイルの内容をスプレッドシートに取り込む
まず、CSVファイルの内容をAppSheetのデータソース(Googleスプレッドシート)に自動的に書き込むための GAS 関数を実装します。
1-1. 事前準備:必要なIDの取得
以下の情報を準備してください。これらはGASコード内で使用します。
| CSVを置くフォルダのID | CSVファイルを保存しているGoogle DriveフォルダのID |
| CSVファイル名 | 使用するCSVファイルの正確なファイル名(例: seikyu_zandaka.csv) |
| スプレッドシートのファイルID | AppSheetのデータソースとして指定しているスプレッドシートのID |
| 更新したいシート名 | CSVデータで内容を上書きしたいシートの名前(例: 請求残高-閲覧用データ) |
ファイルID・フォルダIDとは?
Googleの各ファイル・フォルダのURLには、一意のIDが含まれています。
このIDを使用して、GAS(Google Apps Script)などから対象ファイルを操作します。
◆ ファイルIDの取得方法(Googleスプレッドシートなど)
1. 対象のファイルを開きます。
2. アドレスバーに表示されているURLを確認します。
https://docs.google.com/spreadsheets/d/1AbCdEFgHIjkLmNoPQRsTuvWXyZ123456/edit
3. このうち、spreadsheets/d/ と /edit の間にある オレンジ部分が ファイルID です。
◆ フォルダIDの取得方法(Googleドライブ)
1. Googleドライブで目的のフォルダを開きます。
2. アドレスバーのURLを確認します。
https://drive.google.com/drive/folders/1XyZabcDEfGHIjklmnopQRsTuvW456789
3. 上記の オレンジ部分が フォルダID です。
1-2. GASコードの実装と設定変更
AppSheetのデータソースになっているGoogleスプレッドシートを開き、メニュー「拡張機能」>「Apps Script」 からGASエディタを開き、以下のGASコードをコピー&ペーストしてください。
なお、フォルダID等の設定は事前準備したものに適宜修正してください。
GASコード
なお、このコードは機能拡張しており、次のような機能も実装しております。
・CSVファイルの文字コードの対応
・CSVファイルの更新日時チェック機能(前回の取り込み以降、CSVファイルが更新されていない場合は、データの取り込みをスキップし、無駄な処理は行いません)
// === 設定部分(ここを自分の環境に合わせて変更) ===
// CSVを置くフォルダのID
const folderId = 'YOUR_FOLDER_ID_HERE';
// CSVファイル名(固定)
const fileName = 'YOUR_CSV_FILE_NAME_HERE'; //例:seikyu_zandaka.csv
// CSVファイルの文字コード 'Shift_JIS' or 'UTF-8'
const fileCharEncoding = 'UTF-8';
// 更新対象のスプレッドシートID
const spreadsheetId = 'YOUR_SPREADSHEET_ID_HERE';
// 更新したいシート名
const sheetName = 'YOUR_SPREADSHEET_SHEET_NAME_HERE'; //例:請求残高-閲覧用データ
// ====================================================
// スクリプトプロパティを扱うサービス
const properties = PropertiesService.getScriptProperties();
const LAST_UPDATE_KEY = 'lastCsvUpdateTime_202511TEST'; // プロパティに保存するキー名
// ● CSVファイルの情報をスプレッドシートに取り込む(上書き)
function updateSheetFromCSV() {
// フォルダ内から指定ファイルを取得
const folder = DriveApp.getFolderById(folderId);
const files = folder.getFilesByName(fileName);
if (!files.hasNext()) {
Logger.log('指定したCSVファイルが見つかりません');
return;
}
const file = files.next();
// 1. 現在のCSVファイルの更新日時を取得
const currentUpdateTime = file.getLastUpdated().getTime(); // Unixタイム(ミリ秒)で取得
// 2. スクリプトプロパティから前回の更新日時を取得
const lastUpdateTimeStr = properties.getProperty(LAST_UPDATE_KEY);
const lastUpdateTime = lastUpdateTimeStr ? parseInt(lastUpdateTimeStr) : 0; // 初回実行時や取得失敗時は 0
// 3. 更新日時を比較
if (currentUpdateTime <= lastUpdateTime) {
Logger.log(`CSVファイルは前回から更新されていません。処理をスキップします。前回日時: ${new Date(lastUpdateTime)}`);
return; // 更新されていないので処理を終了
}
// 4. CSVファイルの取り込み処理開始
Logger.log(`CSVファイルが更新されました。取り込み処理を実行します。CSVファイル最新日時: ${new Date(currentUpdateTime)}`);
// 4-1. CSVを読み込む
const csvData = Utilities.parseCsv(file.getBlob().getDataAsString(fileCharEncoding));
// 4-2. スプレッドシートを開いて内容を上書き
const ss = SpreadsheetApp.openById(spreadsheetId);
const sheet = ss.getSheetByName(sheetName);
sheet.clearContents(); // 古い内容を削除
sheet.getRange(1, 1, csvData.length, csvData[0].length).setValues(csvData);
// 5. 今回の更新日時をスクリプトプロパティに保存
properties.setProperty(LAST_UPDATE_KEY, currentUpdateTime.toString());
// 6. 管理用スプレッドシートにCSVファイルの更新日時を書き出す(➡AppSheetで表示するため)
// AppSheetに表示するための管理シート/セルに書き込む
const managementSheetName = '管理シート'; // 任意のシート名
let managementSheet = ss.getSheetByName(managementSheetName);
// もし管理シートがなければ作成する(初回のみ)
if (!managementSheet) {
managementSheet = ss.insertSheet(managementSheetName);
}
// 日時をDateオブジェクトに戻して書き込む(AppSheetが読みやすい形式)
const updateDate = new Date(currentUpdateTime);
// 6-1. 日付部分を「日付型」として書き込み
managementSheet.getRange('A1').setValue('CSV最終更新日'); // ヘッダー
managementSheet.getRange('A2').setValue(updateDate); // 値(Dateオブジェクト全体を書き込む)
// 6-2. 時刻部分を「時刻型」として書き込み(またはテキスト型で正確に)
managementSheet.getRange('B1').setValue('CSV最終更新時刻'); // ヘッダー
// Utilities.formatDate()で、時刻だけをJSTタイムゾーンで文字列として取得
const timeString = Utilities.formatDate(updateDate, Session.getScriptTimeZone(), 'HH:mm:ss');
managementSheet.getRange('B2').setValue(timeString); // 値(時刻文字列)
// 6-3. タイムゾーンも別セルに書き出すとさらに正確です(オプション)
managementSheet.getRange('C1').setValue('タイムゾーン');
managementSheet.getRange('C2').setValue(Session.getScriptTimeZone());
Logger.log('スプレッドシートの更新が完了しました');
}1-3. 動作確認(デバッグ実行)
GASエディタで関数名 updateSheetFromCSV を選択し、「▶実行」ボタンを押してテスト実行してください。
実行後、GASコードで指定したスプレッドシートのシート内容がCSVファイルで上書きされているか確認します。
また、「管理シート」という新しいシートが作成され、CSVファイルの更新日時が書き込まれていることも確認しましょう。
取り込んだスプレッドシートのデータが文字化けしている場合
GASコードで指定している文字コードを見直してください。(CSVファイルの文字コードを確認し、その文字コードを設定してください)// CSVファイルの文字コード 'Shift_JIS' or 'UTF-8'
const fileCharEncoding = 'UTF-8';
同じCSVファイルを再取込する場合
ここで紹介しているGASコードは、CSVファイルの更新日時のチェックをしています。そのため、前回取り込んだものと同じ更新日時のCSVファイルは取込処理を行いません。
同じCSVファイルを再取込する場合は、CSVファイルの更新日時を変更するか、GASコードで指定しているスクリプトプロパティの値をリセットしてください。// スクリプトプロパティを扱うサービス
const properties = PropertiesService.getScriptProperties();
const LAST_UPDATE_KEY = 'lastCsvUpdateTime_202511TEST'; // プロパティに保存するキー名
ステップ2:GAS実行の自動化
この関数を自動で定期的に実行し、スプレッドシートの中身を更新できるようにします。この自動実行を設定するのが GASのトリガー機能 です。
2-1. GASのトリガー設定とは?
GASの「トリガー」とは、関数を自動的に実行するための仕組みです。通常、GASのコードは手動で「▶実行」ボタンを押さないと動きませんが、トリガーを設定することで、特定のタイミングやイベントに合わせて自動的に関数を動かすことができます。
トリガーの種類
GASでは主に次の2種類のトリガーが使えます。
| トリガーの種類 | 特徴 | 用途例 |
|---|---|---|
| 時間主導型トリガー | 設定した時刻や間隔で関数を自動実行します。(時間ベースのトリガー) | 毎日午前7時に自動実行、1時間ごとに実行、10分ごとに実行など |
| イベントトリガー | スプレッドシートやフォームの動作に応じて関数を実行します。(操作に反応するトリガー) | セルが編集されたとき(onEdit())、フォームの回答が送信されたときなど |
2-2. トリガー設定の手順
今回は、「退社時にCSVを出力し、翌朝アプリで最新データを閲覧する」という運用を想定しました。そのため、時間主導型トリガーを使い、「毎日 午前 8時~9時」に実行するよう設定します。
補足: 無料のGoogleアカウントでは、トリガー実行の回数や頻度に制限があります。
・GASエディタの左側のメニューから 時計アイコン(トリガー) をクリックします。
・画面右下の 「トリガーを追加」 ボタンをクリックします。
・以下の設定を行います。
| 設定項目 | 設定値の例 | 備考 |
|---|---|---|
| 実行する関数 | updateSheetFromCSV | 作成した関数名を選択 |
| デプロイを選択 | Head | 通常は「Head」を選択 |
| イベントのソース | 時間主導型 | |
| 時間ベースのトリガーのタイプ | 日付ベースのタイマー | |
| 時間の間隔(分) | 午前 8時 ~ 9時 |

ステップ3:AppSheetアプリへの更新日時の表示
最後に、アプリ利用者が「このアプリのデータがいつの時点のものか」を把握できるよう、最新の更新日時をアプリ画面に表示します。
AppSheetで次の設定作業を行います。
3-1. 「管理シート」をデータソースに追加する
GASでスプレッドシートに「管理シート」を作成し、取り込んだCSVファイルの更新日時(A2セルに日付、B2セルに時刻)を書き込むようにしました。
・左メニュー「Data」アイコン から、データソース「管理シート」を追加します。
・「管理シート」データ の列設定を確認・修正します。
A2 に対応する列(CSV最終更新日)の TYPE:Date
B2 に対応する列(CSV最終更新時刻)の TYPE:Time

・「管理シート」のデータはアプリで更新しないため、テーブル設定で「Read Only(読込専用)」の設定をします。

3-2. 日付と時刻を結合する仮想列の作成
管理シート のテーブルに仮想列を追加し、日付と時刻を一つにまとめて表示できるようにします。
・データソース「管理シート」を選択し、Add Virtual Column をクリックします。
Column Name:「CSV最終更新日時」
App formula:CONCATENATE(TEXT([CSV最終更新日], "YYYY/MM/DD"), " ", [CSV最終更新時刻])
Type:DateTime

・画面に表示するのは追加した仮想列だけでいいので、それ以外の項目の「SHOW」のチェックは外します。

3-3. アプリ画面への埋め込み
左メニュー「スマホ」アイコン から、画面(Views)の設定をします。
・「管理シート」を参照するビュー(例: CSV更新日時)を新規作成します。
View type:detail
Position:ref

・既存の「請求残高 閲覧用」ビューに対して、Position を ref に設定します。
Position:ref

・メインダッシュボード用のビュー(例:メイン)を新規作成し、「請求残高 閲覧用」ビューと「CSV更新日時」ビューを埋め込みます。
View Type:dashboard
Position:middle
View Options の View entries:「請求残高 閲覧用」ビューと「CSV更新日時」ビューを設定
View Options のUse tabs in mobile view:「ON」

・ビューの一般設定(Settings-Views-General)で 初回表示するビューを「メイン」にします。
Starting view:「メイン」

これで、次のようなアプリが出来上がります。

まとめ
今回のGASとトリガー設定で、面倒な手動での更新作業はもう必要ありません!
・あとはGASが自動で動いて、CSVファイルを読み込んでくれます。
・CSVの中身が前回と同じなら、書き込み作業をスキップします。(無駄な処理がありません!)
・データが変わったときだけ、AppSheetのデータソース(スプレッドシート)を最新情報に自動更新します。
・AppSheetの画面には、データがいつ更新されたかがしっかり表示されるので、古い情報を見てしまう心配もありません。
この仕組みで、日々のデータ更新の手間やミスがゼロになり、最新の請求残高データをいつでもスマホでチェックできるようになります!
ぜひ、この自動化設定を活用して、業務をもっとラクに、もっと効率的に進めてくださいね!
このAppSheetアプリの構築や、業務自動化についてのご質問・ご相談がありましたら、お気軽にお問い合わせください。

コメント