今年もよろしくお願いいたします。
今年は、何もかも良い感じ、あるいはテキトーに生きるというのを大切にしていきます。考えすぎてスタックしてしまうことが無いように、自分にも他人にも甘く、まあこういうこともあるよね精神を大切に一年を過ごそうと思います。ちなみにおみくじには、学問：自分への甘えを捨てよ。と言われました。あはは。そういうこともあるよね。
ここからは年末の隙間で書いていた話です。
別に興味ねえよって人は、↓の動画を見ると進捗一発でわかります
music : suno.ai
prompt : nostalgic electronic chill pop
こういうBGMあっという間に作れちゃう時代だと、めっちゃ制作捗りますね。GoogleのMusicLMも今度触って、Suno.aiと比較したいなあ。
2023 - 。
彼女はパソコンでコードを書いていますが、自分のあまりの真面目さに悩んでいます。デスクにはエナジードリンクの空き缶が並び、目にはクマが浮かんでいます。すごく辛そうなのを、後ろで動物たちは心配しています。
悩み
コード書き始めてから内容が真面目になりすぎてふざける余地がありません。これは大問題です。もっと崩して書きたいのですが、コードを書く片手間でこっちをメモ感覚で書いているので難しいですね。真面目に不真面目していきたいものです。第3回やっていきます。
今朝スーパーに行きながらradikoを開くと、いつものラジオを聴けないことに気づきました。まさかの帰省トラップです。BEFORE DAWNだけが曜日感覚を取り戻してくれていたのに。今年の私的推薦図書、気になってたのになあ。
須古的推薦図書は、池谷和浩「フルトラッキング・プリンセサイザ」、燃え殻「すべて忘れてしまうから」、特集バンド論「サカナの泳ぐ植物園」、en「サイト分析（2023.03.04）」、村田沙耶香「コンビニ人間」とかかなあ。今年は本を一冊読み切るみたいなことは少なく、Note等で散漫的に文章を読んだりラジオを聴いたりしていました。来年はよく聴き、よく読む年にしたいな。
書きます
匿名ログインの追加
ContextAPIの使用でログイン状態の共有
Metadataの記述
Faviconの置換(仮)
Styleの修正
localStorageを使って良い感じにデータを保持するように
ドット絵に変更がある状態でブラウザバックをしようとした時にアラートを表示する
まさかのここでどん詰まりしました。Next.js の router.events という機能は、App Router から使えなくなったようです。App Routerのデメリットの一つですね。特に僕みたいなAI頼りエンジニアにとっては、うまくサポートされていない情報があることは結構死活問題なのです。主にフロントしかいじっていない人間なので、その辺の知見も薄いです。まあ結局調べるしかないので頑張って調べます。
↑の記事を参考に実装しましたが、どうしてもブラウザバックに対応しません。。。この辺は一旦置いておいても良いのかもしれません。。もっと優先度の高いコア機能あるし。。。。
この辺の知見ある人いたらご連絡いただけると嬉しいです。
+Pixelrtにおいて、Enterで作成できるように
Command +S でもドット絵を保存できるように
削除ボタンの追加
ここでさらに半日スタック。ボタン外を押した時にモーダルを閉じる、みたいなことがしたかったのですが、どうしても出来ない。
console.log(menuRef.current);
<div class="css-1qgaft6">
<div class="css-1yomaiy">Delete</div>
</div>
console.log(event.target);
<div class="css-1yomaiy">Delete</div>
console.log(menuRef.current.contains(event.target));
false
なぜなんだ。。これがどうしても解決できず、ボタン外を押してもMenuが閉じる機能を断念。。結構パターン試して原因究明しようとしたけどダメでした。。まあコア機能ではないので、一旦放置で。無念。だれか教えて〜
ついにドット絵の機能足してくぞ〜
本題にようやく入れる。。時間かけすぎた。。
command+zでUndoできるように
vでペンツール
rで四角形ツール
fで塗りつぶしツール
command+clickでclickした地点の色を取得できるように
command + shirt + zでRedoできるように
Redoが本当に実装できませんでした。1日調べた結果、原因はreactStrictModeだったという悲しい結末。
思ったよりCursorでOpenAIのapi料金がかかってきたので、トークン数をケチるために英語で会話をするように。お金がかかると英語もノリノリで扱えますね。余談ですが。
command + \ でShowUI/HideUI
Help Buttonを設置、ショートカットを見れるように
pで ShowPreview/Hide Preview
ドットツールを色々見た感じ、ボタンをぽちぽちする形のwebアプリが多かったです。クリエイターとして何か作るなら、ある程度の新規性つけたいよねというスタンスなので、PixelrtはFigmaみたいな使い心地+キーマウ+(AI)で書く、というのをコンセプトにしていきたいと思っています。俺、web系のゼミ入ってたらこのツールだけで卒制終わってたんじゃね？と思ってます。サクッと作る気持ちだったのに、想定より規模がデカくなっちゃって大変だー頑張ろう。
課題
ドット絵に変更がある状態でブラウザバックをしようとした時にアラートを表示する
ボタン外を押した時にモーダルを閉じる機能
まとめ
かなり出来てきました。ドットの機能の制作は意外と簡単でした。
次回からはドット打ちながら必要そうな機能を作っていこうと思います。
今見返すと、結構機能つけてるな笑。最初は細かい部分を一個一個記述してたのに、どんどん粒度上がっていってるのが面白い。思ったんですけど、粒度が上がるって表現、難しいな。調べたんですけど、結構人によって定義が違う。これからは粒度が荒い、細かい、みたいな表現にしていこうと思います。
素晴らしい記事を見つけました。
次回は部屋紹介もしようかな（？？）お楽しみに。
2023.12-2024.01.05