Glideの使い方① 開発画面の構成

Glideの使い方 開発画面の構成を解説NoCode

こんにちは!
てつごろう(@Te256g)です。

Glideは、Googleスプレッドシートを利用してNoCode(ノーコード)でアプリ開発ができるツールです。

過去の記事ではGlideの概要や登録方法などを解説しましたが、今回からはGlideの使い方を解説していきます。

この記事ではまず、Glideの開発画面の構成についてご紹介します。

てつごろう
てつごろう

この記事を見ながら、ぜひ自分でも触ってみて欲しいんだよ。
直感的に操作できることが分かると思うんだよ。

日本語訳について

この記事で記載している日本語は、筆者が独自に翻訳したものです。
大きな間違いはないと思いますが、正式な日本語訳ではない場合がありますので、ご了承ください。


 筆者について

大学時代に情報システム系学科でC、Java、VC++を学ぶ。IT企業ではハードウェアエンジニアとしてWindows/UNIX系システムの保守・運用を担当。現在は個人でWebサイト制作を請け負っています。NoCodeの可能性に惹かれ、Webサービス開発に向けて勉強中。

てつごろう|@Te256g


スポンサーリンク

Glideの使い方|開発画面の構成

Glideの使い方第1弾として、開発をする時の画面の構成について解説します。

開発画面はこのようになっています。

開発画面
開発画面

開発画面はこのように大きく左側のツール、中央のアプリ画面、右側の設定メニューに分かれています。

左側のツールによって右側(15)に表示される設定項目が切り替わるため、各設定項目の中でご説明しています。

ここからは(15)以外の各項目について解説していきます。

(1)ダッシュボードに戻る(Back to App Dashboard)

Glideのロゴマークをクリックすると、ダッシュボードに戻ることができます。

(2)アプリのアイコン

(8)と同じで、アプリ全般の設定メニューが表示されます。

ちなみにアイコンは(8)Settingsの中にあるApp Infoで変更できます。

アイコンの設定
アイコンの設定

(3)プランやデータベースの使用状況(EDITS)

契約しているプランや、データベースの使用状況などを確認できます。

プランや使用状況
プランや使用状況

(4)レイアウト(Layout)

右側に「Properties」が表示されて、画面のレイアウトや機能などを追加・編集することができます。

LAYOUT、FEATURES、ADDの3つのメニューがあります。

レイアウト
レイアウト

LAYOUT

画面のレイアウトを編集することができます。

STYLEでどれを指定するかによって、設定できる項目は変わってきます。

ここではCards(カード型)を例に解説します。

  • STYLE:リストのスタイルを指定します。上図はカード型。
  • DATA:表示する項目と、引用するデータを指定します。
    例えばImageにはスプレッドシートの「photo」列を定義しています。
  • DESIGN:デザインを指定します。Cardsの場合、画像の参照元やカードの形、大きさなどを指定できます。
  • OPTIONS:「Only show a few items」にチェックを入れて数を指定すると、表示数の上限を指定できます。
  • TEXT STYLE:テキストのサイズなどを指定できます。
  • OVERLAYS:タグやアバターなどを指定できます。

FEATURES

機能の設定
機能の設定

各種機能の設定ができます。

主な機能を抜粋してご紹介します。

  • SEARCH:「Show search bar」にチェックを入れると検索窓が表示されます。
  • GROUP:「Group by」のボックスで指定した項目別に分類して表示されます。
  • IN-APP-FILTER:「Filter by」のボックスで選択した項目でフィルタリングできる機能が追加されます。

ADD

「Allow users to add items」にチェックを入れると、アプリのユーザーが自分でアイテムを登録できる機能が追加されます。

下図のように、アプリに「+(プラス)」ボタンが追加されます。

アイテム追加ボタン
アイテム追加ボタン

この画面では、ユーザーが自分で情報追加できる項目を指定します。

右上の青い「+」ボタンで、項目を追加することができます。

ユーザーが追加できる項目を設定
ユーザーが追加できる項目を設定

(5)タブ(Tabs)

タブとは、ページのようなイメージです。

例えば下図の場合「My Restaurants」と「Restaurants」という2つのページがあります。

右上の青い「+」ボタンでタブを増やすことができます。

タブ
タブ

タブを追加するとこのように設定画面が表示されます。

Sourceでは、Googleスプレッドシートのどのシートをデータソースにするかを指定します。

例えばレストラン一覧のページを作りたい場合、スプレッドシートに「Restaurants」というシートを作ってデータを保存しておき、下図のSourceでそのシートを指定すると、このタブで表示することができます。

タブを追加
タブを追加

(6)データ(Data)

データを格納するデータベースを閲覧・編集することができます。

元となるGoogleスプレッドシートと連動しているので、ここで変更した内容はスプレッドシートに自動的に反映されます。

逆にスプレッドシートで編集すると、こちらにも反映します。

「Add Column」でカラム(列)を追加することができます。

データ
データ
直接入力の不具合

この画面で日本語を直接すると、正しく入力できないようです。(2020/8/25時点)
Googleスプレッドシート側で編集するようにしましょう。

(7)プレビューの切り替え(Preview as)

ユーザーや端末毎に見え方を切り替える
ユーザーや端末毎に見え方を切り替える

ユーザーや端末毎で、画面の見え方を切り替えて確認する機能です。

例えばユーザー毎に閲覧権限を与えている(ユーザーAには見せてもいいけどBには見せないコンテンツがある)場合に、それぞれのユーザーでの見え方を確認できます。

またiOSとAndroidでの見え方の違いも確認することができます。

(8)設定(Settings)

アプリ全般の設定をします。

例えばAppearanceでは、アクセントカラー(この図では赤い色)やテーマ(アプリ全体のベースとなるデザイン)、フォントスタイルを変更することができます。

アプリ全体のデザイン
アプリ全体のデザイン

(9)シートの編集(Edit sheet)

Googleスプレッドシートが開いて、編集することができます。

(10)シートの再読み込み(Reload sheet)

Googleスプレッドシートの再読み込みを行います。

スプレッドシートで変更した後、このボタンをクリックするとアプリにも反映します。

(11)操作モード(Play Mode)

開発画面は実際に操作して動作確認するモードです。

Play Modeの状態であれば、ボタンやメニューなどをタップして、動作を確認することができます。

(12)選択モード(Select Mode)

Selectモードに切り替えると、マウスでクリックした要素の設定メニューを表示することができます。

(13)アップグレード(UPGRADE)

Pro版にアップグレードする時はこのボタンをクリックしてください。

(14)シェア(SHARE)

アプリをシェアすることができます。

QRコードやリンクが自動で発行されます。

電話番号を入力すれば送信することも可能です。

シェア
シェア

まとめ

今回はGlideの開発画面の構成について解説しました。

直感的に開発ができることがお分りいただけるのではないでしょうか?

実際に触ってみると理解も早いと思いますので、ぜひご自身でもGlideでアプリ開発にチャレンジしてみてください!

アプリ開発に必須のUI/UXデザインを学ぶ
アプリ開発には、ユーザビリティへの理解が重要です。iPhone・Androidアプリのデザインを学ぶなら、自宅で学べるオンラインスクール【TechAcademy】 UI/UXデザインコースがおすすめ。実務に近い環境で、学びながら手を動かして制作。社会に通用するスキルを習得できます。
NoCode
てつごろうをフォローする
てつごろぐ

コメント

タイトルとURLをコピーしました