狠狠撸

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

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

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

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

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

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

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

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

２. glideappsにGoogleアカウント認可で接続

３. Newをクリックしてスプレッドシートを指定

４. 必要に応じてカスタマイズする

５. 出来上がり

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

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

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

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

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

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

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

骋濒颈诲别无料で十分使えます

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

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

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

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

5分で作れる！ Glideappsではじめる超簡単PWA

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

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

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

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

骋础厂でデータ受信してシートに书き込み

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

抽出结果からグラフを生成

颈蹿谤补尘别で骋濒颈诲别の惭补谤办诲辞飞苍に贴る

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

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

https://rubykaigi2019.glideapp.io/

https://kodairapark.glideapp.io

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

https://gamesweplayed.glideapp.io/

https://amay077jobhistory.glideapp.io

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

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

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

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

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

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

础叠颁2019厂记念でセール中?！

狠狠撸

5分で作れる！ Glideappsではじめる 超簡単PWA

More Related Content

5分で作れる！ Glideappsではじめる 超簡単PWA

5分で作れる！ Glideappsではじめる超簡単PWA

5分で作れる！ Glideappsではじめる超簡単PWA