最強のCSVエディタ「SmoothCSV」を支える技術
自作の CSV エディタ SmoothCSV (v3) が Generally Available になったので、技術的な工夫とかを書きます。 また7/1 16時からの24時間、Product Hunt でローンチするので応援よろしくお願いします。 About Me 株式会社ヘンリーでエンジニア的なことをしつつ、個人開発してます。 @kohii00 on X kohii on GitHub About SmoothCSV SmoothCSV は、macOS と Windows 向けの CSV エディタです。(Linux も近々) 初代 SmoothCSV は15年前に作っていて、昨年 v3 の開発を始めました。 Excel ライクな操作感で、直感的に使える CSVを扱うのに必要な、基本的〜応用的なツールが搭載されている 様々なフォーマットや文字コードに対応。列数が異なるCSVでも扱える 高
p5.jsによるクリエイティブコーディング入門 - ICS MEDIA
ウェブ技術を用いたクリエイティブコーディング環境にはさまざまなものがありますが、プロトタイピングや2D表現には、Canvas 2DをラップしたJavaScriptライブラリ「p5.js」が非常に便利です。この記事ではp5.jsの強み、便利な関数と作例を紹介し、自分で作成した作品の公開方法について解説します。 p5.jsとは p5.jsは、ウェブ上でグラフィカルな表現ができるJavaScriptライブラリで、基礎的なプログラミングの知識さえあれば手軽に創作を始められるのが魅力です。 またp5js.orgが提供しているウェブエディターを使うと、環境構築なしにブラウザ上でクリエイティブコーディングが始められます。たった数十行のみのコードでもメディアアート作品のような出力が得られる、とても興味深いライブラリです。今回はp5.js Web Editorを使って簡単なアニメーションを制作しましょう。
AWSの安価でスケーラブルなウェブアプリ構成 2025年度版 - maybe daily dev notes
3年前、趣味で開発するウェブアプリ向けの安価なAWSアーキテクチャについて記事を書きました。当時流行りの話題だった記憶です。 趣味Webサービスをサーバーレスで作る ― 格安編 - maybe daily dev notes 最近はAWSにも新たに色々なサービスが出てきて、以前とは一味違う構成を取れるようになっています。この記事では、アップデートされた格安かつスケーラブルなウェブアプリ向けAWSアーキテクチャを紹介します。 コード 本記事で紹介するアーキテクチャのリファレンス実装は、以前と同じリポジトリに公開しています。 github.com 主な機能は下記です: Next.js App RouterをAWS Lambda上にデプロイ CloudFront + Lambda関数URLによるレスポンスストリーミング対応 クライアントからサーバー、DBまでの型安全性 Aurora Server
UUIDを短くするライブラリを作った
のように、22文字の短くてスッキリしたIDに変換できます。 これを簡単に行うためのライブラリ「uuid58」を作成しました。 追記: また、これを簡単に試すためのウェブサイトも作成しました！ 本記事ではuuid58を作った背景や使い方、特徴を紹介します。 動機 データベースの主キーにUUIDを使うことは多いですが、UUIDは36文字（ハイフン込み）と長く、URLに埋め込むと見た目も悪くなりがちです。 「短くしたい！」と思ってBase64エンコードを考える人も多いですが、Base64は/や+、=などURLで使いにくい文字が含まれてしまいます。 そこで、Bitcoinでも使われているBase58（視認性の悪い文字を除外したアルファベット）でエンコードすれば、 22文字に短縮できる URLセーフ 見た目もスッキリ 0とO、Iとlのような区別しづらい文字が除外されている ダブルクリックで選択可能
できるだけ無料で作る個人開発のための技術スタックと注意点
最近思いつきで身内向けにTwitterクローンを開発していて、そこでの知見をゆるく共有したいと思います。技術選定の段階で以下の記事を参考にさせていただいたのですが、この記事の内容を前提として代替案としてこれもいいんじゃない？という話をしたいと思います。 フロントエンド 元々私は個人的にずっとNuxtを使っていたのですが、やはり現状はNext.js (+ Tailwind CSS)が一番良い気がします。一度勉強してみたら全然アリだな、と思いました。 バックエンド こちらもNext.jsでフロントエンドと同時に開発できます。Next.jsのServer Actionsはサーバーコンポーネントとクライアントコンポーネントどちらからでも呼び出すことができ、DBにアクセスしたりといったことができます。 Server Actionsの注意点 便利なServer Actionsですが、セキュリティの観点
MCPで飲み会番長をつくる - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 背景と目的 最近MCPという言葉をよく聞きます。皆さんが分かりやすい記事を出してくださっているものの、実際にMCPで何ができるのか、ドキュメントだけだとイメージが掴みきれなかったので、とりあえず簡単なデモを作って理解を深めようと思い立ちました。 テーマはなんでも良かったのですが、意外と時間が割かれる飲み会セッティングに着目し、この一連の流れを自動化する『飲み会番長』をClaude Desktopで実装してみました。 MCPとは何か (Model Context Protocol) MCPとは、AIアシスタントとあらゆるデータソ
Obsidian MCPサーバーをClaude Desktopで使ってみた | DevelopersIO
お疲れさまです。とーちです。 MCPの公式ページのExample Serversを眺めていたら Obsidian Markdown Notes というMCPサーバー（以後obsidian-mcp）があることを知りました。 Obsidianユーザーとしては、ぜひ試してみたいところです。この記事ではobsidian-mcpを実際に試してみた内容をお届けします。 インストール方法 今回はClaude DesktopをMCPクライアントとして使用します。Claude Desktopは既にインストールされている状態から始めます。 また、obsidian-mcpを使うためにはnpxコマンドが必要になります。このコマンドはNode.jsが入っていれば使えるはずです。 今回私が試した環境は以下のようなバージョンでした。 インストールは npx @smithery/cli install mcp-obsid
MCPサーバをつくって学ぶ | ダーシノ(@bc_rikko)
MCPサーバをつくって学ぶ 最近、AIアシスタントの文脈で「MCP」や「MCPサーバー」という用語を聞くようになった。 MCP（Model Cotext Protocol）とは？ Model Context Protocolとは、AIとアプリケーションとの間で情報を効率的にやり取りするためのプロトコル。 簡単に説明すると、AIが自分の作ったアプリケーションを操作できるように、データを提供したり、機能を公開したりして、扱いやすくするための方法を定義したもの（プロトコル）。 MCPを使うことで、AIがアプリケーションのコンテキストを理解できるようになる。 たとえば、いままで手動でデータを貼り付けたり、プロンプトを書いてコンテキストを補っていたりしたものが、AIが直接アプリケーションから取得できるようになる。 MCPサーバー 主に3つの機能を提供する。 Resources … クライアントが読み
CursorからMCPで社内のドキュメントや仕様書を参照する方法
はじめに CursorやGithub Copilot、Clineなど、コーディングに生成AIを使うのは当たり前になりました。AIにコードを書かせているとき、この仕様どおりに書いてくれないかなあ、と思う場面があります。Cursorには外部ドキュメントを読み込む機能があるので、指定しておけば、公開されているリファレンスなどをAIが読み込むことができるのですが、社内にある仕様書や開発標準などのドキュメントを参照したいケースもあるでしょう。この記事ではRunbookのMCPサーバーを使って、社内ドキュメントをAIに読み込ませる方法を紹介します。 Runbookについて Runbookはマニュアルや手順書を作成するためのWebサービスです。マニュアルを社内で共有したり、インターネットに公開したりできます。あと手順を組み合わせてワークフローのように実行できるらしいです。有料サービスですが、今回の方法で
国立国会図書館のOCRライブラリが凄くよかった件(Windows向け) - Qiita
はじめに 日本語OCR, 有料の業務用ソフトには色々と高性能なものがあるんですが、無料の場合の選択肢は意外に限られてます。最近ではGeminiなどにOCRさせることも試みてますが、縦書きに弱いのが欠点。加えて、私がやっているような著作権が切れた戦前の本のデジタル化の場合、認識率の低い旧字体が多いのが悩みの種。 そこで最近知ったのが、国立国会図書館が公開しているOCRライブラリ、NDLOCRです。国会図書館のデジタル資料（国立国会図書館デジタルコレクション)から全文テキストデータを作成するために開発されたとのこと。 NDLOCRは、現在ver2.1がGithubに公開されています。古い本が多い国会図書館の資料向けに作られているだけあって、旧字体でも高い精度で認識してくれます。今回は、このライブラリを試してみました。基本、Githubサイトに書いてある通りなんですが、いくつか注意すべき点をメモ
AI駆動プログラム開発、一気入門
AI駆動プログラム開発、一気入門 AI Driven Development このドキュメントは、全てMarkdown AIで作成しました。2024.11.18 <div Align="right">作成：Markdown AI ファウンダー兼アーキテクト coke_kouichi</div> AI駆動開発とは？ AI時代がやってきた！ あの大変だったプログラミング作業を、AIが勝手にやってくれるという、とんでもない時代がやってきました。 そこで、本書ではVercel社のv０、Stackblitz社のBolt、Replit社のReplit Agent、Anysphere社のCursor+Clineの5つのツールを用いて、AIプログラミングに挑戦します。 プログラミングは難しい、昔プログラミングに挑戦して挫折した、そんな方もAI時代は大丈夫です、ご心配なく。 本書でもう一度プログラミングに挑
Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応
Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応 AIにフルスタックアプリの生成を指示できるサービス「Bolt.new」を提供するStackBlitzは、Bolt.newの新機能としてFigmaで作ったデザインのインポートに対応したと発表しました。 Introducing Figma to Bolt Go from Figma to pixel-perfect full stack app — just put bolt․new in front of the URL & start prompting! pic.twitter.com/r78vjraVms — bolt.new (@boltdotnew) March 13, 2025 Figmaで作成した画面デザインをBolt.newへインポート可能に これまでBolt.ne
MastraとNext.jsで製造業の工場トラブル事例検索チャットボットを作ってみた | DevelopersIO
はじめに MastraはAIアプリケーションを構築するためのTypeScriptのフレームワークです。ELv2ライセンスで、マネージドサービスとして他社に提供することはNGですが、業務アプリの構築は可能です。なぜELv2なのかドキュメントもありますので詳細はこちらをご参照ください。 The primary limitation is that you cannot provide Mastra as a hosted or managed service that offers users access to the substantial functionality of the software. (訳) 主な制限は、ソフトウェアの重要な機能にユーザーがアクセスできるホスト型または管理型のサービスとして Mastra を提供できないことです。 またAIを活用したTypeScriptツー
【個人開発】リリース1ヶ月で月5万円(理論値)のサービスを作ったのでノウハウを全公開してみる（Next.js / Rails） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 みなさん、個人開発はしていますか？ そして個人開発をしている方は 個人開発アプリで一発あてて月収 xx 万円 を夢見ていたりしませんか？ 私も夢見る一人なのですが、特に「集客」や「マネタイズ」の方法に悩んでいる方も多いのではないでしょうか。 今回は、私が個人開発した Learning Next というサービスがあります。 こちらが軌道に乗ってきたので、開発の背景から技術的な工夫まで、赤裸々にお話ししたいと思います。 この記事を読んだらわかること この記事は、個人でサービスを作ってみたい人、特に 集客やマネタイズ
SSRで認証をどうするべきか？
既存プロジェクトに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
1円も使いたくない個人開発のための技術スタック
対象 一般的なWebアプリケーション 特に、学生などはクレジットカードが使えずそもそも支払いができないという状況もあるので無料のものをまとめてみました。 結論として Supabase Next.js Drizzle Cloudflare Pages Cloudflare D1 / KV どんな要素が必要か Webアプリの開発に必要なのはフロントエンドと、バックエンドです。 バックエンドといっても、その中身は実際の処理に加え、DB、またログイン認証機構が必要になります。 フロントエンド フロントエンドとしては、Next.js一強です。 すでにコミュニティも成熟しているので使いやすく、いろんなところに統合できます。 バックエンド処理 バックエンド処理は、Next.jsの"use server";を使えば簡単に行えるので、別にAPIを作ったりする必要はなさそうです。 フロント・バックエンドのデプ
MCPサーバーが切り拓く！自社サービス運用の新次元 - エムスリーテックブログ
こんにちは、エムスリーエンジニアリンググループ、コンシューマチームの園田です。本記事では、外部サービスとAIエージェントの連携を可能にするMCPプロトコルについて、技術検証の実装例を交えてお話しします。 1. MCPとは（ざっくり） MCP（Model Context Protocol）とは、Anthropic社によって策定されたAIエージェントが外部サービスから情報を参照したり連携することを目的としたプロトコルです。 「MCPサーバー」は、GitHubやPostgreSQLといったリソースをMCPで喋れるように変換してあげるプロキシのようなサーバーです。 Claude DesktopやCursorなどはMCPクライアントの機能があり、GitHubなどのMCPサーバーを利用してナレッジとして利用したり、プルリクエストの作成なども行えます。 Introduction - Model Cont
Capacitor: Webアプリをクロスプラットフォームに展開
import { LocalNotifications } from '@capacitor/local-notifications'; LocalNotifications.schedule({ notifications: [ { title: "On sale", body: "Widgets are 10% off. Act fast!", id: 1, schedule: { at: new Date(Date.now() + 1000 * 5) }, sound: null, attachments: null, actionTypeId: "", extra: null } ] });import { Geolocation } from '@capacitor/geolocation'; // get the users current position const pos
【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】
こんにちは、株式会社FP16で結構コードを書いている二宮です。 最近Webスクレイピングのコードを色々な方法で書いているので、そこで得た知見をここに残しておこうと思います。 ほぼ毎日なにかのWebスクレイピングコードを書いています。 Webスクレイピング手段 Webスクレイピングには色々な方法があります。 私が最近主に使っているのはこの5つの手段です。 cheerioでHTMLを解析 Playwrightなどで要素指定でデータを取得する APIを見つけて叩く（バックエンドとの通信を再現してデータを取得） LLMでサイト構造を解析してデータを取得する Next.jsからのレスポンスに含まれているデータを解析して取得する これが令和のWebスクレイピングのベストプラクティスだと思っています。 これらの方法を、目標に合わせて使い分けています。 使い分け方 CheerioでHTML解析 JavaS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのthisもこれで完璧！呼び出し方で変わる5つのパターン - Qiita
