さばえを楽しくまちあるき「さばぷら」がオープンデータ化された記念に、国連ベクトルタイルの派生プロジェクト「Adopt Geodata」の一環「a storytelling helper / 地図語り」を使ってみました。

さばぷらマップ」(src on GitHub)
ひとまずAPI替わりに download.js でスクレイピングし、geo3x3.csv で作成した位置情報を作成し、make.js で生成。


オリジナル地図作りを進めるため「オープンな地図と地図アプリの動かし方」を解析し、オープンストリートマップのデータ「JA:PBFフォーマット - OpenStreetMap Wiki / osm.pbf」の読み込みをESモジュール化。 base64-jsと、Bufferを移植し、osm-pbf-parserをESモジュール化した「OSMPBFParser.js」ができました。Denoでサクッと動かせます。

import { OSMPBFParser } from "https://taisukef.github.io/osm-pbf-parser/es/OSMPBFParser.js"; const parser = await new OSMPBFParser((items) => { console.log(items); }).init(); const url = "./test/extract.osm.pbf"; const file = await Deno.open(url); for await (const value of Deno.iter(file)) { parser.parse(value); } file.close();

こちら sh2 で紹介している、オープンストリートマップ(OSM)のデータダウンロード「Geofabrik Download Server」から、osm.pbf 形式のファイルをダウンロードして変換できます。(src on GitHub)

2021/5/12、UNVT(国連ベクトルタイル)ワークショップ日本語版開催!
UNVTワークショップ日本語版 公開録画 | 512

5/1、鯖江のまちをぷらっと歩く「さばぷら」が楽しい。 歩くと見える新たなまちの魅力。かわいく楽しい地図やアプリがあれば、歩かなくてもその魅力伝えられるかも!?

軽快に気持ちよく動く3D地図に惹かれて参加したオープンソースな地図プロジェクト「Adopt Geodata」を探索して、オープンストリートマップのデータから鯖江周辺のデータをコンバートし、オープンソースな地図ライブラリを使って表示まで完成。 思う存分、自由に変更できる地図とアプリを手に入れました!

Open Sabae Map - Adopt Geodata project」(src on GitHub)
いままで使っていた地理院地図+Leafletと違って、世界中の地図がアクセス制限なしで活用可能です。これは熱い!


WebGLとベクトルデータを使った傾けることも、回転させることもスムーズな地図。あとは、いい情報をどんどん載せていくだけですね! 地図ライブラリはオープンソースではなくなる前の Mapbox v1 から派生した、MapLibreを更に派生した、ESモジュール対応版を使っています。 「Mapbox GLからforkされたMapLibre

試験的にコンバートした鯖江市中心の地図を使ったアプリなら、下記のようなHTMLにプログラムを足していくだけで自由に開発できちゃいます。

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>Open Sabae Map - Adopt Geodata project</title> <link rel="stylesheet" type="text/css" href="https://taisukef.github.io/sh2/mapbox-gl.css"> <style> body { margin: 0; top: 0; bottom: 0; width: 100%; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script type="module"> import { maplibregl } from "https://taisukef.github.io/maplibre-gl-js/maplibre-gl-es.js"; const map = new maplibregl.Map({ container: "map", style: "https://taisukef.github.io/sh2/style.json", attributionControl: true, hash: true }); map.addControl(new maplibregl.NavigationControl()); map.addControl(new maplibregl.ScaleControl({ maxWidth: 200, unit: "metric" })); </script> </body> </html>

手元にwebサーバーも不要です。index.htmlを作って、ブラウザで開くだけ!


VRふくい - 西山公園2(つつじ)
つつじで有名、西山公園、晴れ間を狙ってVR写真。空から見るつつじもいいですね!

links
- オープンソースプロジェクト「Adopt Geodata」へ開発参画で国連貢献!? CSVと3D地図で語るVRふくい

バーチャル鯖江プロジェクトの一環、ドローン撮影テスト。許可いただきめがね会館を撮影


VR-megane-kaikan VRめがね会館」(src on GitHub)
PC、スマホ、VRでぐるぐる見渡せます。めがね会館前の上空。VR写真をボタンひとつで撮影できるのは便利! 鯖江市上空を辿るバーチャルトリップアプリ化するのも楽しそう。


こういう写真を合成してくれます。元解像度のデータはGitHubで取得してみてください。

めがね会館を撮影(協力、福井県眼鏡協会(ふくいけんがんきょうきょうかい)鯖江SDGs推進センター


めがね会館近くのjig.jp新社屋予定場所にて、上限上空150mまでの旅。ジャンプ力100倍を体験するVRアプリづくりも楽しそう。


150m上空から真下を撮影。


150m上空からの広角撮影。


めがね会館、この視点での撮影は初!?


めがね会館とリニューアルした文化センター。

上記動画、静止画、アプリもすべて、CC BY Code for Fukui のオープンデータ。いろいろご活用ください!楽しく使えるアイデアもぜひお寄せください!

JavaScriptとHTMLだけでつくるVRアプリ、上記アプリもただ画像を指定するだけ簡単。興味ある方、VRはじめのいっぽをどうぞ!

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <html> <head> <meta charset="utf-8"> <title>VR-megane-kaikan VRめがね会館</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sky src="https://code4fukui.github.io/vr-megane-kaikan/Photo_6553700_DJI_100_pano_42713392_0_20214782526_photo_pano.JPG" rotation="0 -90 0"></a-sky> </a-scene> </body> </html>

上記ファイルを手元で live-server などwebサーバーを使えば動きます。rotationをいじってみるとおもしろいですよ!

links
- HTMLで創るVR、A-Frameはじめのいっぽ

鯖江市で標準化されたIchigoJamによるプログラミング教育、小学4年生の総合的な学習の時間を45分2コマを連続で取って実施しています。

本日は神明小学校にて講師役。IchigoJamのCPUとして使っている100円のコンピューター、依頼したLEDの点滅を一瞬でこなす様子をみてからの「ここでもんだい」

おなじみ、100円のコンピューター、1秒間の計算回数は?

こちらのひとこま、驚きの部分を10秒の動画にしました。こどもたちの良い反応、ごらんください!

合わせて、鯖江では、GIGAスクールでiPadが全員に貸与されているので、iPadでは約1兆回と紹介。すごい時代ですね。 スパコン富嶽は、100京回。インターネットも大きな超高速なひとつのコンピューターとみなせます。

1コマ目にコンピューターの凄さと、身の回りで動いているコンピューターの存在を知ってもらった後、2コマ目にゲームづくり! さすがゲーム、休憩後もすごい集中力でした。

はじめてのプログラミング with IchigoJam
45分授業2コマに最適化した、はじめて用スライドを小アップデート!
オープンデータとして公開しているので、どなたでも自由に活用いただけます。編集、改変、販売もOKです。

動画でもどうぞ!

ゲームつくりたい?の質問、みんなYES!ここが小学生のいいところ。ドラクエつくりたい!フォートナイトつくりたい!いろんな声が上がります。 大丈夫、基本を押さえて、自分で学ぶ力がつけば、何でもできますよ!

こどもたちへのプレゼント、ミニマムなドラクエ風を作ってみました。

エンターキーを押すたびに、敵と自分の体力が減っていきます。どちらからがマイナスになったら終了、ESCで止めてもう一度やるときは、F5でRUN!

プログラムはかわくだりゲームと同じ、コンパクトに8行。

10 E=50:U=50 20 CLS 30 LC9,5:?"YOU: 🕴 HP:";U 40 LC9,7:?"ENE: 👾 HP:";E 50 IF INKEY()=0 CONT 60 A=RND(20):E=E-A 70 D=RND(20):U=U-D 80 GOTO20

敵や自分の絵を変えたり、10行でヒットポイントを変えてみたたり、60/70行で攻撃力をいじったりしてみるところから遊んでみましょう!

かっこいい演出でもりあげたい?

55 BEEP:VIDEO2:WAIT10:VIDEO1

音がなって画面がフラッシュします!

勝ったかどうか判定してほしい?

45 IF E<0 ?"YOU WON!":END 46 IF U<0 ?"YOU LOST...":END

受けた攻撃を表示したり、選択肢を増やしたり、いろいろ加えて自分だけのゲームに育てていきます。

フィールドをテクテク歩くシーンを作りたいときは、IchigoJamプリントの「ねこにこばんゲーム」が参考になりますよ。

楽しいプログラミングの世界、伝えましょう!

SMBC日興証券の新戦略、今年度スタートした新組織「Nikko Open Innovation Lab」の磯野太佑さんら、ご来鯖。 鯖江生まれのパソコンIchigoJamから想起された、目の見えない子でもプログラミングできるパソコン「IchigoJam read&speak」誕生!名付け親は、さばえSDGs推進センターサマンサ!


"Nikko Open Innovation Lab" meetns "Hana Open Innovation Dojo(Hana道場)"
地域連携と小さなパソコンから広がる地方創生をご紹介!


IchigoJam read&speak
磯野さんのアイデア、音だけで使えるプログラミングパソコンをひとまず IchigoJam webWeb Speech APIの音声合成を使って実装! 打ったキーや、表示された文字を読み上げ、カーソルを動かすとそこにある文字を読み上げてくれるので編集、デバッグもできます!読み上げ速度や使い勝手は実際に試してもらって調整予定。


さばえSDGs推進センターにて披露&命名会議、無事決定!

すべてのこどもたちにプログラミングを!

links
- 楽しいと貢献の両立、コンピューターを学ぼう、IchigoJam「若手科学学術賞」とサイバーセキュリティ人材育成
- 福井発プログラミング教室、全国に拡大 小型PC武器: 日本経済新聞
- Appleの「アクセシビリティ」に取り組む、盲目の若き女性エンジニア - iPhone Mania
- 生まれつき盲目の男性がAmazonでソフトウェアエンジニアとして働く - GIGAZINE
- Microsoft、盲目エンジニアによるカメラ撮影した物体をAIで解析し音声出力する視覚障害者向けiOSアプリ「Seeing AI」を無料公開。文章読み上げ、商品や貨幣認識、顔で年齢や感情出力、Twitter画像のシーン読み上げ等 | Seamless

鯖江市長の佐々木さん、副市長の中村さん、コネクトフリーの帝都さん、京都大学の坂出さんと共に記者会見。

実験のまちとして使ってほしいと、佐々木市長。
2010年、当時の牧野市長に提案して、その場で決めてくれたのがオープンデータの始まりとなりました。
オープンデータとデジタルの活用はいよいよ本番。新たな仲間を迎え、すます楽しくなりそうです。


ちょうど同日、福井テレビで放送あった、創電の刀根社長自身によるIchigoJam/IchigoSoda IoTプログラミングとハードウェアづくりによって実現した「火守くん


火災報知器が鳴り響いてもむなしい、誰も居ない家や事務所の火災。創電のIoT「火守くん」は異変をネットを通じて伝えてくれます。


今回、鯖江市への共同提案、IoT通報システム。IoTの2つの課題を解決できます。
1. IoTセキュリティが心配 - 互いに認証する新しいインターネットプロトコル EVER/IPを使って解決
2. IoT価格が高くなり勝ち - その地域で生まれるデータを集約するサービスを行政が担当する提案、月額利用料をなくせます

例えば、IoT火災報知器、火災を感知したら位置情報と共に即、消防へ通報。無人の店舗の被害を最小限に食い止められるかもしれません。
汎用性が高いので、新しいデバイスを使ってDXしたい、様々な企業とのコラボが期待できます。


オープンに未来づくりに取り組むまち、鯖江!創電、会長&社長と。


初のCluster登壇してPR、ソフトウェアのまち鯖江!


バーチャル誠照寺 on Hubs
イベントで仕入れた情報、オープンソースなサイバースペース「Hubs」。
コロナ禍、中止がちな鯖江の毎月のおまつり「誠市」もバーチャル開催できるかも!?
バーチャル誠照寺の境内でチャットしながら3Dモデルも使った語り合いが可能です。


Spoke
オーサリングツールSpokeを使ったスペースづくり、鯖江商店街3Dオープンデータを、gltfのバイナリ形式glbをobj2gltfを使ってコンバート。誠照寺データを取り込めました。

鯖江市、サイバーバレーのフラッグシップになりましょう!

15歳から20歳、自分の人生を決めた福井高専を卒業後、福井大学へ進学した福井高専の先輩大蔵さんと、佐世保高専の先輩の松本さんと共に起業、会社名は有限会社シャフト。 その後、iアプリの登場と共に、目指す方向性の違いから違う道を進み、20年。 神山まるごと高専の設立準備で合流、なんと大蔵さんが校長候補に!


神山まるごと高専コンセプトムービー(6分) from 神山まるごと高専 on Vimeo
Sansan創業者で、神山まるごと高専発起人、寺田さんが理事長。クリエイティブディレクターとして山川咲さんを迎えた新体制!

これからの世界を担うこどもたちが過ごすべき5年間とは何か? 技術(IT)と伝える力(デザイン)を鍛えるカリキュラム、でも、本当に大切なのは熱意、自分だけがやりたいと思う気持ち(=アート)。

正解の世の中、未来づくりに必要なのは真っ白なキャンパス。それは都会より田舎にこそチャンスあり。 徳島県神山町にもオススメしたいオープンデータ。産総研のデジタルツイン計画で、鯖江市の商店街3Dオープンデータが使われました!


鯖江商店街 - 3DDB Model Viewer
ブラウザ上から簡単に見て回れます。モデルデータなので味方も、編集も自由自在!


鯖江商店街10倍巨人モード with A-Frame
obj/mtlファイルとしてダウンロードし、WebVRで再現してみました!いろいろ活用できますね! Oculus Quest2では、ちょっと重いので、何か工夫もしたいところ。 (src on GitHub)

神山まるごと高専を一緒に創る、研究者&教員、大募集中!
神山まるごと高専
ご興味ある方、ぜひどうぞ!

バーチャル鯖江プロジェクト、リアルな鯖江のまちをサイバー空間上にも作ることができたら、おもしろいし、きっと便利。

バーチャル鯖江プロジェクト 中心地、10倍巨人モード」
鯖江商店街3Dデータを、WebVRで見られるようにgltfに変換し、サンプルアプリを作りました。


鯖江市の一部、鯖江商店街3Dデータがある。 CC BYのオープンデータとしてダウンロードできるskpファイルは、SketchUpを使って開け、objファイルとしてエクスポートできる。 全部だと重かったので、選択範囲を限定していくつかパターンを用意。単位は「ヤード」にすると実寸になります。 後は obj2gltf で、gltfに変換すればできあがり!
code4sabae/sabae-pj3d: 鯖江商店街3Dオープンデータ gltf / obj / skp on GitHub


バーチャル鯖江プロジェクト 中心地、10倍巨人モード」
いろんな角度で見て楽しめます。Questではテレポートでの移動に対応。


バーチャル鯖江プロジェクト 実寸モード」
PCではカーソルキー、Oculus スマホでもVRモードでぐるぐる見渡せますが、VRでの体験が最高です!

Oculus Quest で、10倍巨人となって鯖江市商店街を歩いてみた様子。

HTMLだけで作成した本アプリは、オープンソース。いろいろご活用ください!
src on GitHub

意思表明を弱めてしまう、安易な脱ハンコには反対です。 ハンコのメタファーを残しつつ、DXするHANKO実験中

ハンコといえば、第二のふるさと名古屋に、お城のシャチホコも由来なハンコの老舗「シヤチハタ株式会社」。 舟橋社長を、コネクトフリー社クリス、京都大学坂出さんと中さんと共に鯖江市役所、SCC、Hana道場、さばえSDGs推進センターへご案内。

佐々木市長、中村副市長、熱いディスカッション、ありがとうございました!


職員の人たちも熱い、鯖江市役所!


ありえないと言われる鯖江商工会議所、Sabae Creative Community、通称SCC。黒田会頭と。
本日はシヤチハタ株式会社の舟橋社長が来所されました | SABAE CREATIVE COMMUNITY


鯖江市のIT力を支える「Hana道場」、来年の「越前がにロボコン」もどうぞお楽しみに!全国、全世界から参加可能です。


DXはSDGsの要、鯖江市役所の出先「さばえSDGs推進センター」もご案内。ステキな場所が多いんです。
本日は名古屋のシャチハタ様と京都大学からお客様がセンターに来られました

iPhoneで撮影した写真は、HEIC形式。JPGと違って、ブラウザで表示できないなど使い勝手がまだ悪いのが問題です。 さくっと、プログラムでまとめて変換するプログラムを作りましょう!

const list = await Deno.readDir("./"); for await (const f of list) { const fn = f.name; if (!fn.endsWith(".HEIC")) { continue; } console.log(fn); const opt = `--setProperty format jpeg ${fn} --out ${fn.substring(0, fn.length - 4)}jpg`; console.log(opt); const p = Deno.run({ cmd: ["sips", ...opt.split(" ")], stdout: "piped", stderr: "piped" }); await p.status(); await Deno.remove(fn); }

heic2jpg.js ととして保存し、Denoをインストール、次のコマンドでそのフォルダ内のHEIC画像をまとめてjpgに変換します。

deno run -A heic2jpg.js

元ファイルを残して置きたい場合は、最後の remove の行をコメントアウトしましょう。

物体であるハンコは、正式には印章(いんしょう)といいます。押したあとが印影(いんえい)。役所や銀行などに登録したものが印鑑(いんかん)です。 ハンコのセキュリティは、紙に押した印影の複製や、印影から逆に印章を作ることが難しいことを担保にしています。 きっと印影は、画像ではなく紙に対する凹み具合などいろいろと加味されるのでしょう。

PKI(公開鍵暗号基盤)に例えると、印章が秘密鍵、印影が公開鍵によって作成した電子署名、印鑑が認証済み公開鍵って感じですね。

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

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

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


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

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

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