最近、注目を浴びているノーコード。
ノーコードならプログラミングなしでアプリが作れると言われています。
「ノーコードを使えば簡単にアプリが作れるのかどうか？」
ここでは、Glideを使って簡単にアプリが作れるかどうかを試してみました。
目次
Glide
Glideはアプリを制作できるノーコードツールです。
Glide公式ページ：https://www.glideapps.com/
アプリを作るというと難しいと思う方も多いかもしれませんが、Glideを使えば簡単に作ることができます。
クリックアンドドラッグで操作ができ、テンプレートやスプレッドシートとの連携が容易にできるためプログラミングは必要ありません。
プログラムコードの入力をせずに画面を操作してアプリが作成可能で、簡単にアプリを作成することができます。
ここでは、Glideのスプレッドシートを使用してアプリを作ってみます。
スプレッドシート
Glideは、Googleスプレッドシートを使用して「PWAアプリ」を作れます。
Glideを使用して、WEB上で動くアプリを作成することができます。
【Glideでアプリを作成する流れ】
- スプレッドシートを準備
- スプレッドシートを読み込み
- レイアウトの調整・変更
- ログイン認証の設定
- サインイン設定
- アプリの公開
まずは、Googleスプレッドシートでデータを準備します。
新規のスプレッドシートを使用して作成します。
サンプルとして、個人の情報をまとめて表示できるアプリを作成します。
ここでは練習用なので、あまり深く考えずに分類分けをしてシートを作っていきます。
名前（Name）、住所（address）、年齢（age）、評価（star）といった感じで作りました。
スプレッドシートでデータの準備が終わったら、Glideで新規アプリを作成していきます。
まず、Glideにログインします。
管理画面のCreate appのグーグル シート（スプレッドフォーム）をクリック。
ソースは、From Google Sheet（スプレッドフォーム）とFrom template（テンプレート）があります。
ここではGoogle Sheets（スプレッドフォーム）を選択しContinueをクリックします。
次に、スプレッドシートファイルの選択画面になります。
事前に作成したスプレッドシートを選択し、下のブルーの「Select」ボタンをクリックします。
ファイルを選択すると、シートのデータが自動的に解析され、しばらく待っているとアプリが表示されます。
アプリのカスタム
シートを読み込むと、アプリの画面が表示されました。
作成されたアプリをベースにして、カスタマイズしていくことができます。
アプリの上部には３つのアイコンがあり切り替えを行えます。
- データーベース
- スクリーン
- 設定
上部の３つで、それぞれの項目を簡単に切り替えすることができます。
スクリーンのスタイル変更
スタイル（STYLE）は、スクリーンに表示され、ベースになるもので８種類あります。
左サイドバーのスクリーンシートをクリックし、右側のメニューの「STYLE」から、アプリのレイアウトスタイル設定ができます。
【STYLE（スタイル）の種類】
スタイルは８つの種類があるので、作るアプリに合わせて選択してください。
初めての場合は、それぞれのスタイルを選択してみて表示をチェックしてみてください。
今回、住所が入力してあるので、Mapを表示してみました。
Mapスタイルは、データに入力された住所にポイントが打たれて、地図が表示されます。
各スタイルによって表示や設定内容が異なります。マップの詳細設定は別記事で解説しています。
⇒ マップの詳細設定方法
アプリや使用目的に合わせて、レイアウトを変更します。
まずは色々、触ってみてアプリを使いやすいスタイルを選択してください。
より詳しいレイアウト設定の記事はこちら
⇒ Glideのレイアウト設定のやり方
他に、スタイルシートを追加したい時は新しいタブを作ります。（新規タブの追加）
左サイドバーのTABSをクリックすると、タブの設定ができます。+でタブの追加ができます。
新しくタブを追加したり、他のタブへ切り替えて設定をできます。
⇒ GlideのアプリのTAB（タブ）設定をする方法
必要に応じてタブページを追加し、スクリーンを作成していきます。
作成したタブは、アプリの下部にアイコンが追加され、アイコンで切り替えができます。
タブが増えた時は、ハンバーガーメニュー（ナビゲーションメニュー）を使用するといいです。
データを追加したり、修正する場合は、スプレッドシートに追加・修正すれば反映されます。
アプリにはスプレットシートの内容がそのまま反映されるので、スプレットシートを書き換え、反映させて確認してください。
アプリの設定
アプリの設定をするには、左サイドメニューの「Settings」（歯車マーク）をクリックします。
Glideの設定は以下の10項目があります。
- Appearance（外観）
- App Info（アプリ情報）
- Privacy（プライバシー）
- Sharing（共有）
- Sin-in Scerrn（サインイン画面）
- User Agreemente（ユーザー同意書）
- Data Sync（データ同期）
- Template（テンプレート）
- Integration（統合）
Appearance（外観）
Appearanceをクリックして、外観を変えることができます。
カラー変更やデザインの変更が可能。
カラーをグリーンに変更してみました。
ここでは、デザインやカラーの選択ができるので、好きなカラーに変更することができます。
⇒ Glideのアプリの外観を変更する方法【カラー、デザインの選択】
App Infoでは、アイコンも変更できます。
画像をアップロードして、オリジナルのアイコンにすることもできます。
Privacy（プライバシー）
ログイン認証をするためには、「SIGN-IN」タブをクリックします。
デフォルト設定では「Public」です。
「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でグーグルのスプレッドシートを使用してアプリを作成してみました。
スプレッドシートに記載したデータをもとに、アプリの作成ができました。
アプリの作成自体は、驚くほど簡単なので、一度使ってみると理解しやすいです。
注意点として、Glideをはじめとするノーコードツールは、英語表記なので少し使いにくく感じるかもしれません。
でも、Glideは直感的に使え、使いやすいのでノーコードアプリ制作の入門としてもオススメです。
⇒ 【Glide（グライド）の登録方法】無料版と有料版の違いは？
⇒ Glideの使い方【アプリダッシュボード】アプリ作成手順
⇒ 【Glide】初心者におすすめのテンプレート「簡単なタスク管理アプリ」
しっかりしたスプレッドシートを作れば、調整のみでアプリが作れるので短時間でアプリの制作ができます。