どんなものでもすぐ作れるのが理想です。
鍵は再利用性と、調べる時間の削減にあり。

作れば作るほど、過去作ったものを使って楽できますが、整理されていないと調べるのに手間取ります。 最近のお気に入りは、HTMLの拡張タグによる整理。今日は複数のselectタグが自動的に増減するinput-multi-selectタグを作りました。


「input-multi-select tag」src on GitHub
selectタグにはmultipleオプションはありますが、1項目を複数回選択することができないので、選んだら項目が増えていくタグを作ってみました。 （選択肢が少ない場合、全部表示して、数の増減で選択するタグも別途ありですね）


サンプルHTMLを作って、Code for FUKUIのGitHubにて公開する際、レスポンシブ対応や、sakrura.cssを使う簡単な方法。それが辞書登録！ 何度も同じことを検索してコピペしているな、何度も書くのだるいなと感じた時にオススメです。

ｈｔ <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> 名詞 ｓｔ style="display:none" 名詞 ｓｃ <script type="module"> 名詞 てｓ import * as t from "https://deno.land/std/testing/asserts.ts"; 名詞 さｃ <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> 名詞

こちら私の辞書データ。txtファイルとして保存し、Google日本語入力の辞書インポートで使えます。 あえて英字混じりや中途半端な「よみ」で登録し、通常の漢字変換の邪魔をしないのがポイントです。

SDGS、一番最初の目標「貧困をなくそう」を達成するにはどのような社会にするといいのでしょう？
「富の分布のシミュレーション」
平等にコインを持った状態でスタートし、1日に1度、ランダムに出会って2人が五分五分で1枚だけコインを交換するものを繰り返すと、富が大きく偏ります。 1枚ではなく、所持コインの10%、20%などと大きくするほどに、偏りがでる速度が増します。100%、つまり総取りにするとあっと言う間に世界で1人だけが全部持っていってしまうので、すべてはその中間ということです。

「じゃんけんゲームシミュレーション」src on GitHub
JavaScriptで作ったかんたんなシミュレーションツールです。

- 勝敗がランダムではなく実力で決まるとしたらどうなるでしょう？
- お金持ちから税金を徴収し、所持金0になった人に分けるとどうでしょう？
- 勝負に参加しない人がいるとどうなるでしょう？
- 1日に1勝負ではなく1秒に1勝負発生するとしたらどうなるでしょう？
- 定期的にリセットしてみてはどうでしょう？

こどもパソコンIchigoJamでもシミュレーション可能です。

100 FORI=0TO99:[I]=100:NEXT 110 T=0 120 FORN=0TO99 130 M=RND(100) 140 IF N=M GOTO130 150 IF N<M B=[N]/10 ELSE B=[M]/10 160 R=RND(2) 170 IF!R [N]=[N]-B:[M]=[M]+B 180 IF R [M]=[M]-B:[N]=[N]+B 190 NEXT 200 T=T+1 210 ?T 220 FORI=0TO99:?[I];",";:NEXT 230 GOTO120

社会を形作るルールを作るのは私達。
理想のルール、探りましょう！

links
- 成功を決めるのは「才能」でなく「運」　驚きの研究結果発表 | Forbes JAPAN（フォーブス ジャパン）
- 富の分布のシミュレーション
- ｢格差は不当｣と憤る人が気づいてない過酷な摂理 | リーダーシップ・教養・資格・スキル | 東洋経済オンライン | 社会をよくする経済ニュース

救急搬送困難事案数を都道府県別に見るダッシュボードを作りました。

「救急搬送困難事案ダッシュボード」src on GitHub
0件が望ましいので、1件以上で赤くしています。こちらの消防庁データをCSV化したものを使っています。
「新型コロナウイルス感染症に伴う救急搬送困難事案に係る状況調査について（救急企画室） | 新型コロナウイルス感染症関連 | 総務省消防庁


「カラム地図タグ TabularMaps - tabular-map tag」
コンパクトに日本の都道府県を表示するオープンソース(CC0)のカラム地図をHTMLElementで拡張タグ化しました。 <script type="module" src="https://code4fukui.github.io/tabular-map/tabular-map.js"></script> <tabular-map></tabular-map> このように書くだけでカラム地図が表示されます。都道府県別の可視化にご活用ください。

都市部を中心に現在患者数が増加中の第五波。救急搬送困難事案数の大幅増とニュースがありました。 救急車を呼び、せっかく来てくれても搬送先の病院が見つからないという状況は、可能な限り少ないほうがいいです。

「救急搬送困難事案数」で検索するとデータがありました。
「新型コロナウイルス感染症に伴う救急搬送困難事案に係る状況調査について（救急企画室） | 新型コロナウイルス感染症関連 | 総務省消防庁」
* 本調査における「救急搬送困難事案」とは、救急隊による「医療機関への受入れ照会回数４回以上」かつ「現場滞在時間30分以上」の事案として、各消防本部から総務省消防庁あて報告のあったものとしている。

Excelで全都道府県の消防本部別に去年、2020年3月末からの週次データ、横持ちを縦持ちCSVに変更するプログラムをJavaScriptで書いて、GitHub Pagesでオープンデータ化。コロナの現在患者数と合わせてグラフ化したのがこちらです。
「新型コロナウイルス 入院治療等を要する者の数と救急搬送困難事案数」src on GitHub
第三波との現在患者数のピークとぴったり一致しています。


「COVID-19 Japan - 新型コロナウイルス対策ダッシュボード」のグラフにも追加しました。
現在は厚労省により「入院治療等を要する者の数」として発表されている現在患者数と、PCR検査陽性者を表示しています。

都道府県別表示にも対応させたいところです。
→ 対応しました「救急搬送困難事案ダッシュボード、救急車の受け入れ困難事案数を都道府県別に表示」

links
- 「救急搬送困難事案」が大幅増 - Yahoo!ニュース
- 新型コロナウイルス感染症に伴う救急搬送困難事案に係る状況調査について（救急企画室） | 新型コロナウイルス感染症関連 | 総務省消防庁
- code4fukui/fdma_go_jp: 総務省消防庁オープンデータのCSV化

GitHubかんたん編集ツールで使ったOpenID認証に対応するサーバーコードを整理しました。 Denoを使って簡単にログイン付きサービスが作れます。jigインターンでおなじみお気軽サーバーフレームワーク Server.js の拡張です。

「GitHubログイン実験」（テンポラリなサービスなのでそのうち落とすか別の用途に使います）
GitHubアカウントを持っている人向けです。src on GitHub

0. ドメインとDenoを起動できるサーバーを準備しましょう

1. GitHubのDeveloper applicationsから、"New OAuth App"
2. コールバックURLに "ドメイン + /openid_callback" を登録します
3. client_id を server.jsのclient_idと、static/index.htmlのログインURLのものを上書き
4. client_secret を生成して、client_secret.txt ファイルを作って保存
5. ドメインを設定したDenoがインストールされたサーバーで run.sh を起動
6. そのドメインにブラウザでアクセス


こんな画面が出るはずです。
7. GitHubでログイン


8. 設定したアプリへのログイン許可


9. accessTokenがlocalStorageに設定され、それを使ってログインユーザー情報をテスト表示！できました！


GitHubの Authorized OAuth Apps からアプリを選んで、revoke access すると・・・


accessTokenが無効になり、表示できなくなりました。

GitHub連携サービス、いろいろ作りましょう！

町内会でのGitHub、地域の危険箇所データを記録するCSVファイルの編集を改善！

「CSV editor for GitHub」
GitHubでログインを押すと、国高地区2021年版の地域安全データ「kidssafe2021.csv」が表示されます。 編集権限があれば、編集して「Commit changes」を押すと、元リポジトリに反映されます。

今の状態だと同時に編集した場合競合してしまうので、1レコードずつ追加や編集できるモードがあると更に使い勝手上がりそう。

GitHubのAPI、OpenIDでaccessTokenをゲットしたら、GitHub.jsを使って、ユーザー情報やリポジトリを取得したり、ファイルをプル＆プッシュできます。 ファイルは、バイナリデータをBase64.jsでエンコード、デコードしてサーバーとやり取りします。

ユーザー登録やログイン機能の実装が不要なのは楽ですね。 OpenID認証機能付きのサーバーコードも使い方ドキュメント含めて整理して公開します。

Code for FUKUIで進める地域DX、GitHubで管理する「越前市の国高地区安全マップ」をバージョンアップ。 最も小さな行政、町内会でGitHubユーザー広がってます！（参考、GitHubはじめのいっぽ by Code for FUKUI）


「越前市 国高地区 地域安全マップ」
印刷レイアウトにも対応！ 2021年度版のデータも追記、完了。場所ごとのデータ、アイコンデータはいつでも差し替え可能です。 位置情報を表すGeo3x3は、緯度経度地図で調べて、CSVに記載します。 分かりやすいインターフェイスを作れるともっと便利になりますね。


「越前市 国高地区 地域安全マップ」(src on GitHub)
地域の安全マップ、みなさんのまちにもいかがでしょう？

今回のJavaScript開発、3つのポイント。

1. qr-codeタグ
HTML内に <qr-code></qr-code> と入れるだけでそのサイトのURLを表示できます。new QRCode()でエレメント追加でもOK!

2. fetchImage
awaitを使って画像の読み込みを同期的に処理できます。コールバックを使わないのでネストが深くならずシンプルにかけて便利です。

3. CSSの @media print
印刷時のレイアウトをCSSで指定できます。

求む、中高生、高先生、社会人 Code for FUKUI デベロッパー！
気になるリポジトリのIssuesへの書き込み、プルリク、お気軽にどうぞ！
2021-07-30金18:30-22:00開催「サイバーフライデー」はオフライン活動の日です。

運用続く「COVID-19 Japan - 新型コロナウイルス対策ダッシュボード」、調べてみるとCOVID-19 Japanと名付けたサイトを公開した2020年3月11日からちょうど500日目でした。

昨年の各都道府県ばらばらに公表されるデータを集めたり、コンバーターを書いたりする状況から比べると、厚労省発表の前日現在患者数PDFデータと、ほぼ週次で発表される対策病床数Excelデータを反映するだけなので、随分と楽にはなっています。 ただ、それぞれPDFとExcelは、データ形式が変わらない保証がないため、目視チェックが欠かせません。


「COVID-19 Japan - 新型コロナウイルス対策ダッシュボード #StopCOVID19JP」
オリピック開会式の日、東京と神奈川が黒。つまり、現在患者数が対策病床数（医療機関の病床＋宿泊療養施設の室数）を超えています。 分母が病床、分子が患者数なので、対策病床使用率という言葉を定義して使ってきましたが、一般の病床使用率と混同されるケースが見られることから、単に「現在患者数/対策病床数」と表記する形に改めました。 合わせて、数が多くて見ずらくなっていた部分を割合表示に変えました。


「東京都 - COVID-19 Japan」
東京をクリックかタップすると詳細を見ることができます。第四波を超える現在患者数となっています。過去の推移からピークはもう少し先となると推定できます。


「新型コロナウイルス感染症患者の療養状況 病床使用率 - 厚労省発表データ」
現実には病床使用率は100%を超えられません。こちらが厚労省発表の実病床使用率ですが、重症病床使用率が東京で45%、沖縄で62%とかなり高くなっています。


「データからわかる－新型コロナウイルス感染症情報－」
厚生労働省のオープンデータも充実してきました。ステージの判断で参考とされる指標関連データによると病床使用率は50%を超えると、最終段階であるステージ4となり危険とのことです。 病床数データは7/14と1週間以上も前のデータな点に注意です。


「新型コロナ対策病床数推移（厚労省）」
病床数の推移を見ると一目瞭然ですが、病床の準備は一朝一夕ではできません。 日々更新される現在患者数を見て、その医療キャパ推定値を踏まえての行動が大事です。

また、厚労省オープンデータはCSVとなっているので活用しやすそうですが、CORS設定がされていないため、運用するには何かサーバーが必要なのが惜しい！
（参考、クロスドメインの通信許可(CORS対応) - APIテクニカルガイドブック - 標準ガイドライン群 | 政府CIOポータル）


「福井県 - COVID-19 Japan」
一方福井県は、第五波、収束方向。対策病床数450の内、50のみ使用、11.1%です。同じ日本といえ、場所によって状況が全く異なるだろうという仮定で、ひと目で比較できるものが欲しくて作ったのが本アプリです。

「新型コロナワクチンの接種状況（医療従事者含まず）」によると全国のワクチン接種完了率はまだ2割程度。 第五波は避けられなさそうですが、最後の波としたいですね。（接種完了率、トップは山形県で27.94%、ボトムは沖縄県14.60%）

集約しているデータはすべて二次利用可能なオープンデータとしています。Amazonアレクサなど、さまざまなサービスで使っていただいています。 厚労省オープンデータと合わせて、ご活用ください！

7/22海の日に、マリンデブリ問題にシビックテックで挑む！
福井県庁と美浜町の共催によるアイデアソン「美しい浜アイデアソン」に参加しました。

オンライン開催となりましたが、せっかくなので訪れた美浜町役場。


主催者の福井県庁、美浜町役場、お題提供の方々！


「美浜の海 - VRふくい」
ステキな海岸、さすが美浜！（福井で2つしかない珍しい交差点、美浜町ラウンドアバウトも写ってます）


と思ったら、海岸では無いところにはマリンデブリ、不法投棄され漂流、漂着した海洋ゴミがありました。 お題提供の方の話の通り、きれいな海岸の裏には多大な労力と、費用がかかっています。


福井県の美しい浜代表、水晶浜に到着。砂浜でアイデアソンスタート！今回5チームに分かれました。


さすがに炎天下で続けるのは無理そうだったので、お昼休憩に移動、美浜原子力PRセンターにカフェ発見。


おいしかった、へしこ茶漬け！

お昼後、アイデア検討を続け、スライドにまとめて、15時から発表！
発表時間は各チーム6分。審査の結果、参加していたBチームが優勝！

集合写真 by 福井県×デジタル・トランスフォーメーション


「xGC - garbage collection anywhere」
マリンデブリの7割以上は地上で不法投棄（ポイ捨て含む）によるものとのこと。海だけの問題ではないわけです。 押さえて置きたい、ゴーストフィッシング、東日本大震災後いまだ漂うガレキ、海外から漂着する危険ゴミ問題。 Code for FUKUIのGitHubにまとめました。

製造から回収まで、ぐるっと資源を回すのが筋。不法投棄されたものを回収、回復する費用をきちんと捻出できるモデルにしなくてはいけません。 アイデアソンでは、地域通貨やポイントなどで、拾う人へのメリットあるようにとディスカッションされましたが、問題はその原資。

原資がなくても、ゴミ拾い自体を楽しんでしまうのがゲーム化するプラン。 ゴミ拾い後の分別にコストがかかるなら、そもそも特定のごみのみ拾うスポーツに仕立ててしまいましょう！

ペットボトルのキャップを集めて、一定エリアにばらまき、早く全部拾ったもの勝ちのゲームで対戦してみると楽しいかも！？

「Treasure Hunting」
スマホゲームにもしてみました（PCでもマウスで遊べます）。ごみ1つのステージから、10コまでの10ステージのタイムを競えます。 触ったら即アウトな危険ゴミを追加するのもいい学習になって良いかも。

過去の様々な実験によると、最も効果が高いものは不法投棄・ポイ捨てへの罰金・罰則とのことでした。ポイ捨て条例作って原資を確保するのもありかもしれません。


イベント終了後、美浜原子力PRセンター内、見学。凄まじい原子力のイメージとは違ったかわいい内部。


お隣敦賀市、高速増殖炉もんじゅ近くのテイクアウトカフェ「Calm」は残念ながらおやすみの日。

不法投棄ごみ問題、Code for FUKUI にて、継続的にチャレンジしましょう！
「xGC - garbage collection anywhere」
コメントや、アイデア投稿、お待ちしています！

テーブル状のデータを気軽に編集したり、オープンデータにできたらうれしいですね。

気軽なオープンデータプラットフォーム「PUSHかんたんオープンデータ」でデータ種としてinput-tableタグに対応するtableを追加し、CSVファイルを気軽にオープンデータにできるようにしました。

「PUSH かんたんオープンデータ」
input-tableタグをCSVファイルのドロップによる更新に対応したので、手元のCSVファイルを簡単にオープンデータにでき、その後の編集はブラウザ上で簡単にできます。 ひとまずデータ容量は1Mbyteまでにしています（input-tableタグのmaxlength）

input-tableタグ、なかなか幅広く使えていい感じです！
(input-table HTMLElement src on GitHub / Code for FUKUI)

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