ノーコードGlideの使い方【Googleのスプレッドシートを使用したアプリ作成編】

最近、注目を浴びているノーコード。

ノーコードならプログラミングなしでアプリが作れると言われています。

「ノーコードを使えば簡単にアプリが作れるのかどうか?」

ここでは、Glideを使って簡単にアプリが作れるかどうかを試してみました。

Glide

Glide公式ページ:https://www.glideapps.com/

Glideは、ノーコードツールで、Googleのスプレッドシートを用いて、アプリを作成できるサービスです。

アプリを作るというと難しいと思う方も多いかもしれませんが、Glideを使えば簡単に作ることができます。

クリックアンドドラッグで操作ができ、テンプレートやスプレッドシートとの連携が容易にできるためプログラミングは必要ありません。


プログラムコードの入力をせずに画面を操作してアプリが作成が可能で、簡単にアプリを作成することができます。

ここでは、Glideのスプレッドシートを使用してアプリを作ってみます。

スプレッドシート

グライド

スプレッドシートを使用して、PWAアプリを作ります。

PWAとは、モバイル向けWebサイトにスマートフォンアプリ化する仕組みです。アプリとしてインストール可能にする技術

Glideでアプリを作成する流れ

  • スプレッドシートを準備
  • スプレッドシートを読み込み
  • レイアウトの調整・変更
  • ログイン認証の設定
  • サインイン設定
  • アプリの公開


まずは、スプレッドシートでデータを準備します。

ここでは練習用なので、あまり考えずに分類分けして作っていきます。

個人の情報をまとめて表示できるアプリを作成します。

名前(Name)、住所(address)、年齢(age)、評価(star)といった感じで作りました。

スプレッドシートでデータを準備したら、Glideで新規アプリを作成していきます。

まず、Glideにログインします。

Create appのグーグル シート(スプレッドフォーム)をクリック。

From Google Sheet(スプレッドフォーム)とFrom template(テンプレート)があります。

ここではFrom Google Sheet(スプレッドフォーム)を選択します。


次に、シートファイルのセレクト画面になります。


作成したスプレッドシートを選択し、下のブルーの「Select」ボタンをクリックします。

ファイルを選択すると、中身が自動的に解析され、しばらく待っているとアプリが自動で表示されます。

アプリのカスタム

このようなアプリの画面が表示され、ここからカスタマイズしていくことができます。


左側のメニューの「Layout」から、アプリのレイアウト設定ができます。

レイアウトでは、スタイルを変えれます。

STYLE(スタイル)の種類は8種類


作るアプリに合わせてスタイルを選択してください。

今回、住所が入力してあるので、Mapを表示してみました。

データに入力された住所にポイントが打たれて、マップが表示されます。

各スタイルによって表示や設定内容が異なります。マップの詳細設定は別記事で解説しています。

⇒ マップの詳細設定方法


ここでは、使い方に合わせて、レイアウトを変更します。

色々、触ってみて使いやすいデザインにしてください。

より詳しいレイアウト設定の記事はこちら

⇒ Glideのレイアウト設定のやり方


他に、スタイルシートを追加したい時は新しいタブを作ります。

左側のサイドバーのスマホマークをクリックすると、タブの設定ができます。

タブを追加したり、切り替えができます。

GlideのアプリのTAB(タブ)設定をする方法


タブが増えた時は、ハンバーガーメニュー(ナビゲーションメニュー)を使用するといいです。

Glideでのアプリのデータ更新やアップデートはスプレッドシート、データで行います。

アプリにはスプレットシートがそのまま反映されるので、スプレットシートを書き換え、反映させて確認してください。

独学ノーコード
Glideではスプレッドシートの内容が重要です。

しっかりしたスプレッドシートを作れば、調整のみでアプリが作れるので短時間でアプリの制作ができます。

アプリの設定

Glideアプリの設定をするには、左サイドメニューの「Settings」(歯車マーク)をクリックします。

以下の10項目があります。

  • Appearance(外観)
  • App Info(アプリ情報)
  • Privacy(プライバシー)
  • Sharing(共有)
  • Sin-in Scerrn(サインイン画面)
  • User Agreemente(ユーザー同意書)
  • Data Sync(データ同期)
  • Template(テンプレート)
  • Integration(統合)

Appearance(外観)

Appearanceをクリックして、外観を変えてみます。

カラー変更やデザインを変えれます。

ブルーに変更してみました。

ここでは、デザインやカラーの選択ができるので、好きなカラーに変更することができます。

⇒ Glideのアプリの外観を変更する方法【カラー、デザインの選択】

App Infoでは、アイコンも変更できます。

アップロードするとアイコンを変えれます。

⇒ Glideのアプリのアイコン変更とアプリ情報入力

Privacy(プライバシー)

ログイン認証をするためには、「SIGN-IN」タブをクリックします。


デフォルト設定では「Public」です。

アプリを公開すると誰でも見ることができる設定になっています。

ここでは、Emailやパスワードの設定ができます。


「Public with email」にすると、ログイン時にメールアドレスの入力が必要になります。

ログイン認証の設定などを必要に応じて変更してください。

⇒ Glideのログイン認証の設定

Sin-in Scerrn(サインイン画面)

サインイン画面のブランディングは無料ではできないです。

ロゴを入れたい場合はGlide Pro appにしないとできません。

ログインした状態にして表示の確認をするには、左サイドメニューの「Preview as」(人型マーク)をクリックします。

アプリの公開

作成したアプリを公開して利用できるようにするには、アプリ表示部分の右上(右サイドメニューの左隣)の「SHARE」をクリックします。


公開確認のウインドウが表示されるので、「Publish app」をクリックします。

Publish appをクリックするとアプリが公開されます。


表示されているQRコードを読み取って、アプリを開くことも可能です。

「APP LINK」という項目でURLを変更することが可能です。

GlideのPWAアプリは、PC/スマホどちらからでも利用可能です。

仮で作ったためパブリックの設定にしましたが、必要に応じてメールアドレスなどでログイン設定をつけていくといいです。


作ったアプリをスマホのホーム画面に追加することもできます。

⇒ アプリをスマホのホーム画面への追加する方法【アンドロイド編】
⇒ アプリをスマホのホーム画面に追加する方法【アイフォン編】


次に作成したアプリは、料理日記です。

Glideでスプレッドシートを使用したアプリの例【料理日記】

2020年10月16日

その後、旅行・観光アプリも作成しました。

まとめ

ここでは、ノーコードツールのGlideでグーグルのスプレッドシートを使用してアプリを作成してみました。

アプリの作成自体は、驚くほど簡単なので、一度使ってみると理解しやすいです。

Glideをはじめとするノーコードツールは、英語表記なので少し使いにくく感じるかもしれません。

でも、直感的に使えるような作りになっていて、使いやすいのでGlideはノーコードの入門としてもオススメです。

⇒ 【Glide(グライド)の登録方法】無料版と有料版の違いは?

⇒ Glideの使い方【アプリダッシュボード】アプリ作成手順

⇒ 【Glide】初心者におすすめのテンプレート「簡単なタスク管理アプリ」

スポンサードリンク



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です