前回書いていたなわとび記録アプリが結構できました。
ちょこちょこっとノウハウも得られたので、
備忘録として書いておこうと思います。
まずはソースを。説明は後で書きます。
【コード.gs】
//URLをたたいたときに呼ばれる
function doGet(req) {
const template = 'form';
return HtmlService.createTemplateFromFile(template).evaluate();
}
// CSSを読み込む関数
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
//画像を表示するための関数
function getBae64Image(id) {
const file = DriveApp.getFileById(id);
const data = file.getBlob().getBytes();
return Utilities.base64Encode(data);
}
【form.html】
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<!-- form.cssの読み込みはコード.gsに作成した関数で行う -->
<?!=include('form.css');?>
<title>なわとび記録</title>
<meta name="viewport" content="width=device-width">
</head>
<!-- btnDayで初期値を今日に設定、imgDisplayでiPhone用の画像表示の仕込み -->
<body onload="btnDay('today');imgDisplay('GoogleIDGoogleIDGoogleIDGoogleIDG','imgcalendar');imgDisplay('GoogleIDGoogleIDGoogleIDGoogleIDG','imgnawa');imgDisplay('GoogleIDGoogleIDGoogleIDGoogleIDG','imgcount');imgDisplay('GoogleIDGoogleIDGoogleIDGoogleIDG','imgmaccho')">
<main>
<!-- タイトル -->
<div class="maintitle">なわとび記録</div>
<form action="https://docs.google.com/forms/u/0/d/e/GoogleIDGoogleIDGoogleIDGoogleIDGoogleIDGoogleIDGoogleID/formResponse" method="post" target="hidden_iframe" onsubmit="submitted=true;">
<P>
<!-- 日付 -->
<img id="imgcalendar" class="TitlePic">
<input class="CalIphone" id="date" type="date" name="entry.123456789" required> <span class="dateChange" onclick="btnDay('today')">今日</span> <span class="dateChange" onclick="btnDay('yesterday')">昨日</span>
</P>
<P>
<!-- 種類 -->
<img id="imgnawa" class="TitlePic">
<select class="SelIPhone" id="type" name="entry.123456789" required>
<option value="前跳び" selected>前跳び</option>
<option value="後ろ跳び">後ろ跳び</option>
<option value="前二重跳び">前二重跳び</option>
<option value="後ろ二重跳び">後ろ二重跳び</option>
</select>
</P>
<P>
<!-- 回数 -->
<img id="imgcount" class="TitlePic">
<input class="NumIphone" type="number" value="90" name="entry.123456789" placeholder="100" required><span class="NumText">回</span>
</P>
<P>
<!-- 記録ボタン -->
<div style="display:inline-flex">
<img id="imgmaccho" class="MacchoPic"><input class="BtnSave" type="submit" name="button" value="記録する" onclick="saveMsg()">
</div>
</P>
</form>
</main>
<!-- jQueryのCDNを読み込んで使えるようにする -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
//今日か昨日の日時を表示
function btnDay(flg) {
var date = new Date()
//flgによって今日か昨日を取得する
if (flg == "today") {
//何もしない
} else if (flg == "yesterday") {
//昨日を取得する
date.setDate(date.getDate() - 1);
} else {
//エラーの場合は何もせず、今日を取得
}
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var toTwoDigits = function (num, digit) {
num += ''
if (num.length < digit) {
num = '0' + num
}
return num
}
var yyyy = toTwoDigits(year, 4)
var mm = toTwoDigits(month, 2)
var dd = toTwoDigits(day, 2)
var ymd = yyyy + "-" + mm + "-" + dd;
document.getElementById("date").value = ymd;
}
/* 画像表示 bodyのonloadで呼び出すことでiPhoneに画像表示させる */
/* strfileId=GoogleドライブのURLID */
/* strElementId=IMGタグに指定するID */
function imgDisplay(strfileId,strElementId) {
const fileId = strfileId;
const url = google.script.run
.withSuccessHandler(base64Data => {
const img = document.getElementById(strElementId);
img.setAttribute("src", "data:image/png;base64," + base64Data);
})
.withFailureHandler(console.error)
.getBae64Image(fileId);
}
/* 記録ボタン押下後のメッセージ(押せたのかわかりにくいので表示させる) */
function saveMsg(){
alert("お疲れさまでした！")
}
</script>
<script type="text/javascript">var submitted = false;</script>
<!-- 記録ボタンタップ後の画面遷移 -->
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='https://docs.google.com/spreadsheets/d/spreadsheetnoIDspreadsheetnoID/edit#gid=123456789';}"></iframe>
</body>
</html>
【form.css.html】
<style>
* {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
main {
width: 100vw;
margin: auto;
color: #000;
}
/* タップしたときの青い四角を消す */
*:focus {
outline: none;
}
/* 一番上のタイトルの文字 */
div.maintitle {
font-size: 75px;
font-weight: bold;
text-align: center;
margin-bottom: 70px;
}
/* 項目名の文字 */
span.title {
font-size: 55px;
margin-left : 30px;
margin-right : 30px;
}
/* 項目のアイコン */
img.TitlePic {
width: 70px;
height: 70px;
margin-left : 30px;
margin-right : 30px;
}
/* 日付 */
input.CalIphone {
width: 340px;
font-size: 65px;
margin-bottom: 60px;
background-color: transparent;
border-width: 0px 0px 0px 0px;
vertical-align:12px; /* inputやselectがちょっと下にずれる問題の対応 */
}
/* 昨日今日ボタン */
span.dateChange {
font-size: 45px;
margin-left : 20px;
margin-right : 20px;
margin-bottom: 60px;
padding: 10px 30px;
vertical-align:20px; /* inputやselectがちょっと下にずれる問題の対応 */
background-color: #dcdcdc;
}
/* 跳び方の種類プルダウン */
select.SelIPhone {
-webkit-appearance: none; /* セレクトボックスのデフォルトスタイルを無効化 */
-moz-appearance: none; /* セレクトボックスのデフォルトスタイルを無効化 */
appearance: none; /* セレクトボックスのデフォルトスタイルを無効化 */
width: 740px;
font-size: 65px;
margin-bottom: 60px;
background-color: white;
border-width: 0px 0px 0px 0px;
vertical-align:12px; /* inputやselectがちょっと下にずれる問題の対応 */
}
/* プルダウンのダミー矢印 */
span.yajirushi {
font-size: 65px;
margin-bottom: 60px;
vertical-align:12px; /* inputやselectがちょっと下にずれる問題の対応 */
}
/* 回数 */
input.NumIphone {
width: 155px;
font-size: 65px;
margin-bottom: 60px;
border-width: 0px 0px 0px 0px;
vertical-align:12px; /* inputやselectがちょっと下にずれる問題の対応 */
}
/* 回数の「回」の文字 */
span.NumText {
font-size: 40px;
margin-bottom: 60px;
border-width: 0px 0px 0px 0px;
vertical-align:12px; /* inputやselectがちょっと下にずれる問題の対応 */
}
/* 記録閲覧ボタン */
input.BtnRecord {
-webkit-appearance: none; /* inputボタンのデフォルトスタイルを無効化 */
height: 180px;
font-weight: bold;
text-align: center;
font-size: 55px;
margin-top: 410px;
margin-left: 155px;
color: #ffffff;
background-color: #5a70c3;
border-width: 0px 0px 0px 0px;
}
/* 記録ボタン */
input.BtnSave {
-webkit-appearance: none; /* inputボタンのデフォルトスタイルを無効化 */
height: 180px;
font-weight: bold;
text-align: center;
font-size: 55px;
margin-top: 410px;
margin-left: 440px;
color: #ffffff;
background-color: #5a70c3;
border-width: 0px 0px 0px 0px;
}
/* 項目のアイコン */
img.MacchoPic {
width: 140px;
height: 140px;
margin-top: 450px;
margin-left: 20px;
}
</style>
Googleドライブの画像ファイルをiPhoneで表示
アプリ画面にアイコンを表示するためにGoogle Driveに画像ファイルを
置いて<IMG>タグで表示しようとしたんですがiPhoneだと
一筋縄ではいかないようで。
GASで公開したWebサイトにGoogle Drive上の画像ファイルを表示できない
上のページのコードを参考に、imgDisplay(strfileId,strElementId)という
ファンクションを作っています。
form.htmlのbodyタグのonloadでGoogleドライブの画像IDとIMGタグを
指定すればhtml側で画像表示できるよう、コードを変えてみました。
画像IDの取り方は以下のページが参考になります。
Google Drive にある画像をimgタグで取得させるURLについて
部品タップ時に出てくる青い枠対応
あとプルダウンをタップしたときに青い枠が出ちゃうんですが、
以下のページのコードを使用して出ないようにしました。
クリックやタップしたときの青い枠や四角を消すCSS
アプリ画面の左下にムキムキアイコンを表示してるんですが
表示してるだけです。タップしたら今までの履歴画面に
飛ばすようにしたいんですが履歴画面をまだ作っていないので…。
