モノクロタイム

I'm from the future!

技術書典20オフラインイベントお疲れ様でした

告知 イベント

techbookfest.org

前回の参加ログはこちらから。

reiji1020.hatenablog.com

今回の新刊

前回に引き続きハンドメイド本を頒布しました。

今回は非コーディングパートとコーディングパートの2つを一緒にした、総合的なクロスステッチ作品へのAI活用についての本を書きました。

techbookfest.org

gyaopan.booth.pm

※グッズはオフライン会場外ではBOOTHでしか購入できないのでBOOTHのURLを掲載しています。

本の前半ではChatGPTを使ったクロスステッチ図案の作成を試みるプロンプトや微調整のプロンプトなどを紹介しており、後半では前回の資材管理システムの内容を応用して作ったクロスステッチ図案作成サービス「CROSS」のCodex用開発ドキュメントの紹介やその設計方法について解説しています。

刺繍したいイラストの例

ChatGPT(5.4)に作らせたクロスステッチ図案

ChatGPT(5.4)に作らせた使用する刺繍糸のカラーパレット画像

CROSSで作ったクロスステッチ図案の例

ccl-cross.netlify.app

PR動画もあります

www.youtube.com

今回の新しい試み

本の中で紹介したイラストをすぐに刺繍できるクロスステッチキットを同時頒布しました。

  • クロスステッチ布

  • クロスステッチ針

  • 刺繍枠

  • 刺繍糸12色セット

  • 刺繍図案(CROSSで作成）

上記6セットをひとまとめにして2000円でした。

うちのサークルの購入層はリピーターが9割、でもハンドメイドネタだけでは新規の獲得は難しい

スペースに寄ってくださった方とお話していて、うちのサークルは新しくスペースに寄ってくださる方よりも既刊を読んで新刊も欲しい！と思ってくださる方が圧倒的に多いことに気づきました。男女比はおおよそ1:1で、性差なく本を手にとっていただけています。

  • 既刊をずっと買っていて、今回も楽しみに来てくださった方
  • ソーイングをする奥様のために今回も新刊を買っていってくださった方
  • 資材管理ツール本(技術書典19の新刊)の続きが気になって…という方

このようなお言葉もいただきました。

  • 作品づくりにAIを活用しているのを始めて見た
  • 技術書典でもハンドメイド本が出てくれるのは嬉しい

一方で、本のタイトルにハンドメイドという名前がついていることで「全くハンドメイドに興味のない人」の興味を惹きにくい傾向にあることもわかってきました。

たとえば前回の技術書典で頒布した「ハンドメイドの世界でもAIが使いたい！～ハンドメイド資材管理ツールを作ってみた！～」は、資材管理ツールという単語が入っていたのでハンドメイドに限らない趣味の道具や家財などの整理にも応用できそうということで購入していった方が多くいらっしゃいましたが、今回の新刊「ハンドメイドの世界でもAIが使いたい！ Let’s Start Cross Stitch！」は技術に関する単語が一つもありませんでした。

技術書典にいらっしゃる一般参加者の方の多くはテクノロジーに興味があって会場にいらっしゃるので、ニッチを攻めるというよりは完全にリーチ方法を間違えてしまったという例になってしまいました。見本誌を手にとっていただければ十分技術誌として成立していることはご理解いただけるのですが、そもそもタイトルで技術誌であることがわからなければ興味が薄い人には見本誌も手にとっていただけないので反省材料にしたいと思います。

あとクロスステッチキットはだいたい相場での値段で出品しているのですが、

  • ハンドメイドに興味のある方は刺繍枠とか刺繍針とか持ってる（でもたくさんあって困るものではない…）
  • 刺繍糸も色番号がわかれば自力で買える
  • 他の本も買いたい＆予算の都合もあるのでその場で即決できない

チャレンジングな頒布グッズでした…なかなか厳しい。でもクロスステッチは楽しいのでぜひ手にとってやってみてほしいです。デジタルデトックスや精神統一ができるのでぜひ…！！

(↑これは売れないとガチの赤字のやつなのでぜひBOOTHで手にとっていただけると嬉しいです)

リピーターにはいつものCANDY CHUPS Lab.を提供しつつ、新しい出会いも増やすために

すでにCANDY CHUPS Lab.のことをご存知で、かつ既刊の雰囲気やネタ選びに対して好意的な印象がある方はおそらくCANDY CHUPS Lab.でしか読めない・出会えないネタや本に興味があって来てくださっているように感じています。

例えばフロントエンド本については今やハンズオン本よりも仕事や個人開発で使える小ネタ・テクニック本のほうがウケがいいですが、現在の私のスキルセットは「いかにAIコーディングで自分が欲しいものをしっかり設計・開発できるか」の方に特化しており、Webサイトの出面のインタラクションよりもWebサービスそのものの面白さ・ユニークさの設計について考えることのほうに興味があります。私が面白いと思っているものを他の人にも知ってほしいし、自分もやってみようと思ってもらえるきっかけになるのが技術書典という場だと思っているので、やっぱりみんなが興味のあることよりも自分の興味のあることを発信し続ける機会にしていきたいです。

ただし本という形として発信し続けていく以上赤字になるかならないかのところギリギリを攻めていくわけにはいかないので、どうにか新規層を取り込めるようなネタづくりもしていかないといけないとも感じています。（スペースにいらっしゃったmhidakaさんにもえーっフルカラーでこの値段大丈夫？足出てない？と心配されましたｗまだまだ大丈夫です！）

すでに秋の技術書典21に関する情報も出ていますので、次はこのようなネタを考えています。

  • キャラクターぬいぐるみ（通称ぬい）× AI　※ただし一次創作キャラクターに限る
  • ビーズ刺しゅう×AI
  • シール×AI

やりたいことがいっぱいだ！でもシールって11月まで熱量続くかな…

サークル配置とマナーについて

今回私が配置されたのはけ19で、趣味実用サークルの並ぶ島でした。本の内容としてはこれまでも今回もゴリゴリのAI活用の内容を書いているので、AI関連島に配置されていれば人の入り方も色々違った気もしています。

しかし新刊の内容が決まるタイミングとサークル配置が決まるタイミングは後者のほうが後であるため、サークル応募時の単語から趣味実用ワードがたくさん抽出されてしまったための配置だと思うので、次回の応募では少し配置が変わるように考えてみたいです。

また技術書典がコロナ禍以前の勢いを取り戻していくにつれ、サークル参加者としての規範を守らない・守れない方も今回多く感じました。過去にも大声での呼び込みや景表法に抵触しそうなワードを使用して購入を促すなどの行為についてコメントをしたことがありますが、今回も似たような話です。

サークル参加初心者であるならばぜひ規約は読んでほしいですし、他のイベントではOKなことでも技術書典ではだめなこともあります。大事にしたいわけではないのでブログでは詳細には言及しませんが自分の作ったものをアピールしたいあまり周囲への配慮に欠ける行動はしないようにしなければいけません。

会場における禁止事項

自己のスペース（出展ブース）以外での活動（技術書の頒布を目的に参加ください）

自己のスペース以外でのビラやチラシの配布、運営事務局が営業と判断するもの

自己のスペース以外での荷物・頒布物に限らない占拠（自己のスペース内をご利用ください）

その他、運営事務局・スタッフの判断で危険・問題があると判断したもの

https://techbookfest.org/event/tbf20#requirements

終わりに

今回は記念すべき20回目の技術書典ということで、運営のmhidakaさんに改めて会場でご挨拶ができて本当によかったです。半年に一回現行をする時期があるということで新しいことを学ぼう・紹介しようというモチベーションにもつながっていますし、定期的に本を出したぞ！という達成感も得られて生活にメリハリが出ています。もう8年くらい継続して新刊を出せているのでもはや人生の一部になりつつあります。それくらい技術書典は面白いイベントですし、これからも参加を続けていきたいイベントのひとつでもあります。

一方で、コミケやその他の技術書即売会にも参加して新しい出会いの場も広げていきたいと感じています、技術書典を新刊の区切りとしつつ、その他の技術書即売会にも顔を出してCANDY CHUPS Labの活動の幅を広げていきたいです。そのためにはどんな技術書即売会があって、私の書いている本を並べてもよさそうなイベントを選んで…というフェーズが必要になりますが…。関東圏内なら参加できそうなので情報提供いただけると嬉しいです。

引き続き商業誌チャレンジも続けていきたいですが、昨今はAI活用に関する風当たりが強すぎる（特に画像系も含むため）こと、AIについては流れが早すぎて本になる頃には陳腐化しているなどのデメリットが多いです。商業誌というよりは同人誌としてゆるくやっていくのがいいのかもしれません…。

でもAI利活用の場としてのハンドメイドはかなりレッドオーシャンだと思うので興味のある出版社とマッチングできたら幸せだなとも思います。本書きたい！商業誌やりたい！

とにかく、オフライン会場でスペースにお越しいただいた方々ありがとうございました！また次回の技術書典21でお会いできたら幸いです。

オフライン会場で購入できなかった方はオンラインマーケット、BOOTHでぜひ購入いただけると嬉しいです！

techbookfest.org

gyaopan.booth.pm

おまけ：表紙絵について

ハンドメイド本の表紙はAI生成イラストではなく毎回自分で描いているのですが、今回かわいい、上手いと言われることが多かったです。すごくうれしいです！

私は普段から絵を描いているわけではなく、カラーイラストは技術書典のためだけに描く程度なのですがきちんと絵の勉強をしようと思って以下の本を買いました。この本のおかげでこれくらい描けるようになりました。おすすめです！

【電子版オリジナル特典付き！】いいトコどり！人物パーツの描き方

【電子版オリジナル特典付き！】いいトコどり！人物パーツの描き方

Amazon

KawaiiSenseiの　スグ描ける！使える！キャラポーズの描き方 KawaiiSenseiのイラスト技法書シリーズ

KawaiiSenseiの　スグ描ける！使える！キャラポーズの描き方 KawaiiSenseiのイラスト技法書シリーズ

Amazon

人物塗りが劇的にうまくなる　YURIKO式 影指定ワークブック

人物塗りが劇的にうまくなる　YURIKO式 影指定ワークブック

  • 作者:YURIKO
  • マイナビ出版
Amazon

【pnpm】pnpmを使うと規定ではないバージョンのNode.jsを使おうとする問題【Volta】

フロントエンド開発 Web

大変伝わりづらいのですがタイトルのとおりです。

年末年始にひとつWebサービスを開発したのですが、その環境構築で詰まりました。

具体的に言うと、あるパッケージがv22.x以降のNode.jsにしか対応していなかったのでVoltaを使ってNode.jsのバージョンアップを実施したところ、pnpmが使用しているNode.jsのバージョンがどうやっても新しいものに切り替わらずにパッケージのインストールに失敗し続けるという現象が起きました。

経緯

$ node -v
v24.12.0 # Node.jsのバージョンは24.12.0が入っている

$ pnpm node
Welcome to Node.js v24.12.0.      # pnpmもNode.jsのバージョンは24.12.0を使用しているはず
Type ".help" for more information.
>

$ pnpm i
 WARN  Ignoring broken lockfile at H:\dev\git\myapp: Lockfile H:\dev\git\myapp\pnpm-lock.yaml not compatible with current pnpm
 ERR_PNPM_UNSUPPORTED_ENGINE  Unsupported environment (bad pnpm and/or Node.js version)

This error happened while installing the dependencies of eslint-plugin-svelte@3.13.1

Your pnpm version is incompatible with "registry.npmjs.org/svelte-eslint-parser/1.4.1".

Expected version: 10.24.0 # pnpm10.x系は24.12.0系のNode.jsをサポートしているはずなのでNode.jsのバージョンと噛み合っていない可能性がある
Got: 8.15.4

This is happening because the package's manifest has an engines.pnpm field specified.
To fix this issue, install the required pnpm version globally.

To install the latest version of pnpm, run "pnpm i -g pnpm".
To check your pnpm version, run "pnpm -v".
Progress: resolved 85, reused 9, downloaded 0, added 0
続きを読む

技術書典19オフラインイベントお疲れさまでした

告知 イベント

毎度おなじみ技術書典に参加してきました。今回で19回目の開催！

techbookfest.org

前回の参加ログはこちらから。

reiji1020.hatenablog.com

今回の新刊

前回からハンドメイド×ITをテーマに本を作っています。前回は刺繍の図案や刺繍糸のサジェストにAIを使うという内容の本を書いたのですが、今回はエンジニアリング寄りの内容に軸を移し、

「自分がハンドメイド趣味を楽しむときに役立つツールを作ろう！」と思い立ってVibeCodingで爆速でサービス開発したときのTips本を書きました。

techbookfest.org

gyaopan.booth.pm

そもそもどんなサービスを作ったのか

ハンドメイドする人あるあるだと思うのですが、買い出しに来たはいいものの家にどんな資材があったか忘れてしまう・品番がわからなくなってしまうみたいな経験ありませんか？

特に私は整理整頓が大の苦手なので同じ色の刺繍糸を何本も買ってしまったり、似た色のビーズを取り違えて購入してしまうことが多くありました。常々自分の家に今なんの材料があるか手元でわかるようなサービスがあればいいのに…と思っていたところに現れたのがVibeCodingという開発手法でした。

私はフロントエンドエンジニアとして働いているのでAI抜きでもWebサービスのフロントエンド部分を作ることはできるのですが、DB設計やAPI設計などは明るくない分野です。ここをAIに部分的に手伝ってもらうことでおよそ一週間～二週間で自分だけのハンドメイド資材管理ツール「Beace」を開発することができました！

UI設計には自前のSvelteUIコンポーネントライブラリ「cclkit4svelte」を採用することで、CANDYCHUPSLab.ブランドだと一目でわかるデザインの画面を実現しました。

サイトマップ

Beaceのログイン後の画面

※図は新刊の中でも使用しているものと同じです

本職エンジニアのオレオレツール開発×VibeCodingはかなり相性がいい

実際に仕事中でも開発を行っているエンジニアは業務の一環でセキュアプログラミングやセキュリティリスクのないシステム設計を行う方法について自然と身についている方が多いと思います。例えばVibeCodingという開発手法ではコーディングのすべてをAIに一任しているせいでDBのアクセスキーやAPIキーをハードコーディングしたままリモートリポジトリ上にPushしてしまったりなどの問題が指摘されていますが、本職エンジニアの多くにはこういったAI起因の問題を先回りして回避する能力があります。

私もこれまでの開発経験をフル活用して「とにかくスピーディーな実装✕セキュリティリスクのない設計」をテーマにBeaceの開発を行いました。

新刊のダイジェスト音声解説も公開しています

本書の内容をNotebookLMに解説させた動画もあります。

youtu.be

今回の新しい試み

ソーイングセットのノベルティを作った

技術書典というイベントに来場される参加者の特性上どうしてもハンドメイド主体となると興味を持たれづらいのでブース前を素通りされることが多いです。

ただうちはこれから数回の技術書典では何が何でもハンドメイドでゴリ押しするぞ！！！という気持ちでノベルティを作りました。

こちらのノベルティはまだ在庫のご用意があります。BOOTHでのご購入のご予定がある方はぜひ！

iPadで実際にツールを触ってもらう

個人用アプリケーションなので外部向けに公開していない（ログイン制御あり）のですが、当日ブースではiPadをおいて実際のBeaceが稼働しているところを見ていただきました。

「おおーすごい！」「持ち物管理ツールいいよね」などなどの声をかけていただけました！

今後の予定

技術書典20、出るぞ！

まずはBeaceの機能拡張をして、次はBeaceと連携して「作った作品の写真と使った材料を記録するノートサービス」を作ろうと考えています。すでにFigmaで画面デザインを作り始めていて、こちらもシステム設計についてはAIと相談しながら進めていく予定です。

次回は技術書典も記念すべき20回！ということでなにか特別な本を作りたいですね…！ハンドメイド本総集編とか？次回はクロスステッチ×AI本が最有力ですが、果たして…！

引き続き商業誌をやりたい！

もう少し内容を一般化させて「趣味✕VibeCoding=最強！」みたいなテーマで商業誌を書きたいです。

文章を書くのは苦でないし寧ろ好きなのでぜひやりたいです。やらせてくださいっ！！

おわりに

完全に余談なのですが今回「お洋服すてきです！」と褒めてくださった方がいらっしゃいました！め～～～～～～っちゃうれし～～～～！！！ありがとうございました！！！

CANDYCHUPSLab.名義でサークル参加するときはとにかくサークル名やサークルの印象だけでも覚えてほしいので派手な格好をしています。

写真がなくて申し訳ないのですが当日の服装はこんな感じでした！

  • ワンピース：PINKHOUSE 2022年 aoki misakoコラボプリントロングワンピース（アカ）

  • ペチコート：PINKHOUSE 2024年 BerryRose 刺繍入りパッチワークスカート（ピンク）

  • コート：PINKHOUSE 2025年 ハロウィーンワンダーランドワッペン使いゼッケン付きブルゾン（クロ）

  • ネックレス： BABY, THE STARS SHINE BRIGHT 2025年 HEART TRUMPネックレス（ゴールド×エンジ×クロ）

  • ハット：Hoshibako Works ホイップクリームホールケーキ　ハット（いちご）

  • ソックス：しまむら×眞白ありすコラボ　リボン柄ハイソックス（アカ）

スペースに遊びに来てくださった方＆新刊を手に取っていただいた方ありがとうございました！技術書典はあと一週間とすこし続くんじゃ！

【vvvv gamma】GPT-5はビジュアルプログラミングの習得を手助けしてくれるか【GPT-5】

vvvv VibeCoding

GPT-5が出ましたね。

openai.com

会社でもとにかくAI使え！みたいなお達しが出まして、有償プランをプライベートでも使えるように補助金が出ているので色々使うようにしています。

エンジニアでAI活用といえば専らAIコーディング＆AIコードレビューですが、いわゆる文字列による構文が決まっているタイプのプログラミング言語には特効があり、特にフロントエンド系の業務をしているともう手放せない存在となりつつあるのではないでしょうか。私はそうです。

HTMLやCSSが書けることはわかった。プロジェクトを作れることもわかった。ジュニアエンジニアの教育目的として使えることもわかりました。

では構文がない(と言ったら語弊がありますが…)『ビジュアルプログラミング言語』を使うときAIは手助けをしてくれるのでしょうか？

今回はビジュアルプログラミング言語に「vvvv gamma」、AIモデルに「GPT-5(時々Thinking)」を採用しました。

vvvv gammaとはプロトタイピングに特化したビジュアルプログラミング言語の一種であり、特にCGを得意分野としています。

vvvv.org

続きを読む