claspでGAS(GoogleAppsScript)ファイルをGit管理する。

突然ですが、
私、ガチャガチャが好きなんです。
25才の今でも、ガンガンやっちゃってます。
最近の一押しはワニワニパニックとこれです。

 

はい、本題に入ります。

最近、社内ツールをGASで作ることが多かったり、
私自身slackのbotはGASで作ることが多いため、
Git管理をしたかったので方法を探しておりました。
そこで、この記事を参考にGit管理ができたので、書きます!
https://qiita.com/rf_p/items/7492375ddd684ba734f8

 
下記リポジトリはgasで作ったLINEbotです。
kin29/linebot_calendar
このソースも GAS + clasp + Gitをつかって管理しています。

 

使うもの

– GASファイル(プロジェクト)
– clasp
– Gitリポジトリ(GithubでもBitbucketでもなんでもok!)

 

claspとは?

Googleドライブ上にあるGoogleAppScriptなどのファイルを
コマンド操作でファイルの変更や保存などがブラウザでなく、
ローカル側で行うことができるものです。
GASって普通はGoogleドライブからブラウザ上でしかソースを書けないと思っていました。
claspを使うとエディターを使って、
コード整形とかも簡単にできるので超便利です。
参考:https://qiita.com/HeRo/items/4e65dcc82783b2766c03

 

0.claspコマンドの導入

npm i @google/clasp -g

 

1.clasp login

https://script.google.com/home/usersettings
にアクセスし、Google Apps Script APIをオンに。
これで該当アカウントのGASプロジェクトをclaspから操作が可能になります。
そして、ターミナルでclasp loginと打ちます。
すると、ブラウザが開いて許可しますかてきな質問が出てくるのでokすると成功したよメッセージがでてくればログイン完了です

$ clasp login
No credentials given, continuing with default...
🔑  Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?access_type=XXXXXXXXXXXX...

Authorization successful.
Default credentials saved to: ~/.clasprc.json

 

2.既にあるGASファイルをローカルでpullする

$ mkdir [ファルダ名]  //このフォルダ以下をGit管理します。
$ cd [フォルダ名]
$ clasp clone [スクリプトID]
Cloned 2 files.
└─ コード.js
└─ appsscript.json

スクリプトIDは、 Git管理したいGASファイルを開いて、
ファイル>プロジェクトのプロパティ>情報の「スクリプト ID」に書いてます。

$ vi .clasp.json
{"scriptId":"[スクリプトID]"}

↑をしないと、複数GASプロジェクトが存在していると、
clasp pullした時にどのプロジェクトをpullしてくるかわからないので、
予期しないプロジェクトをpullしてきたりするのでした方がいいです!

 

3.Gitにファーストコミットする

リモートリポジトリは、GithubでもBitbucketでもなんでもokです。

$ git init
$ vi .gitignore //.clasp.jsonはGit管理外にする。
$ git status
$ git add -A
$ git commit -m 'first commit'
$ git remote add origin [リポジトリURL]
$ git push -u origin master

 

4-1.GoogleドライブよりGASファイルを更新後、ローカルにpullする

Googleドライブでコード変更した時は、ローカルにpullして同期します。

$ clasp pull

.clasp.jsonのスクリプトIDに基づくGASプロジェクトをpullしてきます。

 

4-2.ローカルよりGASファイルを更新後、ブラウザ側にpushする

ローカルでコード変更した時は、Googleドライブにpushして同期します。

$ clasp push

.clasp.jsonのスクリプトIDに基づくGASプロジェクトにpushします。

 

Gitで変更分をコミットする。

$ git add -A
$ git commit -m 'バグ修正'
$ git push origin [ブランチ名]

こんな感じです。
ちょっと面倒ですが、Git管理できるのは良きです。

htmlやjsのreset()は、ある意味リセットではない!

この前、酔って携帯を無くし、必死こいて探しましたが見つかりませんでした。
そしたらなんと、自宅の冷凍庫に冷凍保存してました。

どうも、こんなPONKOTSUです。(反省します)

 

今回は久しぶりにフロントエンドについてかきます。

htmlのinput[type=“reset”]は
初期値があれば、その初期値にリセットされる。

※jquery,jsのreset()も同様。

フォームなんかで、
選択済みのチェックボックスや入力済みの入力値を
\ 一括でリセットできるボタンがほしい /
って時があると思います。

そんなとき、こんなコード書くと思います。
(input[type=”reset”]というのがあるのをこの時知りました。)
htmlだったら…

  <input type="reset" value="リセットボタン">

jsだったら…

<button id="js_reset">jsのreset()</button>
<script>
 var js_rese_btn = document.getElementById('js_reset');

 js_rese_btn.addEventListener("click", function(){
   document.form.reset()
 }, false); 
</script>

 

これで、リセットはできるんです。
ただ、私の想定と違う時がありました。

それは、、、
リセット対象のformにvalueやselected,checkedなどの
初期値を設定している時です。
→値が「空」になるわけではなく、設定した初期値になる

 

デモはこちら。
https://jsfiddle.net/ocq0auwn/12/

 

ソースは感じ

<form action="#" name="form1">
  <!-- 「キン肉太郎」と入力して、リセットボタンを押すと、「山田孝之」になる。--> 名前:
  <input class="input_text_name" type="text" value="山田孝之" >
  飲んだお酒:
  <select class="select_sake">
    <option value="">選択してください</option>
    <option value="1">ビール</option>
    <option value="2">ハイボール</option>
    <option selected="selected" value="3">飫肥杉</option>
    <option value="4">もえしゃん</option>
    <option value="5">カプモーニ</option>
  </select>
  <input class="check_sake" checked="checked" type="checkbox" >お酒はほどほどにします。
  <input type="reset" value="htmlのリセット">

  <button class="jquery_reset">jQueryのreset()</button>
  <button id="js_reset">jsのreset()</button>
  <button class="jquery_reset_perfect">完全リセットしたい時に押すボタン(jQuery)</button>

jsはこんな感じ

/* JS */
var js_rese_btn = document.getElementById('js_reset');
js_rese_btn.addEventListener("click", function(){
  document.form1.reset()
}, false);

/* jQuery */
$('.jquery_reset').on('click', function(){
  $('form').get(0).reset();
  //document.form1.reset(); //jsだとこれ
}); 

//完全リセット
$('.jquery_reset_perfect').on('click', function(){
  $('.select_sake').find('option:selected').prop('selected', false);
  $('.input_text_name').val('');
  $('.check_sake').prop('checked', false);
});