続き: Googleスプレッドシートのデータを使ったGlideアプリの作成方法

前回の記事では、Oura Ring APIを使用して健康データを取得し、それをGoogleスプレッドシートに記録する方法を紹介しました。ここからは、そのデータを使用してGlideでアプリケーションを作成する手順を説明します。

Glideとは

Glideは、Googleスプレッドシートなどを使用して簡単にモバイルアプリを作成できるプラットフォームです。コーディングの知識がなくても、スプレッドシートにデータを入力し、Glideの直感的なインターフェースを通じてアプリをデザインすることができます。また、Glideアプリはリアルタイムでスプレッドシートのデータと同期し、データの更新が即座にアプリに反映させられるます。

Glideの準備

まず始めに、Glideウェブサイトにアクセスし、アカウントを作成またはログインします。

アカウント作成の詳しい方法については今回の記事では割愛させていただきます。
下記のようなダッシュボードの画面まで辿り着ければGlideの使用準備はとりあえず完了です。

スプレッドシートをインポート

それでは、前回の記事で作成したGoogleスプレッドシートをインポートしていきます。
まず、下記の画面のように「New app」のボタンをクリックしましょう。

すると次の画面のように、新しいアプリを作るポップアップが出てきます。
今回作りたいアプリの名前を入力し、今回はiPhoneで使うモバイルアプリを作りたいので、「Mobile」を選択して、「Continue」ボタンを押します。

そうすると、今度はポップアップの表示内容が下記のように変わり、ソースデータとして何を選ぶかを選択する画面になります。Microsoftのエクセルなども使えますが、前回の記事で作成したGoogleスプレッドシートを選択して、「Create app」ボタンを押します。

GlideへGoogleアカウントを使ってログインしている場合、下記のように、今までに作成したGoogleスプレッドシートの一覧が表示され、この中からアプリ作成のソースとなるスプレッドシートを洗濯することができます。今回は前回の記事で作成したスプレッドシート「コンディションアプリ」を選択し、左下にある「Select」ボタンを押します。

少し待つと、別ウィンドウで下記のようなGlideのアプリを作成していく画面が表示されます。

これでGlideへ、Googleスプレッドシートのインポートが完成です。
Googleスプレッドシートをインポートしただけで、特に画面表示を編集したりしていない状態でも、上記の動画のように、それっぽいアプリを作成してくれているので驚きです！
（※インポートしたタイミングでは、前回の記事で作成した４つのシートに対応するタブが作成され、その内容を表示するというアプリになっているようです。）

アプリのデザインを作成

ここからは先ほど開いたGlideの画面を操作して、作りたいアプリのデザインを作成していきます。Glideではノーコードでアプリの画面を作成できるので、プログラミング初心者の僕にとっては直感的にアプリの表示を編集できて、とても簡単です。

不要な部分の削除

とりあえず、今回作成したいアプリ「パワプロ君っぽいヘルスケア管理アプリ」に不要な画面内のパーツを全て消していきます。

背景画像を設定

まずパワプロっ君っぽい背景を設定します。Glideの画面左側にある「COMPONENTS」横の＋ボタンをクリックしていきます。
すると、Glideでアプリを作成する際に使用できるコンポーネント（アプリのUI画面に表示する部品のようなもの）の一覧が表示されます。その中から、「Container」と書いてあるものをクリックすることでアプリの画面内に「Container」を追加することができました。

次に追加した「Container」コンポーネントの設定を編集します。
画面右側のDESIGNの欄の中に、「Background」の種類を選択するドロップダウンリストがあります。下記の動画のように、リストの中から「image」を選択します。

「image」を選択したら、今度はその中の「BackgroundImage」を指定する部分が出てきます。背景画像として使いたい画像のURLを直接入力すると背景画像として設定できます。
今回は下記の動画のように、使いたい画像をドラッグ&ドロップしてみます。

これで背景画像の設定が完了です。
（※今回は「Containar」コンポーネントを使用し、背景の設定を行いました。背景画像の設定は完了しましたが、この段階では背景画像は表示されませんがご安心ください。「Containar」コンポーネントの中にさらにコンポーネントを追加することで、そのコンポーネントの背景画像として、ここで指定した背景画像が表示されます。）

アプリ画面で見せたいスコアや体調を設定

次に、今回作成するヘルスケア管理アプリのメイン画面で見せたい「スコア」や「体調」などが見れるように設定していきます。

まずは下記のような操作を行い、Googleスプレッドシートの「体調シート」に記載されている体調アイコンのGIF画像を表示していきます。（※「体調シート」のF2に記載されているURLの画像を表示するようにします。）

次に下記のような操作を行い、Googleスプレッドシートの「評価シート」に記載されているS~Gの評価を表す画像を表示していきます。（※「評価シート」のF2〜F9に記載されているURLの画像を表示するようにします。）

最後に、Oura APIから最新の情報を取れるように、前回の記事で作成したスクリプトを実行するための「更新ボタン」を作成します。ここで作成した「更新ボタン」が押された時、前回作成したスクリプトが実行されるようにする設定は次の章で説明します。ここではボタンコンポーネントの作成のみ作成し、次の章で機能の設定をしていきます。

以上で、ヘルスケア管理アプリのメイン画面で見せたい「スコア」や「体調」など情報を表示する設定が完成しました。

アプリの機能とインタラクションを設定

ここからは先ほどGlide上で作成したアプリの「更新ボタン」の機能を作成していきます。
今回この「更新ボタン」が押された時、前回記事で作成したdoGet関数を実行できるようにします。そうすることで、Oura APIから最新のデータを取得し、その取得した値をスプレッドシートに記載されます。

実際にやることとしては、まずは前回記事の「他ツールからスクリプトを実行できるよう設定」で作成したウェブアプリのURLをコピーしてください。
次に下記のようにGlideのボタンコンポーネントのアクション欄を開き、ボタンが押された時のアクションの内容を「Open link」に設定します。その後、少し下にURLを入力する欄が出るので、そこにウェブアプリのURL貼り付けてください。

これで、パワプロ君っぽいヘルスケ管理アプリの作成が完成です！

アプリの公開(実機で使用)

最後に、実機を使って、今回作成したアプリの実行結果を確認できるように、アプリを公開(プライベートなアプリとして公開)していきます。

その前に、下記のようにスマホのホーム画面に置かれるアプリのアイコンの画像を設定します。

そして、Privacyの設定を確認し、問題なければ「Publish」を押して公開します。
表示されたQRコードやリンクを使って実機のスマホでアプリを使用することができます。

結果はこんな感じ↓

まとめ

この記事では、Glideを使用して、Googleスプレッドシートに記録されたOura Ring APIからのデータを活用するパワプロ君風アプリの作成方法を紹介しました。このアプリは、健康管理をより視覚的でユーザーフレンドリーにすることを目的としています。