IchigoJam BASICの次のステップ、JavaScript/Denoを福井の国語にしよう作戦Code for FUKUIはじめ、JavaScript/Denoのプロジェクト、多数あります。

YES/NOゲーム - サンプル」src on GitHub
JavaScriptでおなじみ、alertや、confirmを使えば、簡単なYES/NOで答えるだけで適切な窓口に案内するアプリや、アドベンチャーゲームがつくれます。
YES/NOゲーム - サンプル

ただネックは見た目がしょぼいこと。そこでHTMLやCSSで自由にデザインが変更できるウェブコンポーネント、popup-alertpopup-confirmを使ったライブラリ、dialog.jsを作りました。 下記ファイルをindex.htmlとして保存して、ブラウザで開くだけで試せます。 <script type="module"> import { confirm, alert } from "https://js.sabae.cc/dialog.js"; onload = async () => { if (await confirm("旅行は好きですか?")) { await alert("私も好きです!"); } }; </script> dialog.jsを使えば、簡単にちょっと見た目がいい感じなウェブアプリができますよ!
YES/NOゲーム - サンプル

CSSをいい感じにカスタマイズにチャレンジするのもいいですね!(CSSはじめのいっぽ


いよいよ今週日曜日、越前がに解禁&越前がにロボコン
今年も福井高専メディア研究会が熱い実況中継をやってくれます!
福井県福井市、ショッピングセンターベルへ、どうぞ!

links
- 高専生が実況、第4回越前がにロボコン2020、初のこどもプログラミング実業団、アフレルチームが準優勝!

Vue.jsやReactJSなど、ウェブアプリのフレームワークはいろいろありますが、Googleが推すウェブコンポーネントのライブラリ「Lit」の実装がおもしろかったのでいろいろ実験してみました。

ES6の記法で追加された「テンプレートリテラル (テンプレート文字列) - JavaScript | MDN」を使った楽しい実装。 const tag = (strings, ...params) => { console.log(strings, params); }; console.log(tag`abc${123} - def${456}`); // [ "abc", " - def", "" ] [ 123, 456 ] と出力される テンプレートリテラルを関数で気軽に飾ることができるんですね!
Litでは、仮想DOMの代わりにこのテンプレートリテラルを使って差分描画の実装をしているようです。


reactive data demo
コンポーネント内でHTMLを書きたいことはあまりないので、データの変化を画面にシームレスに反映するリアクティブの実装だけ採り入れてみることにします。 最終的なコードはこちら。 import { Data } from "./Data.js"; import { BitCheckboxes } from "./bit-checkboxes.js"; import { ReactiveInput } from "./reactive-input.js"; import { sleep } from "https://js.sabae.cc/sleep.js"; onload = async () => { const d = new Data(); document.body.appendChild(new BitCheckboxes(d)); document.body.appendChild(new ReactiveInput(d)); for (let i = 0; i < 256; i++) { d.value = i; await sleep(100); } }; 肝は、変化を抽出する addListener メソッドを持つ、Dataクラスの実装。 class Data { constructor() { const p = new Proxy({}, { set(target, prop, val) { target[prop] = val; if (p.listeners) { p.listeners.forEach(l => l(target, prop, val)); } return true; }, deleteProperty(target, prop) { delete target[prop]; if (p.listeners) { p.listeners.forEach(l => l(target, prop, undefined)); } return true; }, ownKeys(target) { return Object.keys(target).filter(name => { name != "addListener" && name != "listeners" && name != "toString" }); }, }); p.addListener = (l) => { if (!p.listeners) { p.listeners = [l]; } else { p.listeners.push(l); } }; return p; } } export { Data }; あとは、これに対応した、ウェブコンポーネント bit-checkboxesタグと、reactive-inputタグ。
なかなか便利に使えそうです!

184言語のアルファベット2文字でコード化するISO639-1でしたが、486言語を3文字使ってコード化するISO639-2の方を使うとより広く対応できます。 ということで作った、ISO639.js

日本語はjpn、英語はeng、中国語はchiとなります。(ISO639-1では、ja、en、zh)


input-lang tag demo
外国語対応している言語を、日本でよく使われそうな言語はチェックボックス、その他は日本語の五十音順に並べた言語から好きな数だけ選択します。

選ぶと増え、非選択にすると減るセレクトボックスは、先日作ったinput-multi-selectを使用。拡張タグ作り、増えるほどに楽になります。

ISO639-2を紹介しているサイト「ISO 639言語コード - CyberLibrarian」に、日本語表記がない言語zblは、漢字に着想を得て開発された表意文字、ブリスシンボルでした。

Blissymbolics Communication International - Start


Blissymbolics Communication International - Bliss Workshop
人、地球、空、ペン、口、耳など、よく使いそうなものをシンプルなシンボルとして、その組み合わせで表現するようです。
Blissymbolics Communication International - How Bliss Works
コンピューターが当たり前の現代、更に一歩進められそうですね!
人同士のコミュニケーションにも使えるプログラミング言語を考えてみるのも楽しいかも。

来年4月、10人の新人を迎える予定の、jig.jp鯖江開発センター&本店。
テーマはシビックテック。3-4人ずつ分かれてオンラインチーム開発。内定式で成果発表会!

Aチームは、福井県のオープンデータを使って自動生成する、ご当地クイズ!
観光・グルメのオープンデータが、熱い!


Bチームは、鯖江への引っ越しを支援する、鯖江ハウジング。あるスポットの周囲にある物件とスーパー、飲食店をまとめて調べられます。喫茶店、ゲームセンター、クリーニング、サイクリングロードなど、オススメスポットも追記したいですね!


Cチームは、住んでいる県や気になる県のコロナ感染状況だけをピンポイントに毎日教えてくれる LINE bot、COVID-19 Reminder。厚生労働省の新型コロナウイルス関係オープンデータを使用。 リスクが高くなってきたときだけに通知がくると、慣れてしまって見逃すことが減って更にうれしいかも。


input-week tag demo
近所の飲食店、何曜日が営業しているかも大事なデータ。
簡単に入力できる曜日入力コンポーネント input-week タグを作りました。

シビックテックでも、より豊かな社会の実現へ!
Let's do civic tech!

文字に関してはややこしい日本でしたが日時に関しては、タイムゾーンが複数あるアメリカと比べてぐっとシンプルです。 日時ライブラリ day-es にも対応した、入力コンポーネント群を整備しました。他の入力コンポーネントシリーズと合わせて、必須項目を色付け可能です。

input-date / input-time / input-datetime-local tag demo
下記はinput-dateタグを使う例です。それぞれ InputDate, InputTime, InputDateTimeLocal というクラスとしても使用可能です。 <script type="module" src="https://code4fukui.github.io/input-datetime/input-datetime.js"></script> <input-date id=inp required=required></input-date> <script type="module"> onload = () => { inp.onchange = () => { console.log(inp.value); }; }; </script> HTMLの入力ボックスinputのtype=datetimeの仕様がいつのまにか消えて、type=datetime-localになっていました。 タイムゾーンが含められていなかったことがその理由でしょう。

国際化対応するには、タイムゾーンも入力可能な、input-datetimeタグが必須です!(必要な方がいれば、ぜひ作ってプルリクください / src on GitHub

JavaScriptで便利なalertですが、デザインはブラウザ任せになってしまうので、ちょっとオシャレさが足りません。 E2Eテスト時のスクリーンキャプチャーに写らないのも不便ですね。

そんな時も拡張タグ!popup-alertタグを作りました

popup-alert demo
JavaScriptで、簡単に使えます!
btn.onclick = () => PopupAlert.show("はろー"); プログラム中でユーザーからのメッセージ確認を待って欲しい時は async/await を使います。 btn.onclick = async () => { console.log("確認前です"); await PopupAlert.show("確認してね"); console.log("確認済み!"); }; デザインは、popup-alert.css として切り出しているので、色やフォントなど、お好きなテイストにカスタマイズしてご利用ください。

popup-confirm, popup-prompt も欲しいところですね!

関連拡張タグ
サイト表示時に全面表示するお知らせ記述タグ popup-message

Let's create web apps!

ウェブアプリの使い方を紹介するときに使いたい数字のステップ表示。
普段は非表示にしておき、スクリーンショットを撮るときにのみ表示できます。

数字の注釈追加 - fig-step
レンダリングされた座標やサイズを返す「getBoundingClientRect」を使うと、いろいろ柔軟に使えそうです。

レクチャーなしに、スッと使えるウェブアプリづくりを目指してみます。

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