送信内容を書き込み、送信後の画面へも遷移できるようになりました。
AIに頼り切っているばかりに理解が追い付かず、
メンテナンスが大変になりそうなので、
ある程度で良いからプロパティやメソッドを理解しなければいけないなと実感した作業でした。
東西東西
今回はこちら
●GASのdoGetとdoPostを使ってHTMLファイルと連携 CLEAR!
●フリーメモ欄を用意する CLEAR!
●送信されたことがわかるアラートを用意する CLEAR!
●出勤、退勤ボタンがクリックで切り替わるようにする
●出勤、退勤ボタンが押されるとそれらをスプレッドシートに送信する CLEAR!
●同時にGoogleチャットにも送信する CLEAR!
出勤を押す⇒退勤ボタンのみになる
退勤を押す⇒出勤ボタンのみになる
ように分岐をしなければいけないことまでは想像できましたが、
どんなコードを組めば良いのかさっぱりです。またAIに聞いてみます。
すると、ローカルストレージへ保存することができるよ！とのこと。
ローカルストレージ？
どこのストレージに保存されるの？
まずはそこからでした。
検索するとどうやら、Google内のストレージに保存されるようで、
使うには”名前”と”保存する内容”が必要みたいです。
メモやエクセルなども無名で保存できないのと一緒ですね。
とりあえずAIが提示したコードを基に必要な箇所を書き換えてみます。
▼hogehoge.html
<script>
//送信した値の転送用
function setValue(value) {
document.getElementById('hiddenValue').value = value;
let textValue = document.getElementById('sendText').value;
let date = {
'value' : value,
'textValue' : textValue,
}
console.log(date);
google.script.run.withSuccessHandler(function() {}).doPost({parameter: date});
}
let isAttendance = true;
//ボタンの切り替わり
function setButtonState(){
let selectedButton = JSON.parse(localStorage.getItem('selectButton'));
if (selectedButton === '出勤'){
document.getElementById('selectS').style.display = 'none';
document.getElementById('selectT').style.display = 'block';
isAttendance = false;
} else if(selectedButton === '退勤'){
document.getElementById('selectS').style.display = 'block';
document.getElementById('selectT').style.display = 'none';
isAttendance = true;
}
}
//画面遷移とボタンの値をローカルストレージへ保存
document.getElementById('selectS').addEventListener('click', function(){
localStorage.setItem('selectButton', '出勤');
window.top.location.href = '?page=fugafuga';
});
document.getElementById('selectT').addEventListener('click', function(){
localStorage.setItem('selectButton', '退勤');
window.top.location.href = '?page=fugafuga';
});
//ボタンを保持する
document.addEventListener('DOMContentLoaded', function() {
setButtonState();
});
</script>
「selectButton」という名前で「出勤」と「退勤」をローカルストレージへ保存されるようにして、
clickして画面遷移する時とボタンを切り替えるif文の分岐で「selectButton」を呼び出すようにします。
すると何やらエラーになり、ボタンが切り替わりません。
再度調べると、
「localStorage.setItem(‘selectButton’, ‘出勤’) 」この保存した内容が良くなかったようです。
テキストベースで保存したいなら「JSON.stringify」が必須でした。
修正してもう一度「出勤」ボタンを押してみます。
localStorage.setItem('selectButton', JSON.stringify('出勤'))
ちゃんと想定通りになりました！
想定通りの動きをしてくれると、なんだかだんだんとプログラミングが楽しくなってきました。
これで当初予定してた機能はすべて盛り込めましたが、
見た目が某俳優プロフィールサイト以下なので見栄えを良くします。
CSSは昔ほんのちょっと学んだっきりなので、こちらも調べつつ肉付けしていきます。
GASでCSSファイルは作成できないので、HTMLファイルでCSSのコードを組みます。
hogehoge.html と fugafuga.html に以下を追加すると動作するようです。
<?!= HtmlService.createHtmlOutputFromFile('css用のHTMLファイル名').getContent(); ?>
文字サイズやら背景色やらを決めたものがこちらになります。
あまりかっちりしすぎるのも滅入ってしまいますしかしこまりすぎますし、
全体的に柔らかい雰囲気でコードを組んでみました。
ボタンの色も、朝と夕方（夜）をイメージしてみたり・・・
ついつい細かいところが気になってしまい、
誰が気づくかもわからないこだわりに時間をかけてしまいました。
（クリエイターあるあるだと思ってます）
ボタンはカーソルを合わせると少しアニメーションするようにしてみました。
ご参考までにコードはこちらです。
※送信完了のCSSは背景色を変えただけなので省略
▼hugaCss.html
<!DOCTYPE html>
<style>
body {
font-family: Arial;
padding: 0;
margin: 0;
background-color: #f7fafa;
color: #3d424d;
overflow-x: hidden;
}
header {
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
width: calc(100% - 20px);
height: 90px;
background-color: #ffffff;
border-radius: 0 0 30px 30px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
font-size: 2em;
}
main {
display: flex;
align-items: center;
justify-content: center;
}
.freeText{
display: flex;
align-items: center;
justify-content: center;
}
.textForm {
margin: 20px;
padding: 10px;
background: rgb(0, 0, 0, 0.1);
font-size: 1em;
border: none;
border-radius: 10px;
width: 16em;
height: 1.5em;
color: #3d424d;
}
.btn{
display: flex;
justify-content: center;
margin: 15px;
}
.s-button, .t-button{
margin: 15px;
text-align: center;
width: 150px;
height: 80px;
font-size: 20px;
color: #3d424d;
transition-duration: .4s;
border-radius: 100vh;
}
.s-button {
position: relative;
border: 5px solid #c0c6cc;
background-color: #f0f8ff;
}
.s-button:before{
position: absolute;
top: 4px;
left: 4px;
width: calc(100% - 10px);
height: calc(100% - 10px);
content: '';
transition: all .3s;
border: 1px solid #c0c6cc;
border-radius: 100vh;
}
.t-button{
position: relative;
border: 5px solid #a3a3cc;
background-color: #c8c8fa;
}
.t-button:before{
position: absolute;
top: 4px;
left: 4px;
width: calc(100% - 10px);
height: calc(100% - 10px);
content: '';
transition: all .3s;
border: 1px solid #a3a3cc;
border-radius: 100vh;
}
.s-button:hover, .t-button:hover{
transform: scale(1.1);
}
.s-button:hover:before, .t-button:hover:before{
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
}
</style>
プログラミングをしてみて
今回の紹介では簡単な動作で、実際に運用しているWebアプリとは一部異なりますが、
コードを組んで出来上がる度、
「こんな動作もほしい」「もっとこうしたほうがユーザビリティが上がりそう」と、
いろいろ改善案が出てきました。
そして正常に動作する度に達成感があり、面白くなってきます。
滅多にプログラミングをしないので、
次触るころにはまた忘れていそうですが・・・
そして今回作成したWebアプリをベースにして社内の数名の方で、
●テストケースの作成
●テストの実施
を業務のスキルアップも兼ねて疑似的に実施しました。
こうしたWebアプリを作ることは社員の教育にも役立てられる良い機会になったように思います。
お手伝いしていただいた方へ、ここで感謝を述べさせていただきます！
ほぼ生成AIを使ってのプログラミング。
これも面白いことにAIが違えば返ってくる答えも違います。
このAIで何度やってもエラーが直らないから、こっちのAIに聞いてみよう、
という具合に駆使していくと意外とすぐに解決したりもしました。
しかし、当初にも記述した通り鵜呑みにしすぎると理解が追い付かず、
エラーの原因や後日のメンテナンスが大変ですし、GASで動作しないメソッドなどを提示されるので、
すべてをAIに任せるのではなく、自分で調べて理解することも大事だと改めて学んだ作業でした。
頼れるところはAIに。
人手との区別が大切だと感じた作業でした。
蛇足
WebアプリでCSSのコードを組むのにいろいろ調べて面白かったのが、
カラーコードを見ただけで色がわかるようになるとのこと。
カラーコードは以下のように表記しますが、
#112233
のうち11の部分が赤、22の部分が緑、末尾2桁の33の部分が青。
0が色の要素が弱くFが強くなる仕組みです。
※三原色の色を混ぜると明るくなるので、#FFFFFFは白色になります。
先日、SNSで面白いカラーコードの小ネタを見つけました。
コーヒーのスペルCoffeeは16進数のカラーコード（#c0ffee）に置き換えると鮮やかな青緑色で、
反転させるとコーヒー豆のような茶色（#3f0011）になる
というのはデザイナーの間で有名なようです。
| #C0ffee | #3f0011 |
カラーコードの色を当てるゲームもあるので、
詳しい方、ちょっとCSSをかじった方は気分転換にぜひ力試ししてはいかがでしょうか。
＜過去の記事＞
生成AI×プログラム初心者でGoogleAppsScriptを使った出退勤報告webアプリを作る②
生成AI×プログラム初心者でGoogleAppsScriptを使った出退勤報告webアプリを作る①
