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

Contenu connexe

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

月間10,000PVのブログになるまでに学んだSEO
月間10,000PVのブログになるまでに学んだSEO月間10,000PVのブログになるまでに学んだSEO
月間10,000PVのブログになるまでに学んだSEONanae Hibino
 
オープンセミナー2016@広島プレゼン資料
オープンセミナー2016@広島プレゼン資料オープンセミナー2016@広島プレゼン資料
オープンセミナー2016@広島プレゼン資料Kakigi Katuyuki
 
0からのWebディレクション講座 制作編 170218 slide_share
0からのWebディレクション講座 制作編 170218 slide_share0からのWebディレクション講座 制作編 170218 slide_share
0からのWebディレクション講座 制作編 170218 slide_shareKazuki Iwai
 
【JaSST'18 Tokai】アジャイルとテスト自動化導入の勘所
【JaSST'18 Tokai】アジャイルとテスト自動化導入の勘所【JaSST'18 Tokai】アジャイルとテスト自動化導入の勘所
【JaSST'18 Tokai】アジャイルとテスト自動化導入の勘所Kotaro Ogino
 
DDDのすすめ
DDDのすすめDDDのすすめ
DDDのすすめRyo Amano
 
Adtec 111028_Suwa
Adtec 111028_SuwaAdtec 111028_Suwa
Adtec 111028_Suwasuwaws
 
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグインテーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグインkenji goto
 
Wishpond 取締役が語る!グローバルキャリア、チャンスの掴み方 〜 新卒の僕がカナダIT企業のCOOになったワケ 先生:赤津慧先生
Wishpond 取締役が語る!グローバルキャリア、チャンスの掴み方 〜 新卒の僕がカナダIT企業のCOOになったワケ 先生:赤津慧先生Wishpond 取締役が語る!グローバルキャリア、チャンスの掴み方 〜 新卒の僕がカナダIT企業のCOOになったワケ 先生:赤津慧先生
Wishpond 取締役が語る!グローバルキャリア、チャンスの掴み方 〜 新卒の僕がカナダIT企業のCOOになったワケ 先生:赤津慧先生schoowebcampus
 
ペアプロはリモートでもできる!
ペアプロはリモートでもできる!ペアプロはリモートでもできる!
ペアプロはリモートでもできる!Tatsuya Deguchi
 
リーンスタートアップ、アジャイル開発導入事例
リーンスタートアップ、アジャイル開発導入事例リーンスタートアップ、アジャイル開発導入事例
リーンスタートアップ、アジャイル開発導入事例Arata Fujimura
 
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいことKatz Ueno
 
IT技術者でも1から学べるビジネスモデルキャンバス入門
IT技術者でも1から学べるビジネスモデルキャンバス入門IT技術者でも1から学べるビジネスモデルキャンバス入門
IT技術者でも1から学べるビジネスモデルキャンバス入門陽一 滝川
 
「PdMと考えるQAとプロダクトマネジメント」
「PdMと考えるQAとプロダクトマネジメント」「PdMと考えるQAとプロダクトマネジメント」
「PdMと考えるQAとプロダクトマネジメント」大貴 蜂須賀
 
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島Fuminori Mori
 
Jag神戸3(共有用)
Jag神戸3(共有用)Jag神戸3(共有用)
Jag神戸3(共有用)takagig
 
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?Yasuhiko Yamamoto
 
イノベーションスプリント2011 infragisticsにおける世界分散アジャイル開発事例~ communication matters ~
イノベーションスプリント2011 infragisticsにおける世界分散アジャイル開発事例~ communication matters ~イノベーションスプリント2011 infragisticsにおける世界分散アジャイル開発事例~ communication matters ~
イノベーションスプリント2011 infragisticsにおける世界分散アジャイル開発事例~ communication matters ~InnovationSprint2011
 

Similaire à WEBアプリを作らない選択肢 (20)

月間10,000PVのブログになるまでに学んだSEO
月間10,000PVのブログになるまでに学んだSEO月間10,000PVのブログになるまでに学んだSEO
月間10,000PVのブログになるまでに学んだSEO
 
Yahoo!ニュースにおける開発手法の取り組み
Yahoo!ニュースにおける開発手法の取り組みYahoo!ニュースにおける開発手法の取り組み
Yahoo!ニュースにおける開発手法の取り組み
 
オープンセミナー2016@広島プレゼン資料
オープンセミナー2016@広島プレゼン資料オープンセミナー2016@広島プレゼン資料
オープンセミナー2016@広島プレゼン資料
 
0からのWebディレクション講座 制作編 170218 slide_share
0からのWebディレクション講座 制作編 170218 slide_share0からのWebディレクション講座 制作編 170218 slide_share
0からのWebディレクション講座 制作編 170218 slide_share
 
【JaSST'18 Tokai】アジャイルとテスト自動化導入の勘所
【JaSST'18 Tokai】アジャイルとテスト自動化導入の勘所【JaSST'18 Tokai】アジャイルとテスト自動化導入の勘所
【JaSST'18 Tokai】アジャイルとテスト自動化導入の勘所
 
DDDのすすめ
DDDのすすめDDDのすすめ
DDDのすすめ
 
Seminar20191206
Seminar20191206Seminar20191206
Seminar20191206
 
発見から納品へ
発見から納品へ発見から納品へ
発見から納品へ
 
Adtec 111028_Suwa
Adtec 111028_SuwaAdtec 111028_Suwa
Adtec 111028_Suwa
 
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグインテーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
 
Wishpond 取締役が語る!グローバルキャリア、チャンスの掴み方 〜 新卒の僕がカナダIT企業のCOOになったワケ 先生:赤津慧先生
Wishpond 取締役が語る!グローバルキャリア、チャンスの掴み方 〜 新卒の僕がカナダIT企業のCOOになったワケ 先生:赤津慧先生Wishpond 取締役が語る!グローバルキャリア、チャンスの掴み方 〜 新卒の僕がカナダIT企業のCOOになったワケ 先生:赤津慧先生
Wishpond 取締役が語る!グローバルキャリア、チャンスの掴み方 〜 新卒の僕がカナダIT企業のCOOになったワケ 先生:赤津慧先生
 
ペアプロはリモートでもできる!
ペアプロはリモートでもできる!ペアプロはリモートでもできる!
ペアプロはリモートでもできる!
 
リーンスタートアップ、アジャイル開発導入事例
リーンスタートアップ、アジャイル開発導入事例リーンスタートアップ、アジャイル開発導入事例
リーンスタートアップ、アジャイル開発導入事例
 
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
 
IT技術者でも1から学べるビジネスモデルキャンバス入門
IT技術者でも1から学べるビジネスモデルキャンバス入門IT技術者でも1から学べるビジネスモデルキャンバス入門
IT技術者でも1から学べるビジネスモデルキャンバス入門
 
「PdMと考えるQAとプロダクトマネジメント」
「PdMと考えるQAとプロダクトマネジメント」「PdMと考えるQAとプロダクトマネジメント」
「PdMと考えるQAとプロダクトマネジメント」
 
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
 
Jag神戸3(共有用)
Jag神戸3(共有用)Jag神戸3(共有用)
Jag神戸3(共有用)
 
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
 
イノベーションスプリント2011 infragisticsにおける世界分散アジャイル開発事例~ communication matters ~
イノベーションスプリント2011 infragisticsにおける世界分散アジャイル開発事例~ communication matters ~イノベーションスプリント2011 infragisticsにおける世界分散アジャイル開発事例~ communication matters ~
イノベーションスプリント2011 infragisticsにおける世界分散アジャイル開発事例~ communication matters ~
 

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