学生x防犯・防災をテーマとしたjigインターン2021夏シーズン2の最終日、いよいよドキドキの成果発表会。シーズン1同様、4チームの発表と作品を1日ずつレビューしていきます。
シーズン2のみんな、おつかれさま!またねっ


トップバッター、シーズン2のCチーム、まつやま、りん、るーい


いざという時に重要な避難所ですが、普段はほとんど意識されません。そこで、中高生が楽しく避難所について学べるアプリ「鯖江スタンプラリー 散歩で覚える避難地図」


鯖江避難地図 src on GitHub
地図上に表示される赤いピンは鯖江市内の避難所です。現在位置をアイコンドラッグで仮に設定できるテストモードが便利な赤い「仮」アイコンがいい! 青い「駅」アイコンも目印としてわかりやすい。


スタンプギャラリーページでは自分で集めたスタンプが表示されます。 今回のスタンプとして活用されたのは、めがね会館もある鯖江市新横江地区の「新横江ふるさとカルタ


鯖江避難地図 - LeafletGSIバージョンsrc on GitHub
leaflet.mjs を使ってもっとシンプルに地図が使える LeafletGSI.js を用意して、leaflet版を作ってみました。写真のアップロードはできませんが、擬似的にスタンプはもらえるようにも改造してあります。

Googleマップは無料分付きの有料API、使用するにはAPIキーの登録が必要ですが、地理院地図+オープンソースな地図API、Leafletの組み合わせなら手軽に地図表示ができます。

避難所に関する写真をオープンデータとして集める仕組みとつなげて、実際歩いて試せるようにしてみたいですね。 避難所データはリポジトリ内にCSVファイルとしてありますが、各地のオープンデータから直接取得すると全国で使えるものにも改造できます。 オープンソース、やってみたい人は、誰でも好きな時にチャレンジできます。(src on GitHub)


ここ北陸、サイバーバレージャパンの最終金曜日はサイバーフライデー、月に一度の自分で作ったものの発表の場! ワクワクとドキドキの場、ご活用くださいっ(会場、鯖江商工会議所隣のコネクトフリー鯖江開発センター)


展示したり発表したり、いろんな意見をもらって改善したくなる楽しいループ!

Let's create!

jigインターン第1シーズン最終日、全5チームによる最終成果発表会では1週間で作ったとは思えない良い作品揃い!成長できたと喜びの声、こちらもうれしい!

みんな勝利!

ニッチを探る旅に着目したチームBの作品「Nicheller」は、鯖江に住んでいるメンバーも知らないスポットが表示され、シンプルなのに完成度が高いUI/UXが人気でした。 ちょうど週末、鯖江のイベント「さばぷら」もあるので、さばぷらオープンデータも混ぜたスタンドアローンバージョンを作ってみました。

Nichellersrc on GitHub, forked from jigintern
これはニッチだ!これ知らないけど行きたい!と思ったらハートボタン。あるよねーと思ったらバツボタンでサクサク次に辿れます。 詳細画面からは近場の3箇所を更に表示。行ったついでにもうちょっと楽しめる!

データは、鯖江市役所のオープンデータ「さばかん情報(XML)」と、さばぷらのオープンデータ(さばぷらマップ)。 sqlite用のdbファイルをexportDB.jsを使って、JSONにしてフロントエンドのみで動くようにちょっと改造。 これはニッチだ!とハートマークを押した回数をトータルでカウントして、よりニッチなものを表示する部分の実装ができるとサーバーで稼働させたいですね。

フロントエンドは、フレームワーク「SVELTE」を使用したSPA(Single Page Application)として実装されてます。 「鯖江 ニッチ」とかで検索してヒットするようにするには、サーバーで検索エンジン用のページ生成することの検討もいいかも。


チームBの、いつき、Yune、みその、ステキな作品ありがとう&おつかれさま!

jigインターン生達のブログでもどうぞ!
⭐jigintern diary⭐

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

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

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


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


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


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


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

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

LANなど、ネットワークを分離することで守る境界型セキュリティには限界があり、すべての端末が世界中の端末と接続可能な状態であったとしても安全に使える「ゼロトラスト」が求められています。

その現実解を探る福井県情報システム工業会、行政手続き分科会、ゼロトラスト研究会の第一回会合を鯖江市役所にて開催。 福井県庁、越前市役所など行政職員、県内IT企業他、京都やシンガポールからの遠隔参加もある中、鯖江市役所がコネクトフリー社のEVER/IPと、NTT西日本の光回線(NGN)を使ったゼロトラスト実証事業のデモと、ディスカッションを行った。


鯖江市長、佐々木さんから激励メッセージいただきました。


鯖江市役所、馬場さんによるゼロトラストデモと、コネクトフリー社、帝都久利寿さんによる技術解説。

今後も低コスト高セキュリティなゼロトラストを実現するベストプラクティスを研究していく予定です。

アドレス空間が事実上無限に広がるIPv6であってもアドレスは固定化されず、なりすまし問題もあるためネットワーク内で自由に相互にアクセスする社会にはなりません。 (参考、IPv6セキュリティ ~問題点と対策~ - JPNIC

インターネットで古くから使われているメール(SMTP)も、性善説に基づくなりすましが簡単にできてしまうことで有名です。 2021年現在でも要として使われることがあるので、送信方法を探したところNode.js用ライブラリ「node-sendmail」を発見。 作られた時期が古く同期的に使えないため、改善版を作りはじめました。
code4fukui/node-sendmail-es: send mail without setting up a SMTP server

使い方は簡単。ESモジュールにしたので、importしてinitSendmailで関数を受け取り、sendmailすれば送信できます。
import { initSendmail } from "./sendmail.mjs"; const sendmail = initSendmail(); try { const res = await sendmail({ from: 'no-reply@yourdomain.com', to: 'test@qq.com, test@sohu.com, test@163.com', subject: 'test sendmail', html: 'Mail of test sendmail', }); console.log(res); } catch (e) { console.log(e); }; 試しにGmailになりすまして送ってみると・・・。

こんな表示がでました。DKIMという公開鍵暗号を使った電子署名を使って出ないようにできるようです。


nodemailer/mailcomposer: Composes e-mails from structured data
また、上記など現在メンテナンスされていない3つのパッケージを使っているそうなので、Denoで使えるよう改造を進めたいと思います。

シンプルに安全につながるゼロトラスト社会、創りましょう!

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

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!

鯖江の来週末、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)

2014年に作った原子力発電所で何かあったときの広域避難場所を示す「原発避難アプリ」を改修、改めて確認しました。

原発避難(鯖江編)

2016年に廃炉が決定した「もんじゅ」、計画表によると現在は第1段階、燃料体取り出し期間となっていて、2047年までかかるそうです。
「もんじゅ」廃炉計画と「核燃料サイクル」のこれから|スペシャルコンテンツ|資源エネルギー庁

このようなデータでも住所データは重要。広域避難をTownIDをベースに更新しようとしましたが表記方法が一致しないため、一筋縄ではいかないことが判明。そもそもTownIDによる町字一覧が実態とも合っていないため、公式データの整備が必須ですね。
ベースレジストリ - code4fukui/BaseRegistry

ひとまず現状のTownIDで JavaScript ESモジュールとして使えるオープンソースな地図ライブラリ Leaflet.mjs を使った地図表示してみました。


鯖江のまち
まちアイコンをクリックで町名とGeo3x3で作成したTownIDを表示します。

シンプルな1ファイル、HTMLファイルとして保存してブラウザで開くだけ、何の登録もツールも必要なく動きます。みなさんのまちのマップづくりのベースとして、ご活用ください!

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>鯖江のまち</title> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="https://code4sabae.github.io/leaflet-mjs/leaflet.css"> <script type="module"> import L from 'https://code4sabae.github.io/leaflet-mjs/leaflet.mjs' import { Geo3x3 } from "https://geo3x3.com/Geo3x3.js"; import { TownID } from "https://code4fukui.github.io/TownID/TownID.js"; const pref = "福井県"; const city = "鯖江市"; onload = async () => { const map = L.map("mapid"); // set 国土地理院地図 https://maps.gsi.go.jp/development/ichiran.html L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", { attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>"', maxZoom: 18, }).addTo(map); const iconlayer = L.layerGroup(); iconlayer.addTo(map); const lls = []; const towns = await TownID.getTowns(pref, city); console.log(towns); const iconfn = "https://code4sabae.github.io/towns/icon/icon-home2.png"; const icon = L.icon({ iconUrl: iconfn, iconRetinaUrl: iconfn, iconSize: [32, 32], iconAnchor: [16, 16], popupAnchor: [0, -16], }); for (const town of towns) { const geo3x3 = await TownID.find(pref, city, town); const pos = Geo3x3.decode(geo3x3); const ll = [pos.lat, pos.lng]; const marker = L.marker(ll, { title: town, icon }) marker.bindPopup(town + " " + geo3x3); iconlayer.addLayer(marker); lls.push(ll); } if (lls.length) { map.fitBounds(lls); } }; </script> <style> body { margin: 0px; text-align: center; box-sizing: border-box; /* width include border */ -webkit-text-size-adjust: none; /* for iPhone */ } #mapid { width: 100%; height: 60vh; } #credit a { color: gray !important; text-decoration: none; } #credit { margin-top: 1em; font-size: 80%; } </style> </head> <body> <h1>鯖江のまち</h1> <div id="mapid"></div> <div id="credit"> DATA: CC BY <a href=https://github.com/code4fukui/TownID/>TownID by Code for Fukui</a><br> APP: CC BY <a href=http://fukuno.jig.jp/3249>福野泰介 一日一創</a><br> </div> </body> </html>

自分の住むまちをより良くするスキルを身に着けたい高専生、学生向けのインターン企画、jigインターン、参加者募集中です!
【オンライン開催】2021jig.jp夏インターンシップ~募集のお知らせ~

さばえを楽しくまちあるき「さばぷら」がオープンデータ化された記念に、国連ベクトルタイルの派生プロジェクト「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はじめのいっぽ

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