建築とテクノロジーの融合、そしてフルスタックエンジニア(物理)としての全方位開発。果たせなかった夢にもう一度チャレンジしようと思います。前職のレイオフから10ヶ月、様々なご縁が繋がり、このたび、日本各地の自然の中に「もう１つの家」を建築してサブスクや共同所有から気軽に自然へ通える暮らしを実現するスタートアップ「SANU」の執行役員に就任し、CCXO(Chief Connected-Experience Officer)兼ソフトウェアエンジニアとして、日本各地に可愛くてエコでスマートな別荘を建てる仕事を始めることになりました。 前職の入社エントリーでは電子工作から始まった「ものづくり」がDeployGateのオフィス施工、そしてHOMMAでのスマート住宅の設計開発へと発展し、物理的な開発サイズがどんどん大きくなって楽しいと書きました。今回のSANUは現時点で既に全国各地に31拠点189室を構

はじめに TypeScriptでAIエージェントの開発ができると噂のMastraを試してみたくなり、主要機能をざっと調べてみました。 この記事では、エージェントやワークフロー、RAGなどMastraの基本機能を一通り紹介し、「どんなことができるのか」をざっくり掴めるようまとめてみました。より高度な機能や環境構築、デプロイ方法など詳しい設定方法を知りたい方は、公式ドキュメントを参照してみてください。 Mastraとは Mastraは、AIエージェント、ワークフロー、RAGなどの機能を統合的に提供するTypeScriptフレームワークです。VercelのAI SDKをベースにしており、OpenAI、Anthropic、Google Geminiなど様々なAIプロバイダーとシームレスに連携できます。オープンソースであるため、カスタマイズ性が高く、コミュニティによる継続的な改善が期待できます。 M

Cursor を使い始めた時に知っておきたかった 10 個の Tips を紹介します。これらの Tips を活用して Cursor を最大限に活用してください。 1. VSCode のキーバインドを設定する Cursor のセットアップ時に VSCode のプリセットを選択しても、キーバインドが完全に同じではないことに気付くかもしれません。特に、⌘K関連のキーバインドが⌘Rにリマップされていて、簡単には変更できません。例えば⌘+K Uで未保存ファイルを閉じたり、⌘+shift+Kで行を削除したりするのに慣れている場合は、キーバインドを変更したいと思うでしょう。 ⌘R関連のキーバインドを元の⌘Kに戻すには、まずworkbench.action.keychord.leaderを⌘Kに変更する必要があります。その後、元のキーバインドを設定できるようになります。 また、VSCode Keybind

TypeScript19Python11React11Next.js10PHP7TailwindCSS5Laravel5C#4JavaScript4Game Development4Expo4React Native4Tailwind4Vite4Supabase4Rust3Web Development3Flutter3API3Meta-Prompt3SvelteKit3SwiftUI3Swift3WordPress3Angular2Blockchain2html2Unity2FastAPI2GraphQL2Alpine.js2Accessibility2ionic2cordova2angular2Java2Vue.js2Zod2Zustand2NestJs2Node2NuxtJS2Vue2Function2Svelte2Terraform2Vivado2FPGA2Node.js2AL1B

2025/03/27追記 Cursor側のアップデートが1ヶ月で進んでいるので、以下追記しました。 本記事の内容を踏まえたあとに読むとよいかと思います！ はじめに こんにちは。Builtoという会社で代表 & エンジニアをしている冨田です。 私たちはマネジメントとタスク管理を圧倒的にサポートするAIエージェントを開発しています。 開発にもAIをフル活用しており、そこで得られた知見を共有したいと思います。 具体的には、経験3年以上の現役ソフトウェアエンジニア（生成AIのない時代からコードを書いてきた方々）をターゲットに、本番運用レベルの大規模コードベースでもCursorを活用しコーディング時間を 1/3〜1/5 に縮めている手法をお伝えします。 仕様策定やアプリの機能にもLLMをフル活用していますが、今回は実装にフォーカスします！ （なお本記事は中級者以上向けのため、まだCursorに触れた

We, developers, spend a lot of time in our terminal. Or maybe we could spend even more, because there are so many great CLI/TUI tools that can boost the developer productivity, or just be fun to use. This article contains a categorized list of CLIs / TUIs I personally use and those widely adopted in the development community. Our sponsorMultiplayer auto-discovers, tracks, and documents your entire

気づけばもう半年以上前の話になりますが、2024年5月、Interim CTOやSoftware Architectとして頑張って働いていた米国でスマートホームを開発するスタートアップ「HOMMA」からレイオフされ、事業を離れることになりました。入社時の夢いっぱいのブログエントリーはこちらからどうぞ。 ※ この記事は退職エントリーです。興味のある方だけお読みください。 何を作っていたの？最終的にどんなものを作ってたの？と思われると思うので、開発したプロダクトのデモを貼っておきます。ちなみに、この動画を作ったのも自分です。私物のBlackmagick Pocket Cinema Camera 4Kを持ち込んで、ポートランドの寒空の下、1人で撮影＆編集しました。 タッチパネルが壁一面にあったり、音声クライアントやアプリで操作するドヤ！っとしたスマートホームではなく、埋め込まれたセンサーが人間の

sponsorship here beautifully crafted animated iconsan open-source (MIT License) collection of smooth animated icons for your projects. feel free to use them, share your feedback, and let's make this library awesome together. built with motion and lucide

Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。

ムーザルちゃんねるのzaruです。今回はムーさんと、Next.jsを使い続けたい好きなトコロについて話しました。Next.jsが合うか合わないかは、正直プロジェクトとチーム体制や方針に大きく左右されます。僕たちが好きなトコロにピンときた方にはきっと合うと思いますのでぜひさわってみてください。 フロントとバックの境界線がなくなる フロントエンドとバックエンドの境界線がなくなるって、何、なくなるわけないだろ！と思うかもしれません。確かに実際には境界線がなくなるわけではなく隠蔽されているのが実態ではありますが、それによる開発体験の向上がとても好きです。 バックエンドの処理を簡単に実行できる Next.js（実態はReact）のServer Componentを使えば、コンポーネント内でSQLの実行などがそのままできます（以下のコードは例のために直接SQLを書いているので「うぇ？」と思うかもしれま

Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ

「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方までを紹介しました。本記事では、Lottieアニメーションの実装方法について紹介します。 Lottieの組み込みはプラットフォームに応じたさまざまな実装方法が用意されていますが、一般的なウェブの方法を例に紹介します。実装編の前編となる本記事では、手軽に組み込むことができるWeb Player（lottie-player、dotlottie-player）を使用して実装します。 iOS、Androidアプリケーション等のそのほかの実装方法は公式ドキュメントを参照ください。 アニメーションの実装 ウェブ向けの実装方法は大きく2パターンあります。HTML

Generative AI for Kritaのライブペインティング機能を実行している画面。左が筆者が描いた落書き。右が、その画像を線画（Scribble）としてAI生成した画像 11月13日掲載の記事「爆速化する画像生成AI」で紹介した新技術「Latent Consistency Models（LCM）」が大爆発しています。これは画像生成AIに2度目の革命を起こした「ControlNet」に次ぐ大インパクトではないかと感じています。「LCM-LoRA」（LoRAはStable Diffusion用の追加学習モデル）が11月下旬に登場したことで、リアルタイム生成のAI機能を組み入れたサービスやアプリの開発が一気に進みました。 なかでも、筆者にとってインパクトが大きかったのが、ペイントソフト「Krita」向けに開発された「Generative AI for Krita」。Kritaはスウェー

芳文社の4コママンガ誌「まんがタイムきらら」が11月に独立創刊20周年を迎えた。1990年代後半頃から注目を集め始めた“萌え系4コマ”を初めて専門的に扱ったマンガ誌で、1981年創刊のファミリー向け4コママンガ誌「まんがタイム」の増刊として2002年5月に誕生し、2003年11月に独立創刊した。「まんがタイムきららキャラット」「まんがタイムきららMAX」などの姉妹誌も誕生し、「ひだまりスケッチ」「けいおん！」「ご注文はうさぎですか？」「ぼっち・ざ・ろっく！」など“きらら系”とも呼ばれる数々のヒット作を送り出してきた。「けいおん！」「ぼっち・ざ・ろっく！」のようにアニメ化をきっかけに社会現象になった作品もあり、10月からは大熊らすこさんの「星屑テレパス」のテレビアニメがTOKYO MXほかで放送されている。「きらら」が20年以上愛され続けている理由とは？　同誌編集部の末永雅弘さん、大熊さん、

WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ

追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現