準備編

【glide】アプリ開発画面の使い方を徹底解説

Development screen commentary

今回は実際にアプリを作る際に操作する画面について解説していきます。

glideって何?とか、登録はどうやるの?とか、無料でできる範囲が知りたい!という方は前回の記事をご覧ください。

glide公式リンクはこちら↓

glideのスタイル8種類をまるっと解説はこちら

glideのコンポーネント全10種類をまるっと解説はこちら

glideのデータの型23種の概要をまるっと解説はこちら

glideの24種類のアクション概要をまるっと解説はこちら

お悩み解決!オープンチャットのやり取りをまとめました。→オープンチャットQ&A

youtubeでも配信中!

新規アプリの作成方法

データ方式の選択

data selection

アプリ一覧画面の+マーク(New App)をクリックすると画像の画面が開きます。選択できるのは2種類

  • 自分のスプレッドシートを使う
  • glide内でデータを管理する

2021/06/05追記
アプリ制作時に選べるデータ形式が増えました!下記を参照。これでより開発の幅が広がりますね。

Create a new app
Use a spreadsheet

自分のスプレッドシートを使う場合は、あらかじめグーグルドライブ内にスプレッドシートを作成しておき出てきた一覧から使いたいシートを選択します。

glide tableを使う場合は特に事前の準備は必要ありません。

glide tableを使うと、スプレッドシートで行う関数処理やGASなどが使えないため、作るアプリによっては機能が実装できなくなる可能性があります。Zapierと連携する際もスプレッドシートをトリガーに使えなくなるのでよく考えて選ぶようにしましょう!こうなります↓

screen selection

アプリを作成した時に初めに開く画面です。上に3つ画面切り替えのタブがあり、それぞれ

  • データ編集画面
  • アプリ編集画面
  • アプリ設定画面

となっています。次から詳しくそれぞれの画面について解説していきます。

アプリ編集画面

App editing screen

画面はエリアで上記のように分かれています。

  1. タブ管理
  2. コンポーネント一覧
  3. アプリプレビュー画面
  4. コンポーネント詳細設定
  5. アプリアイコンと名前
  6. アプリの無料使用枠、リリース情報

タブ管理

Tab edit screen

タブとは?
アプリ画面下に表示されるアイコンや、左上のハンバーガーメニュー内にある項目のことです。アプリ内のページのようなものですね。

タブ管理画面では、アプリのタブに関する情報が表示されており、名前の変更、タブの追加や移動、表示非表示の切り替えなどが行えます。

普通は使わないタブを非表示にすると思いますが、実はタブは非表示にしても、それ自体は存在しています。アプリで直接アクセスさせたくないけど、一定の条件で表示させたいページがある場合は覚えておくと便利!

コンポーネント一覧

Used component display screen

コンポーネントとは?
アプリに表示する項目のこと。テキスト、ボタン、画像、動画、地図など様々な物があります。

現在表示されている画面に組み込まれているコンポーネントの一覧です。
コンポーネント詳細設定でstyleが選べます。

スタイル8種類の概要はこちら。

あらかじめレイアウトが決まっている物から、自分で自由にカスタマイズできるものもあります。

アプリプレビュー画面

Application display screen

一番見るであろうアプリのプレビュー画面です。
実際にアプリを公開した際にユーザーが操作する画面になります。

ユーザーごとの表示切替
ユーザーごとの表示の確認用です。ログイン必須のアプリを作成する場合、プロフィール画面とかは、ユーザーごとに表示したい情報が変わりますよね?クリックすると入力画面が表示され、メールや名前でユーザーを限定し、そのユーザーに画面がどのように表示されているかが確認できます。

選択したタブの表示画面
①で選択したタブの画面が表示されます。Play Modeで表示している場合はすべてのコンポーネントが本番環境と同じように動作します。

Play ModeとSelect Mode
実際のアプリと同じ環境(Play Mode)とテキスト入力やボタンを押すことができない編集専用画面(Select Mode)の切り替えができます。

コンポーネント詳細設定

Component detail screen

選択したタブやコンポーネントの詳細設定画面。選んだコンポーネントにより設定できる項目が変化します。
大まかに分けると見た目の部分とアクション(挙動)について設定できます。

コンポーネント10種類の概要はこちら。

右下の?マークからはライブラリーやyoutubeチャンネル、サポートリンクに行けます。ダークモードへの切り替えもこちらから。

アプリアイコンと名前

App Name

現在のアプリ名とアイコンが確認できます。編集は上部タブ一番右の「アプリ設定」から。クリックでアプリ一覧へ。

アプリの無料使用枠、リリース情報

App Release

Upgradeからはアプリが現在使用済みの無料枠の確認ができます。Publishでは現在使用中のプラン確認とアプリの公開情報の編集ができます。

データ編集画面

11Data edit screen


画面はエリアで上記のように分かれています。

  1. データシート画面
  2. データ編集画面
  3. スプレッドシートの名称、リンク、同期ボタン

データシート画面

List of sheets used

アプリで使用しているデータシートの一覧です。名称の変更、シートの削除(スプレッドシートと連携しているの場合はここからは削除できません)、glide table(glide内のデータシート)の追加を行うことができます。glide tableは他のアプリで使っているデータも参照可能です。

データ編集画面

Data display screen

アプリに表示するデータを扱う場所です。①で選択したシートの情報が表示されます。真ん中上がシートの名称、一番上の行がデータの型(アイコン)と名称、右上の+ボタンで列を追加します。各データ内容は直接編集可能でスプレッドシートの値とリンクしています。

基本スプレッドシートと同期している場合は同じデータが表示されますが、glide特有の型を使って列を作成している場合はglide側にしか表示されません。

glide特有の型とは、スプレッドシートでは関数を使って行う複雑な処理などをより直感的に行うことができるものです。条件分岐や計算、文字の置き換えなど、使いこなすと色々なことができるようになります。

glideで使えるデータの型について解説しました→glideのデータの型23種の概要をまるっと解説はこちら。

スプレッドシートの名称、リンク、同期ボタン

Reference data synchronization

使用しているスプレッドシートの情報が表示されます。glide tableを使っている場合は見なくていいです。スプレッドシート名をクリックするとそのファイルを開きます。スプレッドシートを変更した時すぐにアプリに反映させたい時は同期ボタンを押すと即反映してくれます。

アプリ設定画面

App setting screen

アプリ設定画面では、アプリの全体的な設定を編集できます。項目は10個。

  1. Appearance~外観~
  2. App Info~アプリ情報~
  3. Privacy~プライバシー~
  4. Sharing~共有~
  5. Sign-in Screen~サインイン画面~
  6. User Agreements~ユーザーの同意~
  7. Data~データ~
  8. Template~テンプレート~
  9. Billing~プラン情報~
  10. Integrations~外部ツール連携~

Appearance~外観~

Appearance

アプリの外観に関する設定が行えます。設定可能な項目は以下。

  • テーマカラーの選択
  • スタイルの選択
  • デバイスでの見え方
  • フォント
  • タブ名称の表示非表示切り替え
  • タブレット、PCの外観設定(有料版のみ)

個人的にはもうちょっといじれると嬉しいなぁ~と思います。glideで作ったアプリはどうしても、デフォルトの設定項目だけだと同じ感じになりがち(画像を多様すればオリジナリティは出せます)なので、アップデートに期待です。(他力本願)

App Info~アプリ情報~

App Info

アプリ情報の設定画面です。アイコンをテンプレートや自作のものから選択したり、アプリの名称、制作者、簡単な内容説明が編集できます。アプリを作った直後は制作者の名前がグーグルアカウントに紐づけられていますので、本名などで登録していて名前がばれたくない場合はアプリを公開する前に必ず変更しておきましょう。

内容を記入する欄はアプリを公開すると、トップ画面に表示されますので、アプリの主旨や簡単な使い方などを入れとくと良いと思います。

Privacy~プライバシー~

Privacy

プライバシー設定の項目では、アプリの公開設定などが編集できます。

PUBLIC SIGN-IN

Public…リンクを知っているすべてのユーザーが使用可能
Public with email…メールアドレを入力してログインすればだれでも使用可能

PRIVATE SIGN-IN

Only I can sign in…自分だけがサインイン可能
Limit access by password…パスワードによるアクセス制限をかける。無料版では同時使用人数が1人。
Limit access to emails in user profiles…翻訳すると「ユーザープロファイルの電子メールへのアクセスを制限する」となりますが、よく分かりません。※有料版のみ
Limit access to emails in sheet…翻訳すると「シート内のメールへのアクセスを制限する」となります。こちらも使ったことがないのでよく分かりません。※有料版のみ

おそらくほとんどの方は「PUBLIC SIGN-IN」のどちらかを使うことになると思いますので、その二つだけ使い分けられればOKだと思います。

User email addresse

ユーザーがログインするときに入力してもらうメールアドレスの収集タイプが選べます。無料版ではユーザーが入力したメールアドレスは暗号化されglide上に表示されます。実際のアドレスを収集したい場合は有料版に切り替える必要があります。

Sharing~共有~

Sharing

共有画面の設定ですが有料版のみとなっています。
APP COPYの欄にチェックを入れると、アプリのリンクを知っている人が、アプリ内部のデータをすべてコピー可能になります。普段はチェックする必要ありません。個人情報などを扱う場合は特に注意しましょう!

Sign-in Screen~サインイン画面~

Sign-in Screen

ログイン必須のアプリを作成する場合に表示されるサインイン画面の設定です。無料版と有料版で編集可能な枠が変わってきます。

User Agreements~ユーザーの同意~

User Agreements

同意を求めるチェックボックスの表示非表示の設定です。無料版では表示できません。

Data~データ~

Data

REFRESH
アプリ更新のタイミングを選択。無料版ではOnly on editのみ選択可能。
While editing or using the appは、スプレッドシートにWebデータを定期的に抽出するような関数を組み込んでいる場合、アプリの手動編集があったかどうかに関わらず、編集中やアプリの使用中に定期的にデータを更新し常に最新の状態に保ってくれます。

DATA EXPORT
アプリ内のデータをファイルにしてエクスポートします。

Delete User Data
ユーザーを指定してそのユーザーに紐づいたデータを削除します。

Template~テンプレート~

Template

アプリ名、内容、ビデオデモ、価格などを設定し自分のアプリをテンプレートとして配布します。

Billing~プラン情報~

Billing

アプリの現在のプランとアップグレード。

Integrations~外部ツール連携~

Integrations

外部ツールとの連携設定です。グーグルアナリティクスに連携しアクセス情報を解析(有料版のみ)したり、Zapierと連携し、アプリと外部ツール(Gmail、Twitter、Googledrive、Googlecalender等々)を繋げます。Zapierについてはまた別で解説します!

知らないと損?作業効率爆上がりグッズ

アプリやツールを開発する際はどうしても作業時間が長くなり、疲れやストレスがたまりがちです。

そんな時にあったら嬉しいお役立ちグッズをまとめました!良いアイデアやツールを生かすため、まずは環境を整えましょう!

おすすめグッズの記事はこちら→PCの作業効率爆あがり!おすすめグッズ大特集!

ノーコードで稼げるの?

はい、可能です。

スキルを身に付けた後どうするか?

分かりやすくまとめました。興味がある方は読んでみてください。

個別相談はこちら

作りたいアプリがあるけどどうやっていいかわからない!というひとがいましたら、個別に相談に乗りますのでこちらへご連絡ください。

アプリ開発画面の使い方まとめ

今回はアプリ開発画面の使い方を解説しましたがいかがだったでしょうか?まだ私も完璧に理解しているわけではありませんが、お役に立てれば幸いです。

glide公式リンクはこちら↓

glide専用ラインオープンチャット作りました!お気軽にご参加ください。イェイイェイ🐣

これでアプリを作る準備は整いました!レッツトライ!

ノーコードで即行動
とりすたんの座右の銘

ABOUT ME
とりすたん
glideというノーコードツールを使いアプリをゴニョゴニョしています。エンジニアではございませんので専門用語とかはヤメテください。 中の人は人口減少に苦しむ地方で小売り、飲食店を営む経営者です。ネットショップでは年間8000件全国へ商品をお届けしております。 ノーコードブログ&ビジネスに即使えるSNS必勝法を発信中!!!