こんにちは。to Cサービスのカスタマーサポートをしてます平湯（ひらゆ）です。
GAS（Google App Script）・HTML・CSSを使って、ひとつの仕組みを簡便にした事例を紹介します。
やったことをざっくりいうと、「GASでHTMLを書いてWebページを作り、Webページに入力された情報をスプレッドシートに自動で転記できるやつを作った」です。
特にコーディングされてないので、綺麗なコードではないです。（指摘ぜひ欲しい）
誰でもやろうと思えば、今ある仕組みを効率的にやれるようになるんだよ、ということを伝えたくて書きました。強いCSチームづくりをしている方の参考になればうれしみ。
何を効率化したのか？
「毎朝の業務チェック」です。恥ずかしながら、何度か対応漏れが発生したり、作業量に対するリソースを見誤ったりしていたので、朝礼で業務チェックを行うようになりました。
具体的には、
- 項目ごとに「対応に漏れはないか？」と「作業量は処理可能な量か？」という視点で状況を共有する。（問題ありそうなら即リカバリ）
- チェックした記録をつける。
これを簡単にしました。
なんでやったの？
シンプルにスプレへの記録がめんどくさかったです。チェック項目は頻度がまばらで、一項目ずつ◯をつけなきゃいけない。しかもその前に、その日の日付を探さなきゃいけない。
業務管理はものすごく重要なんですが、何かを生み出すものじゃない（リスク低減はほぼそうだと思ってる）ので、モチベーションが非常に保ちづらいんですよね。（コンプラマンの皆さんすみません）なので、風化させないために、管理系のタスクはめちゃくちゃ簡便にしなきゃいけないと考えてます。
あと、自分のスキルを磨きたかったからです。自分のリソースで効率化できるとかなりストレスがないです。だって頼まなくてもいいし、自分のタイミングでやれるので気が楽です。いろんなことができるようになると仕事がやりやすいなと思って、やってみました。
HTML・CSSから始めたのは、業務効率化の観点とサポートページを自分でいじりたいと思ったからです。
テーマにしたこと
見やすくて操作しやすい画面にすることをテーマにしました。新しく使う人でも恐れずに操作できるものにしたかったので、今回は見た目を意識しました。あんま手を付けてこなかったCSSにチャレンジした感じです。
完成したもの
これがTOP画面です。確認した項目にチェックを入れていき、「記録する」ボタンを押すと、
~~（省略）~~
↓
記録完了を伝えるサンクスページにいきます。「記録シートにいく」ボタンを押すと、
↓
スプレのチェックシートにいきます。
当日の日付（2021/5/11）に、さっきのページでチェックした項目がスプレの項目で「◯」と記録されました。やったね。
コード
スクリプトは4つあります。①opsRecord.gs、②index.html、③result.html、④css.html です。
①opsRecord.gsで、webページの表示、webページに入力された情報の取得、スプレへの転記などを行います。②index.htmlは項目をチェックする画面のhtml、③result.htmlは作業完了画面のhtmlです。④css.htmlは文字通りCSSで、②と③の画面のスタイルを決めます。
コードとざっくり説明です。（細かいので気になる方はどうぞ）
実際はチェック対象の項目がもっと多いのですが、コードが長くなるので一部割愛してます。
学びとか工夫したこと
- GASではCSSを読み込むのにひと工夫が必要
- ファビコン入れられるよ
- 文字列型と日付型を同じカラムにしたので苦労した
- チェックボックスを同じnameにするとうまくいかない
- labelタグでチェックしやすく
- デプロイが2回必要だった
- CSSはぜんぶ学び
✏️GASではCSSを読み込むのにひと工夫が必要
GASでHTMLファイルとCSSファイルを分けるときは、headタグにcssを読み込むための呪文を入れます。
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?> こいつです。
headタグはこんな感じになります。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
<title>CS業務チェック</title>
</head>この辺りは、タカハシ先生のwebサイトで勉強しました。非常にわかりやすく、「やってみよう形式」になってるので、一回バーっと体験してみることをオススメします。
✏️ファビコン入れられるよ
Google driveのフォルダに画像を入れて、 doGet でファイルidを入力すればファビコンを出せます。webサイトっぽさマシマシです。素敵😍
.setFaviconUrl('https://drive.google.com/uc?id=xxxxxxxxxx&.png'); この部分ですね。「xxx…」の部分にファイルidを入れます。
function doGet() {
const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
htmlOutput
.setTitle('CS業務管理チェック')
.setFaviconUrl('https://drive.google.com/uc?id=xxxxxxxxxx&.png');
return htmlOutput;
}これもタカハシ先生のwebサイトで知見を得ました。
✏️文字列型と日付型を同じカラムにしたので苦労した
チェックシート（スプレ）には、日付のカラムがあって、営業日の日付と休日には「休」が日次で自動記録されていきます。で、当日の日付を探してチェックシートに「◯」を記録していきます。
日付のカラムに文字列型と日付型を一緒にしないほうがいいと思うんですけど、チェックシートでその日が休みであることを表現したかったので無理やりいきました。
continue を使って「休」であれば処理をスキップするようにしました。何回もエラーになって原因探るのに割と時間使ったので書いておきます 📝
for(var i=0;i<dateList.length;i++){
if(dateList[i][0]=='休'){
continue;
}
else if(Utilities.formatDate(dateList[i][0], 'Asia/Tokyo', 'yyyy-MM-dd') == today){
if(…✏️チェックボックスを同じnameにするとうまくいかない
form要素の input をチェック項目ごとに同じnameにしてしまうと、先頭の情報しか取得できませんでした。ググると同じnameでも取得できるような記述があったのですが、うまくいきませんでした。 name="checklist1" 、name="checklist2" のように項目ごとに別の名前をつけてます。
<div class="list">
<input type="checkbox" name="checklist1" value="1. チケット対応" id="ticket"> <label for="ticket"><p class="text-everyday">1. チケット対応 <span>［毎営業日］</span> <a target="_blank" href="xxxxxxxx" class="link"> zendesk Explore</a> </p></label>
</div>
<div class="list">
<input type="checkbox" name="checklist2" value="2. KYC対応" id="kyc" > <label for="kyc"><p class="text-everyday">2. KYC対応 <span>［毎営業日］</span> <a target="_blank" href="xxxxxxxx" class="link">kyc dashboard</a></p></label>
</div>✏️labelタグでチェックしやすく
label を使って、チェックボックス（「□」）だけじゃなく文言をクリックしてもチェックボックスが反応するようになってます。こんな小技あるんですね、便利。操作しやすさを意識したので細かいとこもやってみました。
あと target="_blank" で新しいタブで開くことができます。これも細かい小技。
<label for="ticket">
<p class="text-everyday">1. チケット対応 <span>［毎営業日］</span>
<a target="_blank" href="xxxxxxxx" class="link"> zendesk Explore
</a>
</p>
</label>✏️デプロイが2回必要だった
これも気づくのに結構時間がかかったので書いておきます。
form要素の action で opsRecord.gs のスクリプトを実行しているので、デプロイしたら最新のアプリケーションのURLを入れる必要があります。
なので、なにか修正を入れたときは、デプロイ →form要素の action のURLを修正 →再度デプロイ、をしないと修正が反映されません。
<form class="" action="xxx（実行するアプリケーションのURLを入れる）" method="post">✏️CSSはぜんぶ学び
業務っぽさをなるべく排したかったです。だるいって思い始めたら続かないので操作性もそうだけど見栄えも綺麗にしたかった。
ヘッダーのタイトルやボタン・チェックボックスを大きくするCSSを書いたのもそういう背景からです。
CSSを設定しなかったバージョンを見ると…業務感がすごいですね。チェックボックスもボタンもリンク先も押しづらそう🤦🏼♂️
今回記事にしたwebページを社内のデザイナー（osanai）に見てもらって、もっと良い案のレビューをもらえたので近々更新します。
イメージはこんな感じ。素敵すぎる見栄え！やるぞ！
感想とか
CSSって奥が深いんですね。漠然とHTMLが重要と思ってたんですけど、見た目はほぼCSSなんだなっていう学びを得ました。
今回の経験でやれることの範囲が広がりました。普段の業務のなかで、「あれ、これならGASでやれるな」とか「こいつはwebページ作って簡易的な管理画面として使えたら早くできるな」とかアンテナが前より立つようになりました。
自分の気持ちはいつでもこれです。
おしまい