#codefor / 福野泰介の一日一創 / Create every day by Taisuke Fukuno

株式会社jig.jpの本店、鯖江駅から徒歩10分のめがね会館は、鯖江市の新横江地区に属します。かつては住民でもあった新横江地区、公民館の方から連絡あって、コロナ禍の新プロジェクトスタート！

昨年、コロナによってほとんどのイベントが中止になる中、替わりにできることを作った「新横江ふるさとかるた」がスゴイ。新横江地区内のスポットにちなんだ募集し厳選された44枚の「かるた」に、高校の美術部による絵！

「新横江ふるさとかるた」オープンデータ on GitHub
新横江地区公民館の方の許諾を得て、ひとまず使いやすいオープンデータとして整理しました。CSVオープンデータから表、裏、解説の画像をたどれます。（テキストの読みを生成するために kanji2kana.js を、ついでにかなから漢字を変換する kana2kanji.js をつくりました）

「新横江ふるさとかるた」
タップするとくるっとひっくり返せます。(flip-div on GitHub)

スマホからもどうぞ！
新横江地区のこども達なら、このかるたオープンデータを使って、どんなゲームを考えるだろう！？

本日、Code for FUKUI x 越前市国高地区との提携記者会見。

地域安全マップ「キッズセーフ」をお披露目しました。地域安全と地域の楽しみ、いいとこ取りするのも良いですね！地域を超えてつながる、Code for FUKUI！

links
- 新横江、歴史や文化詠む　鯖江　場所示す地図も作製　ふるさとの　かるたで魅力　再発見　 | 社会 | 福井のニュース | 福井新聞Ｄ刊

Code for FUKUI x 越前市国高地区、地域安全プロジェクトで通学路を引いてみました。
紙地図からデータへ！その7つのステップを紹介します

1. 国交省国土地理院のオープンソース「地理院地図」を開き、上部のメニュー「ツール」、右側メニュー「作図・ファイル」を選択

2. 「作図・ファイル」ウィンドウ内の「／」アイコンを押して、線を引いていきましょう。ダブルクリックで終点、OKを押して確定です。

3. 引きたい線が引けたら「フロッピーディスクな保存」アイコンを押します

4. GeoJSON形式を選択し、「上記の内容で保存」

5. ファイル名を記入して「保存」（国高地区地域安全マップの通学路は schoolzone.geojson というファイル名です）

6. できたファイルをGitHubにアップするとプレビュー表示してくれます

7. 通学路表示ができました！(src on GitHub)

こちら、今回の線を引く元にした紙地図、拡大すると荒が目立ちます

もう少しちゃんとしたい！そんなときは、地理院地図で編集しましょう。
「読み込み」アイコンを選択肢、geojsonファイルをドロップするだけ！修正、追記など編集できます。

通学路と危険箇所情報と合わせて見ると分かりやすい！

GeoJSONを簡単に地図にできる拡張タグ geojson-map も作ってみました。

「geojson-map demo」src on GitHub
src属性にgeojsonのURLを書くだけ簡単！（GeoJSONを直接タグ内に書いてもOK、GeoJSONのカスタマイズなどはソースとLeafletドキュメントを参照ください） <script type="module" src="https://code4fukui.github.io/geojson-map/geojson-map.js"></script> <geojson-map src="https://code4fukui.github.io/kunitaka/schoolzone.geojson"></geojson-map>

「geojson-map [GitHub] — Visual Studio Code — GitHub」
GitHubのリポジトリで「.（ドット）」を押すだけ、VSCodeのオンライン版ですぐ編集できるようになってました。ブラウザだけでそこそこ本格開発できそうです。

福井のシビックテックチーム「Code for FUKUI」へのご参画ください！
→ お披露目会しました！

links
- シビックテック x GitHubで作る「地域安全マップ」、こんな教材は古い！JavaScript編
- GitHubはじめのいっぽ、オリジナルマップアプリを創ろう - Code for FUKUI勉強会
- Let's Code for! サイトにQRコード、印刷時用レイアウト、画像読み込みを同期的に
- GitHubのCSVファイルらくらく編集ツール OpenID/GitHubログイン実験

15時10分の50分前は何時何分でしょう？
地味に面倒な時間の計算。JavaScriptでライブラリにしました。

「Time.js on Day-es」
日付ライブラリESモジュール、Day-esに時間クラス Time.js を追加。四則演算など基本関数を用意したので、下記のようにDenoやブラウザで簡単に使えます。 import { Time } from "https://code4fukui.github.io/dey-es/Time.js"; console.log(new Time("12:34:56").add(60).toString()); // 12:35:56 最近のDenoは、REPLでのimportに対応したので、ちょっとした時間計算をコンソールでサクッとできて便利！詳しい使い方は、Test.js またはテストコードをご参照ください。

コードの力で対コロナ。気になる都市部を中心に再度拡大傾向の新型コロナウイルス陽性者数と医療体制。厚労省が週次で発表する病床使用率のカラム地図表示のOGP対応を開始しました。

「新型コロナウイルス感染症患者の療養状況病床使用率 - 厚労省発表データ」
救急搬送困難事案ダッシュボードや、新型コロナウイルス対策ダッシュボードと合わせてご活用ください。

地味に面倒なOGP生成。 FacebookのOGPは画像ファイル名が変わらないと更新してくれないので、更新ごとにファイル名を変えます。ただ、肝心な更新はログインした画面での反映が必要なのでまだ手動です。 Twitter Cardもだいたい同じサイズなので、1210x640で画像をChromedriverを使って生成しています。(src on GitHub for Node.js)

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

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

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

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

ｈｔ <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> 名詞ｓｔ style="display:none" 名詞ｓｃ <script type="module"> 名詞てｓ import * as t from "https://deno.land/std/testing/asserts.ts"; 名詞さｃ <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-viewer」src on GitHub
どんどん増えるコードフォープロジェクト。Code for FUKUI、手元の360度写真をドロップするとぐるぐる見渡せるツールを作成。

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

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

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

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

勝山市、中学生自身が開発する校内SNSによる学校DX by PCN勝山片瀬クラブ！
「校内版ＳＮＳ　中学生開発へ　勝山南部　つぶやき、画像　瞬時に閲覧：日刊県民福井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 付きで呼び出しましょう。読み込みバッファを超えて改行を探すところで一工夫していますが、もうちょっと改善の余地があります。