gusuku Everysiteでつくるランニングポータル

公開日：

皆さん、こんにちは。
成人してから初のフルマラソンに挑戦した、はななです！

マラソンに向けて、ランニングを行った結果をkintoneのレコードで眺める。
う～ん。もっとテンションがあがるようにアレンジしたい！！！

ということで、今回はランニングポータルを自分なりにエブリサイトで
作ってみようとおもいます✨

ランニングポータル自体は実務とは直接関係ありませんが、「これができるなら、他にもこんな使い方ができるかも？」と
皆さんの想像が広がるきっかけになれば嬉しいです！

ランニングポータルのイメージ


全体の構成はこんな感じです。
kintoneの「記録アプリ」のデータをもとに、「ランニングポータル」で、今月の走行距離や、
目標とのギャップ、過去の記録が、リアルタイムでみれるようにします！

ランニング結果を入力しよう！

kintoneに直接入力してもいいのですが、
エブリサイトは作成したフォームからすぐに入力ができるので、せっかくならエブリサイトで入力フォームを作りたい！！

ということで、ランニングが終わったら

  • 日付
  • 走行距離
  • タイム

を、エブリサイトからスマホでサクッと入力できるフォーム を作成しました。
スマホで入力する場面が多いので、レイアウトもスマホ用に調整しています。

ここからは、入力フォームを作った際の、ちょっとした工夫を書いていきたいと思います！

その1.ペース計算を自動化しよう

走り終わってすぐ入力できるように、、ペース計算はエブリサイト側で行う仕様にしました。
（ペース計算なんてどこで使うんだ！？と思われた方も優しい目で見守ってください（笑））

「距離」と「タイム」を入力し、「自動計算ボタン」を押すと、「ペース」が算出される仕組みです。
計算結果を順番にみていけるように、隠しアイテムを使って計算しています。


「自動計算ボタン」を押した後の、エブリサイトの設定はこんな感じです。

  1. タイム（時間・分・秒）「秒」に変換し「計算用秒」にセット
  2. 秒を分に換算し、整数の分を取り出す
  3. 分→秒に戻して「計算用秒」から引き算し、残りの秒を求める
  4. 得られた「分」と「秒」を「ペース」にセット

　

エブリサイトでで、「アイテムを非表示にする」というやることを使うことで、こういった裏側の計算を見せずにスマートに処理ができるのも、嬉しいですね。

その2.走った回数をカウントしよう

ランニングは、”距離” も大切ですが、
”走った回数” もとても重要です。


”走った回数”というのは、いわば「今日はやめとこうかな…」という”弱い自分に勝った回数”とも言えます。

そんな重要な ”走った回数” もエブリサイトならカウントできます！

エブリサイトでは、「カウンターのカウント値を増減する」というページ内処理の「やること」があります。
これを使えば、エブリサイトのサーバーで管理されているカウンターのカウント値を増減することができます。

ということは、「ランニング登録ボタン」を押した回数をカウントすることも容易です✨
そして、日ごとや月ごとにリセットされるカウントも可能ということなので、これは使ってみるしかありません。

　▼下準備（エブリサイトの「接続設定」タブから、接続先「エブリサイト」を追加します）

　▼エブリサイトの設定画面

カウンターの設定はこれだけです！

さらに、kintoneの「ランニング目標アプリ」から目標走行回数を取得し、

目標回数

  • 目標走行回数
  • 実績（カウンター値）

が一致したら 「目標達成」 のメッセージを表示する仕組みも作りました✨

これを応用すれば、イベント申し込みフォームなどで
申込数の上限に達したタイミングで ダイアログを表示したり、申し込み終了のお知らせを表示したり、
いろいろなことができそうですね(*’▽’)

その3.モチベーションを高める

走り終わった後には、自分へのメッセージもかかせません！！

そこで、「登録ボタン」を押した後に、走行距離に応じてメッセージを変える仕組みを作りました。

  • 1～9ｋｍ：走ったのえらい！今日はいっぱい食べよう🍖
  • 10ｋｍ～：走ったのすごすぎる！ゆっくり休んでね☕

エブリサイトの設定はこんな感じです。


まとめ

今回は、ランニングポータルを作る第一歩としてランニング記録フォームの作成 に挑戦しました。

エブリサイトは、
「このボタンを押したらこう動いてほしい！」というアイデアを
プログラミングなしで実現できる のが魅力です。

作りながら、「こういう仕組みも作れるかも？」と楽しく想像がふくらみました^^

次回は、このフォームを使って
いよいよ ランニングポータル本体 を作っていきます！

では、また次回お会いしましょう✨

社外もチームだ！
エブリサイトで社外DXを！

gusuku Everysite（グスク エブリサイト）は、kintoneをはじめとした複数のサービスと連携し、そのデータを自由なレイアウト・挙動でWebサイトとして入出力できるフロントエンド開発サービスです。

投稿者プロフィール

アバター画像
hanana

関連投稿:

第2回：gusuku Everysiteでイベント申込みサイトを作る話 第3回：gusuku Everysiteでイベント申込みサイトを作る話 第4回：gusuku Everysiteでイベント申込みサイトを作る話