68
77

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Googleの新サービス「AppSheet」でお酒のカタログアプリを作ってみたよ

Last updated at Posted at 2020-04-14

##はじめに
最近「プログラミングができたらいいのにー」、ていう人が増えている気がしますよね。

でもプログラミングって、いざ勉強しようとするととっつきづらいものだと感じるんですよね。
環境構築? IDEのインストール? 言語? どれ選んだらいいのかわかんないんだけどーーーー!!

よくある光景だと思います。

そんな中、昨今ではコードが不要だとか、ほとんどコードを書かなくてもアプリが作れちゃう、みたいなサービスも出てきています。

ということで、今年の1月にGoogle社が買収したという、
**ほとんどコードを書かなくてもアプリが作れちゃうサービス「AppSheet」**を使って、お酒のカタログアプリを作ってみようと思います。
しかも、基本は無料で使えます!

(ただ触ってみた感じ、やはりデータベースの設計とか、基本的なアプリの作り方を知っている人の方が圧倒的に理解は進むと思います。)

##AppSheetなるものを触ってみる
「ふふん、ほとんどコードを書かなくてもアプリができるなんていい時代だなー」と思って、早速以下のページにアクセスしてみます。
AppSheetの公式ページ

スクリーンショット 2020-04-14 14.59.53.png

画面右上の「Login」ボタンを押します。

スクリーンショット 2020-04-14 15.00.05.png なんでもいいと思いますが、googleアカウントを持っているので、「Google」でのサインインを選択しました。 スクリーンショット 2020-04-14 15.42.22.png こんな感じの画面に遷移します。 僕は色々テストしているので、色々あります) 早速、画面右上の「+New app」をクリックしてみましょう。 めくるめくアプリ制作への第一歩! スクリーンショット 2020-04-14 15.02.11.png おう。。。 どれを選べばいいんだ。

ちょっと触ってみたところ、それぞれ以下のような感じになるようです。
「Start with your own data」:事前にデータを用意しておき、それをもとにしてアプリを作る
「Start with an idea」:アプリ作成時にデータも作ってくれる
「Start with a sample data」:サンプルアプリを利用できる

色々触ってみましたが、僕は「Start with your own data」がとっつきやすかったので、これで進めようと思います。
ただ、事前にデータを用意しないといけません。

データってなんだ? と思われるかもしれません。
アプリ制作をご存知の方だと、「おいおい、もしかしてmysqlとか必要なのかよ」と思われるかもしれません。

いいえ、スプレッドシートを作成してください!

スプレッドシートの詳細は割愛しますが、
簡単に言うと、Googleアカウント利用者が使える、エクセルみたいなものです。
Googleドライブにアクセスして、任意の場所で右クリックして「Googleスプレッドシート」を選択します。

エクセルちっくな画面が表示されます。
スクリーンショット 2020-04-14 15.05.32.png
そして、こんな感じで定義します。
ファイル名は「LiquorDataTest」として、
商品ID、商品名、説明文、画像、URLという項目を記述します。
最後に、タブは「商品」とします。

これで事前準備はOK!

スクリーンショット 2020-04-14 15.02.11.png 改めてこの画面まで進み、「Start with your own data」を選択します。 スクリーンショット 2020-04-14 15.06.22.png 作成するアプリ名とカテゴリーを聞かれるので、 アプリ名に「LiquorListTest」 カテゴリーはよくわからないので、適当に「Sales & CRM」とします。 「Next step: choose your data」をクリックして進みます。 スクリーンショット 2020-04-14 15.06.30.png 続いて、どのデータを使用するかを聞かれます。 先ほど用意したスプレッドシートの出番です。

ここでは「google」を選択します。
(他にもsalesforceと連携もできました。色々データ元は選べるようです)

スクリーンショット 2020-04-14 15.06.51.png googleドライブ内のファイル一覧が表示されるので、先ほど作成した「LiquorListTest」のスプレッドシートを選択します。 スクリーンショット 2020-04-14 16.03.38.png これで、ダッシュボード画面が表示されました。 いよいよアプリの作成が開始です!

画面右側には、スマホでのシミュレータが表示されています。
これで、アプリの変更時の挙動がリアルタイムですぐに確認することができます。

スクリーンショット 2020-04-14 16.07.11.png 画面左の「UX」タブを押すと、作成したスプレッドシートの「商品」タブのデータに紐づいた「商品」ビューが作成されていることがわかります。 スクリーンショット 2020-04-14 16.10.04.png 画面左の「info」タブを押すと、今の構成が図示されます。 「商品」というデータと、それを表示する画面(ビュー)で構成されているアプリ、ということがわかります。

##データを追加して動きをみてみるよ
では、続いて「商品」タブにデータを追加してみます。
以下の感じで各項目にデータを入力します。
「URL」列には、Amazonへの商品のリンクを記載しています。
「画像」のみ、現時点では入力を行なっていません。
スクリーンショット 2020-04-14 15.09.34.png

AppSheetの画面に戻り、シミュレータの画面の更新ボタンを押して、アプリにデータを反映させます。
スクリーンショット 2020-04-14 16.20.31.png

データを反映したことを確認できます。
スクリーンショット 2020-04-14 16.22.22.png

##設定を微調整していきます(データ定義の変更)
先ほどスプレッドシートにデータを追加しましたが、まだ設定していない列があります。
「画像」列ですね。
では、画面から画像を登録していこうと思います。

適当なデータをクリックしてください。
詳細情報が表示されます。
続いて、情報の編集を行いたいので、青い鉛筆のアイコンをクリックします。
スクリーンショット 2020-04-14 15.10.36.png

「画像」列を編集したいのですが。
スクリーンショット 2020-04-14 15.11.00.png
画像ってどうやって登録するんだろ〜。
そもそもできるのかなー。

そんな不安に駆られましたが、ちょっと先生に聞いてみたところ、画像の登録もできるようです。
そりゃそうですよね。Googleさんが買収するようなアプリです。
画像の登録程度のことができないわけがありませんでした。

画像の登録の仕方

内容を確認したところ、
「画像を設定するには、データの定義をImageとして設定してね」とのこと。
早速アプリの変更をしていきます。

「Data」から「Columns」をクリックすると、「商品」データのデータ構成が確認できます。
スクリーンショット 2020-04-14 16.34.25.png

最初、「説明文」と「画像」のTYPEが「TEXT」に設定されていたので、以下のように変更してやります。
ついでに、Image以外にも変更していきます。
「説明」のTYPE:「LongText」 (これで、改行などが対応して表示してくれます)
「画像」のTYPE:「Image」

ついでに、「商品名」と「説明文」のREQUIRE?にチェックを入れます。
このREQUIRE?は、アプリからデータを登録/編集する際、必須入力項目かどうかを設定できます。

項目を変更したら、画面右上の「SAVE」ボタンが青くなります。
「SAVE」ボタンをクリックすると、有効化されます。

上記のキャプチャをみてもらうと、「画像」項目がカメラのボタンが付加されていることがわかると思います。
これで、画像の登録が可能となります。

カメラのボタンをクリックして、好みの画像を選択します。
スクリーンショット 2020-04-14 15.21.53.png

画像が選択されたので、このまま「SAVE」ボタンをクリックします。
スクリーンショット 2020-04-14 16.45.51.png

商品の一覧画面に戻ると、画像が登録されていることが確認できました。
スクリーンショット 2020-04-14 16.45.59.png

スクリーンショット 2020-04-14 15.22.47.png アプリ部分をアップにしてみました。 画像が見切れています。 どうやら、酒瓶のような縦長画像は見切れるようですね。 正方形の画像が用意できるなら、それが理想です。

ちなみに、ゴミ箱ボタンで、データが削除できます。

スクリーンショット 2020-04-14 16.47.52.png 頑張って全てのデータに画像を登録しました。

ところで、画像ってスプレッドシートにはどうやって登録されてるんでしょうね?

スクリーンショット 2020-04-14 15.25.27.png なるほど、「画像」列には画像のリンクが格納されているようですね。 Googleドライブを確認すると、画像用の「商品_Images」と言うフォルダが作成され、その中に先ほど頑張って登録した画像が格納されていました。

先ほどは画像のみ変更(追加)しましたが、もちろん他の項目も編集可能です。
スクリーンショット 2020-04-14 15.25.46.png
説明文に1行追加して、「SAVE」をクリックします。

スクリーンショット 2020-04-14 15.25.54.png 変更できました。 スクリーンショット 2020-04-14 15.26.03.png スプレッドシート側も、データが反映されています。

##設定をさらに微調整していきます(ビューの設定変更)
今のままでも、一覧表としてはいいのですが、「商品ID」は表示しなくてもいいかなと思います。
スクリーンショット 2020-04-14 17.21.56.png

さあ、表示内容を変更していきましょう。
「UX」ボタンをクリックします。
そのあと、「商品」をクリックします。
スクリーンショット 2020-04-14 17.22.09.png

すると、「商品」ビューのオプションの設定が可能になります。
スクリーンショット 2020-04-14 17.22.42.png

ここで、「View Option」の変更をします。
**「Main Image」:**画像を選択
**「Primary header」:**商品名
**「Secondary header」:**none
スクリーンショット 2020-04-14 17.23.37.png
これで、表示はスッキリしたのではないでしょうか。
画面は見切れていますが、「SAVE」ボタンを押して、設定を反映させます。

##まとめ
とりあえずこれで、スプレッドシートの「商品」データの一覧を表示することができました。
画面はアプリが勝手に作ってくれるので、最初は以下のことを意識すればいいのかと思います。
・データの用意
・データ構造の設定
・画面のオプション設定

アプリ制作をされている方だと、「スプレッドシートでできるのは簡単だけど、リレーショナルデータベースみたいに参照とかできたら幅が広がるのになー」と思われた方もいるかもしれません。
安心してください、できますよ!

今のアプリでは、商品が一覧で表示されるだけです。
これではデータ量が増えてくると、とてもみづらくなっていきます。
一応、画面の上にある虫眼鏡ボタンから検索はできるのですが、いちいち検索をかけなければならないというのも不便です。

そこで、次回はデータの参照機能を利用して、お酒の種類(ワインやウイスキーなど)ごとにカテゴライズする方法を書いていきたいと思います。
次回の記事はこちら(Googleの新サービス「AppSheet」でお酒のカタログアプリを作ってみたよ_其の弐)

68
77
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
68
77

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?