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では、電力会社の停電情報同様、一定時間で消えていってしまうので、別途アーカイブ化する必要があります。データ活用の余地、大きいですね!

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

いろいろイベントが続きます!PRに欠かせないSNSシェア。画像が付いているかどうかでインパクトは大きく変わります。 ただ、画像つきにするにはogpやTwitter Cardの仕様に沿ったHTMLである必要があります。システムによっては非対応なものもあるでしょう。


そんな人のための便利ツール「ogpmaker
表示したいURL,タイトル、画像へのURLを記入して「OGPリンク作成」ボタンを押すと、画像付きシェアできるURLを生成してくれます! Twitter Card validatorや、Facebook シェアデバッガーでご確認ください(変更した時の更新もこちらから)。

参考までに、下記のようなHTMLをJavaScriptで自動生成しています。(src on GitHub)

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>${title}</title> <meta property="og:title" content="${title}"> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:image" content="${img}"> <meta property="og:image" content="${img}"> </head> <body> <script type=module> document.location.href = "${url}"; </script> </body> </html>

ブラウザやサーバーで動くアプリを作るのに便利なプログラミング言語JavaScriptは、IchigoJam BASICなどで基本的なプログラミングを学んだ方にイチオシ言語! Hana道場に通う、IchigoJamでプログラミングに慣れた中学1年生、バリバリ活用してますよ!


地域ICTクラブ オンラインシンポジウム2021 | Peatix
総務省の「地域ICTクラブ」の活動報告へのコメンテーターとして参加しました。 地域のIT力を高めるためにはじめること。もっともっとシンプルにデータをまとめる必要を感じました。

百聞くより一行動。まずはやってみるのがオススメです!

IchigoJam web」を開くか、手元の「IchigoJam」と合わせてご覧ください!

jigインターン2021冬、Dチームの作品「BazUp!!」は、誰でもバズリ体験できるサービス。 画像、タイトル、文章を入れると勝手にバズったように見せてくれ、通知止まらない状態を体験できます!


forked BizUp!! on GitHub
登録後の自動遷移とローカル通知を加えてプルリク、APIサーバーなしに起動するバージョンを試作しました。 ogpを取得してどんなどんなページでも仮想バズして、そのページ自体をシェアできるとおもしろいかも?


使用技術は、Nuxt.jsServer.js。 開発期間は2日間、アイデアから、実装、発表まで、ここまで仕上げて来ているのはすごい!

楽しいチーム開発、学びも多く、オススメです!

2日間のDeno勉強会付きハッカソン型インターン「jigインターン2021冬」では、過去最多の18名参加、5チームの作品ができました。

テーマは「学生xバズる」、快適な学生生活には推し配信者を持つことがいいみたい。YouTubeのプレイリストに目をつけ、共有できるAチームのプロトタイプ「切り抜きまとめサイト(仮)」、 社員投票によう優勝プラン!

切り抜きまとめサイト(仮) - 鯖江バージョン」(src on GitHub)
YouTube Data APIを使って、プレイリストから動画リストを取得して、使いやすく横スクロール表示を使ったスマホ対応で表示してくれます。

ユーザー毎の保存はできないので、ひとまず保存機能が効かない状態でアップしています。サーバーとフロント、それぞれシンプルなJavaScriptでできているので、ぜひ自分の手で動かしてみてください。

YouTube Data APIが、フロントエンドから呼び出されていたものをバックエンド側へもっていくなど、調整してみました。(プルリク


プレゼンもよかった!


2日間、おつかれさま!
どんどん作っていきましょう!


2月最後の金曜日、プレミアムフライデーを勝手に引き継ぐサイバーフライデー in 鯖江商工会議所地下!
勉強会や、ワークショップ、セグウェイを使った移動にも最適!

春のオンラインjigインターンスタート!集まってくれた18名、アイスブレイク&LTの後は勉強会。 サクッとWebアプリづくりの基本を学んで、いざ開発へ!今回のインターン期間は2日間のハッカソンスタイル、楽しくいきましょう!
事前に送った開封厳禁「jigボックス」中身のひとつ、鯖江の銘菓、眼鏡堅パン


下記、順にたどっていくだけで、作れます。(要、コマンドプロンプト or ターミナルの知識)
introweb src on GitHub



Denoをイントール!」




Server.js」で簡単サーバー起動! powered by Servest

$ deno run -A --watch --unstable server.js

更新を確認して、自動リロードしてくれるオプションを使うと更に便利!
Deno の組み込み機能、ソースコードの変更を検知してオートリロードする "File Watcher" の紹介


















さぁ、これでみなさんもwebエンジニア!

2021.2.26(金)18:30- Cyber Friday @ 鯖江商工会議所(E3792198838339) 地下1Fにて!
コンピューター好きな方、ぜひどうぞ!

links
- introweb src on GitHub

無線LANでつないで楽しい、IchigoJamとパソコン。
MixJuiceとパソコン上で作るウェブサーバーをつないでみましょう!

まずはサーバープログラムの準備。JavaScriptでプログラムする環境、Deno(ディーノ)をインストールします。
Windowsの人は、PowerShellを起動して次のコマンドを実行

iwr https://deno.land/x/install/install.ps1 -useb | iex

Macの人は、ターミナルを起動して次のコマンドを実行

curl -fsSL https://deno.land/x/install/install.sh | sh

コマンドプロンプトや、ターミナルで deno とタイプ、エンターで次のような画面がでたらインストール成功!

Deno 1.7.2 exit using ctrl+d or close() >

Ctrl+d で Deno を終了し、ウェブサイドプログラムづくり hello.js (serveWebの中身はservest)
Windowsの人(書き終わったら Ctrl+Z、エンター)

copy con hello.js import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "hello!"; });

Macの人(書き終わったら Ctrl+D、1行目以外は一緒です)

cat > hello.js import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "hello!"; });

動かしましょう

deno run -A hello.js

ブラウザで http://localhost/ を開くと、hello! と表示されるはずです。
Ctrl+C でサーバープログラムを止めて、hello.js の文字列を好きな文字に変更して、また動かして確認しましょう。

次に IchigoJam web を使ったパソコン上での実験です。

「I/O」ボタンを押し「MixJuice」をチェックして、バーチャルMixJuiceをIchigoJam webに接続します。

IchigoJam web上でMixJuiceのコマンドを使って、アクセスしてみます。

?"MJ GET LOCALHOST MJ GET LOCALHOST OK hello!

などと表示されたら成功です。つながりました!

ひとまず、シンプルなサーバーにどんどん書き込めるチャットサービスを作ってみましょう。

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; let data = ""; serveWeb(80, (from, path, query) => { if (query) { data = data + "'" + query + "\r\n"; return "'OK\r\n"; } return data; });

IchigoJamからquery(クエリー)として送られてくる文字列をどんどん足し算して貯め、クエリーなしで全部表示する、というJavaScriptのプログラムです。 なんとなく読めますね?

このサーバーを動かしておき、IchigoJam web から試してみましょう。

?"MJ GET LOCALHOST/?HI! ?"MJ GET LOCALHOST/?HELLO ?"MJ GET LOCALHOST/

クエッションマーク(?)に続く文字列がサーバーでクエリーとして送られます。発言内容、見えましたか?

最後に、実IchigoJam+MixJuiceからつないでみましょう!

インターネットにつながるコンピューターには、IPアドレスが振られます。192.168.や172.で始まる4つの数字、普通の家ではローカルエリアネットワーク(LAN)用のIPアドレスが振られていることが多いです。 まずは自分のパソコンのIPアドレスを確認します。
Windowsの人

ipconfig

Macの人

ifconfig

192や172で始まるIPアドレスらしきものを探してください。

MixJuiceをつないだIchigoJamで、MJ APCを使ってアクセスポイントに接続して、次のようなコマンドで通信!

?"MJ GET 192.168.1.10

つながりましたか?

サーバーで二乗するプログラム

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "" + Math.pow(parseFloat(query), 2); });

サーバーでルートを計算するプログラム

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "" + Math.sqrt(parseFloat(query)); });

そのフォルダを開いちゃうプログラム(コマンド起動)

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { const open = Deno.build.os == "darwin" ? "open" : "start"; Deno.run({ cmd: [open, "."] }); return open; });

どの端末からアクセスがあったか、どういうクエリーか見たいとき

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { console.log(from, path, query); return "ok"; });

IchigoJamからパソコンコントロールし放題。
DenoやJavaScriptを調べて、いろいろ遊んでみましょう!

コンソール(コマンドプロンプトやターミナル)に慣れていない人は、まずはこちらなどを参考に!
コンピューターと深く話そう! Macのターミナル入門とNode.jsでつくるwebサービスはじめのいっぽ

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


山梨県オープンデータ検索」にて、アプリで使いやすい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です。ご自由にお使いください。

前回の雪かき事故を知らせるアプリの通知先は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

Facebookグループ「IchigoJam-FAN」で開催中の「IchigoJamで欲しい機能アンケート」、USBキーボード対応、HDMI出力に次いで3位が小数対応。

一般的に小数の計算は遅くなります。特にIchigoJamで使っているような小さなCPUでは小数計算用の回路もないので、遅くなってしまいます。MSX BASICでは基本変数は小数として扱われ、DEFINTA-Zで整数として宣言することで高速化するテクニックがありました。また小数計算を導入する場合、どのような文法にするかは悩ましい問題。

小数を使った計算をしたくなることは確かにあります。16bitのIchigoJam変数の範囲に収まるようにどう計算式を組み立てるか考えたいときなどに便利です。そこで頼るは、ネットの力。IchigoJamの無線LAN拡張ボード、MixJuiceに対応した小数計算サービスを作りました。(src on GitHub)

?"MJ GETS app.sabae.cc/svrcalc/?2.1+2.2 4.300000000000001

このように結果が返ってきます!四則演算のみに対応しています。

IchigoJam web の I/O → MixJuice オプションでも動きます。

作り方と、微妙な誤差についての解説。

借りているサーバー app.sabae.cc に、式が届いたら結果をテキストで返すプログラムをDeno/JavaScriptで書いて動かしっぱなしにしています。

import { createApp } from "https://servestjs.org/@v1.1.7/mod.ts"; import { calc } from "./calc1.js"; const main = (q) => { return calc(q) + "\r\n"; }; const app = createApp(); app.get(/\/*/, async (req) => { const q = req.url.lastIndexOf("?"); if (q < 0) { return; } const s = req.url.substring(q + 1); const body = main(s); const headers = new Headers({ "Content-Type" : "text/plain", "Access-Control-Allow-Origin": "*", }); await req.respond({ status: 200, headers, body }); }); app.listen({ port: 3001 });

コアになる計算する部分 calc1.js はこういう感じ

const calc = (s) => { const n = s.match(/(\d+(\.\d+)?)([\*|\+|\-|\/])(\d+(\.\d+)?)/); if (!n) { return "err"; } const a = parseFloat(n[1]); const b = parseFloat(n[4]); const op = n[3]; switch (op) { case "*": return a * b; case "+": return a + b; case "-": return a - b; case "/": return a/ b; } return "err"; }; // console.log(calc("0.1+0.2")); export { calc };

正規表現を使って受け取った文字列から数2つと演算子を取り出し、計算結果を返しています。 JavaScriptでの数は、IEEE 754 の倍精度 64ビットバイナリ形式、2進法による浮動小数なので0.1を正確に記録できません。使いたい精度に合わせて適宜丸めましょう。

なぜ、denocalcのように、evalを使わないのでしょう?
ヒントはサイバーセキュリティ。アクセス制限をしていないサービス、悪意を持った人に好き勝手されないよう気をつけましょう。
→ 中高生向けサイバーセキュリティ教育プログラム「CyberSakura

SSL化や、いろんなサービスへと接続するフロントとして、nginxというwebサーバーを使っています。

$ vi /etc/nginx/nginx.conf server { ... location /svrcalc/ { proxy_pass http://localhost:3001/; } $ nginx -s reload $ git clone https://github.com/taisukef/servercalc.git $ cd servecalc $ nohup deno run -A server.js &

試しに「https://app.sabae.cc/svrcalc/?2+2」などとアクセスし、4が返ってきたら成功!

サーバーが自在に使えると楽しいですよ!
時給1円のサーバーくんをプログラミングで自在に操ろう! クラウド入門 ConoHa API編

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