生涯で地球一周を走破するチャレンジの状況を表示している「Rich Inabaのシニアマラソンチャレンジ」サイトの「アースマラソン」ページ。今回、アースマラソンチャレンジの最新状況の概要をリアルタイムで分かり易く表示できるように、「アースマラソン」ページのデザインを刷新しました。
「アースマラソン目標」を説明するコンテンツを追加
ページの先頭に“喜寿（77歳）を迎えるまでに地球一周（40,075.0 km）を完走”という「アースマラソン目標」を説明するコンテンツを追加しました。
カード形式の「アースマラソンの概況」を追加
ページの先頭に“喜寿（77歳）を迎えるまでに地球一周（40,075.0 km）を完走”という「アースマラソン目標」を説明するコンテンツを追加しました。
これまで、最新のアースマラソン到達地点をテキスト表示しているところを、カード形式の「アースマラソンの概況」コンテンツへと変更しました。
最新状況について、分かり易くタイムリーに表示
これまで、「アースマラソン」ページの更新については、毎月1日に前月分のランログを一括してGoogle My Mapに反映していました。
このような月次処理プロセスを走った直後にすぐ更新できるように、ランログをExcel形式からGoogleスプレッドシートに変更し、スプレッドシート上にアプリ（App Script）を開発して追加された最新のランログを自動的に「アースマラソンの概況」カードに反映されるようにしました。
カード形式の「直近のラン」
最新のランログについて、「直近のラン」カードを追加し、現在地に至った最新のランを表示させました。
おわりに
これらの新しいデザインはChatGPTと対話することにより完成させました。もともとあまりはっきりしたデザインイメージをもっていなかったのですが、「こんなイメージで・・・」とあいまいな要件をChappyに伝え、その具体化をChappyと対話していくことにより現在の新デザインに落ち着きました。WordPress上のカスタムHTMLやGoogle SpreadSheetのApp Scriptなど、自分では絶対に書けないようななじみのないプログラム言語のコードを自動で生成してくれました。
新しいデザインの「アースマラソン」ページはこちらを参照してください。