https://nagu.dev/posts/Recent content in Posts on JournaguHugo -- gohugo.iojaThu, 08 Jan 2026 00:00:00 +0000https://nagu.dev/posts/make-live2d/Thu, 08 Jan 2026 00:00:00 +0000https://nagu.dev/posts/make-live2d/絵心やモデリング経験のない素人が､生成AIや先人の力を借りて20時間でLive2Dモデルを作ってVTube Studioで動かした覚え書き｡ 作成したLive2Dモデル 瞬き､視線､頭の角度がファイストラッキングでぬるぬる動く｡制作時間は3モデル作って20hくらい｡上記のモデルが一番出来がよかった｡ とても参考にしたサイト Runpod でなるべく安価に Stable Diffusion Web UI 実行環境を作る 試行錯誤2か月！画像生成AI×Live2Dで実現したVTuber制作の実録 【瞬き・呼吸・視線移動】AI生成したイラストにLive2Dで動きをつけてみた【NovelAI】 素材分けについて | Live2D Manuals & Tutorials 作業環境 イラスト作成 Stable Diffusion (on Runpod) イラスト編集 Krita (on Mac) 2Dモデリング Live2D Cubism Editor (on Mac) 2Dモデルの動作確認 VTube Studio (on Mac w/ Steam) モチベーション RunpodでGPUが簡単かつ安価に使えるというエントリを読んでRunpodを触っていた YouTube上でLive2Dモデルを出しつつライブコーディングする動画を最近よく見ていた → 自分は絵心がないけれど､画像生成AIで立ち絵が作れればLive2Dモデルを自分でも作れるのではと閃き(💡)ほぼ衝動的にはじめた｡ (同じ考えの先駆者はたくさんいた) やってみた感想 Stable DiffusionでLive2D用のイラスト作成 Runpod上でstable-diffusion-webuiを使ったイラスト作成はめちゃめちゃ簡単だった｡ 欲しい要素のキーワードを列挙して最後に masterpiece,best quality などをつければかなりきれいな絵が出てくる｡すごすぎ｡ 権利周りは心配になるが画像検索しても似た画像がヒットしなかったので多分大丈夫だと思いたい…(ときどき問題になっているけど､生成した画像が権利的に怪しいかをどうやって判断しているのだろう)｡ Kritaでイラストからパーツを分解 イラスト作成後のパーツ分解はKritaでやった｡10年以上前はGIMPを使っていたことを思い出して独りほっこりしていた｡ この工程では生成したイラストを髪､動かす用の髪､眉､二重線､アイライン､眼球､白目､鼻､口､首､体などの粒度で分離しつつ背景透過を施す｡GIMPで身につけたレイヤの概念を思い出した｡ とにかく作業量が多く､初実施のせいもあり後述のLive2Dモデル作成で得た気付きから透過ミスや見えない部分の補完などが必要で手戻ったりする｡線の端の透過処理をうまいことできず諦めた｡Photoshopには消えた部分をいい感じに補完するブラシがあるらしい､Photoshopを使ってもいないのにさすがAdobeと感じた ٩( ᐛ )و 自分でイラストが描けるとはじめからパーツ単位で書き分けれるため､多分この工程がいらなくなりそう｡羨ましい…｡ イラストからパーツ分解も生成AIってやつでできるのではと試みたけどうまくいかず｡イラストに存在しないパーツが出てきたり､目や鼻のパーツの位置調整が求められるなど絵心が必要なシーンが出てきて渋かった｡ Cubism Editorでイラストに動きをつけてLive2Dモデルを作成 Live2D Creative Studioが公開しているYouTube動画を見つつ Cubism Editor でパーツごとに動きをつけていく｡https://nagu.dev/posts/retro2025/Wed, 31 Dec 2025 00:00:00 +0000https://nagu.dev/posts/retro2025/読んだ本 Generated by https://sudwald.github.io/bookcollage/ 漫画を除いて16冊､月1冊+αくらいのペース 自己啓発本と技術書が半々くらい このうちブログに整理までできたのは5冊のみ｡渋い Python for DevOps と Binary Hacks Rebooted は途中まで読んでやめてしまった Python for DevOpsはオライリーの機械翻訳が適当すぎて読めなかった HUNTER X HUNTER は終わらない､メイドインアビス は1年1冊ペースで進まない お買い物 サブスク 続けているもの 1Focus 午前中にYoutube Shortsなどをブロックしている ChatGPT 毎日使ってる Netflix やめられない iCloud+ やめられない Langaku 英語に接するとき楽しい気持ちになりたかった Routinery 寝起きからのルーティン管理｡素晴らしいので課金して応援中 あすけん ジムに通いだしてから食事報告のために記録中 マネーフォワード ME やめられない｡最近使いにくいので別に良いものがあれば移行したい 日経新聞 一番やめそうなサブスク｡たまに楽しいニュースが読めるから続けている Nintendo Switch Online スマブラのため Youtube Premium 広告消しのため やめたもの Apple Music Youtube Musicで事足りることがわかり解約 Amazon Prime Kindle Unlimited Audible Amazon Prime, Kindle Unlimitedとあわせて使わないサブスクだったため解約 Session Bluebird Sessionとあわせて記録した内容を振り返ることがないためキッチンタイマーに置き換えて解約 one sec なんでサブスクしてたのか思い出せないため解約 Duolingo ELSA Speak Duolingoとあわせてより自分にあっている感じがしたLangakuに集約して解約 Xmind Obsidianでええやんとなり解約 Todoist 無料プランで十分となり解約 PlayStation Plus PS5の利用頻度が低下して解約 Home Workout ジムに通い始める前に契約｡1度しか開かなかったため､ジム通いに方針転換して解約 Filter 1Focusのほうが優れていたため解約 印象深いもの ICL 今年一番良かった｡メガネがなくなるだけで温泉もサウナもラーメンもヘッドホンもすべてが快適 全身脱毛 家中の床にいつの間にか落ちている脛毛とおさらば｡施術後にも生えては来るけど遅いし薄いしで神 猫 二匹目をお迎えした｡先住猫と喧嘩しつつも仲良くしていて尊い｡尻尾の付け根を撫でるとメロつく プライベートジム 徒歩1分のジムに入会した｡プロテイン探しの旅が始まりディアナチュラのココア味で落ち着いた 空気清浄機 link 加湿機能を削ったコンパクトなモデル｡底面で吸気をするので猫の毛をキャッチしてくれて素晴らしい ダクトレールとシーリングファン link このおかげかはわからないが昨年比で秋冬の電気代が月3､000円くらい減っている｡ダクトレールに見守りカメラやHomePod miniを取り付けれて意外と便利 Philips Hue モーションセンサー link 部屋に入ると同時に電気がつくのは想像していた以上に便利｡バイバイ Alexa, Siri, Google 先輩🐈と新入り🐈‍⬛ #cathttps://nagu.dev/posts/tidy-first/Wed, 25 Jun 2025 00:00:00 +0000https://nagu.dev/posts/tidy-first/Tidy First? 乱雑なコードは厄介です。コードを読みやすくするには、管理できる小さなまとまりに分割する必要があります。本書は、エクストリームプログラミングの考案者で、ソフトウェアパターンの先駆者であるケント・ベックが、システム全体の構造を念頭に置き、コードを改善するには、いつどこで整頓するのがよいかを解説します。 www.oreilly.co.jp 『Tidy First?』を読んだ覚え書き。 Motivation コードを書く機会が増えている メンテナンスしにくいコードも増えている 職場で活用､展開できるエッセンスがあれば取り入れたい Notes 整頓のテクニック 本書の第Ⅰ部で展開されている内容｡以下は印象に残ったもの｡ シンメトリーを揃え､同じことをするために2つ以上のパターンが存在しないようにする｡ 既存のコードを追いきれてない場合や､時間がないときに手癖でやりがち｡ # 早期リターン､代入､returnを明確に分けている foo() return foo if foo not nil foo := ... return foo --- # 3項演算子で条件判定､代入､returnを一纏めにしている｡ # 上記と同じことをするがパターンが異なる foo() return foo not nil ? foo : foo := ... リテラルではなくシンボリック定数を使う｡ たぶんわかるでしょ､ではなく確実にわかるように書く｡ # 初見のときに404の意味を知っている必要がある if response.code = 404 hoge --- # 初見でもわかりやすい PAGE_NOT_FOUND := 404 if response.code = PAGE_NOT_FOUND hoge なぜ整頓するのか､いつ整頓するのか なぜ整頓するのか? 将来システムの振る舞いを変更することを簡単にするため いつ整頓を始めるか?https://nagu.dev/posts/bbf-kubernetes/Sat, 21 Jun 2025 00:00:00 +0000https://nagu.dev/posts/bbf-kubernetes/つくって、壊して、直して学ぶ Kubernetes入門 | 翔泳社 動かなくっても、もう怖くない！トラブルシューティングを体験しながら学ぶ、実践的入門書。本書は、Kubernetesの実践的な知識をハンズオン形式で解説する書籍です｡ www.shoeisha.co.jp つくって、壊して、直して学ぶ Kubernetes入門を読んだ覚え書き。 モチベーション ハンズオン形式でkubernetesを触りたい 壊して直して学ぶというコンセプトが面白そう 全体像 Podが最小の単位｡Podには1つ以上のContainerが動いている｡ メインとなるContainerの他の補助的なContainerをSidecarと呼ぶ architecture-beta group pod(cloud)[Pod] service main_container(server)[Main Contaienr] in pod service sidecar(server)[Sidecar] in pod main_container:R --> L:sidecar IngressからContainerにアクセスするまでにたどるコンポーネント｡ architecture-beta service ingress(internet)[Ingress] service services(internet)[Service] group dep(cloud)[Deployment] group rep(cloud)[ReplicaSet] in dep group pod(cloud)[Pod] in rep service container(server)[Container] in pod ingress:R --> L:services services:R --> L:container Pod, Containerのデバッグをする ProductionのContainerイメージはshellが入っていないケースがままある｡ この場合 kubectl debug コマンドでdebug用のContainerを作成することで操作が可能になる｡ kubectl debug -it <debug対象のPod名> --image=<debug用Containerイメージ> --target=<debug対象のContainer名> -- sh shellが入っている場合は kubectl execでアクセスできる｡https://nagu.dev/posts/web-performance-tuning/Sat, 14 Jun 2025 00:00:00 +0000https://nagu.dev/posts/web-performance-tuning/達人が教えるWebパフォーマンスチューニング〜ISUCONから学ぶ高速化の実践 を読んだ覚え書き｡ private-isuを題材として手を動かしつつWebアプリのパフォーマンスチューニングを学ぶことができる｡ モチベーション パフォーマンスチューニングを興味がある Grafana Cloudを使ってみたい システム構成 Arch Linux (Hypervisor) private-isu app実行環境 (VM 4vCPU, 7.5GB RAM) private-isu benchmerker実行環境 (VM 4vCPU, 7.5GB RAM) Mac vscodeクライアント Grafana Cloud Alloy Grafana private-isu環境は private-isu のVagrantを参考にして構築する｡ private-isu app実行環境の構築 自宅サーバのKVM上で動かせるようにVagrantファイルに変更を入れる｡ show diff ❯ git diff Vagrantfile diff --git a/Vagrantfile b/Vagrantfile index da33de2..667d343 100644 --- a/Vagrantfile +++ b/Vagrantfile @@ -1,7 +1,8 @@ # vi: set ft=ruby : Vagrant.configure("2") do |config| - config.vm.box = "ubuntu/jammy64" + #config.https://nagu.dev/posts/install-ceiling-fan/Sun, 11 May 2025 00:00:00 +0000https://nagu.dev/posts/install-ceiling-fan/ 部屋の空気の循環を良くするためにシーリングファンを取り付けた｡ 取り付け後の雰囲気は summary を参照｡ Motivation KANADEMONOでデスクを買う機会があり､同ECサイトを徘徊していたらシーリングファンが目に入った｡調べてみると部屋の空気循環を改善するために良いらしい 部屋の中でエクササイズバイクを漕いたところ匂いがこもっていると妻からクレームが来ていた サーキュレータを床に置くとロボット掃除機の邪魔になる｡天井部分で空気を循環できたら嬉しい なんかおしゃれ Products 今回導入した製品は以下の通り｡ KANADEMONO Ceiling × Fan　ダクトレールファン φ50 KANADEMONO Lighting × Rail　取り付けられる ダクトレールライト YAZAWA セード付スポットライト Philips Hue ホワイト シングルランプ E26 1100lm 2018年に買った800lmのランプが廃盤になっていた｡恐らくこれが新しいモデルだが本体サイズが同じかはわからない Notes Ceiling × Fan　ダクトレールファン φ50 40φと50φの2種類あったため､大は小を兼ねるという思想で50φをチョイス｡結局邪魔にも目障りにもならず良い選択だったと思う｡ダクトレールへの取り付けは簡単だった｡ 最小の回転スピードで使ってみているが､ｽｰｰｰっという小さい音が出ているくらいで気にはならず､かつ十分に風を感じられて良い｡同じ部屋で動かしている除湿空気清浄機の音の方が遥かに大きい｡ いいお値段したのでダクトレールが同梱されているかと思いきやされていなかった｡ダクトレールも良いお値段がしたのでお財布がすっからかん｡ Lighting × Rail　取り付けられる ダクトレールライト 恐ろしいほど高額だがなんと光る｡ゲーミング用途のPCパーツみたいだ｡ 一般家庭のシーリングにそのまま取り付けできるのがとても良い｡壁や天井に穴を開ける必要もないので､買うときは値段でしか迷わなかった｡ 取り付けは備え付けのネジが曲がっていたので高品質とは言い難い｡力技でネジの出っ張りを曲げて事なきを得た｡ 上部のライトは寒色･暖色を調整できるが明るさは調整できない｡シーリングライトをこれ単体に置き換えるのは暗すぎて無理があろうと思われる｡間接照明で薄暗い部屋を目指しているならありだが､リビングルームとかをこれに置き換えると部屋と気分が暗くなると思う｡ 正直なところ､シーリングファンと同じメーカーで統一感を出したいなどの理由がなければ､もっと安価な光らないものにしていたと思う｡ セード付スポットライト Hueのランプを裸のまま取り付けるものでも良かったのだけど､ここらへんで金銭感覚がバグり始めていて､どうせならセード付きが良いなと思って購入｡ 当初は寸法を見てPhilips Hue 1600lmのランプがすっぽり入るものだと誤解してたが､実際は入り切らなかった｡急遽2018年に買った800lmの小さめのランプで代用したところピッタリはまった｡ デザインの主張も激しくなく､ダクトレールの色味と近いため違和感がない｡良い買い物だったと思う｡ Summary シーリングファンを取り付けたことで部屋の空気循環が良くなった｡特にエアコンの冷気を取り込んで､頭上から涼しい風がふんわりと降りてくるのが心地良い(エアコンの効率が下がっていないかは少し心配)｡ 天井方向はスペースが余る事が多いので､空気循環を改善するための選択肢としてダクトレールとシーリングファンの組み合わせはありだと思う｡ あと部屋も少しおしゃれになったと思いたい｡ 各ライティングの雰囲気は以下のような感じ｡ 点灯状態 雰囲気 消灯 ダクトレール点灯 スポットライト点灯https://nagu.dev/posts/docker-and-kubernetes-illustrated/Tue, 29 Apr 2025 00:00:00 +0000https://nagu.dev/posts/docker-and-kubernetes-illustrated/イラストでわかるDockerとKubernetesを読んだ覚え書き｡ 数年前に買って積んでいたら､いつのまにやら第2版が出ていた…｡ モチベーション Dockerをときたま使っているのでDockerの理解を深めたい Kubernetesを使ったことがあるが､あまり理解していないので理解を深めたい 感想 Dockerの話 Container界隈の標語は｢Build, Ship, Run｣｡ Container内のFSはCopy on Write(CoW)方式｡Binary Hacksで読んだやつ｡ レイヤごとにtarファイルがあるらしい｡これは初めて知った｡ その他Docker周りだと目新しい情報はなかった｡ Kubernetesの話 Deployment Pod … IPアドレス割当の最小単位 Container Serviceで複数のPodへ簡単にアクセスができるようになる｡これはPodが再作成されることを前提とした作りになっており､PodのIPアドレスがコロコロ変わってもアクセス先を一意に定めるために存在する｡ Container Runtimeの話 containerd, OpenShift, podmanなど聞いたことがある単語が出てきたが､具体的に使い分けるシーンがわからない｡｡いま必要としている知識でもないから､いつかわかる日が来たときの楽しみにしておく｡https://nagu.dev/posts/create-omikuji-app-with-nextjs-vercel-supabase/Sat, 22 Feb 2025 00:00:00 +0000https://nagu.dev/posts/create-omikuji-app-with-nextjs-vercel-supabase/細かい話なんてどうでもいいから､早くおみくじが引きたいよ おみくじ / Omikuzi おみくじを引いた様子｡ 今日の運勢は「吉」でした！ omikuzi.nagu.dev [image or embed] — chika 🌱 (@chikast.bsky.social) 2025年2月11日 19:30 はじめに 2025.01.03 新年早々、事件が起きた｡昨年引っ越しをして迎える初めての初詣。寒空を突き抜けた先で待ち受けていたのは――見事なまでに賑わいゼロの神社。 ぽつんと置かれた賽銭箱の隣には「おみくじ200円」とプリントアウトした紙が貼られた閉店シャッターが見えるのみ。当然、おみくじなんて引けるはずもなく…｡新年幕開けにもかかわらず幸先がよろしくないと焦りに焦った結果、気づいたときにはなんとおみくじアプリを作り始めていた…!! わざわざ寒空のもとおみくじを引きに行く必要なんてない｡そう､“どこでもいつでも引けるおみくじ”を目指すんだ｡ そんなこんなで、謎の衝動に駆られ生み出したおみくじアプリです｡ なにができるの 以下の10カテゴリー毎にそれっぽい文言を出力する｡ 願望 / 待人 / 失物 / 旅行 / 商売 / 学問 / 恋愛 / 健康 / 争事 / 転居 あわせて総合運勢を以下の7カテゴリーで出力する｡ それぞれ運勢が良い順(吉･中吉･小吉･末吉は諸説あり)｡ 大吉 / 吉 / 中吉 / 小吉 / 末吉 / 凶 / 大凶 おみくじの総合運勢はX, Blueskyでシェアできる｡ 使用技術の紹介 おみくじの出力を都度生成すると高コストになるのが目に見えていた｡そのためChatGPTであらかじめデータセットを用意する方針にした｡ バリエーション豊かなデータセットをものの数分で用意していて､これが生成AIか…と感動した｡ データセットはDB(supabase)に格納する｡supabaseは今回使ってみたかったものの一つ｡ アプリケーション上ではDBに格納しているデータのみを参照するようにして､supabaseの無料プラン内でやりくりする｡ supabaseの無料プラン内でやりくりするために､ビルド時にのみDBへ問い合わせ､リクエストごとに問い合わせしないようにする｡ 残りはたまのDIYでお世話になっているNext.jsとVercelを使ってアプリケーションを実装した｡普段使わないので使うたびにガラッと変わっていて辛い…｡ architecture-beta group paas(logos:vercel-icon)[vercel] service github(logos:github-icon)[GitHub] service data(logos:openai-icon)[Dataset Generate] service app(logos:nextjs)[App] in paas service db(logos:supabase-icon)[supabase] data:R --> L:db db:R <-- L:app{group} github:T --> B:app{group} 制作秘話 おみくじのデータセットはgpt-o1モデルを使って生成している gpt-4oだと指示通り生成してくれず､o1さんのReasoningモデルすげーと感動した Supabaseを使ってみたものの､ビルド時にしか通信をしないので何度かサスペンドされている ｢おみくじをひく｣ボタンを押したときのアニメーションはガラガラポンをイメージしている 前述の通り稼働中のアプリ内でデータ取得はしておらず､あの待ち時間はガラガラポンを回すアニメーションのためだけに存在している Omikuziという表記があるのは海外ユーザがいたら嬉しいなあという小賢しい気持ちの現われ Stripeを使って10円くらいの “寄付” を仕込もうとしていたが､VercelのHobbyプランの規約に抵触しそうなので泣く泣く没に 感想 Next.https://nagu.dev/posts/headfirst-design-pattern/Mon, 13 Jan 2025 00:00:00 +0000https://nagu.dev/posts/headfirst-design-pattern/Head Firstデザインパターン 第2版を読んだ覚え書き。 モチベーション 以前別のデザインパターン本を読んで挫折していた 知識としてデザインパターンを知っておきたい 感想 1章に入る前の「はじめに」でメタ認知と学習方法のテクニックに関する話が出てきた。ためになるのでここは飛ばさずに読んでおくと良い｡ 印象に残った話 拡張に対してはオープンであり､修正に対してはクローズドであるべき 継承よりもコンポジションを使う 本書を通じて関心や責任範囲を分離するための実装パターン例がなんとなくわかった｡ただし､これを読んだだけではデザインパターンを実践することは難しいと感じた｡ デザインパターンをさらっておくことの旨味は､実装をみたときに｢これは◯◯パターンっぽいな｣と認識できることな気がしている(もちろん実践で活かせるのであればそのほうが良い)｡ いくつか読み飛ばした箇所があるので読み返す機会があったらじっくり読みたい｡その時までにもっと多くのコードを見て置けると頭の中でマッピングが捗りそう｡ 物語調で楽しく学ぶことができるので､堅苦しいデザインパターン本で挫折した人はぜひ読んでみてほしい｡https://nagu.dev/posts/hyper-modern-python/Sat, 30 Nov 2024 00:00:00 +0000https://nagu.dev/posts/hyper-modern-python/ハイパーモダンPythonを読んだ覚え書き。 1章 Pythonのインストール python-launcherが便利らしい。 hpython-launcherからpythonインタプリタを起動するとインタプリタやvenvを自動的に検出してくれる。 $ brew install python-launcher $ brew install python@3.12 python@3.11 python@3.10 FedoraなどのRHEL系OSはpythonと密接に関わっているので無闇にpythonをグローバルインストールしないのが良いとのこと。 2章 Python環境 グローバル環境を汚さないためにvenvを使う。 python-launcherと合わせて使うことでいちいち source .venv/bin/activate を実行しなくて良くなる。 py -m pip を使うとvenv環境に対してパッケージをインストールしてくれるとのこと。 $ py -m venv .venv $ py -m pip install httpx グローバルにパッケージをインストールしたいときはpipxを使う。 pipxはパッケージを仮想環境にインストールしておき、エントリポイントを $PATH 上に作成することでどこからでもパッケージを呼び出せるようにするという思想。賢い。 $ pipx list venvs are in /home/nagu/.local/pipx/venvs apps are exposed on your $PATH at /home/nagu/.local/bin package black 24.10.0, installed using Python 3.9.18 - black - blackd package hatch 1.https://nagu.dev/posts/bestbuy-2023/Sun, 31 Dec 2023 17:16:00 +0900https://nagu.dev/posts/bestbuy-2023/2023年に買ったもののうち、使い続けていたり良かったもの10選を紹介。一部2022年12月末のものが混ざっているかも。順不同。 スマートフォン Apple iPhone15 Plus 無印iPhone12からの乗り換えで初の6.7″ディスプレイ。iPhoneでブラウジングや電子書籍を読んでいるときに画面がもう少し大きかったらなあと思いPlus版に決めた。iPad miniと無印iPhoneとの併用も一時期していたけど使い分けやバッテリー管理が面倒になってやめた。やはり端末（特にバッテリー駆動のもの）は少ないほうが楽ちん。 https://www.apple.com/jp/iphone-15/ ヘッドホン Sony WH-1000XM5 WH-1000XM2からの買い替え。使っていると自動でノイズキャンセリングの調整をしてくれるのがとても良い。 音質は良くわかっていないけど数時間連続で使用しても不快にならないので良いと信じている。 https://www.sony.jp/headphone/products/WH-1000XM5/ ゲーム機 Sony PlayStation 5 デジタル・エディション (CFI-1200B01) 2023年1月頃の品薄が解消され始めた時期に購入した。最近スリム化した新型が出たらしい。4Kが圧倒的に綺麗かつ、DualSenseコントローラのハプティックフィードバックが新しくて楽しい。ゲーミングPCは置き場所と初期投資が辛くて諦めた。 映像出力に関してはゲーミングPCには及ばないけれど、コンシューマーゲーム機はゲーム特化で作られている分メニュー画面とかコントローラの作り込みなど全体的な体験が優れていそうだ（というゲーミングPCを調達できない自分への言い聞かせ）。 2023年の主なプレイタイトル グランツーリスモ7 / サイバーパンク2077 / ソニックフロンティ / Tales of ARISE / FINAL FANTASY XVI / ARMORED CORE VI / ペルソナ5 ザ・ロイヤル https://www.playstation.com/ja-jp/ps5/ キーボード サリチル酸 7sPro 10ヶ月弱くらい仕事とプライベートで打ち込み続けていた。初63キー、初レイヤ、初分割キーボードと初だらけだったけどすぐに馴染んだ。RemapでF13以降のキーやマクロを登録できるのでHammerspoonと組み合わせてショートカットをたくさん作った。 今はHHKBをメインで使っているけど時々使いたくなる。出会ったときのエントリはこちらをどうぞ。 分割キーボード7sProを使いだしてみた https://shop.yushakobo.jp/products/7spro キースイッチ Gateron Silent スイッチ(クリア) キーキャップ CXA Iara キーボード PFU HHKB Professional HYBRID Type-S 雪 打鍵感・打鍵音が心地よいので最近のお気に入り。ワイヤレスでデスクがスッキリして見えるのも良き。CXA Iaraもだけど印字位置がキーの中心というのが好きなのかもしれない。 https://happyhackingkb.com/jp/news/snowmodel_types/ モニター LG 40WP95C-W これまでWXGA→FHD(24″)→WQHD(27″)→4K(42.https://nagu.dev/posts/macbook%E3%82%92%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%81%99%E3%82%8B2023/Fri, 28 Apr 2023 00:00:00 +0000https://nagu.dev/posts/macbook%E3%82%92%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%81%99%E3%82%8B2023/todo-list インストーラーを使うものをインストール chrome warp visual studio code App Store経由のものをインストール bitwarden HomebrewとHomebrew経由のものをインストール Homebrewインストール後に警告が出たら権限を調整する。 $ sudo chmod 755 /opt/homebrew/share/ よく使うツールたち。 $ brew install anyenv wakeonlan gnu-sed gnu-time screenfetch tmux go gcc $ brew install hammerspoon --cask 旧環境のdotfilesをコピー **envをインストール $ anyenv install pyenv $ pyenv install xxx; pyenv global xxx $ anyenv install nodenv $ nodenv install xxx; nodenv global xxx 各種ツールのセットアップ ■ 競プロ 参考: https://qiita.com/NaokiOsako/items/dcbc0a91e1bbca8ee45d $ npm install -g atcoder-cli $ pip install online-judge-tools $ sudo ln -s /opt/homebrew/bin/g++-12 /usr/local/bin/g++ ■ githttps://nagu.dev/posts/%E5%88%86%E5%89%B2%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%897spro%E3%82%92%E4%BD%BF%E3%81%84%E3%81%A0%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/Sat, 25 Feb 2023 00:00:00 +0000https://nagu.dev/posts/%E5%88%86%E5%89%B2%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%897spro%E3%82%92%E4%BD%BF%E3%81%84%E3%81%A0%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/パソコンと肩こり 四六時中パソコンと向き合ってるせいか肩こりが問題になっています。キーボードをタイピングしているときに肩が内側に縮こまっているのが良くなさそうです。 （座っているときの姿勢も大いに関係するでしょうが今回は横においておきます） ということで、まず手始めにキーボードを割ってみました。 候補になったキーボードと買ったもの キーボードを割るとなると大きく既製品か自作キーボードかの2択になりそうです。 既製品は何も問題がなさそうなのですが、自作キーボードの場合は大抵の場合はんだ付けが必要らしいぞというのが調べていてわかりました。はんだ付けは数年やっておらず、できれば無用なトラブルを避けたので候補はだいぶ絞られました。 自作キーボードといえばセットで登場することが多い遊舎工房ではパチパチパーツを組み立てていくだけのはんだ付け済み簡単キットを用意していました。自分にぴったりです。ということで自作キーボードのうちはんだ付け済みの簡単キットが用意されているモデルに絞り込みました。 BAROCCO MD770 RGB BT BAROCCO MD600v3 RGB Classic Black 7sPro 7sPlus 続いてそれぞれのキー配列に注目しました。F1~F12キーと矢印キーの有無が自分の用途的には大きそうです。 F1~F12 … これまでほとんど使ったことがないので要らない 矢印キー … だいぶ使っているのでできれば欲しい 12個の不要なキーを受け入れて矢印キーを残すか、矢印キーを捨てて筐体サイズを小さくするか…答えは簡単ですね。ということで候補を以下2つに絞り込みました。 BAROCCO MD600v3 RGB Classic Black 7sPro 最後は結構悩んだのですが、前々から自作キーボード界隈に興味があったのでどうせだし冒険してみようということで7sProにしました。念の為に事前に詳しい友達に7sProどうでしょうと聞いてみたのですが背中を推してくれたので数日後にポチりました（Special Thanks）。 組み立てる 組み立てにはんだ付けは不要なのですが細いドライバーが必要です。手元に用意しておきましょう（さもないと別のもので代替することになるでしょう…）。 そんなこんなで出来上がったのがこちらです。 7sproできた！！うつくしい pic.twitter.com/AsO26mHSSb — なぐ (@cs_nagu) February 18, 2023 触ってみて なんだかタイピングしているときに肩周りが楽になった気がします。特に1,2時間くらいずっと触っているときにあまり疲れないようなりました（と思いこんでいるだけかも）。 とまあ当初の目的が果たせているかはもう少し長い目で見る必要がありそうですが、他にも良い意味で想定外だったことがありました。 キースイッチ選ぶの楽しい。青軸→赤軸と使ってきてもっと軽くて静かなやつがほしい！というワガママが通ります キーキャップ選ぶの楽しい。墨も飽きてきたしな・・・というときの気分転換に最高です キーマップがブラウザ経由でとても簡単に変更できる。Remapというウェブサービスで簡単に変更できました 自分で選んだパーツで組み上げられたデバイスを触っているとテンションがあがりませんか？ 自作PCやって楽しかった記憶がある人はハマりそうな気がします。https://nagu.dev/posts/ruby%E3%81%A7%E3%83%8D%E3%82%B9%E3%83%88%E3%81%97%E3%81%A6%E3%81%84%E3%82%8Bhash%E3%82%92%E3%81%84%E3%81%84%E6%84%9F%E3%81%98%E3%81%ABmerge%E3%81%99%E3%82%8B/Sun, 30 Jan 2022 00:00:00 +0000https://nagu.dev/posts/ruby%E3%81%A7%E3%83%8D%E3%82%B9%E3%83%88%E3%81%97%E3%81%A6%E3%81%84%E3%82%8Bhash%E3%82%92%E3%81%84%E3%81%84%E6%84%9F%E3%81%98%E3%81%ABmerge%E3%81%99%E3%82%8B/結論 deep_mergeを使う。 やりたいこと こんな感じでネストされた Hash データがあるとする。 def nested_hash_data { 'target1' => { 'category1_1' => { 'resource1_1_1' => { 'parameter' => 'hogehoge', }, 'resource1_1_2' => { 'parameter' => 'hogehoge', }, }, 'category1_2' => { 'resource1_2_1' => { 'parameter' => 'hogehoge', }, }, }, } end 「ある条件のときに特定の resource を追加したいよ〜」という要件が出てくる。 このとき追加差分がわかりやすいように元データと同じ構造で定義していたとする。 def ex_data { 'target1' => { 'category1_1' => { 'resource1_1_3' => { 'parameter' => 'hogehoge', }, }, 'category1_2' => { 'resource1_2_2' => { 'parameter' => 'hogehoge', }, }, }, } end A と B を単純に merge して、各 category に resource1_1_3 と resource1_2_2 を追加したい。期待値としては ↓ な感じ。https://nagu.dev/posts/react%E3%81%AE%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%92%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/Tue, 23 Nov 2021 00:00:00 +0000https://nagu.dev/posts/react%E3%81%AE%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%92%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/なにこれ React のチュートリアルをやってみて知見とかをまとめる。 https://ja.reactjs.org/tutorial/tutorial.html 前提 Vue.js の SPA を昔書いたことがある ブログを Next.js で組み立ている モチベーション Next.js の中で使われている React の理解を深める 世の中のスタンダードっぽいフロントエンドフレームワークを知る React とは UI を構築するための宣言型*1 の JS ライブラリ UI をコンポーネントという小さく独立した部品を使って組み立てる JSX 構文を使って記述する <div /> は React.createElement('div') に変換される （JSX の例） render() { return ( <div className="shopping-list"> ... ); } *1 宣言型（宣言的） → 宣言的 UI が何か分からなかったので調べてみた ステートとステートのリフトアップ state は上位コンポーネントから下位コンポーネントに渡せるしその逆もできる 下位コンポーネントの state を上位コンポーネントで再定義し、 state を操作する関数を定義して、下位コンポーネントへ渡すことをステートのリフトアップという リファクタリングでよく使うらしい。state を集約したいときに便利そうだ 関数コンポーネント render メソッドだけをもち、自身で state を持たないコンポーネントをシンプルに書くための方法 class Square extends React.Component { render() { return ( <button className="square" onClick={.https://nagu.dev/posts/mac%E3%81%8B%E3%82%89windows%E3%81%AB%E4%B9%97%E3%82%8A%E6%8F%9B%E3%81%88-%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB%E7%A7%BB%E5%8B%95%E7%B3%BB%E3%81%AE%E3%82%AD%E3%83%BC%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%82%92%E5%86%8D%E7%8F%BE%E3%81%99%E3%82%8B/Sun, 30 May 2021 00:00:00 +0000https://nagu.dev/posts/mac%E3%81%8B%E3%82%89windows%E3%81%AB%E4%B9%97%E3%82%8A%E6%8F%9B%E3%81%88-%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB%E7%A7%BB%E5%8B%95%E7%B3%BB%E3%81%AE%E3%82%AD%E3%83%BC%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%82%92%E5%86%8D%E7%8F%BE%E3%81%99%E3%82%8B/やること macOSのemacsライクなキーバインドのうち、カーソル移動系のキーバインドをWindows10で再現する。 ざっくりやっていること Change KeyでCapsLockキーをF13に上書き AutoHotkeyでF13を使ったカーソル移動系キーバーインドを設定する vscodeでキーバインドを使えるようにする 元ネタ（参考） https://qiita.com/riekure/items/49b941fa5159f9948313 http://did2.blog64.fc2.com/blog-entry-349.html https://kokufu.blogspot.com/2019/05/vscode-ctrl-ctrlcapslock.html 背景 2年前くらいに組んだデスクトップPCが図体デカい割に最近あまりゲームができておらず、宝の持ち腐れ感が大きくなってきた。スペックはそこそこ良いのにゲーム用途に限定するのはリソースがもったいないなーという思いもあり、普段使いしてるmacbook pro (2017)からの乗り換えを検討してみた（ちょうど最近MBPにもっさり感も感じていたし）。 開発環境の移行はさっくり終わった（WSL2＋Dockerすごい。。）けれど、macOSとWindowsの細かい違いがどうにも気になってしまい悶々とすることに。今回は悶々の一つである、macOSで使えていたカーソル移動系のキーバインドをWindows10で使えるようにしたのでメモしておく。 MacのCtrl+a,e,f,b,p,nはほんと中毒になる — なぐ (@cs_nagu) May 29, 2021 CapsLockをF13に上書き Change Key でCapsLockをF13に割り当てる。 Change Keyを管理者権限で起動 CapsLockを選択 ソフトウェアキーボード右上のScan codeを選択 0x0064(F13)を入力 設定を登録してPCを再起動 カーソル移動系のキーバインドを設定 AutoHotkey でF13と各種キーを組み合わせてカーソル移動をセットする（ついでにDeleteや行削除、タブ移動も入れてみた）。 やっつけで書いたのでAutoHotkey的な書き方ではないかもしれないがまずは動くことが大事なので(　ᐕ) visual studio code でも設定したキーバインドを使うために CapsLockをF13に置き換えたがそのままVisual Studio Codeでキーバインドを利用しようとすると挙動が不安定になるため、settings.jsonの “keyboard.dispatch” のパラメータを変更する。 { "keyboard.dispatch": "keyCode" } macOS（emacs）の一部キーバインドは中毒度が高い。特にカーソル移動やテキスト編集系のものは覚えてしまうとなかなか抜け出せない。 Windowsでのキーボード生活がだんだん快適になってきた٩( ᐛ )وhttps://nagu.dev/posts/python3%E3%81%AElogging%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%B5%E3%82%A4%E3%82%BA%E6%99%82%E9%96%93%E5%88%A5%E3%81%AB%E3%83%AD%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%86%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B/Sat, 15 Aug 2020 00:00:00 +0000https://nagu.dev/posts/python3%E3%81%AElogging%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%B5%E3%82%A4%E3%82%BA%E6%99%82%E9%96%93%E5%88%A5%E3%81%AB%E3%83%AD%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%86%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B/概要 最近 Python3 のログ出力部分を書いていて、ログローテートに関連した日本語のエントリが少なかったので備忘録的に残しておく。 それと実際にログをプログラム中に仕込むときに --debug オプションをつけてより詳細なログが出せるようにもしたのでメモしておく。 ファイルサイズベース・時間ベースのログローテート ファイルサイズベースのときは RotatingFileHandler 、時間ベースのときは TimedRotatingFileHandler を使用する。 import logging import logging.handlers import time LOG_FILE = "/tmp/app.log" logger = logging.getLogger(__name__) logger.setLevel(logging.DEBUG) # サイズベースのローテーション handler = logging.handlers.RotatingFileHandler( LOG_FILE, maxBytes=100, backupCount=9 ) # 時間ベースのローテーション # handler = logging.handlers.TimedRotatingFileHandler( # LOG_FILE, # when='S', # interval=1, # backupCount=10 # ) handler.suffix = '%Y%m%d%H%M%S' logger.addHandler(handler) while True: logger.critical('critical') logger.error('error') logger.warning('warning') logger.info('info') logger.debug('debug') time.sleep(2.5) 出力例 # サイズベース $ python make_logs.py $ ls -l /tmp/ total 24 -rw-r--r-- 1 root root 34 Aug 15 14:51 app.https://nagu.dev/posts/mac%E3%81%8B%E3%82%89hyper-v%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%81%AE%E4%BB%AE%E6%83%B3%E3%83%9E%E3%82%B7%E3%83%B3%E3%81%ABssh%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B/Sat, 11 Jul 2020 00:00:00 +0000https://nagu.dev/posts/mac%E3%81%8B%E3%82%89hyper-v%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%81%AE%E4%BB%AE%E6%83%B3%E3%83%9E%E3%82%B7%E3%83%B3%E3%81%ABssh%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B/概要 ガチャガチャ試行錯誤する際には手元の Mac の環境を汚したくないため仮想マシンを利用したのだが、如何せんディスク容量がへっぽこなため、ゲーミング用に組んだ Windows で仮想マシンを作成することにした。 仮想マシンにあまり馴染みが無く知らなかったのだけれど仮想マシンってホスト OS→ ゲスト OS は簡単にできるのに、同じネットワークにある適当なマシンから接続することが難しかった。 仮想マシンビギナーのみんなは同じ道にハマるのに（？）Google で検索してもこれ！というエントリがなかったため備忘録的にブログに落としておく。 構成としてはホスト OS（Windows10）→ ゲスト OS（Centos8）が簡単に接続できるなら、ホスト OS を Mac→ ゲスト OS の踏み台にしてしまおうというアプローチを取る。 前提・環境 Hyper-V でゲスト OS を作成済み ホスト OS からゲスト OS へ SSH 接続できる Windows10 (18363) windows10 へ鍵認証で SSH 接続できるようにする 基本的には Windows10 で OpenSSH サーバーを動かす の手順を実施する。ポイントは 3 つ。 PubkeyAuthentication yes を追記 PasswordAuthentication no を指定 Match Group administrators 以下をコメントアウト %PROGRAMDATA%\ssh\sshd_config の差分は以下のようになるはず。 # sshd_configは編集後、sshd_config.bakは編集前のファイル $ diff /tmp/sshd_config /tmp/sshd_config.bak 34,35d33 < PubkeyAuthentication yes < 52c50 < PasswordAuthentication no --- > # PasswordAuthentication yes 85,86c83,84 < #Match Group administrators < # AuthorizedKeysFile __PROGRAMDATA__/ssh/administrators_authorized_keys --- > Match Group administrators > AuthorizedKeysFile __PROGRAMDATA__/ssh/administrators_authorized_keys 続いて Windows10 に認証で利用する公開鍵を設定する。今回一番詰まった。 Mac にて作成した公開鍵を Windows10 へ送信する。今回は意識が低いので scp で送信する。https://nagu.dev/posts/%E7%A9%8D%E8%AA%AD%E6%B6%88%E5%8C%96%E3%81%AE%E3%81%9F%E3%82%81%E3%81%ABtwitter%E3%81%AB%E9%80%B2%E6%8D%97%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%A6%E7%B7%8A%E5%BC%B5%E6%84%9F%E3%82%92%E5%87%BA%E3%81%97%E3%81%9F/Mon, 20 Apr 2020 00:00:00 +0000https://nagu.dev/posts/%E7%A9%8D%E8%AA%AD%E6%B6%88%E5%8C%96%E3%81%AE%E3%81%9F%E3%82%81%E3%81%ABtwitter%E3%81%AB%E9%80%B2%E6%8D%97%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%A6%E7%B7%8A%E5%BC%B5%E6%84%9F%E3%82%92%E5%87%BA%E3%81%97%E3%81%9F/はじめに Twitter プロフィールに消化度合いを表示させると緊張感が出て捗るのでは？と思ったのでやってみた時のおぼえがき。 おまけで AWS Lambda へ自動デプロイする CI/CD チックな仕込みもやってみた。 本エントリで出てくるコードは GitHub で管理している。 https://github.com/csnagu/pile-up-twitter GAS は gist。 https://gist.github.com/csnagu/3f0e7f2a7fcf5ace1262f4c0f78e0212 動機 ふと買ったけど読んでいない本（積読）が一体どれだけあるのか気になり Todoist へ書き出してみた。 今読む読まないは別として、参考書だけで 70 冊ほどありこれはなんとかせねばと思いつつ、何もせずに 2 ヶ月経過したのでなにかしらの手を打つことにした。 3 秒くらい考えて「誰にも見られないから緊張感がないのでは？」と考えついたので積読消化の進捗を公開することに。 公開するからにはよく目にする場所のほうが緊張感が高まって良さそうだと思い日頃開いている Twitter を使うことにした。 この記事を読んで「こんなもの作ってる暇あったら 1 冊読め」と思った人。 僕も同じこと思いました。 構成 関連サービス GitHub … コードのバージョン管理 Twitter のプロフィールを更新 CloudWatch … Lambda を定期実行 Todoist … 積読を管理 GoogleSpreadsheet … 読み終わった書籍を管理 Google App Script … Todoist で完了したタスクを GoogleSpreadsheet に記録する IFTTT … みんなの架け橋 Twitter … 緊張感を届ける 盛りだくさん！ 構成図 Todoist と GoogleSpreadsheet の間に Google Apps Script（GAS）や IFTTT が抜けているんだけど図の修正が面倒なので割愛。