見出し画像

【開発からリリースまで4日間】 選挙ポスターマップ開発の舞台裏（技術編） #安野たかひろ

#安野たかひろ 事務所（公式）

こんにちは、安野たかひろ事務所 技術チームの植田です。（実はプロダクションチームにてデザインや公式Webサイトの制作をしたり、一部政策提案もしています！）

前回は、東京都全域に設置された1万4千箇所の掲示板にポスター貼り付けるプロセスがいかに進化していったかをご紹介しましたが、この記事では公開後SNSやボランティアの方々から好評をいただいた新「ポスターマップ」のシステムについて、開発背景と技術的な構成について解説してみようと思います。

東京都全域の掲示板にポスターが貼られていく様子を可視化したヒートマップ（GIF）

大きな組織力を持つ場合は選挙区ごとに貼り付け担当者を配置して公示日から並行して貼っていったり、専門業者に発注したりするのが一般的なようですが、組織的な支援を受けず資金的にも制約のある私たちに残された切り札は、ポスターマップを通じた「デジタル化」しかありませんでした。ここまでの経緯については以下記事で詳細に解説しています。

選挙ポスターマップとは

選挙ポスターマップとは、1万4千枚の各選挙掲示板の位置情報にポスターの貼り付け状態を視覚的に重ね合わせたデジタル地図のことです。以下のスクリーンショットで示すように、ポスターが貼り付けられている掲示板には黄色のピンが、まだ貼られていない掲示板には青色のピンが置かれ、貼り付け状態を瞬時に理解できることがこのマップの特徴です。

実際のポスターマップのスクリーンショット。
ポスター貼り付け状態に応じてピンの色が変わる。

以下のリンクから最新状況をご確認いただけます。7月3日19時時点ではボランティアのみなさまの多大なるご尽力により、島しょ部を含めた東京都全域で95.6%の掲示板へのポスター貼り付けが完了しています。

地理空間上に情報を埋め込むこのようなアプローチはGIS（Geographic Information System: 地理情報システム）としても知られ、都市インフラの管理や防災などの文脈で全国的に利活用が進んでいます。

ポスターマップの機能は「各掲示板地点にピンを置いて、貼り付け状態ごとに色を変える」というとてつもなくシンプルなものですが、1万4千という数にもなると、このような単純な可視化が結果的に大きな威力を発揮しました。「デジタル化」と聞くと「AIあんの」でも使われている生成AI やディープラーニングなどの高度な手法につい目が行ってしまいますが、このマップのように単純な仕組みを用意するだけでも、日常レベルの業務効率を大きく改善することができます。

使っていただいた方からの反響

大変ありがたいことに、ボランティアの方のみならず幅広い層の方々からポジティブな反響をいただいております。

新ポスターマップ開発の経緯

1. 転記キャパを超える貼り付け報告

前回の記事でご紹介したように、当初はGoogleマイマップを利用し、それぞれの掲示板地点に置かれたピンの色を、LINEで報告される貼り付け状況に応じて手作業で変える（転記する）という運用を行っていました。これはGoogleマイマップはAPIが公開されておらず、ピンの色を機械的に変更する方法がなかったためです。

公示から数日が経つと、嬉しいことにたくさんのボランティアの方が手をあげてくださり、気がつけば1分に数件など手作業では転記しきれない量の貼り付け報告が行われるようになりました。使用しているツールこそデジタルではありますが、転記を担当するメンバーに大変な負担が掛かっていたため、運用改善の必要性を感じていました。

2. 位置情報の大量な訂正

報告数が多くなるにつれて当初登録した掲示板の位置情報が一部異なっていることも判明していきました。住所からGoogleマップAPIなどを利用してジオコーディング（緯度経度に変換すること）を行っていて正確な場所を特定できていなかったことのほか、当初参照したデータが前回の選挙区割に基づいたもので情報が古かったことなどが理由です。このような背景から位置情報を大量に更新する必要に迫られたわけですが、これもまた、数が多いため手作業でやるのには限界がありました。

3. 一括インポート機能の制約

2番目の課題の解決のため、一時はGoogleマイマップから各ピンの情報が含まれるファイル（KMLファイル）をダウンロードし、手元で位置情報を更新して再アップロードすることも検討しました。しかしながら実際に試してみるとピンの数が多すぎるがあまり、一括インポートが失敗するという新たな課題に直面し、全く別アプローチを取った方が賢明であることがわかってきました。

これらの課題を解決するべく開発されたのが新「ポスターマップ」です。

新マップ開発へ

新マップで最終的に目指したのは以下の状態です。

  • データを一元的に管理し、修正が必要な場合は一箇所を変更するだけで済むこと

  • 掲示板の位置情報（座標）を簡単に変更できること

  • LINEでのポスター貼り付け報告を、ほぼリアルタイムで自動でマップに反映できること（極力人の手を介さず動き続けること）

  • ポスター貼り付けの現場でスマートフォンから快適に閲覧・操作ができること

上記のような課題と理想状態を踏まえ、私たちはGoogleマイマップを使うのをやめ、マップを自前実装するという決定をしました。

厳密に言えば、ウォーターフォール的に計画を立ててチームでの細かい議論の末に移行を決定したわけではありません。私がデータを触りながら勝手に作っていたプロトタイプを関係メンバーとシェアしてみたところ「これでいいのでは」となり、結果的に移行することになった、というのが実際のところです。（チーム安野では、本プロジェクトに限らず開発・政策改善・広報が極めてアジャイルに並行して進められています！）

GitHubのコミットログを振り返ると、基本的なマップ描画機能とスプレッドシートからデータを読み込む処理機能を持ったプロトタイプ自体は数時間で完成していました。

そこからチームでシェアして移行までの段取りを決定し、旧マップからのデータ移行、LINEからデータ反映させる結合テストを経て、プロトタイプ開発からわずか4日の27日夜にリリースにこぎ着けました。たくさんのボランティアの方が動かれる週末に間に合わせたかったため、大きな問題が発生することなく移行を完遂できてほっと一安心でした。

ポスターマップの裏側

Webアプリとして公開しているポスターマップの基本的な構成は、以下の図のようになっています。なお本システムは、選挙期間終了後にオープンソースプロジェクトとして公開する予定です。

新ポスターマップのシステム構成図

データベース

掲示板の位置情報（座標）とポスター貼り付け状態のデータについては、Google Spreadsheetをマスターデータベースとして利用しています。より高度なデータベースも存在しますが、今回は非エンジニアのスタッフでも簡単にデータの更新や書き換えができることを重視し、多くの人に馴染みのあるGoogle Spreadsheetを選定しました。

データベースとして使用しているスプレッドシート

Google Apps Script（以下GAS）のWeb配信機能を用いてシートに記載されたデータをCSVとしてWeb上に公開し、そのCSVを手元のLinuxサーバでダウンロード後、Pythonスクリプトで加工することによって最終的にマップ側で読み込むJSONに変換しています。

PythonスクリプトではCSVファイルをpandasというライブラリで読み込み、各掲示板座標とステータスが含まれるJSONファイルと、区市町村別/全域での進捗率を集計したJSONファイルの二種類を出力しています。配信用JSONファイルでは区市町村と貼り付けステータスをID管理することでファイルサイズを削減し、ユーザのデータ通信量や描画されるまでの速度にも配慮しています。

報告ツール

ボランティアの方々に貼り付け報告をいただくツールとしては、LINEのオープンチャットを使用しています。LINEでの報告をLINE APIのWebhookでGASに送信し、GAS内でステータスを変更する掲示板番号（例：世田谷区1-1）を取得しています。投稿されるテキストには「世田谷1-1（区なし）」「世田谷区１ー１（全角！）」「世田谷区01-01（0付き）」「世田谷1-1,1-2,1-3（複数報告）」等揺らぎがあるため、テキスト変換やパターンマッチを駆使することで掲示板番号を抽出できるようにしています。

掲示板番号を取得後、その番号をキーにGAS経由でGoogle Spreadsheetの当該掲示板の貼り付け状況を「完了」に更新しています。LINEを使用されない方もいらっしゃるため、その方々にはメールで報告をいただき、データベースに手動で反映しています。また、不定形でLINEメッセージが送られるなど掲示板番号が特定できない場合にも、スタッフが手動で更新作業を行っています。

可視化

地図上での可視化にはLeafletというオープンソースの地図用JavaScriptライブラリを使用しています。このライブラリは少ないコードでインタラクティブなマップを作成できることが特徴で、ベースとなる地図の種類を変えたり、自身で用意したデータから任意の場所に任意の種類のピンを置いたりすることが簡単にできます。Googleマイマップとは異なりJavaScriptで自前実装できるため、「完了率パネル」や「凡例」を追加するなど、かなり自由なカスタマイズができました。

最新の完了率と凡例が画面右上に表示される

描画するピン（掲示板）の数が多く、利用している端末によっては動作が重くなることが考えられたため、全域のピンを全て表示したマップ以外に、地区ごとのマップも用意しました。さらに1万4千のピンをDOMに直接書き込むことも動作が重くなりうる要因と考え、Canvasで描画するようにもしています。（Leafletは標準でCanvasをサポートしています）

また、区市町村別の進捗ヒートマップには Linked Open Addresses Japan の行政区ポリゴンデータを使用しました。地名表記に多少揺らぎがあっても、狙った地区のGeoJSONを返してくれるAPI仕様となっていたため、とても使いやすかったです。

ホスティング

ホスティング（配信）にはドメインからもわかるようにNetlifyを使用しており、変換・加工処理を行っているローカルサーバからnetlify-cliを用いてデプロイをしています。

GASからのCSVダウンロード、配信用JSONへの変換、デプロイまでの一連の作業はシェルスクリプトにまとめ、cronにて5分に1回定期実行するようにしています。GitHub ActionsのSchedule機能を用いることでサーバレス化することも検討しましたが、実行まで遅延があることから、データのリアルタイム性/鮮度が重要視される今回は手元のサーバで処理を完結させることにしました。

工夫したこと

未完了掲示板だけを表示できるように

Googleマイマップでは貼り付け状態に関わらず全てのピンが常時表示されていましたが、実際に貼る際には「まだ貼られていない掲示板」に向かって移動していくため、開発した新マップでは既に貼られている掲示板のピンを非表示にすることができるようにしました。不必要な情報に触れることなく、現場で貼り付け作業をスムーズに進めていただけるような設計を心がけました。

貼り付けが完了した掲示板を非表示にすることができる

また今回のポスターマップはナビゲーションまでは対応していないため、普段使い慣れているアプリで目的地を参照できるようにしました。吹き出し内の座標がGoogleマップへのリンクとなっており、クリックするとアプリで掲示板地点が開くようになっています。

進捗を可視化してゲーム感覚に

1万4千枚という途方もない数の掲示板にポスターを貼っていただくにあたり、極力ボランティアの方に楽しんでいただけるような工夫を心がけました。各掲示板のピンの色がただ変わるだけでなく、地域ごとのヒートマップを用意することで、どの地域が進んでいてどの地域で進んでいないかを一目でわかるようにしました。

区市町村ごとの完了率ヒートマップ。
100%に近づくほど赤色が濃くなっていく。

さらには東京都全域での貼り付け完了率もマップ横に数字として表示し、貼り付けを進める中で数字が徐々に100%に近づいていく様子がわかるようにしました。（実はリリース当初は実装していなかったのですが、あったら面白いかなと思い途中で追加しました！）

左上に東京都全域での完了率が表示されている（このときは90.6%）

お互い直接面識は無いながらもLINEのオープンチャットにいる「チームあんの」の仲間たちと一緒にポスター貼りを進めていくと、ピンが黄色になって、区市町村ごとの地図が赤く塗られていき、完了率の数字も上がっていく。これだけでゲームみたいでわくわくしませんか･･･？

ベースマップを複数種類から選択可能に

東京都は自然豊かで山がちな多摩地方から、都心から最大約千キロ離れた島しょ部まで、地理条件が多様です。それぞれの土地の全ての情報が詳細に反映されている完全なマップは存在しないことから、本アプリではGoogleマップ、OpenStreetMap、国土地理院地図の3種類からベースマップを選択できるようにしました。地図を利用させていただきましたOpenStreetMapのコントリビュータのみなさまに、この場を借りて感謝申し上げます。

おわりに

デジタル化で人間にしかできない仕事を

ご覧いただけたように、シンプルな仕組みでであっても「デジタル化」を進めることで日常の業務効率を大幅に向上させることができます。テクノロジーの力を有効に活かすことができれば、人力で作業することで消えてしまっていた労力を、フィールドに出ていったり目の前で困っている人の話を聞いたりするなど、人間にしかできない本質的な仕事に振り向けることができます。

データ基盤の重要性

本プロジェクトでは「選挙ポスターを貼る」ということに焦点を当てて開発を進めましたが、同様のアプローチ(GIS)は道路や公園などのインフラ管理や災害時の状況把握などにもそのまま活かすことができるものであり、都民の生活を支える不可欠なツールになると信じています。

今回は文字通り「紙の山」として提供された、各区市町村で独自様式の選挙掲示板一覧表をデジタル化する部分が一番高いハードルでしたが、このようなデータレジストリさえ整備されていれば、加速度的にDXによる改善を進めていくことができるはずです。（この記事を読んでいるデジタル庁の方、東京都あるいは区市町村の選挙管理委員会の方がいらっしゃいましたら、選挙掲示板の位置情報データを統一フォーマットで提供するベースレジストリ整備をご検討いただけたら幸いです！）

ポスターマップに機械学習は一切使用していませんが、今回準備したデータ基盤を発展させて追加データと統合的に運用していけば、貼り付けメンバーの配置の最適化、ポスター受け渡し場所間でのロジスティクスの最適化、ポスター貼り進捗率の予測モデルの構築なども理論的には可能です。私個人としては、多様な領域において発展的な機械学習モデルを利用したDXを進めるためにもまずはデータ基盤の整備が重要であることを再認識しました。

テクノロジーで東京をアップデート

ポスターマップはテクノロジーを活用した業務効率化の一例に過ぎません。安野たかひろは行政手続き、子育て、防災、インフラ、公共交通などさまざまな領域においてテクノロジーを使って東京をアップデートしていきます。テクノロジーをどのように活かして都政を進めていくかなどの政策の具体例、選挙活動についてもっと知りたい場合は、以下公式サイトをご覧ください。

最新情報は、本人・事務所の公式X(Twitter)アカウントをフォローしてご覧ください！

安野たかひろ事務所(@annotakahiro24)
安野たかひろ本人(@takahiroanno)