国内最大級の規模を誇るAndroidの19回目の祭典 「Android Bazaar and Conference 2019 Spring (ABC2019Spring)」 https://abc.android-group.jp/2019s/ 「5分で作れる！Glideappsではじめる超簡単PWA」セッションで利用する予定のデモ動画です。

1. 5分で作れる！
Glideappsではじめる超簡単PWA
本日の資料はこちら
時間の関係で駆け足の内容です
「Glide簡単」だけ覚えて行ってください
ハッシュタグは #glideapps

2. PWA Nightさんと
ネタかぶりしてしまったので
本日はネタを調整して
お届けしますw

3. 5分で作れる！
Glideappsではじめる
超簡単PWA
kinneko@gmal.com
2019/05/26@ABC2019Spring

4. @kinneko
kinneko@gmail.com
JAG金沢支部長
(最近何もしてないw)
薄い本とか書いてます
「kinnekoの薄い本屋」
https://kinneko.booth.pm/

5. Glideの紹介

6. ぜひ一度使ってみて
特徴：簡単すぎる!

7. Glide ３分クッキング〜！
1. Googleスプレッドシートにデータを用意する
2. glideappsにGoogleアカウント認可で接続
3. Newをクリックしてスプレッドシートを指定
4. 必要に応じてカスタマイズする
5. 出来上がり

8. Glide 5分クッキング〜！
https://youtu.be/vbyd_pEMzJ0
時間の関係で動画デモになります

9. Glide ５分クッキング〜！
１. Googleスプレッドシートにデータを用意する

10. Glide ５分クッキング〜！
１. Googleスプレッドシートにデータを用意する

11. Glide ５分クッキング〜！
１. Googleスプレッドシートにデータを用意する

12. Glide ５分クッキング〜！
１. Googleスプレッドシートにデータを用意する

13. Glide ５分クッキング〜！
１. Googleスプレッドシートにデータを用意する

14. Glide ５分クッキング〜！
２. glideappsにGoogleアカウント認可で接続

15. Glide ５分クッキング〜！
２. glideappsにGoogleアカウント認可で接続

16. Glide ５分クッキング〜！
３. Newをクリックしてスプレッドシートを指定

17. Glide ５分クッキング〜！
３. Newをクリックしてスプレッドシートを指定

18. Glide ５分クッキング〜！
３. Newをクリックしてスプレッドシートを指定

19. Glide ５分クッキング〜！
３. Newをクリックしてスプレッドシートを指定

20. Glide ５分クッキング〜！
３. Newをクリックしてスプレッドシートを指定

21. Glide ５分クッキング〜！
４. 必要に応じてカスタマイズする

22. Glide ５分クッキング〜！
５. 出来上がり

23. Glide ５分クッキング〜！
５. 出来上がり

24. Glide ５分クッキング〜！
５. 出来上がり

25. Glide ５分クッキング〜！
５. 出来上がり

26. Glide ５分クッキング〜！
５. 出来上がり

27. Glide ５分クッキング〜！
５. 出来上がり

28. Glide ５分クッキング〜！
５. 出来上がり

29. Glide ５分クッキング〜！
５. 出来上がり

30. Glide ５分クッキング〜！
５. 出来上がり

31. ぜひ一度使ってみて
特徴：簡単すぎる!

32. PWA?
・PWA: Progressive Web Apps
モバイル向けWebサイトを
ほとんどアプリのように見せられる仕組み
・実は、2016年くらいからはじまっている...
・対応ブラウザにiOS/Safariがなく, しばらく停滞
・最近ようやく採用事例が増えて来たところ
日経電子版, TwitterLite, Retty, SUUMO,
pixiv chatstory, などなど

33. PWAのメリット
・ストア不要でインストール(ダウンロード待ちもナシ)
・HOMEにアイコンを置ける
・審査なし、アップロードなし、OS対応は比較的軽い
・キャッシュでオフライン動作に対応
・ブラウザのService WorkerでPUSH対応
・常に最新のコンテンツ (アップデート不要)
・ストアアプリとしても登録可能
・Cordovaでラップしてアプリ化
・GoogleストアではPWAで登録できる

34. PWAのデメリット
・言いにくい
・PWAアプリではアプリアプリ
・PWアプリでは意味不明
・プワと読ませる？ (貧弱な印象...)
・persons with Aids (エイズ患者の通称)とかぶる
・「プログレアプリ」でいいんじゃない？

35. PWAのデメリット
・そうは言っても基本オンラインでないと使えな
い
・Web技術中心でアプリのノウハウは使えない
・PCのことはほとんど考えてない
・iOS対応がまだイマイチのとこも
・開発はそこそこめんどくさい(ツールが発展途上)

36. そこに、Glide登場！
・GoogleスプレッドシートでPWAアプリを作成
・コーディングレス！
・Xamarinチームからのスピンアウト
・Y Combinatorの2019冬季クラス
ググりにくい！
・Androidの画像ライブラリと名前がかぶっている
・Goのパッケージ管理ツールとも名前がかぶってる
・サイトは glideapps.com
アプリURL名は不統一 glideapp.io (sがない)

37. そこに、Glide登場！
サンプルいろいろ (元のSpreadsheetも開ける)
・www.glideapps.com/samples
ドキュメント (一部動画。挙動とかが明確でない)
・docs.glideapps.com/all/
Spectrumにコミュニティ掲示板が作られている
・spectrum.chat/glideapps

38. サンフランシスコから、こんにちは。
Glideを使って皆さんが作られたものを見るのが待ちきれません
中の人からメッセージをいただきました

39. Glide無料で十分使えます

40. Qiitaに関連記事を書いてます
・流行りのGlideでプログレアプリ(PWA)してみた
・プログレアプリGlideappsにchoice機能が
追加されたので使ってみました
・Glideappsにコメント/チャットのメッセージ追加を
通知する機能がいたので試してみた
・Glideappsでfav機能が
評価中なので試してみた

41. •思ったほど複雑なことはできない
やっぱりアプリにはかなわないところがある
•パフォーマンスはイマイチ
（極端に遅いときがある・PWAのメリット死んでる）
•Webとの共用は困難(deep linkできない ※これは対応予定)
•カタログやイベント用などの用途なら良さそう
・ランディングページと同じような
ランディングアプリとしてのポジション
・ほとんど手間なしに作成できる
使い捨てアプリ向きかもしれない
•GASと連携すると外部からの動的な変更もできる
Glideアプリを使ってみて

42. •Google Spreadsheetや外部APIの力をうまく使う
•マクロを使って分離・合成する
データ用のカラムと、表示用のカラムは分ける
タブ間、シート間でデータを使う
•GAS (Google App Script)を使って外部連携
外部Webサイトのデータを自動取得し加工
外部デバイスからのデータの受信
•外部APIを使用する
QRコードの生成にGoogle Chart APIを使う等
Glideアプリをリッチに見せるコツ

43. • "技術書同人誌博覧会2019" 非公式アプリ
https://gisyohaku2019.glideapp.io
ある程度頑張って作るとこんな感じ

51. IoTっぽい
よくある例
をやってみる

52. glide.
HTTPS POST
Web Hook

53. glide.
HTTPS POST
Web Hook
コスト高いので
やめた

54. glide.
HTTPS POST
iframe
どうせなら
ここ直球で

55. ・CO2センサをつなげたRaspiから, HTTPSでデータ送信

56. GASでデータ受信してシートに書き込み

57. マクロで直近の10件のみ抽出
=QUERY(IMPORTRANGE("1LgZn
E3aj0jNumLBz7qENsulL-
ULdH56Bsv5ekWzZ5dU",
"A1:B1000000"),"select * where
Col1 is not null order by Col1 DESC
Limit 10")

58. 抽出結果からグラフを生成

59. iframeでGlideのMarkdownに貼る

60. ※注意：Glideでは
iframeを使った挿入は
セキュリティ上の懸念から
推奨されていない
表示位置の調整も微妙

61. Glideアプリ集
作ってみる人、どんどん増えてます！

62. https://abc2019s.glideapp.io/

63. https://rubykaigi2019.glideapp.io/

64. https://pwsquare.glideapp.io

65. https://kodairapark.glideapp.io

66. https://barrier-free.glideapp.io/

67. https://w-b-e-w.glideapp.io/

68. https://shoko.glideapp.io/

69. https://akanechan.glideapp.io

70. https://gamesweplayed.glideapp.io/

71. https://3zanx.glideapp.io

72. https://amay077jobhistory.glideapp.io

73. https://twitter.com/GomiHgy/status/1131235508640608262
今日のお子

75. Glideの使い方の詳細は
電書で出す予定(は未定w)
(先に誰か出すだろうけど)

76. ぜひ一度使ってみて
Glide簡単

77. 背景は、能登半島にある
増穂ヶ浦の貝の砂浜でした

78. 2019.07.27(Sat.)
11:00-17:00
大田区産業プラザPiO
https://gishohaku.dev/
出展します

79. NT金沢2019
2019/6/29[土],30[日]
時間:10:00-17:00
出展します

80. ABC2019S記念でセール中〜！

81. ぜひ一度使ってみて
Glide簡単