Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WEBアプリを作らない選択肢

72 views

Published on

2018-11-24 Frontend Conference 資料

Published in: Engineering
  • Be the first to comment

WEBアプリを作らない選択肢

  1. 1. 1 Webアプリ を作らない 選択肢 初心者向けGAS講座 Frontend Conference 2018
  2. 2. My Profile Name: Wakai Shinichiro Age: 25 Corp: Hamaya Position: Manager Community: KFUG, MKU30 History: Grand Frontend Osaka 2016(2Days) 2
  3. 3. はじめに ・Webアプリを作らないというわけではなく、 一から作る必要が無いのではないかという話です。 ・主にGAS(Google Apps Script)と Google スプレッドシートの内容となります ・WEB初心者向けの内容となっております ・知識を使ってもらうまでをゴールとしています 3
  4. 4. 人生には様々な選択肢が存在します 4
  5. 5. 外に出掛ける 5外に出掛けない
  6. 6. 外に出掛ける 6外に出掛けない
  7. 7. 勉強会に参加する 7勉強会に参加しない
  8. 8. 勉強会に参加する 8勉強会に参加しない
  9. 9. Webアプリを作る 9Webアプリを作らない
  10. 10. Webアプリを作る 10Webアプリを作らない
  11. 11. Webアプリを作る 11Webアプリを作らない
  12. 12. Webアプリを作る 12Webアプリを作らない Webアプリを1から作らない
  13. 13. Webアプリを作る 13Webアプリを作らない Webアプリを1から作らない
  14. 14. 1.1からのWebアプリは時間がかかる 2.Google Apps Script ができること 3.事例紹介 4.使う上での注意点 5.まとめ 14
  15. 15. 1.1からのWebアプリは時間がかかる 2.Google Apps Script ができること 3.事例紹介 4.使う上での注意点 5.まとめ 15
  16. 16. 1. 1からのWebアプリは 時間がかかる
  17. 17. 1からのWebアプリ開発を 想像してみてください 17
  18. 18. サーバー 18 技術選定 実行環境 エディタ バックエンド 言語知識
  19. 19. 考えるだけでも発狂しそうです 19
  20. 20. 20 それGAS(Google Apps Script) なら解決できるよ
  21. 21. ブラウザで扱える無 料エディタ サーバー 21 技術選定 実行環境 エディタ バックエンド 言語知識 Googleサーバー GASパッケージ JavaScriptベース の開発言語 ブラウザ
  22. 22. GAS(Google Apps Script)って何? 22 ・Googleが提供しているJavaScriptをベースにしたプログラミング言語 ・Googleのサーバー上に実行環境がある ・Googleが提供しているサービスと自由に連携 → 今回は「Google スプレッドシート」を紹介 ・ブラウザ上で動く、開発用エディタが用意されている ・無料でGoogleアカウントさえあれば、どなたでも使用可能 ・「Standalone」と「Container Bound」の2種類が存在 → 今回は「Container Bound」を紹介 ・ストレスがなく、誰でも簡単に扱えます
  23. 23. 実際に立ち上げるまでを 見ていきましょう 23
  24. 24. DEMO 24
  25. 25. 1.1からのWebアプリは時間がかかる 2.Google Apps Script ができること 3.事例紹介 4.使う上での注意点 5.まとめ 25
  26. 26. 2. Google Apps Scriptが できること 26
  27. 27. GASができることは多岐にわたりますが、 特に大事なことをお伝えします 27
  28. 28. Google スプレッドシートとの連携 データ操作 トリガー Webアプリ開発 28
  29. 29. スプレッドシートとの連携 29 ・シート情報の取得 ・セルからデータを取得、貼り付け ・独自関数の定義
  30. 30. データ操作 30 ・Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)が可能 → APIが扱える ・スクレイピングができる ・画像のバイナリも扱える
  31. 31. トリガー 31 ・バッチ処理のようなことがGUI上で可能 ・時間やタイミングで設定が可能 ・バックグラウンドで動いてくれるので開いておく必要がない
  32. 32. Webアプリ開発 32 ・バージョンを指定して、簡単に公開できる ・Googleツールとのつなぎこみも簡単
  33. 33. DEMO 33
  34. 34. 1.1からのWebアプリは時間がかかる 2.Google Apps Script ができること 3.事例紹介 4.使う上での注意点 5.まとめ 34
  35. 35. 35 3. 事例紹介
  36. 36. 楽天 ランキング調査システム 楽天 商品管理システム 36
  37. 37. 37 楽天 ランキング調査システム ・楽天に商品をアップして、取扱している ・楽天SEOにおける順位変動をウォッチしたかった ・今までデータがとれておらず、Webアプリを作るま でもなかった
  38. 38. 38 仕組み 1日1回 楽天API 叩くスプレッドシートに 書き込み CSV吐き出し
  39. 39. 39 楽天 商品管理システム ・商品の管理ができていなかった ・手動による商品アップを行っていた ・画像アップも手動で行っていた
  40. 40. 40 仕組み 商品マスタを更新 商品情報を 追加・更新 WEBアプリ R-Cabinet 商品マスタ 画像を アップロード
  41. 41. 1.1からのWebアプリは時間がかかる 2.Google Apps Script ができること 3.事例紹介 4.使う上での注意点 5.まとめ 41
  42. 42. 42 4. 使う上での 注意点
  43. 43. GASには処理時間制限がある GASにはトリガーの制限がある 43
  44. 44. 例えば、データをAPIで取得し、 スプレッドシートに1行ずつ追記していく処 理の場合 44
  45. 45. 45 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA キーワードB キーワードC キーワードD キーワードE
  46. 46. 46 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA キーワードB キーワードC キーワードD キーワードE GASを実行!!!
  47. 47. 47 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA キーワードB キーワードC キーワードD キーワードE 処理!
  48. 48. 48 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB キーワードC キーワードD キーワードE
  49. 49. 49 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB キーワードC キーワードD キーワードE 処理!
  50. 50. 50 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC キーワードD キーワードE
  51. 51. 51 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC キーワードD キーワードE 処理!
  52. 52. 52 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC 商品1 商品2 商品3 商品4 商品5 キーワードD キーワードE
  53. 53. 53 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC 商品1 商品2 商品3 商品4 商品5 キーワードD キーワードE あれ。。。動かない。。。
  54. 54. 54 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC 商品1 商品2 商品3 商品4 商品5 キーワードD キーワードE GASには処理時間制限がある
  55. 55. 55 GASには処理時間制限がある ・処理時間制限はなんと「6分」超えると処理がとま る
  56. 56. 56 対策 GASで処理 ↓ GASでトリガーを使って処理
  57. 57. 57 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA キーワードB キーワードC キーワードD キーワードE GASを実行!!!
  58. 58. 58 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA キーワードB キーワードC キーワードD キーワードE 処理!
  59. 59. 59 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB キーワードC キーワードD キーワードE
  60. 60. 60 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB キーワードC キーワードD キーワードE 処理!
  61. 61. 61 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC キーワードD キーワードE
  62. 62. 62 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC キーワードD キーワードE 処理!
  63. 63. 63 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC 商品1 商品2 商品3 商品4 商品5 キーワードD キーワードE
  64. 64. 64 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC 商品1 商品2 商品3 商品4 商品5 キーワードD キーワードE トリガー設置! i = 4 を記憶!
  65. 65. 65 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC 商品1 商品2 商品3 商品4 商品5 キーワードD キーワードE トリガー実行!
  66. 66. 66 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC 商品1 商品2 商品3 商品4 商品5 キーワードD キーワードE 処理!
  67. 67. 67 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC 商品1 商品2 商品3 商品4 商品5 キーワードD 商品1 商品2 商品3 商品4 商品5 キーワードE
  68. 68. 68 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC 商品1 商品2 商品3 商品4 商品5 キーワードD 商品1 商品2 商品3 商品4 商品5 キーワードE 処理!
  69. 69. 69 キーワード店舗名 店舗A 店舗B 店舗C 店舗D 店舗E キーワードA 商品1 商品2 商品3 商品4 商品5 キーワードB 商品1 商品2 商品3 商品4 商品5 キーワードC 商品1 商品2 商品3 商品4 商品5 キーワードD 商品1 商品2 商品3 商品4 商品5 キーワードE 商品1 商品2 商品3 商品4 商品5
  70. 70. 70 キーワードR 商品1 商品2 商品3 商品4 商品5 キーワードS 商品1 商品2 商品3 商品4 商品5 キーワードT キーワードU キーワードV キーワードw キーワードX キーワードY キーワードZ
  71. 71. 71 キーワードR 商品1 商品2 商品3 商品4 商品5 キーワードS 商品1 商品2 商品3 商品4 商品5 キーワードT キーワードU キーワードV キーワードw キーワードX キーワードY キーワードZ 処理!
  72. 72. 72 キーワードR 商品1 商品2 商品3 商品4 商品5 キーワードS 商品1 商品2 商品3 商品4 商品5 キーワードT 商品1 商品2 商品3 商品4 商品5 キーワードU キーワードV キーワードw キーワードX キーワードY キーワードZ
  73. 73. 73 キーワードR 商品1 商品2 商品3 商品4 商品5 キーワードS 商品1 商品2 商品3 商品4 商品5 キーワードT 商品1 商品2 商品3 商品4 商品5 キーワードU キーワードV キーワードw キーワードX キーワードY キーワードZ 処理!
  74. 74. 74 キーワードR 商品1 商品2 商品3 商品4 商品5 キーワードS 商品1 商品2 商品3 商品4 商品5 キーワードT 商品1 商品2 商品3 商品4 商品5 キーワードU 商品1 商品2 商品3 商品4 商品5 キーワードV キーワードw キーワードX キーワードY キーワードZ
  75. 75. 75 キーワードR 商品1 商品2 商品3 商品4 商品5 キーワードS 商品1 商品2 商品3 商品4 商品5 キーワードT 商品1 商品2 商品3 商品4 商品5 キーワードU 商品1 商品2 商品3 商品4 商品5 キーワードV キーワードw キーワードX キーワードY キーワードZ あれ。。。動かない。。。
  76. 76. 76 キーワードR 商品1 商品2 商品3 商品4 商品5 キーワードS 商品1 商品2 商品3 商品4 商品5 キーワードT 商品1 商品2 商品3 商品4 商品5 キーワードU 商品1 商品2 商品3 商品4 商品5 キーワードV キーワードw キーワードX キーワードY キーワードZ GASのトリガーには制限がある
  77. 77. 77 GASのトリガーには制限がある ・1日のトリガー合計実行時間は「6時間」(無料アカ ウントは「90分」) ・処理を軽くするか、切り分けるか
  78. 78. 1.1からのWebアプリは時間がかかる 2.Google Apps Script ができること 3.事例紹介 4.使う上での注意点 5.まとめ 78
  79. 79. 79 5. まとめ
  80. 80. ・初心者にも簡単に扱えるので使ってみよう ・環境構築工数や保守工数が削減できます ・重い処理の場合はハマることがあるので気をつけ て 80
  81. 81. 81 clasp pushclasp pull
  82. 82. “GASのある素晴らしい生活を。 82
  83. 83. 83 ご清聴 ありがとうございました

×