-->

【自分で作るAppSheet】アプリのイメージとAppSheetへのサインアップ(旅行のホテルと思い出写真を一緒に管理するアプリを作る(1))

2021/04/29

Appsheet

t f B! P L

【AppSheetで旅の思い出】旅行で泊まったホテルを写真と一緒に管理するアプリを作る:アプリの作成

 

はじめに

コロナ禍が続く中、皆さんいろいろな不便をされていることと思います。中でも長距離の移動を伴う旅行はなかなか難しいですね。国内旅行はもちろん、帰国時のPCR検査や隔離を伴う海外旅行は尚更です。

ほんの一年ほど前は、国内旅行も海外旅行も普通に行けていたのですが、今はコロナ禍の終わりをじっと待つばかりです。ということで、せめてこれまでに行った旅行を振り返り、楽しい思い出に浸ると共に、せっかくなので写真や旅の思い出をまとめてみよう、ということで、このアプリを作ってみることにしました。

AppSheetでは、住所から地図を表示したり、写真を管理したりすることができます。旅行の思い出を綴るにはちょうど良い機能です。AppSheetの基本的な機能だけで作ることができます。時間も数時間でできますので、ゴールデンウィークの暇つぶしにでも、いかがでしょうか。

なお、アプリに出てくるホテルのデータは、サンプルデータとして、各ホテルのホームページからお借りしました。

シリーズ一覧

この記事は全4回シリーズです。

こちらもご覧ください。

第1回:アプリのイメージとAppSheetへのログイン

第2回:データベースとアプリの作成

第3回:テーブルの設定

第4回:アプリ画面の設定で完成

アプリのイメージ

こんなアプリを作ります。

ホテルをホテルチェーン別に管理、旅の履歴は宿泊履歴としてホテルデータに紐つくとともに、旅の写真は旅程ごとに管理することができるようにします。つまり、いつ・どこのホテルに泊まってどんな楽しいことがあったかを、旅行ごとに写真で見ることができ、何度も行くホテルのデータもまとめて記録される、ということです。画面イメージは以下のような感じです。


データベースとなるスプレッドシートには、

  • ホテルチェーンリスト
  • ホテルリスト
  • 宿泊履歴
  • 写真リスト
  • 国リスト

を作ります。それぞれを参照することで、データ入力を簡単に、かつ旅の思い出を見やすくすることを目指します。

完成したアプリの使い方

「ホテルチェーン」

自分が使っているホテルチェーンの情報を登録できます。ホテルチェーンをホテルと紐付きにすることができます。また、ホテルチェーンを見るときに、チェーンで登録されたホテルをリストで見ることができます。


AppSheetで旅の思い出、ホテルチェーンリストの画面イメージ

「ホテルリスト」

泊まった(泊まる)ホテルの情報を登録します。ホテル名、チェーン、住所などの基本情報を入力します。チェーンは「ホテルチェーン」リストと紐ついており、ボタンで選択できます。

入力された住所がGoogleマップの住所と紐付きされると、地図で場所を確認できるようになります。

ホテルのイメージ写真を1枚貼り付けることができます。


AppSheetで旅の思い出、ホテルリストのイメージ AppSheetで旅の思い出、ホテルリストの詳細画面イメージ

「宿泊履歴」

プラスボタンを押して、実際に泊まった履歴を登録します。ホテル名、チェックイン、チェックアウト日などです。ホテル名はホテルリストがボタン形式で表示され、検索もできます。リストにない場合、「New」をクリックすると、「ホテルリスト」の入力画面に遷移しホテルの情報を登録できます。登録完了すると宿泊履歴画面に戻ってきます。

登録した履歴はリストになって表示されます。履歴を選ぶと、宿泊情報と、写真リストが表示されます。「Add」をクリックして写真を追加することができます。枚数に制限はありません。写真リストは、宿泊履歴ごとにまとめて表示されます。同じホテルに複数回宿泊しても、それぞれの宿泊に関連する写真が表示されます。


AppSheetで旅の思い出、宿泊履歴リストのイメージ AppSheetで旅の思い出、宿泊履歴リストの詳細画面

「地図」

登録したホテルを世界地図に表示します。ポインタをクリックするとホテルの情報を表示します。


AppSheetで旅の思い出、地図ビューの表示 AppSheetで旅の思い出、地図ビューの詳細画面

AppSheetの導入とログイン

まず、AppSheetへのログインはお済みでしょうか?まだの場合は、以下記事もご覧ください。

【AppSheetで在庫管理】AppSheetの導入とテーブルの設定

AppSheetで食料品の在庫管理アプリを作る。まずはAppSheetを導入し、データベースとなるスプレッドシートのテーブル設定をしてみます。

ログインまでの手順は以下の通りです。と言ってもデータベースを作るアカウントとAppSheetを連携させるだけです。

  1. AppSheetのサイトにアクセス
    こちらのサイトです。

    https://www.appsheet.com/

  2. 右上の「Start for free」をクリック

    AppSheetで旅の思い出、AppSheetサイトにログイン

  3. データベースを作るアプリケーションを選択
    ここではGoogleスプレッドシートを選択しますが、他のアプリケーションでも同じです。


    AppSheetで旅の思い出、AppSheetで使うアプリケーションを選択

  4. Googleアカウントにログイン(もしくは他のアプリケーションのアカウントにログイン)
    Google以外のアプリケーションの場合もそれぞれのアカウントへのログイン画面につながります。

    AppSheetで旅の思い出、Googleアカウントを選んでログイン

  5. AppSheetのGoogleドライブへのアクセスを許可


    AppSheetで旅の思い出、AppSheetのGoogleドライブへのアクセスを許可



  6. AppSheetの初期画面に到着


    AppSheetで旅の思い出、AppSheetにログインして初期画面へ

    Quick Startで新しいアプリを作成開始することもできますが、今回はまず、データベースとなるスプレッドシートを作成してAppSheetにアプリを自動作成させることにします。

アプリ作成手順

プリ作成の大まかな手順は以下の通りです。

  1. Googleスプレッドシートでデータベースを作成、アプリを作成
  2. AppSheetですべてのシートを読み込む
  3. テーブルを設定
  4. 参照リスト(チェーンリスト、国リスト、写真リストなど)の作成と各テーブルへの紐つけ
  5. 表示の設定
  6. 利用者への配信、必要に応じデプロイ

となります。なお、Googleスプレッドシートでのデータベース作成が便利ですが、Excel等他のスプレッドシートでもアプリを作成することができます。


では、引き続いて第2回:スプレッドシートによるデータベースとアプリの作成に進みます。

GlideとAppSheet、どちらにする?

ところで、ノーコード開発プラットフォームはAppSheetだけではありません。代表的なものとしてGlideが挙げられます。では、どのツールがいいのでしょうか?

GlideとAppSheetの違いをまとめてみました。以下記事もぜひご覧ください。


GlideとAppSheet、どちらにする?

ノーコードでアプリを開発するならどのプラットフォームが良いのか?代表的なプラットフォームであるAppSheetとGlideを比較してみました。


このブログを検索

最新記事はこちら

【Africa Daily】ケニアが検問に辟易しているのはなぜか?

(Unsplash) 今日のエピソード BBC World Service - Africa Daily, Why is Kenya fed up with police roadblocks? Complaints of petty corruption are forcin...

自己紹介

そろそろネットで何かやってみるか、という程度。のんびり、てきとーに。