はじめに あけましておめでとうございます。去年は何といってもAIの年でした。ChatGPTやStableDiffusionが2022年末に登場してから、想像を超えてAI周りが進化しましたね。今回は年の初めという事もあり、前から興味のあったAITuberを作ってみる事にしました。 「AITuberを作ってみたら生成AIプログラミングがよくわかった件」 って本も買ったし。LLM部分だけでは無く、OBSやYouTubeのコメント取得などAITuberに必要な内容が一式揃っていて非常に参考になりました。 また、私はプログラミングは多少できますが、イラストや音楽に関しては全くスキルの無い人間です。そのためそのあたりに関してはStable DiffusionやSunoAIの力を借りて作っているので、結果的にオール生成AIという感じですね。そのあたりも含めて記事にまとめたいと思います。 TL;DR 素の

systemdの思想と機能　Linuxを支えるシステム管理のためのソフトウェアスイート Software Design plus 作者:森若 和雄技術評論社Amazon いつの間にかどのLinuxディストリビューションでも標準で使われるようになったsystemd。なんとなくsystemctlを叩いてサービスを立ち上げていたけど、いまいち「なんで必要なの？」とか、「いろいろ機能があるっぽいけど、何ができるの？」といったことをちゃんと勉強しないままここまで来てしまったので、この本でおさらい。 単なる機能紹介ではなく、「なぜsystemdはこんな広範囲な機能を扱うのか？」という機能が作られた背景から説明されているところがいいですね。 この本を読むまでcore dumpまで管理されるようになったことを知りませんでした。 本書を読めば、systemdはサービスが動く環境を用意するために必要な機能を備

はじめに 集約前のブックマークの使い方 集約後（今）のブックマークの使い方 はてブからRaindropへブックマークを移す Raindrop（有料プランの機能含む）の使い勝手 ブラウザやObsidianとの連携 おわりに はじめに Evernoteの有料プランをやめてメモ・記録用のツールをObsidianに完全に切り替えたことと合わせて、2023年はブックマークの管理もRaindrop.io（以下「Raindrop」）に集約しました。個人的にはかなり大きな変化です。 raindrop.io 切り替えに合わせてRaindropを有料プランにしたのでその使用感についても簡単に書いておきます。 集約前のブックマークの使い方 Raindrop自体は無料プランで数年前からはてなブックマーク（以下「はてブ」）と併用していて、だいたい次のような使い方をしていました。 Raindrop：はてブ以外の場で保

はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種類のロジックについて整理する。 レンダリング レンダリングをする際、コードはpropsとstateを受け取り、変換し、画面で表示したいJSXを返す。コードのレンダリングは結果のみを計算するべきでそれ以上のことをするべきではない。 イベントハンドラ イベントハンドラはコンポーネントの中にある関数で、Input Field の更新やユーザを他の画面へ誘導したり等、単純な計算以上の役割を担う。イベントハンドラはユーザの行動（ボタンクリック等）による、

はじめに アイディオットDX開発部の岩澤です。 先日、TailwindCSS v3.4がリリースされました。 個人的に今回のリリース内容が激アツだったのですが、まだ内容を追えてない方や、今回の変更の何が嬉しいのかわからない方向けに、サクッと解説していきたいと思います。 h-dvh h-dvhというclassが指定できるようになりました。 たとえば以下のように、スクロールするとアドレスバーが縮小する場合など、動的にかわるビューポートの高さにあわせて、要素の高さも動的にビューポートの高さにあわせられるようになります。 これを実現するために、今まではカスタムのユーティリティを作成してましたが、その必要がなくなりました。 あとは、個人的にはあまり使わなそうだなと思いましたが、lvh、svhというユーティリティクラスも追加されています。 has :has()はCSSの中でもかなり強力な擬似クラスに分

この記事は FastDOCTOR After Advent Calendar 27日の記事です。 はじめに ファストドクター株式会社でテックリードをしている shirauix と申します。 弊社では、ある Next.js アプリケーションを別会社のパートナーさんに外注することによって初期開発を行いました。ある時点からこのシステムを内製化することになったのですが、それにあたって多くの課題を解決する必要がありました。 この記事では、外注と内製のそれぞれのメリット・デメリットや、内製に切り替える際にどんな苦労があったのかについての赤裸々な事例をご紹介します。 対象となる読者 外注で初期開発したシステムを内製に切り替えてメンテナンスしようとしているエンジニアの方 新しくシステムを開発したいが、外注と内製のどちらを選択すべきか悩んでいる方 外注と内製の違い 外注するか内製するかはあくまで手段の話であ

2023年は「Cloud Run を触って覚える」をテーマとした ひとりアドベントカレンダー を開催しており、Cloud Run のさまざまな機能や Cloud Run でよく使う構成などをご紹介しています。 最終日、25日目は Cloud Run を中心としたサーバーレス アーキテクチャをいくつか紹介します。2023年にちなんで23個のアーキテクチャを用意しました。 Cloud Run の概要は「gihyo.jp」で解説していますので、こちらもぜひご覧ください。 Web アプリケーション + API の 3-Tier 構成 (SPA) Web アプリケーション + API の 3-Tier 構成 (SPA) SPA (Single Page Application) がフロントになり、バックエンドの API サーバーとして Cloud Run を使用するアーキテクチャです。SPA は N

Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトが Next.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を送っていた。 その過程で、こんなようなことを考えるようになったので、今回はこの辺りの話を書き残しておこうと思う（何回か X に同じ旨の POST は上げていたけど、一回もちゃんとまとめてなかったので）。 RSC がない頃の、別の言い方をすると getServerSideProps を使っていた頃の、Next.js におけるアプリケーションの設計は、トラディショナルな MVC にかなり近しい。 ここでいう MVC は、Sp

この記事は Enginnering Manager Advent Calendar その２の1日目の記事です。（大遅刻しました） こんにちは。@chaspy です。10月からスタディサプリ小中高*1プロダクト開発部の部長をしています。 本記事では、我々の組織で取り組んでいる技術戦略の現状と今後についてお伝えします。 技術戦略とは何か スタディサプリ小中高の技術戦略 開発比率適正化 課題発見と改善サイクルの確立 直近の取り組み ガイドラインの策定 マイクロサービスの命名 今後追加が予定されているもの monolith の方針検討 共有データベースに対する Model 層の管理方針 api endpoint ごとのオーナーシップ策定 技術戦略グループとして実現したいこと おわりに 技術戦略とは何か ざっくりいうと、事業計画に対して、技術投資をどこにするのか、しないか、です。"技術"投資と言って

Google Cloud Partner Top Engineer 2024を頂いた者です. 仕事はエンジニア系のコンサルとSRE, 趣味（と前職以前の仕事）で機械学習や生成AI*1をやっとります. この記事は当ブログの名物かつ人気シリーズである, 主に技術書を中心としたオススメ書籍（元々はPython本メイン）の紹介エントリーです. ※去年の記事はこちら. 本年のこのエントリーは, 2024年の推し本4冊 CloudおよびSREな4冊 いい感じな技術書2冊 この三本立て（+私の完全なる趣味チョイスで数冊）でご紹介できればと思います. というわけで, 本年のラインナップは以下の通りです. この記事の著者 2024年の推し技術書10冊 特に推したい4冊 クラウドストラテジー 世界一流エンジニアの思考法 仕事に役立つ新・必修科目「情報Ⅰ」 キャリアづくりの教科書 CloudおよびSREな4冊

Development preview Catalyst is currently in development preview and only available to all-access customers to help us refine the experience. Catalyst is a modern application UI kit built with Tailwind CSS, Headless UI and React, designed and built by the Tailwind CSS team. It's a collection of beautiful, production-ready UI components you drop into your projects alongside your own code that are y

はじめに こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 私は OSS が大好きで、React Hook Form や Kuma UI のメンテナとしても活動しています。 弊社のプロダクトでは CSS ライブラリとして Emotion を採用していますが、ランタイムでのパフォーマンス上の問題や App Router 非対応等の理由から、ゼロランタイム CSS ライブラリへの移行を検討しています。このような背景から、ゼロランタイム CSS に関する話題が社内で頻繁に取り上げられています。 そこで本記事では、その中でも私がメンテナとして関わっている Kuma UI がどのように React Server Components をサポートしているかを詳しくご紹介します。 Kuma UI とは? Kuma UI は、新しい手法であ

最近、少々複雑な権限機能の開発を担当している中で、対応方針を悩んでいたことがありました。 権限機能というものは取り扱いが難しく、影響範囲が広いにも関わらず、対応漏れや考慮不足があると情報漏洩に繋がってしまいます。 また、機能拡張をしてく中でも対応漏れを起こさないようにする必要があるなど、考えることも多く頭を悩ませておりました。 そこで、認可処理の設計のベストプラクティスやDDDの実装パターンに認可処理を組み込む方法など、色々と調べていたのですが、その中でいくつか知見を得られたのでまとめようと思います！ 権限と認可 権限と切っては切れない関係にあるのが認可です。 権限はある操作を実行できる権利を指します。 それに対して、認可は操作を実行する許可を出すため仕組みのことを指します。 例えば、ブログ投稿サービスで考えてみると、以下のような感じです。 権限: 投稿者はポストを編集できる。 認可: ユ

こんにちは。バクラク申請・経費精算 ネイティブアプリエンジニアのyoheiです。 最近はこたけ正義感の逆転裁判プレイ動画を見ながら法律の勉強してます。好きなラジオは真空ジェシカのラジオ父ちゃんです。M-1も応援してます！ この記事はLayerXテックアドカレ2023の26日目の記事です。前回は 赤羽さん が「Go言語のORMであるGORMをv1からv2へのマイグレーションした話」を書いてくれました。27日目の記事 id:itkq さんより「勤怠をいい感じにする社内Slackアプリ #LayerXテックアドカレ - LayerX エンジニアブログ」ポストされました。一緒にご覧いただけたらと！ バクラク申請・経費申請では現在のモバイルアプリをFlutterでのリプレースを進めています。そのうえでチームとしてUIコンポーネント(Widget)をどの用に作っていくか設計(UI Component

「Unityで敵NPCと競争できるカーレースゲームを作ってみたい！」 「マリオカート・グランツーリスモ・ワイルドスピード・リッジレーサーのような様々なカーレースゲームの作り方を習得したい」 「スマホゲームやVRゲームをUnityで作りたい！」 こんな希望を叶えてくれるPC・スマホ・VR化に対応したレースゲームの作り方講座を作成しました。 この講座では完全フルスクラッチで0からUnityでカーレースゲームを作っていきます。 ほぼ同じソースコードのままでPC→スマホ→VR(Oculus Quest 2(Meta Quest 2))と異なる端末で動作するゲームに作り変えていく流れを追体験できる講座です。 初心者さんでも同じゲームを作れるようにソースコード・図・動画や解説などを付けています。 【全12回】Unityで作るスマホ・VR両対応カーレースゲームの作り方チュートリアル講座 今回のUnity

こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登録した情報や配信の履歴を管理する社内向けのシステムが存在しています。 特に管理システムのフロントエンドにおいては、その特性上入力フォームの実装がその大半を占めています。 日々の機能開発においては、そうした管理システムに実装された入力フォームの新規実装や機能拡張が行われています。 課題 一般的な入力フォームでは、画面の初期描画の際にすでに設定済みの値をフォームに適用する初期化処理や、入力された内容を検証して必要に応じてエラー表示するバリデーション処理が必要です。 ミラ

The Chakra community has been huge and supportive over the years. For everyone following our growth and journey, I've got one word for you, THANK YOU! Over the past months years, we've been working hard to execute on the ideas described in the future of Chakra UI. Here's a quick overview of our architecture: Static styling engine: We launched Panda CSS in July 2023 State machine powered components

宿泊開発チームでエンジニアをしている @itinao です。 昨年の10月に入社しました。 今回は GitHub Projects を利用したタスク管理について記載します。 なんとなーく GitHub Projects 使うと、KANBANにしてみたり リストにして使ってみたり で終わってしまいます。 もっと色々できるんだよってことが伝えられればと思います。 背景 どんな機能があるか Custom Fields Views Group by Slice by Workflows ISSUEと Pull requestの紐づけ Insights タスクの進め方 タスクの洗い出し 見積もり 現状の課題と今後の展望 まとめ さいごに 背景 一休ではチームごとにタスクの管理方法が違い、 Google Spreadsheet・GitHub Projects・Jiraなど、チームごとにタスク管理の方法

本記事のX(旧Twitter)のポスト(旧ツイート)に含まれる画像はすべて「OpenAI DevDay, Opening Keynote」を視聴した際のスクリーンショットです。 2023/11/7(火) 3:00から開催されたOpenAI社のDevDayをオンライン視聴しました。その際のポスト(旧ツイート)をまとめます。 総じて、ビッグニュースが多く盛り上がった会でした。事前のリーク通りではありますが、OpenAI社のAPIを通じて自社で実現できることの可能性が広がったという点で非常に興奮できる夜でした。 GPT-4 Turboによるコンテキストウィンドウの拡大やマルチモーダル対応（API経由での画像添付、Whisper V3の提供など）といった技術的なニュースはもちろん、GPT Storeなどビジネスにおいても重要なマイルストーンになる発表だったかと思います。

趣味のマンガ好きが高じてマンガ投稿プラットフォームを作りました。 お試しということで、二次利用が自由に許可されている「ブラックジャックによろしく」が試し読みできるようになっているので、気になる方は読んでみてください！ ※「ブラックジャックによろしく」の利用規約により、書籍ストアに掲載する場合は1円以上の有償販売とする必要があるため、インクロフトの最低決済額の50円で投稿しています。 なぜ作ったか 私はマンガが大好きでジャンル問わず暇さえあればマンガを読んでいるんですが、最近は新しいマンガを見つけるのにXなどのSNSを使っています。 #漫画が読めるハッシュタグなどを使って作者の方がXに自分の作品を載せてくださっているので、タグで検索しながら気に入った作品はサイトに飛んで読むということを繰り返しています。 本屋や電子書籍で手に取らないようなジャンルのマンガも気軽に試し読みができて大変いいのです