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アイディアボックス」が、人気です!

福井市のヒノキ花粉飛散量を予測するチャレンジ「カフモン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実績値

便利なプログラム集 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)

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

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


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


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


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

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


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


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

対面が原則だった日本の医療、COVID-19対策としてオンライン診療がスタート。厚労省から対応医療機関の一覧がPDFで発表された。 まじめな所長@医療介護データ研究所さん公開のCSVデータを使って検索アプリを作成。


オンライン診療サーチ
元データの誤表記、表記ゆれ、変換による情報欠損などがある点にご注意ください。

こちらのアプリは「VS COVID-19 #民間支援情報ナビ」をベースに、CSVデータからの検索アプリをすばやく立ち上げるために、汎用化を進めたもの。 シンプルなJavaScriptで開発したオープンソース、どうぞいろいろとご活用ください。下記のようにデータの設定を加えるだけなので、JavaScriptのプログラミングの知識は不要。あとは、CSSやHTMLをデザインをいろいろ好みに合わせて修正するだけです。

window.onload = async function() { // CSVURL const URL = 'mhlwgojp_hospital_online.csv' // セレクトボックスを表示する項目名 const [ select, split ] = [ 1, 2 ] const SELECT_NAMES = { '都道府県': select, '対応診療科': split, '初診の対応可能': select, '再診の対応可能': select, } // タイトル const TITLE_NAME = '施設名' // 表示項目 const URL_NAME = 'ウェブサイトURL' // 非表示項目 const EXCEPT_NAMES = [ '行ID', '地方ID', '地方ID', '地方', 'ID地方', '都道府県ID', 'ID都道府県', '市区町村ID', '市区町村', 'ID市区町村', '二次医療圏ID', 'ID二次医療圏' ] // split の場合の区切り文字 const SPLIT_CHAR = '、・,//()()"◆  ' const SPLIT_MAX_LEN = 20 // データをランダムに並び替えるかどうか const DATA_SHUFFLE = true

SELECT_NAMES セレクトボックスを表示したい項目
TITLE_NAME タイトルになる項目
URL_NAME アクセスしてみるに使う項目
EXCEPT_NAMES 一覧には表示しない項目
SPLIT_CHAR 項目を split にしたものの区切り文字
SPLIT_MAX_LEN 区切ってもこれ以上長い値は採用しない


オンラインで学ぼう
時間割ガチャ」で使っている、オンライン教材リストオープンデータを使った、検索アプリもこの通り!

Let's code for ourselves!

links
- オンライン診療「初診解禁」で医療はどう変わる | コロナショック、企業の針路 | 東洋経済オンライン | 経済ニュースの新基準
- 【CSVデータ】全国のオンライン診療実施医療機関リストを公開します。|まじめな所長@医療介護データ研究所|note

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