MANA-DOT

PIXEL ART, PROGRAMING, ETC.

自宅のモニタをついにウルトラワイドモニタした & 内蔵KVMスイッチのレビュー

現在のデスク周辺

Dellの34インチUWQHD(3440x1440)モニタ、 P3424WE を購入しました。

もともと デスク周り2022 - MANA-DOT で書いた通り、27インチのWQHDモニタを愛用していましたが、前々から作業領域的にはWQHDが最適だと思うものの作業領域外に追加の情報(figmaのデザインカンプだとか、ビルド後のプレビューだとか)を表示したいと思うことが多々あり、UWQHDサイズのモニタがほしいと思っていた(加えて会社のモニタはUWQHDであり満足していた)ための購入となります。

今回モニタ購入の際の検討事項の一つが、「内蔵KVMスイッチの出来」であったため、本エントリでは特にモニタ内蔵のKVMスイッチ周りについて記載をしようと思います。

続きを読む

2023年のskeb活動まとめ

2023年は、Skeb活動の方針 - MANA-DOT を書き、skeb活動の方針を明確にするとともに活動再開をしました。幸いなことに何件かリクエストを頂けたので、2023年の活動まとめとしてこのエントリを書きます。

https://skeb.jp/@manaten

2023年9月

SNSアイコン向けのナマズ (fukutommyさん)

namazu

前職同僚の @fuktommy さんから、skeb活動再開のエントリを書いてしばらくして頂いたリクエストです。SNSアイコンで使えるナマズのキャラクターということでした。SNSアイコンということである程度オリジナリティがあったほうが良さそうと思い、こっそり本人にDMで好きな色を聞いて、本人の顔も知っているので少し寄せて描いてみました。

この手の依頼だと、ただの作画だけでなく「キャラクターデザイン」の作業も兼ねることになるため、面白い反面何度は上がるなという学びを得ました。

2023年10月

飼い猫ちゃんのドット絵

非公開希望のため画像は載せられませんが、ノルウェージャンフォレストキャットの飼い猫ちゃんのドット絵を描きました。

リアルにあるものをドット絵に + もふもふの猫種ということでこれまた難しいリクエストだったと記憶してますが、このときはこの一つだけリクエストを受けていたためゆったりと描いていた記憶です。

2023年11月

小桜こもも様

小桜こもも様

個人vtuberの 小桜こもも様 のドット絵です。Twitterを見たところ魔法少女がお好きなようでしたので、それっぽいモーションを2つ追加しています。 また、髪型に2バリエーションあったのでマイナーチェンジと言う形で両方のバリエーションを用意しました。個人的にはショートが好み。インコモチーフのカラフルなヘアスタイルが一番の特徴であり、ドット絵表現が難しいところです。

キャラクターものは年初に書いた 一番星はてのちゃん スタイルが、自分で描いてて好みだったので、指定がなければこのスタイルを踏襲しようと決めていたのですが、動物系の依頼が多くてようやく描けたという感じでもありました。また、モーションも1モーションだと寂しいので最低3モーション描こうと決めており、実践した形になります。なおこの縛りはこのあと自分の首を絞める事になります。

2023年12月

小桜こもも様の納品をした翌日、4つのリクエストが来たため11月後半~12月にかけて4つ制作していました。上記の通り、1キャラクターあたり3モーション描くと決めていたので、この縛りで非常に時間がかかってしまいました・・・。すべて人間の女の子キャラクターだったので、はてのちゃんスタイルで描いてみてます(skebのリクエストでも、特に海外の方から 「I like your style」というコメントを頂くので、需要はありそう、ではある)。

リシャ様

リシャ様

海外のイラストレーターの リシャ様 のアバター?です。紫のショートヘアと垂れたうさ耳が特徴の宇宙飛行士とのことです。

眠るのが好きということで眠るモーションと、うさぎ+宇宙飛行士なので飛び跳ねて喜ぶモーションを追加しています。

Moshi Mui様

Moshi Mui様

英語圏Vtuberの Moshi Mui様 のドット絵です。 茶髪の中に紫のアクセントが特徴的な髪型ですが、ドット絵の苦手な表現ではあります。

2モーション追加する縛りを貸していたのですがどういう活動をされているのかよく知らなかったため、汎用的に使えそうな手を振るモーションと、Xでラーメンの画像をよく見かけたのでラーメンを食べるモーションを追加しています。

れすと様 (ランスシリーズのリセットちゃん)

れすと様 (ランスシリーズのリセットちゃん)

れすと様 より、ランスシリーズのリセットちゃんのリクエストです。地味に版権のリクエストは初めてですね(もっと挑戦したい)。

ランスシリーズはよく知らなかったのですが、主人公ランスの娘で父譲りのガハハ笑いをするキャラクターのようで、ガハハ笑いがリクエストだったので、通常モーションとガハハ笑いモーションを描いています。

3つ目のモーションは、こちらもよく知らないのですが参考資料からリンクされていたリセットちゃんのアニメーションのモーションをドット絵化したものです。地味にこのモーションのために、リセットちゃんは他のリクエストよりもコマ数が多く、時間もかかっています。キャラクターの詳細が多いほど描きたいものが増える、仕方ないね。

匿名様

もう一件、匿名希望の方からオリジナルキャラクターのドット絵をリクエストされて描いています。 狐モチーフで狐耳とオレンジツートンのショートヘアが可愛らしい女の子でした。

さいごに

2023年は転職をし、エンジニアマネージャではなく一般エンジニアの立場に戻ったわけですが、労働時間が大きく変わらないのに精神的余裕はできたのか、しばらくできてなかった創作活動を再開したいと思える余裕ができ、そのリハビリ・練習的な意味も含めてのSkeb再開でした。

いざ初めて見てわかったのは、そもそもSNSで創作活動をほとんどしてない自分の場合、Skebでリクエストを受け付けていてもめったにリクエストは来ず、納品してトップに上がったタイミングで複数リクエストが来るのだということでした。実際今日の納品を終えたあとにも3リクエスト来ています。

個人的には自分の趣味のキャラクターばかり描くより、色んなキャラクターを描いたほうが経験値が貯まると思っているため、たくさんリクエストをいただけるのはありがたいと思える反面、結構な時間を費やしてしまうのでうまく流用をコントロールしたいところです。

本当は1キャラ3モーションを4時間程度で描きたい(し、最初はかけると思っていた)のですが、いざ描き始めるとこだわってしまったり、モーションがなかなか決まらなかったりしてトータルで8時間程度かかってしまうというところでした。このあたりは慣れで改善していきたい。

2024年もよろしくお願いします。

2023年のmanatenのフロントエンド

この記事は?

フロントエンドの(に限らずですが)技術はよく言われるように移り変わりが早いです。とはいえ個人で全て追い切るのは難しく、また必ずしも新しいものを使い続けていればいいわけではないとも思います。個人的には新しい技術であっても古い技術であっても、きちんと自分の中に技術採用の軸があることが大事だと思っています。

このエントリではmanatenが2023年末現在でフロントエンド(周辺)でアプリケーション開発をするときに、利用することが多い技術を概要や理由付きで挙げていきます。

(なお年の瀬に思い出して書いてるため、抜けがあったり内容いい加減だったりすると思います。)

続きを読む

JavaScriptを使ったアニメーションgifの切り出しと拡大

自分の場合ドット絵のちびキャラを複数バリエーション書くとき、以下の画像のようにバリエーションを縦に並べて書いていく事が多いです(画像はskebでリクエストを頂いたナマズさんです)。

namazu

このような形式で描き、画像をバリエーションずつに分割し更にSNSアイコンとして利用しやすいよう5倍サイズにしてから納品しています。 これをバリエーションが多い場合に手作業でやるのは面倒ですので、今回は簡単なNode.jsスクリプトで分割・拡大を自動化する方法を紹介します。

続きを読む

Next13 の AppRouter で実行時の環境変数をクライアントで取り扱う

Next.js でアプリケーションを開発していると、クライアントで参照する設定値を環境変数で扱いたいケースは多々あると思います。Next.js では NEXT_PUBLIC_ という接頭辞の環境変数はビルド時に解決され、ビルド成果物に埋め込まれるためクライアントから参照できるようになります (参考: Configuring: Environment Variables | Next.js)。

ただし、この環境変数はビルド時に埋め込まれるため、当然ビルド時のものです。つまり、たとえばクライアントから参照する API の URL を環境変数で埋め込みたく、かつ API の URL はアプリケーションの環境(production, staging, development など)ごとに変わるというケースにおいて、環境ごとにビルドをする必要があるということになります。ビルド成果物をバージョンごとに世代管理したい場合、バージョン x 環境ごとに成果物が増えるため、管理も煩雑化します。

そこで、ビルド時ではなく実行時の環境変数をどうにかクライアントから参照できないかということを考えます。

三行で

  • Server Components は実行時の process.env にアクセスできる
  • Server Components から Client Components である Context Provider に環境変数を props として渡す
  • 他の Client Components は useContext 経由で実行時の環境変数にアクセスできるようになる
続きを読む

Skeb活動の方針

※ 2024年1月現在、作業速度 > リクエスト数となっているため、作業中はリクエストをクローズさせていただいています。溜まっている作業が解消するごとに再開していますので、ご了承ください。

skeb( https://skeb.jp/@manaten )を利用開始だけして放置していたので、方針を書いておきます。自身の再確認のための言語化という意味合いもあります。

参考

続きを読む