バーチャル鯖江プロジェクトの一環、ドローン撮影テスト。許可いただきめがね会館を撮影


VR-megane-kaikan VRめがね会館」(src on GitHub)
PC、スマホ、VRでぐるぐる見渡せます。めがね会館前の上空。VR写真をボタンひとつで撮影できるのは便利! 鯖江市上空を辿るバーチャルトリップアプリ化するのも楽しそう。


こういう写真を合成してくれます。元解像度のデータはGitHubで取得してみてください。

めがね会館を撮影(協力、福井県眼鏡協会(ふくいけんがんきょうきょうかい)鯖江SDGs推進センター


めがね会館近くのjig.jp新社屋予定場所にて、上限上空150mまでの旅。ジャンプ力100倍を体験するVRアプリづくりも楽しそう。


150m上空から真下を撮影。


150m上空からの広角撮影。


めがね会館、この視点での撮影は初!?


めがね会館とリニューアルした文化センター。

上記動画、静止画、アプリもすべて、CC BY Code for Fukui のオープンデータ。いろいろご活用ください!楽しく使えるアイデアもぜひお寄せください!

JavaScriptとHTMLだけでつくるVRアプリ、上記アプリもただ画像を指定するだけ簡単。興味ある方、VRはじめのいっぽをどうぞ!

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <html> <head> <meta charset="utf-8"> <title>VR-megane-kaikan VRめがね会館</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sky src="https://code4fukui.github.io/vr-megane-kaikan/Photo_6553700_DJI_100_pano_42713392_0_20214782526_photo_pano.JPG" rotation="0 -90 0"></a-sky> </a-scene> </body> </html>

上記ファイルを手元で live-server などwebサーバーを使えば動きます。rotationをいじってみるとおもしろいですよ!

links
- HTMLで創るVR、A-Frameはじめのいっぽ

新宿区に続き、東京都による新しいオープンデータを使った、アプリづくり。

東京都内の避難所が一括してCSVオープンデータになりました。共通語彙基盤の語彙を設定して、種別を設定し避難所と避難場所データを統合、4m分解能のレベル15のGeo3x3を追加し、CORS対応できるGitHubにCSVとエンジニア大好きJSON形式にして二次配布。 サンプルアプリとしてCSVデータを簡単に地理院地図のマップ表示できる csv-map 拡張タグを使って表示しました。


東京避難所オープンデータマップ
約5,000箇所あるのでちょっと重いです。多量のデータの表示は今後のTODO!


東京避難所オープンデータマップ
東京都は広い!


tokyo_evacuation on GitHub
オープンソースです。データを活用して創ろう、強い日本!

あっと言う間に最終日を迎えた、jigインターン2021春!
夕方17時から、2チーム、2作品の発表会。10分でプレゼン&デモ、観覧者による質疑応答を経て、投票によって決まった優勝チームは!?

2日間、やりきった!


ゲーム好きのための双方向情報交換サイト「ゲームちゃんねる on GitHub」 ロゴデザイン by もしゃ(jigインターン2020 OB
既存のサイトでは物足りない!主な情報源の動画だけどとまとまらない。そんなとき「ゲームちゃんねる」


今回はXAMPPで構築、サーバーの掲示板システム。フロントエンドはレスポシブ対応! 好きな人が作るのが一番!ぜひリリースに向けて育てましょう!


こどもでも苦手な人でも気軽に自分の音楽ができる「べいびぃすたじお on GitHub」 ロゴデザイン by もしゃ(jigインターン2020 OB
音楽理論とかセンスとか難しいことは置いといて、楽しくステキな音楽づくり、実現します!


ブラウザで鳴るJavaScript音源 Tone.js を使って、シーケンサーと共有するシステムを実装。GitHubのようにどんどんフォークしたり、混ぜたりできると楽しそう! 作詞や、ビジュアライズ、動画との組み合わせなど、いろんな方向への発展を考えるだけでもワクワクしますね!

優勝は「べいびぃすたじお」賞品の Oculus Quest 2 を使ったVR版にも期待です!
どちらもオープンソース。参考にしたり、フォークしたり、開発に参加したり、いろいろ作って発表しましょう!


normalize-japanese-addresses-es
DenoによるJavaScript/HTML/CSSを使えると、サーバー(バックエンド)にクライアント(フロントエンド)にいろいろ応用できて便利です。 こちら、本日発表された、Geolonia社の、日本の住所表記を正規化するオープンソースライブラリ「@geolonia/normalize-japanese-addresses」を、フォークし、ブラウザやDenoで使えるESモジュール表記に変更した「normalize-japanese-addresses-es」です。

B Inc. odp(オープンデータプラットフォーム)を使った、新宿区の行政メニューオープンデータもスタート!
東京都新宿区とB Inc.、オープンデータを使った行政サービス案内用のwebサービスを公開~利用者が迷わない窓口案内を目指して~|株式会社B Inc.のプレスリリース
DX、がんがん進める力は、エンジニアにあり!

Denoはじめのいっぽ、ぜひどうぞ!
Denoでつくる掲示板webアプリ、ハンズオン

鯖江商工会議所のDX委員会が新たに誕生します。 DX、デジタルトランスフォーメーションとは、デジタルを活用したデジタル技術を活用して、事業モデルを創出できたこと、また、柔軟に対応する体制ができた状態を指すとのこと。 幼虫・サナギから、成虫へのトランスフォーメーションが始まります。

鯖江市役所も新体制、オープンデータへの取り組みと共に名前が変わった情報統計課から、デジタル推進課へ。新しいフェーズへと入ります。

佐々木市長、中村副市長へ、京都大学、出口先生、坂出先生、コネクトフリー社帝都久利寿氏と共に未来談義。


サイバー空間において見直される自分の証、ハンコ。 シヤチハタ製「QRコードハンコ」からデジタルを活用する新しい世界が見えてきました。


誰一人取り残さないSDGs、その達成にはデジタル技術の活用は欠かせません。SDGsが達成し、維持され続ける世界こそDXが達成した社会の姿。 デジタル時代を担うこどもたちや、大人をサポートする、Hana道場にて。


BrailleBeat tester」(src on GitHub)
こちら、学生に披露してもらった点字をモチーフにした音ゲー「BrailleBeat」からインスパイアされ、音ゲー好きな学生のための参考作品にと作ったJavaScriptバージョン! 濁音、半濁音、拗音(ようおん)を表す3点を加えた3x3のマスにしたアイデアがナイス!

曲と共に譜面が表示されます(当たり判定はまだありません)。曲は防衛省海上自衛隊東京音楽隊のオープンデータ「国歌「君が代」について」を使用。 オープンデータな曲と、歌詞データ、初音ミクとTextAliveもうまく使えるかも?(音楽とプログラミングとコンピューターグラフィクス! TextAliveのテンプレートを使ってみよう


市長室隣の応接室に飾られた前市長、牧野さんの肖像画と。牧野さんが15年前、ここに誘ってくれたのが始まりでした。
みんなで創ろう、世界の鯖江!

毎日運用続ける「新型コロナ対策ダッシュボード」は、集めたデータを使いやすいCSVオープンデータや、JSONオープンデータとして二次配布して、いろいろと活用いただいています。 この度、病床数データに関してお問い合わせあり「療養状況等及び入院患者受入病床数等に関する調査について|厚生労働省」で公開されている5月分からの変換に対応。


東京都の病床数推移
現在患者数と病床の確保状況を時系列で、都道府県別に確認できます。


福井県の病床数推移
こちらは福井県の様子。


COVID-19 Japan - 新型コロナウイルス対策ダッシュボード #StopCOVID19JP
ほぼ落ち着いた県が多いですが、再び上昇が始まっている県もあります。


COVID-19 日本のPCR検査陽性者数、入院者数、死亡者数
第四波の兆しが見えつつあります。第一波ピークは5月頭、第二波ピークは8月頭、第三波ピークは1月中旬。今までのペースだと仮定すると4月中旬から6月中旬あたりがピークとなるでしょう。

統計ダッシュボードには、日本の今を示す様々なデータがあります。 APIもあるので、プログラミングでの活用も簡単!

統計ダッシュボード」のメニュー、API、開発者向けサンプルをみてみましょう。


統計ダッシュボード - 開発者向けサンプル
オープンソースでの活用ナンバーワン言語、JavaScriptで作られたサーバーレスで動くwebアプリのサンプルがあっていい感じです! CORS対応しているAPIがうれしいですね!高校の情報教材としても良さそうです。

ただ、おしいところが3つ。

- 古いJavaScript(jQuery、変数宣言不要、var)
- 非オープンソースに依存している
- 表記が冗長

共に改善しましょう!
まずは、JavaScriptを type=module のscriptタグにして、変数宣言を必須にしてより安全に、varをletかconstに変更。 グラフ表示モジュールをオープンソースのChart.jsをモジュール化した、Chart.mjsに変更して、import。 filter、findを使って表記をシンプルに。


https://code4sabae.github.io/statapi-sample/」(src on GitHub)

import Chart from "https://js.sabae.cc/Chart.mjs"; window.onload = async () => { // APIでデータ取得 const indicatorCodeX = "0201010010000020010"; const indicatorCodeY = "0201010010000020030"; const apiurl = `https://dashboard.e-stat.go.jp/api/1.0/Json/getData?Lang=JP&IndicatorCode=${indicatorCodeX},${indicatorCodeY}&Time=2017CY00&RegionalRank=3&Cycle=3&IsSeasonalAdjustment=1&MetaGetFlg=Y&SectionHeaderFlg=2`; const jsonData = await (await fetch(apiurl)).json(); console.log(jsonData); // データ準備 const dataX = jsonData.GET_STATS.STATISTICAL_DATA.DATA_INF.DATA_OBJ.filter(item => item.VALUE["@indicator"] === indicatorCodeX); const dataY = jsonData.GET_STATS.STATISTICAL_DATA.DATA_INF.DATA_OBJ.filter(item => item.VALUE["@indicator"] === indicatorCodeY); const indicatorNameX = jsonData.GET_STATS.STATISTICAL_DATA.CLASS_INF.CLASS_OBJ[0].CLASS[0]["@name"]; const indicatorNameY = jsonData.GET_STATS.STATISTICAL_DATA.CLASS_INF.CLASS_OBJ[0].CLASS[1]["@name"]; const data = []; dataX.forEach(x => { const dataValue = dataY.find(item => item.VALUE["@regionCode"] === x.VALUE["@regionCode"]).VALUE["$"]; const regionName = jsonData.GET_STATS.STATISTICAL_DATA.CLASS_INF.CLASS_OBJ[2].CLASS.find(item => item["@code"] === x.VALUE["@regionCode"])["@name"]; data.push({ x: parseFloat(x.VALUE["$"]), y: parseFloat(dataValue), label: regionName }); }); console.log(data); // グラフ表示 new Chart(chart, { type: 'scatter', data: { datasets: [{ backgroundColor: "#55E", label: indicatorNameX + " vs. " + indicatorNameY, data }] }, options: { scales: { xAxes: [{ scaleLabel: { display: true, labelString: indicatorNameX }, type: 'linear', position: 'bottom' }], yAxes: [{ scaleLabel: { display: true, labelString: indicatorNameY }, type: 'linear', position: 'bottom' }], }, tooltips: { callbacks: { label: (item, _data) => { return `${data[item.index].label} ${item.yLabel}%, ${item.xLabel}%`; }, } } } }); }

楽しい統計プログラミングを!

links
- 2022年高校「情報I」プログラミング教材JavaScript版へコントリビュート

今日はオープンデータの日、世界中でオープンデータに関するイベントが開催されています。
You are invited — Open Data Day

コロナ禍の今年は富山、石川、福井、北陸三県合同でオンライン開催!情報提供タイムの後は、ブレイクアウトルームに分かれてオープンデータかるたを使ったアイデアソン!


オープンデータが書かれたカルタを並べて、データをちょい足し、アイデアをまとめて発表しました!


インターナショナルオープンデータデイ@北陸オンラインでの学び、オープンデータとSDGsを組み合わせたカードゲームがおもしろそう!


力強いメッセージ「誰だってオープンデータは作れる!」 by Code for Toyama City の寺田さん
早速、データづくりから始めます。


code4sabae/SDGs_ja: SDGS(持続可能な開発目標)、17の目標(ゴール)と169のターゲットのCSVデータ(English/Japanese)
GitHubで検索して発見した「datapopalliance/SDGs: Excel and CSV versions of the goals, targets, and indicators from the Sustainable Development Goals (SDGs).」をフォークして、日本語とタイトルと色と画像を足しました。

作成したCSVは、csvbeautyを通しているのでExcelからプログラムまで幅広く活用いただけます。webアプリやサーバーでのDenoで使う場合、下記のようなコードで簡単に使えます!

<script type="module"> import { CSV } from "https://code4sabae.github.io/js/CSV.js"; window.onload = async () => { const baseurl = "https://code4sabae.github.io/SDGs_ja/"; const goals = CSV.toJSON(await CSV.fetch(baseurl + "SDG-goals.csv")); console.log(goals); const targets = CSV.toJSON(await CSV.fetch(baseurl + "SDG-targets.csv")); console.log(targets); }; </script>

オープンデータかるたとSDGsを組み合わせる準備ができました!

データの準備だけではちょっとさみしいので、簡単なゲームを作ってみました。

SDGs GOALQUIZ
169のターゲットをランダムにシャッフルし、クイズゲーム風に表示されるターゲットから、対応するゴール(目標)を選び、正答率を競うゲームです。 日本語、英語、両対応。途中での切り替えもできます(アイコンを切り替えるにはリロードが必要)。なかなかに難しいです。

SDGsアイコンはオープンデータではありません。非営利で資金調達目的でなければ申請なしに使用できます。詳しくは、国連のサイトをご確認ください。
SDGsのポスター・ロゴ・アイコンおよびガイドライン | 国連広報センター

クイズゲームのメインプログラム、JavaScriptでなかなか分かりやすく書けたと思います。

window.onload = async () => { const baseurl = "https://code4sabae.github.io/SDGs_ja/"; const goals = CSV.toJSON(await CSV.fetch(baseurl + "SDG-goals.csv")); const targets = CSV.toJSON(await CSV.fetch(baseurl + "SDG-targets.csv")); const body = document.body; add(body, "h1", "SDGs " + lang("ゴールクイズ", "GOALQUIZ")); const result = add(body, "div"); result.className = "result"; const quiz = add(body, "div"); quiz.className = "quiz"; const logos = add(body, "div"); logos.className = "logos"; const sels = []; for (const goal of goals) { const img = new Image(); img.src = baseurl + goal[lang("logo_ja", "logo")]; logos.appendChild(img); sels.push(img); } const credit = add(body, "div"); credit.className = "credit"; add(credit, "span", "App: CC BY @taisukef", "https://fukuno.jig.jp/3146"); add(credit, "span", " "); add(credit, "span", "(src on GitHub)", "https://github.com/code4sabae/goalquiz"); add(credit, "br"); add(credit, "div", "Data: SDGs_ja on GitHub", "https://github.com/code4sabae/SDGs_ja"); add(credit, "span", "Japanese", "#ja"); add(credit, "span", " / "); add(credit, "span", "English", "#en"); add(body, "qr-code"); shuffle(targets); let point = 0; for (let i = 0; i < targets.length; i++) { quiz.innerHTML = "&nbsp;"; quiz.style.backgroundColor = "white"; quiz.style.color = "black"; const target = targets[i]; const goal = goals[target.goal - 1]; const desc = lang("description_ja", "description"); const title = lang("title_ja", "title"); const tid = startShowText(quiz, target[desc], lang(50, 25)); const ans = await waitClick(sels) + 1; clearInterval(tid); quiz.textContent = target[desc]; quiz.innerHTML += "<br>" + lang("あなたの回答", "Your Choice") + ":" + ans + " 「" + goals[ans - 1][title] + "」"; await sleep(300); quiz.style.backgroundColor = goal.color; quiz.style.color = "white"; if (ans == target.goal) { quiz.innerHTML += "<br>" + lang("正解!", "Correct!"); point++; } else { quiz.innerHTML += "<br>" + lang("まちがい! 正解は ", "Wrong.. Correct answer is ") + target.goal + " 「" + goal[title] + "」"; } result.textContent = lang( (i + 1) + "問中" + point + "問正解 正解率" + (point / (i + 1) * 100).toFixed(1) + "%", "Q cnt " + (i + 1) + ", Corrects " + point + ", Rate " + (point / (i + 1) * 100).toFixed(1) + "%" ); await sleep(1000); } alert(lang("おめでとうございます!全169ターゲットのクイズを終えました!", "Congratulations!! You've finished quiz of 169 targets.")) };

(src on GitHub)

3/6は、インターナショナルオープンデータの日!そのプレイベントとしても開催、オープンデータ勝手表彰!

最優秀賞は、シビックテックの火付け役、東京都コロナウイルス感染症対策サイト
Code for JapanのSlackへの参加呼びかけに応えるエンジニアがすごい勢いで伸び、3000人を突破!現在4,766人を数えます。 ここでの活動がきっかけで、COVID-19 Japan 新型コロナウイルス対策ダッシュボードは生まれました。


COVID-19 Japan 新型コロナウイルス対策ダッシュボード」も貢献賞!
まもなく運用開始から約1年、データが十分に揃っておらず、状況が日々変わる第一波の頃はかなりエキサイティグな日々を過ごしました。 オープンデータの力、多くの方に知っていただく機会になったことがうれしいです。表彰いただき、ありがとうございました。
オンライン開催 インターナショナル・オープンデータ・デイ 2021 in HOKURIKU」にて、舞台裏、紹介します!


我らが福井県、Code for Japanと共に受賞!
いち早く、推奨フォーマットに準拠したCSVオープンデータ化が評価されました。


石川県、静岡県、青森県、コンプリート賞!
オープンデータ都市状況はこちらのオープンデータとアプリでご覧いただけます
日本の市町村オープンデータ取組率ダッシュボード (カラム地図7x7 x 政府CIOポータルオープンデータ)
おや、青森県97%!?
青森県平川市のオープンデータが政府CIOポータルのデータに未反映のようでした。


ダッシュボード賞として「エレクトリカル・ジャパン - 発電所マップと夜景マップから考える日本の電力問題 | 東日本大震災アーカイブ - 国立情報学研究所」を選定させていただきました。 身近なで重要なインフラなのにまだまだデータ整備が足りていない発電所オープンデータを、民間運用でなんと10年、日本一のデータ量を誇ります! 手回し発電して無電源で無限にプログラミングできる、IchigoJam無電源セットを副賞としてご提供!

受賞いただいた、Nii 北本朝展さんが提供する多数のデータは、電力以外にも興味深いものがたくさんあります。 気になる地震のデータ、気象庁XMLを使った表示はじめのいっぽ、試してみました。

震源・震度に関する情報 - 気象庁XML
気象庁 | 気象庁防災情報XMLフォーマット形式電文(PULL型)」こちらの情報をブラウザでダイレクトに取得することはCORS設定されていないのでできないので、中継サービス「proxy for Deno」を作って、自前サーバーで運用して対応。


Geo3x3」zoom設定可能になったGeo3x3-map
取得した震源地の緯度経度をproj4をESモジュール化し、緯度経度を日本測地系を世界測地系に変換しつつ、Geo3x3でコード化して、地図表示へのリンクを追加しました。 ただ、この気象庁XMLでは、電力会社の停電情報同様、一定時間で消えていってしまうので、別途アーカイブ化する必要があります。データ活用の余地、大きいですね!

勝手表彰、受賞いただいたみなさま、ありがとうございました!

日本の住所には現在、住居表示住所(丁目、番��号)と地番表示(番地)の2種類あります。 ただ、どちらもオープンデータの整備は不十分、いっそ緯度経度で指定したいくらいです。

緯度経度は2つの小数で表すので扱うのが少し面倒です。その解決、位置をコード化する Geo3x3(ジオスリーバイスリー)。 2012年に考案し、2013年にCC BYへとライセンスを変更。 この度、webアプリや、Deno や Node.js で使いやすいよう整えて、ライセンスをCC0(パブリックドメイン)へと変更しました。


Geo3x3:E5
Geo3x3は、東経と西経に分かれる経度に合わせてEまたはWではじめ、そのエリア内を3x3の9分割した位置を1から9の数字で十分な細かさになるまで繰り返すというシンプルなアルゴリズムです。


例えば、ざっくり日本の位置を示すなら、E379でOK。福井県はE37924、鯖江市のめがね会館はE379219895244という感じです。 コードを長くするほどにメッシュが細かくなり、長さ20でのメッシュは2cm角にまでなるので緯度経度代わりにも使用可能です(例、E3792198952444375954)。

緯度経度は、2進法化すると正確性が失われますが、Geo3x3はその心配はありません。
緯度経度は、何桁までが有効なのかを別途記録しておく必要がありますが、Geo3x3は長さがそのまま精度となります。

Geo3x3のもうひとつのいいところは、コピペが簡単なところです。緯度と経度を逆にしてしまったり、区切りの文字をどうするかを考えることも必要ありません。

E37924

西経をマイナス表記で表記する数値としても扱えるよう変更した Geo3x3 ver 1.03
ご活用ください!(src on GitHub

京都大学坂出さん主催、タリン、ニューヨーク、京都、鯖江をつないだDXGOVイベント。エストニアの首都、タリンのオープンデータが興味深い。
In the event connected Tallinne, New York, Kyoto and Sabae about DXGOV, held by Sakade-san at Kyoto-U. Opendata in Talline is interesting.


Bus in Tallinn」by Open Data Tallinn
Update every 5 seconds, enjoy with beautify sight from the sky! Get more info by clicking the pin.
5秒間隔更新、美しいまちなみを見る衛星写真と共にどうぞ! ピンクリックで情報が見えます。

DATA: Location of public transport vehicles in real time
The app make CSV from providing the open data as headless CSV (TXT)
アプリ内でヘッダーレスなCSVデータ(TXT)をCSVデータとして変換しています

const fetchData = async () => { const url = "https://transport.tallinn.ee/gps.txt"; //const txt = await (await fetch(url)).text(); // Please support CORS!! const txt = await fetchViaProxy(url); const csv = CSV.decode(txt); csv.unshift(["type", "line", "lng", "lat", "speed", "label", "vehicle"]); const data = CSV.toJSON(csv).map(d => { const l = (s) => s.substring(0, 2) + "." + s.substring(2); d.lat = l(d.lat); d.lng = l(d.lng); return d; }); console.log(data); return data; };

Browser can't fetch directly from the server by Tallinn. Please support CORS
ブラウザはタリンのサーバーからデータを直接取得できません。CORS対応、お願いします!

Enjoy to create!
創るを楽しもう!

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