はてなブックマーク

対象 一般的なWebアプリケーション 結論として Supabase Next.js Drizzle Cloudflare Pages Cloudflare D1 / KV どんな要素が必要か Webアプリの開発に必要なのはフロントエンドと、バックエンドです。 バックエンドといっても、その中身は実際の処理に加え、DB、またログイン認証機構が必要になります。 フロントエンド フロントエンドとしては、Next.js一強です。 すでにコミュニティも成熟しているので使いやすく、いろんなところに統合できます。 バックエンド処理 バックエンド処理は、Next.jsの"use server";を使えば簡単に行えるので、別にAPIを作ったりする必要はなさそうです。 フロント・バックエンドのデプロイ先 Next.jsのおかげでフロントもバックエンドも一つのCloudflare Pagesにまとめて投稿できます

はじめに 去年の夏頃、巷でAIエディターが流行している最中、ずっと憧れていたNeovimを使い始め、晴れてVimmerになりました! それから半年が経ちNeovimにもだいぶ慣れてきたので、自分のNeovim環境を再構築しました。その際にプラグインも色々見直したので、今回はその中でも特に愛用しているプラグインを紹介します！ UI系のプラグイン dashboard-nvim Neovimをファイル指定なしで起動した際に表示されるスタート画面をかっこよくできるプラグインです。直近開いたファイルやプロジェクトも表示されるので便利だし、なにより見た目がかっこよくてテンション爆上げ系のプラグインです！ ちなみに、ヘッダー部分のロゴは以下のサイトのANSI Shadowフォントを使って生成しています！ hlcunk.nvim コードの各種ブロックの開始と終了部分をハイライトしてくれるプラグインです！複

※ この記事は2025/3/15現在の情報に基づいています。生成AIの進化は非常に早いため、最新情報は各公式ページをご確認ください。 はじめに AIエンジニアを活用した開発が注目されていますね。 AIエンジニアといえば、Devinが有名ですが、利用するためには月額約500ドルからのプランしかなく、コスト面でのハードルがあり、気軽に試すのは難しい状況でした。 そこで、オープンソースの自動開発AIエージェントとして開発されているOpenHandsに注目。 OpenHandsは基本的にはセルフホストが必要ですが、GitHub & Gitlab Issue Resolver機能というものがあり、これを設定すると、GitHub Workflowの中でOpenHandsのエージェントが実行されるため、セルフホスト不要で環境を構築することが可能です。 また、GitHub WorkflowはPublicリ

こんにちは、株式会社キカガク CTO 室の高橋です。 AI 活用推進をはじめとした、技術による課題解決や業務効率化に取り組んでいます。 Zoom には、録画を行うと文字起こしテキストを出力する機能があります。 その存在は知ってはいたのですが、ぱっと見た感じ「あぁー」とか「うん」といったフィラーが多く入っており、そのまま読むには難しいものでした。 一方で、会議内容を他者に共有するために議事録を記録するのが大変だったり、録画を共有しても視聴するのが大変であるという課題がありました。 そういった課題を解決するべく、Zoom の文字起こし作成をフックに、生成 AI を活用して要約を作成するワークフローを社内運用しているので、その仕組みについて紹介いたします！ 出力イメージ Zoom で録画し、文字起こしテキストが自動的に以下画像のように指定したフォーマットで Notion に出力されるようにしてい

既存プロジェクトにNext.js等のSSRを導入する場合は既存の認証機能を維持したり活かしたりする必要があります。しかしSSRの認証とCSR(SPA)の認証は同じではなく、簡単に共有できるものではありません。 ここでは複数のテックブログの事例を見ながら、この難しさと本物のウェブサービスで採用された解決策を見ていきます。 CSRとSSRの認証の違い まず最初に、CSR(SPA)とSSR[1]の認証の違いをざっくり紹介します。技術的制約を理解していただくことが目的です。 クライアント視点では、認証システムは突き詰めると、トークン(鍵)[2]を安全に保管し、必要時にサーバに渡す(鍵穴に差し込む) ことです。この２つに絞って解説します。[3] https://www.flaticon.com/free-icons/vault (by IYIKON) https://www.flaticon.com

なぜ作成したのか 識別が困難そうな事案なのでちょっと調べてみる この事件と発信者番号スプーフィング（Caller ID Spoofing）の関連性について分析し、どのような手口が使われた可能性があるのか、技術的な背景や防止策も含めて詳しく論じます。結果がまとまり次第、お知らせします。 新宿署番号を悪用した詐欺電話事件の分析 事件の概要と発信者番号スプーフィングとの関係 2025年3月、警視庁は 新宿警察署の実在する代表電話番号（03-3347-0110） が表示された不審電話が全国で多数発生しているとして注意を呼びかけました 。 わずか3日間で全国から400件以上もの報告があり、新たな特殊詐欺の手口とみられています。 着信画面には本物の警察署の番号が表示されるため、受け取った側は正規の警察からの電話だと信じ込んでしまいやすい状況です。 実際、新宿署だけでなく警視庁本部や他県の警察署番号を表

本記事では、スプレッドシートをバックエンドにして社内データアプリを構築するための複数の手段を紹介します。それぞれの手段のメリット・デメリットのまとめに加え、ニーズの高まっているAI機能の観点からの違いについてもご紹介します。 多くのチームでは、その利便性の高さから日々のデータをGoogleスプレッドシートで蓄積・管理することが珍しくありません。では、いざスプレッドシートをバックエンドとしてデータアプリを構築しようとするとどのような手段があるのでしょうか？ コードベース / ローコード / ノーコード 社内データアプリ構築の手段を分類すると、コードベースでの開発 / ローコードツールでの開発 / ノーコードツールでの構築に分類されます。それぞれの概要と代表的なサービスは以下のとおりです。 コードベース コードベースでデータアプリを構築します。オープンソースのフレームワークが複数存在し、コード

最近、ストレージ不足でOSアップデートができなくなりました。 備忘録も兼ねてMacのストレージが足りなくなった時にやることを記事にします。 一般的な解消方法 この章は基本的なことしか書いていないため読み飛ばしても構いません。 ストレージの状況を確認する まず、ストレージの使用状況を確認しましょう。以下の手順で確認できます。 「システム設定」を開く 「一般」を選択 「ストレージ」タブをクリック ここで、どの種類のファイルがどれだけの容量を占めているかを確認できます。 現在の状態をメモしておくと、どの程度効果があったのかわかりやすいです。 不要なファイルやアプリを削除する ダウンロードファイル 不要なアプリケーション 不要な画像・動画ファイル ゴミ箱フォルダ 容量の大きい画像や動画ファイルなどを消したくない場合はクラウドに移動することをおすすめします。 エンジニア用の解消方法 brew bre

AI 経由でブラウザを操作する browser-use を deno で実装してみました。 元は python ですが、コア部分を自分で作れるように書き直しました。 注意: 勉強用の作例であって、本番で使えるものではないです。 以下の記事を読みながら実装しました tl;dr アクセシビリティ要素を列挙 各要素にブラウザ上でオーバーレイで操作用インデックスを書き込みつつ、インデックスに対応する xpath を作っておく claude のスクリーンショットと xpath を渡す claude に対応する xpath の操作方法を教える ツールとして対話的に実行 ステップ Tool Runner Puppeteer BrowesrTool Tool Runner まず、Tools を使って AI と対話する部分を作ります。 import { anthropic } from "@ai-sdk/a

こんにちは、しば田です。 この記事はできる限り手っ取り早く/端的にMCPを理解しようとした自分のメモで超丁寧な解説記事とかではないです。ただできる限り平坦な言葉と例を使ってとっつきやすさ重視で書きました。 ↑これを読んだ読了メモです。LLMと復習して自分の言葉で理解し直しました。 MCPとは？ AIエージェントと外部サービス間の通信手段のこと。 （怒られそうだが、AIエージェント用のAPIというのが実は一番伝わりやすいかも？） MCPホスト・MCPクライアント・MCPサーバってそれぞれ何？ MCPホスト 実際にユーザーが使うツール。 ユーザーの指示を理解して子分（AIエージェント）に情報を取りにいかせる。 例）Cursor / Claude Desktop MCPクライアント 情報を取りに行くAIエージェント MCPホストの命を受けて出勤 MCPサーバに話しかけて情報をもらう。 例）AIエ

皆さんの会社にも規約があると思います。この規約は複数PDFに分かれていたり、情報量が膨大であったりすると、必要な情報を探し出すのに時間がかかってしまうことがあります。 そこで、今回複数PDFからなる弊社の規約情報をGoogleのNotebookLMに集約してみました。NotebookLMを活用することで、規約情報の検索効率と情報精度が大幅に向上しました。 実際に弊社の規約情報をNotebookLMにアップロードした画面が下の図です。 NotebookLMとは？ NotebookLMは、Googleが提供する大規模言語モデルを活用した情報整理ツールです。PDFを含む多様なドキュメントをアップロードすることで、それらの情報を学習し、自然言語による質問応答や情報抽出を可能にします。 規約情報をNotebookLMに集約した背景 弊社では、複数のPDFに分かれた規約情報を管理しており、必要な情報を

今回は一気に「MCPなにもわからない」から「MCP完全に理解した」に一気にレベルアップすることを目的に書いています。 そのために以下をモリモリに解説していきます。 ModelContextProtocol(MCP)とは？ MCPがあることでできること MCPを実装するライブラリmodelcontextprotocolを使ってチュートリアル 実装のためのネゴシエーションや通信プロトコルの説明も踏まえてのチュートリアルです。 CursorへのMCPサーバーの登録方法 MCPがどのように動作してツールが使われるのか？ FunctionCallingとの違い MCPって単語聞きすげてわからないままに嫌になっている人はこれを読むことで解放されてください。 ModelContextProtocol(MCP)とは？ まずはイメージを見てもらうとわかりやすいと思います。 (https://modelcon

タイトルは半分釣りです。課金額が気づいたらえらいことになってたのは本当です。 というわけで、VSCodeで直接使うのではなく、VSCodeに加えて定額サブスクのClaude ProとそのDesktopアプリからコード生成や編集をしてもらうことで、APIをなるべく使わずかつ楽に開発を助けてもらえないか試してみることにします。 MCPサーバーが使えるのは現状Desktopアプリのみ (3/15追記) claude.aiのWebでのチャットに対してDesktopアプリのみ、という意味です。プロトコルなので、LLMのAPIを用いてMCPクライアントを実装していれば何からでも使えます（ClineやCursorもそう）。 MCPサーバーについて特にここでは詳しく説明しません。 ClaudeのDesktopアプリと連携して、チャットだけじゃなく色々なサービスと連携できる機能だよ、ってところです。以下にい

本記事は「AI技術を駆使した仕事術」の解説ではありません。逆であり、AI技術の進展に左右されない「仕事の本質」を意識した仕事方式の解説となります。弊社の公式内容ではなく、執筆者が心掛けている内容です。 はじめに 第一に、「AI技術が将来的にどこまで仕事に良いインパクトを与えるのか」、「どのような仕事（タスク）レベルまでAIによって自動化されるのか」は想像が難しいです（とくに実現タイミングの予測も含め、少なくとも私には）。 第二に、AI技術の進展の早さを考えると、現時点（2025年3月末）の「AI技術を駆使した仕事術」を解説しても、おそらく1年後の「2026年3月末」には、その記事内容は陳腐化している可能性が高いでしょう。 （※とはいえ短期的には、「（現時点での）AI技術を駆使した最強の仕事術」の紹介記事にはとても価値があると思います。） 本記事では、AI技術に取り組む弊社にて、私（および私

はじめに Azureとは、Microsoftが提供するクラウドサービスです。 正式にはMicrosoft Azureと呼ばれ、企業や開発者がインターネット経由でさまざまなITリソースやサービスを利用できるようにするものです。同じようなクラウドサービスとしてAWS（Amazon Web Service）があります。こちらはAmazon社が提供するクラウドサービスです。 Azureを使うことで、物理的なサーバーを購入して運用する必要がなくなり、インターネット越しにリソース（コンピュータ、ストレージ、ネットワーク、データベースなど）を必要なときに必要なだけ利用することができます。そのため、コストを抑えて導入できる、必要に応じて拡張できる（柔軟性の向上）などのメリットがあり、多くの企業で取り入れられています。 Azureは無料で始めることができ、制限はあるものの、多くのサービスを利用することができ

はじめに はじめましての人ははじめまして、こんにちは！ フロントエンドエンジニアのがっちゃん（ @gatchan0807 ）です。 今回は、私が普段から愛用しているGoogleのNotebookLMについて、便利な使い方とその魅力について紹介したいと思います！ みなさんは物理の技術書ってどうしてますか？ 本棚を買っても買っても置き場所がなくなっていくし、読み始める気力が出なくて積ん読しまくってたり、そもそもどこに何が書いてあったか覚えてなかったり…みたいなことよくありませんか？ 私は技術書を中心に、結構な量の物理本を持っているんですが、まさにその悩みを抱えていました。そこで思いついたのが、NotebookLM を使った物理本の管理術です。 まだまだお試し中ですが、ある程度手応えを感じているのでぜひ最後まで読んで使えそうなところはマネしてみてください 🙌 NotebookLMで物理本を管理

tl;dr Anthropic API の Prompt Caching にふたつアプデがあるよ Prompt Caching の読み込みトークンが入力トークンの対象外になって、コスト削減とレートリミットが改善されたよ Prompt Caching の書き方で cache_control: {type: ephemeral} の指定が少なくて済むようになったよ テキストの特定範囲を編集できる text_editor ツールが公開されたよ Prompt Caching のアプデ Anthropic API では 2024 年の 8 月から Prompt Caching が導入されています。Cline など大量のトークンを消費する用途にめちゃくちゃ便利な機能です。この Prompt Caching に二点アップデートが加わり、合わせてtext_editorツールが公開されたというのが今回の内容

はじめまして！OpenAI の Developer Experience チームに加わった瀬良（@seratch）と申します。 前職の Slack では公式 SDK の開発と Developer Relations の活動を担当していました。OpenAI でも開発者の皆さんのお役に立てるよう幅広く活動していきますので、よろしくお願いします！ エージェント開発のための新たなツール OpenAI は、日本時間の 3/12 未明にエージェント型のアプリケーション開発のための新しい API セットと Agents SDK を発表しました。 公式発表も日本語化されていますので、ぜひそちらもお読みください。この記事では実際に利用する上での技術的なポイントを整理してご紹介します。 tl;dr （要点だけ知りたい方向けのまとめ） 後半ではコード例も交えて、詳しく解説していきますが、まずは、すでに Open

はじめに 2025年3月12日にOpenAIからAgents SDKや新たなAPIの発表がありました。 詳細については以下の動画にデモベースでのアップデート内容の説明があるため、ご覧ください。 Agent SDKとは？ OpenAIが新たに提供をはじめたAgent機能を構築するためのSDKです。GithubでOSSとして公開されています。以前はSwarmという名称でexperimental versionとして提供が行われていたものの進化形であると理解しています。 AgentSDKを利用すると、自律的なふるまいをもつAgentが比較的に簡単に実行ができるようです。GithubのReadMEをベースに挙動を試してみたいと思います。 早速やってみよう 今回はResponseAPIの提供など様々な新機能の提供がありましたが、この記事では Agent SDKを実際に試してみたいと思います。 まずは

Ubie で副業として Backend For Frontend (BFF) サーバーの開発を担当している nissy-dev です。 今回は、モジュラモノリスアーキテクチャにおける Prisma を利用した DB アクセスの課題と、その課題に対処するために作成した lint ルールについて詳しく解説します。 NestJS と Prisma で作るモジュラモノリス ユビーでは、BFF の GraphQL サーバーを実装する際に、NestJS を利用したモジュラモノリスを採用しています。この BFF サーバーは、マイクロサービスを呼び出すだけではなく、Prisma を使用したデータベースへのアクセスも行います。 モジュラモノリスの設計において、モジュール間の独立性の確保は非常に重要です。「ソフトウェアアーキテクチャの基礎」にも次のような説明があります。 優れたモジュール性を維持することは、暗

タイトル通りです。 誰でも投稿できるのでオススメの提供お待ちしてます！ フォーマットは自由です、1投稿でいっぱい紹介してくれてもいいです AIツールやデザインツールとかも気になる！！ ターミナル設定とかも気になる！！ Figmaのおすすめプラグインも気になるな〜！ 2022年にやった過去のスクラップ

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

はじめに 以前、「Raspberry Pi Picoでロータリーエンコーダの回転を検出する」、「M5StackでロータリーエンコーダをBluetoothキーボード化する」という記事を書きました。 先日、スイッチサイエンスから「Raspberry Pi Pico 2 W」が発売され、入手できましたので、これらの記事の内容をアップデートし、Raspberry Pi Pico 2 WでロータリーエンコーダをBluetoothキーボード化してみました。 Raspberry Pi Pico 2 Wとは？ 簡単に言えば「Raspberry Pi Pico 2」のWi-Fi/Bluetoothモジュール内蔵版、あるいは「Raspberry Pi Pico W」の進化版です。 詳しくはスイッチサイエンスのサイトなどを参照ください。なお、私が購入したのはピンヘッダ実装済みの「Raspberry Pi Pic

やりたいこと 動機: Puppteer はプロセス外部のリソースを触るので、正しく終了させないとプロセス終了後にChromeが起動しっぱなしになってしまう。 TS 5.2 から使える await using と AsyncDisposableStack でリソース開放を逐次予約する。 tl;dr 本当は await using で個別にリソースを確保/開放したいが、まだ諸々のライブラリが対応してない 自分でラップするのが面倒 なので、 AsyncDisposableStack.prototype.defer に逐次放り込むのが楽 準備 Deno で単純な await using は使えるのだが、試した限りは AsyncDisposableStack の型は存在するがコンストラクタが存在しなかった。 後述する SuppressedError もなかった。なのでポリフィルが必要。 AsyncD

サンプルプロジェクト 構成 イベント駆動と CQRS を意識した、レイヤードアーキテクチャをベースとしたヘキサゴナルアーキテクチャになります。 各層について レイヤードアーキテクチャをベースに、以下の4層に分けています。 プレゼンテーション層: ソフトウェアの入出力を担当 アプリケーション層: ソフトウェアのユースケースを担当 ドメイン層: ドメイン知識を元にしたビジネスのルールや制約、プロセスを担当 インフラストラクチャー層: 技術的関心ごとの全般を担当 ディレクトリ構成 domain/ # ドメイン層 models/ ## ドメインモデルを格納 services/ ## ドメインサービスを格納 application/ # アプリケーション層 use-cases/ ## ユースケースインプットポートを格納 interactors/ ## コマンドにあたるユースケースの実装クラスを格納

はじめに 最近はChatGPTやClaudeなど、LLMを活用したAIのツールが急速に普及しています。内部でLLMの力を最大限活かすことで、Clineはプログラミング、Perplexityは情報検索、V0はビジュアルの作成、といった様々なタスクがスムーズに行えるようになっています。また、MCPの登場によってLLMの能力が拡張され、これらツールの使い勝手は益々良くなっていくはずです。一方で、LLMの力が強くなっていくに連れて注意しなければいけないのがプロンプトインジェクションの脅威です。 プロンプトインジェクションとは プロンプトインジェクションとは、AIのチャットボットに対して、ツール本来の使い方とは反して情報を抜き出したり攻撃することを指します。 例えば、プロンプトインジェクションによってAIツールの実装において最も重要ともされる「システムプロンプト」がリークされる可能性があります。通常

このシリーズでは、Claude や Windsurf Casade などの AI を強化する「MCP（Model Context Protocol）」の導入方法と活用テクニックを、初心者にもわかりやすく解説していきます。様々なMCPサーバーを活用して、AIとの協働作業をより豊かなものにしていきましょう！ シリーズ目次 👉 MCPの概要と導入方法 Filesystem MCP Server： AIでローカルファイルを扱う YouTube MCPサーバー：動画の内容を取得 mcp-pandoc： AIでドキュメント形式を変換 GitHub MCPサーバー： AIでリポジトリを管理 Figma MCP：デザインとコードを効率的に連携 Slack MCPサーバー：チームコミュニケーションを強化 Firecrawl MCP：スクレイピングでウェブ情報を取得・分析 Markdownify MCP S

前回MCPのことを調べてみましたが、MCPを試しに作ってみました記事になります。 MCPサーバーを作ってみる 参考にしたのは、こちらの記事のPython版で、入力された米国の地名の天気を米国の天気APIから取得して返すものです。 この記事の下の方にCluadeにコードを解説してもらったものを置いておきます。 正常に動作すると、このような形でMCPへアクセスし、天気を教えてれます。通常は学習した日付までの情報を持っていませんが、MCPを通してAPIアクセスすることによって、今時点での天気を取得できます。 東京の天気はダメ。 日本語でホノルルの天気を聞いてみるのはOK。 聞き方が悪かったのか、LLMの性質なのか、実はテストしてた時は日本語はNGでした。 回答もまちまち(これはLLMの動作として正しい)なので、この辺りの使い勝手は要検証ですね。 エラーが出た時には MCPの起動に失敗するなど、エ