学ぶ Node.js と npm ― 点検項目のデータを、ブラウザの外でチェックする
点検チェックシートを、1つのファイルから役割ごとのファイルに分けました。あわせて Node.js と npm を使い、点検項目のデータに書き間違いがないかを、コマンド1つで確かめられるようにしました。基準値の min と max を逆に書い...
学ぶ 
学ぶ 1ファイルで最初の画面 ― HTML・CSS・JavaScript だけで作る点検チェックシート
点検チェックシートの最初の版を、HTML・CSS・JavaScript の3つだけ、1つのファイルで作りました。インストールも準備もいりません。ファイルをブラウザで開けば動きます。下で実際に触れます。点検者を入れて全項目に答えると「記録する...
学ぶ AIが間違えるところ ― ブログ作りで実際にあった5つの失敗
AIは間違えます。しかも困ったことに、間違えているときも自信満々です。「できました」「成功しました」と言われると、つい信じてしまいます。シリーズ「AIと作るための技術」の今回は、このブログを Claude Code で作る中で実際に起きた間...
学ぶ 紙の点検表をスマホにする ― フロントエンドとは何か、何を作るか
設備の日常点検を、紙の点検表からスマホに置きかえる「点検チェックシート」を、ブラウザで動くツールとして作っていきます。作りながら、フロントエンド開発の基本を1回に1つずつ身につけるのが、シリーズ「作って学ぶフロントエンド」の目的です。最初の...
学ぶ AIへの頼み方 ― 目的・制約・完成の条件を伝える
AIにツールを作ってもらうとき、仕上がりを一番大きく左右するのは最初の頼み方です。同じAIでも、頼み方しだいで「思っていたのと違う」ものが出てきたり、一発で欲しいものが出てきたりします。シリーズ「AIと作るための技術」の今回は、人の役割のう...
学ぶ AIでツールを作れる時代に、人がやること
このブログ「Pixelogic Lab」は、サーバーの設定からテーマの切り替え、ロゴ、アイキャッチ画像、記事の下書きまで、ほとんどの作業を Claude Code（ターミナルで動くAIのコーディング支援ツール）に頼んで作りました。では、人は...
DX ログから原因を探す ― 観測データで言えること、言えないこと
前回の記事では、振れ矯正プレスのログを、ブラウザで3D表示・分析するツールを紹介しました。今回はその続きで、ログを分析するときに気をつけたことをまとめます。ログは、装置が実際に動いた記録です。たくさん集めれば、いろいろな傾向が見えてきます。...
DX 装置のログCSVをドラッグするだけ ― ブラウザで動く3D可視化ツールを作った
工場の装置の多くは、動いた記録をログとして書き出しています。でも、そのログが改善に活かされているかというと、意外とそうでもありません。ファイルはあるのに、見づらくて誰も開かない。そんなログを、CSVをドラッグするだけで3Dで見て、傾向まで分...
ツール ブラウザだけで動くOCRで、応募券のシリアル入力を楽にした話
CDに封入されている応募券には、英数字10数桁のシリアル番号が印刷されています。これをWebの応募ページに1枚ずつ手入力するのが、枚数が増えるとかなりの手間です。しかも1文字でも打ち間違えると登録に失敗します。そこで、スマホで応募券を撮影す...
ツール ブラウザだけで使える「レイヤー画像エディタ」を作りました
ブラウザだけで使える画像編集ツール「レイヤー画像エディタ」を作りました。インストールも会員登録も不要で、ページを開けばすぐに使えます。レイヤー画像エディタを開くスクリーンショットに矢印や文字を入れたり、複数の写真を1枚にまとめたり、ちょっと...