コンテンツに移動
Google Cloud

5 ステップで独自のトレーニング アプリを構築(コーディング不要)

2021年1月27日
https://storage.googleapis.com/gweb-cloudblog-publish/images/GCP_AppDev.max-2600x2600_IUzAUvR.jpg
Google Cloud Japan Team

※この投稿は米国時間 2021 年 1 月 20 日に、Google Cloud blog に投稿されたものの抄訳です。

新年を迎え、これまでよりも健康かつ充実した日々を送ることができるよう、新しい目標を立てる時節になりました。1 年前は多くの人と同様、より厳しいエクササイズのルーティンを作って進捗を確認していこうと考え、使えそうなフィットネスとトレーニングのアプリをいくつか見てみましたが、思うとおりにトレーニングの進捗を確認できるものは 1 つもありませんでした。そこで、コードを一切記述することなく、自分でアプリを構築したのです。

同じような状況の方にお伝えします。Google Cloud のノーコード アプリ開発プラットフォームである AppSheet を使用すれば、セットや繰り返し、重量の記録、トレーニング ログの保存、進捗の確認などを行うことができるカスタムのフィットネス アプリを構築することができます。

https://storage.googleapis.com/gweb-cloudblog-publish/images/appsheet_workout_app.max-1400x1400.jpg

まずは完成バージョンをこちらからダウンロードしてください。途中で問題や疑問が生じた場合に備え、AppSheet のコミュニティにスレッドを作成していますので、お気軽にご参加ください。

ステップ 1: データを設定してアプリを構築する

まずデータを整理して、それを AppSheet と接続する必要があります。AppSheet は数多くのデータソースに接続できますが、Google Workspace と効果的に統合されているため、Google スプレッドシートへの接続が簡単でしょう。こちらですでにいくつかのサンプルデータを設定しています。各タブに 1 つずつ、合計 2 つのテーブルがあります。1 つ目には毎週行うエクササイズのリストがあり、2 つ目には私が行うエクササイズの実行ログと結果(使用した重量や繰り返し数など)があります。

https://storage.googleapis.com/gweb-cloudblog-publish/images/workout_log.max-1200x1200.jpg

こちらのスプレッドシートはコピーフリーですので、ご自身のアプリを始めるためにご活用いただけます。お試しいただいたら、その後は Google スプレッドシートから直接アプリを作成していきましょう。[Tools] > [AppSheet] > [Create an App] を選択すると、AppSheet によってデータが読み取られ、アプリがセットアップされます。他のデータソースを使用している場合は、こちらの手順に沿って AppSheet に接続できます。

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/workoutsheetstoappsheet.gif

ステップ 2: エクササイズを記録するためのフォームを作成する

ここまでの操作で AppSheet エディタが表示されているはずです。ご自身のアプリのライブ プレビューが画面の右側に表示されます。この時点で AppSheet は、スプレッドシートに用意した 2 つのテーブルの 1 つ(アプリの作成時に開いたもの)にのみ接続されています。そのため、[Data] > [Tables] > [Add table for “Workout Log”] を選択し、もう 1 つを接続する必要があります。

https://storage.googleapis.com/gweb-cloudblog-publish/images/Create_a_form.max-1000x1000.jpg

フォームを作成する前に、各列にどのようなタイプのデータがあり、そのデータをどのように使用すべきなのかを AppSheet に対して指定する必要があります。[Data] > [Columns] > [Workout Log] を選択し、上述の項目を次の列に設定します(各列の左の鉛筆アイコンをクリックすれば列の設定を調整できます)。

https://storage.googleapis.com/gweb-cloudblog-publish/images/adjust_column_settings.max-1300x1300.jpg

この画像は、「Key」、「Set 1 Weights (lbs)」「Set 1 Reps」、「How I Feel」の設定調整の様子を示しています。

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/datasettings.gif

次に、このフォームのビューを作成します。ビューはウェブページに似ていますが、アプリ向けです。[UX] > [Views] を選択し、[New View] をクリックします。[View name] を [Record Exercise] に設定し、[For this data] の横にある [Workout Log] を選択して、[View type] を [form] に設定し、位置を [Left] に設定します。これで、アプリを保存すればアプリで [Record exercise] をクリックできるようになり、エクササイズを記録できるフォームが開くようになります。

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/formview.gif

ステップ 3: デジタルのトレーニング ログ ブックを設定する

どのくらいの回数と重量で行うべきかを把握するために、エクササイズ中に過去のトレーニングを簡単に確認できるようにします。トレーニング ログ ブックを作成するため、新しいビューを作成します。[UX] > [View] を選択し、[New View] をクリックします。このビューに「Log Book」という名前を付け、データとして [Workout Log] を選択し、[View Type] として [Table] を選択して、[Position] を [Right] に設定します。

次に、[View Options] [Sort by] を [Date]、[Ascending]、[Group by] を [Date]、[Ascending] に設定します。

https://storage.googleapis.com/gweb-cloudblog-publish/images/View_Options.max-1300x1300.jpg

ステップ 4: 統計ダッシュボードを作成する

この時点で、トレーニングを記録および確認できるトレーニング アプリがすでに作成済みです。しかしデータマニアとしては、グラフとチャートを使って進捗を確認したくなります。基本的に、選択したエクササイズの統計を表示するチャートのあるインタラクティブなダッシュボードを作成します。この手順は少々複雑なため、ご自身のアプリに必要がなければスキップしても問題ありません。

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/dashboardpreview2.gif

ダッシュボード ビューを作成する前に、表示する指標を決定する必要があります。セットあたりの繰り返しの合計数を、最初のセットで持ち上げた重量とともに表示させようと思います。重量の列はすでにありますが(Set 1 Weights (lbs))、合計の繰り返し回数を計算するために仮想列をセットアップする必要があります。仮想列をセットアップするには、[Data] > [Columns] > [Workout Log] > [Add Virtual Column] を選択します。

https://storage.googleapis.com/gweb-cloudblog-publish/images/Dashboard_view.max-1000x1000.jpg

AppSheet でこの種の計算のような高度なロジックを扱う際は、Google スプレッドシートで使用されるものと似たが使用されます。仮想列に「Total Reps」という名前を付け、この計算式をポップアップ ボックスで追加して合計繰り返し回数を算出します。

[Set 1 reps] + [Set 2 reps] + [Set 3 reps] + [Set 4 reps] + [Set 5 reps]

次にダッシュボード ビューを作成します。AppSheet では、ダッシュボード ビューは基本的に、複数の他のビューを内部に含むビューとなっています。そのためダッシュボードを作成する前に、次のビューを作成しておきましょう。

https://storage.googleapis.com/gweb-cloudblog-publish/images/create_the_following_views.max-900x900.jpg

これで、ダッシュボード ビューを作成できます。このビューに「Stats」という名前を付け、View typeを [Dashboard] に、[Position] は [Center] に設定します。[View Entries] には、[Exercise](Exercises ではありません)、[Total Reps]、[Set 1 Weight (lbs.)]、[Sentiment]、[Calendar] を選択します。[Interactive Mode] を有効にして、[Display] > [Icon] で「chart」と入力し、お好みのアイコンを選択します。[Save] をクリックすれば、選択したエクササイズに基づいてチャートが調整される、非常にきれいなダッシュボードができます。

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/dashboardhowto.gif

ステップ 5: アプリに調整を加えてスマートフォンに送信する

ここまででアプリの準備が整いました。見た目を変えたり追加の機能を追加したりして、お好みの調整を加えることができます。ここで、AppSheet エディタを使用して機能をいくつか試してみましょう。私のアプリに追加したカスタムをいくつかご紹介します。

  • [UX] > [Brand] から、メインカラーを青色に設定しました。

  • [Behavior] > [Offline/Sync] で [Offline Use] を有効にし、インターネット接続がない場合もアプリを使用できるようにしました。

  • エクササイズ ビューの位置を [Menu] に変更し、アプリの左上のメニューにのみ表示されるようにしました。

アプリを好みに合わせて調整したら、スマートフォンに送りましょう。[Users] > [Users] > [Share App] と選択して、[User emails] の横に自分のメールアドレスを入力して [I’m not a robot] をオンにし、[Add users + send invite] を選択します。スマートフォンでメールをチェックして、手順に沿ってアプリをダウンロードします。

AppSheet では、アプリを構築することで生活をシンプルにするさまざまな方法を提供しています。作成可能なその他のアプリもご確認ください。楽しんでアプリを構築していきましょう。

-プロダクト マーケティング マネージャー Chris Bailey

投稿先