記事について

こんにちは！

この記事では前回、学習した技術を使って、
オープンデータの可視化をするための開発について書いています！

↓今回作成したもの(東京の避難所データを統合し、マップ上に可視化)

※GitHubのリポジトリはこちらに公開しています。

↓今回作成したものの構成イメージ

前回までのあらすじ

4月に入社後の新卒研修ではJavaやSQLなどの基本的(?)な内容を学習しました。
研修内容を復習し、いざ本配属！

そんな私に出された課題は「FIWAREでオープンデータを可視化する」というものでした...
次々に出てくる謎の単語達に若干のめまいすら覚えながら、必死にメモを取っていました
与えられた期間は１か月間...

「やるしかない」

そう考えた私は謎の単語達を学習し、開発を始めるのでした...

開発の軌跡

活用した技術

FIWARE
Deno
Typescript
Docker
dim
Git, GitHub

利用したサイト

オープンデータ検索サイト
- データカタログ横断検索サイト
WireCloudのウィジェットまとめサイト
- WireCloud Appendix:Widgets
Typescriptを書く際のベストプラクティスをまとめたサイト
- TypeScript Deep Dive

何を開発するかの企画・検討

このフェーズが最も大変でした

実際に手を動かした内容としては以下の2つです。

どのようなデータが公開されているか調べる
- 「東京　オープンデータ」などのワードでひたすら検索してデータを探しました。
  - データカタログ横断検索サイトという便利なサイトを発見しました！
オープンデータの利用事例を調べる
- 「オープンデータ活用事例」などのワードで検索をしました！
  - デジタル庁が活用事例をまとめていたオープンデータ100を発見しました！

その後、何度も何度も先輩とディスカッションを重ね、開発するものを決定しました！

東京避難所データの統合と可視化

これを進めることによって...
- バラバラになっている避難所データを統合することが出来る
  - 複数のデータセットではなく、1つのデータセットとして扱える
  - 複数に散らばったデータ内容を1つにまとめられる
    - 都全体データと市区町村データの両方に存在するデータを統合
- 形式や内容を統一出来るため、扱いやすくなる

といったメリットが生まれてくると考えています！

作るものが決まったので、開発を進めていきましょう！

データの取得

兎にも角にもデータが無ければ進めることは出来ません！

このデータ取得で非常にお世話になったのはdimです！

dimとは？

コマンド上でデータ検索とダウンロードを行える
データの取得元とデータに対する処理を管理してくれる
dim.jsonファイルを共有することで一括で全データを取得できる
私が配属されたチームで開発をしています！

という便利なツールです！

今回は個人での開発ですが、データ取得するタイミングが複数回あり、非常に助かりました！

以下にQiita記事とGitHunbのリポジトリへのリンクを掲載しておきます。
興味のある方はぜひ、issueを上げたり、Developerとして参加したりして頂けると嬉しいです！

そんなdimを使って取得したオープンデータは全部で32！

この数字は東京都の避難所について検索をした結果出てきたもの全てです。

この中には使わないデータもありましたので、実際は全部は加工しませんでしたが...
使用しなかったデータがあった理由としては以下の通りです。

完全に重複していたデータ(7個)
明らかに形式のおかしなデータ, 表になっていないデータ(2個)
- 一つのシートに複数のテーブルがあるという...
経度や緯度以外の座標系が用いられていたデータ(2個)
- 国土地理院の計算ソフトで変換してみましたが、別の座標を指してしまいました...

そのため、実際に加工したデータは全部で21個です！

dimに関するお知らせ

Code for Japan主催イベント「Social Hack Day」にdimの開発プロジェクトを持ち込み参加します！

日時：2022年10月22日(土) 11〜18時
(初参加の方は10:45からガイダンス / zoomは10:40より接続開始)
会場：Zoomでのオンライン開催

興味を持っていただけた方は是非！ご参加ください！
内容については以下のYouTube動画の48:15からお伝えしています。

Code for Japan Summitに弊社が参加しました！

データの加工

Typescriptを用いたプログラムで加工を行いました！
作成した tsファイルはDeno環境下で実行しています！

tsファイルは全部で5つあり、以下の通りです。

open_data_accessor.ts
integration.ts
entity.ts
orion_client.ts
main.ts

コードを書くと物凄く長くなるため、それぞれのコードへのリンクを張っています。
コード内にコメントを残しておりますので、ご覧ください。

open_data_accessor.ts

OpenDataAccessorクラスを定義しています。
CSVファイルのパスとカラムの名前(配列)を渡すことで、CSV形式のデータをレコード型に変換してくれます。

コードはこちら！

integration.ts

ShelterIntegratedクラスを定義しています。
引数であるレコード型配列内の新規データを識別し、統合してくれます！

コードはこちら！

entity.ts

ShelterEntityクラスを定義しています。
引数として統合された配列を受け取り、NGSIv2形式に変換してくれます！

コードはこちら！

convertToDisasterNameメソッドでは、

洪水	地震	火災	...
1	0	1	...

といった表を [洪水, 火災] というstring配列に変更しています。

orion_client.ts

OrionClientクラスを定義しています。
NGSIv2形式に変換されたデータ配列をFIWARE OrionへPOSTしてくれます！

コードはこちら！

main.ts

紹介した4つを順次適用していきます。

コードはこちら！

材料が揃いましたので、データの可視化をしていきましょう！

※ここからは GitHub Codespaces を使って行いました

Denoのインストール

ターミナルを開き、以下のコードを打ち込みます。

curl -fsSL https://deno.land/x/install/install.sh | sh

※ ローカル環境にCloneして、実施する場合は環境に合わせてこちらからインストールしてください。

インストール完了後に表示される以下のコードを打ち込みます。

export DENO_INSTALL="/home/codespace/.deno" 
export PATH="$DENO_INSTALL/bin:$PATH"

Denoのインストールは完了です！

dimのインストール

以下のコードを打ち込みます。

 curl -L https://github.com/c-3lab/dim/releases/latest/download/x86_64-unknown-linux-gnu-dim -o ./dim

※ ローカル環境にCloneして、インストールする場合はこちらを参考に進めてください。

インストールが完了したら、以下のコードで権限設定を行います。

 chmod u+x ./dim

dimのインストールは完了です。

dimを利用してオープンデータを”一括で”ダウンロード

以下のコマンドを打ち込みます。

dim install -F

このコマンドを打つだけで、
dim.jsonファイルに登録されているデータがすぐにダウンロード出来ます！

コンテナを起動(Docker)

ymlファイルとして
以下のサイトを参考にしました！

ご自身の環境に合わせてフォルダ直下にdocker-compose.ymlとして保存してください！

以下のコードを打ち込みます。

 docker compose up -d

コンテナが正常に立ち上がっているか確認してみましょう。

 docker compose ps

※ 起動していないコンテナがあれば

 docker compose start

と打ち込んでコンテナを起動します。

全てのコンテナが起動していれば完了です。

Wirecloudのスーパーユーザー登録

以下のコードを打ち込みます。

 docker compose exec wirecloud python manage.py createsuperuser

ユーザー名、メールアドレス、パスワードを登録します。
この後、ユーザー名、パスワードは使用しますので、メモしておいてください。

Typescriptの実行

deno run --allow-read --allow-net main.ts

を実行し、オープンデータの加工から投入までをしてしまいます！

Wirecloudでの可視化

サインイン

http://localhost:80にアクセスし、Wirecloudに接続します

右上のサインインボタンからサインインします
※先ほどメモをしたユーザ名とパスワードをここで使用します。

ウィジェットのインストール

以下のサイトからウィジェットを自身のPCにダウンロードします。

地図ウィジェット
CoNWeT_ol3-map_1.2.3.wgtをダウンロードする。

NGSIデータ取得ウィジェット
CoNWeT_ngsi-source_4.2.0.wgtをダウンロードする。

地図ウィジェットにNGSIデータを入れるウィジェット
CoNWeT_ngsientity2poi_3.2.2.wgtをダウンロードする。

Wirecloudの画面に戻りまして...

画像の右から2番目の「マイ・リソース」をクリックする。

左の「アップロード」をクリックする。

先ほどダウンロードした3つのウィジェットをアップロードする。

ワークスペースの作成

1つ前のページに戻り、ハンバーガーボタンから「新しいワークスペース」を選択する。

好きな名前でワークスペースを作成してください。

各ウィジェットの配置・設定

左から2つ目の「コンポーネントを追加」を選択する。

左側に出てきた「OpenLayersMap」を+ボタンから追加する。

真ん中の「ワイヤーリング」を選択する。

ハンバーガーボタンの右にある「コンポーネントの検索」を選択する。
オペレーターから「NGSI source」,「NGSI Entity To PoI」
ウィジェットをから「OpenLayers Map」を追加し、画像のようにつなぐ。

NGSI sourceの設定を画像のように設定する

1つ戻って地図を確認すると...

避難所の位置がマッピングされています！

まとめ

今回の開発を通じて、感じたことは

自治体ごとに公開されているデータが多かったり、少なかったりする
→ 横展開がしずらくなっているのでは
公開されているデータの形式や内容が統一されていない
→ データを利用する際に加工する必要がある
自治体によって公開している場所がバラバラ
→ 市区町村HPだったり、県や都のHPだったり、カタログサイトだったり...
多く公開されている場所でもデータの種類が少ない
→ やりたいことベースで考えると出来ない可能性がある
データや事例の更新をあまり感じない
→ データが更新されていない
→ サイトのレイアウトや事例紹介に古さを感じる
データの加工が面倒
→ 同じ種類のデータでも自治体によって中身が違うので加工方法も変える必要がある

という点が開発する上でネックになっていそうだと感じました。

こうした課題があるということを今後の業務に活かしていきたいと考えています！

最後まで読んでいただき、ありがとうございました。
皆様の何かしらのお役に立てれば嬉しいです！