暑い夏でも涼しく開発できるSCCにて、Code for Sabae もくもく会

もくもく作ったもので遊んでもらっている様子。上を常に見ることになる、非日常VRゲーム。


ballfall VR」(src on GitHub)
実寸大のテニスコート(シングルサイズ 奥行き23.77m x 幅8.23m)で、なぜか跳ね回る無数の巨大ボールから避け続けるゲームを作りました。 実際のテニスコートで安全に遊ぶのがオススメです。


カメラ=自分の顔が当たると暗転してゲームオーバー。リトライは、コントローラーのトリガー(またはマウスクリック)。

ライブラリにA-Frameを使ったシンプルなJavaScriptで作った、webアプリ。 遠く離れた場所同士でも楽しくスポーツできるかも?

発表の時間!


かつて開発にも参加したことある「Astah」のプラグイン!


Googleによるスマホアプリ開発環境、Flutterを使ったアプリ開発にチャレンジ。


今年の高専プロコン競技部門予定だった「囲みます」のAIづくり。


CSVから2Dアニメーション生成ツールを使ってみた。


FlutterでMVCモデルよりもいい感じのモデルを探ってみた。


Flutterで、カメラを使ってみた。(複数のカメラを同時に使おうとすると落ちる)


UnityとかHSPによるゲームをつくってみた。


もくもく会とは、もくもくそれぞれ思い思いの何かを作ろうと集まり、最初に宣言、質問や、雑談、おやつを交えつつ、それぞれ何か作って、最後に成果発表する気軽なイベントです。 自宅ではなんとなく気が散ってしまう人でも、きっと大丈夫!

今回はFlutterに偏ってましたが、ノンテーマなので、何を持ち込んでもOKです! もくもくお絵かきする、モデリングする、書道するとかでも問題なし!


NT鯖江2020 - PukiWiki」なにか(N)つくって(T)、発表しよう!
次回開催と、年一の成果発表の場「NT鯖江2020」をお楽しみに!


おやつタイムに西鯖江駅向かいの「めだか」まで散歩。


鯖江名物「やまうに」を使ったやまうにたこやき!


200種類あるという豊富なメニュー!


熊丼!


猪肉うどん、薬味として、やまうに付き!


気になるお店、鯖江に初のボルダリング上、新スポーツスポット「SKI PRO SHOP J1 with Bolder-Works」(map)


中は広々!3日に1コースは増えますよ、とのこと。期間限定、入会金無料!

links
- webをFAX風にするChrome拡張「faxinizer」Code for Sabae もくもく会 at SCC

再びほぼ全国に広がった新型コロナ感染者、新時代を切り開くため、創造活動の重要性は増すばかり。

2019年に初共催した、出展者みんなでつくる手作りイベント、NT鯖江。こちらは会場を鯖江商工会議所の広い会場(1F SCCと4F 大ホール)に移し、密を避けてのリアル展示イベントとしての開催決定!

NT鯖江2020 - PukiWiki
出展者募集開始しました。盆栽、掛け軸、手芸、電子工作、ソフトウェア、お絵かき、彫刻などなど、つくったものぜひご展示ください!(無料です)


オープンデータなものづくりアイドル、Hanaちゃん by Azulily_V、PRなどに活用ください!

さばえものづくり博覧会、2020年は中止ですが、替わりにオープンデータ化と発信サイトをオープンソースで製作し、情報発信力を高め、次年度に備えることになりました。

GitHubにて製作中、コントリビューター大募集!


2019年度の出展者を中心に、鯖江商工会議所メンバーへのオープンデータ化促進、福井県での施設ダッシュボードや、鯖江市長候補比較でも使用している「PUSHかんたんオープンデータ」を活用。


それぞれのデータは、それぞれの会社さんがいつでも自由に編集できます。

より使いやすく、より伝わりやすい情報発信の形を、オープンデータとオープンソースで探っていきます!

改善するにはデータ化を!数値化できなければ、客観的な改善を確認できません。
また、素早く広く活用するためにはオープンデータ。Excelでも作れてプログラムからも扱いやすいCSVオープンデータがオススメです。(参考、高校情報ICSVオープンデータのススメなぜ PDF ではいけないのか

Code for Japan、総務省のマイナンバーカードの普及率PDFをCSV化し公開!
マイナンバーカード普及状況ダッシュボード
カラム地図での表示版、作ってみました。

マイナンバーカード普及状況 with カラム地図
2020年7月1日現在のトップは宮崎県で、24.3%!


マイナンバーカード普及状況 with カラム地図」宮崎県
宮崎県をタップすると、県内の普及状況比較ができます。都城市がダントツ37.9%!


マイナンバーカード普及状況 with カラム地図」福井県
福井県は勝山市がトップ!(表示している中での最小最高をとって色付けしています)
地域によるバラツキの理由を探るのもおもしろそうですね。毎月1日にだいたい更新されるようです。 このアプリは、データ一覧を取得し最新データを表示するように作ってあるので、来月頭にまたぜひチェックしてみてください。


鯖江市地域活性化プランコンテスト | 市長をやりませんか?
13回目となる「市長をやりませんか?」鯖江市地域活性化プランコンテストでは参加学生大募集中! 今年は初のオンライン開催。全国、全世界どこからでも鯖江のプラコンに気軽にチャレンジ可能。

自分のまちと、鯖江、何が違って、何が同じなのか、データとデータだけでは見えないこと、両方活かして未来を創るコンテスト。 高専生の参加も大歓迎!

links
- [BOD供養寺]マイナンバーカード交付率をグラフ表示するサイトを作った - Qiita
- マイナンバーカード総合サイト
- 厚生労働省の方へ、CSVオープンデータ化で効率化しましょう! 新型コロナウイルス国内事例における都道府県別の患者報告数表示アプリ

2020/10/4開票となる鯖江市長選挙、牧野市長が今期での退任を表明し、新人3名が名乗りを上げている。 鯖江市での三つ巴の市長選は65年ぶり。オープンデータを作って、比較サイトをオープンソースで公開した。


鯖江市長候補者比較サイト」(src on GitHub)
それぞれの候補者を知る、基本的なオープンデータを公開情報から揃え、福井県でも活用中の「PUSHかんたんオープンデータ」で公開。 各候補者の人に、編集用のアドレスを送って、本人による訂正はすぐに反映されるはずです。

CSVオープンデータやJSONデータとして取得できるので、webアプリから取得し整形して表示するシンプルなプログラムを作成、オープンソースとしてGitHubで公開。 色やデザインはあえての素のまま、ぜひご自由に改造ください!

2022年から必修化される高校情報I教材レベルなので、そう難しくはありません。 HTML/CSS/JavaScriptを調べながら、いろいろいじってみてください。壊しても何度もリセットできて安心です。


鯖江市長選立候補予定者に聞きたいことアンケート(2020鯖江市長選挙 公開討論会)
JK課からのおばちゃん(OC)課「OCサミット実行委員と有志の会」主催による公開討論会も8/22(土)に予定され、事前質問を募集中。

つくろう、未来!

EBPM(イービーピーエム)、聞いたことありますか?
証拠に基づく政策立案(Evidence-based Policy Making)の略で、2018年の総務省資料がヒットするなど比較的新しい言葉のようです。(何に基づいていたのだろう?)

レジ袋が有料化。ゴミの削減は大事な問題ですが、なぜレジ袋だったのでしょう?

ポリ袋は実はエコなんです。
脱プラ、脱ポリ、紙袋へ切り替えをご検討のお客様へ|1958年創業のポリ袋製造業|清水化学工業
検証してみましょう。証拠として挙げられているデータ「ポリ袋は漂着ごみの重量で0.4%にすぎない」の出典をたどります。


環境省「中央環境審議会循環型社会部会プラスチック資源循環戦略小委員会(第3回) 議事次第・配付資料」の参考資料1「プラスチックを取り巻く国内外の状況<第3回資料集>


P78にありました。2016年、環境省による全国10地点で調査された漂流ごみの調査結果。


補助教材、漂流ごみの分類」(src on GitHub)
PDFからのCSV化は手作業で手間がかかります。テキストデータをテキストエディタにコピーして、タブ区切り化して、Excelに貼り付け、整形、確認、CSVデータとして保存します。 あとは、Chart.jsを使って、円グラフにして完成!

ポリ袋は、ごみ全体からの重量比で0.4%分しかありません。飲料用ペットボトルで7.3%、その他プラボトル類で5.3%あるので、この対策を先に考えた方が良さそうです。 そもそもなぜ捨てるのか・・・。減らないようであれば、ペットボトル税、プラボトル税をかけて、それを財源に対策するのも手なのかも。 また、大きな割合を占める、漁業由来のごみは大きく削減する鍵。

なぜ割合としては小さい「ポリ袋」が選ばれたのか?

根拠としての記述は見つけてられていませんが、P65に下記の記載がありました。

進めていくべき・協力できると思う取組を確認したところ「スーパーのレジ袋有料化」が50%以上と最も高く
確かに福井のスーパーではマイバッグがずいぶん定着してますが、コンビニを含む、あらゆるお店のレジ袋で協力できるかと言えば別かもしれません。 また、上記、ごみ削減に向けた、効果あるという証拠が弱いと知っていたら回答も違ったかもしれません。(* 福井県敦賀市 マイバッグ持参率88%|環境ニュース[国内]|EICネット


P51にプラスチックくずの輸出量の記載があります。日本はプラごみを輸出し、他国に処理を押し付けていることを知ったのはごく最近です。 「財務省貿易統計 Trade Statistics of Japan」からCSVデータをダウンロードし解析することができます(最新データは2020年5月分)。

レジ袋有料化によって、どのような変化がでるか?
未来に向けたKPI、適切に設定し、チェックし、見直し、改善するために知恵を絞って、行動していきましょう!

遂に、厚労省がCSVオープンデータ公開スタート!
オープンデータ|厚生労働省
検査数、患者数、退院数、死亡者数などが、CSVオープンデータとして公開されました。(都道府県別や、病床数はまだの様子)
高校プログラミング「情報I」の範囲で補助教材として使えるように、シンプルにまずは活用例をつくってみました。


補助教材、CSVオープンデータをダウンロードしグラフ化、2軸」(src on GitHub)
早速 Chart.js を使ってグラフ化!2軸にして、検査数と発生数を比較できるようにしました。


補助教材、PCR 検査陽性者数(日別)」(src on GitHub)
まずはシンプルに日別の陽性者数のみ表示からいじり始めるといいです。

<body style="margin:0;text-align:center;"> <canvas id="chart"></canvas> データ出典:<a href=https://www.mhlw.go.jp/stf/covid-19/open-data.html>オープンデータ|厚生労働省</a>(新型コロナウイルス感染症について)<br> <script type="module"> import Chart from "https://code4sabae.github.io/kafumon/lib/Chart.mjs"; import util from "https://taisukef.github.io/util/util.mjs"; const main = async () => { // const url = "https://www.stopcovid19.jp/data/mhlw_go_jp/opendata/covid19.csv"; const url = "https://www.stopcovid19.jp/data/mhlw_go_jp/opendata/pcr_positive_daily.csv"; const json = await util.fetchCSVtoJSON(url); console.log(json); const date = []; const data1 = []; for (const d of json) { date.push(d["日付"]); data1.push(d["PCR 検査陽性者数"]); } const config = { type: "line", data: { labels: date, datasets: [ { data: data1, borderColor: 'rgb(255, 99, 132)', fill: false, lineTension: 0 }, ] }, options: { title: { display: true, text: "COVID-19 日本のPCR検査陽性者数" }, scales: { xAxes: [{ scaleLabel: { display: true, labelString: "日付" } }], yAxes: [{ scaleLabel: { display: true, labelString: "PCR 検査陽性者数" }, ticks: { beginAtZero: true } }], }, legend: { display: false } } }; new Chart.Chart(chart, config); }; main(); </script>


厚労省ページからダイレクトに取得はできないので、GitHub pagesに自動的に上げる形にしています。


BOM付きUTF-8エンコードCSVなのでExcelでもOK!


オープンデータ|厚生労働省」活用しましょう!


新型コロナウイルス関係 CSVオープンデータ|厚生労働省
日付付きのさまざまなデータをひとまとめにしたCSVオープンデータを作成するプログラムも作ってみました。(src on GitHub)

links
- 厚生労働省の方へ、CSVオープンデータ化で効率化しましょう! 新型コロナウイルス国内事例における都道府県別の患者報告数表示アプリ
- 2022年高校「情報I」プログラミング教材JavaScript版へコントリビュート

Code for Sabae主催、もくもく会 at SCC。

ステキテーブルで、もくもく、それぞれ何かをつくります。
時に相談、時に雑談。最初に今日やることを宣言し、終了30分前にミニ発表。


その場で実装、AからZまで早押しゲーム on IchigoDyhook、未就学児の子でもアルファベットとキーボードは親しみやすい!


ブラウザ上で動く、ファミコンゲームがC言語で作れる開発環境「8bitworkshop」で作ったブロック崩しゲーム!


Flutterと機械学習を使って物体認識をさせてみたい(途中)、まだちょっと苦労する様子。


Pythonの課題できた!(おめでとう!)


Discordのボットでソシャゲ支援!


英文を読めるようになるためのChrome拡張をつくってみたい。Chrome拡張、おもしろそう!


「faxinizer」
作ってみました、初Chrome拡張。できることがすごすぎて危険ですw。
以下、2ファイルでOK、超簡単Chrome拡張の作り方。
content.js を作成

document.body.style.filter = "blur(0.2px) grayscale(100%) contrast(10000%)";

manifest.json を作成

{ "name": "faxinizer", "version": "1.0.0", "manifest_version": 2, "description": "web like a fax", "content_scripts": [{ "matches": ["*://*/*"], "js": ["content.js"] }] }

Chromeで「Chrome拡張」を開き、「Load unpacked」で上記作成したフォルダを選択。以上。
以後、開いたページ、すべてがFAX風になります。

自分で作って使う分には超強力ですが、知らない人が作ったChrome拡張を使うのは避けましょう。 (参考、ブラウザ拡張の権限でどこまで(悪いことを)できるのか?とその対策【デモあり】 - Qiita


大きな明るいプロジェクター、あります!(有償レンタル可)


カフェコーナーではスムージーや、コーヒー。近くに自販機もあり。
こちらランチで食べたスープオムライス with Oculus Quest、AmabieDakeと、IchigoJamのCPUより2560倍速い京のコンピューター(88,128万分の1)


鯖江、鯖江商工会議所1FのSCC、11時〜20時まで、ふらっとお立ち寄りください。次回のもくもく会は8/8(土)と決定!

COVID-19 Japanのデータを使ってもらっている「防災INSIGHT」開発者の仁志さんより情報いただき、「暑さ指数(WBGT)予測値等 電子情報提供サービス」を使った、暑さ予測ランキングアプリを作成しました。

暑さ予測ランキング - 環境省WBGTオープンデータ」(src on GitHub)
日本各地840箇所の温度と湿度を加味した暑さ指数予測をランキング表示。沖縄、鹿児島が暑いですが、ちょくちょく本州も上位にいます。


環境省熱中症予防情報サイト グラフ-今日 福井(福井)
環境省では場所ごとに見られるサイトがあります。外に出る予定と合わせてチェックできたり、危険な時にアラートしてくれると便利そうです。


単位は「℃」の暑さ指数(WBGT = 湿球黒球温度)、70位くらいまでいくと、ほぼ安全な21℃未満が表れます。


環境省によるAPI「環境省熱中症予防情報サイト 暑さ指数 電子情報提供サービス」があるので、こちらをwebアプリから手軽に使えるようにCSV/JSONオープンデータに変換しました。 地味に手間がかかったのは、PDFでのみ紹介されていた、エリアデータもCSV/JSON化。やはり、すべてCSVオープンデータがうれしいです。

links
- テレビ局もうれしいCSVオープンデータ、法令CSVを使ったオープンソース「法令探しアプリ」 福井テレビ「タイムリーふくい」出演
- ダッシュボードとCSVオープンデータで推進しよう! 日本の法律8475コのCSV - 東京オープンデータデイ2020オンライン

第31回高専プロコンの競技部門の予定だった競技を「囲みます」と名付けて、ロゴ完成!前回に引き続き、オンラインで集まり開発進めるハックデー。

今日の5名2グループ、1時間1スプリントでの進捗は、APIサーバーがDenoで2人体制で進み、クライアントのフィールド表示の初期段階ができて、FigmaのデザインからHTMLへ起こす目処がなんとなく立つまで。 短時間の割にはまずまず?

今日の参加者 -1 (残念ながら、寮の回線状況悪かった、さよ)

囲みますプロジェクトは Code for KOSEN に移管!
codeforkosen/Kakomimasu: #procon31 競技部門 コアモジュール for Deno/Node.js
Code for KOSEN チームで作っていきます。


側面支援、C言語でJSONでやりとりする apiserver に接続するプログラムができました!

HTTP POSTを実現する post.h は、コマンド curl を popen を使って起動し、返ってきた文字列を返します。

#include <stdio.h> #define MAX_LEN_REQ (1 * 1024 * 1024) // 1Mbyte int post(const char* host, const char* path, const char* json, char* buf, int lenbuf) { char cmd[MAX_LEN_REQ]; sprintf(cmd, "curl -s -H 'Authorization: token1' -X POST %s%s -d '%s'", host, path, json); printf("[post req]\n%s\n\n", cmd); // char* cmd = "curl -s -H 'Authorization: token1' -X POST http://localhost:8880/action -d '{\"actions\":[{\"agentID\": 2, \"dx\": 1, \"dy\": 1, \"type\": \"move\"}, {\"agentID\": 3, \"dx\": 1, \"dy\": 1, \"type\": \"move\"}]}'"; // for test FILE* fp = popen(cmd, "r"); if (!fp) { fprintf(stderr, "can't popen\n"); return 1; } fgets(buf, lenbuf, fp); if (!feof(fp)) { fprintf(stderr, "too long json, check MAX_LEN_JSON\n"); return 1; } printf("[post res]\n%s\n\n", buf); pclose(fp); return 0; }

post.h を使って、受け取った文字列を、sscanf でパースし、AIロジックで使いましょう! scanfでパースしやすく、tokenなどの文字数は固定で決めておくと良さそう。 (src on GitHub)

#include <stdio.h> #include "post.h" #define MAX_LEN_JSON (1 * 1024 * 1024) // 1Mbyte #define LEN_TOKEN 6 // TOKENの長さは固定 int action_test(const char* host) { char buf[MAX_LEN_JSON]; if (post(host, "/action", "{\"actions\":[{\"agentID\": 2, \"dx\": 1, \"dy\": 1, \"type\": \"move\"}, {\"agentID\": 3, \"dx\": 1, \"dy\": 1, \"type\": \"move\"}]}", buf, MAX_LEN_JSON)) { printf("post error!\n"); return 1; } char token[LEN_TOKEN + 1]; int nActions; int res = sscanf(buf, "{\"yourToken\":\"%6s\",\"yourPath\":\"/action\",\"nActions\":%d}", token, &nActions); // 6 == LEN_TOKEN if (!res) { printf("parse error!\n"); return 1; } printf("[parsed]\n"); printf("token (%d chars): %s\n", LEN_TOKEN, token); printf("nActions: %d\n", nActions); return 0; } int main(int argc, char** argv) { const char* host = "http://localhost:8880"; return action_test(host); }

Code for KOSEN」のwebサイトも手を入れ、参加者募集も追加!

競技プロコン、ウェブサイト、その他高専に関する何かプロジェクトなどなど。
我こそはという高専生の参加、お待ちしてます!

公共団体コードと丁目レベルのジオコーディングモジュールを使って、IMIコンポーネントツールの目玉、住所変換モジュールをESモジュール化しています。 内部構造をガラッと変えて、必要なデータのみを適宜ダウンロードするブラウザ上でも動作する軽量なESモジュールとして使えるようになりました!

IMIコンポーネントツール ESモジュール版」住所変換コンポーネントのβ版追加!
現在は、都道府県名からの住所表記に対応、緯度経度は丁目レベルまでなのはオリジナルと同様です。番地、号にも対応してほしいところですね。

使用は簡単!Denoで下記、実行するだけでOKです!

import IMIEnrichmentAddress from "https://code4sabae.github.io/imi-enrichment-address-es/IMIEnrichmentAddress.mjs"; console.log(await IMIEnrichmentAddress("福井県鯖江市新横江2-3-4"));

ネットアクセスするので --allow-net または -A 付きで、エラーがでた場合 geocode.mjs をアップデートするために -r も一度付けてください。

$ deno run -A -r main.mjs Download https://code4sabae.github.io/imi-enrichment-address-es/IMIEnrichmentAddress.mjs Download https://code4sabae.github.io/imi-enrichment-address-es/lib/find.mjs Download https://code4sabae.github.io/imi-enrichment-address-es/lib/bangou.mjs Download https://code4sabae.github.io/imi-enrichment-address-es/lib/util.mjs Download https://code4sabae.github.io/lgcode/lgcode.mjs Download https://code4sabae.github.io/geocode/geocode.mjs Download https://code4sabae.github.io/lgcode/lgcodemap.mjs [ { @context: "https://imi.go.jp/ns/core/context.jsonld", @type: "場所型", 住所: { @type: "住所型", 表記: "福井県鯖江市新横江2-3-4", 都道府県: "福井県", 都道府県コード: "http://data.e-stat.go.jp/lod/sac/C18000", 市区町村: "鯖江市", 市区町村コード: "http://data.e-stat.go.jp/lod/sac/C18207", 町名: "新横江", 丁目: "2", 番地: "3", 号: "4" }, 地理座標: { @type: "座標型", 緯度: "35.941043", 経度: "136.199640" } } ]

緯度経度、使えます!


住所変換コンポーネント (ES module ver.) on GitHub
データを扱う、公共団体コードや、ジオコードは別モジュールで管理しているので、住所の正規化に特化できたのでJavaScriptのプログラムとしては、下記4ファイルのみとシンプル!

IMIEnrichmentAddress.mjs メイン、文字列やJSON-LDを入力として、find.mjsを使って変換
lib/find.mjs - 住所表記を分解し、緯度経度を付加するコード、find.jsを大幅改定
lib/bangou.mjs - bangou.jsをESモジュール化、漢数字などの番地と号を正規化する
lib/util.mjs - util.js をESモジュール化、漢数字との変換などの便利関数群

施設や、店舗の住所からの変換など、web上の様々な住所表記に対応できるよう、使いながら育てていきたいと思います。 一緒に使ってみる方、バグや要望を送ってくれる方、精度アップのプログラムを書く方、大募集!
imi-enrichement-address src on GitHub by Code for Sabae

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