SlideShare una empresa de Scribd logo
1 de 81
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の紹介
ぜひ一度使ってみて
特徴:簡単すぎる!
Glide 3分クッキング〜!
1. Googleスプレッドシートにデータを用意する
2. glideappsにGoogleアカウント認可で接続
3. Newをクリックしてスプレッドシートを指定
4. 必要に応じてカスタマイズする
5. 出来上がり
Glide 5分クッキング〜!
https://youtu.be/vbyd_pEMzJ0
時間の関係で動画デモになります
Glide 5分クッキング〜!
1. Googleスプレッドシートにデータを用意する
Glide 5分クッキング〜!
1. Googleスプレッドシートにデータを用意する
Glide 5分クッキング〜!
1. Googleスプレッドシートにデータを用意する
Glide 5分クッキング〜!
1. Googleスプレッドシートにデータを用意する
Glide 5分クッキング〜!
1. Googleスプレッドシートにデータを用意する
Glide 5分クッキング〜!
2. glideappsにGoogleアカウント認可で接続
Glide 5分クッキング〜!
2. glideappsにGoogleアカウント認可で接続
Glide 5分クッキング〜!
3. Newをクリックしてスプレッドシートを指定
Glide 5分クッキング〜!
3. Newをクリックしてスプレッドシートを指定
Glide 5分クッキング〜!
3. Newをクリックしてスプレッドシートを指定
Glide 5分クッキング〜!
3. Newをクリックしてスプレッドシートを指定
Glide 5分クッキング〜!
3. Newをクリックしてスプレッドシートを指定
Glide 5分クッキング〜!
4. 必要に応じてカスタマイズする
Glide 5分クッキング〜!
5. 出来上がり
Glide 5分クッキング〜!
5. 出来上がり
Glide 5分クッキング〜!
5. 出来上がり
Glide 5分クッキング〜!
5. 出来上がり
Glide 5分クッキング〜!
5. 出来上がり
Glide 5分クッキング〜!
5. 出来上がり
Glide 5分クッキング〜!
5. 出来上がり
Glide 5分クッキング〜!
5. 出来上がり
Glide 5分クッキング〜!
5. 出来上がり
ぜひ一度使ってみて
特徴:簡単すぎる!
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を使って皆さんが作られたものを見るのが待ちきれません
中の人からメッセージをいただきました
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
ある程度頑張って作るとこんな感じ
IoTっぽい
よくある例
をやってみる
glide.
HTTPS POST
Web Hook
glide.
HTTPS POST
Web Hook
コスト高いので
やめた
glide.
HTTPS POST
iframe
どうせなら
ここ直球で
・CO2センサをつなげたRaspiから, HTTPSでデータ送信
GASでデータ受信してシートに書き込み
マクロで直近の10件のみ抽出
=QUERY(IMPORTRANGE("1LgZn
E3aj0jNumLBz7qENsulL-
ULdH56Bsv5ekWzZ5dU",
"A1:B1000000"),"select * where
Col1 is not null order by Col1 DESC
Limit 10")
抽出結果からグラフを生成
iframeでGlideのMarkdownに貼る
※注意:Glideでは
iframeを使った挿入は
セキュリティ上の懸念から
推奨されていない
表示位置の調整も微妙
Glideアプリ集
作ってみる人、どんどん増えてます!
https://abc2019s.glideapp.io/
https://rubykaigi2019.glideapp.io/
https://pwsquare.glideapp.io
https://kodairapark.glideapp.io
https://barrier-free.glideapp.io/
https://w-b-e-w.glideapp.io/
https://shoko.glideapp.io/
https://akanechan.glideapp.io
https://gamesweplayed.glideapp.io/
https://3zanx.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
出展します
ABC2019S記念でセール中〜!
ぜひ一度使ってみて
Glide簡単

Más contenido relacionado

Más de kinneko

金沢LoRa部はじめました(画像版)
金沢LoRa部はじめました(画像版)金沢LoRa部はじめました(画像版)
金沢LoRa部はじめました(画像版)kinneko
 
金沢LoRa部はじめました
金沢LoRa部はじめました金沢LoRa部はじめました
金沢LoRa部はじめましたkinneko
 
Cardboardは日本人向きじゃない!メガネでも使えるJAGOVISORの紹介と日本Androidの会VR部・金沢支部の活動
Cardboardは日本人向きじゃない!メガネでも使えるJAGOVISORの紹介と日本Androidの会VR部・金沢支部の活動Cardboardは日本人向きじゃない!メガネでも使えるJAGOVISORの紹介と日本Androidの会VR部・金沢支部の活動
Cardboardは日本人向きじゃない!メガネでも使えるJAGOVISORの紹介と日本Androidの会VR部・金沢支部の活動kinneko
 
VRだってUIは確実に動くアナログ接続のボタンでしょ!
VRだってUIは確実に動くアナログ接続のボタンでしょ!VRだってUIは確実に動くアナログ接続のボタンでしょ!
VRだってUIは確実に動くアナログ接続のボタンでしょ!kinneko
 
3ボタン入力対応! 簡易VRゴーグル- JAGOVISORの設計と実装
3ボタン入力対応! 簡易VRゴーグル-  JAGOVISORの設計と実装3ボタン入力対応! 簡易VRゴーグル-  JAGOVISORの設計と実装
3ボタン入力対応! 簡易VRゴーグル- JAGOVISORの設計と実装kinneko
 
"Androidを利用した VRゴーグルとその応用"
"Androidを利用した VRゴーグルとその応用""Androidを利用した VRゴーグルとその応用"
"Androidを利用した VRゴーグルとその応用"kinneko
 
スマホでできるVR @上モノラボ
スマホでできるVR @上モノラボ スマホでできるVR @上モノラボ
スマホでできるVR @上モノラボ kinneko
 
Unityを使ったVRアプリ作成入門 ABCD2015金沢編
Unityを使ったVRアプリ作成入門 ABCD2015金沢編Unityを使ったVRアプリ作成入門 ABCD2015金沢編
Unityを使ったVRアプリ作成入門 ABCD2015金沢編kinneko
 
スマートフォン・タブレットを利用した3DVRシステム
スマートフォン・タブレットを利用した3DVRシステムスマートフォン・タブレットを利用した3DVRシステム
スマートフォン・タブレットを利用した3DVRシステムkinneko
 
Part3 unityを使ったvrアプリ作成入門
Part3 unityを使ったvrアプリ作成入門Part3 unityを使ったvrアプリ作成入門
Part3 unityを使ったvrアプリ作成入門kinneko
 
FakeRiftとtaovisorをやってみてわかったこと ABC2014w版
FakeRiftとtaovisorをやってみてわかったこと   ABC2014w版FakeRiftとtaovisorをやってみてわかったこと   ABC2014w版
FakeRiftとtaovisorをやってみてわかったこと ABC2014w版kinneko
 
CEDEC2014 自作3D VRゴーグル"FakeRift"ではじめるアプリケーション開発
CEDEC2014 自作3D VRゴーグル"FakeRift"ではじめるアプリケーション開発CEDEC2014 自作3D VRゴーグル"FakeRift"ではじめるアプリケーション開発
CEDEC2014 自作3D VRゴーグル"FakeRift"ではじめるアプリケーション開発kinneko
 
BeagleBone BlackでAndroidの下回りを学ぼう (公開版)
BeagleBone BlackでAndroidの下回りを学ぼう (公開版) BeagleBone BlackでAndroidの下回りを学ぼう (公開版)
BeagleBone BlackでAndroidの下回りを学ぼう (公開版) kinneko
 
ねえ、“えぬふぃ〜”で占いしない?
ねえ、“えぬふぃ〜”で占いしない?ねえ、“えぬふぃ〜”で占いしない?
ねえ、“えぬふぃ〜”で占いしない?kinneko
 
中華チップ全盛時代のARM SoCの選び方_公開版
中華チップ全盛時代のARM SoCの選び方_公開版中華チップ全盛時代のARM SoCの選び方_公開版
中華チップ全盛時代のARM SoCの選び方_公開版kinneko
 
X86アーキテクチャ 対応の現状と将来
X86アーキテクチャ 対応の現状と将来X86アーキテクチャ 対応の現状と将来
X86アーキテクチャ 対応の現状と将来kinneko
 
Android x86プロジェクトの最近の状況 pf20111218
Android x86プロジェクトの最近の状況 pf20111218Android x86プロジェクトの最近の状況 pf20111218
Android x86プロジェクトの最近の状況 pf20111218kinneko
 
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版kinneko
 
Pandaboardで ubuntu tvしてみる?
Pandaboardで ubuntu tvしてみる?Pandaboardで ubuntu tvしてみる?
Pandaboardで ubuntu tvしてみる?kinneko
 
AOSPをミラーしてみた
AOSPをミラーしてみたAOSPをミラーしてみた
AOSPをミラーしてみたkinneko
 

Más de kinneko (20)

金沢LoRa部はじめました(画像版)
金沢LoRa部はじめました(画像版)金沢LoRa部はじめました(画像版)
金沢LoRa部はじめました(画像版)
 
金沢LoRa部はじめました
金沢LoRa部はじめました金沢LoRa部はじめました
金沢LoRa部はじめました
 
Cardboardは日本人向きじゃない!メガネでも使えるJAGOVISORの紹介と日本Androidの会VR部・金沢支部の活動
Cardboardは日本人向きじゃない!メガネでも使えるJAGOVISORの紹介と日本Androidの会VR部・金沢支部の活動Cardboardは日本人向きじゃない!メガネでも使えるJAGOVISORの紹介と日本Androidの会VR部・金沢支部の活動
Cardboardは日本人向きじゃない!メガネでも使えるJAGOVISORの紹介と日本Androidの会VR部・金沢支部の活動
 
VRだってUIは確実に動くアナログ接続のボタンでしょ!
VRだってUIは確実に動くアナログ接続のボタンでしょ!VRだってUIは確実に動くアナログ接続のボタンでしょ!
VRだってUIは確実に動くアナログ接続のボタンでしょ!
 
3ボタン入力対応! 簡易VRゴーグル- JAGOVISORの設計と実装
3ボタン入力対応! 簡易VRゴーグル-  JAGOVISORの設計と実装3ボタン入力対応! 簡易VRゴーグル-  JAGOVISORの設計と実装
3ボタン入力対応! 簡易VRゴーグル- JAGOVISORの設計と実装
 
"Androidを利用した VRゴーグルとその応用"
"Androidを利用した VRゴーグルとその応用""Androidを利用した VRゴーグルとその応用"
"Androidを利用した VRゴーグルとその応用"
 
スマホでできるVR @上モノラボ
スマホでできるVR @上モノラボ スマホでできるVR @上モノラボ
スマホでできるVR @上モノラボ
 
Unityを使ったVRアプリ作成入門 ABCD2015金沢編
Unityを使ったVRアプリ作成入門 ABCD2015金沢編Unityを使ったVRアプリ作成入門 ABCD2015金沢編
Unityを使ったVRアプリ作成入門 ABCD2015金沢編
 
スマートフォン・タブレットを利用した3DVRシステム
スマートフォン・タブレットを利用した3DVRシステムスマートフォン・タブレットを利用した3DVRシステム
スマートフォン・タブレットを利用した3DVRシステム
 
Part3 unityを使ったvrアプリ作成入門
Part3 unityを使ったvrアプリ作成入門Part3 unityを使ったvrアプリ作成入門
Part3 unityを使ったvrアプリ作成入門
 
FakeRiftとtaovisorをやってみてわかったこと ABC2014w版
FakeRiftとtaovisorをやってみてわかったこと   ABC2014w版FakeRiftとtaovisorをやってみてわかったこと   ABC2014w版
FakeRiftとtaovisorをやってみてわかったこと ABC2014w版
 
CEDEC2014 自作3D VRゴーグル"FakeRift"ではじめるアプリケーション開発
CEDEC2014 自作3D VRゴーグル"FakeRift"ではじめるアプリケーション開発CEDEC2014 自作3D VRゴーグル"FakeRift"ではじめるアプリケーション開発
CEDEC2014 自作3D VRゴーグル"FakeRift"ではじめるアプリケーション開発
 
BeagleBone BlackでAndroidの下回りを学ぼう (公開版)
BeagleBone BlackでAndroidの下回りを学ぼう (公開版) BeagleBone BlackでAndroidの下回りを学ぼう (公開版)
BeagleBone BlackでAndroidの下回りを学ぼう (公開版)
 
ねえ、“えぬふぃ〜”で占いしない?
ねえ、“えぬふぃ〜”で占いしない?ねえ、“えぬふぃ〜”で占いしない?
ねえ、“えぬふぃ〜”で占いしない?
 
中華チップ全盛時代のARM SoCの選び方_公開版
中華チップ全盛時代のARM SoCの選び方_公開版中華チップ全盛時代のARM SoCの選び方_公開版
中華チップ全盛時代のARM SoCの選び方_公開版
 
X86アーキテクチャ 対応の現状と将来
X86アーキテクチャ 対応の現状と将来X86アーキテクチャ 対応の現状と将来
X86アーキテクチャ 対応の現状と将来
 
Android x86プロジェクトの最近の状況 pf20111218
Android x86プロジェクトの最近の状況 pf20111218Android x86プロジェクトの最近の状況 pf20111218
Android x86プロジェクトの最近の状況 pf20111218
 
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
 
Pandaboardで ubuntu tvしてみる?
Pandaboardで ubuntu tvしてみる?Pandaboardで ubuntu tvしてみる?
Pandaboardで ubuntu tvしてみる?
 
AOSPをミラーしてみた
AOSPをミラーしてみたAOSPをミラーしてみた
AOSPをミラーしてみた
 

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