【Glide】連絡帳アプリの作成

Glide,NoCode

ノーコード開発ツールGlideで連絡帳アプリをつくる手順です。
スプレッドシートを使って簡単にアプリの公開までできます。

データセットの準備

スプレッドシートの作成

ファイルの作成

下記ページからメンバーリストの内容をスプレッドシートに保存します。

  • ファイル名:連絡帳アプリ
  • シート名:メンバーリスト

カラムの追加

このシートの右端に以下のカラムを追加します。

  • カラム名:写真
  • 値:値は不要なので空欄のままにします

シートの追加

追加で以下のシートを作成します

  • シート名:出身地
  • カラム名1:名称
  • 名称の値:日本、イタリア、イギリス、ドイツ(メンバーリストシートの出身地をユニークにして入力します)
  • カラム名2:アイコン
  • アイコンの値:値は不要なので空欄のままにします

データセットからアプリを作成

  1. My Apps画面で New APP をクリックします
  2. Select a sourceで Google Sheets を選択します
  3. Select a fileで 連絡帳アプリ を選択します
  4. データ反映後の画面イメージが表示されます

メンバーリストタブの調整

  1. TABSから メンバーリスト を選択します
  2. SCREENの Inline List をクリックします

メンバーリストInline Listの調整

①Inline Listの各要素を以下の設定にします。

  • STYLE:Tiles
  • DATA
    • Title:名前
    • Details:出身地
    • Image:写真
  • DESIGN
    • Image is:URL
    • Tile shape:Square
    • Tiles per row:1行2列に合わせる

②各メンバーのエリアに写真データをドラッグ&ドロップします。

以下のような画面になります。

メンバーリストDetailsの調整

  1. メンバーを1人クリックします
  2. 不要な要素は☓ボタンで消去し SCREEN を以下の構成にします
  • TITLE
    • DATA
      • Title:名前
      • Details:Customを選択し空欄のままにしておく
      • Image:写真
    • DESIGN
      • Image is:URL
  • Action Text
    • DATA
      • Text:職業
    • DESIGN
      • Title:職業
  • Email
    • DATA
      • To:メールアドレス
      • Subject以下:必要に応じて設定する
    • DESIGN
      • Title:メールアドレス
  • Phone(+ボタンからアイコンを追加する)
    • DATA
      • Column:電話番号
      • Message body:空欄のまま
    • DESIGN
      • Title:電話番号
      • Allow text messageにチェック

出身地タブの調整

  1. TABSから 出身地 を選択します
  2. SCREENの Inline List をクリックします

出身地Inline Listの調整

①Inline Listの各要素を以下の設定にします。

  • STYLE:Tiles
  • DATA
    • Title:名称
    • Details:−
    • Image:アイコン
  • DESIGN
    • Image is:URL
    • Tile shape:3:2
    • Tiles per row:1行2列に合わせる

②各出身地のエリアにアイコンデータをドラッグ&ドロップします。

以下のような画面になります。

出身地Detailsの調整

  1. 地名を1つクリックします
  2. SCREEN を以下の構成にします
  • Title
    • DATA
      • Title:名称
      • Details:Customを選択し空欄のままにしておく
      • Image:アイコン
    • DESIGN
      • Image is:URL

Relationの作成(出身地→メンバー)

出身地タブで地名をクリックした時、その出身地のメンバーを表示できるようにします。

Relationを作成して出身地とメンバーを関連付ける

  1. メニュー上部の Data アイコンをクリックする
  2. 出身地シートを選択する
  3. 右上の+ボタンをクリックし、以下を設定してカラムを追加する
    • Label:出身者
    • Column Type:Relation
    • CONFIGURATION
      • 上段:名称
      • 下段:メンバーリスト > 出身地
    • Match multipleにチェック

作成した出身者項目を表示する

  1. Layout画面に戻り 出身地 タブを選択状態にする
  2. 地名を1つをクリックする
  3. SCREEN右の+ボタンをクリックする
  4. LISTS > Inline List を選択する
  5. 適宜表示項目を修正する

以下のような画面になります。

Relationの作成(メンバー→出身地)

メンバーリストタブでメンバーをクリックした時、表示される出身地から出身地のメンバーを表示できるようにします。

Relationを作成して出身地とメンバーを関連付ける

  1. メニュー上部の Data アイコンをクリックする
  2. メンバーリストシートを選択する
  3. 右上の+ボタンをクリックし、以下を設定してカラムを追加する
    • Label:出身地
    • Column Type:Relation
    • CONFIGURATION
      • 上段:出身地
      • 下段:出身地 > 名称

作成した出身地項目を表示する

  1. Layout画面に戻り メンバーリスト タブを選択状態にする
  2. メンバーを1人クリックする
  3. Screen右の+ボタンをクリックする
  4. BUTTONS > Relation を選択する
  5. Detailsを空欄にする(Customを選択し空欄のままにする)
  6. 見やすいよう職業の上に項目をドラッグして移動する

以下のような画面になります。

チャットタブの追加

TABSカテゴリにある Chat を非表示設定から表示設定にするとタブを追加することができます。
メッセージを利用する場合は最初に認証作業がを行います。

アプリの公開

画面右上の Publish ボタンからアプリを公開することができます。

公開前のアプリ設定確認

  1. メニュー上部の Settings アイコンをクリックする
  2. 以下の設定を必要に応じて変更する
    • Appearance
      • 基本色の変更
    • App Info
      • ICON:アプリの表示アイコン
      • Name:アプリの名前

アプリの公開

  1. Publish をクリックする
  2. Publish app をクリックする
  3. QRコード、URLリンクが表示される

以下のように公開情報が表示されます。

参考書

NoCodeによるツール開発は見た目が使いやすさに直結するため、デザインの基本も勉強しましょう。

Glide,NoCode

Posted by junichi