うつろぐ

Webアプリやソフトウェア開発で、役に立たないかもしれないけど、面白いことがしたいです。

自作スマホアプリ「コアラ歩数計」で歩いてコアラを回してみた

こんにちは、宇津めるです。
今回は、歩いてコアラを回してみました。
本当にやってることは記事のタイトルが全てです。それ以外やってません。
回しまくりました。そりゃもう、こんな感じに。
f:id:Distorted_Unchi:20190812105056g:plain

まあでも、
「歩いてコアラを回すってなに?」
「なんで歩いてコアラを回してんの?」

と思った方もいると思うので、この記事でレポートしていきたいと思います。

背景

歩いてコアラを回したきっかけです。

コアラを回したい

まずこれが分からないですよね。なんだよ「コアラを回したい」って。
まずコアラというのは、このコアラくんです。
f:id:Distorted_Unchi:20190812110123j:plain
あらかわいい。
このコアラ、何とも言えない表情をしていて最高ですよね。どういう感情だよ。
この画像自体は海外でmemeになってるものを拾ってきただけで、別に僕が撮影したわけではありません。すみません。

このコアラの何とも言えない表情が大好きすぎて、今まで色々なコアラに関するコンテンツを生成してきました。

これは「コアラマート テーマソング」。共同制作です。G2R2018参加作品です。
www.youtube.com

これはコアラbot
twitter.com



...で、最近はプログラミングの学習にコアラを使うようになりました。
これはどういうことかというと、
f:id:Distorted_Unchi:20190812111942p:plain
こういうことです。新しいプログラミング言語を触ってみるときに、作りたいものが明確にある場合はそれに向かって頑張ればいいんですが、そうでないとき、いきなりオリジナルアプリ / Webサービスとなると敷居が高すぎるし、何を作っていいか困ると思うんです。でも基礎から一つずつやっていくのはダルいし、何の為にプログラミングやってるか分からなくなるし。そういうときの丁度いい制作練習課題として、「コアラを回す」というものを最近設定しています。どんな言語でも20行以上100行以内くらいで出来るのでちょうどいい。

あ、この前初めてReact触ってコアラ回したのでみてください。
PCで開いてコアラにマウスをかざすとコアラが回転します。
http://utsuhology.rusk.to/_project/ReactLikeP5Test/



そんなわけで、「次はどの言語でコアラを回してやろうか」とワクワクしていたのが動機の一つでした。

歩数計を用いたお散歩、もっと楽しくなるはず

ワクワクコアラ回転プログラミングを楽しんでいた僕ですが、デスクワークばかりで運動不足になり、背骨がバキバキになってしまいました。うわ~~~。
そんな訳で運動不足を解消すべく、最近はよくお散歩をしています。

それで、スマホアプリの歩数計を入れてるんですけど、これがめちゃくちゃいい。
歩数が可視化されてるだけでめちゃくちゃ自己肯定感が上がってきます。健康をやっている気分になり、最高。
f:id:Distorted_Unchi:20190812114051p:plain
てかこの日すごいですね。朝5時にお散歩してその後どう考えても寝てる。なにこの生活。


でも歩数計って、もっと楽しく出来そうですよね。今使ってるのは歩数しか嬉しさがないシンプルなやつですが、ゲーミフィケーション的な要素を取り入れたり、いっそゲームにしちゃったり。もうありそうだけど。
ちなみにゲームの例はいっぱい出てきました。詳しくは見てませんが。
app-liv.jp


で、こう思ったんです。

f:id:Distorted_Unchi:20190812115115g:plain

「コアラが回る歩数計って絶対存在しないでしょ!!!」



そうです。もう俺が作るしかない。作るんです。

実装

作っていきます。今回技術記事じゃないので(え?)ここの説明は少なめです。

技術の選定(Cordovaを諦めちゃった)

Webをやってきた人なので、今までスマホアプリは全部Cordovaで作ってきたんですが、今回はCordovaを使うのはやめました。というか諦めました。
理由としては、

  • 常駐処理(アプリを閉じてもバックグラウンドで歩数を数える機能)の実装がしんどい
  • 前から目をつけていた歩数計のCordova pluginが思ったより機能不足だった

の二点です。特に常駐処理はハイブリッドアプリ開発でやるのはやめたほうがいいと思うくらいめんどくさそうでした。なので今回は普通にAndroid Studioを使って開発しました。

実装概要図

必要な機能とかを図にしました。それをどういうコードで実装してるかとかは今回は触れません。

f:id:Distorted_Unchi:20190813171551p:plain

いちおうGitHubソースコード上げてあります。
github.com

実装のようす

f:id:Distorted_Unchi:20190812120057p:plain
コアラがんばってます。

...

...

...

.........!!!
f:id:Distorted_Unchi:20190812105056g:plain

コアラがんばりました。
f:id:Distorted_Unchi:20190812115115g:plain

いざ、コアラとお散歩!

さて、大学に籠って頑張った実装も終わったので、試しに大学の周辺(中野)をお散歩してみたいと思います。

※お散歩を決行した日には「START/STOPボタン」と「RESETボタン」は未実装でした。ご了承ください。

さあ、コアラ、出発だ!
f:id:Distorted_Unchi:20190813155437g:plain

おっ、無意識に置いちゃうやつじゃん。
f:id:Distorted_Unchi:20190813155828j:plain

いや~疲れたな。もう終わりにしようかな。

f:id:Distorted_Unchi:20190813161205g:plain

...もうちょっと頑張るか。

おっ、「一夢」とかいうめちゃくちゃ怖い単位じゃん。
f:id:Distorted_Unchi:20190813155955j:plain

いや~~~マジでめちゃくちゃ歩いた。終わり終わり。

f:id:Distorted_Unchi:20190813161228g:plain

...コアラめちゃくちゃはしゃいでる...
もっと回してみようかな...!

...

最高かよ...

f:id:Distorted_Unchi:20190813161619g:plain

も~~~~~~最高でした。
まずコアラが回ると純粋に楽しいです。あとコアラというキャラクターがいることで孤独が紛れます。
あとは、歩いたことがきちんと報われるようになってるのが大きいです。「コアラが回る」という表現は速度のバリエーションの分だけ表現のバリエーションがあるので、歩けば歩くほど味が出ます
この「コアラが回る」という表現に関して、現状アニメーションのフレームレートがかなり低いので、もう少しフレームレートが上がってコアラが超速で回転してくれるようになれば更に良くなるかもしれません。

おわりに

今回は「コアラ歩数計」を作って取り敢えずお散歩してみました。正直僕がコアラが大好きだからここまで楽しめているだけかもしれませんが、僕と同じくこのコアラくんが好きな人は是非使って欲しいです。なのでGoogle Playとかで公開できるといいなあと思っています。(こんなのが審査通るのか?)

あと、この「コアラ歩数計」について思ったことが一つ。

もしかしてこれ歩数表示しない方がお散歩したくなるのでは?

というのも、コアラ歩数計を使ったお散歩のモチベーションとして、「コアラをもっと回したい」というものがあると思っていて、「コアラが回転する」以外の情報を取り除いたときに、歩数の数値を見て満足したりすることがなくなり、「コアラをもっと回したい」という欲求が高まると思っています。今後検証するかもしれないです。

それではさようなら。