どんなものでもすぐ作れるのが理想です。
鍵は再利用性と、調べる時間の削減にあり。

作れば作るほど、過去作ったものを使って楽できますが、整理されていないと調べるのに手間取ります。 最近のお気に入りは、HTMLの拡張タグによる整理。今日は複数のselectタグが自動的に増減するinput-multi-selectタグを作りました。


input-multi-select tagsrc on GitHub
selectタグにはmultipleオプションはありますが、1項目を複数回選択することができないので、選んだら項目が増えていくタグを作ってみました。 (選択肢が少ない場合、全部表示して、数の増減で選択するタグも別途ありですね)


サンプルHTMLを作って、Code for FUKUIのGitHubにて公開する際、レスポンシブ対応や、sakrura.cssを使う簡単な方法。それが辞書登録! 何度も同じことを検索してコピペしているな、何度も書くのだるいなと感じた時にオススメです。

ht <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> 名詞 st style="display:none" 名詞 sc <script type="module"> 名詞 てs import * as t from "https://deno.land/std/testing/asserts.ts"; 名詞 さc <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> 名詞

こちら私の辞書データ。txtファイルとして保存し、Google日本語入力の辞書インポートで使えます。 あえて英字混じりや中途半端な「よみ」で登録し、通常の漢字変換の邪魔をしないのがポイントです。

毎月最終金曜日はサイバーフライデー。

5回目の開催、今日もいろんな出会いと刺激がありました。


鈴木眼鏡工業さん、ただいまサイバーなもの作成中!!


3Dプリンター、プチ講座。


金のフィラメントの押出し加工で作られたIchigoJamロゴ!


サイバーなもの、作ってもらいました!ありがとう!


キーボードを割ろう!


細かなローマ字カスタマイズが熱い、ネットワークランキングと「ねこ打」の展示


超音波カッター!


EIGHT SENSEさん、たぬきおにぎり、パンダおにぎり、かわいい!


鯖江市伝統野菜、吉川なす入、焼きそばパン、爆弾状のまんまるの吉川なす、夏の名物!


ちーずチーズケーキとかわいいスイーツも!


SCC1Fのpowiicafefukuiのおろしだいこんがステキな、スープオムライス!


水ようかんマップsrc on GitHub by Code for FUKUI
Code for FUKUIの展示、240fpsで見るアプリ、いろいろ。 福井の観光サイトを考えるのに外せない、福井の冬といえば水ようかん。そういえば近隣の水ようかんを探してたべまくった2011年。当時の作ったアプリのGoogleマップ機能が期限切れ。 CSVデータに変換し、csv-mapタグと、csv-viewerタグでサクッと地図アプリ化! 水ようかんデータを書いていただける方、アプリをブラッシュアップしていただける方、大募集です!


鯖江市長、佐々木さんも遊びにきてくれましたっ(@katsuhisas


ひさびさ、jigインターンOB、ぐら!


前田 鎌利 氏の講演会『伝える〜100%勝てるプレゼンテーション』を開催します | SABAE CREATIVE COMMUNITY
本日、SCCにて同時開催。福井出身、プロのプレゼンター、前田鎌利さんの講演会。


また来月!次回は、8/27金18:30!

町内会でのGitHub、地域の危険箇所データを記録するCSVファイルの編集を改善!

CSV editor for GitHub
GitHubでログインを押すと、国高地区2021年版の地域安全データ「kidssafe2021.csv」が表示されます。 編集権限があれば、編集して「Commit changes」を押すと、元リポジトリに反映されます。

今の状態だと同時に編集した場合競合してしまうので、1レコードずつ追加や編集できるモードがあると更に使い勝手上がりそう。

GitHubのAPI、OpenIDでaccessTokenをゲットしたら、GitHub.jsを使って、ユーザー情報やリポジトリを取得したり、ファイルをプル&プッシュできます。 ファイルは、バイナリデータをBase64.jsでエンコード、デコードしてサーバーとやり取りします。

ユーザー登録やログイン機能の実装が不要なのは楽ですね。 OpenID認証機能付きのサーバーコードも使い方ドキュメント含めて整理して公開します。

Code for FUKUIで進める地域DX、GitHubで管理する「越前市の国高地区安全マップ」をバージョンアップ。 最も小さな行政、町内会でGitHubユーザー広がってます!(参考、GitHubはじめのいっぽ by Code for FUKUI


越前市 国高地区 地域安全マップ
印刷レイアウトにも対応! 2021年度版のデータも追記、完了。場所ごとのデータ、アイコンデータはいつでも差し替え可能です。 位置情報を表すGeo3x3は、緯度経度地図で調べて、CSVに記載します。 分かりやすいインターフェイスを作れるともっと便利になりますね。


越前市 国高地区 地域安全マップ」(src on GitHub)
地域の安全マップ、みなさんのまちにもいかがでしょう?

今回のJavaScript開発、3つのポイント。

1. qr-codeタグ
HTML内に <qr-code></qr-code> と入れるだけでそのサイトのURLを表示できます。new QRCode()でエレメント追加でもOK!

2. fetchImage
awaitを使って画像の読み込みを同期的に処理できます。コールバックを使わないのでネストが深くならずシンプルにかけて便利です。

3. CSSの @media print
印刷時のレイアウトをCSSで指定できます。

求む、中高生、高先生、社会人 Code for FUKUI デベロッパー!
気になるリポジトリのIssuesへの書き込み、プルリク、お気軽にどうぞ!
2021-07-30金18:30-22:00開催「サイバーフライデー」はオフライン活動の日です。

7/22海の日に、マリンデブリ問題にシビックテックで挑む!
福井県庁と美浜町の共催によるアイデアソン「美しい浜アイデアソン」に参加しました。

オンライン開催となりましたが、せっかくなので訪れた美浜町役場。


主催者の福井県庁、美浜町役場、お題提供の方々!


美浜の海 - VRふくい
ステキな海岸、さすが美浜!(福井で2つしかない珍しい交差点、美浜町ラウンドアバウトも写ってます)


と思ったら、海岸では無いところにはマリンデブリ、不法投棄され漂流、漂着した海洋ゴミがありました。 お題提供の方の話の通り、きれいな海岸の裏には多大な労力と、費用がかかっています。


福井県の美しい浜代表、水晶浜に到着。砂浜でアイデアソンスタート!今回5チームに分かれました。


さすがに炎天下で続けるのは無理そうだったので、お昼休憩に移動、美浜原子力PRセンターにカフェ発見。


おいしかった、へしこ茶漬け!

お昼後、アイデア検討を続け、スライドにまとめて、15時から発表!
発表時間は各チーム6分。審査の結果、参加していたBチームが優勝!

集合写真 by 福井県×デジタル・トランスフォーメーション


xGC - garbage collection anywhere
マリンデブリの7割以上は地上で不法投棄(ポイ捨て含む)によるものとのこと。海だけの問題ではないわけです。 押さえて置きたい、ゴーストフィッシング、東日本大震災後いまだ漂うガレキ、海外から漂着する危険ゴミ問題。 Code for FUKUIのGitHubにまとめました。

製造から回収まで、ぐるっと資源を回すのが筋。不法投棄されたものを回収、回復する費用をきちんと捻出できるモデルにしなくてはいけません。 アイデアソンでは、地域通貨やポイントなどで、拾う人へのメリットあるようにとディスカッションされましたが、問題はその原資。

原資がなくても、ゴミ拾い自体を楽しんでしまうのがゲーム化するプラン。 ゴミ拾い後の分別にコストがかかるなら、そもそも特定のごみのみ拾うスポーツに仕立ててしまいましょう!

ペットボトルのキャップを集めて、一定エリアにばらまき、早く全部拾ったもの勝ちのゲームで対戦してみると楽しいかも!?

Treasure Hunting
スマホゲームにもしてみました(PCでもマウスで遊べます)。ごみ1つのステージから、10コまでの10ステージのタイムを競えます。 触ったら即アウトな危険ゴミを追加するのもいい学習になって良いかも。

過去の様々な実験によると、最も効果が高いものは不法投棄・ポイ捨てへの罰金・罰則とのことでした。ポイ捨て条例作って原資を確保するのもありかもしれません。


イベント終了後、美浜原子力PRセンター内、見学。凄まじい原子力のイメージとは違ったかわいい内部。


お隣敦賀市、高速増殖炉もんじゅ近くのテイクアウトカフェ「Calm」は残念ながらおやすみの日。

不法投棄ごみ問題、Code for FUKUI にて、継続的にチャレンジしましょう!
xGC - garbage collection anywhere
コメントや、アイデア投稿、お待ちしています!

福井新聞企画、鯖江商工会議所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)のみ統一したい。

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もお気軽にどうぞ!

機械学習(ディープラーニング)を使った疑似企業の評価額を競う、高先生向けコンテストの第二回、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 - サイバーサクラ」も今年から本格展開スタート。 参加者募集中!進化する高専生達を応援します!

割と便利な、ウェブサイトへのかんたん地図組み込み、csv-mapタグmap-viewタグ。 マーカー色を指定したいとのご要望と合わせて、オープソースleaflet.spriteを教えていただいたので、ESモジュール化して対応。

csv-map tag demo
タグのcolor属性か、csvのcolor項目が、下記7色に該当すればその色のマーカーとなります。

colors: "blue", "green", "orange", "yellow", "red", "purple", "violet"

csv-map、CSVファイルのsrc属性での指定に加え、タグ内部へのCSV直接記述にも対応しました(参考HTML

leaflet.sprite-esは、Leaflet.mjsと組み合わせて、自在な地図アプリにも組み込めます。 import L from "https://code4sabae.github.io/leaflet-mjs/leaflet.mjs"; import { LeafletSprite } from "https://taisukef.github.io/leaflet.sprite-es/src/sprite.js"; LeafletSprite.init(L); // const color = "red"; const icon = L.spriteIcon(color) const marker = L.marker(latlng, { icon }); // ご活用ください!

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