gas-kastu-2

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 : [email protected]

　自己紹介 - 大学所属 • 拓殖大学工学部情報工学科 → 院進
• 水野研究室(知識処理) • ディジタルコンテンツ研究愛好会(立ち上げ→会長) 研究テーマ「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’}; }  <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 内容 •
ファンが集まって，それに関する創作活動をする • ３回目開催決定！ 34

　勉強会を企画しています Q. どっちの方が興味あります？ 35 GASで TwitterBotを作る GASで Webアプリを作る

End. P.S. 来年就活で困っているときは助けてください 36

gas-kastu-2

gas-kastu-2

More Decks by takanakahiko

Other Decks in Technology

Featured

Transcript