2024-04-22
#js 
その場のWiFiにつなぎたい、でも、SSIDとパスワードの入力は面倒ですよね。
そんなとき、WiFiのQRコードがあれば、スマホのカメラでかざし、すぐ接続できて便利です。

でも、課題が2つ
1. WiFiのQRコードが作成されていない
2. パソコンからつなぎたい

解決するアプリ「WiFi QR Maker」を作りました。

「WiFi QR Maker」 src on GitHub

機能は2つ
1. SSIDとパスワードからWiFiのQRコードを生成
2. カメラからQRコードを読み込みSSIDとパスワードを表示

会議室やお店でゲストWiFiを使ってほしい方、ぜひ活用ください。
プログラムは、HTML/CSS/JavaScriptでできた70行1ファイル「index.html」
肝は、こちらWiFiQRクラスのencodeとdecode class WiFiQR { static encode(ssid, pass) { return `WIFI:T:WPA;S:${ssid};P:${pass};;`; } static decode(wifi) { const parse = (name) => { const s = wifi; const n = s.indexOf(name + ":"); if (n < 0) return ""; const m = s.indexOf(";", n + name.length + 1); if (m < 0) return ""; return s.substring(n + name.length + 1, m); }; const ssid = parse("S"); const pass = parse("P"); return { ssid, pass }; } }; QRコード作成はqr-code拡張タグ、QRコード読み取りはqr-code-reader拡張タグでできています。

デザインなどかっこよく作ってくれる方、大募集のオープンソースです。
src on GitHub

links
- 名刺を忘れた!?そんな時、QR名刺メーカー！

2024-04-21
#maker #KiCAD #KidsIT 
WindowsもMacも対応、オープンソースで無料で使える基板作成ツール、KiCADでオリジナル基板をつくろう、第二弾。目玉のかわいい基板づくりの方法です。


紙に描いた絵を写真で撮り、収まるように切り取った画像ファイルを作ります。


KiCADのメインメニューからイメージコンバーターを起動。


元の画像をロード、サイズの横と縦、大きい方の数を100mm以内の作りたい大きさに設定します。（100mm、10cm角以内の基板は安く作れます）


KiCADのメインメニューからPCBエディタを起動。


貼り付けると、オリジナルデザインのシルクスクリーンが登場します！


続いて外形づくり、レイヤーから、Edge Cuts を選択。


編集しやすいようにスナップするサイズを「0.0100mm」に変更しておきます。


「ポリゴンを描く」を選択し、地道に外形を作っていきます。
（DXFファイルがインポートできるので、画像から自動的に滑らかな外形データを生成できると良さそう。手頃なツールがなければ作ってみるのま楽しそう）


描いた外形の点はずらして調整できるので、納得いくまで動かします。
外形できあがり！

次は、部品の配置です。

2024-04-20
#PCN #maker #codefor #KiCAD #KidsIT 
プログラミングサタデー。今日のテーマは「はんだづけ」。作るのは、ピカピカ基板。 PCN上田製ネコ基板をベースにした、Creative Adventure/PCN京都製です。


はんだづけ、開始！まずは抵抗、R1から


コの字に曲げて、表から挿し込み、はんだづけ


最初はおっかなびっくりだったのが、みるみるコツを掴んで、楽しそう！
講師は、はんだづけマスターの新大学生！


できあがり！


もっと作りたい！の要望に応えて、いろいろ用意したものから好きなものにチャレンジすることに。じゃんけんゲーム基板、はんだづけ数、結構多いぞ！


こちらはメロディー時計。


見事完成！


じゃんけんゲームも動いた！自分で組み立ててから遊ぶゲームは格別


障害物を自動で避けるロボ！


ピカピカ光りながら回るコマ！

プログラミングサタデー史上最大の学び。
ものづくりの入口に、ピカピカ基板がとっても効果的！


ひとつ自分で作ると、興味が湧いてくる様子。PCN東京の基板や、PCN秋葉原のアイロンビーズのサイネージも作りたいとものづくり欲がスゴイ！まずはそのベースになる、パソコンをはんだづけしよう！ってことになりました。

今回体験してくれた小学6年生達によるデザインと講師による、ものづくりイベントとして出店したいとのことで、大人チームはKiCADをはじめることになりました。

KiCADはオープンソースで開発されている基板設計ツール。
「KiCADで基板設計入門｜初心者でもわかりやすく解説」を参考に、作成開始！


「Circuit Simulator Applet」で作った回路を見ながら作成。どちらもオープンソースなので、相互にコンバートできると便利そう。すでにあるかも？


回路図、できあがり！
ワイヤーを斜めに引く方法が分からなかったので、ひとまず直角で交差させてます。


「PCB PikapikaBoard」
回路図まで作成したもの、GitHubにて公開。


こちらこどもチーム、yumeからのうさぎがかわいい、オリジナルサイン基板。
「LEDとか部品はいい感じに載せといて」とのこと。

2024-04-19
#js #codefor #fukui 
サイズを指定できるオーダー畳。今の畳の大きさ、枚数から部屋の大きさを計算して、新しい枚数を指定して大きさを計算するWebアプリを作ってみました。


「tatami calc」
1回計算するだけなら、ExcelやNumbersなどの表計算ソフトで計算式を設定するのが手軽ですが、プログラミングしてWebアプリ化すると誰かに共有できて便利です。

アプリづくりの大まかな流れ
1. HTMLでアプリの構造を作る
2. JavaScriptで動きをつくる
3. CSSでデザインする
4. もしもっと調整するなら1へ
5. 完成！

使う人をイメージして、デザインにこだわってみたり、便利な機能を足してみたり、夢が広がるのがアプリづくりのいいところ！

今回の畳計算アプリ、HTMLとJavaScriptとCSSによるプログラムはこのようになっています。 <!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:"> <title>tatami calc</title> </head><body> <h1>tatami calc</h1> <table> <tr><th></th><th>幅</th><th></th><th>長さ</th></tr> <tr><th>畳の大きさ</th><td><input id=inw value=800>mm</td><td>x</td><td><input id=inh value=800>mm</td></tr> <tr><th>畳の枚数</th><td><select id=selnw></select></td><td>x</td><td><select id=selnh></select></td></tr> <tr><th>部屋の大きさ</th><td><span id=tdw></span>mm</td><td>x</td><td><span id=tdh></span>mm</td></tr> <tr><th>新しい畳の枚数</th><td><select id=selnw2></select></td><td>x</td><td><select id=selnh2></select></td></tr> <tr><th>新しい畳の大きさ</th><td><span id=tdw2></span>mm</td><td>x</td><td><span id=tdh2></span>mm</td></tr> <tr><th>差分</th><td><span id=tdwd></span>mm</td><td>x</td><td><span id=tdhd></span>mm</td></tr> </table> <footer> <a href=https://github.com/code4fukui/tatami-calc/>src on GitHub</a> </footer> <script type="module"> const calc = () => { tdw.textContent = parseInt(inw.value * selnw.value); tdh.textContent = parseInt(inh.value * selnh.value); tdw2.textContent = parseInt(inw.value * selnw.value / selnw2.value); tdh2.textContent = parseInt(inh.value * selnh.value / selnh2.value); tdwd.textContent = tdw.textContent - tdw2.textContent * selnw2.value; tdhd.textContent = tdh.textContent - tdh2.textContent * selnh2.value; tdw2.style.backgroundColor = tdw2.textContent > 1000 ? "red" : ""; tdh2.style.backgroundColor = tdh2.textContent > 2000 ? "red" : ""; }; ["selnw", "selnh", "selnw2", "selnh2"].forEach(id => { const sel = document.getElementById(id); for (let i = 1; i < 10; i++) { const opt = document.createElement("option"); opt.value = i; opt.textContent = i + "枚"; sel.appendChild(opt); } sel.oninput = calc; }); calc(); </script> <style> body { text-align: center; font-family: sans-serif; } input { width: 3em; font-size: 18px; margin: 0 .2em; text-align: right; } select { font-size: 18px; } table { border-collapse: collapse; display: inline-block; } th, td { border: 1px solid #ddd; min-width: 3em; padding: .3em; } td { text-align: center; } footer { margin: 1em; } footer a { color: gray !important; } </style> </body></html> HTMLによる構造、JavaScript、CSSの順に並べています。JavaScriptとCSSの順は逆でもOKですし、長くなってきたらファイルで切り分けることもできます。


Webプログラミング道場、ES-Jamでいろいろいじって遊んでみましょう！

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS