Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
gas-kastu-2
takanakahiko
May 10, 2018
Technology
1
940
gas-kastu-2
https://gaiax.connpass.com/event/83734/
takanakahiko
May 10, 2018
Tweet
Share
More Decks by takanakahiko
See All by takanakahiko
takanakahiko
0
680
takanakahiko
1
84
takanakahiko
0
41
takanakahiko
0
140
takanakahiko
3
1.5k
takanakahiko
2
1k
takanakahiko
0
1.9k
takanakahiko
0
1k
takanakahiko
1
930
Other Decks in Technology
See All in Technology
sumi
0
440
hamadakoji
0
1.1k
yosuke_furukawa
PRO
42
14k
yukitodate
2
330
kawaguti
0
120
sasakendayo
2
410
takem001
0
890
shotakashihara
1
1.3k
neo_analytics
1
1k
smzksts
0
230
line_developers
PRO
0
2k
takuros
2
330
Featured
See All Featured
samlambert
237
9.9k
zakiwarfel
88
3.3k
schacon
145
6.6k
addyosmani
310
21k
destraynor
146
19k
jeffersonlam
328
15k
lemiorhan
626
42k
jlugia
216
16k
searls
204
35k
jensimmons
207
10k
malarkey
119
16k
malarkey
192
8.5k
Transcript
GASによる Webアプリケーション作成 Takayuki Nakayama(なかひこくん) 2018/5/10 @ Gaiax
自己紹介 2
自己紹介 - 概要 3 名前 Takayuki Nakayama (なかひこくん) ソーシャルアカウント等 •
GitHub : github.com/takanakahiko • Twitter : twitter.com/takanakahiko • Facebook : facebook.com/takanakahiko • Gmail : takanakahiko@gmail.com
自己紹介 - 大学 所属 • 拓殖大学 工学部 情報工学科 → 院進
• 水野研究室(知識処理) • ディジタルコンテンツ研究愛好会(立ち上げ→会長) 研究テーマ 「ACOを用いたクラスタリングにおけるパラメータ最適化」 4
自己紹介 - アルバイト(学部2年夏〜) 概要 • 組み込みシステム開発会社 アルバイトプログラマ 内容 5
所属 - インターンシップ(今年2月〜) 概要 • 株式会社エアークローゼット インターンシップ生 内容 6
所属 - コミュニティ(高校3年次〜) 概要 • 日本Androidの会 学生部 内容 7
自己紹介 - 技術同人誌頒布 8 サークル • 高尾技研(主宰) : https://takao-giken.github.io 頒布した同人誌
• GAS Automation Book • GASでWebAPIを作る本
自己紹介 - 書籍執筆 9 著書タイトル 「サーバーレスでお手軽自動化! Google Apps Script活用入門」(出版:インプレスR&D) https://nextpublishing.jp/book/9104.html
内容 • GASを用いたタスク自動化Tips • ノンプログラマでも対象 • 同シリーズ内でトップの売上
自己紹介 - 趣味 女児アニメ鑑賞 10
本題 11
Webアプリケーションとは 12 ウェブアプリケーション(Web application)は、インターネット(もしく はイントラネット)などのネットワークを介して使用するアプリケー ションソフトウェアである。多くの場合、これらのアプリケーション は、Webブラウザ上で動作するプログラミング言語(たとえば JavaScript)によるプログラムとWebサーバ側のプログラムが協調 することによって動作し、ユーザはそれをWebブラウザ上で使用す る。
(出典 : Wikipedia) ネットワークを介した サービス・アプリケーション
最近のWebアプリケーション • 最初に,サーバと通信するためのSPAを送信 • その後は,JSON等でやり取り 13 etc... etc...
GASによるWebアプリケーション 14 WebAPIのホスティング Webページのホスティング
WebAPIのホスティング 15
WebAPIのホスティング(1) Webページ等からアクセスが来たらJSONを返す. 16
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); }
例 - 社会性フィルターAPI(1) 文章内に良くない単語があったら「にゃーん」に置き換えるWebAPI 「大学を爆破したい」→「大学をにゃーんしたい」 18 出典:http://zenmaibane.hatenablog.com/entry/2017/05/05/190705
例 - 社会性フィルターAPI(2) 卍アーキテクチャ卍 19 「危険な語句」 「にゃーん」 ☠ 最悪な単語たち☠ 以下(酷いので)省略
例 - 社会性フィルターAPI(3) GAS側のソースコードをこうする 20 function doGet(e){ スプレッドシートの単語群を取得する処理 送られてきた文を置き換える処理 var
json = { response: 置き換えた後の分 }; var content = ContentService.createTextOutput(JSON.stringify(json)); return content.setMimeType(ContentService.MimeType.JSON); }
例 - 社会性フィルターAPI(4) https://SocialityFilter.takanakahiko.me?text=お前の家を爆発する 21 {"response":"お前の家をにゃーんする"} 詳細: https://takanakahiko.me/SocialityFilter/
Webページのホスティング 22
Webページのホスティング(1) 23 アクセスが来たらHTML等を返す.
Webページのホスティング(2) 24 アクセスが来たらHTML等を返す処理. index.htmlを用意した状態で... function doGet(e) { return HtmlService.createTemplateFromFile("index").evaluate(); }
Webページのホスティング(2) フロント側のJavaScriptからGASの関数が使える!!!! 25
Webページのホスティング(3) 26 //コード.gs function doGet(e) { //外からのアクセスに対してhtmlを返すメソッド return HtmlService.createTemplateFromFile("index").evaluate(); }
function test(){ //webページ側から呼ばれるメソッド return {‘content’:’This is test’}; } <!-- index.html --> <html> <body><span id=”hoge”></span></body> <script> google.script.run.withSuccessHandler(function(data){ document.getElementById(‘hoge’).innerHTML = data.content; }).test(); </script> </html>
例:Twitterアプリケーション(1) Reactでかっこいい感じに作りたい. 27 Twitterの認証・タイムラインの取得・ツイート
例:Twitterアプリケーション(2) それぞれが担う処理 28 • アクセスが来たらWebページ(React)を返す処理 • Twitterの認証をする処理 • TwitterのAPIを叩く処理 •
いい感じに表示する • GASの「TwitterのAPIを叩く処理」経由でツイート • GASの「TwitterのAPIを叩く処理」経由でタイムライン取得
例: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へアクセスする処理 };
例:Twitterアプリケーション(3) デモ https://script.google.com/macros/s/AKfycbzA3fiz8W2T2KHjV89XjRqA5A_GS0IXk0YG WaQz_szYCmjqnzk/exec 30
結論 31
32 つらい
宣伝 33
活動等 - イベント主宰 イベント名 • プリパラハッカソン : https://prickathon.github.io 内容 •
ファンが集まって,それに関する創作活動をする • 3回目開催決定! 34
勉強会を企画しています Q. どっちの方が興味あります? 35 GASで TwitterBotを作る GASで Webアプリを作る
End. P.S. 来年就活で困っているときは 助けてください 36