PostPixel
URLをSNSにPostするとOGPでドット絵の画像を返すようにしている
https://gyazo.com/a4ebb5a6e19f2bbb7073445a5d91ee7a
フロントエンド
素のHTML + JavaScript
バックエンド
Go
静的サイトじゃないのかbsahd.icon
OGPのために画像を生成する必要があるので、、inajob.icon
あ、そういうことかbsahd.icon
OGP画像のドットに変なジャギがあるけど、どんな処理してるんだろう
いいね！inajob.icon
そういう使い方を想定してます
権利面何も書いてないけど、URLで投稿したものは権利放棄する、みたいにして誰でもリミックスして良いことにしたい
CC0になります、とか書いておけばよいのかな
その旨書いた
2025/7/19
ランダム生成をつけてみたinajob.icon
単なるランダムではない
法則が気になるmoeki.icon
今のアルゴリズム
中心線対称パターン
点対称パターン
クラスタリングパターン
顔のようなパターン
シューティングゲームキャラクターパターン
アルゴリズム募集！
2025/7/18
手元で3D化して3Dプリントしてみたinajob.icon
これ自体はCadQueryでドット絵を立体にするプログラムを組んだ（これもGeminiにやってもらった）
https://gyazo.com/32062dcdf459e71a9fbe5b0f4a4e269c
この機能を付けられないかな？
Three.jsならSTL出力できるみたい
この手掛かりでGemini CLIは実装できるのか・・？
https://gyazo.com/d87a65f23072c105fff9a130c7890a66
ワンミスで実装してきたぞ！すごいぞ！
このままでは3Dプリントに堪えないので若干加工する必要がある
ここからが大変
すごい真面目に輪郭抽出アルゴリズムが実装されてる（と思われる）
だめだな、、Three.jsでは素直にやりたい処理をかけなそう(自前で図形処理すればもちろん出来るが、、)
なんとかてきた
すごい苦労したけど、自分では面倒でかけないようなコードができた
メンテできないとも言う
Three.jsだけではやりたい変換ができなかった
ドット間をなめらかにつなげる加工
矩形を並べてUNIONしてoffset処理を繰り返して角を丸くする
ClipperJSを併用した
ClipperJSの演算結果をThree.jsに持っていくところが試行錯誤だった
3D化の需要は限られそうな割に面積を占めているので、プレビューはボタン押したら開く位でいい気がしたyosider.icon
確かにそうですね。ご意見感謝！inajob.icon
しかしこのツールの需要とは何なのだろう？と改めて考える
ドット絵をSNSで共有するため？
現状全然使われていないので、この辺を追求するのもアリだなぁ
2025/7/17
作例を下に表示するようにしたinajob.icon
https://gyazo.com/7a731dbf9ced9d32c3c30590003c78d0
ドット絵が並ぶとテンションが上がる
フォントをドット風のものにした(by Google Fonts)inajob.icon
つけてみたい機能inajob.icon
対称の図形を簡単に描く機能
塗りつぶし
ずらす
2025/7/16
グリッドを8*8で強調表示するようにしたinajob.icon
24x24がほしいbsahd.icon
やりましょうinajob.iconrevertedinajob.icon再度この対応をしてデプロイしたinajob.icon
デプロイ済み
ある範囲以内ならフリーサイズで指定できてもよさそう
2025/7/13 08:51 描画色が切り替えられない(おま環かも)bsahd.icon
とりあえずFireFox NightlyとChromium(どちらもArch Linux)で再現した
手元でも再現しました。テストは必要・・inajob.icon
ソースコードが大きくなってきてコンテキストからあふれてるのかな？
何を修正してもバグが生まれる
特に変数の多重宣言とか、scriptタグを早々に閉じたりとか、全体を見てない感あるバグが多い
HTMLソースは21750バイトなので、Geminiのコンテキストからあふれるわけがない...はずbsahd.icon
Gemini CLIは何か内部でプロンプトを作ってると思うので、そのアルゴリズムによってソースコードが削られて渡されているのかとエスパーしているinajob.icon
ちゃんと読めという話・・
モジュール化するといい気がするbsahd.icon
リファクタリングしてからさらにおかしい
変数宣言は各ロジックの近くにあったほうが良いのかも（処理をエスパーするに全部のソースを読まずに周辺のソースを読んでいる？）
とりあえずrevertした
描画プレビューは別canvasにするか、DOMかのどちらかが良いと思うbsahd.icon
とりあえずHTMLの1ファイルで完結してることを確認後、OGPを削除した静的版をローカルに保存
適当なDataURIをいれるテスト(削除済み)
これは過去の作例から外してくださいbsahd.icon
今出先なので、後で消しときます！inajob.icondoneinajob.icon
bodyのCSSにjustify-content: center;が入ってるからバグるっぽいbsahd.icon
サイズで規制したいinajob.icon
任意のpng画像のDataURLを受け入れて困ることあるかな？
何か脆弱性に繋がりそうな予感
ただ、URL内なのでサイズは明らかに制限あるし、ブラウザは基本あらゆるサイトから任意のpng読み込めるし...bsahd.icon
あ、こっちは独自でシリアライズ作ってしまったbsahd.icon
行ごとに2進数(画像は二値前提)の文字列を組み立ててBigIntコンストラクターに渡す、そしてそれをハイフンでつなぐだけ
マージするつもりがあるかきになるinajob.icon
完全に別バージョンみたいな感じになるかな〜bsahd.icon
bsahdフォーク版を公開したい(アプリのライセンスを確認したい)
後で自分のもGitHubに上げますね、MITですinajob.icon
OKbsahd.icon
こっちが先にrepoを作ってしまった
要所でいい感じにリロード挟めば戻るボタンで実質undoできる??
いや、画面狭いと普通の64x64とかでも画面からはみ出すbsahd.icon
確かにinajob.icon
「描画されたドット絵はだれでも自由に編集できるよう公開されます」という表記は微妙...bsahd.icon
URLを共有しない限り公開されないので
この辺の仕様どうしようか悩み中inajob.icon
共有するみたいなボタンがあると自然に使えるかな？
単に現ページのURLを返すだけだが。
実装した
URLを&share=true&shareLicence=licence&shareTitle=title&shareAuthor=authorみたいにすると共有画面になるとか?bsahd.icon
これならCC0以外も対応できそうinajob.icon
URLいじればライセンス詐称できるけども、、
この辺がややこしそうなのでまずはCC0のみにしてみた
ややこしいと言っても提供側としてできることは無い
そもそもURLに画像データ全体をいれるという考え方が...って考えてしまった(本末転倒)bsahd.icon
そこはこのサービスの個性かなと思ってるinajob.icon
裏で勝手に書きかけでもデータを収集する事もできる
あと、パレット選択はバグの温床なので一旦消してみた
ドラッグで描画する場合に途中が抜ける
mouseとtouchを別にするより、まとめてpointerEventsにしたら
ApacheだとすぐSubmitted URI too large!になるな〜
URLに画像データを含める
このジャストアイデアから作り始めたinajob.icon
しかし、結局人気画像とか出そうとするとサーバー側に保存せざるを得ない
OGPなし版(=静的HTML版)を試作してるbsahd.icon
https://gyazo.com/18a04d8d5005e024acd97ddab6a8186f
https://gyazo.com/2a2ba077461cea9baccb395472adb7a2
独自のシリアライズを試してるときに面白い結果が出た
よく見かける模様inajob.icon
2016年かー
どうぞどうぞ！inajob.icon
https://gyazo.com/66f012ee889ed539b0cd5156adb59d44
3Dプリントしたら部品が2つに分けられるので簡単に解けますね！(謎の気づき)inajob.icon