そもそも GAS(Google Apps Script) って？
GAS(Google Apps Script)公式によると、
Apps Script サービスを使用すると、スクリプトが Google と外部システムのデータにアクセスできます。
Google.com 様
だそうです。
よく分からないですね。
今回はいくつか出来そうなことを出してみます。
1.Google のサービスと連携する
そもそも、Google先生には皆様ご存じの通り、
- ドライブ
- Gmail
- カレンダー
- フォト
- マップ
- スプレッドシート etc.
などなど、たくさんのサービスを提供してくださっている企業です。
Apps Script はそれらのサービスと連携することができます。
ドライブ内を探索してみる
例えば、指定したドライブ内のファイルの名前を列挙したければ、下記の方法でできます。
function main() {
// ドライブの id
const drive_id = '';
allDriveFilss(drive_id);
}
// 指定したドライブ内のファイルをログに列挙する
function allDriveFilss(drive_id) {
const drive = DriveApp.getFolderById(drive_id);
const fileIte = drive.getFiles();
while(fileIte.hasNext()) console.log(fileIte.next().getName());
}列挙したファイル名をスプレッドシートに転記してもいいですし、JPG、PNG、GIFなど、拡張子毎にフォルダ分けすることもできます。
また、特定の名前のファイルを探すこともできそうですね。
カレンダーを眺めてみる
例えば、カレンダーに予定を追記したければ下記の方法でできます。
function main() {
// カレンダーに予定を書きこむ
const title = 'オリンピック';
const startTime = new Date('2028-07-14');
const endTime = new Date('2028-07-30');
addSchedule(title, startTime, endTime);
}
// カレンダーに予定を書き込む
// 予定の名前, 予定日開始時刻, 予定終了時刻
function addSchedule(scheduleName, startTime, endTime) {
CalendarApp.getDefaultCalendar().createEvent(scheduleName, startTime, endTime);
}2028年の予定なのでお気を付けください。
バイトのシフトを登録できるツールを作ったり、配送カレンダーを作ることもできそうですね。
後述しますが、HTML とも連携ができるので、フォームから予定の登録・更新・削除もできます。
他にも
GASではHTMLも扱えるので、ウェブサービスを作ったりすることもできます。
GASには一回の実行で最大6分間の処理しか実行できなかったり、各機能の使用制限があったりします。
＊Google サービスの割り当て に詳細があります。＊
2.他のサービスと連携してみる
引用の後半部分、外部システムのデータにアクセスできる。についてです。
LINE chat bot の簡易サーバー代わりにできたりします。
GAS から他の API にリクエストを投げることもできます。
GAS には UrlFetchApp というオブジェクトがあり、他のアプリケーションに接続したり、ウェブ上のリソースにアクセスしたりできます。
例えば、入力した郵便番号から住所を出したりできます。
郵便局検索API 様を使わせていただいております。
＊自分以外のリソースを利用する場合は、しっかりと利用規約を確認しましょう。
function main() {
// 郵便番号から住所を調べる
searchAddress(1500001);
}
// 郵便番号から住所を調べる
function searchAddress(postalCode) {
const res = UrlFetchApp.fetch(`http://zip.cgis.biz/csv/zip.php?zn=${postalCode}`);
// 文字コード euc-jp のCSVが返ってくるので euc-jp として読み込む
const content = res.getContentText("euc-jp");
console.log(content);
}
上記コードを実行すると郵便番号「150-0001」が「東京都渋谷区神宮前」という住所であること分かります。
フォームを入力した際に住所を自動で出すことができますね！
外部のアプリケーションに接続したり、ウェブ上のリソースにアクセスする場合は、必ず利用規約を守って正しく使いましょう。
法律に触れることもあるのでご使用の際は十分にご注意ください。
3.組み合わせて使う
フォーム・スプレッドシート・GAS・HTML ・UrlFetchApp を組み合わせ例です。
フォームでデータを送信し、スプレッドシートにデータが蓄積されます。
その後、データを見やすいように HTML 上に表示してみました。
また、郵便局検索API 様を利用して、郵便番号から地域を表示しています。
// フォームの回答を一覧にして表示する
function doGet(e) {
const allDataTemplate = HtmlService.createTemplateFromFile('allData');
const formData = getFormData();
formData[0].push('お申し込みの地域');
for(let i = 1; i < formData.length; i ++) {
const d = new Date(formData[i][0]);
formData[i][0] = `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
const address = searchAddress(formData[i][3].replace('-', ''));
formData[i].push(address[12] + address[13] + address[14]);
}
allDataTemplate.formData = JSON.stringify(formData);
return allDataTemplate.evaluate();
}
// 郵便番号から住所を調べる
function searchAddress(postalCode) {
const res = UrlFetchApp.fetch(`http://zip.cgis.biz/csv/zip.php?zn=${postalCode}`);
// 文字コード euc-jp のCSVが返ってくるので euc-jp として読み込む
const content = res.getContentText("euc-jp");
return content.replaceAll('"', '').split(',');
}
// フォームのデータを取得する
function getFormData() {
const SPREAD_SHEET_ID = 'フォームデータがあるスプレッドシートのid';
const SHEET_NAME = 'フォームの回答 1';
return SpreadsheetApp.openById(SPREAD_SHEET_ID).getSheetByName(SHEET_NAME).getDataRange().getValues();
}<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid #000000;
background-color: #eeeeee;
}
th,
td {
padding: 20px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div style="margin-left: auto;">
<h1>予約一覧</h1>
<table>
<thead id="tableHeader">
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</body>
<script>
window.onload = () => {
const formData = JSON.parse(<?= formData ?>);
// テーブルの描画
appendTH(formData);
appendTD(formData);
}
// ヘッダーの追加
const appendTH = (data, parent) => {
const headerParent = document.getElementById('tableHeader');
const tr = document.createElement('tr');
for(let i = 0; i < data[0].length; i ++) {
const th = document.createElement('th');
th.innerHTML = i === 0 ? '予約日' : data[0][i];
tr.append(th);
}
headerParent.append(tr);
}
// データの追加
const appendTD = (data, parent) => {
const headerParent = document.getElementById('tableBody');
for(let row = 1; row < data.length; row ++) {
const tr = document.createElement('tr');
for(let col = 0; col < data[row].length; col ++) {
const td = document.createElement('td');
td.innerHTML = data[row][col];
tr.append(td);
}
headerParent.append(tr);
}
};
</script>
</html>デザインや機能などを充実させれば、当日の予約一覧や地域などをグラフにして出せそうです。
まとめ
ということで、どんなことができるのか例を添えて出してみました。
組み合わせ次第で様々なことができるので試してみてはいかがでしょうか。
また、何かお手伝いできそうなことがあればお気軽にお声掛けください。
Xにて依頼・要望お待ちしております。
＊このサイトを参考に何かを作成した際に起こった全ての責任を負いません＊
