CC0にしたGeo3x3、より使ってもらえるためには、いろいろなプログラミングへのサポートが大事かも? サポート言語を一気に14言語まで増やしました!

JavaScript / TypeScript / C / C++ / C# / Swift / Java / Python / Ruby / PHP/ Go / Kotlin / Dart / Rust で、使えます!
それぞれの言語の学習サンプルとしてもご活用ください。


Geo3x3 - src on GitHub


CyberValley サイバーバレー は、E379219
2.26金曜日18:30-、サイバーフライデーとして、鯖江商工会議所 SCC B1Fでミートアップ
コンピューター好きのみなさん、ぜひどうぞ!

えぞプロコンの運営メンバーとして活躍した学生、高専生。 地域の課題、プログラミングで楽しく解決していきましょう!

プログラミング学習とは、問題解決の連続。仲間と一緒にチャレンジすればより楽しいかも?インターネット時代、どんな場所でもつながっています。 後輩からの質問、大歓迎。IchigoJam BASICの次にオススメ、JavaScriptでのオンラインメンタリングを始めます!


若きエンジニア、Code for Hakodate/PCN函館メンバーとオープンデータ伝道師で「VS COVID19」のデザインを担当、行政アーティストの山形さんのいる、北海道森町へ!


森町からの帰路で発見、不思議なお店、ラッキーピエロは函館ならでは!


函館、MIRAIベースにて、Dvorakをはじめた高専生へ、ミニJavaScript講座!
JavaScriptはじめのいっぽ


learnglobish
タイピングといえばで思い出した、Globishの1500単語CSVデータ化して、プログラムを少し修正。


Type 100 words Globish」(src on GitHub)
福井高専後輩takerucamのコードをGitHub上で添削改造。 シンプルでやさしいオルト英語、Globish 1500単語から100単語を早打ちするゲームにしました。

なんとか2分切ろうとチャレンジするも及ばず・・・ 表示後の反応速度と、ミスなく流れるように打てる単語数をいかに増やすかがタイム短縮のコツです。 英語の勉強にもなるので、毎日数分チャレンジするのもいいかも!?

await/async(アウェイト / エイシンク)を使うと、手続き通りにプログラムが並び、すっきりシンプル分かりやすい!(元のイベントドリブンで記述されたプログラムと比べてみよう)

window.onload = async () => { for (;;) { target.textContent = "Click to Start!" const t = new Timer(timer); const words = ['red', 'blue', 'yellow']; await waitClickOrEnter(target); shuffle(words); t.start(); for (let i = 0; i < words.length; i++) { const word = words[i]; target.textContent = word; for (let j = 0; j < word.length; j++) { while (word[j] != await waitKeyDown()); target.textContent = '_'.repeat(j + 1) + word.substring(j + 1); } } t.stop(); result.textContent = "Congratulations!!"; restart.textContent = "もう一度挑戦する"; await waitClickOrEnter(restart); result.textContent = ""; restart.textContent = ""; } };

これにシンプルに話す英語、Globishの1500単語を CSV.js を使って、読み込んでつくりました。


ロボットとIchigoJamのプログラミングづくりに通う小学生!高専生、大学生に刺激を受けて、ぐんぐん伸びることでしょう!
えぞプロコンでのネットワークプログラミング」もどうぞ!

PCNで仲間を集めて、Code for で身近ないろいろ創って地域から域広めよう!


黄色の消火栓がかわいい。福井と同じ雪国、消火栓オープンデータを使ったアプリ活躍候補エリア。


ラッキーピエロ、MIRAIベースの近くにも!ご当地オープンデータ、楽しめますよ!

このJavaScriptのコード見てほしいという方、ご連絡ください! → @taisukef

2012年から9回目を数えるオープンデータ勝手表彰「Open Data Award 2020」の受賞作品が発表されました。
2020年度のオープンデータ・ビッグデータに関する優れた取り組みの表彰 - ニュース | 一般社団法人オープン&ビッグデータ活用・地方創生推進機構

コロナ対策で活躍したオープンデータ、多くのエンジニアにシビックテックを広めた東京都の「東京都新型コロナウイルス感染症対策サイト」が最優秀賞! プログラムのオープンデータを扱う「GitHub(マイクロソフトが2018年に買収)」が目立った2020年度です。 また、データの美しさへの見直しも大きく進みました。CSVでいきましょう!


VLEDのオープンデータ勝手表彰受賞者
Bootstrapを使ってちょっとキレイにし、2020年度2012年度など、年度にしぼって表示する機能も付けてみました。

SJIS.js、CSV.js を整備したので、CSVファイルであればどんどんオープンデータ化してもらってOKですが、いろんな環境で開いてもらいやすい形式は「BOM付きUTF-8のCSVファイル」です。 ExcelでUTF-8 CSVで出力すれば自動的にそうなりますが、GoogleスプレッドシートのCSV出力ではBOMが付いていないため、Excelで開くときに文字化けします。


SJISやBOM無しUTF-8のCSVファイルをBOM付きUTF-8 CSVへと変換するツール」(src on GitHub)
そこで作ったツールがこちら。CSVファイルをドロップすると、BOM付きUTF-8のCSVファイルとなって返ってきます。ダウンロードと出ますが、一切サーバーへの送信はしていません。 その安全性は、オープンソースなので自分でご確認いただけます。


COVID-19 Japan 新型コロナウイルス対策ダッシュボード
ありがとうございます、こちらも貢献賞いただきました!データ上、第三波は収束方向へと向かっているように見えますが、逼迫した地域では引き続き注意が必要です。

政府提供オープンデータ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を作ったほうがいいかもしれません。

2020年も最終日。今年も一日一創、完走です。
年に一度の振り返り、アクセスランキングで1年を振り返ります。

15位 1,470PV 日本政府広報に登場、国産PC、IchigoJam! Z80マシン語が使えるIchigoJam試作
国の広報掲載、うれしいですね!国産PCこどもパソコンIchigoJam、がんばりますっ

14位 1,592PV 厚生労働省CSVオープンデータ開始!CSVをグラフ化する高校プログラミング向け補助教材
ブログで対応をお願いしたからかも?高校でもプログラミング、2022年から必修化です。きれいなデータを用意しておきたいですね。

13位 1,645PV HTML内にMarkdown記法を混ぜて使うシンプルな方法
意外な人気なMarkdownの埋め込み方法。福井の中学生からの要望に応えた記事。

12位 1,922PV 病床使用率をモニタリング!福井で初の感染者、感染症病床数は48、みんなで打ち勝つ新型コロナ、Let's Code for 地元!
新型コロナウイルス対策ダッシュボードの着想は、福井県からの発表でした。

11位 2,302PV 今年10月、65年ぶり三つ巴の鯖江市長選! オープンデータで作ろう候補者比較サイト
今年、鯖江市新市長が誕生!

10位 2,382PV 東京都カラム地図で患者発生場所を可視化、一次情報を活用するツール「オープンデータ」の作り方と育て方
カラム地図、大活躍でした。

9位 2,416PV 福井県、新型コロナウイルス感染症オープンデータを公開、福井県市町別状況を即時反映可能に
オープンデータが大いに活躍

8位 2,468PV 新型コロナウイルス対策感染症病床数データをダッシュボードアプリに反映、Raw Data Now! #js
病床数の逼迫を防ぎましょう!

7位 2,518PV 学校に激震!? 昭和の「一斉授業」から令和の「個別最適化された学び」へ! すべてのこどもたちに世界とイノベーションへの入口を、GIGAスクール構想とは?その実現に近いまちは?
GIGAスクール構想、コロナによって一層重要性増しました

6位 3,055PV 比べてみよう、RISC-VとArm、RISC-V対応かんたんマシン語「asm15r」
注目のRISC-V、IchigoJam Rもお楽しみに!

5位 4,717PV COVID-19 Japan 新型コロナウイルス対策ダッシュボード、東京都内累計患者数表示追加、CSV/JSONデータ提供中
ダッシュボードで集めたデータの二次利用も増えています!

4位 4,892PV 地域ごとの防衛ライン?厚生労働省の感染症病床数データを3つ星オープンデータ化(HTML→JSON スクレイピング by Node.js / cheerio)
病床数データが厚生労働省から安定的に公開してもらえるようになったのは大きい!できればCSVで!

3位 5,738PV DAISOの300円無線マウスを改造して、ワイヤレスかんたん入力マシンが創れる!? → 不推奨です
技適製品には注意です

2位 10,934PV 厚生労働省提供の新型コロナウイルス陽性患者数PDFデータをJSON-API化しました
CSVオープンデータで行きましょう!

1位 29,757PV 自治体・医療機関の方、新型コロナウイルス対策感染症病床数の一次情報の公開おねがいします → アプリ化します! #js
新型コロナウイルス対策ダッシュボードからのリンクで最多アクセスとなりました。


一日一創一覧
全3068記事、CSVオープンデータ化して、検索アプリにしました。

GitHubが活躍した1年でした。経済産業省も全角半角や法人番号などのモジュール「IMI Tool Project 」としてGitHub公開。そのたぶん第二弾「Digital Service Playbook」をハックします。


経済産業省 Digital Service Playbook 参照リンク一覧
本文章作成に参考にされたリンクを抽出し、CSVオープンデータ化、検索できるアプリとしました。


経済産業省 Digital Service Playbook 0.9.0
経済産業省DX室のメンバーによる、デジタルサービスを生み出すうえで大事にしていることが詰まったドキュメント。


meti-dx-team/METI-Digital-Service-Playbook
まずは、GitHub公開というオープンな第一歩がうれしい! 次はより使いやすく。PDFからMarkdownなど、オープンデータ同様、レベルを上げていきましょう。 章別データとして分かれていると、プルリクなどの修正もしやすく、いろいろ活用の幅が広がります。

links
- 福井県長期ビジョン オープンデータ | vision on GitHub

鯖江市のステキなところのひとつ、提案型市民主役事業。市民が継続に向けて動いた結果、令和3年度版の募集が開始されました!
令和3年度実施予定提案型市民主役事業提案募集開始 – めがねのまちさばえ 鯖江市

早速、CSVオープンデータ化して、検索アプリ作成!目的と予算上限が設定されています。みなさんならどんな事業を提案しますか?

鯖江市 提案型市民主役事業 令和3年度


ITのまち鯖江推進事業 - 鯖江市 提案型市民主役事業
地域情報化アドバイザー検索アプリ」を元に、事業毎に固有URLを設定する形にしました。過去からのデータ、蓄積していきたいですね!

すみません、デザインはいい加減です。求むCSS修正!(オープンソース on GitHub)
GitHubの使い方は「33ステップで解説、GitHubオープンソース貢献入門、IchigoJamプリントをつくってみよう!「もじのしょうたい CHR$/ASC」とはじめてのプルリク」を参考にどうぞ!

オンライン開催された「オープンデータシンポジウム2020 オープンデータ伝道師大集合」の新型コロナとオープンデータセッションに参加。より使いやすいデータがあれば、こどもからシニアの方までみんなで使えて楽しくなりますね!

オープンデータ伝道師は、自動的に地域情報化アドバイザーにもなる仕組み。地域情報化アドバイザーとは、総務省による日本全国隅々まで情報活用できるように、専門家を国の予算で派遣する制度。予算に限りがあるので、早いもの勝ちです!今年度は、原則オンラインでの支援となって、お互いより手軽になっています。(総務省|ICT利活用の促進|地域情報化アドバイザー派遣制度(ICT人材派遣制度)

207人登録されている地域情報化アドバイザー、その一覧がオープンデータになっているので、早速活用して、地域情報化に貢献したいと思います。「■地域情報化アドバイザー一覧 2020年度 | APPLIC(一般財団法人 全国地域情報化推進協会)」に情報は掲載されていますが、一人ずつPDFになっているので、検索しづらい状況でしたが、オープンデータによってこの通り!

総務省 地域情報化アドバイザー一覧 2020」(src on GitHub)
ただこの実現が一筋縄ではいかなかったので、使いやすいオープンデータづくりの参考にしていただけるよう、ここにまとめます。

オープンデータ改善点15

1. 「地域情報化アドバイザー一覧 - DATA GO JP」へのリンクを増やしましょう。地域情報化アドバイザー一覧へのリンクはありますが、逆がありません。総務省からのリンクもぜひ。

2. オープンなフォーマット、CSVオープンデータにしましょう。UTF-8 CSVデータなら、Excelで普通に開くこともできます。作り方はかんたん、名前をつけて保存「UTF-8 CSV」を選択するだけです。

3. 先頭行は項目名としましょう。タイトルや空行は不要です。データに関する情報(メタデータ)は、リンク元に記述しておきましょう。

4. 項目は1行で収めましょう。1行はみだしていた項目を中にいれました。

5. 項目名内での改行は避けましょう。

6. 項目名は何かつけましょう。仮に「ID」と振りました。ただ、五十音順に並んでいるので、今後、増減があったときにIDが変わってしまいそうです。登録日欄を設けて、登録順に下に足していきIDを増加させていくか、各地域情報科アドバイザーのマイナンバーを記載しておくのもいいでしょう。(あれ?

7. IDの重複は避けましょう。アプリで何か挙動が変だと思ったら、「064」が2つありました。明らかなミスだったので「063」と修正しています。

8. 姓名の区切りは統一しましょう。名字と名前、区切りなし、半角スペース区切り、タブ区切り、全角スペース区切り、中黒区切りなどが、混在していました。すべて半角スペース区切りへと正規化しました。

9. データの前後の空白は避けましょう。名寄する際など、トラブルの元です。

10. データ後ろの空データ行は削除しておきましょう。CSVデータにしたとき、行数が無駄に多くなってしまいます。macOSであれば、ファインダーにてCSVデータを選択し、スペースを押してみえるプレビューで確認できます。

11. 殻の項目名と空データは削除しておきましょう。ただ、あってもそんなに問題はないです。項目の追加はプログラムによる自動化に障害となる���とは少ないので、有用なデータ項目はどんどん追加しましょう。

12. データ内でスペースによる調整は避けましょう。

13. ファイル名はわかりやすくつけましょう。「01_ad_opendata.csv」という名前ではデータ内容が想像できません。正規化後の「ictadvisors_2020.csv」としました。

14. 顔写真URLの項目がほしいです。元データと同様のデータ量で公開しましょう。せっかくオープンデータがあっても、元サイト以上に使い勝手をよくできないと活用範囲が限定されてしまいます。(民間オープンデータであれば、戦略としてありです)

15. 対応可能分野の項目がほしいです。サイトにはありますが、プロフィールやオープンデータに掲載されていません。207名の地域情報化アドバイザーを効率よく探す重要な情報なので、ぜひ追記いただきたいです。

14、15以外は、対応して、CSVオープンデータとしてGitHubで公開し、簡単な検索アプリを作って公開しました。今回は静的ページも生成し、検索エンジンからの流入も狙っています。結果はまたしばらく運用してレポートしたいと思います。
総務省 地域情報化アドバイザー一覧 2020」(src on GitHub)


オープンデータ伝道師、大集合!
自治体の方、地域情報化アドバイザー制度のご利用、ご検討ください!

「オープンデータシンポジウム2020 オープンデータ伝道師大集合」
YouTubeでの録画、どなたでもご覧いただけます!

鯖江市でも始まった人口減少、現状維持が衰退を意味します。
加えてのコロナ、スマートな取捨選択が重要です。

鯖江市では、行政が手掛ける事業を市民からの提案を公募し、採択し、委託するシクミ「提案型市民主役事業」が機能していましたが、令和3年度への提案は延期。 2011年度から10年間続いてきた市民主役の炎を絶やすまいと、市民が立ち上がり「市民主役化事業提案書(PDF」の受付が始まっています。熱い!

市民主役化事業提案書 - さばえNPOサポート

今年度の事業を振り返るために、市民主役事業の令和2年度事業一覧をCSVオープンデータとしました。元データがPDFなので、詳細の文書までの変換は断念。CSVオープンデータが欲しいです。

提案型市民主役事業 令和2年度実施分
事業名、事業費、コロナの影響をまとめたCSVオープンデータをつくって、csv-viewerタグとした拡張するJavaScriptモジュールを作成。 CSVデータがあれば、簡単に表敬式で表示、並び替え、フィルタリングできます。
使用例)

<script type="module" src="https://code4sabae.github.io/js/csv-viewer.js"></script> <csv-viewer src="civicpower2020.csv" name="提案型市民主役事業 令和2年度 CSVオープンデータ"></csv-viewer>


例えば、コロナ影響で並び替えると中止事業が一覧ですぐに分かります。これらの事業、来年度も止めたままで大丈夫?どう変えるといいでしょう?まずはひとりひとりが考えること。考えるためのデータを提供すること。


CSVオープンデータはExcelですぐに開けます。そのままグラフ化するのも自由自在。作成したグラフをぜひブログやSNSで発信しましょう。プログラミングを知らなくてもできるIT活用も無数にあります。


グラフ - Googleスプレッドシート
Excelを持っていなくても現代は無料のサービスもまた無数にあります。有名なところでGoogleスプレッドシート。Excelのデータも読み書きでき、グラフ化もこの通り、簡単、必要な人と共有しMTGしながら作るのも便利です!使える武器、どんどん増やしていきましょう。プログラミングの理解は、コンピューターの理解の近道!


募集中!提案型市民主役事業。市民主役のまち鯖江、継続に向けて。 | きらきら星のつぶやき☆鯖江モデルを全国へ

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