0から9、10種類の記号を使って数を表現するのが10進法。
0と1を使った2進法や、AからFを10から15を表すこととした16進法は有名ですね。

数は、いくつあるかという意味と、どう表現するかで分けられます。

日本語では「1」のことを「いち」と読み、「一」や「壱」と漢字で書けます。 英語では「one」、ベトナム語では「một」(参考、ゲームで楽しく覚える外国語の数字!ベトナム語編)と表現は様々ですが、全部「1」を意味します。

そう、表現は自由です!


動物コード デモsrc on GitHub
すべてのこどもたちにプログラミングを」と掲げるPCNが提唱する「動物コード」は、動物100種類を使った新しい数表現! 動物1つで0から99の100種類、動物2つで0から9999までの1万種類、動物3つで100万通りの数を表します。

JavaScriptのESモジュールなので、「Webプログラミング道場」でも使えます!
<script type="module"> import { DobutsuCode } from "https://pcn-club.github.io/DobutsuCode/DobutsuCode.js"; alert(DobutsuCode.encode(12345)); alert(DobutsuCode.decode("ウォンバット イノシシ")); </script>

または、CSVオープンデータを直接使うこともできます。

動物コード: <span id=code></span> <script type="module"> import { CSV } from "https://js.sabae.cc/CSV.js"; window.onload = async () => { const url = "https://pcn-club.github.io/DobutsuCode/dobutsucode.csv"; code.textContent = await CSV.fetch(url); }; </script> いろんなプログラミング言語でご活用ください!

CSVファイルで作成した動物一覧から、JavaScriptの動物コードライブラリを生成するJavaScriptのプログラム「cnv.js」と合わせて、GitHub上のオープンソース!

動物コード以外の動物を指定したらどうなる?マイナスの値は?
いろいろ想定して作るのがプログラミング「DobutsuCode.js」を覗いてみましょう!

ちゃんと動いているかな?を確認するのがテストコード「DobutsuCode.test.js
deno testコマンドで動きを確認します。
deno coverageを使って、全パターンテストしたかどうかも調べられます。(cover.sh)

プログラミングで遊ぶ、数と動物、動物コードでした。
応用編をお楽しみに!

オープンソースの良いところは、オープンデータも兼ねるところ。

東京備蓄ナビの要は、対象者に合わせた備蓄推奨品データ。
東京備蓄ナビ」のソース内を品目で全文検索(grep)すると、 stockpile.config.js というJavaScriptのプログラム内にJSONデータになっているものが見つかりました。

こちらを下記のような変換プログラムを書いて、Denoで動かしCSVデータにします。 import { CSV } from "https://js.sabae.cc/CSV.js"; import { fix0 } from "https://js.sabae.cc/fix0.js"; import { stockpileList, petStockpileList } from "../stockpile.config.js"; console.log(stockpileList); const conv = (list, imgpath, imgoffset = 0, pet = "") => { return list.map(s => { return { id: s.id, item_ja: s.item.ja, unit_ja: s.unit?.ja, category_ja: s.category.ja, image: imgpath + "/img-" + fix0(s.id - imgoffset, 2) + ".png", description_ja: s.description.ja, item_en: s.item.en, unit_en: s.unit?.en, category_en: s.category.en, description_en: s.description.en, infantsMale: s.required?.infantsMale, infantsFemale: s.required?.infantsFemale, child1Male: s.required?.child1Male, child1Female: s.required?.child1Female, child2Male: s.required?.child2Male, child2Female: s.required?.child2Female, adultMale: s.required?.adultMale, adultFemale: s.required?.adultFemale, agedMale: s.required?.agedMale, agedFemale: s.required?.agedFemale, pet: pet, url_yahoo: s.url?.yahoo || "", url_rakuten: s.url?.rakuten || "", url_amazon: s.url?.amazon || "", } }); }; const base = "https://code4fukui.github.io/tokyobichikunavi/"; const data = conv(stockpileList, base + "src/assets/images/tool/result/stockpile"); const data2 = data.concat(conv(petStockpileList, base + "src/assets/images/tool/result/stockpile/pet", data.length, 1)); await Deno.writeTextFile("stockpile_list.csv", CSV.stringify(data2)); ペット用のデータも統合するのに一工夫。

画像つきの備蓄オープンデータのCSVオープンデータができました!

東京備蓄ナビ 備蓄推奨品オープンデータ

早速、手軽な派生プロダクト、ブラウザ上からサクッと全文検索アプリ!

備蓄推奨品検索オープンソース on GitHub

活用しましょう、オープンソース&オープンデータ!

links
- 備蓄推奨品オープンデータを使ってアドベンチャーゲーム風「備蓄ナビ」

シンプルでクリーンで素早く開発できて、アイコンがかわいい Deno。
福井の公式プログラミング言語として普及を進めます!

でも、どうしても Node.js でしか動かないモジュールがあって、Dockerを使いたくて困りました。 DenoとNodeを両方いれたimageがない!(on dockerhub)

そこで作ったのが donode です!
めでたく、DenoとNodeが仲良く1つのDocker上で動きました。

Dockerfileを見てもらうと分かりますが、基本denoのコンテナとして構築し、Node.jsをインストールしています。 必要に応じて npm も apt-get してください。(ビルドに時間がかかりそうなので、nodeのコンテナにdenoを入れようとしましたがうまくいきませんでした)

links
- donode on GitHub

AmazonのWeb Services、AWSでは、いろいろなウェブに関するサービスが提供されています。 ストレージサービス S3 に続き、今回は認証サービス Cognito を使ってみました。
Cognito
ユーザIDやパスワードの管理、メールによる確認など認証に関するいろいろをやってくれます。

Denoで使えるCognito用のライブラリを探してみましたが、どうにもなさそうなので、ひとまずnode.jsで動くものをプロセスとして起動する形でDenoと接続。 下記のようなコードで、Denoでユーザー管理が動きます。 import { CertificateCognito } from "./CertificateCognito.js"; const ct = await new CertificateCognito().init(); const user = "111"; const pass = "kChdX3s*_acheu0A!"; const pass2 = pass + "2"; const res = await ct.regist(user, pass); console.log(res); const token = await ct.login(user, pass); console.log("token", token); const userchk = await ct.check(token); console.log(user, userchk); const cp = await ct.changePassword(user, pass, pass2); console.log(cp); const token2 = await ct.login(user, pass2); console.log("token2", token2); const res3 = await ct.logout(token2); console.log(res3) const resrm = await ct.remove(user); console.log(resrm) 使い方は、README.md 参照。(src on GitHub)
Denoネイティブ化は、Issueにあげておきます。

KEN_ALLでおなじみ郵便番号。 GitHubで設定したworkflowは、順調に動いていてくれていそうです。 こちらのデータが、17日前に更新あったことが分かります。

郵便番号を気軽に活用するために、7桁郵便番号入力コンポーネント input-postalcode を公開!

input-postalcode tag demo
7桁の数字以外は意地でもいれない仕様です!穴があればぜひプルリクくださいっ

HTMLElementクラスを派生してつくろう、オブジェクト指向ウェブプログラミングの世界へぜひ!

お隣石川県、金沢市で開催「加能ガニロボットコンテスト
青いタグが目印、加賀と能登から名前がついた、加能(かのう)ガニ。北陸、冬の味覚です!
かにを食べに北陸へ。キャンペーン

開会宣言は金沢市長、ステキな会場、ITビジネスプラザ武蔵6階 交流室!


ダブル松田社長によるルール説明!
IchigoJamを世界一販売している会社、ナチュラルスタイルの社長、松田(まった)さんと、合同会社MAZDA Incredible Lab CEO 松田(まつだ)さん


制限時間3分の予選で不具合発生、その場で即興プログラミングして完走!しっかり自分のものにしていないとできない技。 IchigoJamのJam、ロボットとかに塗って楽しむジャムの意味と、ジャムセッション(即興)の如くプログラミングするって意味があるんです。


熱い、決勝大会。


プレゼンター勤めた三位表彰、香箱ガニ(福井ではせいこがに)3杯、プレゼント!


ズラッと並んだカニロボ達。PRシートにあふれる製作にかける思いがステキでした。


ロボットだけどやわらかさを表現した蟹ロボ、YOU、デザイン賞を受賞!


オリジナルなIchigoJamロゴをデザインしてくれた、ステキカニロボ!さりげなく見える水引も自分で編んだもの!


楽しんでくれてありがとう!楽しさと悔しさと誇らしさをバネに、ガンガン作っていこー!


優勝は、小松市のKOMATSU社のOBによるこまつの杜チームのYukimasa!
IchigoJamをコアに、制御基盤を載せて、3Dプリンターによって作られた可動機構の制御と、センサーによる計測プログラミングで安定の高得点をマーク!

KOMATSUは今年、創業100周年!カニロボコン優勝も錦を飾りました。
コマツ100周年記念サイト|コマツ

わくわくコマツ館 レポート|こまつの杜
KOMATSUらしさあふれる『プログラミング こどもパソコンで油圧ショベルを動かそう』が気になります。


スタッフとして活躍、石川高専、越野さんと高専生達!
こども達にかっこいいところ見せるため、大会を支えるシステム開発にコントリビュートするのもオススメ。 熱いJSランタイム、Deno 1.16 に対応した、Server.jsを使ったウェブアプリ開発、どうでしょう?
掲示板づくりからはじめる、Deno x PostgreSQL、DB.jsで気軽に使おうデータベース
カニロボコン システム - code4fukui/kanirobocon」(バックエンド準備中です)


さっちゃんこと、さかなざわ さちこさんも応援に駆けつけてくれました!


こどもたちの可能性、広げていきましょう!

大容量データを扱うのに便利なデータベースですが、数万件程度のデータであればCSVファイル管理で割と何とかなります。サクッとファイルを確認できるので、開発効率はむしろ良いかも。

先日作った「DB.js for PostgreSQL」とほぼ互換性ある、CSVDB.jsを作りました。


効率は悪いですが、プログラム上からの読み書きのたびにファイルアクセスするので、CSVファイルをいじると即、プログラムに反映されるのは、便利です。 高速化したい時は、メモリ上で動作する MemDB.js をお使いください。


簡単なテストコードと共に、src on GitHub

高専生時代、mp3player全盛でした。技術の進化で高解像度な動画が当たり前に流通するようになった現代、手頃なmp4playerが欲しくなったりします。

何かいいツールを探すのもいいですが、かゆいところに手が届く自作ツールもいいですよ!

mp4playersrc on GitHub
こちら2つの短い動画を連続再生するサンプルです。 先日作った dir2array.js を使って、mp4ファイルのプレイリストをJSONで作って、webアプリで読み込みます。 ブラウザの仕様の制限で、一度「play」ボタンを押す必要がありますが、後は次々と連続再生します。

Chromeで見ると再生速度を300%などに設定できるので、みたい動画をまとめてみるなどにも使えます。

ピクチャーインピクチャー再生すれば、画面の片隅に置いておくなどもできて便利!

いろいろ便利ですよ、JavaScript!

Code for FUKUI メンバーでもある、PCN松田さんのステキプロジェクト
ブラウザだけでサクッとHTML練習!chromebookの中学生も活用中の「Webプログラミング道場」、Code for FUKUIから提供開始! - about yrm


ソースコードは、HTML1ファイル。驚くほどシンプルでありながら、ログイン不要、お手軽に使えて、ESモジュール読み込みを使ってできることは無限大な、強力なツール!

はじめよう、プログラミング!

福井高専の未来を考える、福井高専未来戦略会議。中学生人口がピーク時の約半減する少子化という危機。 こども全員プログラミングスタートと、日本全地域に置いてDX、高度デジタル人材が求められているチャンスを活かしていきましょう。
高専生にもオープンなまち鯖江、福井高専 x KDDI x エル・コミュニティ x jig.jp 包括協定!
連携協定に基づき、KDDI 松野さん、福井高専 田村さん、エル・コミュニティ 竹部さん、そして、jig.jpから福野が参加!


福井県高校の先生向け講習の2日目のクライマックスに、JavaScriptを使ったwebアプリ開発体験。 IchigoJamで慣れておけば、コードを書くのも怖くない。


2日間の実習、おつかれさまでした!残る1日は、実際の現場へ!


人口1,000人、こどもプログラミング普及率でナンバーワンかも、ちょうど長野県南相木村からの視察団。


ナチュラルスタイルまったさん作「NaturalStyle PREMIUM」の「Webプログラミング 道場 v1.0」がステキ! 「かわくだり.js」がサクッと動きました。作って試すのくりかえしが基本。


中小企業向け支援オープンデータ
インターネット上のオープンソースや、オープンデータを活用して動くwebアプリも貼り付けるだけで即動きました。いろいろいじって試すのに最高!

Denoを使うとインターネット上のプログラムをURLで指定して動かすことも簡単!

手元のファイル一覧をJavaScriptの配列に変換するツール、dir2array.js
Denoには外部から読み込むツールが悪いことできないようにする仕組みがあるので、安心。

deno run --allow-read=./ https://js.sabae.cc/dir2array.js

と動かせば、手元のPCのカレントディレクトリ以下しか読み取り許可をしません。(--allow-net をしてないのでネットへのアクセスも不可、自分が作ったものなど安心なものは -A で全許可)

こんな感じで書いておくと、importして使うライブラリとしても、直接実行するプログラムとしても使えます。 if (import.meta.url.endsWith("/your_script_file.js")) { const param = Deno.args[0]; console.log("your parameter " + param); } ほしいもの、どんどん作ってシェアしましょう。


福井県で大いに推してるプログラミング言語、Denoな話をしていたら発見、NHKの番組「Dinoラジ」発見。


福井に来たら、へしこ茶漬け!と・・・


越前がにロボコン
いよいよ週末解禁、越前がに!週末のお買い物も合わせて、ぜひ福井市のショッピングセンターベル、3Fあじさいホールへどうぞ。

商工会議所など、地域の中小企業を支援する組織がよく参照しているサイト「J-Net21[中小企業ビジネス支援サイト]」の国による支援策をオープンデータ化して、サンプルアプリと共に提供開始。 毎日、自動更新が走って、最新に保たれるはずです。


中小企業向け支援オープンデータ
こちらがサンプルアプリ。本文のテキストデータを含めて、フィルタで絞り込めます。


J-Net21[中小企業ビジネス支援サイト]」の「支援記事一覧」をJavaScript on Denoのプログラム scrapeSupportList.js を作って、スクレイピング(HTMLからデータ抽出)。


j-net21_support-list.csv
CSVファイルとしてGitHubで公開しています。

あとは、このCSVファイルを使ったウェブアプリを作ったり、いろいろ活用するだけ。
サンプルアプリは下記のようなシンプルなJavaScriptプログラムを含む1つのHTMLだけ。(src on GitHub)
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <header> <h1>中小企業向け支援策オープンデータ</h1> <input id=filter placeholder=フィルタ><br> </header> <main id="container"></main> <footer> DATA: <a href=https://j-net21.smrj.go.jp/index.html>J-Net21[中小企業ビジネス支援サイト]</a> → <a href=https://github.com/code4fukui/JNet21>CSV on GitHub by Code for FUKUI</a><br> </footer> <script type="module"> import { CSV } from "https://js.sabae.cc/CSV.js"; import { create } from "https://js.sabae.cc/stdcomp.js"; onload = async () => { const url = "https://code4fukui.github.io/JNet21/j-net21_support-list.csv"; const data = CSV.toJSON(await CSV.fetch(url)); data.reverse(); const show = () => { container.innerHTML = ""; const key = filter.value; data.forEach(d => { if (JSON.stringify(d).indexOf(key) == -1) { return; } create("div", container).innerHTML = ` <h2><a href=${d.url}>${d.title}</a></h2> <div>${d.date} - ${d.subtitle} - ${d.category}</div> <div>${d.tags?.split(",").map(tag => `<span class=tag>${tag}</span>`).join("")}</div> <div class=body>${d.body}</div>`; }); }; filter.onchange = show; show(); }; </script> <style> #container > div { border: 5px solid green; padding: 1em; margin: 1em; } h2 { margin: 0; } .body { font-size: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag { display: inline-block; margin: .3em .3em .3em 0; padding: .2em 1em; border: 1px solid black; } </style> いろいろオープンデータ、増やしましょう!

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