Google Apps Script (以下gas) とは
詳しくはこちらの記事に記載していますが、簡単に説明するとGoogleサービスの自動化スクリプトをAPIなどを使用せずに開発できる、めちゃんこ便利な言語です。
一応、gasって何？って方は基礎や基礎メソッドの記事もありますので是非！
ファイルの作り方
では早速、webアプリを作成していきます。
gasのページを開き、ファイルの「＋」の「HTML」を押し、新規HTMLファイルを作成します。
ためしにデプロイしてみる
作成されたHTMLを、一度デプロイ (公開) してみましょう！
HTMLファイルのコードをこのように変更してください。
(すでに自動的に書かれているコードは消して、貼り付けちゃってください！)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>test deploy</h1>
</body>
</html>
操作パネルの「保存」をクリックして、今のコードを保存します。
次に、コード.gsを開き、このコードを追加します。
function doGet(e) {
const template = HtmlService.createTemplateFromFile('無題');
return template.evaluate();
}
そうしたら、画面右上にある青い「デブロイ」ボタンをクリックし、「新しいデブロイ」を選択します。
すると、デブロイタイプを選択してくださいと表示されるので、「歯車マーク」から「ウェブアプリ」を選択します。
そうしたら自分の好きなようにページの設定をします。
-
説明欄にはそのアプリの説明でも入れておきましょう。 -
ウェブアプリ欄は自分のアカウントのメールアドレスを選択しておきます。 -
アクセスできるユーザーは自分のみが見れるようにするなら自分のみ、リンクを知っているユーザー全てが見れるようにするなら全員を選択します。
設定が終わったら、「デプロイ」をクリックします。
少しまって、デプロイが完了したらそのwebアプリのリンクを取得できます。
リンクにアクセスして、test deployと表示されていたら大成功です！
更新の方法
webアプリを試しにデプロイしてみましたが、更新するにはどうしたらいいでしょうか？
先ほどのデプロイと同様に、 「デプロイ」をクリックし、今度は「デプロイを管理」を選択します。
するとこの画面が出てくるので、「編集」をクリックします。
バージョンの中の、「新しいバージョン」を選択し、「デプロイ」をクリックすると、先ほどと同じようにデプロイすることができます！
Webアプリにgasコードを埋め込む
htmlに、gasのコードを埋め込んで、処理をおこなうことができます。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Google Apps Script HTML サービスの例</h1>
<p>サーバーサイドの値：<strong><?= message ?></strong></p>
<button onclick="google.script.run.withSuccessHandler(displayResult).getServerMessage()">実行</button>
<div id="output"></div>
<script>
function displayResult(result) {
document.getElementById('output').innerText = result;
}
</script>
</body>
</html>
function doGet() {
var template = HtmlService.createTemplateFromFile('無題');
template.message = "Hello from server!";
return template.evaluate();
}
function getServerMessage() {
return "This message is from the server!";
}
-
<? ?>の中にコードを書くと、forのように、htmlに反映しない処理のコードを記述することができます。 -
<?= ?>の中にコードを書くと、記述したコードを実行した結果をhtmlに反映します。 -
google.script.run.withSuccessHandler(displayResult).関数()をscript内で記述すると、gasのコードをhtml内で呼び出すことができます。
また、これはjavascriptの話になりますが
関数を実行した際に、返り値として値をしていするときはreturnを使用します。
終わりに
今回、GASを学習しながらQiitaの書き方を学びました(-_-;)
なので、みにくいところがあるかもしれませんがご了承ください💦
今後もいろんな記事を投稿するので、よろしくです！