Glideの使い方② アプリ開発の基本操作を解説【前編】

NoCode

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

Googleスプレッドシートを利用して、NoCode(ノーコード)でアプリを高速に開発できるGlide。

当ブログでは以前にGlideの概要や登録方法Glideの開発画面の構成について解説しました。

この記事は「Glideの使い方」の第2弾として、アプリ開発の基本操作を解説します。

なお、Glideには豊富なテンプレートが用意されていますが、ここでは一から開発する流れをご紹介するので、基本操作を一通り把握することができますよ。

てつごろう
てつごろう

Glideのことを初めて知った方は、下の関連記事も読んで欲しいんだよ。


 筆者について

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

てつごろう|@Te256g


スポンサーリンク

Glideの使い方|アプリ開発の基本操作を解説

Glideで実際にアプリを開発しながら、基本的な操作方法を解説していきます。

ここでは下図のように、自分のお気に入りのレストラン情報を登録するアプリを例に解説しますね。

アプリの完成イメージ(ホーム画面)

アプリの完成イメージ(ホーム)
アプリの完成イメージ(ホーム)

アプリの完成イメージ(詳細画面)

アプリの完成イメージ(詳細)
アプリの完成イメージ(詳細)
Glideでのアプリ開発の流れ
  1. Googleスプレッドシートでデータを準備する
  2. アプリを新規作成する
  3. ベースのデザインを変更する
  4. ホーム画面を作る
  5. 一覧画面を作る
  6. 詳細画面を作る
  7. データベースを編集する
  8. 動作確認・シェアする

この記事では1〜4までの手順を解説します。

5〜8の解説は「Glideの使い方② アプリ開発の基本操作を解説【後編】」をご覧ください。

てつごろう
てつごろう

ボリュームが多いので複数回に分けるんだよ。

1. Googleスプレッドシートでデータを準備する

まずはアプリに表示するためのデータを準備しましょう。

Googleスプレッドシートで、以下のように2枚のシートから構成されるファイルを作ってください。

※開発したいアプリによってデータの項目、シート名をどうするかはお任せします。
この記事を見ながら開発をしていく場合は、便宜上、以下の仕様に沿って作っていただくことをおすすめします。

Googleスプレッドシートで作るファイルの仕様
  • シート1
    シート名:ホーム
    内容:ホーム画面に必要な項目を登録するシート
  • シート2
    シート名:一覧
    内容:詳細情報を登録するシート

データは最初からすべて登録しておく必要はありません。

必要な項目名だけ入力しておけば一旦OKです。

1-1. シート1:ホーム画面用のシート

下図のような列を作成して、それぞれお好きなように文字を入力してください。

ホーム画面の項目
  • アプリ名
  • アプリ説明
ホーム画面用のシート
ホーム画面用のシート

1-2. シート2:詳細情報のシート

ホームと同様に、以下のような列を作成して、それぞれお好きなように文字を入力してください。

詳細情報の項目
  • 店名
  • カテゴリー
  • 都市名
  • 所在地
  • URL
  • 一言コメント
詳細情報のシート
詳細情報のシート

2. アプリを新規作成する

Glideでアプリの新規作成をしましょう。

Glideのダッシュボードにログインしたら、Create appの「From Google Sheet」で新規作成します。

アプリの新規作成
アプリの新規作成

先ほど作成したGoogleスプレッドシートのファイルを選択したら「Select」をクリックしてください。

ファイルの選択
ファイルの選択

このようにアプリの開発画面が表示されます。

アプリ開発画面
アプリ開発画面

3. ベースのデザインを変更する

まずはアプリ全体のベースとなるデザインを変更しましょう。

左のメニューからSettingsをクリックし、右に表示されたAppearanceをクリックしてください。

ベースのデザインを変更
ベースのデザインを変更

Appearanceのメニューが表示されるので、色や文字などを好みに合わせて変更してみましょう。

  • ACCENT COLOR:アプリのイメージとなる色
  • THEME:アプリ全体のデザイン
  • TYPOGRAPHY:フォントスタイル
アプリ全体のデザイン
アプリ全体のデザイン
てつごろう
てつごろう

色やテーマだけでも雰囲気が大きく違ってくるので、色々試してみて。

4. ホーム画面を作る

ホーム画面を作っていきましょう。

4-1. メイン画像を登録する

ホーム画面で大きく見せるメイン画像を登録しましょう。

そのためにはまずデータベースに登録する必要があります。

4-1-1. データベースにカラムを追加する

左メニューのDataをクリックして、データベースの操作画面を開きましょう。

右上にあるAdd Columnで、メイン画像を登録するためのカラム(列)を追加します。

データベースを操作
データベースを操作

下図を参考に、新しいカラムを設定してください。

  • Label:「メイン画像」に変更
  • Column Type:Basic Column→Imageを選択
Imageを追加
Imageを追加

カラムの設定ができたらDoneボタンで完了です。

追加したらDoneをクリック
追加したらDoneをクリック

4-1-2. カラムにデータを登録する

続いて、追加した「メイン画像」に写真を登録する手順です。

メイン画像列にマウスを乗せると「+」ボタンが表示されるので、そこをクリックすると画像の選択画面が表示されます。

「Unsplash」タブでは、無料素材集から画像を探して利用することができます。

自分の写真を使う場合は「Upload」からアップロードしましょう。

メイン画像を登録
メイン画像を登録

4-1-3. ホーム画面の見出しに背景イメージを追加する

次は、ホーム画面のタイトル部分の背景に画像を設定します。

左メニューのLayoutをクリック(①)してレイアウト編集画面を表示したら、タイトルをクリックして選択(②)します。

タイトルの設定メニューが左に表示されたらImageの「…」をクリック(③)して「メイン画像」を選択してください。

ホーム画面の背景を設定
ホーム画面の背景を設定

するとこのように、タイトルに背景が追加されます。

問題なければ「<」ボタンで前の画面に戻りましょう。

タイトルの背景に画像が設定
タイトルの背景に画像が設定

4-2. コンポーネントを追加する

ホーム画面にコンポーネントを追加していきます。

左メニューのLayoutをクリックして、Componentsの右にある「+」ボタンでコンポーネント追加メニューを表示します。

コンポーネントを追加
コンポーネントを追加

コンポーネントの一覧から「Inline List」をクリックします。

Inline Listを追加
Inline Listを追加

ちなみにLISTタブに切り替えると、コンポーネントがリスト形式で表示されます。

Imageコンポーネントを追加すると、このように自動的に先ほど追加した画像が表示されます。

4-3. コンポーネントのソースを変更する

Inline Listを追加すると、このようにホーム画面にリストが追加されます。

最初はデータの元(Source)が「ホーム」(Googleスプレッドシートの「ホーム」シート)が選択されているので、下図のように「一覧」に変更しましょう。

リストのデータソースを変更
リストのデータソースを変更

このように「一覧」のデータが表示されればOKです。

データソースが変更された
データソースが変更された

4-4. コンポーネントのスタイルを変更する

Inline Listを追加した直後は、STYLEがList(リスト形式)になっています。

コンポーネントのスタイル
コンポーネントのスタイル

例えばSTYLEをTilesに変更すると、下図のようにタイル状に形が変化します。

スタイルをタイルに変更
スタイルをタイルに変更

レストランの詳細のデータベースで、まだ写真が登録されていない場合はこのように表示されます。

写真を登録する場合は、以下の手順でデータベースに追加しましょう。

一覧に「写真カラム」を追加
一覧に「写真カラム」を追加

① 「Data」をクリックしてデータベースを開く
② 「Add Column」でカラムを追加する
③ Labelに「写真」と入力する
④ Column Typeをクリック
⑤ Basic Columnをクリック
⑥ Imageを選択

上記手順で「写真」カラムができたら「+」ボタンで写真を追加しましょう。

写真を追加
写真を追加

Layout画面に戻り、ホーム画面のリストを選択して右にリストの設定画面を表示しましょう。

Imageの右のボックスをクリックして「写真」を選ぶと、先ほど追加した写真が表示されます。

4-5. リストにタグや詳細文、キャプションなどを表示する

最後に、ホーム画面のリスト上にタグや詳細文、キャプションなどを表示する方法を解説します。

設定項目はたくさんあるので、ここでは一部を抜粋してご紹介します。

※ここではSTYLEをTilesにした場合です。

リストの各種設定
リストの各種設
  • Data-Details:詳細文を表示します。ここでは都市名を選択しました。
  • DESIGN-Tile shape:タイルの形を変更します。ここではSquareを設定。
  • OVERLAYS-Tag:写真の左上にタグが追加されます。ここではレストランのカテゴリーを表示しています。
  • OVERLAYS-Caption:キャプションを追加できます。ここでは一言コメントを表示。

まとめ

Glideでアプリを開発する時の基本的な操作方法を解説してきました。

今回はアプリの新規作成からホーム画面の設定までの手順をご紹介しましたが、一覧や詳細画面の設定、データベースの編集方法、動作確認・シェアの方法については次回を予定しています。

後編はこちら≫ Glideの使い方② アプリ開発の基本操作を解説【後編】

テンプレートを元に開発することも可能ですが、一から開発をしていくことで流れを理解することができると思います。

この記事を参考に、ぜひご自身でもアプリ開発に挑戦してみてくださいね。

今回サンプルで利用させていただいたレストラン情報について

この記事でご紹介したアプリでは、実在するレストランの写真や情報を使わせていただきました。
最後にご紹介しておきます
実際に僕が訪問したお店の中でも特に感動を覚えるほど美味しかったお店ばかりです。

  • 和むら(伊東市):特大海老フライと金目鯛の煮付けが名物
  • SHOZO黒磯本店(那須塩原市):町おこしで勢いのある黒磯の古民家カフェ。東京・青山にも店舗があります。
  • たん焼 忍(四ツ谷):分厚いタンシチュー、ゆでたんが有名。
アプリ開発に必須のUI/UXデザインを学ぶ
アプリ開発には、ユーザビリティへの理解が重要です。iPhone・Androidアプリのデザインを学ぶなら、自宅で学べるオンラインスクール【TechAcademy】 UI/UXデザインコースがおすすめ。実務に近い環境で、学びながら手を動かして制作。社会に通用するスキルを習得できます。
NoCode
てつごろうをフォローする
てつごろぐ

コメント

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