「アプリ」カテゴリーアーカイブ

アプリの更新や設定ファイルの情報、サイトの構成。

Fab Your Vibe! – バイブコーディングで遊んできました

FabCafe Kyoto のイベント『Fab Your Vibe! – バイブコーディングで遊ぼう vol.2』に参加してきました。こんなイベントです。

Claude Code、Cursor、CodeX などのAIコーディングツールを利用して、アイディアを形にしてみましょう。ルールはひとつ。コードを一切書かないこと。

どこで、なにに、どんなコーディングをしてもらって、どうやって動かすの?レベルでしたが、例をみせてもらって、そもそものところからAIに教えてもらいつつ、何とか進めることができました。

最後に、参加者の皆さんが作られたアプリを見せて頂いたのですが、画像や動画や地図、音楽・ショートストーリーにゲームと、ちゃんと動くし、組み合わせがリッチ。全部AIが教えてくれたんですよ、と言いつつも、その人にしか表現できないこだわりが形になっているのです。人間も、AIも、すごい。

さて私。このマルチメディアの時代にレガシーとは思いつつ、趣味は籠ですから、籠のアプリを作ってもらいました。ヤバい事故も起こしかけて、早い段階で気づけてよかったね、なんて、慰めなのか自己正当化なのかわからないコメントももらいつつ。

説明より描かせたい画像を見せるといいよ、などいろいろ教えていただいたスタッフの皆様、ありがとうございました。その後、仕様簡略化&修正を加えてできたのがこちら。

スマホでも動きます。試してみてください。

プラかごの後差し模様(ステッチ)の体系と進化

先に「ピクセル絵」として、短いバンドをドットのように差し込み、絵を描く手法を紹介しました。しかし、実際のプラかご作りにおいて、より広く使われているのは、長いバンドを側面全体に通して幾何学的な模様を描き出す装飾技法です。

本サイトでは、この技法を「後差し模様」ないしは「ステッチ」と呼び、順を追ってその組み合わせを見ていきたいと思います。それに先立ち、なぜこの技法が生まれたのか、どのような仕組みで成り立っているのか、その全体像を整理します。

1. すき間から表面へ:PPバンド独自の進化

竹細工や籐細工における伝統的な「差しひも(透かし編み装飾)」は、六つ目編みや四つ目編みなどの「編み目のすき間(目)」にひもを通す技法でした。

一方、PPバンドで作るプラかご(主に平編みベース)では、目ではなくバンドの表面に重ねて差し込みます。これは、PPバンドという素材が薄く、滑りやすいからこそ可能になった、独自の進化形と言えます。紙バンドのように編み目や幅自体を変えることが難しい代わりに、薄いバンドを層のように重ねることで装飾性を高める道を選んだのです。

2. 構造のレベル分類:支点のルール

滑りやすいバンドを固定するためには、単に重ねるのではなく、既にあるバンドを支点として利用する必要があります。この「何に留めるか(依存関係)」によって、模様の構造は以下のレベルに分類できます。

  • レベル0(フレーム): ベースとなる平編みのかご本体。
  • レベル1(直交・シフト積層): フレーム(Lv.0)を支点として差し込む層。
    • 基本: 水平・垂直方向(0度・90度)に重ねる。
    • 変則シフト: 「横1マス・縦3マス」のように座標をずらして通すことで、72度・108度、「横3マス・縦1マス」で18度・162度などの角度で通す。
    • ループ(鱗状): フレームのバンドに対して「巻き付ける(ループする)」ことで立体化し、その連続で模様を作る。※斜めに進みますが、足場はあくまでフレーム(Lv.0)であるため、構造上はレベル1の亜種に分類されます。
    • ピクセル絵も構造的にはこのレベル1に属します。
  • レベル2(斜交積層): レベル1のバンドを支点として差し込む層。
    • レベル1でできた浮きや交差を利用することで、45度・135度方向への配置が可能になります。レベル1の足場がないと成立しないため、工程順序は不可逆です。
  • レベル3以降: レベル2以上のバンドを支点として、さらに複合的に編み込む層。

3. 文献に見る技法の変遷

2010年代前半からの関連書籍を紐解くと、この「レベル」が段階的に活用され、補強目的から装飾表現へと進化していった過程が見て取れます。

黎明期:補強としてのレベル1 最初期の文献である高宮紀子の著書[1][2](2013-2014年)では、全60作品中、バンドを重ねる技法はわずか2点のみです。

  • 文献1(p.75, 90): 全面に同方向のバンドを重ねる作例が見られますが、これは模様というより、薄いバンドの強度を補うための「二重化(補強)」としての意味合いが強く、レベル1の初期段階と言えます。

過渡期:装飾表現の開拓とレベル2の登場 2014年頃、紙バンド・PPバンド手芸の第一人者として現在も活躍する古木明美の著書が登場することで、表現の幅が一気に広がります。古木明美の著書[3](2014年)では、紙バンド手芸で培われたデザイン感覚が持ち込まれ、以下の重要な技法が確認できます。

  • ピクセル技法(風車模様): 田の字の4ピクセルに三角を作る「風車模様」が複数の作品で使われています。これは短いバンドで面を埋める技法であり、構造的にはレベル1ですが、幾何学的な絵柄を描くという装飾的な意図が明確です。
  • レベル2の実践: 同書(p.37)の「赤×白ステッチのバスケット」では、水平に通した赤バンド(Lv.1)の上から、白の細幅バンドを45度・135度で交差(Lv.2)させる構成が登場します。
    • 「レベル1を支点としてレベル2を通す」という積層構造が、この時期すでに作品として完成されていたことは特筆すべき点です。

発展期:機能からの派生と数学的探求 翌2015年、富田淳子の著書[4]では、ベトナム現地の技法を通じて、さらなるバリエーションが紹介されます。

  • 機能の装飾化(鱗模様): 作品(23, 30, 31)に見られる、バンドをループさせながら斜めに進む模様です。持ち手をカゴ本体に巻き付けて固定する技法を、装飾として側面全体に応用したと考えられます(Lv.1の亜種)。
  • 幾何学的・数学的応用: 「幾何学模様のバッグ」(p.66)では、赤のフレーム(Lv.0)に白の水平バンド(Lv.1)と白の斜めクロス(Lv.2)を加え、さらにミントグリーンのバンドを72度・108度(Lv.1)に通しています。

現在:技法の定着 その後、2021年頃からの再ブーム以降に出版された書籍では、素材の多様化と共にこれらの技法が統合・洗練され、複雑な模様が前面に現れるようになります。

特筆すべきは、2016年から2020年にかけての出版空白期です。この間、技法書の出版は途絶えましたが、同時にSNSが情報インフラとして定着した時期でもありました。 書籍による図解の代わりに、SNS上の写真を通じて視覚的に情報が交換されたことで、「花模様」に代表されるような、より映える、かつ高度なステッチがユーザー間で広まったと考えられます。

第1次ブーム後期の先駆的な試行錯誤(レベル1の多様化とレベル2の確立)は、この空白期のSNS文化による醸成を経て、現在に至るPPバンドの標準的な装飾技法として、完全に定着したと言えるでしょう。


参考文献

  • [1] 高宮紀子 (2013). 『PPバンドで編む 毎日使えるプラかご』 誠文堂新光社.
  • [2] 高宮紀子 (2014). 『PPバンドで編む オシャレなプラかご』 誠文堂新光社.
  • [3] 古木明美 (2014). 『PPバンドで作る かわいいプラかごとバッグ』 河出書房新社.
  • [4] 富田淳子 (2015). 『PPバンドで作るベトナムのプラカゴ』 文化出版局.

V1.9.1 リリース

issue #103~#108 に対応しました。

  • Ver1.9.0 にバージョンアップ済の方は、そのまま更新してください。CbMeshからの起動に変更はありません。
  • Ver1.8 など、1.9より前のバージョンをお使いの方は、各アプリ個別起動からCbMeshによる起動に変わりますので、「V1.9.0 リリース」の説明をご覧ください。

今回の修正は、主には上級者向け・教材用の図解支援機能です。完成図だけではなく、編み途中の任意の状態の画像を生成できるものですが、そのためにセットする値は、通常の利用には不要ですから、初期状態は非表示となっています。

画像のカスタマイズ関連

1.上辺・左辺に表示される実寸目盛の表示/非表示を指定可能に

実寸目盛は、サイズを把握したり、型紙にする時には必要ですが、絵だけを使う時には不要でしょう。[編集]メニューの[バンドの種類選択]画面で、表示の有無を指定できるようにしました。

2.ロゴ画像・ロゴ文字列を指定可能に

[メモ他]のタブに「ロゴ画像」「ロゴ文字列」の入力欄が増えました。ここにセットした値は、プレビュー・プレビュー2の画像に表示され、画像ファイルにもそのまま含まれます。

3.描画用パーツを[プレビュー]だけでなく[プレビュー2]にも表示可能に

[追加品]タブで、様々な付属品をパーツとして指定することができますが、それを画像に表示させるかどうかを指定する「描画」チェックボックスに「描画2」が増えました。[プレビュー]と[プレビュー2]どちらの画像に表示させるのかを指定できます。

4.[追加品]の描画用パーツ(付属品データベース)に、「バンド」を追加

従来は「横バンド」だけでしたが、位置・角度・本数を指定できる「バンド」が加わりました。

描画形状が「バンド」「線分」「上半円(周)」「上半円(径)」については、描画位置を「座標」で指定した場合、”x,y,angle”の形式で描画角度を指定できます。座標の原点は、いずれも底の中央です。

3.の設定例では次のような画像になります。

表示順画像生成

[編集]メニューに、「表示順画像生成」機能が加わりました。クリックすると、次のような画面が表示されます。

しくみとしては、

  • データを構成するバンドの各行に対して
  • 「表示順」(および「非表示順」)の整数値を設定しておくと
  • 指定した表示順番号の値に対して
  • 表示順値が大きいバンドの色を「非表示色」に変えた画像を
  • 生成先フォルダに、<ファイル名>_<表示番号>.gif として生成する

ものです。

「表示順」「非表示順」については、どのタブでも通常は表示されませんが、[列を表示]ボタンをクリックすると表示され、入力できるようになります。

「画像生成」ボタンでは、特定の表示番号の画像をすぐに生成して開きます。
「一括生成」ボタンでは、指定した範囲の画像をまとめて生成することができます。

5点のアプリとも同様ですが、以下は、Squareで、プレビューのファイル名「P1」で[一括生成]、プレビュー2のファイル名「P2」で[一括生成]、計2回行った時の出力例です。画像2セットと合わせて、対応表示順のファイル名・バンドのメモ欄記載事項をリストしたテキストファイル、2点が出力されています。

ダウンロードはこちら。
Release v1.9.1 のリリース
添付の設定ファイルには、付属品データベースに「バンド」が追加されています。

さて、この画像生成機能ですが、実装しながら、こんなややこしくて面倒くさくて難しい機能、使える人はいるんだろうかと思ってしまいました。絶対使うよって方、います?(いいね♡で教えて下さい) ニーズがあるようなら、もう少し詳しく説明します。。。ちなみに、AIに聞いていただくとほぼ完璧に教えてくれます。

V1.9.0 リリース

issue#102 に対応しました。
このVerから、アプリの起動方法が少し変わります。
更新される方は、以前と少し操作が変わりますので、ご注意ください。
切り替えてしまえば、より便利にお使いいただけると思います。


更新インストールされる方へ(重要)

インストールに先立って、ご自分の設定ファイルの場所と名前を確認しておいてください。アプリを起動して[設定]メニューから[基本設定]を選ぶと、「設定データの保存先」として場所+ファイル名が表示されます。通常は、ドキュメントの「CraftBandMesh.XML」です。

この設定ファイルには、追加で登録したりインポートしたバンドの種類や色、編みかたなどの情報が登録されています。ご自分にとっての大切なデータベースです。

Ver1.9 を更新インストールして、最初にいずれかのアプリを開くと、設定ファイルの場所を入力するよう促されます。この時、上で確認した場所確認した名前のファイルを指定して[OK]としてください。そして、そのアプリは、×ボタンではなく[終了]ボタンで閉じてください。これで、更新前と同じ設定データが使えるようになります。

以降は、以下、Ver1.9の操作となります。

※新たにインストールされる方・更新でも追加情報は何も登録していない、という方は、通常の初回起動の手順を行ってください。


Ver1.9での起動

5点のアプリは、今まで、デスクトップのショートカットから個別に起動していました。

Ver1.9 では、CbMesh.exe というランチャーが追加され、CbMesh.exe を起動して、そこから5点のうち使いたいアプリを開く、という構成に変わりました。デスクトップのショートカットも5点から1点とシンプルになりました。

CbMesh.exe の設定画面には、各アプリのショートカットを作る機能があります。アプリのショートカットを作れば、従来のように起動することもこともできます。


また、アプリで作られるファイルの標準の拡張子が、”.xml”から”.cbmesh”に変わりました。中身は変わりませんが、拡張子が変わることで、アプリに対応付けられるようになります。”.cbmesh”に対して、CbMesh.exe で開くように指定してください。対応付けると、データファイルのアイコンの絵も変わります。

CbMesh.exe には、旧拡張子を新拡張子に変更する機能もあります。

※従来の”.xml”ファイルも、CbMesh.exe および対応アプリの画面にドラッグして開けます。また、”.xml”を指定して保存することもできます。


なお、本Ver.Upにおいては、各アプリの機能自体は先と変わりません。
その他、CbMesh.exe については、こちらのページをご覧ください。

ダウンロードはこちら。
Release v1.9.0 のリリース

V1.8.15 リリース

issue#98~#101に対応しました。

描画色に画像が登録可能に

[設定]メニューの[描画色]画面で画像が登録可能になりました。

右から4列目に「画像」カラムが増えました。セルを選択し、画像ボタンからpngファイルを指定してください。半透明にしたい場合は、ペイント3Dなどのアプリで透明度を指定した画像を作ってください。

[バンドの種類]に対して、画像を登録した色を割り当てると、プレビュー時のバンド表示時に、指定した画像を敷き詰めた表示ができるようになります。メッシュワークで、布をテープ状に編んでパッチワークの模様を作ったことがありましたが、そのような時に便利かと思います。

ただし、画像のどの位置が表示されるかについては解像度などにより変わりますので、正確な画像表示というより、模様の目安程度とお考え下さい。また、登録可能なのは、小さい.png画像だけです。

squareとhexagonのプレビュー図の例です。

この例のバンドの種類「模様テープ」の設定ファイルです。

Square45の折りカラー機能修正

[プレビュー]画像表示のバグ修正と合わせて、45度と135度のバンド色が同じ場合、チェックボックスの背景をグレーにしました。チェックは可能ですが、折り返しても色が変わらない箇所が、見てわかるようになりました。

例えば以下は、「斜め編みの崩し縞のかご」のデータですが、「折りカラー編み」にチェックを入れることで、作りたい高さにおけるバンドの並びを確認することができます。左図、高さ10だと両方向全て同色なので、縁の始末を外側に折り返しても大丈夫ということがわかります。右図のように高さを9.5に変えると不一致箇所がでてきます。

「折りカラー編み」にしない(最終的にはチェックを外す)場合でも、デザイン途中でオン/オフは可能ですから、高さ選択の参考などに使えるかと思います。

ダウンロードはこちら

Release v1.8.15 のリリース

※添付の設定ファイル CraftBandMesh.XML の変更点は以下。

  • 描画色に、画像情報と画像文字列のフィールド追加(中身は全て空です)
  • 白、deep白のRGB値を255・255・255から253・253・253 に変更(v1.8.14のフォローアップ)
  • 編みかたに「ノコギリ状に折って差し込む(プラス8個)」を追加