山梨県オープンデータ研修にて紹介した、オープンデータは自由に使えるデータ、活用編です。 公開されているオープンデータが使いにくいなら使いやすくしちゃえばいいんです!
特選やまなしの食 オープンデータ


山梨県オープンデータ検索」にて、アプリで使いやすいCSV形式で検索してみます。


18件ヒットしました。


一番トップに表示された「特選やまなしの食オープンデータ」画像ファイルもあっていい感じ!


早速、CSVデータをwebアプリから取得しようとしてみると、違うドメインからのアクセスが許可されていないのでエラーがでてしまいます(CORSエラー)。 webアプリからのアクセスを歓迎するのであれば、HTTPヘッダーに下記のような設定を加えます。

Access-Control-Allow-Origin: *

加えてほしいとお願いしてみるのも手ですが、再配布もOKなオープンデータなので、GitHubにコピーして使うことにします(GitHub Pagesは、上記ヘッダーがつけてくれます)。 また、文字コードがSJISなので使いやすいUTF-8変換し、せっかくのステキ写真のURLの記載がCSVデータにない点も、こちらも加工して追記します。

まずはダウンロード (donload.js JavaScript/Deno)

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; const csv = await CSV.fetch("https://www.pref.yamanashi.jp/shokuhin-st/shokuiku/documents/yamanashinoshoku.csv"); console.log(csv); await Deno.writeTextFile("yamanashinoshoku.csv", CSV.encode(csv)); const html = await (await fetch("https://www.pref.yamanashi.jp/shokuhin-st/shokuiku/yamanashinoshoku_tokusen47_od.html")).text(); console.log(html); await Deno.writeTextFile("yamanashinoshoku.html", html);


続いて、node-html-parserのDeno版を使って、画像ファイル名一覧取得。

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; import HTMLParser from "https://dev.jspm.io/node-html-parser"; const fn = "yamanashinoshoku.html"; const html = await Deno.readTextFile(fn); const root = HTMLParser.parse(html); const links = root.querySelectorAll("a"); for (const link of links) { const href = link.attributes.href; const txt = link.text.trim(); console.log(href, txt); }

写真をダウンロードして、URLをセットしなおして、できあがり!
yamanashinoshoku3.csv


特選やまなしの食 オープンデータ
ひとまずシンプルなサンプルとして、食べ方リンクがある画像だけを表示する、山梨の特選を目で楽しむアプリのできあがり!

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; window.onload = async () => { const csv = await CSV.fetch("https://code4sabae.github.io/yamanashinoshoku/yamanashinoshoku3.csv"); const data = CSV.toJSON(csv); for (const d of data) { const img = new Image(); img.src = d["写真URL"]; const url = d["「食べられる・買えるお店」URL"]; if (url.length > 0) { img.style.cursor = "pointer"; img.url = url; img.onclick = function() { window.open(this.url, "_blank"); }; main.appendChild(img); // リンク付きだけ表示 } // main.appendChild(img); // 全部表示 } };

いろいろ改造して、ステキなアプリづくりにチャレンジしてみましょう!
→ 2020.01.24 デザイン改善版、公開

links
- ウェブサイトに一文追記すればOK! オープンデータのはじめかた

変わってほしくない、自治体URL、2021年版作成しました
前回「全国1300の自治体の方へ、信頼できる一次情報発信をお願いします!1916サイトを検証、実現率32.1%


日本の自治体「信頼の一次情報」実現率
前回32.1%から、2.5%増の34.6%、少し増えました。


日本の自治体「Webの安全」対策率
AOSSL率は、前回調査2020/2/3から約1年、74.2%から77.6%の3.2%増。増加ペースが鈍っています。


日本の自治体ドメインセンサス
使われているドメイン調査。lg.jpが38.5%から41.2%の増加するも、引き続き都道府県jpドメインが過半数。引き続き、自治体のウェブサイトの引っ越しによるURLの断絶は続いてしまいそうです。

Denoで作成した、チェックプログラム、オープンソース on GitHub
localgovjp 日本の地方自治体一覧オープンデータ JSON/CSV
ライセンスはCC0です。ご自由にお使いください。

人によって声は様々。25年前は自分の声の学習(ディクテーション)から始める必要がある上に、精度も低かった音声認識。 Web Speech APIにより、音声合成も含めてブラウザで簡単に使える時代になってました。



WebVoice 音声認識デモ」(src on GitHub)
使い方は、Chromeで「音声認識する」を押し、マイク使用許可をするだけ簡単! 音声データはGoogle社に送って解析される点、ご留意ください。


WebVoice 音声合成デモ」(src on GitHub)
おまけに音声合成。自分の声で話せない時、代わりにしゃべってもらうこともできます。こちらはサーバーにはデータ送信されないようです。

こちらはSafariでも動作します。macでは、sayコマンドでも紹介した、システム環境設定、読み上げコンテンツ、システムの声で指定した音声合成エンジンが使用されます。 ちょっと関西風な自然な感じでしゃべってくれる Otoyaさん、オススメです。(Kyokoさんも高音質化ダウンロードすることで自然さ少しアップします)

バーチャル鯖江プロジェクト、リアルな鯖江のまちをサイバー空間上にも作ることができたら、おもしろいし、きっと便利。

バーチャル鯖江プロジェクト 中心地、10倍巨人モード」
鯖江商店街3Dデータを、WebVRで見られるようにgltfに変換し、サンプルアプリを作りました。


鯖江市の一部、鯖江商店街3Dデータがある。 CC BYのオープンデータとしてダウンロードできるskpファイルは、SketchUpを使って開け、objファイルとしてエクスポートできる。 全部だと重かったので、選択範囲を限定していくつかパターンを用意。単位は「ヤード」にすると実寸になります。 後は obj2gltf で、gltfに変換すればできあがり!
code4sabae/sabae-pj3d: 鯖江商店街3Dオープンデータ gltf / obj / skp on GitHub


バーチャル鯖江プロジェクト 中心地、10倍巨人モード」
いろんな角度で見て楽しめます。Questではテレポートでの移動に対応。


バーチャル鯖江プロジェクト 実寸モード」
PCではカーソルキー、Oculus スマホでもVRモードでぐるぐる見渡せますが、VRでの体験が最高です!

Oculus Quest で、10倍巨人となって鯖江市商店街を歩いてみた様子。

HTMLだけで作成した本アプリは、オープンソース。いろいろご活用ください!
src on GitHub

自動計算が尊かった昔と違い、便利なツールがある現代では、合計や平均を計算するプログラムをがんばって勉強したところで、表計算の方が便利じゃん?で終わってしまいます。

せっかくプログラミングするなら、すぐにプログラミングならではの凄さが味わえることを味わいましょう。IchigoJamならLED、PCならVR!?

HTMLで創るVR、A-Frameはじめのいっぽ」で、コンピューター言語「HTML」に入門できた人向けの次のステップ、JavaScriptを使ったプログラミング入門です。


ループ

for (let i = 0; i < 10; i++) { // box 設置! }

マウスで視点を動かしたり、カーソルで前後左右に動けます。スマホはぐるぐる回して見渡せて、Oculus QusetなどVRではこのサイバー空間を歩けます。


二重ループ

for (let j = 0; j < 10; j++) { for (let i = 0; i < 10; i++) { // box 設置! } }

二重ループで二次元的に設置できます。数や大きさをいじって遊んでみましょう。多すぎると重くなります。


三重ループ

for (let k = 0; k < 10; k++) { for (let j = 0; j < 10; j++) { for (let i = 0; i < 10; i++) { // box 設置! } } }

三重ループで三次元!


英数テキストを表示法日本語は別途、シカケが必要です)


視点がある座標(カメラ座標)をテキスト表示するJavaScriptプログラム

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> <script type="module"> AFRAME.registerComponent("main", { init: function() { }, tick: function () { const p = camera.object3D.position; cameraheight.setAttribute("value", p.x.toFixed(1) + ", " + p.y.toFixed(1) + ", " + p.z.toFixed(1)); } }); </script> </head> <body> <a-scene background="color: white" main> <a-box position="0 1 -2" width="1" height="1" depth="1" color="green"></a-box> <a-text id="cameraheight" position="1.5 1 -2" width="5" color="black" rotation="0 0 0" align="center" value="0"></a-text> <a-camera id="camera"></a-camera> </a-scene> </body> </html>

A-Frameの使い方は、AFRAME.registerComponentを使います。tickが連続して呼ばれるので、そちらでカメラの座標をテキストのvalueにセットしています。

前後左右に動いたり、頭を上下に動かすと、値が変わることを確認できます。
VRスクワットを実現する準備ができました!

作ったVRを自分のスマホで見られる環境を、Node.js、live-servert、ngrokを使って整えましょう!

自分のスマホでチェックする手順まとめ(スマホとPCが同じネットワーク上にいること)
1. node.js をいれる
2. コマンドプロンプト(macではターミナル)を開く
3. live-server いれる

npm i live-server -g

*macでは先頭に "sudo " を付けて、sudo npm i live-server -g とする)
4. cd コマンドで、HTMLがあるフォルダ(FinderやExplorerからドロップすると楽)
5. 編集をチェックして自動リロード機能があるウェブサーバー live-server を起動する

live-server

* ファイル名を index.html にしておくとすぐ開き楽です
6. エディタでファイルを編集するとブラウザが自動的に更新してくれることを確認、楽!
7. ターミナルももう一つ起動
8. 外部から中のネットワークに中継してくれる ngrok いれる

npm i ngrok -g

*macではsudoつける
9. ngrokを起動

ngrok http 8080

10. https:// で始まり .io で終わるURLをコピーする
11. QRコードメーカー でQRコード化し、スマモで読み取ってアクセスする
12. スマホで加速度センサー使用を許可するとグリグリ見渡せる(VRボタンでVR表示もいける)

自分で作ったサイバー空間、スマホでグリグリ見られると楽しいですね!

一般公開したくなったら、GitHubが便利です!

GitHubを使って公開する方法
1. GitHubアカウントをつくる(メールアドレスが必要です)
2. https://github.com/ の Repositories [New] を押す

3. webvr-test とか名前をつけて作成
4. uploading existing files を押す
5. 作成したファイル達をドロップし、[Commit changes] を押す(フォルダの中身をアップする)

6. リポジトリの Settings (横に広げないと隠れてる)を押す
7. スクロールして下の方、GitHub Pages の Source を Branch: main に変更し、[Save] を押す
8. 再度スクロールして下の方、GitHub Pages に公開アドレスが表示されているのをクリック(Your site is ready to be published at https://[accountname].github.io/[repository name]/.)
9. 表示される!公開完了!(更新に1分ほど待つ必要があったりする)
10. 再度アップロードするときは、GitHub.com の Code のページ、[Add file] → [Upload files] で更新可能
11. 何度もアップする時、複数人で開発する時などは、GitHub Desktop をインストールするといいよ!

プログラミングの楽しさに触れたら、いろいろ作っていきましょう!
作れそうな作りたいものからがオススメです。
JSはじめのいっぽ」も参考に!

本日の「CyberValley, Japan」、データは「はかったもの」と説明すると分かりやすいことを発見。

コロナ対策ダッシュボード」でいつの間にか人気ページとなっていた、Google社による都道府県別予測データ表示アプリ

スマホのGoogleマップなどで測られた人の移動データと、各都道府県が計って、厚労省が集計したコロナデータ。 これらを元にGoogle社が予測モデルを設計し、コンピューターで計算した予測データは、どの程度当たるのか興味があったので、発表当時からのデータを収集し、オープンデータ化、予測と結果を表示アプリを公開しています。

COVID-19 Japan 都道府県別 感染者予測と結果
2020/12/18予測の東京、後半の増加は予測されていた以上となりました。
今回、Twitterでご要望いただき、日別の新規患者数結果のバーグラフ表示を追加しました。赤の新規患者数は左軸、青の現在患者数は右軸をご覧ください。


東京の予測は現状の2万人から7万人にもなる予測・・・。こうなっては大変です。


2020/12/18予測の福井、後半予想を上回る感染者が出ました。


福井のこれからは、減少傾向という予測。この予測を下回るくらいでいきたいですね。

いろいろ、はかろう!

黒が目立つ新型コロナウイルス対策ダッシュボード、黒になった後の都道府県に非常事態宣言が出されているので、先行指標として機能してそうです。

黒からの回復の条件は2つ、患者数の減少か、対策病床数の増加。対策病床としては、対策病床数と宿泊療養施設を含めています。これらの数の推移を患者数と合わせて追えるアプリを作りました。
対策病床数推移(厚労省オープンデータ)東京版
8月後半に増加して以来、病床も宿泊療養施設も増やしてはいないようです。


対策病床数推移(厚労省オープンデータ)福井版」 福井県、抑えられています。お住まいの都道府県のチェックをどうぞ。

前回の雪かき事故を知らせるアプリの通知先はiPhoneアプリでしたが、AndroidやパソコンのChrome, Firefox, Edgeでは、W3Cでオープンに規格化が進む WebPushこと「Push API」が使用可能とのことで、実験してみました。 コマンドラインから、webから、結構手軽に通知が送れるのでなかなか楽しく、便利です!うまく使えば、気になる情報のチェックや、リマインドに大きく力を発揮してくれそうです。

本ブログにもそのうち追加しようと思いますが、ひとまず、実験できるプログラム一式ができたので、公開します。

WebPushは、各ブラウザベンダーが運用している通知サーバーにデータを送って、そこから各ブラウザへと通信される仕様のようです。 Node.js 用のライブラリを使って、通知用の設定と、コマンドラインで送信するツール、Deno で作ったサンプル通知管理サービスと、クライアント動作するプログラム、すべてJavaScriptです。 便利ですね、JavaScript。(src on GitHub

<script type="module"> import { WebPush } from "./WebPush.js"; window.onload = () => { btnSubscribe.onclick = () => { WebPush.subscribe(); }; btnUnsubscribe.onclick = () => { WebPush.unsubscribe(); }; btnTest.onclick = async evt => { const data = { title: "webpush test", body: "本文本文...........", url: "https://fukuno.jig.jp/3093", // 拡張 開くアドレス timeout: 5000, // 拡張 通知を消すまでの長さ msec (デフォルト0:消さない) delay: 1000, // 拡張 表示するまでの時間 msec(デフォルト0) }; console.log(await WebPush.push(data)); }; }; </script>

クライアント側クラス WebPush の使い方は簡単。
1. 登録ボタンを押してもらって WebPush.subscribe()
2. 後は、ユーザーが許可してもらった後、pushすることでブラウザからも通知が可能です
3. 通知を止めるときは WebPush.unsubscribe()

サーバー側では、まず準備。data/mailaddress.txt にメールアドレスを記入したテキストファイルを置き、下記コマンドで、data/vapidKeys.json が生成されます。

$ node push.mjs

webサーバーをDenoで起動します

$ deno run -A webpushserver.js

https://localhost:3004/ にアクセスすると、上記画面が開きます。
登録すると、サーバーの data/subscription 内に通知用のデータがたまります(uuid + .json がファイル名)
この uuid 宛に通知がコマンドで送れます。(uuidを記載します)

$ node push.mjs xxxx-uuid-xxx 'push test'

これでOK!(文字列の代わりにJSONでアイコンなど細かな指定も可能です)
コマンドをラップして、Denoで使えるコンポーネントにもしました。

import { push } from "./push_cmd.js" await push("xxxx-uuid-xxx", "push test in Deno");

サーバーから各人へデータを送って見てもらいたいというシンプルなユースケースですが、現状webではなかなか大変なシステムになってしまいますね。 とはいえ、WebPush、今の所、各ブラウザベンダーによる運用で無料かつ無制限で使えるようなので、いろいろ遊んでみましょう!
src on GitHub

政府提供オープンデータAPIポータルについて書いたところ、6つ挙げた課題の内、API一覧と元データの明示の2つが解消。 エラーとなるAPIはそのままでしたが、明示されたCSVをダウンロードし、神戸市の三宮歩行者数データをグラフでビジュアライズするアプリを作りました。

三宮歩行者数推移(神戸市オープンデータ使用)」(データ5M、表示まで時間がかかります)
4月の緊急事態宣言後、じわじわと歩行者数が増え、10月以降はほぼ元通り、年末年始でも大きな減少は見られません。


9箇所の設置場所、それぞれを見ることができます。1時間ごとのデータは重いので、前処理して軽くする。特定時間だけで見るなど、プログラムや、ソフトウェアでうまく解析するといいでしょう。 オープンソース on GitHub です。ご自由に活用ください。

登録とAPIキーが必要なオープンデータAPIポータルに代わって、全件CSVで自由にアクセスできるように環境を作ってみます。 3時間置きに全データを取得し、UTF-8のCSVデータとして、GitHubにアップし、公開するようにしました。

オープンデータ一覧」(CSV on GitHub)
オープンデータとして公開されているCSVファイル、文字コード(charset)が、SJISかUTF-8か2種類あるところが注意です。


SJISのCSVを読み込んでしまうと、このように文字化けします。BOM付きのUTF-8のCSVがスマホのブラウザで直接読んでも、Excelで開いても文字化けせずオススメなのですが、なかなか現状の習慣を変えるのは大変そうです。 人が変わらないなら、ソフトウェアで変えましょう。コンパクトな文字コード変換、SJIS.js を作りました。

import { SJIS } from "https://code4sabae.github.io/js/SJIS.js"; const bin = // some Uint8Array const s = SJIS.encode(bin); // or SJIS.encodeAuto(bin) console.log(s);

これだけでOK!
TextEncoderが使えないサーバーでもブラウザ上でも使用可能です。75KBとそこそこコンパクト。

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; const s = await CSV.fetch(url);

ついでに、CSVのfetchで、SJISかどうかを自動判定するようにしました。
もう、CSVなら何でもokです!


あいづ呑んべぇ文化支援プロジェクト - api.opendata.go.jp
前回作成のアプリと見た目は変わりませんが、データソースが違います。


あいづ呑んべぇ文化支援プロジェクト - データセット - DATA for CITIZEN
今回はデータ提供元である、会津若松市のオープンデータのホスティング先、Data for CITIZENから直接取得する形としています。

すべてデータ出典元から取れればいいかというと、実は更に課題が2つあります。

1. CORS対応していないことがある。
オリジン間リソース共有 (CORS)はブラウザからドメインを超えてデータを取得できる仕組みです。 ただ無尽蔵に取得できるようにすると、意図しないアクセスが発生してしまうので、データ所有者による他のドメインから取得できるような設定が必要です。具体的には、こちらのような感じです。

HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 00:23:53 GMT Access-Control-Allow-Origin: *

2. SSLが古く取得できないことがある。
セキュアな通信を実現するいわゆるSSLは、現在TLS1.3です。ただ、セキュリティに課題がある古いTLS1.2を使っている自治体がまだ存在します。 TLS1.2で提供されるデータを取得しようとするとエラーが発生して取得できないことがあります。セキュリティとして意味をなさないので、早急にデータ提供元の対応が必要ですが、しょうがないのでセキュリティを落として取得する形にして対応しています。

もし、上記2点がクリアになれば、現存のオープンデータAPIポータルも、今回の3時間置きアップシステムも必要なく、単純にCSV一覧のみがあればいいだけとなります。
システムは必要なく、普通にwebサーバーにCSVファイルを置くだけでいいので、低コスト!

結論、CSVオープンデータではじめて、5つ星オープンデータにしましょう!

福井は3年ぶりの大雪。勝山市の山間部での積雪はなんと3mとも。雪の重みによる家屋倒壊リスクがありますが、大雪時の雪かき、雪下ろしにも危険が伴います。 Facebookでの呼びかけを見て、技術検討開始。加速度センサーを使って何かあったことを検出し通信するwebaアプリ「雪かきアラート」とiPhoneで通知を受けるアプリ「PushGet」を作成しました。


雪かきアラート」(src on GitHub)
iPhoneで動かす、webアプリです。「雪かきスタート」で、10秒おきにビープ音が鳴り動作スタート。画面が消えてしまうと止まってしまうので、スリープしないように一時的に設定してください(制限)。 しきい値を超える加速度(G)を検出すると高いビープ音が鳴ります。指定時間動きがないと断続的にビープ音が鳴ります。音量は最大にするといいでしょう。

課題は2つ
- 通知が手軽にできない(iPhoneネイティブアプリの開発と申請、サーバーの運用が必要)
- 常時起動ができない(スリープ中のスマホを定期的に動かし加速度を取得する方法がない)


PushGet - src on GitHub
通知で伝えるiOSアプリを作りました。表示されるQRコードから上記「雪かきアラート」を呼び出すことで、通知を受けることができます。iPhoneアプリはAppleへの申請が必要なのですぐには使えません。 オープンソースなので、Xcodeとサーバーが分かるエンジニアで、Apple Developr Programアカウントがあれば、設定して使用可能です。 通知システムAPNsとの接続は、Node.jsとDenoで作った「apnpush on GitHub」を使ってください。

現在、メッセンジャーアプリでおなじみ「通知」は手軽ではありません。iPhoneユーザーに通知するためには、年1万円のApple Developer Programへの登録と、何らかのサーバーが必要です。 命を救う可能性がある通信、もっと手軽に実現したいですね。


アイコン作成は Keynote と、先日作った「AppIconMaker」が役立ちました。


鯖江の積雪、80cm。雪かきしないと車は移動不可能。この4倍近くとは・・・。

まだ不自由なスマホの仕様、スマホに頼らず、雪かきお守りIoTを作ったほうがいいかもしれません。

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