gas-kastu-2

 gas-kastu-2

0479057e04d0dbef40692b5f171f60e4?s=128

takanakahiko

May 10, 2018
Tweet

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 内容 •

    ファンが集まって,それに関する創作活動をする • 3回目開催決定! 34
  35.  勉強会を企画しています Q. どっちの方が興味あります? 35 GASで TwitterBotを作る GASで Webアプリを作る

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