ノーコードアプリ開発ツールGlideを利用してみよう

1. ノーコードでアプリ
を作ろう
田頭 潤

2. ハンズオンの目的
• ノーコードの世界を知ってもらう
• ノーコードで実際にアプリを作ってみる

3. ノーコードでアプリを作る
うえで必要なモノ
• Googleのアカウント
• アプリを作る際にアカウントやgoogleのスプレット
シートを利用します

4. アジェンダ
• ノーコードアプリについて
• ぐるなび的なアプリを作ろう

5. ノーコードアプリに
ついて

6. ノーコードアプリとは
• プログラミング無し（GUI）でアプリケーションソフト
ウェアを開発できる環境の事です
ノーコードというよりは
ノーコード開発ツールというのが
正しいと思います
ノーコード
ローコード
プログラミング
• OutSystem
• RPA
• Shopify
• Glide
• Javaで作ったシステ
ム
開発コストが高く
自由度がある

7. メリットとデメリット
メリット
• プログラミング知識不要
• 開発工数削減
• 高速開発可能
デメリット
• 複雑なことは難しい
• プラットフォーム依存
• 英語のものが多い

8. ノーコード開発ツール
Shopify：ECサイト作成せてくれるツール
Zapier ：異なるサービス同士を
連携してくれるツール
Bubble：WEBサービスを
開発するツール
Glide：アプリを開発するツール

9. ノーコード開発ツール
Shopify：ECサイト作成せてくれるツール
Zapier ：異なるサービス同士を
連携してくれるツール
Bubble：WEBサービスを
開発するツール
Glide：アプリを開発するツール

10. Gilideとは
• Glideはスプレッドシートをデータベース
として活用してアプリを作成するツール

11. アプリの作り方(ざっくり説明)

12. アプリの作り方(ざっくり説明)

13. アプリの作り方(ざっくり説明)

14. アプリの作り方(ざっくり説明)

15. アプリの作り方(ざっくり説明)

16. アプリの作り方(ざっくり説明)
実はこれ、WEBページをアプリっぽく
見せているPWA(Progressive Web Apps)と
呼ばれるものです
アプリストアで公開不要のアプリ
事例) Twitter,Suumo

17. ぐるなび的なアプリを
作ろう

18. 事前準備 Googleアカウント
作成
Googleのアカウントを作成しましょう
https://www.google.com/account/about/?hl=ja

19. データの作成
スプレットシートの1行目に店舗名、
最寄りの項目を作成して
WEBページのデータを入力していく

20. Glide登録１
Sign Upをクリック

21. Glide登録２
Googleアカウントを利用する

22. ぐるなび的アプリ作成１
New Appをクリック

23. ぐるなび的アプリ作成１
アプリ名を入力して
Phoneを選択して次へ

24. ぐるなび的アプリ作成１
Google Sheetsを選択して次へ

25. ぐるなび的アプリ作成１
先程作成した Sheetsを選択して次へ

26. ぐるなび的アプリ作成１
アプリが出来ました

27. ぐるなび的アプリ作成１
右側に左で選択した内容の
詳細設定が表示される

28. ぐるなび的アプリ作成２
現在店舗名がアイコンになっている
ので変えてみよう

29. ぐるなび的アプリ作成２
店舗をクリック

30. ぐるなび的アプリ作成２
詳細画面が表示される

31. ぐるなび的アプリ作成２
左側のDataをクリックすると画面に
表示してある項目が表示される

32. ぐるなび的アプリ作成２
+ボタンを押す

33. ぐるなび的アプリ作成２
Mediaのimageを選択

34. ぐるなび的アプリ作成２
新しい項目が追加されている
Labelで項目名を変更可能
Doneで項目追加完了

35. ぐるなび的アプリ作成２
ぐるなびのページから画像のアドレス
を取得して表に登録する

36. ぐるなび的アプリ作成２
リフレッシュアイコンをクリックすると
URLから画像を取得してくれる

37. ぐるなび的アプリ作成２
Screenを選択しDataの隣にある+ボタン
をクリックし
MediaのImageを選択

38. ぐるなび的アプリ作成２

39. ぐるなび的アプリ作成２
戻るボタンクリックで元の画面に戻り
Imageの項目を店舗名からimageに変更する

40. ぐるなび的アプリ作成３
同じ要領でmapを追加して
map表示してみよう

41. ぐるなび的アプリ作成４
Screenの項目をドラッグすることで表示順を変更
Screenの項目をクリックして右側の項目で
表示内容の変更が可能

42. ぐるなび的アプリ作成５
一覧画面のAdd Formをクリックしてチェックを入れると
データ登録機能が実装可能

43. ぐるなび的アプリ作成５
右上のpublishをクリック

44. ぐるなび的アプリ作成５
QRやURLを読み込んだり共有することで
公開や実機で動作確認が可能

45. これで簡単に手軽に
アプリが作れるように
なったはず!!

46. 以上!!