テーブル状のデータを気軽に編集したり、オープンデータにできたらうれしいですね。

気軽なオープンデータプラットフォーム「PUSHかんたんオープンデータ」でデータ種としてinput-tableタグに対応するtableを追加し、CSVファイルを気軽にオープンデータにできるようにしました。

PUSH かんたんオープンデータ
input-tableタグをCSVファイルのドロップによる更新に対応したので、手元のCSVファイルを簡単にオープンデータにでき、その後の編集はブラウザ上で簡単にできます。 ひとまずデータ容量は1Mbyteまでにしています(input-tableタグのmaxlength)

input-tableタグ、なかなか幅広く使えていい感じです!
(input-table HTMLElement src on GitHub / Code for FUKUI)

福井新聞企画、鯖江商工会議所DX委員長、そして、オープンデータ伝道師として講演。今までできなかったものがまるで魔法のようにできるようになるのがテクノロジー。楽しく使いこなしましょう!

簡単で楽しく始める、はじめのいっぽ。本やウェブを見ながら、こどもと一緒に越前がにロボコンにチャレンジ、Code for FUKUIでのみんなで創るのもおすすめです。 気になった方、サイバーフライデーへぜひ足をお運びください。毎月最終金曜日、鯖江商工会議所SCCの地下1F、18:30より開催!


世界で初めてIchigoJamを学校で採り入れてくれた、吉村元校長先生にばったり会いました!


福井新聞2Fに活版印刷の展示がありました。毎日全ページ、一文字一文字並べていた時代!


福井新聞の配信スタジオ、ご案内いただきました!活版印刷で始まった情報革命、ついに誰でも動画配信できるまで気軽になりました。 うちのサービス、ふわっちへの配信にも使えます!


リモート操作できる3カメ体制での生放送や、動画作りが小学生でもできちゃうとのこと。グリーンバックは福井高専の先輩、シアターハウス製!


福井インスタ部さんブースにて、DJI FPVの実機! アクロバティックな飛行ができる難易度高いマニュアルモード、さっとオートに切り替えればそのばで即ホバリングするので、意外と簡単とのこと。東尋坊でダイナミックな映像とか撮れるといいかもと思いつつ、まずはシミュレーターで練習かな。


ちっちゃいドローンにフルHDカメラを付けての動画撮影、おもしろい絵が撮れますよね。


マイクロドローンのFPVを見せてもらいましたが、アナログ画質、思ったよりキレイ!もちろん、DJI FPVはデジタル伝送なので視野角広くもっとキレイですが、応答性はまだアナログに分がある様子。


2020年創業、大野市出身者による大野の企業、株式会社Better WEBさん!


Better WEBさんに大野城オープンデータを紹介した、VRふくいの元データ、360度カメラや、ドローンで撮った写真はこんな感じに引き伸ばされたJPGファイルになっています。


vr-viewersrc on GitHub
どんどん増えるコードフォープロジェクト。Code for FUKUI、手元の360度写真をドロップするとぐるぐる見渡せるツールを作成。


トップテクノ上空 - VRふくい
こちらは鯖江商工会議所DX委員会メンバーのトップテクノさん協力により、VRふくいプロジェクトのオープンデータとしているので、どなたでもぐりぐり動かして見ることができます。 Oculus Questなどお持ちであればVR体験もオススメです。

ドロップしたファイルはサーバーには一切送信しない形で作っていますが、使っているライブラリや、ブラウザ拡張によってはどこかに送信されるかもしれません。 ソフトウェアの原理と信頼、サイバーセキュリティの基礎も身につけたいですね。中高生向けのサイバーセキュリティコンテスト「CyberSakura」も盛り上げましょう!


Code for FUKUIのロゴにもなっているフクイラプトル、こちら等身大、越前和紙製!

おもしろい人、いますね、福井。

勝山市、中学生自身が開発する校内SNSによる学校DX by PCN勝山片瀬クラブ!
校内版SNS 中学生開発へ 勝山南部 つぶやき、画像 瞬時に閲覧:日刊県民福井Web
URLインポートでESモジュールを使っていので、JavaScript / Denoですね!

IchigoJamでプログラミングの基本が分かったら、JavaScriptで遊ぶのがオススメです。ゲームやツールづくりからAI、画像処理、音声、動画まで、幅広く楽しめます。

IchigoJamで扱える記憶容量はせいぜい100KB、現代のPCのHDDはTB単位なので、ざっと1000万倍もの巨大容量が自由自在!?

とはいえ、メインメモリはGB単位なので、1GBのファイルでさえExcelで開けません。そんなときはプログラミング!行単位で分割された大容量ファイルを扱うライブラリ「line-rw」を作り、CSVReader/CSVWriterを提供する「csv-rw」と、NDJSONに行単位アクセスを追加しました。


line-rw
readLine、writeLineと行単位でアクセスします。非同期関数なので、読み込み終了を待ってほしいときは await 付きで呼び出しましょう。 読み込みバッファを超えて改行を探すところで一工夫していますが、もうちょっと改善の余地があります。


csv-rw
上記 LineReader / LineWriterをそれぞれ使ったCSVReader / CSVWriterです。 CSVはダブルクォートを使って改行付きのデータを入れられるので、1行読んで途中なら更にもう1行読む感じで1レコード取得しています。


NDJSON
ワクチン接種数オープンデータで使われているNDJSONもLineReaderで真価を発揮! CSVと比べて容量は大きくなりがちですが、1行目を読む必要がなく項目が変化しても大丈夫な柔軟なデータ形式です。

ESモジュールなので、インポートすれば即使えます。 関数を足したい、更に効率を上げたいなどの場合にも、GitHubからcloneして改造できるオープンソース。 それぞれ試しに動かせる example、deno test -A でチェックできる、test ディレクトリを付けています。

・・・改行コードの問題を忘れていました。Windowsで要確認です。
そろそろ改行はLF(=10)のみ統一したい。

鯖江の来週末、7/24(土)は第2回、さばぷら開催!
固定URLでJSONを返すAPI「data.json」を作ってくれたので、さばぷらマップをリアルタイム更新化しました。

さばぷらマップ」(src on GitHub)
空から視点のぐるぐる回る地図は、オープンソース「Adopt Geodata」プロジェクトを活用しています。 APIで取得したJSONを使って、柔軟にデータ構築できるように「地図語り」をバージョンアップ!(参考、custom.html

画面録画ツール「screen-recoder」を画面サイズ指定とカーソルON/OFFオプションを追加するバージョンアップ。より気軽に共有できるようになりました

画面録画ツール screen-recorder」(src on GitHub

楽しい時計作り、2012年にスタートした一日一創でも時間にまつわる色々作りました。
一日一創2012 #time
中でもお気に入りだったのが、SVGライブラリD3.jsを使った、ふわふわする円の中を時針分針秒針の円が動く「やわらか時計」です。 ただ、かつて読み込んでいたライブラリのURLが変わってしまったかで動かなくなっていたので最新ライブラリでメンテナンス。

softime」↑は動画で、今を表していないので注意
滑らかでいい動きですね。D3.js、いろいろ使いこなせると楽しそうです。


時計部分をクリックすると黒背景の全画面(フルスクリーン)になるおまけ付きです。 高フレームレートなディスプレイでの展示に使うとインパクトあるかもしれません。

links
- D3.js で作った「やらわか時計」D3再入門(2017年にもリニューアル)

日本政府のデータカタログサイト「DATA GO JP」には、現在27,526のデータセット。

CKANの構造では、データセット内に複数のリソース。CKAN APIを使って、実際のリソース数を数えてみたところ、348,243コありました。

chart-pie demosrc on GitHub
リソースに記載されているデータフォーマットのナンバーワンは、36.4%を占めるExcel(XLS)! XLSXは別にあるので、古いExcelということでしょうか。

続いて、ページそのままオープンデータにするHTML(28.5%)、PDF(19,2%)、扱いやすい3つ星以上のオープンデータCSVは8.1%と4位。 フォーマット全件は data_go_jp_format.csv をご参照ください。

CSVデータでもデータ項目がURLで他のデータと連携できるたら4つ星オープンデータ、標準化された語彙を使っていれば5つ星オープンデータです。 全28,057件の調査や、解析もおもしろそうです。

ESモジュールに対応していた、SVGを使ったグラフィックライブラリ「D3.js」を使って円グラフタグをHTMLElementで作成。 <script type="module" src="./chart-pie.js"></script> <chart-pie style="height:400px;width:600px;"> name,count 農林水産業,96777 行財政,47496 司法・安全・環境,44875 企業・家計・経済,28641 教育・文化・スポーツ・生活,28012 情報通信・科学技術,20507 人口・世帯,19872 住宅・土地・建設,12329 社会保障・衛生,9975 労働・賃金,9638 エネルギー・水,7369 国土・気象,6442 国際,5767 鉱工業,4470 商業・サービス業,2690 その他,2138 運輸・観光,1245 </chart-pie> こんな感じでHTMLを書くだけすぐに円グラフで表現できるようになりました。
chart-pie tag - src on GitHub

Code for FUKUIの初勉強会「GitHubはじめのいっぽ」


今回の会場は、越前市、中学生、高先生から社会人まで幅広く、11名で学びました。


GitHubはじめのいっぽ
スライドもオープンデータとして公開!題材として地域安全マップを使いましたが、ちょっとややこしかったので、もっとシンプルなものに更新。


マップアプリの元 - かんたんマップアプリ」(src on GitHub)
HTML1ファイルのみ、CSV形式でデータを加えると、マップとして反映するアプリです。 <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <script type="module" src="https://code4fukui.github.io/csv-map/csv-map.js"></script> <title>テストマップ</title> </head><body> <h1>テストマップ</h1> <csv-map> 名前,URL,geo3x3,photo ヨコガワ分店,https://volga-rice.jimdofree.com/,,volga-yokogawa.jpg サンドーム福井,http://www.sankan.jp/sundome/,E9138732236 福井高専,https://www.fukui-nct.ac.jp/,E9138732251953 </csv-map> </body> </html> こういうものはどうつくるといい? など、Issueもお気軽にどうぞ!

キャラクターも仕様もキュートなJavaScriptランタイム「Deno」の新バージョン1.12で、WebSocketもネイティブ実装に対応とのことで、実験しました。

websock_test_chat on GitHub
クローンして、サーバー、クライアント2つ、計3つのターミナル上で動かしてみることができます。

Denoで、promptメソッドを使うとコンソールでの文字入力ができますが、他のスレッドは一切停止することに注意。 sleepを使って、送受信処理する時間を設けてます。

IPv6に対応するサーバーにするためには、hostnameを"::"と設定するのがポイント。 const port = 8081; const hostname = "::"; const listener = Deno.listen({ port, hostname });

wsclientにある接続先ホスト名を変更して、遠隔からのリアルタイム送受信ができる感を味わってみましょう!

Deno 1.13 で、ネイティブサーバーが --unstable オプションなしで動くようにする予定とのことで、楽しみです。

links
- https://zenn.dev/magurotuna/articles/deno-release-note-1-12-0Deno 1.12.0 がリリースされたので新機能や変更点の紹介
- deno/Releases.md at main · denoland/deno

IO-DATAの240Hz駆動ディスプレイを活かしたゲームを求め、crisp-game-libを時間軸ハイレゾ対応。 ゲーム毎の設定optionsに、highFps:trueで、通常1/60秒単位にupdateされるところ、パラメータdtに1/60を単位とした小数が渡るように改造。2ゲームほど移植してみました。

smilyangli-d highFps versionsrc on GitHub
ABAさんのワンキーゲーム「smilyangry」をドラッグによる移動に対応したものを120fps、144fps、240fpsなどに対応させてみました。 1秒間60コマから240コマ、4倍になり、移動や弾などのキャラクターの動きがスムーズに!(HEICからライブフォトを取り出したいので todo libheif ES化)

こればっかりは動画でも伝わらないので、実物で見てもらうしかありません。 高フレームレート対応ディスプレイでお試しいただくか、次回7/30金のサイバーフライデーへどうぞ!


squarebar highFps versionsrc on GitHub
回転する棒を伸び縮みさせる長生きワンキー長生きゲーム。小中学生の頃の一番の愛読書、MSX-FANの投稿1画面部門的な楽しいゲームが帰ってきた感!

何事も、継続は力なり。
プログラミングで実装力をつける近道は、プログラミングすること。
何を作ったらいいか分からない?
ゲーム好きならゲームを作ろう!
ゲームづくりで身に付く、アルゴリズム力と、バランス感覚。
気軽にオリジナルゲームが作りたい人にオススメフレームワーク
crisp-game-lib

ESモジュール版を使ったオープンソース、シンプルゲーム「kawakudari」や、弾幕ゲーム「smily15s」を参考にHTMLファイルをいじるだけで気軽にゲームづくりができますよ。
ESモジュールのススメ! BulletML、crisp-game-lib、mp4-capture-canvasのES化と弾幕遊び

fork元のcrisp-game-libに、設定で自由に指定できるゲーム画面サイズ、プルリク(修正提案)が上がっていたのでES版にも反映。 その際、起動後にウィンドウサイズを変更したときにも追従してほしかったのでプルリクしたところ、賛同得られ、無事マージ。僭越ながら貢献者(Contributors)として名前、載っちゃいました。うれしい!

オープンソースへの貢献は、ゲームで言う実績やトロフィー。
13才以上なら、どなたでも無料でスタートできます。
Let's contribute!

links
- じぶんのウェブサイトをつくろう! 13才以上なら誰でも無料で持てるホームページ&HTMLとCSSはじめのいっぽ

機械学習(ディープラーニング)を使った疑似企業の評価額を競う、高先生向けコンテストの第二回、DCON2021にて打音検査システム「D-ON」を作った福井高専チームが最優秀賞!
【DCON2021 最終結果】打音検査システムが6億円の企業評価額を受け、福井工業高専チームが最優秀賞を受賞 - 一般社団法人日本ディープラーニング協会【公式】
(若手奨励賞、アイング賞、KDDI賞も同時受賞)

メンターを務めた舞鶴高専の先輩、さくらインターネット社長の田中さん、ご来鯖!

福井高専正面にはDCON勝利を伝える巨大な垂れ幕!


大きな優勝旗と共に!

D-ONは、劣化する橋梁などの打音検査を機械学習を使ってサポートするシステム。鯖江橋梁オープンデータによると423もある鯖江市管理の橋。 年齢判明している最古の橋は1926年製、95歳!福井高専内、環境都市工学科向けに作られた古い橋梁の検査施設も活用して実装が進んだ本プラン。


音と機械学習は相性良し。音を気軽に扱うWeb Conponents、input-voiceタグと、それを応用した音声非同期コミュニケーションツール「voice-bbs」のミニマム版を公開。 ちょうど内定者向けの勉強会向けに作ったところでした。 <script type="module" src="https://code4fukui.github.io/input-voice/input-voice.js"></script> <input-voice id="inputVoice" max-length=5></input-voice> これだけで音声録音して、データを取り出せます。お手軽ですね! GitHubとDenoとブラウザだけですぐ試せる、音遊び。DCON2022のエントリーも始まってます!


メンタリングも決勝大会もすべてオンラインだったので、これが初リアル対面!


福井高専校長田村さんと高専の未来会議&学生とのアフターメンタリング。 コンテストはあくまできっかけ。ひとりひとりが持つ可能性、最大限に活かしていきましょう!


Han道場向かいのステキシェアオフィス、Hana工房も見学。


中高生向けセキュリティコンテスト「CyberSakura - サイバーサクラ」も今年から本格展開スタート。 参加者募集中!進化する高専生達を応援します!

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