Facebookで面白い地図アプリを発見「筑波研究学園都市内の公園」。 国土地理院の藤村さんによる「Adopt Geodata プロジェクト」の一環とのこと。 滑らかに動く3D地図を背景に、その場所の情報がすっと入ってくる。

筑波研究学園都市内の公園

こんなステキなことが簡単にできるとは! 気軽に共同開発できるプラットフォーム、GitHubを使った新たなオープンソースソフトウェア(OSS)プロジェクトだったので早速開発に参画。 HTML内のテキストデータを編集するだけで誰でも簡単にステキな地図で語れるようにすることに貢献。


Code for Japan 代表、関さんも参戦!Google Spreadsheetに対応!

TSVなどの外部ファイルに対応しては?というアイデアを元にひとまずCSV/YMLに対応、プルリク(プログラムの改善提案)をしたところサクッと承認され、貢献完了。 多くの人ががっつり使うオープンソースプロジェクトの場合、仕様の検討も、テストも入念にしたいところですが、このような若くて気軽なプロジェクトもありますよ。

藤村英範さんは、かんたん地図ライブラリ egmapjs でもお世話になっている国土地理院の中の人であり、国連の人!

ベクトルタイルを通じた国連貢献へのお誘い
日本がイニシアチブを取って進む新しい地図プロジェクト、もっと貢献できることがあるかもしれません。
「国連ベクトルタイルツールキット」で各国の地図配信を支援、国土地理院 藤村英範氏によるトークセッション開催(「mapbox/OpenStreetMap meetup」第4回レポート) │ GeoNews


ベクトル地図といえば、福井高専在学中のバイトの中心だった地図づくり。CDに入ったベクトルデータを変換してJavaアプレットで動く地図プロジェクト「Atlantis(コードネーム Mappilla)」を思い出す。


VRふくい
最近お気に入りの空飛ぶ一眼を使った360度写真オープンデータ。リスト表示を改め、地図語りバージョンをトップページとしました。 建物のローポリゴン3Dがオシャレですね!お手軽個人空撮オープンデータと地理院のベクトルタイル地図との合成すれば、テクスチャーマッピングも可能かも!?

CSVファイルでまとめて、HTMLを書くだけ!(csvファイル外部読み込みはローカルのファイルでは動きません。liveserverなどwebサーバーを起動するか、サーバーに転送して動かしましょう)

高専生の頃関わった1997年から24年。再び地図がおもしろい!現役高専生の参戦も大歓迎!

日本のステキを写真で集める「FIND/47」のデータは用途制限なく自由に使える、CC BYのオープンデータ。

FIND/47|みんなで集め、広めていくフォトアーカイブ。
現在1,299枚の47都道府県の高品質画像が最大1900万画素で使用可能。どの写真も美しい!

サイト自体もCC BY、一覧を取得する images.json と、サイトのHTMLを使って、CSVオープンデータとして整理するプログラムをJavaScript(Deno)で作って、GitHub公開。 ついでに、フルHD品質画像をダウンロードして、GitHub Pagesでホスティング。一括ダウンロードしてあれこれ活用する元ができました。(src on GitHub)

find47images.csv
画像URL、FIND/47での詳細リンク、タイトル、使用カメラやレンズ、焦点距離などの情報に加え、全データ位置情報付き!Geo3x3にエンコードして整理しました。


日本の風景オープンデータ
作ったCSVオープンデータを使ったサンプルアプリ、シャッフルして0.5秒ずつ並べていくだけのアプリです。JavaScriptのプログラムはこんな感じ。(src on GitHub

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; import { sleep } from "https://js.sabae.cc/sleep.js"; import { shuffle } from "https://js.sabae.cc/shuffle.js"; window.onload = async () => { const url = "https://code4fukui.github.io/find47/find47images.csv"; const data = CSV.toJSON(await CSV.fetch(url)); console.log(data); shuffle(data); for (const d of data) { const imga = document.createElement("a"); imga.href = d.url; const img = new Image(); img.src = "https://code4fukui.github.io/find47/photo/" + d.id + ".jpg"; imga.appendChild(img); images.appendChild(imga); const a = document.createElement("a"); a.href = d.url; a.textContent = d.title + " © " + d.author; credits.appendChild(a); await sleep(500); } };

プログラムでHTMLの要素を生成しています。

これだけ美しい素材、日本中まるっと揃っているとうれしいですね!

うちの地元のあの風景がない!?
FIND/47では、投稿も受け付けています。自慢の写真、オープンデータにしましょう!


SABAE signboard
福井県の空からの360度写真オープンデータ「VRふくい」に「鯖江大看板」追加!
こちらも日本中、世界中に拡大できると楽しそう。

プログラミング上達のコツは抽象化。同じようなコードを二度と書かないようにまとめていけばいくほど効率良くプログラミングできます。

JavaScriptでは、import/exportを使ったESモジュールがオススメです。まだ script タグをずらずら並べている古いコードが多く見られますが、早く移行したいところです。

ネックは、ローカルでの開発において、ローカルファイルのimportがCORSの関係で失敗してしまうこと。ローカルでwebサーバーを立ち上げれば解決するのですが、ちょっと手間がかかるのが難点でした。


そこで作ったこちら「liverserver」、Node.js で便利な live-server を Deno に移植。Denoが入っていれば何もインストールすることなく、シンプル1行で安全で便利なwebサーバーが起動します。 HTMLファイルがあるディレクトリで下記コマンドを実行

$ deno run --allow-net --allow-read https://js.sabae.cc/liveserver.js

ブラウザで表示された http://localhost:8080/ を開いてみましょう。

URL指定で動くのが便利なJavaScriptランタイム Deno(ディーノ)
ネットアクセスとファイルの読み込みを許可していますが、書き込みは許可しなくても動くことで、変なことされない安心感があります。

それでも心配な人は、下記で実行すると、危険な操作毎に許可するかどうか聞いてくれます。

$ deno run --prompt https://js.sabae.cc/liveserver.js

便利なことがわかったらインストールして、簡単に起動できるようにしましょう

$ deno install --allow-net --allow-read https://js.sabae.cc/liveserver.js

後は任意のディレクトリで liveserver とするだけ起動します。便利!

$ liveserver http://localhost:8080/

8080が使われている場合、順番に1足しながらポートを探します。CORSにも対応しているので、複数サーバーを使ったテストにも便利!

Deno の入門したくなった方はこちらもどうぞ
JavaScript 16行で作るハイスコアAPIサーバー、webアプリ開発入門スライド、夏のjigインターン募集開始

福井高専に5G基地局開局記念イベント、「5Gxデジタルツイン」をテーマにアイデアソン!

デジタルツインとは、サイバー空間に再現するリアル空間のこと。 高速、低遅延、大容量の5Gがあれば、現実社会の動きをリアルタイムにサイバー空間での再現性が大幅にアップしそうです。


5G基地局設置記念イベント at 福井高専


KDDI 宇佐見さんによるご挨拶


鯖江市長もかけつけてくれました!


福井高専ロボコン部によるロボットデモ


みんなで考えれば、いろいろアイデア広がります(発想手法は、スライドを参照ください)


ワークショップイベントに便利なセグウェイドリフト、アイデア発表会!


誰でもカメラマン、発表とKDDIさんからのコメント、質疑応答の時間。
大好きなスポーツやライブ、でも視点が気に食わない、そんなとき多数のカメラと3Dモデル再構築による自由視点ライブを実現しよう!


俺らの為の客層判断、はじめて行くお店で浮いたらやだな、怖い感じだとやだなという不安を解消するアイデア。 店内のカメラで客層を分析、公開することで、安心。ラーメン屋さんからいきましょう。


ミニチュアロボットと5Gによる観光アクティビティ、行きたくてもいきづらい観光。デジタルツインのデータを元に創るメニチュア観光地に、カメラ付きの小さなロボットをリアルで走らせて、自宅から体験しようというプラン。 ロボットを通じたコミュニケーションや、ロボット自体を使ったアトラクションづくりなど、アイデア広がりますね。 去年オープンした「スモールワールズ」とのタイアップや、Nゲージなどジオラマ好きな人とのコラボも良さそう。


VCR、朝起きるのがつらい、混む電車が嫌、そもそも通うのが面倒。そこで、学校を仮想化してしまうVCR。 バーチャル高専、なんと、福井高専も賛同。でも、オンライン授業で困ったこととかあるよね?と思って聞くも、意外と何もなし。 次世代の学校、リアルが必要なのは実験室くらいかも!


Public Eye、見えない交差点、不審者情報、交通状況などの知りたいを車載カメラをリアルタイムな監視カメラ的に使おうというアイデア。 すでにGoogleストリートビューが許されている日本、たしかに一般の人の車からの映像が同様のプライバシー保護さえあれば良いとも言えますね! ドローンを使った空の目も有効。地上を走る無人ロボなど、いろんな目が活用できそうです。


会場投票で決定した優勝プランは、俺らの為の客層判断!おめでとう!


参加、ありがとう!
アイデアははじまり。創って社会に提供、いいところを伸ばし、うまくいかなかった部分を改善する。これを繰り返すことでどんどん価値が広がります!


5Gxデジタルツイン アイデアソン」(5アイデアの模造紙も on GitHub
スライド資料と、5チームのアイデアをGitHub公開!高専WiCONの締め切り、5/10 18:00、いいネタ考えてみよう!


天気に恵まれた、さばぷら!(Hana道場前)


さばぷら、まるよさんでは陶器、越前焼販売会、恐竜くん、かわいい!


お、新設、Hana道場マット


Hana道場中では本の交換会


良いさばぷら日和


本日開催、さばぷら、Hana道場上空150mから


同じ地点、西山公園を撮影、うっすらつつじが咲き始めてます


VRふくい
日本の西会海岸、CyberValley、福井のデジタルツイン化をすすめるべく、ドローンによる360度写真をまとめました。きれいですね、福井。

オンライン勉強会開催、JavaScript (Deno)を使ったフロント&サーバーづくり解説。

webアプリをつくろう!勉強会 超かんたんフロントxサーバー編」 (src on GitHub)
unstableなserveHttpを使っていたため、バージョン違いで動かない件を修正。簡単にフロントエンドとサーバーサイドを使ったプログラミングを体験できる資料になりました。

応用例としてゲームでは欠かせないハイスコアサーバーを作ってみましょう。

import { Server } from "https://js.sabae.cc/Server.js"; const scores = []; class MyServer extends Server { api(path, req) { if (path == "/api/list") { return scores; } else if (path == "/api/add") { scores.push(req); scores.sort((a, b) => b.score - a.score); return "ok"; } } }; new MyServer(8001);

addでscoreを含むデータを受け取りソートしておき、listで返します。簡単ですね!


http://localhost:8001/api/add?{"score":100,"name":"a"}
http://localhost:8001/api/list
など、APIアクセスして試してみましょう。

あとは、fetchJSON でフロントエンドから呼び出せばOK!
保存したい場合、jsonfs などファイルで保存したり、データベースで保存しておきましょう。
何か困ったことあれば、@taisukef までご連絡ください。

チーム開発でがっつりwebアプリ開発をしたい人にオススメ「jigインターン」今年の夏も開催です!


jigインターン 2020夏インターン募集開始」
恒例jig.jpのインターン、昨年に続きオンライン開催、1週間を3セット実施します。ご都合よいスケジュールでお申し込みくださいl

jigインターンで知ったWebAudio APIをラップするサウンドライブラリTone.js。 少し使ってみましたが、ちょっと使い方にクセがありますね。現代風に何か使いやすくしたい感じです。

Tone.mjs デモ
3種類だけのシンプルなドラムセット drums1.mjs を作って使ったサンプルです。

toneKick.play();

これだけでキックが鳴ります。(プログラム全文 on GitHub

Tone.jsをnpmでビルドした後、ESモジュール化する、簡単なDenoのプログラム makemjs.js を通して、Tone.mjs を生成しています。 Tone.mjs をimportして、必要な機能を作って使えて便利ですね。

試してみたい方、zipファイルでダウンロードして、singletone.html をブラウザで開いて鳴らしてみてください。 drums1.html で、シンプルなドラムセットを鳴らせます。

ローカルな mjs を import する drums1_usemjs.html を動かす場合は、live-server など、手元のPCでwebサーバーを動かして使う必要があります。 (詳細は、Denoはじめのいっぽを参照ください)

Tone.js の音楽入門、作曲入門、かなりステキなのでオススメです!
Get started | Learning Music (Beta)

やってきました富山県魚津市!
カニをテーマにしたこどもロボコン、富山でも開催決定。初の下見&プレ研修。

魚津市日本海電業株式会社さん meets PCN
魚津市「紅ズワイガニ」参戦!福井・石川・富山、日本の西海岸で繰り広げられるプログラミングeSports「かにロボコン」、いよいよ世界大会開催へ! – about yrm


未来を担うこどもたちのために、魚津市の商店街のシャッターがひとつ開きそうです!


そのすぐ側、インパクトあるアートを発見。なんと、富山出身有名YouTuber、はじめしゃちょー氏によるものとのこと!


最高の一枚、見つけました!ナスがバナナを持ってイチゴと言う。
自由な発想をカタチにしよう!


【速報】はじめ、大量の町のシャッターに何か描きまくる - YouTube
描かれたのは2年前の2019年。再生回数はなんと、148万回!

今回、巡った、5箇所をマップにしてみました。あと3箇所、次回行った時にに追加します!(もしくはGitHubへ追記ください)

魚津シャッターアートマップ」(src on GitHub オープンソース)
技術的解説、iPhoneで撮ったデータにはGPSによる位置情報がExifという形式で入っているので、JavaScriptでそれを取り出し、国土地理院のフリーの地図をleafletという地図アプリライブラリに貼り付けています。 Exifの切り出しは、exif-jsをESモジュールとして少し改造して、昔Pythonで書いた変換プログラムをJavaScript化した荒削りバージョン。 コードを整理して、写真を使って誰でも簡単に使えるコンポーネントにする前段階までできています。


朝6時の魚津の港、魚津市長と再会しました。


魚津市長、初のドローン操縦!

魚津市長、村椿晃さん操縦によるドローン空撮です!


魚津市、一望できる富山湾と、その背後に見える山が美しい。いい土地、いい人、いい技術!

福井の「越前がにロボコン」も負けてはられないですね!
北陸で進む、創る人づくり。

地域の情報化を後押しする、地域情報化アドバイザー派遣制度、2021年度版がスタート!
ウェブサイトにある情報と2020年度オープンデータ全文を使ってサクサク検索できるアプリを作りました。


総務省 地域情報化アドバイザー一覧 2021」(src on GitHub)
地域情報化アドバイザーオープンデータはまだ公開されていなかったので、フライングしてウェブサイト情報をスクレイピングして、CSVオープンデータを構築。今年は画像と、3分類もデータ化し、語彙にschema.orgを使用。

総務省|報道資料|令和3年度「地域情報化アドバイザー」派遣申請の受付開始
第一期公募期限は4月30日(金)15:00。予算上限達し次第、終了となるかもしれないとのこと。

自治体の方、どうぞお早めにご活用ご検討ください!


オープンデータ伝道師は、地域情報化アドバイザーも兼ねるとのこと。今年も委嘱いただきました。ITを武器により良い地域を創ります!
Code for Japanフェローにもなりました。

人のオープンデータの課題は、同姓同名対策。所属などで類推できますが、はっきりしないのが気持ち悪いところ。マイナンバーをみんな記載してはどうでしょう?
Code for Japanフェローオープンデータ」も合わせて、より良いオープンデータのカタチを共に考え、共に創ろうと思います。

links
- 総務省|報道資料|令和3年度「地域情報化アドバイザー」派遣申請の受付開始
- 豪華メンバーがCode for Japanフェローに就任! - Code for JapanCode for Japan

ゲームライブラリ整備計画、egcanvas.js に続き、サンプルゲーム用のステキ素材を発見!

egcharmaker
ぴぽや倉庫さんのモンタージュ合成可能なキャラクターを使ったwebアプリを作り始めました。 まだまだ荒削りですが、パーツを選んで、いろんなキャラクターを作れます!(ちゃんと作成するには、chracter.xmlのorderに従った並び順の調整が必要ですが、未対応)

ドット絵ならではのかわいさがありますね!

営利利用も加工もOK、素材としての販売だけは禁止という、オープンデータに近いライセンス体系。 参考に新たなキャラクターを描くのも楽しいかもしれませんね! (素材利用規約 - ぴぽやblog

ディレクトリ(フォルダ)構造の素材データをjson化するDeno用ライブラリ dir2json.js を使った makejson.js によって作成する res.json を使ったwebアプリ。 RPGを作りたい小中学生向けに協力したい方、大募集!(src on GitHub

小中学生の実装力を鍛える、PCNこどもプロコン2021のふりかえりと次の計画ミーティング。 今回もたくさんのステキな作品あつまりました。

IchigoJam BASICや、Scrtachからのステップアップにイチオシはプログラミング言語は、JavaScript。
- 創った作品を簡単に公開でき、パソコンでもスマホでも動く
- 機械学習(AI)を気軽に使える(Tensorflow.jsはじめのいっぽ
- サーバーサイドでも使える(Denoはじめのいっぽ
- オープンソース共有サイト GitHub で最も使われているプログラミング言語(GitHut考察

とはいえ、最新の言語は変化も激しいので、陳腐化してしまった古い教材が多いのが問題です。
ということで、小中学生のプログラミング言語ステップアップ用に新たなゲームライブラリ整備計画をスタート!


egcanvas demo 1 - touch

小中学生憧れのスマホ、PCゲームづくり。まずはスタンダードな2Dゲームをサクッと作成できるライブラリ egcanvas.js として公開。 ダウンロードして、HTMLを開くだけでブラウザで動き、改造し、試せます。
egcanvas.js 1.0.0(200KB)」

はじめのいっぽ、文字を真ん中に出すプログラム

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>egcanvas.js demo</title> </head> <body> <script type="module"> import { createEgCanvas } from "https://js.sabae.cc/egcanvas.js"; const c = createEgCanvas(); c.draw = (g, cw, ch) => { // cw ch は画面の幅高さ、gを使って描画 // 線を引く g.setColor(255, 0, 0); g.drawLine(0, 0, cw, ch); // 画面中央に文字 g.setFontSize(cw / 20); g.setColorHSL(90, .6, 0.5); g.fillTextCenter("hello egcanvas.js", cw / 2, ch / 2); }; // ひとまず最初に描く c.redraw(); </script> </body> </html>

import / export を使った、ピュアなJavaScriptのESモジュールを使っているので、ライブラリを辿るのも簡単です。

import { createFullCanvas } from "./createFullCanvas.js"; import { extendGraphics } from "./extendGraphics.js"; import { extendUI } from "./extendUI.js"; const createEgCanvas = () => { const c = createFullCanvas(); extendGraphics(c.g); extendUI(c); return c; } export { createEgCanvas };

フルスクリーンのCanvasを作成して、CanvasAPIベースのグラフィックとUIを拡張しています。extendGraphics.js を見ると、どんな描画ができるか確認できます。

何かステキな名前をつけて、コンパクトで優しく楽しく学べるプログラミング環境を作っていきます!


egcanvas.js on GitHub
どなたでもお気軽にコントリビュートください!

これを機にwebアプリにチャレンジしたい、高専生、オンライン勉強会やりますよ!
【オンライン開催】jig.jp勉強会&会社説明会 ~募集のお知らせ~

祝!福井高専、ディープラーニングコンテスト、優勝!
福井高専がディープラーニングコンテスト優勝しました!

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