投稿

AppSheetで製品マニュアル管理アプリを自作する その1

Googleのノーコードツール『 AppSheet 』を使えば、専門的なプログラミング知識が無くても、短期間で簡単にアプリを作成することができます。

今回は『 AppSheet 』を使用して、製品マニュアルを管理するアプリを自作していきます。

1. データベースを作成

まずは、アプリで入力するデータを保存していくためのデータベースを用意します。

データベースはGoogleスプレッドシートを使用します。

新しいスプレッドシートを開く

新しいスプレッドシートを開き、タイトルを「製品マニュアル管理アプリ」とします。

「製品」シートを作る

シート1の名前を「製品」に変更し、列見出しを入力します。

列見出し

  • 製品ID
  • 名称
  • 分類
  • 種別
  • 概要
  • 画像
  • 登録日

見出しの入力が終わったら、その下にデータを1行分だけ入力します。
※データの内容は下記の通りでなくて大丈夫です。「画像」の部分はあけておいて構いません。

データの入力が終わったら、いよいよアプリを作成していきます。

2. シートからアプリを作成する

ツールバーから「拡張機能」をクリックし、表示されるメニューから、「AppSheet」→「アプリを作成」を選びます。

アプリの作成中であることを示す画面が表示されるので少し待ちます。

アプリの作成が完了すると下記のような画面が表示されるので、画面右上の「×」ボタンをクリックして閉じます。

アプリを作成するためのエディタ画面が表示されます。

ここで、右側に表示されている下記の画面に注目してください。

これは、アプリをスマホで動かしたときの表示や挙動を確認できるプレビュー画面です。

試しに下記の場所をクリックしてみましょう。

すると画面が切り替わり、下のような詳細画面が表示されます。

これを見ると、スプレッドシートに入力していた内容が、アプリの項目やデータに反映されていることが分かります。

それでは画面左上の矢印ボタンか、もしくは画面下部の「製品」と書かれた箇所をクリックして一覧画面に戻り、今度は画面右下に表示された「+」マークを押してください。

すると今度は下のような画面が立ち上がります。

これは、製品を新規で登録するための入力フォーム画面になります。

試しに、下記のように項目を入れてみましょう。
※製品IDには最初から自動で文字が入力されていますが、これはそのままにしておいて大丈夫です。次回ご説明します。

  • 名称———テスト家電
  • 分類———家電
  • 種別———テレビ
  • メーカー—メーカーA
  • 概要———テスト入力です
  • 画像———※空欄のまま
  • 日付———※既に入力されていればそのままにしておいてください

入力が終わったら「Save」を押してみましょう

すると画面が一覧表示に切り替わります。先ほど入力した製品が、一覧リストの中に追加されていることが分かります。

それでは、今度は最初に作成したスプレッドシートを開いてみましょう。すると、先ほどアプリで入力したデータが、スプレッドシートの一番下の行に追加されていることが分かります。

このように、スプレッドシートに入力した列の見出しやデータから、AppSheetがアプリの土台を自動的に作成してくれたことが分かります。

実際にアプリを使えるものにするためには、見た目や設定を整えたり日本語表示に変えるなど、手を加えてやる必要がありますが、とても簡単にアプリを作成できることがイメージできたのではないかと思います。

それでは次回以降で、アプリに手を加えていきたいと思います。

ナナウェブでは、AppSheetを使用した
アプリ制作のご依頼を承っております。
ノーコードツールの特性を活かし、
短納期・低価格でご提供いたします。
詳細については、
お気軽にお問い合わせください。

 

CONTACT

お問い合わせ

見積もりのご依頼やWEB制作/印刷物制作に関する
ご質問など、お気軽にお問い合わせください

050-5219-1554 営業時間 平日9:00~17:00
トップへ戻るボタン