toioを用いた地球儀型デバイス開発日記

## はじめに
本記事は[toio Advent Calendar 2021](https://qiita.com/advent-calendar/2021/toiotomo)の12/22の記事となります。

本記事では、2021年に作成した「toioを用いた地球儀型デバイス」であるtoio地球儀のハード面の開発を、日記風に記載していきます。[toio地球儀](https://protopedia.net/prototype/2554)とは、toio2台を用いた地球儀型デバイスであり、「ユーザが指し示した地点を取得する機能」と「システムが決定した地点を指し示す機能」があります。

![Video 3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/d0c42a16-5789-beb3-7f68-3309015302a2.gif)

このデバイスを使った1アプリケーションに関しては、別記事で投稿しましたので、そちらを御覧ください。

https://qiita.com/team_kuchibashi/items/bd58ab800067ae8e9664

## 開発日記

### 2021年3月：toio「Do!コン」参加
ここ数年、親子のコミュニケーション促進のため、何らかのコンテストに工作作品を出しています。今年は2021年春に開催された[toio「Do!コン」](https://protopedia.net/event/13)に参加しました。

https://protopedia.net/event/13

このコンテストでは、エントリ時に返却不要の toio 2台が入った開発素材が配布されるという「お得」なコンテストであり、ここで初めてtoioを触る機会を得ました。toioに対する最初の感触は、各種センサを搭載しつつも小型化を実現できていることに驚いたのを覚えています。特に私達親子は紙工作による作品作りを得意としていましたので、「小さく、軽い」「直方体というシンプルな形状」が紙工作に向いている、とまず感じました。

toio「Do!コン」は、toioに触るだけではなく、様々なtoioクリエータを知るきっかけともなりました。[リンク先](https://protopedia.net/event/13)にある通り、作品はどれも多様性があり、とても刺激を受けました。

### 2021年6月上旬：toioと日本地図の組み合わせを試す
toio「Do!コン」の終了後、toioの特徴である絶対位置取得機能を用いた別の作品を作ることにしました。この世界で最も身近な絶対位置は「緯度・経度」だと常々思っていましたので、緯度・経度とtoioを組み合わせた作品として、[「toioで旅に出よう」](https://protopedia.net/prototype/2295)を作成しました。

<iframe width="320" height="240" src="https://www.youtube.com/embed/JY-Bz0nqqqQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

このシステムは日本地図を印刷したtoioプレイマットを使います。そのプレイマットの上にtoioを置くことで、その場所の街並み画像をGoogle Street View で表示するというとてもシンプルなものでした。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3935363035312f38326537313561652d313532372d376234642d326365342d3766313830643839393432612e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/f6e3218a-426b-ba76-179f-1b10f0284c80.png)

このシステムは単純な構成ではありましたが、toioを配置した位置・向きによって思っても見ない光景が表示され、かなり遊べるシステムとなりました。この成果により、地図とtoioの相性の良さを再確認することができました。

このシステムの完成後、親子で議論した際に「今度は世界地図でやりたい」「ユーザが指し示すだけでなく、システム側からも指し示すことができるようにしたい」という議論を行いました。この議論を受け、単純に「toioで旅に出よう」の仕組みを世界地図版に拡張したものを作りました。しかし、ご想像の通り、2次元の世界地図と緯度・経度は非常に相性が悪いことがわかり、やはり地球儀のような球体上での三次元コントロールが必要との判断に至りました。

### 2021年6月下旬：地球儀の作成
toioで地球儀をコントロールする方法を考える前に、地球儀の作成を開始しました。これは、まずモノがあった方がtoioとの組み合わせを考え易いだろうと考えたためです。当方親子は、3Dプリンタの知見がまったく無く、こういった3次元形状の作成はどうしてもペーパークラフトとなります。今回も、ペーパークラフトで地球儀を作成しました。

地球儀は、球体のモデルに、[NASAのサイト](https://visibleearth.nasa.gov/collection/1484/blue-marble) からダウンロードした衛星写真をテクスチャとして貼り付けることで実現しました。衛星写真を使っているため、一般的な地球儀のような国名や国境はありません。逆に撮影時の雲が写っているため、本物の地球のスナップショットのような、少し変わった地球儀となりました。このモデルに興味がある方は、本記事のおまけ部分を御覧ください。

![434396631376161356230352e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/a96c0547-9b3d-1a9f-1e48-f6b1f770a828.png)

### 2021年6月下旬：toioと地球儀の連携を模索
地球儀のペーパークラフトを触りながら、どのようにtoioと地球儀を連携させるかの検討を行いました。先に述べた通り、「ユーザが指し示すだけでなく、システム側からも指し示すことができるようにしたい」という難しい要件をクリアするため、いくつかの案を出し合いました。例えば、toioを磁石で地球儀上に吸着させる案、ひっくり返した2台のtoio上で地球儀を転がす案等が出ました。しかし、実現可能性や地球儀としても見栄えの観点でこれらは採用しませんでした。特に、地球儀本体をプレイマットで作成すると、どうしても球体モデルのつなぎ目部分に不連続となる領域が発生し、絶対位置がうまく取得できないことが予想されました。

![title.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/df53dd34-717d-a373-e448-f19896483363.png)

結局、緯度を１次元で制御するtoio(下図のオレンジ)、経度を１次元で制御するtoio(下図の青)に分け、それぞれをフレームと台座下で連携させることで、特定の緯度・経度の入出力を制御することとしました。これならば、地球儀自体から位置情報を取得する必要が無く、地球儀のつなぎ目部分を気にする必要はありません。

![setumei1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/ea068c8a-35e3-c685-804b-5e26909b42d8.gif)

### 2021年7月上旬：緯度制御toioの検討
緯度toioの作成を開始しました。緯度toioは緯度方向のポインティングを行います。これを実現するためには、toioをフレームの壁面を重力に逆らって移動させる必要がありました。

当初、toioのタイヤを裏側から押さえるパーツを配置し、そことタイヤの間に紙を通すことで、重力に逆らって移動でき、その絶対位置からtoioがいる場所の緯度の算出ができると考えました。例えば、プレイマットの原点位置が(x0, y0)で、toio位置が(x, y)の場合、

```math
tan^{-1}(\frac{y-y_0}{x-x_0})
```

により、原点を通る赤道面からの角度がわかります。この角度を-90から90の範囲にマップすれば、緯度に変換することが可能です。

![title.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/9858f951-ec67-8a10-6ce8-1722bd8e1b89.png)

しかし、toioを壁面移動させるアイデアの実現には苦労しました。例えば、移動対象の紙とタイヤを外側から押さえるパーツ（ここでは「タイヤ押さえ」と呼びます）の接触面積が大きいと、そこで発生する摩擦により壁面移動時にtoioが止まってしまいます。また、湿度によりタイヤが壁面をうまく捉えられず、空回りしてしまうこともありました。これら課題をクリアするため、タイヤ押さえをタイヤをカバーできる最低限の大きさとし、タイヤ押さえの用紙接触部分にロウを塗ることで、滑りを良くする工夫を行いました。また、移動対象用紙のタイヤが接する部分には、セロハンテープを貼ることで、タイヤとの摩擦抵抗が大きくなるようにしました。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3935363035312f38343238633334352d376464392d613931622d623133362d3365653834326365353038342e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/32222121-a6cb-9e30-9c8c-cd6eae98689b.png)

これらの工夫により、安定して壁面を移動できるようになりました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">夏休みの課題で作っている地球儀です。toioで緯度方向の場所を指定することができるようになっています。 <a href="https://twitter.com/hashtag/%E5%9C%B0%E7%90%83%E5%84%80?src=hash&amp;ref_src=twsrc%5Etfw">#地球儀</a> <a href="https://t.co/k7gyOb1DEq">pic.twitter.com/k7gyOb1DEq</a></p>&mdash; masaki (@masaki_samurai) <a href="https://twitter.com/masaki_samurai/status/1424307462153281539?ref_src=twsrc%5Etfw">August 8, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

参考までに、下の図はこのパーツを試作順に左から並べたものです。

![IMG_3179.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/92504639-d4eb-a1a8-233c-a9adca144e55.jpeg)

### 2021年8月上旬：経度制御toioの検討
次に、経度toioの検討に入りました。経度toioは地球儀の台座部分に配置し、地球儀を下から回転させる働きを担うものです。回転対象の回転盤をプレイマットで作ることで、現在の地球儀の向きを算出できるようにしました。なお、toio自体はtoio固定具で台座部分に固定し、センサーと左タイヤだけが回転盤に乗るようにしています。このとき、toio絶対位置から経度を算出する方法は、緯度で用いた方式とほぼ同じです。回転板の原点からの角度を三角関数で算出し、-180から180の経度にマップするのです。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3935363035312f36396632323333322d326166362d376362332d653565622d6536653064393039336438642e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/0f256546-aff3-fdfc-e497-cd286092fb48.png)

経度toioの動作は次の通りです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">toioマットの回転で地球を回す仕組みを入れています。マットの絶対位置を取得できるので、経度の制御を簡単にできるようになっています。 <a href="https://twitter.com/hashtag/%E5%9C%B0%E7%90%83%E5%84%80?src=hash&amp;ref_src=twsrc%5Etfw">#地球儀</a> <a href="https://t.co/VBIjJfYuRu">pic.twitter.com/VBIjJfYuRu</a></p>&mdash; masaki (@masaki_samurai) <a href="https://twitter.com/masaki_samurai/status/1425382014463614976?ref_src=twsrc%5Etfw">August 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 2021年8月中旬：緯度・経度toioとの連携確認と、フレーム部分の作り込み
息子が夏休みの理科の課題としてtoio地球儀を提出することしたため、開発に本腰を入れるようになりました。まず、これまで個別に検討していた緯度・経度toioを組み合わせ、連携動作を確認しました。緯度・経度toioともに、独立性の高いものでしたので、大きな問題なく連携動作ができました。地球儀上で指定した位置が自動でポイントされるのは、大変興味深かったです。

ただし、動きの面で少しだけ気になる部分がありました。システムが指定した緯度・経度に地球儀を移動させる際、目標の地点を少しだけ行き過ぎることです。おそらく、toioの移動速度に対し、場所の検知と移動を止めるという制御が間に合っていないのが原因だと思われました。そのため、次の動作を組み込み、なるべく正しい位置に移動できるようにしました。
1. まず速度Aで指定した位置に移動する。(この時点で目標の地点を少し行き過ぎる)
2. 速度Aの半分の速度で、行き過ぎた位置にもう一度移動する。(目標の地点に戻る)
この仕組により、正しい緯度・経度をポイントできるようになりました。次の動画で、この動き（行き過ぎて、少し戻る）が確認できます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">応用アプリ2「Gor☆geous」<br>音声入力により、400の国、地域、都市名を認識し、その地点を指差します。 <a href="https://t.co/jpf6UuhSmN">pic.twitter.com/jpf6UuhSmN</a></p>&mdash; masaki (@masaki_samurai) <a href="https://twitter.com/masaki_samurai/status/1436906716856160265?ref_src=twsrc%5Etfw">September 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このような制御により、特定位置を正しくポインティングできるようになりました。この動画で用いているアプリケーションは、toioDoで作成されたテストアプリです。日本、マダガスカル、アルジェリア、メキシコという、お笑い芸人のゴー☆ジャスさんのネタから拝借した国名をタブレットでクリックすると、その国を地球儀が指し示します。このTweetは、息子のTwitterの中で、1、2を争う拡散数となりました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">夏休みの課題で作っている地球儀は、ここまでできました。2つのtoioで緯度経度を制御し、ゴー☆ジャスさんみたいに国を指し示します。 <a href="https://twitter.com/hashtag/%E5%9C%B0%E7%90%83%E5%84%80?src=hash&amp;ref_src=twsrc%5Etfw">#地球儀</a> <a href="https://t.co/ot3C8u09L5">pic.twitter.com/ot3C8u09L5</a></p>&mdash; masaki (@masaki_samurai) <a href="https://twitter.com/masaki_samurai/status/1428890648829067264?ref_src=twsrc%5Etfw">August 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

動作の確認ができたため、これまでの検討でボロボロになったフレーム、台座部分の作り直しを行いました。これまでフレームや台座部分は、作り直しを考えて、着色を行っていませんでした。しかし、完成が見えてきたため、落ち着いた木目調にデザイン変更しました。実際に組み上げた台座・フレームは次の通りです。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3935363035312f63326235626366352d643239342d303737342d303030332d3536356666643035393730622e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/49b0abbb-1a65-818a-efec-ebd9d4f4d4f2.png)

完成した地球儀は次のような動作となりました。ユーザが地点を指し示す機能、システム側から自動で地点が提示される機能が無事に実現されました。

![Video 3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/ed6669c3-c8e4-4ae5-c077-989c06e7172f.gif)

### 2021年8月下旬：理科の課題レポート作成とWebサービス連携の模索
8月下旬となり、息子が本地球儀を使ったレポートを書き始めました。テーマは太陽と地球の年間を通した位置関係に関するもので、特定日時の太陽位置（太陽に正対する地球上の緯度経度）を本地球儀上で可視化する試みを行いました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今年の理科課題のレポートが登校日ぎりぎり前に完成しました。この前作った地球儀で、指定した日時の太陽位置を表示できるようになっています。<br>去年の課題では受賞できなかったので、今年はこれで受賞を狙います。 <a href="https://twitter.com/hashtag/%E5%9C%B0%E7%90%83%E5%84%80?src=hash&amp;ref_src=twsrc%5Etfw">#地球儀</a> <a href="https://t.co/bjmohPX5dn">pic.twitter.com/bjmohPX5dn</a></p>&mdash; masaki (@masaki_samurai) <a href="https://twitter.com/masaki_samurai/status/1431449579656937474?ref_src=twsrc%5Etfw">August 28, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上のTweetでは学校での受賞を狙っているとありますが、このレポートは学校内ではあまり評価されなかったみたいです。。

その頃、父親の方は、本地球儀と各種Webサービスとの連携を検討していました。前出の「toioで旅に出よう」は、興味深いシステムではありましたが、もう少し緯度・経度から得られる情報を山盛りで提示するほうが面白いのではないかと考えていました。例えば神様が、特定の場所の人間の暮らしをひと目で把握するようなシステムです。

この思想をもとに作られたシステムが[地球ブラウザScope](https://masaki.page/web/globe/scope.html)です。Scopeに関しては[別記事](https://qiita.com/team_kuchibashi/items/bd58ab800067ae8e9664)にまとめましたので、そちらを御覧ください。

![setumei9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/eeec1931-5d04-d9a7-f688-65d9a4a80ce8.png)

このシステムは、toioとWeb Bluetoothで連携したブラウザに、ユーザが指し示した地点のありとあらゆる情報を表示するというものです。これもまた、時間つぶしとなるシステムとなりました。

## ヒーローズ・リーグ2021への参加
ヒーローズ・リーグには、昨年初めて参加し、息子も大変楽しんでいたので、今年も[ヒーローズ・リーグ2021](https://protopedia.net/event/21)に、この作品で参加することとしました。ヒーローズ・リーグはIT系の開発コンテストですが、幅広いジャンルの作品がヒーローを目指して競い合うところが、他のコンテストに無い魅力になっています。応募時の作品紹介ページは[こちら](https://protopedia.net/prototype/2554)です。

https://protopedia.net/event/21

9月の初旬に応募を完了し、[11/24に予選](https://youtu.be/uoktMA_1ut8?t=1651)がありました。予選では、Zoomでのプレゼンバトルであり、長男が頑張って発表しました。練習の甲斐があり、上手に説明ができたと思います。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/616f0625-2bc4-90b7-3989-fefd2e4b4267.png)

予選通過者は、[12/11に行われた決勝](https://youtu.be/H65BA0Fcmws?t=11037)に進むことができます。ここでは、プレゼンなどは無く、基本的に応募した動画を審査員の方が評論してくれます。そして、最後に参加者全員での投票があり、本作品は、
- toio賞
- オンラインヒーロー賞
の2つの賞を受賞しました。どちらの賞もとても光栄であり、我々のような素人家族でも受賞できるという良い事例ができたと考えています。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">結果発表は、興奮しました！<br>toio賞とオンラインヒーロー賞を受賞できました。<br>ありがとうございます！<a href="https://twitter.com/hashtag/%E3%83%92%E3%83%BC%E3%83%AD%E3%83%BC%E3%82%BA%E3%83%AA%E3%83%BC%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#ヒーローズリーグ</a> <a href="https://t.co/HrNEfZIiKT">pic.twitter.com/HrNEfZIiKT</a></p>&mdash; masaki (@masaki_samurai) <a href="https://twitter.com/masaki_samurai/status/1469596357887668225?ref_src=twsrc%5Etfw">December 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## まとめ
本記事では、2021年に作成した「toioを用いた地球儀型デバイス」のハード面に関する開発を記載させていただきました。上にも書きましたが、toioはその機能や形状から、とても工作との親和性が高いデバイスだと考えています。本記事により、toioを使った工作に興味を持つ方が一人でも増えると大変嬉しいです。

## おまけ
今回作成した地球儀のペーパークラフトを次の場所で公開しています。A4のペーパークラフト用紙に印刷すれば、同じものが作れます。よろしければご利用ください。使用時の連絡等は不要です。

![setumei5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956051/cc5eb140-cbfb-8af6-963b-8c35d486713c.png)

地球部分ペーパークラフトダウンロード

https://drive.google.com/file/d/1lWcXn_7fwy0_phP_T_MXu-IQTYzEfZGP/view

台座部分ペーパークラフトダウンロード

https://drive.google.com/file/d/13Bz3YiDkfUzYwoZobx3cTlT-bYLNkCMa/view