#js / 福野泰介の一日一創 / Create every day by Taisuke Fukuno

日本中、ものづくり好き増やそう、NT鯖江！
DAY1のダイジェスト動画を、YouTube Player APIを使って、サクサク見られる機能を追加！

リファレンスのサンプルをコピペし、IDを変更、機能を追加。ブラウザ内だけで完結するのが便利な「Webプログラミング道場」

「NT鯖江」
Webサイトに貼り付けて、できあがり！
出展増える、DAY2の11/27土曜日、10時〜15時開催です！
鯖江商工会議所の無料駐車場か、すぐ奥にある広大で安価な西山公園の駐車場あります。

こちら「Webプログラミング道場」に貼り付けて動く、HTMLとJavaScriptのプログラムです。 <div id=player></div> <script> const videoId = '09CoA73mXmY'; const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); let player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '360', width: '640', videoId, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.playVideo(); } let done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { done = true; } } onload = () => { btnseek1.onclick = () => player.seekTo(0, true); btnseek2.onclick = () => player.seekTo(3, true); btnseek3.onclick = () => player.seekTo(7, true); btnseek4.onclick = () => player.seekTo(15, true); btnseek5.onclick = () => player.seekTo(19, true); } </script> <button id=btnseek1>テクノロジー絵本</button> <button id=btnseek2>バランスボールお絵かき</button> <button id=btnseek3>自動演奏ロボット</button> <button id=btnseek4>輪ゴム鉄砲輪とデジタル的</button> <button id=btnseek5>ボードゲーム用サイコロタワー</button>

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

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

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

そう、表現は自由です！

「動物コードデモ」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)

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

オープンソース「東京避難ナビ」から備蓄推奨オープンデータができたので、アドベンチャーゲームフレームワーク「egadv」を使ったアプリを「Webプログラミング道場」で作ってみます。

Webプログラミング道場を開き、下記のコードを打ち込もう。コピペもできるけど、自分でアレンジしながら打ってみると作った実感が持てる手打ち推奨。
<script type="module"> import { bg, show } from "https://js.sabae.cc/egadv.js"; onload = async () => { await bg(); await show("おはよう、朝だ"); } </script>
動きました！

次にCSV形式の備蓄水商品オープンデータを使ってみます。 <script type="module"> import { bg, show } from "https://js.sabae.cc/egadv.js"; import { CSV } from "https://js.sabae.cc/CSV.js"; onload = async () => { const url = "https://code4fukui.github.io/tokyobichikunavi/csv/stockpile_list.csv"; const csv = await CSV.fetch(url); await bg(); await show(csv[0].join(",")); } </script> 3行足して、CSVの1行目、ヘッダーの項目を表示に、1行加えました。csv[0]をcsv[1]に変更すると最初のデータを表示できます。
「stockpile_list.csv」
このデータは、東京備蓄ナビから生成した、CSVオープンデータです。

2次元配列になっている表形式のCSVデータを項目名でアクセスできるJSON配列に変換すると使いやすくなります。ひとまず順番に持っているか確認してみましょう。 <script type="module"> import { bg, show } from "https://js.sabae.cc/egadv.js"; import { CSV } from "https://js.sabae.cc/CSV.js"; onload = async () => { const url = "https://code4fukui.github.io/tokyobichikunavi/csv/stockpile_list.csv"; const csv = await CSV.fetch(url); // await show(csv[0].join(",")); const data = CSV.toJSON(csv); await bg(); for (const d of data) { await show(d.item_ja + "は、もった？"); } } </script> 「//」スラッシュ２つ連続はその行をコメント（＝プログラムとして無効）にします。IchigoJam BASICでいう、「'」や「REM」です。

いきなり、いい感じですね。項目名表示で見た、item_en を使うと英語表記もできますよ。

詳しい情報もあるので、持ってないと答えた場合に詳細(description_ja)を表示しましょう。 <script type="module"> import { bg, show } from "https://js.sabae.cc/egadv.js"; import { CSV } from "https://js.sabae.cc/CSV.js"; onload = async () => { const url = "https://code4fukui.github.io/tokyobichikunavi/csv/stockpile_list.csv"; const csv = await CSV.fetch(url); // await show(csv[0].join(",")); const data = CSV.toJSON(csv); await bg(); for (const d of data) { const ans = await show(d.item_ja + "は、もった？", ["はい", "いいえ"]); if (ans == "いいえ") { await bg(d.image); await show(d.description_ja); } await show("備えあれば患いなし"); } } </script> ノベル風フレームワークの show は、選択肢を配列で渡すと、選択した文字列を返してくれます。「いいえ」だった場合に、説明表示と、画像表示と、全部終わった時の決め台詞。

「備えよ災害 - ノベル風備蓄ナビ」
ノベル風備蓄ナビの基本ができました！

保存して手元で動きますし、GitHub Pagesを使えば、世界中の人に使ってもらえます！
男性、女性、こども、高齢者向けに必要量データを使って、より便利に改造してみましょう。

プログラミングを楽しもう、今週末は、サイバーフライデー＆NT鯖江！

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

東京備蓄ナビの要は、対象者に合わせた備蓄推奨品データ。
「東京備蓄ナビ」のソース内を品目で全文検索(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にあげておきます。

情報処理学会の会報「情報処理 2021-12」の巻頭コラムを書きました。
歴代のコラムと合わせて、どなたでも読むことができます。

アルゴリズムとコンピューターとの組み合わせはすばらしく。再現性100%のプログラムがあれば、解決するための道具ではなく解決そのものが手に入ります。幅広くその知恵を共有するオープンソース文化によって、ひとりの力は、かつて無いほど高まっています。つまり、プログラミングをするか、しないかの差は開く一方です。

「p5.js example」
学会誌内の記事「ジェンダーインクルーシブなプログラミング教材の開発 -視覚化を通してデータを感じるプログラミング-」におもしろそうなビジュアライズがありました。 SNSのシェアの変遷を動く光の点で表しています。このデータソースとなっている「Social Media Stats Worldwide | Statcounter Global Stats」を借りて「sns-stat on GitHub」を作り、円グラフコンポーネント(ChartPie)を使って描画してみたものです。物理エンジンや、流体シミュレーションなど、自然な動きを採り入れたコンピューターグラフィックスは確かにジェンダーフリーで楽しめそうです。

「Webプログラミング道場 v1.0」
ログイン不要、オフラインでも使えるブラウザ上の開発環境を使って、日本のソーシャルシェアCSVデータを読み込み、円グラフ表示するプログラムです。小学生での作文より短いです。もちろん裏側には膨大なプログラムありますが、巨人に肩車してもらって、どんどん高いところ行きましょう。

円グラフを書くだけなら、インポート文と命令をいくつか使うだけ！今ある便利機能にちょっと足すことでひとまずシンプルに「できること」増やしましょう。ステキコンポーネント増やす、Code for FUKUIへの参画、お待ちしてます！ <script type="module"> import { ChartPie } from "https://code4fukui.github.io/chart-pie/chart-pie.js"; const data = { "A": 30, "B": 20, "C": 70, }; const chart = new ChartPie(data); document.body.appendChild(chart); </script> JavaScriptやってみたい方、こちらからスグ、体験できます！
→ 「シンプル開発環境「Webプログラミング道場」へ2つの改善提案（プルリク） / JavaScript」

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

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

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

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

「マモチャンネル」の方に、撮影いただいた越前がにロボコン、ステキな動画ダイジェストが公開されました！

「越前がにロボコン　福井の特産物「越前がに」をモチーフにしたロボットコンテストの模様です - YouTube」
越前がにロボコン、会場の雰囲気、ルール説明、予選、決勝戦を高画質でご体験ください。

- 越前がにロボコンルール開設 by ict4e 原さん
- 優勝ロボ「かにキャッチャー」センサーで激レアメタルを検出、挟み落として持ち帰る。
- 準優勝ロボ「Dr.スランプアラタくん」ピンチ！
- エントリー部門、決勝戦！
- 歩行部門、決勝戦!

「seeklink maker for YouTube」
上記リンクは、以前作った、時間を秒数にしてハッシュで記録するタイプはスマホには対応していなかったので、パラメータとして渡す方法を発見し更新したもので作成。実は、普通にリンクに「&t=30m15s」など付ければOKとなりました。ただ、時間を計算する簡単なJavaScript例と思ってください。