福井県越前市国高地区の方と進める、スマホで見える地域安全マップ「キッズセーフ」プロジェクト。 要望あった「レイヤー毎に切り替えたい」に対応。


越前市 国高地区 地域安全マップ
危険箇所2020・2021、ドローン写真、こども100当番の家、不審者アイコンのオン・オフ、通学路表示のオン・オフができます。 レイヤーを追加するのも簡単なので、いろいろとカスタマイズして、ぜひご自身の地区まわりでもご活用ください!


危険箇所2020と危険箇所2021を見比べて、地域の安全がどう変わったかチェックできます。気になる箇所はドローン写真でチェック!

ドローンによるVR写真オープンデータプロジェクト「VRふくい」へのプルリクもお待ちしてます!

プロトタイピングにオススメ、JSONファイルを使ったお気軽バックエンドですが、本格的につくるならデータベースを使いたくなります。

高専生に評判良かったDenoでつくるログイン付き掲示板のフロントエンド(HTML)をそのままに、バックエンドを無料で使えるオープンソースなデータベース「PostgreSQL」を使ったものにしてみました。


見た目や操作方法(フロントエンド)は全く一緒ですが、裏側の処理(バックエンド)が違います。


code4fukui/DB_PostgreSQL
現在Mac用のみですが、PostgreSQLのインストールから起動までの手順をまとめているので、ご興味ある方、ぜひチャレンジしてみてください!

つくりかた
1. PostgreSQL driver for Denoを使って、SQL部分を担当する DB.js を作成
2. 続いて、掲示板バックエンドとなる BBS.js を作って、テスト / BBS.test.js
3. Server.jsを使って、APIサーバーとしてまとめて、できあがり!
import { Server } from "https://js.sabae.cc/Server.js"; import { BBS } from "./BBS.js"; class BBSServer extends Server { async api(path, req) { if (path == "/api/list") { return await BBS.list(); } else if (path == "/api/add") { return await BBS.add(req); } else if (path == "/api/regist") { return await BBS.regist(req); } } } new BBSServer(3001); 結構、お手軽、これで何百万件ものデータも怖くない!

前回はIchigoJamで学んだ、仁愛大学生向けプログラミング講座。 2日目はいよいよ本格JavaScriptによるプログラミング!

と、いっても、とっても簡単。Visual Studio CodeなどのエディタとブラウザがあればOK。すぐにオリジナルウェブアプリが作れます!

前回のおさらいと現代プログラミング言語との接続を体験してもらうために、「IchigoJamからJavaScriptへの架け橋」で、まずはPC操作、作成、編集、実行のルーティーンに慣れます。 IchigoJamのF4、エンター、F5と同じリズムで、Ctrl+S、Alt+Tab、F5!

ウェブの本質は、コンピューターによる自動応答。見せたいものを使う人の要求に応じて見せてあげる動きをノベルゲームづくりを通じて体得してもらうチャレンジです。


誰一人取り残さない、数行ずつ入れるハンズオン式


みんな自分だけのウェブアプリ開発手法、身につきました。


ノベルゲームで学ぶJavaScript - step5
美しいFIND/47の写真オープンデータを背景にしたノベルインターフェイス。選択肢を出すのも簡単です。


ノベルゲームづくりからのJavaScript入門
たった5行のHTMLから始まる、ウェブアプリ開発入門。 <html> <body> おはよう! </body> </html> ぜひ自分の手で打ち込みながらやってみてください。


テクノロジーで地域貢献、Code for FUKUI」への参加、待ってます!


VR体験。世界中の知恵が詰まったライブラリを読み込めば、VRアプリだって、すぐ作れます!
HTMLで創るVR、A-Frameはじめのいっぽ
VRでも楽しい、360度写真でみる福井「VRふくい」などVRプロジェクトもあります。


興味ある方、今週末のサイフラでもご紹介しますよ!
仁愛大学前、Code for FUKUIメンバーにて。

Code for FUKUI x 仁愛大学 安彦先生、大学生向けのプログラミングの授業をIchigoJam + JavaScriptで実施、初日はIchigoJamを使ったプログラミング入門。 いつものエルチカとゲームづくりによるアルゴリズム学習。全員達成、楽しんでもらえた様子です。次回はJavaScriptを使った本格シビックテックへのはじめのいっぽ。 地域のIT、地域の学生の力、重要です!

コンピューター室。スライドを手元に見ながらの体験型学習。


机の上には、準備と片付けが簡単お手軽、IchigoDyhook(+ 小型IchigoJamのIchigoDake)


充電電池で運用。


はじめてのプログラミング with IchigoJam (IchigoDake + IchigoDyhook)pdf/keynote/pptx版あり
資料を iPhone 13 Pro 発売に合わせてアップデート。PCNこどもプロコンも2022が始まります! 福井近隣の方、毎月最終金曜日のサイバーフライデー(サイフラ)や、NT鯖江2021へどうぞ!


Code for FUKUI Tシャツで、ゲーム大会優勝者にヒーローインタビュー。


プログラミングのつくりをかくにん。


つないでつくる、プログラミング!
かわくだりゲームはアプリの一番おいしいところを作りました。
いろいろ改造して、ひとりひとりのオリジナルゲームができました。


「かわのぼりゲーム」
かわくだりゲームに近いですが、タイトルとゲームオーバー画面が付いた豪華版!

1 CLS:LC 10,10:?"カワノボリゲーム" 2 IF INKEY()=0 GOTO 2 10 CLS:X=15 20 LC X,20:?"🐱" 30 LC RND(32),0:?"*" 31 SCROLL DOWN 35 WAIT 3 36 X=X-BTN(28)+BTN(29) 37 X=X&31 39 IF SCR(X,20) GOTO 100 40 GOTO 20 100 LC 12,10:?"GAME OVER" 110 WAIT180:RUN

かわくだりゲームとの違いをチェックしてみましょう!
一番下の行(Y座標=23)にプリント(PRINT/?)することで自動的スクロールアップすること利用していますが、スクロールダウンは専用のSCROOLLコマンドを使います。

10 CLS:X=15 20 LC X,5:?"🐱" 30 LC RND(32),23:?"*" 35 WAIT 3 36 X=X-BTN(28)+BTN(29) 37 X=X&31 39 IF SCR(X,5) GOTO 100 40 GOTO 20

IchigoJam BASICの辞書にあたる、リファレンスや、コマンド一覧、読みやすい方でどうぞ。
- IchigoJam BASIC 1.4 コマンド一覧
- IchigoJam BASIC リファレンス ver 1.4


最後にカムロボを使ったデモ。前進後退の繰り返しのヒミツ、もう分かりますね!
興味ある方、小中学生によるプログラミングとロボットの戦い、越前がにロボコンへぜひどうぞ。


Let's code!

→ 講座2日目「ノベルゲームづくりで学ぶ、はじめてのウェブアプリ開発、Code for FUKUI x 仁愛大学生編

links
- 仁愛大学
- 安彦 智史 准教授 | 教員情報|大学紹介|仁愛大学 - PCN武生
- Code for FUKUI

iPhone 13 Pro の面測距機能、LIDARを使ったアプリを使うと、その場の空間を手軽にスキャンして、VR表示可能なウェブアプリにできる!

Polycam」でスキャン、モデル化(広さに応じて数分待つ)、シェア機能からGLTFを選びMacにAirDropで転送。


glb-viewersrc on GitHub
A-Frameを使ってglbファイル(GLTF)を表示。ちょっと暗かったのでライトを少しいじって、できあがり! VRで見ると実寸表示できるのがいい! <!DOCTYPE html> <html> <head> <title>glb-viewer</title> <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> <!-- https://github.com/fernandojsg/aframe-teleport-controls --> <script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script> </head> <body> <a-scene background="color: #333"> <a-assets timeout="10000"> <a-asset-item id="sabae" src="./20211015-jig8big.glb"></a-asset-item> </a-assets> <a-entity gltf-model="#sabae" position="0 2 0"></a-entity> <a-entity light="type: ambient; color: #FFF"></a-entity> <a-entity light="type: directional; color: #FFF; intensity: 1" position="-0 2 1"></a-entity> <!--<a-plane color="#888" height="300" width="300" rotation="-90 0 0"></a-plane>--> <a-entity id="cameraRig"> <a-entity id="head" camera position="0 1.7 0" wasd-controls look-controls></a-entity> <a-entity oculus-touch-controls="hand:left" teleport-controls="button:trigger; collisionEntities:.collidable; cameraRig:#cameraRig; teleportOrigin:#head;"></a-entity> <a-entity oculus-touch-controls="hand:right" teleport-controls="button:trigger; collisionEntities:.collidable; cameraRig:#cameraRig; teleportOrigin:#head;"></a-entity> </a-entity> </a-scene> </body> </html> 撮ったモデルのファイル名を変えるだけで使えます。


3Dモデルなので現実にはありえない視点からも見えて楽しいですね!

ドローンによるVR空撮「VRふくい」に建物ビュー、室内ビューを加えるのも楽しいかも!
Code for FUKUIで、LiDARモデル、大募集!

ウェブアプリで数字しか入力できないコンポーネントと言えば、input type=number ですが、英数も見かけ上入力できてしまったり(Safari)、桁数を制限しようとmaxlengthやmaxを指定しても完全に効くわけではありません(Chrome/Safari)。 正規表現で入力できる文字を制限できる仕様 pattern もありますが、どうも機能していない様子。

無いものは創ろう。input-numberタグを作りました。

input-number tag demo
上2つが今回作ったinput-numberタグによる入力ボックスです。0-9の数値以外入りません。2番目はmaxlengthで長さを5に制限したもの。入れようとしてもはねられます。ペーストしていれようとしても対策済み! 拡張タグは必ず閉じタグが必要なので、忘れずに!その下は比較用の標準コンポーネントです。

つくりかた
文字を正規化するインターフェース的なValidatorクラスを作り、数値に特化したNumberValidatorクラスを作って、テストします。

Validatorのインスタンスを取る入力コンポーネント、InputWithValidatorクラスHTMLElementを派生して作って、最後に更にそれを派生したInputNumberクラス作って、できあがり!

import { NumberValidator } from "./NumberValidator.js"; import { InputWithValidator } from "./InputWithValidator.js"; class InputNumber extends InputWithValidator { constructor() { super(new NumberValidator()); } } customElements.define("input-number", InputNumber); シンプルですね!

高専で習っただけでは分かりづらい「オブジェクト指向」。実用コードを読んで、触って、体得するのが一番です。

デジタルの日、まだまだ足りない現実のデータ化。
近くにある建物をどう分類するといいでしょう?

デジタル庁のベース・レジストリとして整備される予定の行政基本情報データ連携モデルのPOIコード(Point of Interest)をJavaScriptのライブラリ、ウェブコンポーネントとして整理しました。 (参考、BaseRegistry/行政基本情報データ連携モデル-POIコード.md at main · code4fukui/BaseRegistry

select-poicode tag demosrc on GitHub
POIコードをディレクトリから調べたり(select-tree tag 使用)、一覧から検索したりできます。 これで足りない時はどうするか?みんなバラバラなコードにならないように、定義とアピールが大事です。

JavaScriptから使用する場合もこのように、簡単! import { POICode } from "https://code4fukui.github.io/POICode/POICode.js"; console.log(await POICode.encode("高等専門学校")); console.log(await POICode.decode("1508")); console.log(await POICode.find("学校")); 身の回りから整理してみましょう!
Let's go with digital!

日本の市区町村にはすべてに5桁か6桁の「全国地方公共団体コード」コードが振られています。 北海道が01で沖縄が47のよくある並びに加えて、3桁が市区町村コード。6桁の場合、末尾1桁はただのチェックデジットなのでデジタル現代には不要です。

「全国地方公共団体コード」「都道府県コード及び市区町村コード」とやや冗長な名前なので、LGコードと呼ぶことにして、市区町村入力コンポーネント select-cityタグ / input-lgcodeタグ を作りました。


input-lgcode tag
都道府県を選ぶと都道府県コードが、下位の市区町村を選ぶ市区町村コードが value として取得可能です。確実に市区町村コードを入れてもらいたいところで使えます。

先日決めたウェブ開発スタイルに乗っ取り、CSSは含めていないので、デザインはCSSで自由に調整ください!
ウェブアプリのフロントエンド=構造(HTML)+動き(JavaScript)+見た目(CSS)、個人的開発方針決定とinput-radioタグ拡張

Code for FUKUI では、ウェブコンポーネントに興味ある方、大募集中です!
こんなウェブコンポーネントがほしい! · Issue #4 · code4fukui/code4fukui.github.io
ご要望だけ、使ってみた感想だけでも、開発にがっつり貢献したい方でも、ぜひお気軽にどうぞ!

高専機構の環境報告書への第三者評価時に提言し、実現した「高専環境報告書オープンデータ」今年度版も公開されました!

その他施設等に係る情報公開 - 高専機構
今年、環境報告書2021の第三者評価は、福井高専先輩でZOZOテクノロジーズ取締役、また徳島県に新たにできる、神山まるごと高専(仮称)の学校長候補の大蔵さん!

コロナによって休校が続いた2020年度、どのくらいCO2排出量は減ったのでしょう?


高専ランキング (高専機構55キャンパス)
早速、高専オープンデータとして2021年度版を追加。高専ランキングアプリに削減率ランキングを追加。大島商船高専が昨年比43.2%減でトップ。 その分、学校での活動が止まってしまっていたと思うと切なさも感じますが、節約できた分、学生に何か還元できるといいですね!


逆に増えた学校も3校あります。福井高専も4.5%増。寮の建て替えの影響かもしれません。より細かいデータがあるとより深い考察ができそうです。

広さランキングにも変動あり。鈴鹿、豊田、沼津だったトップ3が、豊田、鈴鹿、長岡になりました。意外と敷地面積の変動もダイナミックでおもしろい。

データに時系列が加わると差分がとれ、予測計算ができ、より見えるものが増えます。
オープンデータは、行政のものだけにあらず。
組織なデータ、オープンデータにしてみませんか?
きっと各地域の高専生が活用してくれます!


高専インカレチャレンジ│SMBC日興証券
イオングループ協賛の高専インカレチャレンジ第二弾「キミは、イオンを変えられるか?」
好奇心旺盛な高専生、未来創ろう!

links
- 高専機構、環境報告書をCSVオープンデータ化! 低炭素ランキングで見る高専ランキングアプリ
- 学校DXがテーマの高専インカレチャレンジ成果発表会、M1macを手にしたチームは!? zoom記念写真から名前を消すオープンソース

日本の国コードは JP または JPN または 392 です。 これは国際標準化機構(ISO)による ISO 3166 (COUNTRY CODES)として定められています。

国別の統計データなどでは国名を書くと長いので2文字や3文字コードがよく使われますが、表示上は日本語で読みたいので対応表が必要です。 デジタル庁のベースレジストリとして指定された住所ですが、国や地域もアドレスの一種、合わせて整備されるとうれしいですね!

GitHubにiso3166はたくさんありますが、日本での表記を含む対応規格であるJIS X 0304で検索してもヒットしなかったので、ひとまずWikipediaを元に日本語表記付きのISO3166-1を作りました。

code4fukui/iso3166: ISO3166 (JIS X 0304 / jisx0304)
CSVファイルJSONファイルは、一般的なプログラミング言語から簡単に使えます。
JavaScriptであれば、下記のように超かんたんに使えるESモジュールも用意しました。 import { ISO3166 } from "https://code4fukui.github.io/iso3166/ISO3166.js"; console.log(ISO3166.getCountryByCode("JPN"));

下記、つくりかたの紹介です。

ISO 3166-1 - Wikipedia
日本語版WikipediaのISO3166-1


日本語名を含む表を発見。ひとまずこれを使おう。表部分を選択してコピー。


Google Spreadsheet に貼り付け。表データになった!


「ファイル、ダウンロード、カンマ区切りの値(.csv、現在のシート)」で、CSV化。

インデックス行を取り除き、名前を付け替え、不要な列を取り除いて、CSVとJSONとJavaScriptのデータとして書き出すプログラムを、JavaScript/Denoで書いて実行。 import { CSV } from "https://js.sabae.cc/CSV.js"; import { assert } from "https://js.sabae.cc/assert.js"; const csv = await CSV.fetch("iso3166-1_temp.csv"); const csv2 = csv.filter(l => l[1].length); // インデックス行を取り除く const data = CSV.toJSON(csv2); // CSVからJSONへ const notmatch = data.filter(d => !d["各行政区分"].endsWith(d["alpha-2"])); // 各行政区はalpha-2か? assert(notmatch.length == 0); // 確認できたので削除しよう const data2 = data.map(d => ({ alpha3: d["alpha-3"], alpha2: d["alpha-2"], numeric: d.numeric, name: d["ISO 3166-1における英語名"], name_ja: d["国・地域名"], area: d["場所"] })); // 名前変更 const makeDataJS = (name, json) => `export const ${name} = ${JSON.stringify(json)};\n`; await Deno.writeTextFile("iso3166-1.csv", CSV.stringify(data2)); await Deno.writeTextFile("iso3166-1.json", JSON.stringify(data2)); await Deno.writeTextFile("iso3166_1.js", makeDataJS("iso3166_1", data2)); console.log(data2.length); // 数表示 ISO3166.js というESモジュールとテストコードを書いて、テスト(deno test -A)。 Code for FUKUIのGitHubにアップして、GitHub Pages設定してウェブ公開。ESモジュールなので、ブラウザやDeno上でかんたんに使えます。

Code for FUKUI は、福井や世界をちょっと便利にしたい人のコミュニティ。
GitHubでのコメント(Issue)、プルリク、大歓迎!

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