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.

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

355 views

Published on

国内最大級の規模を誇るAndroidの19回目の祭典
「Android Bazaar and Conference 2019 Spring (ABC2019Spring)」
https://abc.android-group.jp/2019s/

「5分で作れる!Glideappsではじめる超簡単PWA」セッションで利用する予定のデモ動画です。

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. 5分で作れる! Glideappsではじめる超簡単PWA 本日の資料はこちら 時間の関係で駆け足の内容です 「Glide簡単」だけ覚えて行ってください ハッシュタグは #glideapps
  2. 2. PWA Nightさんと ネタかぶりしてしまったので 本日はネタを調整して お届けしますw
  3. 3. 5分で作れる! Glideappsではじめる 超簡単PWA kinneko@gmal.com 2019/05/26@ABC2019Spring
  4. 4. @kinneko kinneko@gmail.com JAG金沢支部長 (最近何もしてないw) 薄い本とか書いてます 「kinnekoの薄い本屋」 https://kinneko.booth.pm/
  5. 5. Glideの紹介
  6. 6. ぜひ一度使ってみて 特徴:簡単すぎる!
  7. 7. Glide 3分クッキング〜! 1. Googleスプレッドシートにデータを用意する 2. glideappsにGoogleアカウント認可で接続 3. Newをクリックしてスプレッドシートを指定 4. 必要に応じてカスタマイズする 5. 出来上がり
  8. 8. Glide 5分クッキング〜! https://youtu.be/vbyd_pEMzJ0 時間の関係で動画デモになります
  9. 9. Glide 5分クッキング〜! 1. Googleスプレッドシートにデータを用意する
  10. 10. Glide 5分クッキング〜! 1. Googleスプレッドシートにデータを用意する
  11. 11. Glide 5分クッキング〜! 1. Googleスプレッドシートにデータを用意する
  12. 12. Glide 5分クッキング〜! 1. Googleスプレッドシートにデータを用意する
  13. 13. Glide 5分クッキング〜! 1. Googleスプレッドシートにデータを用意する
  14. 14. Glide 5分クッキング〜! 2. glideappsにGoogleアカウント認可で接続
  15. 15. Glide 5分クッキング〜! 2. glideappsにGoogleアカウント認可で接続
  16. 16. Glide 5分クッキング〜! 3. Newをクリックしてスプレッドシートを指定
  17. 17. Glide 5分クッキング〜! 3. Newをクリックしてスプレッドシートを指定
  18. 18. Glide 5分クッキング〜! 3. Newをクリックしてスプレッドシートを指定
  19. 19. Glide 5分クッキング〜! 3. Newをクリックしてスプレッドシートを指定
  20. 20. Glide 5分クッキング〜! 3. Newをクリックしてスプレッドシートを指定
  21. 21. Glide 5分クッキング〜! 4. 必要に応じてカスタマイズする
  22. 22. Glide 5分クッキング〜! 5. 出来上がり
  23. 23. Glide 5分クッキング〜! 5. 出来上がり
  24. 24. Glide 5分クッキング〜! 5. 出来上がり
  25. 25. Glide 5分クッキング〜! 5. 出来上がり
  26. 26. Glide 5分クッキング〜! 5. 出来上がり
  27. 27. Glide 5分クッキング〜! 5. 出来上がり
  28. 28. Glide 5分クッキング〜! 5. 出来上がり
  29. 29. Glide 5分クッキング〜! 5. 出来上がり
  30. 30. Glide 5分クッキング〜! 5. 出来上がり
  31. 31. ぜひ一度使ってみて 特徴:簡単すぎる!
  32. 32. PWA? ・PWA: Progressive Web Apps モバイル向けWebサイトを ほとんどアプリのように見せられる仕組み ・実は、2016年くらいからはじまっている... ・対応ブラウザにiOS/Safariがなく, しばらく停滞 ・最近ようやく採用事例が増えて来たところ 日経電子版, TwitterLite, Retty, SUUMO, pixiv chatstory, などなど
  33. 33. PWAのメリット ・ストア不要でインストール(ダウンロード待ちもナシ) ・HOMEにアイコンを置ける ・審査なし、アップロードなし、OS対応は比較的軽い ・キャッシュでオフライン動作に対応 ・ブラウザのService WorkerでPUSH対応 ・常に最新のコンテンツ (アップデート不要) ・ストアアプリとしても登録可能 ・Cordovaでラップしてアプリ化 ・GoogleストアではPWAで登録できる
  34. 34. PWAのデメリット ・言いにくい ・PWAアプリではアプリアプリ ・PWアプリでは意味不明 ・プワと読ませる? (貧弱な印象...) ・persons with Aids (エイズ患者の通称)とかぶる ・「プログレアプリ」でいいんじゃない?
  35. 35. PWAのデメリット ・そうは言っても基本オンラインでないと使えな い ・Web技術中心でアプリのノウハウは使えない ・PCのことはほとんど考えてない ・iOS対応がまだイマイチのとこも ・開発はそこそこめんどくさい(ツールが発展途上)
  36. 36. そこに、Glide登場! ・GoogleスプレッドシートでPWAアプリを作成 ・コーディングレス! ・Xamarinチームからのスピンアウト ・Y Combinatorの2019冬季クラス ググりにくい! ・Androidの画像ライブラリと名前がかぶっている ・Goのパッケージ管理ツールとも名前がかぶってる ・サイトは glideapps.com アプリURL名は不統一 glideapp.io (sがない)
  37. 37. そこに、Glide登場! サンプルいろいろ (元のSpreadsheetも開ける) ・www.glideapps.com/samples ドキュメント (一部動画。挙動とかが明確でない) ・docs.glideapps.com/all/ Spectrumにコミュニティ掲示板が作られている ・spectrum.chat/glideapps
  38. 38. サンフランシスコから、こんにちは。 Glideを使って皆さんが作られたものを見るのが待ちきれません 中の人からメッセージをいただきました
  39. 39. Glide無料で十分使えます
  40. 40. Qiitaに関連記事を書いてます ・流行りのGlideでプログレアプリ(PWA)してみた ・プログレアプリGlideappsにchoice機能が 追加されたので使ってみました ・Glideappsにコメント/チャットのメッセージ追加を 通知する機能がいたので試してみた ・Glideappsでfav機能が 評価中なので試してみた
  41. 41. •思ったほど複雑なことはできない やっぱりアプリにはかなわないところがある •パフォーマンスはイマイチ (極端に遅いときがある・PWAのメリット死んでる) •Webとの共用は困難(deep linkできない ※これは対応予定) •カタログやイベント用などの用途なら良さそう ・ランディングページと同じような ランディングアプリとしてのポジション ・ほとんど手間なしに作成できる 使い捨てアプリ向きかもしれない •GASと連携すると外部からの動的な変更もできる Glideアプリを使ってみて
  42. 42. •Google Spreadsheetや外部APIの力をうまく使う •マクロを使って分離・合成する データ用のカラムと、表示用のカラムは分ける タブ間、シート間でデータを使う •GAS (Google App Script)を使って外部連携 外部Webサイトのデータを自動取得し加工 外部デバイスからのデータの受信 •外部APIを使用する QRコードの生成にGoogle Chart APIを使う等 Glideアプリをリッチに見せるコツ
  43. 43. • "技術書同人誌博覧会2019" 非公式アプリ https://gisyohaku2019.glideapp.io ある程度頑張って作るとこんな感じ
  44. 44. IoTっぽい よくある例 をやってみる
  45. 45. glide. HTTPS POST Web Hook
  46. 46. glide. HTTPS POST Web Hook コスト高いので やめた
  47. 47. glide. HTTPS POST iframe どうせなら ここ直球で
  48. 48. ・CO2センサをつなげたRaspiから, HTTPSでデータ送信
  49. 49. GASでデータ受信してシートに書き込み
  50. 50. マクロで直近の10件のみ抽出 =QUERY(IMPORTRANGE("1LgZn E3aj0jNumLBz7qENsulL- ULdH56Bsv5ekWzZ5dU", "A1:B1000000"),"select * where Col1 is not null order by Col1 DESC Limit 10")
  51. 51. 抽出結果からグラフを生成
  52. 52. iframeでGlideのMarkdownに貼る
  53. 53. ※注意:Glideでは iframeを使った挿入は セキュリティ上の懸念から 推奨されていない 表示位置の調整も微妙
  54. 54. Glideアプリ集 作ってみる人、どんどん増えてます!
  55. 55. https://abc2019s.glideapp.io/
  56. 56. https://rubykaigi2019.glideapp.io/
  57. 57. https://pwsquare.glideapp.io
  58. 58. https://kodairapark.glideapp.io
  59. 59. https://barrier-free.glideapp.io/
  60. 60. https://w-b-e-w.glideapp.io/
  61. 61. https://shoko.glideapp.io/
  62. 62. https://akanechan.glideapp.io
  63. 63. https://gamesweplayed.glideapp.io/
  64. 64. https://3zanx.glideapp.io
  65. 65. https://amay077jobhistory.glideapp.io
  66. 66. https://twitter.com/GomiHgy/status/1131235508640608262 今日のお子
  67. 67. Glideの使い方の詳細は 電書で出す予定(は未定w) (先に誰か出すだろうけど)
  68. 68. ぜひ一度使ってみて Glide簡単
  69. 69. 背景は、能登半島にある 増穂ヶ浦の貝の砂浜でした
  70. 70. 2019.07.27(Sat.) 11:00-17:00 大田区産業プラザPiO https://gishohaku.dev/ 出展します
  71. 71. NT金沢2019 2019/6/29[土],30[日] 時間:10:00-17:00 出展します
  72. 72. ABC2019S記念でセール中〜!
  73. 73. ぜひ一度使ってみて Glide簡単

×