ブログ
作ったものの使い方や、作りながら考えたことを書いています。progFocus のチュートリアルと、ミニゲ！・chamfer・ElecLab の紹介など。
RSS で購読する
記事 10 本
電池・LED・抵抗・スイッチを線でつなぎ、「実行！」で本物の回路計算にかけて LED が光るかを確かめるブラウザの回路パズル「ElecLab」の紹介。遊び方と 11 の章の中身、修正節点解析（MNA）で回路を解いている作りをまとめた。
Claude や ChatGPT に作らせた HTML のスライドや資料を、生成し直さずに直して同じ HTML のまま返すエディタ「chamfer」の紹介。できることと苦手なこと、ファイルをサーバーに送らずに済ませている作り、作った理由をまとめた。
ルームを作って 4 桁のコードかリンク・QR で集まり、スマホのブラウザで 21 種類のミニゲームを遊べる「ミニゲ！」の紹介。始め方とロビーの流れ、代表的な 3 つのゲームの進み方、手札や役職を覗かれないための作りをまとめた。
プログラミングにおいて「いきなりコードを書く」のではなく、まず「思考を可視化」することの重要性と、progFocusが解決する課題について解説します。
progFocusの基本操作である「ノードの作成」と「接続」について、ショートカットキーを交えて解説します。
設計が複雑になった時に役立つ「階層化（機能ノード）」の使い方と、大切なデータを守るための「保存・インポート」について解説します。
「クイズアプリ」をテーマに、条件分岐やスコア計算など、ロジックの流れを視覚的に設計する方法を学びます。
単にノードをつなぐだけではなく、機能ノードを使ってシステムを階層化し、データ構造を意識した本格的な設計に挑戦します。
「ふんわりしたアイデア」をprogFocusでざっくり描く。それをAIに渡して「ガッチリした構造」に進化させる。AI時代の新しい設計ワークフローを解説します。
AIによって「拡張」されたprogFocusの設計図。それを今度はGemini Canvasに渡し、React製ポモドーロタイマーを爆速で実装する方法を紹介します。
