MANA-DOT

PIXEL ART, PROGRAMING, ETC.

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

Dellの34インチUWQHD(3440x1440)モニタ、 P3424WE を購入しました。 もともと デスク周り2022 - MANA-DOT で書いた通り、27インチのWQHDモニタを愛用していましたが、前々から作業領域的にはWQHDが最適だと思うものの作業領域外に追加の情報(figmaのデザイン…

2023年のskeb活動まとめ

2023年は、Skeb活動の方針 - MANA-DOT を書き、skeb活動の方針を明確にするとともに活動再開をしました。幸いなことに何件かリクエストを頂けたので、2023年の活動まとめとしてこのエントリを書きます。 https://skeb.jp/@manaten 2023年9月 SNSアイコン向け…

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

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

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

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

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

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

Skeb活動の方針

※ 2024年1月現在、作業速度 > リクエスト数となっているため、作業中はリクエストをクローズさせていただいています。溜まっている作業が解消するごとに再開していますので、ご了承ください。 skeb( https://skeb.jp/@manaten )を利用開始だけして放置してい…

個人的におすすめのchatGPT用法 (ぬけもれ探し・意味から逆引き・雑学のpush)

巷で chatGPT の便利な使い方のエントリは溢れているため、何番煎じかという感じではありますが、個人的に便利(かつ他の手段で代替が効きづらい)と思ってる用法を 3 つほど紹介します。

一番星はてのちゃんのドット絵を描きました

AIはてなブックマーカーの一番星はてのちゃんです。 かわいい。 firststar-hateno.hatenablog.com 普段あまりファンアート的なのは描かないんですが、はてのちゃんは謎の応援したい補正が高いと思うんです。なぜでしょうね? AIが頑張って機能追加しながら人…

プロンプトは頑張らず雑コラで始める stable diffusion でのAIイラスト生成

実は最近StableDiffusionで画像生成を楽しんでいます。 おそらく多くの人とは違い、自分はtxt2imgでプロンプトを頑張ることはせず、img2imgメインでイラスト生成をしています。覚書の意味も含めてイラスト生成の手順を紹介します。 今回は「商店街のど真ん中…

デスク周り2022

筆者はテレワーク勤務になってそろそろ3年目となるのですが、3年もテレワークをしているとデスク周りにお金をかけるようになりますし、今年はブラックフライデーでFlexispotのデスクを購入したこともありデスク周りが一新されたので、現状のデスク周りのまと…

レガシーなjs環境におすすめなts-checkコメントについて

このエントリの内容 このエントリは、javascriptの型チェックをすることができるtypescriptの機能 @ts-check について紹介し、個人的に感じた便利なところや使い所を紹介していきます。 このエントリの読者は以下のような人を想定しています。 レガシーな環…

TypeScriptの型定義で麻雀の役判定をする 【dwango Advent Calendar 2日目】

このエントリは ドワンゴ Advent Calendar 2021 2日目の記事です(夜が明けるまでは2日目!)。 はじめに TypeScriptには Conditional Types や Template Literal Types といったクッソ強力な型機能があります。 これらを用いて、今回は 2p3p4p2m3m4m2s3s4s4s5…

fitbitの文字盤を作ってみた話と、fitbitを買ってみてよかったこと

fitbit versa を購入したので、お試しでドット絵で文字盤を作ってみました。 出来が中途半端なのでfitbitアプリとしてリリースはしていませんが、githubにソースコードは公開してあります。 リポジトリ: manaten/fitbit-pixelart-knight-clock このエントリ…

シャニマスはPWA時代のGoogleMapなのかもしれないという話

※ この記事はポエムです。 先日、 アイドルマスター シャイニーカラーズ がリリースされました。 僕自身はアイマスはちょっとアニメを見る程度で熱心なファンというわけではないのですが、こちらのゲームはゲーム内容だけではなく別の側面でも注目されている…

husky + lint-stagedでgitのprecommit時にimageminを行い、minifyした画像のみコミットされるようにする

かなり昔に こちらの記事 でgitのpre-commitを紹介しました。今回は、pre-commitにまつわる便利なnpm package typicode/husky、 okonet/lint-staged を利用し、画像ファイルのコミット時に imagemin/imagemin を使い自動で画像ファイルのminifyを行う方法を…

海外版Surface Laptopで一部の日本語アプリケーションが文字化けする + おまけでSurface Laptopの感想

家電量販店で触っていい感じだったので、Surface Laptopを購入してしまいました(一か月くらい前に)。 英字キーボードが使いたかったこと、日本で未発売のcore i7+メモリ16GBモデルが欲しかったことから、海外版を米Amazonで購入しました。 Amazon.com: Micro…

Nexus6の電池交換をした

2年以上使ってるNexus6の様子が最近おかしく、ソシャゲのFate/Grand Orderをプレイしてたり 、Google Mapを起動していたりすると突然電源が落ちてしまうようになりました。 あまりに不便で困っていたのですが、スマホを電源につないでいるときはこの現象は発…

Node.js8になって util.promisify が利用できるようになったのでメモ

先日Node.js8 がリリースされました (参考) 。 追加機能の中に util.promisify というものがあります。これは、すでに bluebird や es6-promisify といったパッケージで提供されていた、 コールバック関数を伴う非同期関数を、Promiseを返す関数化するユーテ…

Slackのstatusをtaskerを使って自分の居場所によって自動変更する

先日、slackで 名前の横に自分のステータスを表示する機能 がリリースされました。 これはDMを送ろうとしたときの入力欄などにも表示されるため、適切に設定すれば「まだ出社してないのにメンション飛ばされた」「有給休暇中なのにDM送られた」みたいな気ま…

Hubotでasync functionを使う

最近(と言っても一ヶ月前ですが・・・)node7.6.0がリリースされ、 --harmony-async-await をつけなくても async/await が利用可能となりました。 これにより、非同期処理を行うスクリプティングがより行いやすくなった(スクリプティング以上の用途ならばどうせ …

Slack上でインタラクティブに遊べるゲームを作るためのフレームワークを作った

この記事は Slack Advent Calendar 2016 24日目の記事です。

すべてのリポジトリでGithubのpull requestをfetchする設定

git

githubのプルリクエストのコミットをローカルにfetchする方法はよく知らてていますが (知らない人は是非設定をオススメします。特にコードレビューでレビュー相手がfork先からプルリクエストを出している場合でも対象コミットを取得できるため便利です)、 …

文字列置換により20行程度で実装する倉庫番ゲームのミニマム実装

先日、Slack上でインタラクティブに倉庫番を遊べるhubot-slack-soukobanを作ったにてSlack上で遊べる倉庫番の紹介を行いました。 このhubotスクリプトでは文字列置換による実装を駆使して倉庫番のゲームロジック部分が20行程度で実装されており、今回はその…

Slack上でインタラクティブに倉庫番を遊べるhubot-slack-soukobanを作った

Slack 上でリアクションを操作ボタンとして利用して倉庫番を遊べる、 hubot-slack-soukoban を作りました。

レスポンシブなCSSスプライト

よく知られたCSSスプライトはボックスの幅・高さをスプライト画像と同じに指定し、background-position をずらすことで複数のスプライト画像を含むスプライトシートの中から対象画像だけを表示します。 この方法だと表示できる画像のサイズは固定なのですが、…

部屋の照明を操作するかっこいいWebアプリを作った

GW中に上記画像のような見た目と操作感で部屋の証明をコントロールできるWebアプリを作ったので紹介します。

RPGツクールMVで作ったゲームをコマンドラインで動かしてみる

会社のLT用のネタで、RPGツクールMV で作ったゲームをCLI上で動かすということをやりました。 ニコナレ にLTで使ったスライドをアップしてあります。

babelのasyncで遊んでみたメモ

ES7から利用可能な async/await は非同期プログラミングの際に非常に魅力的な構文です。 babelを用いることによりES5の環境でもコードを実行可能です。 babelで非同期処理がどのように変換されるのか興味があったので、いろいろ遊んでみました。

direnvを使って複数のgitコミッタ名を切り替える

例えば会社のPCでこっそり個人的なリポジトリで作業してgithubにpushする場合、 うっかり会社用のgitコミッタ名(本名@会社名.co.jp みたいなアドレスとか)で commit/pushしてしまい、紐付けるつもりのなかったネットの人格と本名/会社名が紐付いてしまう と…

SublimeTextでgrep, sort, uniq, diff, sedっぽいテキスト操作

SublimeTextでもコマンドラインで行うような、grep, sort, uniq, diff, sed といたコマンド相当の操作ができます。 ログファイルをSublimeTextで眺めてる時などに便利なのでご紹介。