basictomonokai/slide20181010.txt

## slide20181010.txt
class: center, middle


# プログラミングが
# 苦手な方は
# .red[GAS]がおススメ

---

## 自己紹介

* @basictomonokai
.right[![おじさん](https://i.imgur.com/43yDEr8.jpg)]
* .blue[ただのおじさん]（事務職）
* .blue[ノンプログラマー]
* 趣味で.blue[HTML、JS、CSS程度]
* ホントはBASICが好き

---


## GASとは

### .red[Google Apps Script(GAS):Google提供のスクリプト環境]

1. .blue[Googleのサービスと連携できる]
1. .blue[外部API経由で連携できる（LINE,Slack等）]
1. .blue[WEBアプリケーションも作れる]
1. 日、曜日、時間、時間毎等を指定して.red[トリガー機能]で実行できる（バッチ処理）
1. 上限はあるが.red[無料] [https://docs.google.com/macros/dashboard#quota-limits](https://docs.google.com/macros/dashboard#quota-limits)
1. .red[サーバー不要]
1. 開発環境の.red[セットアップが不要]（ブラウザーのみ）
1. JSベースのスクリプト言語

---
### 参考A:GASのエディター画面

![画面](https://i.imgur.com/xaSrMSy.jpg)

---
### 参考B:GASのトリガー設定画面

![画面](https://i.imgur.com/6ASjIdB.jpg)

---

class: center, middle

## 超簡単なコードの例

---

### .murasaki[１．Googleのサービスと連携ができる]

#### .blue[・Gmail]（メール件名　１件目を取得）


```JavasSript
  var threads = GmailApp.getInboxThreads();
  Logger.log(threads[0].getFirstMessageSubject());
```

#### .blue[・Googleスプレッドシート]（セルの値を１つ取得）


```JavasSript
  var sphreadSheetId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
  var sheetName = "シート1";
  var sphreadSheet = SpreadsheetApp.openById(sphreadSheetId);
  var sheet = sphreadSheet.getSheetByName(sheetName);
  Logger.log(sheet.getRange(1,1).getValue());
```

* とても簡単

---

### .murasaki[２．外部API経由で連携できる（LINE）]

#### .blue[・LINE]（LINE Notify経由での投稿）


```JavasSript
  var AuthorizationCode ='Bearer xxxxxxxxxxxxxxxxxxxxxxx';
  var postMassage = 'LINE Notify で投稿します';
  var payload ={
    "message": postMassage
  };
  var options ={
    "method" : "post",
    "headers": {
      Authorization: AuthorizationCode,
    },
    "payload" : payload
  };
  var responseline = UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
```

* LINE Notify( https://notify-bot.line.me/ja/ )での登録は別途必要です。

---

### .murasaki[２．外部API経由で連携できる（Slack）]

#### .blue[・Slack]（Slack経由での投稿）


```JavasSript
  var token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
  var botName = "ボット君";
  var app = SlackApp.create(token);
  var message = "Slackへ投稿";
　app.postMessage("#general", message, {username: botName});
```

1. Slack App ディレクトリ( https://slack.com/apps )での登録は別途必要です。
1. GASのライブラリSlackAppを利用しています。

---

### .murasaki[３．WEBアプリケーションも作れる]

#### .blue[・サモア語翻訳]

* サモア語で翻訳したいときありますよね（強制）

![画面](https://i.imgur.com/ZF6WMyf.jpg)

1. HTMLとJSとGASのコードが必要です。
2. .red[ウェブアプリケーションの導入]という作業が公開時に必要です。

---
### .murasaki[３．WEBアプリケーションも作れる]

#### .blue[・サモア語翻訳]（HTML…atest.html）


```HTML
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
  <h1>日→サモア語</h1>
  <input id="naiyou" name="naiyou" size="50" placeholder="何か入力"><p>
  <input id="kekka" name="kekka" size="50" placeholder="結果表示エリア"><p>
  <button onclick="honget()">翻訳</button>

<?!= include('index.js'); ?>
</body>
</html>
```
* index.js(.html)読込の為のGAS固有命令がありますが他は普通

---
### .murasaki[３．WEBアプリケーションも作れる]

#### .blue[・サモア語翻訳]（JS…index.js.html）


```JavaScript
<script>
function honget() {
    var naiyou = document.getElementById('naiyou').value;
    var callback = function(result) {
       document.getElementById('kekka').value = result;
    };
    google.script.run.withSuccessHandler(callback).nanikasyori(naiyou);
}
</script>
```

1. ファイル名はGASの制約で特殊
1. google.script.runでGASの関数を呼び出し

---
### .murasaki[３．WEBアプリケーションも作れる]

#### .blue[・サモア語翻訳]（GAS…コード.gs）


```JavaScript
function doGet() {
  return HtmlService.createTemplateFromFile('atest').evaluate().setTitle('サモア語');
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function nanikasyori(naiyou) {
  var samoa = LanguageApp.translate(naiyou, 'ja', 'sm');
  var kekka = '翻訳結果は（　'+ samoa + '　）です';
  return kekka;
}
```

1. doGet…HTMLを表示
1. include…index.js.htmlを読込
1. nanikasyori…翻訳を実行（LanguageApp利用）

---
### まとめ：.red[GASはとても敷居が低い→おススメです]

* JSの.red[超基本的な知識]があれば作れる
* .red[Qiita]等に記事が多く参考に出来る（タグ：GAS,GoogleAppsScriptで.red[約１８００記事]）
* 意外と.red[参考本]も出ている

> * 詳解！ Google Apps Script完全入門
> * Google Apps Script Webアプリ開発 超入門

* .red[connpass]等でもGASの勉強会がたまにある（.red[無料とか５００円]程度）

> * はじめてのGoogle Apps Script講座
> * 第 1 回 Google Apps Script (GAS) ハンズオン @麹町
> * GAS(Google Apps Script)で作るSlack BOT

* .red[私みたいなドシロウトでもわかるし、簡単にできるので楽しい]


---
class: center, middle


# プログラミングが苦手なら.red[GAS]をどうぞ

---
class: center, middle


# - EOF -

---

### おまけ:.red[貧乏人にもGASはありがたい]

* 私が今日使ってるPCのスペックは.blue[超低い]
> CPU:atom z3736F , OS:win 8.1 , RAM/ROM:2GB,32GB
* .red[こんなショボイ２万円程度のPCでもGASはプログラミングできる]
* .red[最低限必要なのはブラウザー(Chrome)だけ]

> * GASのデバック：GASのエディターでできる
> * JSのデバック：Chromeデベロッパーツールでできる

* クラウドで実行されるので.red[ローカルのストレージを圧迫しない]
* クラウドで実行されるので.red[CPU能力もいらない]
	class: center, middle


	# プログラミングが
	# 苦手な方は
	# .red[GAS]がおススメ

	---

	## 自己紹介

	* @basictomonokai
	.right[![おじさん](https://i.imgur.com/43yDEr8.jpg)]
	* .blue[ただのおじさん]（事務職）
	* .blue[ノンプログラマー]
	* 趣味で.blue[HTML、JS、CSS程度]
	* ホントはBASICが好き

	---


	## GASとは

	### .red[Google Apps Script(GAS):Google提供のスクリプト環境]

	1. .blue[Googleのサービスと連携できる]
	1. .blue[外部API経由で連携できる（LINE,Slack等）]
	1. .blue[WEBアプリケーションも作れる]
	1. 日、曜日、時間、時間毎等を指定して.red[トリガー機能]で実行できる（バッチ処理）
	1. 上限はあるが.red[無料] [https://docs.google.com/macros/dashboard#quota-limits](https://docs.google.com/macros/dashboard#quota-limits)
	1. .red[サーバー不要]
	1. 開発環境の.red[セットアップが不要]（ブラウザーのみ）
	1. JSベースのスクリプト言語

	---
	### 参考A:GASのエディター画面

	![画面](https://i.imgur.com/xaSrMSy.jpg)

	---
	### 参考B:GASのトリガー設定画面

	![画面](https://i.imgur.com/6ASjIdB.jpg)

	---

	class: center, middle

	## 超簡単なコードの例

	---

	### .murasaki[１．Googleのサービスと連携ができる]

	#### .blue[・Gmail]（メール件名　１件目を取得）



	```JavasSript
	var threads = GmailApp.getInboxThreads();
	Logger.log(threads[0].getFirstMessageSubject());
	```

	#### .blue[・Googleスプレッドシート]（セルの値を１つ取得）



	```JavasSript
	var sphreadSheetId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
	var sheetName = "シート1";
	var sphreadSheet = SpreadsheetApp.openById(sphreadSheetId);
	var sheet = sphreadSheet.getSheetByName(sheetName);
	Logger.log(sheet.getRange(1,1).getValue());
	```

	* とても簡単

	---

	### .murasaki[２．外部API経由で連携できる（LINE）]

	#### .blue[・LINE]（LINE Notify経由での投稿）



	```JavasSript
	var AuthorizationCode ='Bearer xxxxxxxxxxxxxxxxxxxxxxx';
	var postMassage = 'LINE Notify で投稿します';
	var payload ={
	"message": postMassage
	};
	var options ={
	"method" : "post",
	"headers": {
	Authorization: AuthorizationCode,
	},
	"payload" : payload
	};
	var responseline = UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
	```

	* LINE Notify( https://notify-bot.line.me/ja/ )での登録は別途必要です。

	---

	### .murasaki[２．外部API経由で連携できる（Slack）]

	#### .blue[・Slack]（Slack経由での投稿）


	```JavasSript
	var token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
	var botName = "ボット君";
	var app = SlackApp.create(token);
	var message = "Slackへ投稿";
	app.postMessage("#general", message, {username: botName});
	```

	1. Slack App ディレクトリ( https://slack.com/apps )での登録は別途必要です。
	1. GASのライブラリSlackAppを利用しています。

	---

	### .murasaki[３．WEBアプリケーションも作れる]

	#### .blue[・サモア語翻訳]

	* サモア語で翻訳したいときありますよね（強制）

	![画面](https://i.imgur.com/ZF6WMyf.jpg)

	1. HTMLとJSとGASのコードが必要です。
	2. .red[ウェブアプリケーションの導入]という作業が公開時に必要です。

	---
	### .murasaki[３．WEBアプリケーションも作れる]

	#### .blue[・サモア語翻訳]（HTML…atest.html）


	```HTML
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body>
	<h1>日→サモア語</h1>
	<input id="naiyou" name="naiyou" size="50" placeholder="何か入力"><p>
	<input id="kekka" name="kekka" size="50" placeholder="結果表示エリア"><p>
	<button onclick="honget()">翻訳</button>

	<?!= include('index.js'); ?>
	</body>
	</html>
	```
	* index.js(.html)読込の為のGAS固有命令がありますが他は普通

	---
	### .murasaki[３．WEBアプリケーションも作れる]

	#### .blue[・サモア語翻訳]（JS…index.js.html）


	```JavaScript
	<script>
	function honget() {
	var naiyou = document.getElementById('naiyou').value;
	var callback = function(result) {
	document.getElementById('kekka').value = result;
	};
	google.script.run.withSuccessHandler(callback).nanikasyori(naiyou);
	}
	</script>
	```

	1. ファイル名はGASの制約で特殊
	1. google.script.runでGASの関数を呼び出し

	---
	### .murasaki[３．WEBアプリケーションも作れる]

	#### .blue[・サモア語翻訳]（GAS…コード.gs）


	```JavaScript
	function doGet() {
	return HtmlService.createTemplateFromFile('atest').evaluate().setTitle('サモア語');
	}
	function include(filename) {
	return HtmlService.createHtmlOutputFromFile(filename).getContent();
	}
	function nanikasyori(naiyou) {
	var samoa = LanguageApp.translate(naiyou, 'ja', 'sm');
	var kekka = '翻訳結果は（　'+ samoa + '　）です';
	return kekka;
	}
	```

	1. doGet…HTMLを表示
	1. include…index.js.htmlを読込
	1. nanikasyori…翻訳を実行（LanguageApp利用）

	---
	### まとめ：.red[GASはとても敷居が低い→おススメです]

	* JSの.red[超基本的な知識]があれば作れる
	* .red[Qiita]等に記事が多く参考に出来る（タグ：GAS,GoogleAppsScriptで.red[約１８００記事]）
	* 意外と.red[参考本]も出ている

	> * 詳解！ Google Apps Script完全入門
	> * Google Apps Script Webアプリ開発超入門

	* .red[connpass]等でもGASの勉強会がたまにある（.red[無料とか５００円]程度）

	> * はじめてのGoogle Apps Script講座
	> * 第 1 回 Google Apps Script (GAS) ハンズオン @麹町
	> * GAS(Google Apps Script)で作るSlack BOT

	* .red[私みたいなドシロウトでもわかるし、簡単にできるので楽しい]


	---
	class: center, middle


	# プログラミングが苦手なら.red[GAS]をどうぞ

	---
	class: center, middle


	# - EOF -

	---

	### おまけ:.red[貧乏人にもGASはありがたい]

	* 私が今日使ってるPCのスペックは.blue[超低い]
	> CPU:atom z3736F , OS:win 8.1 , RAM/ROM:2GB,32GB
	* .red[こんなショボイ２万円程度のPCでもGASはプログラミングできる]
	* .red[最低限必要なのはブラウザー(Chrome)だけ]

	> * GASのデバック：GASのエディターでできる
	> * JSのデバック：Chromeデベロッパーツールでできる

	* クラウドで実行されるので.red[ローカルのストレージを圧迫しない]
	* クラウドで実行されるので.red[CPU能力もいらない]