【Glide入門】NoCodeツールGlideを使ってみよう
この記事の目次
動画
Glideとは
GlideとはPWAを作るツールのことです。
PWAというのは『Progressive Web Apps』の略で、モバイル向けのWebサイトをスマートフォン向けアプリのように使用できる仕組みのことです。
Glideの大きな特徴としては、
1.プログラミングが不要
2.データベースの代わりにGoogle スプレッドシートを使う
といった特徴ががあります。
Glideを使ってみる
Glideにサインアップ
それでは、実際にGlideを使ってみましょう。
検索エンジンで『Glide』と検索してください。
検索結果の上の方に出てくる『Glide • Create an app from a Google Sheet in five minutes, for …』をクリックしましょう。
すると、このようなページが表示されます。
『Sign up』を押しましょう。
『Sign up with Google』を押して、Googleアカウントでログインしましょう。
するとこのような画面が出るので、
Do this laterを押しましょう。
するとこのような画面になります。
スプレッドシート作成
それでは、アプリを作っていくのですが、アプリを作るにはスプレッドシートを使います。
まずはスプレッドシートを作成していきましょう。
Googleのトップページを開いてください。
右上の方にある、このボタンを押してください。
するとGoogleのアプリが色々と出てくるので、
下の方へスクロールし、スプレッドシートをクリックしましょう。
するとスプレッドシートの画面が開かれます。
空白を押して、新しいスプレッドシートを作りましょう。
今回は従業員を表示させるだけのちょっとしたアプリを作りたいので、従業員のデータを書き込んでいきます。
タイトルを『従業員』と書き換えましょう。
無題のスプレッドシートと記述されている箇所をクリックすると、編集できるようになります。
タイトルを『従業員』と書き換えてください。
次に今回はエンジニアとデザイナーで分けようと思うで、それぞれシートを作りましょう。
下の方にある『シート1』と表示されている箇所を『エンジニア』と書き換えます。
名前を変えるために、ダブルクリックしましょう。
すると編集できるようになります。
『エンジニア』と書き換えましょう。
デザイナーのシートも作りたいので、シートを追加しましょう。
プラスボタンを押してください。
するとシートが新しく追加されます。
先ほどと同じようにして『デザイナー』と書き換えましょう。
それでは書き込んでいきましょう。
Glideで読み込むスプレッドシートは、一番上の行を列の名前にする必要があります。
今回は『名前』と『職業』と『趣味』としましょう。
それぞれ書き込んでいきます。
まずはデザイナーの方からやっていきましょう。
| 名前 職業 趣味 |
と書き込んでください。
その後に列の名前に対応したものを書き込んでいきましょう。
| 中島美香 グラフィック 陶芸 佐藤大輝 Web お菓子作り 山川麻里 CG 筋トレ |
このように適当に書き込んでください。
エンジニアのシートも同じように書き込んでいきましょう。
| 名前 職業 趣味 高田文枝 インフラ 競馬 田中太郎 フロントエンド 競艇 島田雅史 バックエンド パチンコ |
と記述しましょう。
これで、とりあえずはスプレッドシート記述し終えました。
アプリ作成
作ったスプレッドシートを使ってGlideでアプリを作ってみましょう。
Glideのサイトへ行き、『Create app…』にカーソルを合わせましょう。
カーソルを合わせると『From Google Sheet…』と表示されるので、クリックします。
どのスプレッドシートを使ってアプリを作るのか聞かれるので、先ほど作った『従業員』を選択して、
『Select』を押しましょう。
するとスプレッドシートを読み込んで、Glideが自動でアプリを作ります。
スプレッドシートの反映を確認
スプレッドシートの内容がどのようにアプリに反映されているのか確認していきましょう。
まず、それぞれのシートはタブとして反映されます。
例えば、エンジニアというシートは
エンジニアタブとして、
デザイナーというシートは
デザイナータブとして
それぞれ反映されます。
また、最初の二つの列は
最初のページに反映されていて、
それ以降の列は
それぞれの従業員をクリックして、
詳細をみると表示されています。
モバイルアプリにする
ざっと、スプレッドシートがどのようにアプリに反映されているのか確認することができました。
作ったアプリをモバイルアプリにしてみましょう。
『SHARE』ボタンを押してください。
すると、『QRコード』や
APP LINKが表示されます。
また、電話番号を入力するとSMSでリンクを送ることもできます。
電話番号は日本の場合は、+81から始まるので注意してください。
090の場合は『+81 90 **** ****』と入力します。
自分のスマホでアプリを作成したい場合は、QRコードで読み取るのが楽だと思います。
QRコードで読み取ったら、iOSの場合、ブラウザは『Safari』を使いましょう。
safariで開くと、ブラウザでWebアプリが表示されます。
モバイルアプリにしたい場合は、下の方にあるこのボタンを押して、
『ホーム画面に追加』を押しましょう。
確認画面が出るので『追加』を押すと、
モバイルアプリとして追加されます。
OSがAndroidの場合は『標準ブラウザ』を使いましょう。
右上の方にある、このボタンを押して、
『Add to Home screen』を押し、
確認画面が出たら『Add』を押すと
モバイルアプリとして追加されるはずです。
デスクトップアプリにする
次にデスクトップアプリにしてみましょう。
SHAREボタンを押してください。
リンクをコピーして、
検索エンジンに入力しましょう。
入力したらエンターを押します。
すると、Webアプリを表示させることができます。
デスクトップアプリにしたい場合は、右上のボタンを押して、インストールしましょう。
