AshiArt

各種リンク

• アプリURL:https://ashiart.vercel.app/
• スライドURL:https://www.canva.com/design/DAG2Mtx20no/hRDT1oBMKq8AcZpFIRxSXw/edit?utm_content=DAG2Mtx20no&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton
• デモ動画URL:https://youtube.com/shorts/27tdlkKjnt4?si=fqWmWE4z-FZHzUta

アプリ QR コード

Tip

スマートフォンでのアクセスがオススメです

製品概要

背景(製品開発のきっかけ、課題等）

みなさん、ランニングしていますか？ 健康目的でランニングを行う人は多いますが、 私たちのチームにも定期的にランニングをするメンバーが多くいます！ そんな中、こんなポストを見かけました。

(https://x.com/yomo_tri/status/1969979228914651139)

「GPS アート？！楽しそう！ちょっとやってみたい！」 と、思いましたが、コースの設計に時間がかかりそうで気軽には始められませんでした...

実際にやってみようとすると、道の上にしか線を描けないという制約の上で絵を描くのは結構難しいんです。なぜなら、思い描いた形に沿うような道が必ずしも存在せず、細かく経路を調整する必要があるからです。 さらに、ランニングするためにはスタート地点や総走行距離といった条件も考慮しなければならず、そうなると調整は一層難しくなります。

手作業で設計するのにかかる手間と時間によって、「楽しそう」という気持ちは、「面倒くさい」という現実の前に、あっさりと萎んでしまいます。 そんな経験から、一筆書きの絵から簡単にランニングコースを作成できるアプリによってこの問題を解決しようと考えました。

GPS アートを簡単に描けるようになれば、ランニングのモチベーションの向上に繋がりますよね！

GPS アートとは

(出典：https://www.bgf.or.jp/gpsart/2018result.html)

GPS アートとは、GPS を使用して現在位置を記録しながら移動し、その軌跡で大規模な地上絵を描くアクティビティのことを指します。 当初はアートの要素が強かった GPS アートですが、徐々に日々のフィットネスへの追加のモチベーションとして、シンプルな図形を走る人々が増え始めました。 そして、コロナ禍を経てランニングを行う人口が増えたことにより、その成果として、自身が走った独創的なルートを、GPS アプリや SNS を通してシェアする文化が普及しています。

製品説明（具体的な製品の説明）

一筆書きで描いた絵から独自のアルゴリズムで実際に走れる最適なコースを設計し、GPS アートによる、いつもと違ったランニング体験を簡単に行えます。

特長

1. 一筆書きの絵からランニングコースを提案

このアプリのメインの機能です。 ユーザは自由に一筆書きで絵を描き、自分だけのランニングコースを作成できます。 スタート地点と走行距離の調整も可能です。

ScreenRecording_10-19-2025.15-06-35_1_2.mp4

2. おすすめの絵から選択も可能

一筆書きの絵が思いつかなくても、アプリが提案するいくつかのサンプル図形からコースを作成することもできます。同じ図形でも、スタート地点や走行距離を変えるだけで、全く異なるランニングコースを設計できます。

generationFromSample.mp4

3. コースの保存・お気に入り登録・削除機能

作成したコースはデータベースに保存され、いつでも一覧で見ることができます。 気に入ったコースはお気に入り登録、不要なコースは削除をすることも可能です。 「作成順」や「近い順(現在地からスタート地点までの距離)」でソートをすることもでき、見やすい UI を心がけています。

favorite_delete.mp4

解決出来ること

• これまで時間がかかっていた GPS アート用のランニングコースを、一筆書きの絵を描くだけで、とても簡単に作成することができます。

• 加えて、スタート地点や走行距離も指定できるため、思い通りのコースを生成できます。

  • 例えば、このアプリを使うと、札幌市の中に北海道を描く！なんてこともできます↓↓
  

• これにより、誰もが好きな絵のコースを設計して実際に走ることができるので、ランニングのモチベーションにつながります！

今後の展望

GPS アートを使ったランニング体験を手軽に提供するため、Award Day に行けることになったら以下の機能を実装したいと考えています！

• 音声でのランニングコースのナビゲーション機能
  • 作ったコースの通りに、実際に走ってみたいですよね！
• このアプリを利用して作り上げた GPS アートのシェア機能

ナビゲーション画面のイメージ

注力したこと（こだわり等）

• 経路計算アルゴリズムのこだわり
  • 複数の文献を参考にして経路計算を実現するために独自のアルゴリズムを考案しました。このREADME.mdの最後で内容を説明します
  • https://github.com/jphacks/sp_2509/pull/55/files
• GitHubの機能を精一杯活用してチームメンバーの開発体験を高めました
  • PullRequestの作成時にビルドチェックと単体テストの実行を回したり、自動デプロイ環境を構築したりして、CI/CD環境を整えました 　　- 本番環境が動かない！というようなトラブルはこれのおかげで起きませんでした。
  • GitHub Projectのカンバン機能を使ってチームメンバーのタスクを簡単に確認できるようにしました
  • GitHub Copilotを使ってコードレビュー自動化の環境を整えました
• チームメンバー間で作業負荷に大きな偏りもなく、全員がGitHubの機能を使いこなして、プロダクト作成に力を注ぐことができました
  • (issue番号3桁突破)
  • 

開発技術

活用した技術

フロントエンド

• Next.js + TypeScript
  • フロントエンドのフレームワーク
• Leaflet.js
  • 地図表示ライブラリ。生成されたコースの描画に使用しました。
• ESLint
  • コードの静的解析ツール。チームのメンバーでコードスタイルを統一するために導入しました。

バックエンド

• FastAPI
  • バックエンドのフレームワーク
• OSMNX(Open Street Map NetworkX)
  • 道路ネットワークデータの取得
  • バックエンドの経路計算に利用
• SQLite
  • 作成したコースを保存するための DB

インフラ

• vercel
  • フロントエンドのデプロイ先として選定しました
• GitHub Actions(https://github.com/jphacks/sp_2509/actions)
  • Frontend CI でフロントエンドのビルドチェックを実施
  • Backend CI でバックエンドのユニットテストを実施
  • CD として vercel の本番環境に自動デプロイ
    • CD を構築して自動デプロイを実現することで開発メンバーのデプロイの手間を省ことができました。
• GitHub Copilot (コードレビュー)
  • Pull Request に対して Copilot に自動的にコードレビューをしてもらうワークフローを追加することで他のメンバーのコードレビュー時間を短縮し、作業の効率化につながりました。
    • 例: #113

その他ツール

ツール	用途	詳細
Figma	UI/UX デザイン	各ページのワイヤーフレーム・プロトタイプを作成。アプリの操作フローを明確化し、開発メンバー間で共有しました。
Consense	チーム内の情報共有	機能仕様やデザイン方針などの情報を整理し、メンバー間での認識を揃えるために使用しました。
Clip Studio Paint	描画素材の作成	アプリ紹介用のイラストやロゴのラフスケッチを制作しました。
Canva	プレゼン資料・画像作成	README や発表用スライドのビジュアルを作成しました。
GitHub Project (Kanban)	タスク管理	Issue をもとに開発タスクを可視化し、進捗を一目で確認できるようにしました。

デバイス

• スマートフォン

独自技術

ハッカソンで開発した独自機能・技術

HackDay 以前に作成した機能

• 基本的なコース計算のアルゴリズムの検討と仮実装
• API 設計,DB 設計
• Figma によるデザイン設計
  • https://www.figma.com/design/rft6M0sW2d7Rax1bfat3SS/Runninng?t=yCbRqFttgztGwUT3-1

HackDay 期間中に作成した機能

• フロントエンド
  • UI コンポーネントの作成
  • 各ページの作成 (例: #24)
  • ユーザの描いた線がローディング時のアニメーションになる機能
• バックエンド
  • API の実装 (例: #49)
  • API の単体テストの実装 (例: #62)
  • 経路探索アルゴリズムのクラス化&アルゴリズムの改善 (例: #55)
• インフラ
  • CI/CD 環境の構築(例: https://github.com/jphacks/sp_2509/actions/workflows/ci.yml)

経路探索アルゴリズムについて

単なる最短経路を見つけるアプリなら、GoogleMaps のように世の中にいくらでもあります。しかし、私たちが作りたかったのはユーザーの描きたいという想いを実現するための異なる機能です。そこで、古典的な ダイクストラ法を改良したアルゴリズムを実装しました。

ユーザーが描いた形を、そのまま地図に重ねても、道路の向きと合わず、うまくコースが作れません。そこで、まず手書きの形を少しずつ回転させ最適な角度を計算しています。最適な角度が決まったら、その回転させた入力の曲線を、経路探索の基準点となるいくつかのチェックポイントに分割します。これにより、「A 地点から B 地点へ」「B 地点から C 地点へ」という具体的な経路探索のタスクに分解できます。そして、サンプリングした各チェックポイントの間の経路を探索します。

そうして見つかったすべての部分的な経路を一つにつなぎ合わせることで、手書きの形を最も忠実に再現した、実際に走れる GPS アートコースが完成します。