福野泰介の一日一創 / create every day

2024-11-19

ウェブで動くOpenSCAD Playgroundは、OpenSCADのWebAssembly版、OpenSCAD WASM Portが使われていました。

これを使ってコマンドライン上でOpenSCADのコードファイル(*.scad)を三角形ポリゴンの集合で3Dモデルを表現する3Dモデルファイル(*.stl)を生成するコマンドラインツールを作りました。C言語のソースコードをコンパイルする感覚で3Dモデルデータを生成できます。

例えば・・・ cube(100); cube.scad として保存。

scad2stl cube.scad

cube.stl が生成されます！

Macであればファインダー上でスペースキーを押すだけ、プレビューで3Dモデルを確認できます。3Dプリンター用の印刷ソフトで印刷しましょう！

「scad2stl on GitHub」
ソースコードと使い方はこちら。Denoとgitがある環境で、git pull して、deno installコマンドでインストールしましょう！

2024-11-18

#print3d #OpenSCAD

初めての使った3DプリンターXYZプリンティング社のダヴィンチから10年。価格に惹かれた今年導入、Bambu Lab社の3Dプリンターの調子が良い！手元に残ったダヴィンチ用のフィラメントをBambu Lab P1SのAMSで使うためには大きさの補正が必要そう。そこで、活躍3Dプリンター！

OpenSCADでサクっと作ったサイズ補正リング。OpenSCADのソースコードの解説に、WebAssemblyでコンパイルしブラウザ上で動くようにしたopenscad-playgroundを発見！

「フィラメントサイズ補正リング - OpenSCAD Playground」
「Render」ボタンを押し、その右となりの「STL」でデータをダウンロードできます。OpenSCADのソースコードの先頭に変数への代入があると、自動的にカスタマイズとして表示してくれて便利な、OpenSCAD Playground。

あとは、STLデータをご自身の3Dプリンター用の印刷ソフトで読み込ませて印刷するだけ。

印刷！ABSのフィラメントはスティック糊や3Dケープでの固定が必要。

「円筒形ボックス - OpenSCAD Playground」
以前作ったOpenSCAD併用の専用ツールをウェブアプリよりもずっとシンプルに実現できました。3Dプリンターがぐっと手軽になりますね！
（参考、3Dプリンター向け任意サイズの円筒形ボックスの3Dデータ生成用OpenSCADコードを生成するツール）

「フィラメントサイズ補正リング - OpenSCAD Playground」
OpenSCADをインストールする必要なく、ウェブ上で編集できるのも3Dモデリングが気軽にできて良いですね！glTFで出力すればXRアプリ用のモデルも作れます！

「めがね - OpenSCAD Playground」
2022年のめがねフェスで印刷した、OpenSCADで作ったメガネもこの通り！パラメータ n の変更で量産できます。
（参考、エルコミュ10周年＆めがねフェス！プログラミングとメガネで創る未来）

Check out this Thing on @thingiverse!https://t.co/INpJvOG0gA @taisukef さんがオフィスに持ってきてくれたダヴィンチのフィラメントを中身だけ出してBambu Labで使えるようにした、など
— はるゆき (@haruyuki_16278) November 18, 2024

別のモデリングツールで作られた、いい感じに固定できるフィラメントサイズ補正データもあります！ by @haruyuki_16278

links
- 7万円、3Dプリンターの衝撃、もうひとつのIoT

2024-11-17

#js

Xで見かけた紐のように動くリンクの表示方法に一目惚れ！

What if HTML had rope you can connect elements with? pic.twitter.com/S8QZtgIxsl
— 𝕮 (@chrisshank23) November 16, 2024

オープンソース「guerrillacontra/html5-es6-physics-rope」をforkしてファイルを整理して2種類のロープとして実験！

「Verlet Physics Rope muti」 src on GitHub
ゆったり動く左側の紐と、シャキシャキ動く右側の紐。パラメータ(args)のdampingの値を変えています。

「code4fukui/physics-rope」
楽しいUXが作れそうです！

2024-11-16

#js #africa #codefor #Tanzania

タンザニアのためのコード、Code for Tanzania!

タンザニアでもらったレシートすべてにQRコードが！

アクセスするとレシートの内容がウェブで見えます。
運営しているのは、タンザニア政府の税務機関、Tanzania Revenue Authority。
HTMLでしか取得できず、APIもなさそうなので、JSONで取得できるようにレッツ、シビックテック！

「Tanzania Receipt QR Reader」 src on GitHub
リシートのQRコードを読み込ませるとHTMLをJSON化して取得し、日本円またはドル表示付きで表示するウェブアプリです。タンザニアのレキートを持っていない方は、DEMOモードでどうぞ！

レシートにシークレットとして時間分秒がついているものと、ついていないものがありました。
Cookieを使ってレシート取得ページへアクセスします。 fetchReceipt.js import { getCookie } from "./getCookie.js"; export const fetchReceipt = async (receiptVerificationCode) => { const n = receiptVerificationCode.indexOf("_"); if (n < 0) throw new Error("needs _hhmmss"); const vcode = receiptVerificationCode.substring(0, n); const s = receiptVerificationCode.substring(n + 1); const hms = s.substring(0, 2) + ":" + s.substring(2, 4) + ":" + s.substring(4, 6); //const hms = "21:20:46"; const baseurl = "https://verify.tra.go.tz/"; const url = baseurl + vcode; const res = await fetch(url); //console.log(res.headers); const options = { headers: { "Cookie": getCookie(res, "ASP.NET_SessionId") } }; //console.log(options); const res2 = await fetch(baseurl + "Verify/Verified?Secret=" + hms, options) const html = await res2.text(); return html; }; 取得したHTMLからJSON化するコードは parseReceipt.js です。

CORS設定されておらず、ブラウザから直接アクセスはできなかったので、下記のようにサーバーアプリケーションを作って、API呼び出しで使えるようにします。 import { fetchWeb } from "https://code4fukui.github.io/wsutil/fetchWeb.js"; import { getReceipt } from "./getReceipt.js"; export default fetchWeb(async (param, req, path, conninfo) => { //console.log("param", param); return await getReceipt(param); }); サーバーに設定してできあがり！（参考、README.md#setup）

こちらがタンザニアのスーパー