gas-kastu-2

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

Transcript

1. GASによる
   Webアプリケーション作成
   Takayuki Nakayama(なかひこくん)
   2018/5/10 @ Gaiax
   

   View Slide

2. 自己紹介
   2
   

   View Slide

3. 　自己紹介 - 概要 3
   名前
   　Takayuki Nakayama (なかひこくん)
   ソーシャルアカウント等
   ● GitHub : github.com/takanakahiko
   ● Twitter : twitter.com/takanakahiko
   ● Facebook : facebook.com/takanakahiko
   ● Gmail : takanakahiko@gmail.com
   

   View Slide

4. 　自己紹介 - 大学
   所属
   ● 拓殖大学 工学部 情報工学科 → 院進
   ● 水野研究室(知識処理)
   ● ディジタルコンテンツ研究愛好会(立ち上げ→会長)
   研究テーマ
   「ACOを用いたクラスタリングにおけるパラメータ最適化」
   4
   

   View Slide

5. 　自己紹介 - アルバイト(学部2年夏〜)
   概要
   ● 組み込みシステム開発会社 アルバイトプログラマ
   内容
   5
   

   View Slide

6. 　所属 - インターンシップ(今年2月〜)
   概要
   ● 株式会社エアークローゼット インターンシップ生
   内容
   6
   

   View Slide

7. 　所属 - コミュニティ(高校3年次〜)
   概要
   ● 日本Androidの会 学生部
   内容
   7
   

   View Slide

8. 　自己紹介 - 技術同人誌頒布 8
   サークル
   ● 高尾技研(主宰) : https://takao-giken.github.io
   頒布した同人誌
   ● GAS Automation Book
   ● GASでWebAPIを作る本
   

   View Slide

9. 　自己紹介 - 書籍執筆 9
   著書タイトル
   「サーバーレスでお手軽自動化!
   Google Apps Script活用入門」(出版:インプレスR&D)
   https://nextpublishing.jp/book/9104.html
   内容
   ● GASを用いたタスク自動化Tips
   ● ノンプログラマでも対象
   ● 同シリーズ内でトップの売上
   

   View Slide

10. 　自己紹介 - 趣味
    女児アニメ鑑賞
    10
    

    View Slide

11. 本題
    11
    

    View Slide

12. 　Webアプリケーションとは　 12
    ウェブアプリケーション（Web application）は、インターネット（もしく
    はイントラネット）などのネットワークを介して使用するアプリケー
    ションソフトウェアである。多くの場合、これらのアプリケーション
    は、Webブラウザ上で動作するプログラミング言語（たとえば
    JavaScript）によるプログラムとWebサーバ側のプログラムが協調
    することによって動作し、ユーザはそれをWebブラウザ上で使用す
    る。
    (出典 : Wikipedia)
    ネットワークを介した
    サービス・アプリケーション
    

    View Slide

13. 　最近のWebアプリケーション
    ● 最初に，サーバと通信するためのSPAを送信
    ● その後は，JSON等でやり取り
    13
    etc...
    etc...
    

    View Slide

14. 　GASによるWebアプリケーション 14
    WebAPIのホスティング Webページのホスティング
    

    View Slide

15. WebAPIのホスティング
    15
    

    View Slide

16. 　WebAPIのホスティング(1)
    Webページ等からアクセスが来たらJSONを返す．
    16
    

    View Slide

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);
    }
    

    View Slide

18. 　例 - 社会性フィルターAPI(1)
    文章内に良くない単語があったら「にゃーん」に置き換えるWebAPI
    「大学を爆破したい」→「大学をにゃーんしたい」
    18
    出典：http://zenmaibane.hatenablog.com/entry/2017/05/05/190705
    

    View Slide

19. 　例 - 社会性フィルターAPI(2)
    卍アーキテクチャ卍
    19
    「危険な語句」 「にゃーん」
    ☠ 最悪な単語たち☠
    以下(酷いので)省略
    

    View Slide

20. 　例 - 社会性フィルターAPI(3)
    GAS側のソースコードをこうする
    20
    function doGet(e){
    スプレッドシートの単語群を取得する処理
    送られてきた文を置き換える処理
    var json = { response: 置き換えた後の分 };
    var content = ContentService.createTextOutput(JSON.stringify(json));
    return content.setMimeType(ContentService.MimeType.JSON);
    }
    

    View Slide

21. 　例 - 社会性フィルターAPI(4)
    https://SocialityFilter.takanakahiko.me?text=お前の家を爆発する
    21
    {"response":"お前の家をにゃーんする"}
    詳細: https://takanakahiko.me/SocialityFilter/
    

    View Slide

22. Webページのホスティング
    22
    

    View Slide

23. 　Webページのホスティング(1) 23
    アクセスが来たらHTML等を返す．
    

    View Slide

24. 　Webページのホスティング(2) 24
    アクセスが来たらHTML等を返す処理．
    index.htmlを用意した状態で...
    function doGet(e) {
    return HtmlService.createTemplateFromFile("index").evaluate();
    }
    

    View Slide

25. 　Webページのホスティング(2)
    フロント側のJavaScriptからGASの関数が使える！！！！
    25
    

    View Slide

26. 　Webページのホスティング(3) 26
    //コード.gs
    function doGet(e) { //外からのアクセスに対してhtmlを返すメソッド
    return HtmlService.createTemplateFromFile("index").evaluate();
    }
    function test(){ //webページ側から呼ばれるメソッド
    return {‘content’:’This is test’};
    }
    
    
    
    <br/>google.script.run.withSuccessHandler(function(data){<br/>document.getElementById(‘hoge’).innerHTML = data.content;<br/>}).test();<br/>
    
    

    View Slide

27. 　例:Twitterアプリケーション(1)
    Reactでかっこいい感じに作りたい．
    27
    Twitterの認証・タイムラインの取得・ツイート
    

    View Slide

28. 　例:Twitterアプリケーション(2)
    それぞれが担う処理
    28
    ● アクセスが来たらWebページ(React)を返す処理
    ● Twitterの認証をする処理
    ● TwitterのAPIを叩く処理
    ● いい感じに表示する
    ● GASの「TwitterのAPIを叩く処理」経由でツイート
    ● GASの「TwitterのAPIを叩く処理」経由でタイムライン取得
    

    View Slide

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へアクセスする処理
    };
    

    View Slide

30. 　例:Twitterアプリケーション(3)
    デモ
    https://script.google.com/macros/s/AKfycbzA3fiz8W2T2KHjV89XjRqA5A_GS0IXk0YG
    WaQz_szYCmjqnzk/exec
    30
    

    View Slide

31. 結論
    31
    

    View Slide

32. 32
    つらい
    

    View Slide

33. 宣伝
    33
    

    View Slide

34. 　活動等 - イベント主宰
    イベント名
    ● プリパラハッカソン : https://prickathon.github.io
    内容
    ● ファンが集まって，それに関する創作活動をする
    ● ３回目開催決定！
    34
    

    View Slide

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

    View Slide

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

    View Slide