gas-kastu-2

https://gaiax.connpass.com/event/83734/

Transcript

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