🗾 coderdojo.jp から地域別 CoderDojo 数をリリース
coderdojo.jp の統計情報ページで、地域別 CoderDojo 数が視覚的に俯瞰できるようになりました 🚀🆕✨
👨🎨 描画部分は Japan Map ライブラリ
一見、画像の上に文字を乗せているようにも見えますが、実際には Japan Map というライブラリを使って地図データを描画しています 👨🎨🗾
内部では CANVAS を使っているため、例えば onHover や onSelect といったインタラクティブな処理を書くこともできます。
今回の実装では、マウスカーソルを都道府県に合わせると道場数が表示するようになっています 🔍👀 (モバイル対応については後述)
🤝 全国地方公共団体コードでデータ整合性もバッチリ
Japan Map では都道府県毎に Prefecture code という番号が内部で割り振られていますが、これは総務省が公開している全国地方公共団体コードと同じ並びをしています。
coderdojo.jp の統計情報も同様のコードを参照して並べていたため、統計データをそのまま Japan Map に流し込めました 🗾🚜💨
実際に書いたコードは次のとおりです。比較的コンパクトにまとめられたかなと思います 😌✨
📱 モバイル端末では画像っぽく描画
上記 Pull Request でもメモしていますが、Japan Map の内部では Canvas API で地図をデータを描画しています。
当初はモバイル端末でもそのまま表示させようと考えていましたが、実際に触ってみると小さなスクリーンで都道府県 (東京や埼玉など) をタップするのが難しい、文字が重なって一部読めなくなってしまうといった課題が見つかりました。
このため、『そのまま表示させてもあまり効果的ではないな』と判断し、モバイル端末ではインタラクティブな部分は意図的に無効化しています ✂️
(モバイル端末での表示画面。画像っぽく表示させていますが実際には Canvas API で描画しているので、Dojo 数が変化すれば数字部分にも反映されます。)
📊 優先度はデータで判断する
もしモバイル端末で見る人が少ない or 多いといった場面ならどちらかに倒すといった判断もできそうですが、coderdojo.jp はモバイル端末で見る人が 46.6 % という状況です。
このため coderdojo.jp ではモバイル端末で見る人についてもそうでない人についても、それぞれを意識しながら実装した方が良いと判断しています 📱👀✅
🤔💭 今後の展望
Japan Map と統計情報を組み合わせる仕組みが整ったので、今後は coderdojo.jp 内であればどこでも地図データを使った実装ができるようになりました 🛠💨
とはいえモバイル端末での表示方法も考える必要があるので、例えば『Japan Map を使った CoderDojo 検索』みたいなインターフェースを実装するとしても、何かしら工夫する必要がありそうです。
例えば『都道府県』といった単位ではなく、『東北』や『関東』といった単位ならモバイル端末でもインタラクティブな操作をしやすくなる工夫とかですね 👀💭
✅ まとめ
前回のタグ分布に加えて、地域別 Dojo 数もリリースされ、より視覚的に統計データが見えるようになったかなと思います。全国の CoderDojo 数を俯瞰したい場面などでご活用して頂けると嬉しいです 😌💖
一般社団法人 CoderDojo Japan のパートナー法人の１社として、YassLab 社では引き続き coderdojo-japan/coderdojo.jp にコミットしていきます。弊社が関わった機能については note の『coderdojo.jp 開発マガジン』から随時公開していくので、もし興味あればぜひフォローしてみてください 😉
YassLab株式会社の活動に興味を持っていただければ嬉しいです。こちらからのサポートは Raisチュートリアル、Railsガイドなど各サービスの向上に役立てていきたいと思います💓