ソフトウェアの主成分、プログラム。別名ソースコード。
ソースコード版のオープンデータが、オープンデータより歴史が長いオープンソース。
ゲームなどで「ライセンス」と表示されているもので見かけた人も多いと思う。

あるソフトウェアのプログラムが公開されているだけでなく、自分で使うことができるのがオープンソース。 派生したソフトウェアのソースコードもオープンソースにする必要があるものと、公開の必要がないものに二分される。

昨今、よく使われているのはより自由度の高い後者。MITライセンスや、Apatchライセンスは、オープンデータの代表格、CC BYに似ていて、著作者表示をするだけでいろんな用途で活用可能なので、積極的に活用したい。

世界中の行政システムでも活用進むオープンソース、東京都が大発表!
東京都がオープンソースソフトウェアを活用するためのガイドラインを公開|Hal Seki|note


Tokyo OSS Party! - connpass
同時に発表された成果物をオープンソースにするアイデアソン、ハッカソンイベント!
行政、民間企業だけではなく、学生や市民も自分のスタイルで貢献できるのがオープンソースの魅力です。


東京備蓄ナビ
憂いないために備えよう!東京都による備蓄をナビしてくれるウェブサイト。


なんとすでにオープンソース!プログラムをダウンロードして使えます。将来GitHubに移管する予定とのこと。


備蓄ナビsrc on GitHub
かわいいサイのキャラクターはオープンソースの範囲外ですが、ステキなデザインでそのまま動くので、サイト名を変えて公開!


今、準備しているものと確認しやすいよう、チェックボックス化!


分かりやすいイラストも入ってます。

S3.jsを使って生成した静的ファイルをまとめてアップ。ディレクトリ構造の関係で今回はHTTPでの公開ですが、SSL対応のウェブサイトとしても使えそうです。

オープンソースでいきましょう!

links
- 東京都公式の新型コロナ対策サイトはオープンソースで作られた!:日経ビジネス電子版

VRふくいに次ぐ福井xRプロジェクト第二弾、「ARふくい」スタート!
福井県内のおもしろオブジェクトを3Dスキャン、3Dオープンデータとして公開していきます。


花輪、部屋の中に置くには大きすぎました!


どどーんと届いた、Hana道場6周年記念のお祝いの花輪。
せっかくなので、iPhone 13ProのLiDARを使った、Scaniverseで3Dスキャン。


いい感じにトリミングするだけで3Dデータができあがり!お手軽!

ARふくい」(src on GitHub)
iPhoneでブラウザからすぐ見られるAR、USDZ形式にエクスポートしてリンクを設置。
ひとまずコンテンツ1つからスタート!プルリクお待ちしてます!


Hana道場バザーにはどんぐりの販売も!こどもたちの作った作品の販売にも、チャレンジしてみたい!
見ても、見せても、売っても、買っても楽しい、NT鯖江は来週末!


山うにたこやき!


ご近所、富士書店さんに出店していた「ちびのわcurry


7年目に入ったHana道場、ますます楽しくしていきましょう!

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」を使うと、いろいろ柔軟に使えそうです。

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

スマホやPC、VR端末上のブラウザで動くアプリのことをウェブアプリと呼びます。ウェブアプリづくりの要は、使いやすい拡張タグに有り、という話。

一つを選ぶ「input-radio拡張タグ」に、JSON配列データからサクッと選択可能なUIを実現する機能を追加しました。
input-radio

ブラウザはサーバーからデータを受け取り、ユーザーに表示し、操作を求める、クライアント・サーバーモデル。 サーバー側で行うことをバックエンド、ブラウザ上で行うことをフロントエンドと呼び、それぞれ異なる技術が使われています。

フロントエンドの歴史
1989年 ウェブと共に、HTML誕生
1994年 構造と見た目を分離するCSS誕生
1995年 ブラウザ上でちょっとした動きを加えるJavaScript誕生
1996年 Java Appletがブラウザで動作(Netscape Navigator)→現在は廃止
1998年 HTMLをJavaScriptで動的に操作するDOM誕生(ダイナミックHTML
2006年 DOM操作のブラウザの不便や非互換性を解消するためのjQuery誕生
2014年 Vue.jsなどのフレームワークが誕生

時代とともに変わってきたフロントエンドの開発方法。いろいろ作ってきた経験を踏まえて、2021年のウェブアプリの個人的開発方針を決めました。

1. 構造(HTML)
必要な構成はHTMLで記述、足りないタグは再利用を意識したウェブコンポーネント(extends HTMLElement)を作成して使う。 ハイフン付きのオリジナルタグをHTMLElementを継承し、クラスは名前付きexport、スタイルは含めない。 (*IE11, Internet Explorer 11 は非対応)

2. 動き(JavaScript)
構造に合わせた動き(ロジック)をESモジュールで記述、サーバーとはfetchやWebSocketでやりとりする。 ブラウザ上でも何も手を加えず動かすことができるJavaScriptを基本とし、HTML内またはESモジュールとしてファイルを分離する。 複雑なロジックを記述する場合は、TypeScriptを使って、トランスパイルするもあり。

3. 見た目(CSS)
見た目はCSSファイルで記述、sakura.cssやneomo.cssなどで一括して設定しておき、ウェブアプリの対象ユーザーに合わせて調整する。 HTML内またはcssファイルとして分離する。 構造が分かっていれば、動きと独立して作業をすることができる。

フレームワークは、フロントエンドやバックエンドでの使用する技術に制限ができ、開発環境も重くなるので、使いません。

構造、ロジック(動き)、スタイル(見た目)で作った例
CyberPhoto - src on GitHub

やっとしっくりくる開発方法が見つかった感あり。
いろいろ作って、改善していきます!

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