Slide 1
Slide 1 text
GASによる
Webアプリケーション作成
Takayuki Nakayama(なかひこくん)
2018/5/10 @ Gaiax
Slide 2
Slide 2 text
自己紹介
2
Slide 3
Slide 3 text
自己紹介 - 概要 3
名前
Takayuki Nakayama (なかひこくん)
ソーシャルアカウント等
● GitHub : github.com/takanakahiko
● Twitter : twitter.com/takanakahiko
● Facebook : facebook.com/takanakahiko
● Gmail : [email protected]
Slide 4
Slide 4 text
自己紹介 - 大学
所属
● 拓殖大学 工学部 情報工学科 → 院進
● 水野研究室(知識処理)
● ディジタルコンテンツ研究愛好会(立ち上げ→会長)
研究テーマ
「ACOを用いたクラスタリングにおけるパラメータ最適化」
4
Slide 5
Slide 5 text
自己紹介 - アルバイト(学部2年夏〜)
概要
● 組み込みシステム開発会社 アルバイトプログラマ
内容
5
Slide 6
Slide 6 text
所属 - インターンシップ(今年2月〜)
概要
● 株式会社エアークローゼット インターンシップ生
内容
6
Slide 7
Slide 7 text
所属 - コミュニティ(高校3年次〜)
概要
● 日本Androidの会 学生部
内容
7
Slide 8
Slide 8 text
自己紹介 - 技術同人誌頒布 8
サークル
● 高尾技研(主宰) : https://takao-giken.github.io
頒布した同人誌
● GAS Automation Book
● GASでWebAPIを作る本
Slide 9
Slide 9 text
自己紹介 - 書籍執筆 9
著書タイトル
「サーバーレスでお手軽自動化!
Google Apps Script活用入門」(出版:インプレスR&D)
https://nextpublishing.jp/book/9104.html
内容
● GASを用いたタスク自動化Tips
● ノンプログラマでも対象
● 同シリーズ内でトップの売上
Slide 10
Slide 10 text
自己紹介 - 趣味
女児アニメ鑑賞
10
Slide 11
Slide 11 text
本題
11
Slide 12
Slide 12 text
Webアプリケーションとは 12
ウェブアプリケーション（Web application）は、インターネット（もしく
はイントラネット）などのネットワークを介して使用するアプリケー
ションソフトウェアである。多くの場合、これらのアプリケーション
は、Webブラウザ上で動作するプログラミング言語（たとえば
JavaScript）によるプログラムとWebサーバ側のプログラムが協調
することによって動作し、ユーザはそれをWebブラウザ上で使用す
る。
(出典 : Wikipedia)
ネットワークを介した
サービス・アプリケーション
Slide 13
Slide 13 text
最近のWebアプリケーション
● 最初に，サーバと通信するためのSPAを送信
● その後は，JSON等でやり取り
13
etc...
etc...
Slide 14
Slide 14 text
GASによるWebアプリケーション 14
WebAPIのホスティング Webページのホスティング
Slide 15
Slide 15 text
WebAPIのホスティング
15
Slide 16
Slide 16 text
WebAPIのホスティング(1)
Webページ等からアクセスが来たらJSONを返す．
16
Slide 17
Slide 17 text
WebAPIのホスティング(2)
Webページ等からアクセスが来たらJSONを返す処理．
詳しく(設定等)は
https://qiita.com/takanakahiko/items/e8123ee6b565c6ee8d8e
17
function doGet(e){
var json = { hoge:"huga" };
var content = ContentService.createTextOutput(JSON.stringify(json));
return content.setMimeType(ContentService.MimeType.JSON);
}
Slide 18
Slide 18 text
例 - 社会性フィルターAPI(1)
文章内に良くない単語があったら「にゃーん」に置き換えるWebAPI
「大学を爆破したい」→「大学をにゃーんしたい」
18
出典：http://zenmaibane.hatenablog.com/entry/2017/05/05/190705
Slide 19
Slide 19 text
例 - 社会性フィルターAPI(2)
卍アーキテクチャ卍
19
「危険な語句」 「にゃーん」
☠ 最悪な単語たち☠
以下(酷いので)省略
Slide 20
Slide 20 text
例 - 社会性フィルターAPI(3)
GAS側のソースコードをこうする
20
function doGet(e){
スプレッドシートの単語群を取得する処理
送られてきた文を置き換える処理
var json = { response: 置き換えた後の分 };
var content = ContentService.createTextOutput(JSON.stringify(json));
return content.setMimeType(ContentService.MimeType.JSON);
}
Slide 21
Slide 21 text
例 - 社会性フィルターAPI(4)
https://SocialityFilter.takanakahiko.me?text=お前の家を爆発する
21
{"response":"お前の家をにゃーんする"}
詳細: https://takanakahiko.me/SocialityFilter/
Slide 22
Slide 22 text
Webページのホスティング
22
Slide 23
Slide 23 text
Webページのホスティング(1) 23
アクセスが来たらHTML等を返す．
Slide 24
Slide 24 text
Webページのホスティング(2) 24
アクセスが来たらHTML等を返す処理．
index.htmlを用意した状態で...
function doGet(e) {
return HtmlService.createTemplateFromFile("index").evaluate();
}
Slide 25
Slide 25 text
Webページのホスティング(2)
フロント側のJavaScriptからGASの関数が使える！！！！
25
Slide 26
Slide 26 text
Webページのホスティング(3) 26
//コード.gs
function doGet(e) { //外からのアクセスに対してhtmlを返すメソッド
return HtmlService.createTemplateFromFile("index").evaluate();
}
function test(){ //webページ側から呼ばれるメソッド
return {‘content’:’This is test’};
}
google.script.run.withSuccessHandler(function(data){
document.getElementById(‘hoge’).innerHTML = data.content;
}).test();
Slide 27
Slide 27 text
例:Twitterアプリケーション(1)
Reactでかっこいい感じに作りたい．
27
Twitterの認証・タイムラインの取得・ツイート
Slide 28
Slide 28 text
例:Twitterアプリケーション(2)
それぞれが担う処理
28
● アクセスが来たらWebページ(React)を返す処理
● Twitterの認証をする処理
● TwitterのAPIを叩く処理
● いい感じに表示する
● GASの「TwitterのAPIを叩く処理」経由でツイート
● GASの「TwitterのAPIを叩く処理」経由でタイムライン取得
Slide 29
Slide 29 text
例:Twitterアプリケーション(3) 29
//タイムラインを取得する処理
var thiz = this;
gasHandler.withSuccessHandler(function(data){
thiz.setState({tweets : data});
}).getAccessTwitter('statuses/home_timeline', {trim_user:false, count:30});
function getAccessTwitter(endPoint, payload){
//TwitterのAPIへアクセスする処理
};
Slide 30
Slide 30 text
例:Twitterアプリケーション(3)
デモ
https://script.google.com/macros/s/AKfycbzA3fiz8W2T2KHjV89XjRqA5A_GS0IXk0YG
WaQz_szYCmjqnzk/exec
30
Slide 31
Slide 31 text
結論
31
Slide 32
Slide 32 text
32
つらい
Slide 33
Slide 33 text
宣伝
33
Slide 34
Slide 34 text
活動等 - イベント主宰
イベント名
● プリパラハッカソン : https://prickathon.github.io
内容
● ファンが集まって，それに関する創作活動をする
● ３回目開催決定！
34
Slide 35
Slide 35 text
勉強会を企画しています
Q. どっちの方が興味あります？
35
GASで
TwitterBotを作る
GASで
Webアプリを作る
Slide 36
Slide 36 text
End.
P.S.
来年就活で困っているときは
助けてください
36