エアロバイクをGoogleマップに連携して、おうちで自転車旅ができるアプリを作ってみました。
エアロバイクのペダルを漕ぐと、こんな感じでGoogleストリートビューの画面が前に進みます。

エアロバイクをGoogleマップに連携して自転車旅ができるアプリ、できたぁぁ！
これで緊急事態宣言でも自転車日本一周の旅🚴‍♀️が再開できる！https://t.co/jesvBnTjY5

エアロバイクをRaspberry Piに接続して、Java（Spring BootとPi4J）とGoogle Maps JavaScript APIで制御しています。 pic.twitter.com/1IQszCrPC1
— makopi23 (@makopi23) 2020年5月6日

これで、緊急事態宣言下でも自転車日本一周の旅を再開できるぞ・・・！

アプリ開発の経緯

事の発端は、TwitterのTLに流れてた以下の記事を目にしたことでした。

書きました。旅をしたくなったので、エアロバイクを漕いで部屋の中で日本縦断を目指すというプロジェクトが始動しました。

エアロバイクをGoogleマップに連携して日本縦断の旅に出ます | オモコロ https://t.co/wgMHE9RqZH
— 岡田悠 (@YuuuO) April 30, 2020

なんと・・・素晴らしい企画だろうか！

私も自転車が趣味の一つで、まとまった休暇が取れると自転車で日本中を旅しています。
前回の終着点から旅を再開するスタイルで、ゴールデンウィークも鹿児島から自転車日本一周を再開する予定だったのですが、生憎、コロナ緊急事態宣言のために延期・・・

そんな矢先にこの記事を目にして、じゃあ折角だからゴールデンウィークを使って俺も作ってみようと思い立ったのでした。
いちおう職業はITエンジニアだし、大学も電気電子情報工学科だったので、プログラミングも電子回路もそれなりに出来る・・・ハズ・・・

今回、技術的な話はこちらを参考にさせていただきました。（上記記事の元ネタです）

書いた☆【フィットネスバイク】のインターネットを作る！！ https://t.co/c23vQxpxLi #Qiita #アドベントカレンダー
— ie4 (@ie413) December 10, 2019

せっかくなので、私が作ったアプリや電子回路の仕様とか実現方法をブログに纏めておこうと思います。

動作仕様

Webアプリケーションなので、ブラウザさえあればPCでもスマホでも動作させることができます。PCだとこんな感じ。
画面上部のテキストボックスに緯度と経度を入力し、「ストリートビューを表示」ボタンを押すと、その地点から出発することができます。ペダルを漕ぐと前に進みます。

緯度と経度はGoogleマップから簡単に取得することができるので、これを↑のテキストボックスにコピペするだけで、どこからでも出発することができます。

もちろんスマホでも動作するので、エアロバイクの前にノートPCを置くことができなくても、ペダル漕ぎながらスマホの画面を眺めれば旅を楽しむことができます。

道を曲がるには、PCならマウスでドラッグしたりクリックすることで進行方向の変更が可能です。
幸い、私のノートPCは液晶画面がタッチパネルになってるので、マウス不要です。
スマホも同様に、液晶画面をクリックすることで曲がったり進行方向を変更することができます。

ドラッグすることで視界も360度ぐるっと変更可能なので、周りの景色も楽しむことができます。

構成図

構成図はざっくりこんな感じです。

エアロバイクとRaspberry Piを有線接続し、ペダルを漕いだデータをRaspberry Piで処理して、ノートPC（またはスマホ）に通信で飛ばします。
ノートPC（またはスマホ）のブラウザに地図（ストリートビュー）を表示し、通信で受け取ったデータを元にストリートビュー上を移動させます。

用意したもの

自宅で埃を被っていたラズパイとかブレッドボードとかを活用したので、出費はほとんどありませんでした。
詳細は以下のとおり。

もともと自宅にあったもの

・エアロバイク　（2015年に購入）
・Raspberry Pi　（2014年に購入したのでかなり古い型番です）
・Wi-Fi USBアダプタ　（Raspberry PiをWiFi接続するためのUSBアダプタ。元々はPlayStation Vita用に買ったものを流用。無い場合はLANケーブルでRaspberry Piと繋げばOK）
・ブレッドボード
・ジャンパー線
・発光ダイオード
・抵抗

新たに購入したもの

・ステレオジャック 3.5mm

というわけで、今回の出費はステレオジャックの799円だけ。
5個入りで、使ったのはそのうち1個だけなので、実質は160円くらい？（笑

作成した電子回路

エアロバイクのサイクルメーターに接続されてるプラグを抜いて、購入したステレオジャックに差し込みます。
ステレオジャックの両端にジャンパー線をセロテープ（笑）でくっつけ、ジャンパー線をブレッドボードに刺して簡単な電子回路を作り、Raspberry Piの端子と接続します。

エアロバイクのサイクルメーターの原理は、前述したこちらのサイトで詳しく説明されています。

回路図はこんな感じ。
GNDとGPIO 0ピンの間にステレオジャックを接続し、サイクルメーターのプラグをステレオジャックに差し込みます。
これでペダルの回転を検知し、GPIO 0ピンでINPUTとして受け取ります。

開発したソフトウェア

ペダルの回転データをRaspberry Pi上に配置したJavaプログラム（Spring BootとPi4J）で処理し、HTTP通信でPCやスマホに飛ばして、ストリートビューをGoogle Maps JavaScript APIで制御します。
ソースコードはGitHubに公開しておきました。
https://github.com/makopi23/CyclingServer

もしご自分の環境で試してみる場合は、以下2ファイルの修正が必要です。

■１．
CyclingServer\src\main\resources\static\js\cycling.js
　→　const URL = 'http://192.168.3.6';　（ここをご自分のRaspberry PiのIPアドレスに変える）

■２．
CyclingServer\src\main\resources\templates\home.html
　→　23行目の https://maps.googleapis.com/maps/api/js?key=xxxx&callback=init
　　　　（xxxxの部分を、ご自分のGoogle Maps PlatformのAPIキーに変える）

　※Google Maps PlatformのAPIキーを事前に取得しておく必要があります。この辺は前述のie4さんのQiitaに書いてあります。

開発環境/ソフトウェア

・Windows 10
・Java 8　・・・プログラミング言語（ホントはJava 11以降を使いたかったんだけど、Raspberry Piの諸事情により・・・）
・Spring Boot ・・・ Javaフレームワーク
・Pi4J ・・・　Raspberry Piを制御するためのJavaライブラリ
・Google Maps JavaScript API　・・・ストリートビューを制御するためのJavaScript API

使用ツール

・Eclipse (Pleiades All in One Eclipse リリース 2020-03) ・・・ Java統合開発環境（IDE）
・Tera Term ・・・ Windows10からRaspberri PiへSSHで接続してコマンド操作するためのツール
・WinSCP ・・・ Windows10からRaspberri Piへファイル転送するためのツール

実行方法

Raspberry PiにJava 8とPi4Jをインストールしておきます。
また、Windows10からRaspberry Piへ、Tera TermでSSH通信、WinSCPでファイル転送ができるように設定しておきます。
この辺はググれば情報出てくると思います。

次に、前述のGitHubからソースコード（プロジェクト）をcloneし、Windows10のEclipseにインポートします。
Mavenでビルドしてjarファイル（CyclingServer-1.0.0.jar）を作ります。

Windows10上で作成したjarファイル（CyclingServer-1.0.0.jar）を、WinSCPを使ってRaspberry Piへファイル転送します。
以降、Raspberry PiのIPアドレスは 192.168.3.6 で、転送先のディレクトリは /home/pi/cycling として説明します。

Windows10からTera TermでRaspberry Piに接続し、jarファイルを実行します。
コマンドはこんな感じ。Pi4Jへもパスを通しています。
sudo -i java -jar /home/pi/cycling/CyclingServer-1.0.0.jar -classpath .classes:/opt/pi4j/lib/'*'

Raspberry Piのメモリ512MBしかないのにSpring Bootアプリがちゃんと起動するの凄い（笑

アプリが正常に起動したら、PCやスマホのブラウザからアプリにアクセスします。URLは以下のとおり。
http://192.168.3.6:8080/start

Spring Bootに内蔵されているTomcatが8080ポートで起動しており、以下のスタート画面が表示されます。
スタート画面を表示する際に、Raspberry PiのGPIOを1回だけ初期化しています。

画面に表示されているリンクをクリックすると、ストリートビューが表示されたTOP画面へ遷移します。
この状態でエアロバイクのペダルを漕ぐと、ストリートビューが前進して、前に進むことができます。

処理概要

Raspberry Pi上にデプロイしたアプリケーションは、ペダルの回転をRaspberry PiのGPIO 0ピンで検知するたびに、データベース(Spring Bootに内蔵されているインメモリデータベースのH2DB）にレコードをINSERTしていきます。
また、データベースに入っているデータを取得するためのREST API（URIは /cycling ）も用意し、クライアントに向けて公開しておきます。

クライアントのブラウザにロードされたアプリからJavaScriptでREST APIを1秒ごとに呼び出し、Raspberry Pi上のデータベース（H2DB）に新しいレコード（ペダル回転データ）があれば、ストリートビューの自分の位置を前に進めます。

たった、こんだけ。

ちなみにGitHubからCloneしたCyclingServerプロジェクトは、Raspberry Piにjarファイルとしてデプロイする以外にも、Windows10のEclipseからもクライアントとして起動することができます。
その場合、アプリのURLは http://localhost:8080/ になります。（ただし http://192.168.3.6:8080/start の実行は必要）
クライアントのJavaScriptのコードを弄りながらアプリを改善しながら動かしたい場合は、こっちの方が楽です。
（Rapberry Piへいちいちデプロイする操作が不要になるので）

まとめ

やっぱ自分が本当に欲しいものを自分で作るのは楽しいですね。
エンジニアで良かったと思う瞬間です。
機能拡張も自分で無限大に出来るので、いろんな便利機能もこれから足していけるといいなー

ちなみに、これまでの自転車日本一周の経路はこちら。
これまではクロスバイクで旅をしてきましたが、おうちのエアロバイクで旅が再開できるようになったぞ！