経産省から7つ公開された「IMIコンポーネントツール」のESモジュール対応、全角半角変換に続き、4つ移植し、進捗5/7。

IMIコンポーネントツール ESモジュール版
ESモジュールなので、サーバーを使わず、ブラウザ上ですべて動作します。

IMIコンポーネントツール、ESモジュール対応状況
(1) 住所変換コンポーネント (対応予定)
(2) 法人種別名の抽出コンポーネント(対応予定)
(3) 全角-半角統一コンポーネント
(4) データバリデーションコンポーネント
(5) 電話番号正規化パッケージ一式
(6) 日付型正規化パッケージ一式
(7) 産業分類候補生成パッケージ一式

<script type="module"> import IMIMojiConverter from "https://code4sabae.github.io/imi-moji-converter/IMIMojiConverter.mjs"; import IMIEnrichmentContact from "https://code4sabae.github.io/imi-enrichment-contact/IMIEnrichmentContact.mjs"; import IMIEnrichmentDate from "https://code4sabae.github.io/imi-enrichment-date/IMIEnrichmentDate.mjs"; import IMIEnrichmentJSIC from "https://code4sabae.github.io/imi-enrichment-jsic/IMIEnrichmentJSIC.mjs"; import generateIMIDataValidator from "https://code4sabae.github.io/imi-data-validator/IMIDataValidator.mjs";

HTML内、type="module"と書くのがモジュール対応のJavaScriptの特徴。いろいろインポートして、サクッと使えます!

Denoをインスールし、JavaScript のファイル main.mjs を作って、

import IMIEnrichmentDate from "https://code4sabae.github.io/imi-enrichment-date/IMIEnrichmentDate.mjs"; console.log(IMIEnrichmentDate("令和二年12月1日"));

deno run で、すぐ実行できます。

$ deno run main.mjs { @context: "https://imi.go.jp/ns/core/context.jsonld", @type: "日付型", 表記: "令和二年12月1日", 標準型日付: "2020-12-01" }

各プロジェクト、コンソール上で使う cli.js を cli.mjs として、WebAPI提供する server.js を server.mjs として、それぞれ Deno 用に書き換えているので、参考にどうぞ。

同じコードが Deno を使うとコンソール上、サーバー上で動くので、クライアントとサーバーとの役割分担を柔軟に変更できるのがうれしい!

ESモジュール対応のバッジと、Denoでの動作バージョン確認のバッジ、作ってみました。


GitHub の README.md などで活用ください!

[![esmodules](https://taisukef.github.com/denolib/esmodulesbadge.svg)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules) [![deno](https://taisukef.github.com/denolib/denobadge.svg)](https://deno.land/)

全角半角という言葉は、パソコン普及前夜のワープロ時代の遺物。「住所を全角で入れてください」など、優しくないお願いは排除し、必要な処理はプログラムでしましょう。

日本政府、経済産業省(経産省)から「IMI 情報共有基盤 コンポーネントツール」が発表されました。 5つ星オープンデータの語彙を定める「共通語彙基盤IMI」に関連したオープンソースなJavaScriptで作られたツール群です。

Node.js を前提に作られていますが、ブラウザや Deno で動かしたいので、ひとまず簡単そうな「全角-半角統一コンポーネント」を移植。インストール不要で下記のようにすっきり使えるものができました!(src on GitHub)

$ cat > main.mjs import IMIMojiConverter from "https://code4sabae.github.io/imi-moji-converter/IMIMojiConverter.mjs"; console.log(IMIMojiConverter.toHalfWidth("あかさたな0123456789")); console.log(IMIMojiConverter.toFullWidth("アカサタナ0123456789")); $ deno run main.mjs あかさたな0123456789 アカサタナ0123456789

ブラウザからはこの main.mjs をESモジュールとして読み込めば動きます

<script type="module" src="main.mjs"></script>

ブラウザ用の記述と、コンソール上のDeno、同じコードで動くのが、ESモジュールのいいところ!全角や半角という言葉をウェブサイト上で使っている方、利用者の登録率や利便性を向上させるためにご活用ください!

移植にあたって、imi-moji-converter が依存している Node.js 用の「半角全角変換ライブラリ」をDeno用に移植しました。(src on GitHub)

変換が必要ないので、srcフォルダが不要で、プログラムはすべてdocs内に置いています。ESモジュール以前の表記、require/export を import/export に変更し、testをDeno用に書き換えます。Node.jsっぽいテスト表記を実現する nodelikeassert.mjsdenolib に追加。
半角全角変換ライブラリ test
ライブラリはURLで読み込むだけなので、node_modules も不要、インストールも不要でとってもシンプルです!


オープンソース活用、加速しそうです!
→ 2020-05-30 対応拡大

links
- 経産省発の npm モジュール!住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した! - Geolonia developer's blog
- DenoとWebScoketで作る匿名チャットサーバー&webアプリ
- DenoとNodeとwebアプリの全対応、コンパクトに作り始めるLISPのS式風ライブラリ
- NodeからDenoへ、福井県で活用オープンソースのPUSHかんたんオープンデータ、バックエンド移行

混雑を避ける、コロナ禍では平時以上に重要です。福井県統計情報課とCode for Fukui / Sabae 連携で、福井県施設ダッシュボードに混雑状況表示が加わり、運用開始

福井県施設ダッシュボード」(src on GitHub)
定休日や、臨時休館日などを反映して、開いているかどうか、空いているかどうかがひと目で分かります。CSV/JSONオープンデータを使った応用例です。 デザインや、使い勝手、データを収集しての解析など、自由に二次利用が可能です。もちろんこのアプリもオープンソース、改造提案、改造版立ち上げも大歓迎!


福井県施設状況オープンデータ
CSVやJSONでダウンロードし、自由に活用可能です。


PUSH かんたんオープンデータ」(src on GitHub)
Code for Fukui / Sabae で開発した、データを更新する仕組みはこちら。Googleスプレッドシートによる更新をもっとシンプルにしたイメージです。スマホで簡単に、混雑状況を伝えられます。 急な休業日、営業時間変更も簡単!


教育博物館 オープンデータ
個別のページも自動的にでき、CSV/JSONオープンデータへのリンクがあって、人にも機械にも優しい。


教育博物館 オープンデータ
プログラマー大好き、JSON形式!


エイトセンス オープンデータ
ランチなどでお世話になっている鯖江のカフェ、EIGHT SENSE(エイトンセンス)さんにも使ってみてもらいました。行政施設のみならず、幅広く使っていきたいところ。


県有施設等の混雑情報をオープンデータ化します | 福井県ホームページ
行政と民間、オープンデータでどんどんつないでいきましょう!


日本政府による民間とすすめるコロナ対策「指標をCSVオープンデータに! by 福野泰介さん | 新型コロナウイルスと戦う意見募集サイト VS COVID-19アイディアボックス」が、人気です!

福井市のヒノキ花粉飛散量を予測するチャレンジ「カフモン2020」の期間が終了。 福井県による花粉オープンデータと照合して、結果発表です!

カフモン - 花粉オープンデータチャレンジ
優勝は、みずのさん!おめでとう!


2020年分のスギ花粉とヒノキ花粉の量も合わせてグラフ表示しています。(src on GitHub)
東京都版対策サイトでも活躍、グラフライブラリ Chart.js を、ES6モジュール対応の Chart.mjs へと調整、import 構文ですっきり使えるようにしています。

export default Chart

変更点はシンプル、末尾に Chartクラスを export と書くだけでした。

import Chart from './lib/Chart.mjs' import util from './lib/util.mjs' // 中略 const main = async () => { const url = 'data/r2_kahun_fukui.csv' const json = await util.fetchCSVtoJSON(url) console.log(json) showData(json) const urlp = 'data/kafumon2020.csv' const pdata = await util.fetchCSVtoJSON(urlp) console.log(pdata) showResult(json, pdata) }

Chart.mjs と util.mjs を使って、2つのグラフを作成しています。(src on GitHub)


今年のヒノキ花粉は、例と比べてずっと少なかったという結果でした。何が影響したのでしょうか?2007年からのデータがあるので、過去の気象データなどさまざまなデータを使った解析が可能です。

来年のカフモン2021もお楽しみに!

データシティ勉強会〜新型コロナとオープンデータ(オンライン開催) by Code for Shinjuku」にて、「COVID-19 Japan 新型コロナウイルス対策ダッシュボード」の舞台裏を紹介。理想のオープンデータと現実の差を図にしてみました。

厚労省が必要なフォーマットを定め、各都道府県にそれに従ったCSVオープンデータがタイムリーに提供されれば、それを集約して簡単にアプリ化できます。


ただ、現実はこちら。ダッシュボードで使用している一次情報は厚労省のPDFとHTML、各都道府県がそれぞれ独自の形で公表やオープンデータ化しているHTML、CSV、PDF、Excelデータとなっていて、それぞれごとの変換プログラムによってデータを正規化し、アプリ化、また、正規化したデータをオープンデータとしています。


指標をCSVオープンデータに! by 福野泰介さん | 新型コロナウイルスと戦う意見募集サイト VS COVID-19アイディアボックス
今回、Code for Japan からの新型コロナ対策に向けたデータ定義書を公開されました。今後もこれを活かし、指標をCSVオープンデータに!(5/8以降の厚労省データを使って、検査人数データを追記しました。CSV/JSON

Code for Shinjuku の取り組み、「東京新型コロナグラフ | 最も効率よく23区市町村実効再生数(Rt)・感染者数比較」「新宿区テイクアウトデリバリー店舗情報」の紹介の後、グループに分かれてフリーディスカッション。


新型コロナに限らず、インフルエンザや、花粉など、地域の安全安心を守るオープンデータとダッシュボード化。また、防止するためのICT活用の重要性と、具体的なアクションプランが明らかになりました。 ますます高まるオープンデータの重要性、どんどん活用していきましょう!

links
- #StopCOVID19JPを推進するデータシティ勉強会 | 新宿区議会議員 最年少の伊藤陽平

混雑を避ける重要性が増しています。リアルタイムに施設の混雑状況をオープンデータ化し、すばやくチェックするシステムを作りました。 ユーザー登録不要、スマホでもPCでも簡単に一次情報として更新できる、JavaScript/Node.jsで開発したシンプルなオープンソースです。


PUSH かんたんオープンデータ
施設名、休館日などを記載し、登録すると、JSONでアクセス可能なオープンデータが生成されます。

認証用コードが生成され、そのURLをブックマークなどしておけばいつでも更新できます。 もし、認証用コードを忘れてしまったり、誰かに間違って伝えてしまう可能性がでた場合は、新たにデータを生成してください。


COVID-19 Japan 新型コロナウイルス対策ダッシュボード
累積退院者数が1万人を超え、徳島県も再び現在患者数0人になるなど、全国的に感染は縮小方向にあります。

根本的な治療方法が確立されていない以上、注意は引き続き必要ですが、活動を通常に戻していきたいところです。 鯖江市でも飲食店の営業再開が少しずつ広まってきていますが、営業日や時間が通常通りではないので、こうしたリアルタイムのオープンデータが便利です。

ダッシュボードへの反映など、引き続き開発を続けます。Code for Fukui としてのオープンデータ、開発参加、デザイン参加も歓迎です!
福井県施設ダッシュボードと日本語で書かれた休館日や営業時間表記を解釈するJavaScriptのクラスライブラリ dtcheckjp.mjs

自分で学ぶ楽しさに気がつくまでの脱出ゲーム。

自学をサポートする、主にタブレット向けの広告なし無料教材アプリを、5つ星オープンデータとして整理しながら作って公開していきます。 まずは過去作品を現代用に調整した4アプリからスタート!


自学サポートアプリ JIGAKUシリーズ
単元ごとに、まるでおもちゃのように、シンプルなアプリをあれこれ触って、自分なり理解することをサポートするコンセプト。


未就学児や小学1年生向け、タッチで分かる「ひらがなとカタカナ
HTML5 Canvas をフルスクリーンで使ったプログラム、mjs(JavaScript)のモジュール管理ですっきり!JavaScript入門としても安心して使えるように、コーディング規約に JavaScript Standard Style を採用。(src on GitHub)


パソコンを使う上では必須!ローマ字への入り口「ローマ字とかな」。 「こんな教材あったらうれしい、おもしろい」「この科目が教えやすくしたい」など、リクエスト、GitHubのIssueへどうぞ!もちろん、作って、プルリクも大歓迎!


「ホーム画面へ追加」すると、時間表示だけのすっきり1画面、シンプル表示。iPad/iPhoneのアクセスガイド(設定、アクセシビリティ、アクセスガイド)を設定すると、他のアプリに切り替えできなくなるので、安心なおもちゃとしても活用できます。


アクセスガイド、一度設定すれば、好きなアプリを起動して、サイドボタンをトリプルクリックするだけ!


オンラインで学ぼう
アプリは、srcフォルダに1アプリずつ並べて、プログラムからHTMLとオープンデータを生成(makejigaku.mjs)する仕組み。 タイトルや、説明など、同じことを何度も書く手間がなく、CSV/JSON/HTML(Microdata)で、つながるオープンデータを自動生成!教材リストオープンデータにも登録したので「時間割ガチャ」や「オンラインで学ぼう」でも自動的に反映されます!

おうちで作ろう!

links
- HTMLだけで実現、5つ星オープンデータ! 新型コロナウイルス対策ダッシュボード語彙で埼玉県データを5つ星化する手順を紹介 (Microdata、itemscope/itemtype/itempropの解説)

世界のデータは、まだバラバラ。5つ星オープンデータによってつながる未来、創りましょう!

対策ダッシュボード和歌山県、奈良県、埼玉県の速報連携を実施し、連携先都道府県は18になりました。 これで18/47、38%が連携できたことになります。(連携条件、オープンデータとして新型コロナウイルス対策を公開していて、退院数・死亡数がデータから分かること)

この条件の都道府県の連携は完了。オープンデータと明記はなくても、政府・行政の公開は、オープンバイデフォルト。次は、オープンデータとみなし、連携拡大を図ります。


COVID-19 Vocabulary 新型コロナウイルス対策ボキャブラリー
HTMLによるオープンデータは、5つ星オープンデータにおいて、星いくつか?実は、1つ星にも5つ星にもなりえます。 肝心なデータが画像であれば1つ星ですし、きちんと他とつながる語彙(ボキャブラリー)が設定されていれば、5つ星オープンデータです。

埼玉県のサイトを例に、実際にHTMLを5つ星にしてみます。
感染確認状況や関連情報 - 埼玉県
公式サイトにある、累積陽性者数、累積退院数、累積死亡者数、更新日。これらデータがあれば新型コロナウイルス対策ダッシュボードは更新可能です。


「ソースを表示」で、HTMLを確認すると、outlineというクラスは設定されていますが、基本的に人間向けのテキスト文章のみとなっています。画像ではないので、2つ星オープンデータです。 こちらを読み取ってデータ化するプログラムを作って、連携しましたが「parseInt(text.match(/県内の陽性確認者数:(\d+)人/)[1])」と文の書き方を決め打ちして作っているので、表現が変わってしまうと読み取れなくなります(src on GitHub)。

このHTMLを見た目を一切変えずに、5つ星オープンデータ化します。鍵は、itemscope itemprop itemtype (Microdata)と語彙(ボキャブラリー)。「COVID-19 Vocabulary 新型コロナウイルス対策ボキャブラリー」を使って、サンプルを作ってみました。

<table class="outline" itemscope itemtype="https://wvw.stopcovid19.jp/schema/"> <tbody> <tr> <td> <span itemprop="pref" value="Saitama"></span> <p><span class="txt_big">県内の陽性確認者数:<font color="#c51f1f"><span itemprop="npatients">868</span></font></span><span class="txt_big"><span class="txt_red">人</span><br /> (<span itemprop="lastUpdate" value="2020-05-01">5月1日</span>公表分:<font color="#c51f1f">5</font><span class="txt_red">人</span>)</span></p> </td> <td> <p>入院:280人(うち重症者:16人) 宿泊療養:50人 自宅療養:202人</p> <p>退院・療養終了:<span itemprop="nexits">295</span>人 死亡:<span itemprop="ndeaths">36</span>人 調整中:5人<br /> &nbsp; ※<a href="https://www.pref.saitama.lg.jp/a0701/covid19/jokyo.html">県内の発生状況(陽性確認者の状況・一覧)</a></p> </td> </tr> </tbody> </table>

データを囲むタグの属性として、itemscope と語彙を指定した itemtype を設定し、データにあたる部分を表示に影響を与えない span タグを使って囲み、itemprop属性で意味を指定します。(参考「最新のSEO事情!schema.orgで構造化マークアップせよ! - Qiita」「サイトをエンジニアフレンドリーにしよう!robots.txt / sitemap.xml / itemscope / opensearch で機会判読可能に改良する」)

こうしてできたHTMLであれば、下記のプログラムで簡単に新型コロナウイルス対策のデータとして、すぐ活用できます!

const html = await (await fetch(url)).text() const res = htmlparser.parseItem(html, 'https://wvw.stopcovid19.jp/schema/') console.log(res)

urlからhtmlを取得(fetch)して、対策語彙をデータを抜き出し(parseItem)する JavaScript のプログラム例 (src on Github)

人間も機械もうれしい、HTML5つ星オープンデータ、ぜひ使ってみてください!
失敗しても見た目に影響ないので大丈夫ですし、プログラムでの読み取りは成功するまでサポートしますのでご安心を。 (サポートメールアドレス fukuno@jig.jp、新型コロナウイルス対策語彙サポート宛 )


COVID-19 Japan - 都道府県別 新型コロナウイルス陽性患者数
退院者増加し、現在患者数が5%以上減少している都道府県は白下矢印が増えました。決して油断はできませんが、医療リソースのキャパを見て、自粛を段階的に緩める検討もありでしょう。

ただ、東京都はコールセンターや検査数が頭打ち、潜在患者数が多いことが想定されるので、注意が必要です。

都内の最新感染動向 | 東京都 新型コロナウイルス対策サイト」より、新型コロナコールセンター相談件数 4/30実績値

COVID-19 Japan 新型コロナウイルス対策ダッシュボード」の役目はまだ終わりません。対策病床数が増え、黒色は減ったものの医療機関への負担は非常に大きく、如何に新たな患者発生を抑えるかが引き続き重要です。 外出自粛の効果と退院が進み、減少傾向が見られる都道府県も出てきていますが、潜在患者による感染拡大が進む可能性もあり油断禁物。


COVID-19 Japan 新型コロナウイルス対策ダッシュボード
ひとまず東京都のみですが、都内の地域別患者発生数表示を参考に追加しました。発生の多い地域には注意が必要です。差分を取って新規発生のみにする、昼間人口や住人で割る、域内の病院数と合わせて表示するなど、表示方法は検討の余地ありです。


対策病床数の更新は、オープンデータがまだなく、手動更新となっています。
みなさまのご協力により、だいぶ充実してきています。こちらのデータもオープンデータとして自由に二次利用いただけます。
新型コロナウイルス対策病床オープンデータ
出展として「新型コロナウイルス対策ダッシュボード」の表記と可能であればリンクいただければ、自由に加工、活用いただいて構いません。


新型コロナウイルス患者数オープンデータ(公式サイト、オープンデータサイト、対応状況)
本サイトは、厚生労働省のデータと、都道府県のオープンデータなどを集約して作っています。オープンデータがあっても、形式の違いなどがあるため、データ変換し集約プログラムを作って、運用しています。

病床数オープンデータを含めた、データ定義書を作成していますので、よかったらこちらご活用ください。
新型コロナウイルス感染症対策に関するオープンデータ項目定義書」 by Code for Japan / 福野泰介追記


コロナ病床使用率サイトに100万超アクセス 全国の状況一目で 福井の男性作成 - 毎日新聞
毎日新聞さんに、ご紹介いただきました。オープンデータによる官民連携の新しい形。本対策ダッシュボード提供のデータや、地元のオープンデータを使って、ぜひみなさまもチャレンジしてみてください。


新型コロナウイルスに対する当社の対応 | NECソリューションイノベータ
NECソリューションイノベータさんによる「オープンデータに基づく国内感染状況の可視化」でもJSONデータ、活用いただいています!

福井県独自の新型コロナウイルス対策、県内全戸へのマスク配布を購入券配布で、福井のドラッグストア「ゲンキー株式会社」が協力。 受け取った購入券を持って、最寄りのゲンキーを手軽に探せるマップアプリを作ってみました。 (県民向けにマスク購入をあっせんします | 福井県ホームページ


ゲンキーマップ
ゲンキー公開の店舗オープンデータはなかったので、「店舗・チラシ検索」に記載のデータから、一覧CSVデータを作成。 全角半角、郵便番号の表記ゆれも標準化。スクレイピングするソースコードもオープンソース、全国の高専生、Let's Code for! (Node.js src on GitHub

使用技術:ゲンキー店舗一覧CSV地理院地図 x leaflet.mjsカラム地図util.mjs
* util.mjs - JavaScriptプログラム用の便利ユーティリティーの mjs まとめ(旧、fukuno.js)


ゲンキー店舗一覧CSV
Excelなどで一覧で見ると、表記ゆれや、データの間違いは一目瞭然。行政だけでなく、民間企業でもCSVオープンデータとして公開、業務効率化と集客に有効です!

Open Data Now! (元ネタ)

links
- 福井県庁の方へ、教材リストCSVオープンデータでウェブサイトも同時更新して楽する方法
- 厚生労働省の方へ、CSVオープンデータ化で効率化しましょう! 新型コロナウイルス国内事例における都道府県別の患者報告数表示アプリ
- おうちで学ぼう、時間割ガチャ。オープンソースで貢献するきっかけ、プログラミングの教え方新動画も公開!
- jigインターン2020募集開始!高専生の学びは止まらない、JavaScriptモジュール対応の地理院地図使用クラスライブラリ leaflet.mjs

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS