[BOD供養寺]マイナンバーカード交付率をグラフ表示するサイトを作った


先日の記事[BOD供養寺] スクレイピングしてきたデータの文字コードがおかしかったので修正したは、たくさんの人に読んでいただきありがとうございました。

その後、無事BADオープンデータの供養が完了し、Tableau を使って綺麗なグラフを表示することができたので、供養の過程をこちらにも書いておきたいと思います。


(完成したダッシュボード: http://mynumbercard.code4japan.org/ )

詳しくはサイトのデータ供養の方法に書いているので参考にしていただければと思いますが、文字化けについては結局 unicode.normalize だけでは解決せず、「亀」や「戸」といった文字もおかしくなっていたので、最終的に以下のような変換処理が必要でした。

def normalizechar(c: str) -> str:
    # if this text is inside of Kangxi Radicals block, it should be normalized.
    # see https://en.wikipedia.org/wiki/Kangxi_radical#:~:text=They%20are%20officially%20part%20of,the%20%22CJK%20Radicals%20Supplement%22.  # noqa: E501
    if (c >= b'\xe2\xbc\x80'.decode('utf-8') and
            c <= b'\xe2\xbf\x95'.decode('utf-8')):  # '⼀'から'⿕' の範囲
        return unicodedata.normalize('NFKC', c)
    else:
        return c

def normalize(s) -> str:
    # see this: https://en.wikipedia.org/wiki/CJK_Radicals_Supplement
    if (type(s) is str):
        ret = ''.join(list(map(normalizechar, list(s))))
        # blow strings also should be fixed. https://ja.wiktionary.org/wiki/%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA:Unicode_CJK_Radicals_Supplement   # noqa: E501
        table = str.maketrans("⺟⺠⻁⻄⻑⻘⻝⻤⻨⻩⻫⻭⻯⻲戶黑", "母民虎西長青食鬼麦黄斉歯竜亀戸黒")
        return ret.translate(table)
    else:
        return s

これらの文字は、前回対応した康煕部首同様、部首用のunicodeのようです→CJK部首補助
CJK部首補助の方は unicodedata.normalize ではノーマライズされませんでしたのでテーブルを作って変換しています。今回は県名と市区町村名に登場する文字列しか変換していませんが、もっと汎用的にするならば全部の変換テーブルを作っておいた方が良いですね。

餅から米をつくるのに必要だったこと

生成された PDF から、もともとあったであろうデータを取り出すことは、オープンデータ界隈でしばしば「餅から米を作る(注1)」とも表現されます。PDF(餅)を生成する前のEXCELファイル(米)をそのまま提供してもらえていればこのような苦労は必要なかったのですが、コーディング自体は楽しかったので良しとしましょう。具体的には以下のような作業を行っています。より詳細な解説はこちら

PDF から CSV ファイルを作る

camelot というライブラリを使いました。これは良いものだ。

カンマや%を取り除いて文字列を数字データに変換する

2,000,000 みたいな文字ですね。文字列型から数字型に変換するためにはカンマは削る必要があります。

文字コードを修正する

前述の処理ですね。

分かれている CSV ファイルを一つのファイルにつなげる

ページが分かれるともちろん camelot で取得したCSVも分割されるので・・(´・ω・`)

日付のデータを追加する

日付を示すデータが表内に入っていなかったので😓

人口や交付件数の算出基準日を列として追加する

ヘッダ行に日付を入れないで!

セル結合されたデータを修正する

おなじみセル結合です。CSV でなくJSONでデータ表現するなら、そのままパースできないことないですが・・・

以上が、変換に必要だった処理でした。

PDF → CSV → Google Spreadsheet → Tableau の完全自動化(ほぼ無料)

ちなみに、サイトのトップページには、Tableau で作ったグラフが表示されています。Tableau Web データ コネクタ というのを作ればそのまま Tableau からデータソースとして接続できるようですが、Tableau のためだけにその機能を作り込むのもどうかと思ったので、CSVファイルを Google Spreadsheet にコピーしてくるスクリプトを作りました。(Tableau は Google Spreadsheet をデータソースに使えます)

Google Apps Script を利用し、CSVデータを Google Spreadsheet にコピー、それを使って Tableau でチャートを作成、サイトに埋め込み表示しています。

  • PDFファイルからデータをダウンロードして加工し、新たなCSVとして保存する
  • Google Spreadsheet から CSV ファイルを自動で取り込む

の部分が自動化されている必要がありますが、前者は GitHub Action で、後者は Google Apps Script の定期実行で一日一回自動的に更新されるようにしております。

ウェブサイトの表示には Gatsby.js というフレームワークを使っており、GitHub Pages でホスティングしています。

サーバレスかつほぼ無料(注2)!便利な世の中ですね。

ソースコードについて

PDF→CSV の変換スクリプトや本ウェブページのソースコードについては、mynumbercard_statistics on GitHubで公開されています。

Google Spreadsheet から CSV を取り込む処理につ
いても、gspreadsheet-importer on GitHubにて公開されています。 Google Spreadsheet から インターネット上にある CSV ファイルを自動的に取得できるスクリプトですので、他にも利用範囲は多いのではないかと思います。

共にMITライセンスで公開していますので、ご自由に利用ください。
ご意見、ご要望などは GitHub 上の Issue で受け付けます。

BOD供養寺プロジェクト

世の中には、提供方式が適切でないBADオープンデータに溢れています。そのような行き場の無いBADオープンデータを「供養(データクレンジング)」し、供養されたデータを公開し、その方法も共有できる、そんなサイトづくりを現在検討中です。

Code for Japan の Slack に、#bod供養寺 というチャンネルを作りました。お手伝いいただける方を募集中です。(Code for Japan の Slack 加入についてはこちらの記事をどうぞ。)

  • 開発者
  • データサイエンティスト
  • 企画づくり
  • UXデザイン
  • UIデザイン
  • 広報
  • 行政関係者

などの方にご協力いただきたいと思います。興味ある方はぜひご参加ください。
企画から考えますので、イチからシビックテックプロジェクトに関わるチャンスです!


  • (注1)餅から米を作る:BOD供養寺の住職、Code for Sapporo の古川さん発案
  • (注2)ほぼ無料:無料で GitHub Actions を実行できる時間数には上限があります。また、 Google Cloud のライセンス料等も考慮していません