COVID-19 Japanのデータを使ってもらっている「防災INSIGHT」開発者の仁志さんより情報いただき、「暑さ指数(WBGT)予測値等 電子情報提供サービス」を使った、暑さ予測ランキングアプリを作成しました。

暑さ予測ランキング - 環境省WBGTオープンデータ」(src on GitHub)
日本各地840箇所の温度と湿度を加味した暑さ指数予測をランキング表示。沖縄、鹿児島が暑いですが、ちょくちょく本州も上位にいます。


環境省熱中症予防情報サイト グラフ-今日 福井(福井)
環境省では場所ごとに見られるサイトがあります。外に出る予定と合わせてチェックできたり、危険な時にアラートしてくれると便利そうです。


単位は「℃」の暑さ指数(WBGT = 湿球黒球温度)、70位くらいまでいくと、ほぼ安全な21℃未満が表れます。


環境省によるAPI「環境省熱中症予防情報サイト 暑さ指数 電子情報提供サービス」があるので、こちらをwebアプリから手軽に使えるようにCSV/JSONオープンデータに変換しました。 地味に手間がかかったのは、PDFでのみ紹介されていた、エリアデータもCSV/JSON化。やはり、すべてCSVオープンデータがうれしいです。

links
- テレビ局もうれしいCSVオープンデータ、法令CSVを使ったオープンソース「法令探しアプリ」 福井テレビ「タイムリーふくい」出演
- ダッシュボードとCSVオープンデータで推進しよう! 日本の法律8475コのCSV - 東京オープンデータデイ2020オンライン

第31回高専プロコンの競技部門の予定だった競技を「囲みます」と名付けて、ロゴ完成!前回に引き続き、オンラインで集まり開発進めるハックデー。

今日の5名2グループ、1時間1スプリントでの進捗は、APIサーバーがDenoで2人体制で進み、クライアントのフィールド表示の初期段階ができて、FigmaのデザインからHTMLへ起こす目処がなんとなく立つまで。 短時間の割にはまずまず?

今日の参加者 -1 (残念ながら、寮の回線状況悪かった、さよ)

囲みますプロジェクトは Code for KOSEN に移管!
codeforkosen/Kakomimasu: #procon31 競技部門 コアモジュール for Deno/Node.js
Code for KOSEN チームで作っていきます。


側面支援、C言語でJSONでやりとりする apiserver に接続するプログラムができました!

HTTP POSTを実現する post.h は、コマンド curl を popen を使って起動し、返ってきた文字列を返します。

#include <stdio.h> #define MAX_LEN_REQ (1 * 1024 * 1024) // 1Mbyte int post(const char* host, const char* path, const char* json, char* buf, int lenbuf) { char cmd[MAX_LEN_REQ]; sprintf(cmd, "curl -s -H 'Authorization: token1' -X POST %s%s -d '%s'", host, path, json); printf("[post req]\n%s\n\n", cmd); // char* cmd = "curl -s -H 'Authorization: token1' -X POST http://localhost:8880/action -d '{\"actions\":[{\"agentID\": 2, \"dx\": 1, \"dy\": 1, \"type\": \"move\"}, {\"agentID\": 3, \"dx\": 1, \"dy\": 1, \"type\": \"move\"}]}'"; // for test FILE* fp = popen(cmd, "r"); if (!fp) { fprintf(stderr, "can't popen\n"); return 1; } fgets(buf, lenbuf, fp); if (!feof(fp)) { fprintf(stderr, "too long json, check MAX_LEN_JSON\n"); return 1; } printf("[post res]\n%s\n\n", buf); pclose(fp); return 0; }

post.h を使って、受け取った文字列を、sscanf でパースし、AIロジックで使いましょう! scanfでパースしやすく、tokenなどの文字数は固定で決めておくと良さそう。 (src on GitHub)

#include <stdio.h> #include "post.h" #define MAX_LEN_JSON (1 * 1024 * 1024) // 1Mbyte #define LEN_TOKEN 6 // TOKENの長さは固定 int action_test(const char* host) { char buf[MAX_LEN_JSON]; if (post(host, "/action", "{\"actions\":[{\"agentID\": 2, \"dx\": 1, \"dy\": 1, \"type\": \"move\"}, {\"agentID\": 3, \"dx\": 1, \"dy\": 1, \"type\": \"move\"}]}", buf, MAX_LEN_JSON)) { printf("post error!\n"); return 1; } char token[LEN_TOKEN + 1]; int nActions; int res = sscanf(buf, "{\"yourToken\":\"%6s\",\"yourPath\":\"/action\",\"nActions\":%d}", token, &nActions); // 6 == LEN_TOKEN if (!res) { printf("parse error!\n"); return 1; } printf("[parsed]\n"); printf("token (%d chars): %s\n", LEN_TOKEN, token); printf("nActions: %d\n", nActions); return 0; } int main(int argc, char** argv) { const char* host = "http://localhost:8880"; return action_test(host); }

Code for KOSEN」のwebサイトも手を入れ、参加者募集も追加!

競技プロコン、ウェブサイト、その他高専に関する何かプロジェクトなどなど。
我こそはという高専生の参加、お待ちしてます!

公共団体コードと丁目レベルのジオコーディングモジュールを使って、IMIコンポーネントツールの目玉、住所変換モジュールをESモジュール化しています。 内部構造をガラッと変えて、必要なデータのみを適宜ダウンロードするブラウザ上でも動作する軽量なESモジュールとして使えるようになりました!

IMIコンポーネントツール ESモジュール版」住所変換コンポーネントのβ版追加!
現在は、都道府県名からの住所表記に対応、緯度経度は丁目レベルまでなのはオリジナルと同様です。番地、号にも対応してほしいところですね。

使用は簡単!Denoで下記、実行するだけでOKです!

import IMIEnrichmentAddress from "https://code4sabae.github.io/imi-enrichment-address-es/IMIEnrichmentAddress.mjs"; console.log(await IMIEnrichmentAddress("福井県鯖江市新横江2-3-4"));

ネットアクセスするので --allow-net または -A 付きで、エラーがでた場合 geocode.mjs をアップデートするために -r も一度付けてください。

$ deno run -A -r main.mjs Download https://code4sabae.github.io/imi-enrichment-address-es/IMIEnrichmentAddress.mjs Download https://code4sabae.github.io/imi-enrichment-address-es/lib/find.mjs Download https://code4sabae.github.io/imi-enrichment-address-es/lib/bangou.mjs Download https://code4sabae.github.io/imi-enrichment-address-es/lib/util.mjs Download https://code4sabae.github.io/lgcode/lgcode.mjs Download https://code4sabae.github.io/geocode/geocode.mjs Download https://code4sabae.github.io/lgcode/lgcodemap.mjs [ { @context: "https://imi.go.jp/ns/core/context.jsonld", @type: "場所型", 住所: { @type: "住所型", 表記: "福井県鯖江市新横江2-3-4", 都道府県: "福井県", 都道府県コード: "http://data.e-stat.go.jp/lod/sac/C18000", 市区町村: "鯖江市", 市区町村コード: "http://data.e-stat.go.jp/lod/sac/C18207", 町名: "新横江", 丁目: "2", 番地: "3", 号: "4" }, 地理座標: { @type: "座標型", 緯度: "35.941043", 経度: "136.199640" } } ]

緯度経度、使えます!


住所変換コンポーネント (ES module ver.) on GitHub
データを扱う、公共団体コードや、ジオコードは別モジュールで管理しているので、住所の正規化に特化できたのでJavaScriptのプログラムとしては、下記4ファイルのみとシンプル!

IMIEnrichmentAddress.mjs メイン、文字列やJSON-LDを入力として、find.mjsを使って変換
lib/find.mjs - 住所表記を分解し、緯度経度を付加するコード、find.jsを大幅改定
lib/bangou.mjs - bangou.jsをESモジュール化、漢数字などの番地と号を正規化する
lib/util.mjs - util.js をESモジュール化、漢数字との変換などの便利関数群

施設や、店舗の住所からの変換など、web上の様々な住所表記に対応できるよう、使いながら育てていきたいと思います。 一緒に使ってみる方、バグや要望を送ってくれる方、精度アップのプログラムを書く方、大募集!
imi-enrichement-address src on GitHub by Code for Sabae

JavaScriptの可能性を大きく広げるDeno、現在公式サイトは Next.js フレームワークを使って構築されたオープンソース。

このように、誰でもGitHubからダウンロードやクローンして、自分の環境で動かしてみることができる。

npm i npm run dev

しばらく待って「event - compiled successfully」と出たら、「http://localhost:3000」を開く。そう、DenoのwebサイトはまだNodeで動いている。 Deno x React や、何か新しいフレームワークが誕生するでしょう。


denoland/deno_website2: deno.land website
モダンなwebサイトづくり、Denoのように熱くて若いプロジェクトの公式サイトを参考にするのは生きた学習教材としてオススメです!


Denoのトップページのサンプルコード。インデントが間違っていることが気になって、Issueを書き、プルリクを送ってみたところ、コードは不採用ながら修正は完了。 こうして世界中、みんなで協力して作っていくのがオープンソースのステキなところ。


さばえマスクポスト」(src on GitHub)
日本政府から届くマスク、不要な人の分を回収して寄付するプロジェクトが鯖江でスタート。

こちら Code for Sabae のオープンソース。シンプルなHTMLとCSSのみ。日本語でOK、失敗歓迎、礼儀作法気にしなくてOK。気軽に参加して、世界を動かすビッグプロジェクトへの予行練習にお使いください。

混雑を避ける、コロナ禍では平時以上に重要です。福井県統計情報課と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アイディアボックス」が、人気です!

データシティ勉強会〜新型コロナとオープンデータ(オンライン開催) 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実績値

便利なプログラム集 npm の掲載数は、なんと127万。1週間の総ダウンロード数は、200億!

サーバーサイドでJavaScriptを使う人にはおなじみ npm、Node Package Manager の略(先月GitHubが買収)。 使っているライブラリの依存関係が明記されているので、細部まできっちり辿れ、問題が合った時の把握も簡単。今回は、初めて公開に挑戦!

grapheme-breaker-mjs - npm
先日のユニコードの書記素分解を Unicode 13.0.0 にも対応させて、公開完了!GitHubで管理しているリポジトリがあれば、npm set で、名前などを登録、メールアドレスを確認し npm へのユーザー登録を完了させたら、package.json を編集し、npm publish するだけ! 必要最小限の手間で使えて気持ち良い。

npm i grapheme-breaker-mjs

で、インストールして・・・

const GraphemeBreaker from 'grapheme-breaker-mjs' console.log(GraphemeBreaker.break('🍓'))

で、使える!(test.mjs など、ES Module専用なので、Common JSとの共存がちょっと問題。参考、jsからmjsへ


image - npm search
ウェブサイトのスクリーンショット作成を自動化したいので、image で検索。知名度、品質、メンテナンスという3軸で表示してくれる検索結果が、オープンデータ検索にも応用できそうで興味深い。 知名度高く、メンテナンスもされてそうで、依存関係なしのpureさがステキな Jimp を使おう。


ブラウジングを自動化する selenium-webdriver と組み合わせて、対策ダッシュボードのFacebook/Twitter用の画像を自動生成化、完了。(src on GitHub)

どんどん膨らむ、叡智の結晶。がんがん活かしていきましょう!

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