今回は、OpenCode とよばれる OSS の AI エージェント + LLM API を活用して、 コスパよいローカルAIエージェント環境を作っていきたいと思います。 OpenCode とは OpenCode は、ソフトウェアエンジニアリングタスクを支援するために設計されたオープンソースの AI エージェントです。 ターミナル上で動くため、どんなエディタにも対応します。僕は普段 Neovim で作業しているため、ターミナルで完結できるので使いやすいと感じます。 Big Pickle OpenCode では、インストール後からそのまま使えるフリーの LLM “Big Pickle” が提供されています。 このモデルで色々と使ってみましたが、複雑・難解なタスクはわかりませんが、簡単なタスク・インプットが豊富なタスクは十分実用レベルと感じました。日本語でいけます。 Zen Curated list of models provided by OpenCode. OpenCode ローカルLLM を試す 今回は、無料で使えるローカルLLMの OpenCode 上でのセットアップの手順を紹介します。 ローカルLLM をローカル環境で動かすためのランタイムとして Ollama と LM Studio を試してみます。 Ollama Ollama ダウンロードページに移動します。 Download Ollama on macOS Download Ollama for macOS インストール確認 ...

はじめに Dependabot とは、GitHubが提供するセキュリティツールです。リポジトリの依存関係を監視し、脆弱性のあるパッケージや古いバージョンを検知して自動でプルリクエストを作成してくれます。 サプライ チェーンのセキュリティに関するリファレンス - GitHubドキュメント GitHub Docs 実際に Dependabot を使って、脆弱性のあるパッケージを自動アップデートしてみましょう。 まずは、dependabot の設定ファイルを以下のように作ってみます。 version: 2 updates: # Enable version updates for npm - package-ecosystem: "npm" directory: "/" # Check the npm registry for updates at 09:00 JTC 00:00 UTC on Monday schedule: interval: "weekly" day: "monday" time: "00:00" open-pull-requests-limit: 5 # Add labels to pull requests labels: - "dependencies" - "npm" # Enable version updates for GitHub Actions - package-ecosystem: "github-actions" directory: "/" # Check for updates at 09:00 JTC (00:00 UTC) on Monday schedule: interval: "weekly" day: "monday" time: "00:00" open-pull-requests-limit: 3 # Add labels to pull requests labels: - "dependencies" - "github-actions" # Assign Dependabot as a reviewer for consistency assignees: - "dependabot[bot]" reviewers: - "dependabot[bot]" これで、Dependabot によって PR が自動で作成されるようになります。 この段階だと PR が作成されるだけなので、手動でPRをマージする必要があります。 これを自動化するため、GitHub Actions で自動マージされるように設定します。 ...

以下の記事で D1 を試しましたが、KV (Workers KV) も触ってみましょう。 Cloudflare Workers + Next.js + D1 + drizzle を試してみる Cloudflare Workers と Next.js、D1、drizzle ORM を組み合わせた個人開発向け構成で、テンプレート作成からマイグレーション、ローカル開発、リモートデプロイまでの一連の流れを紹介します。 @a2ito ちなみに、KVとD1 の料金を比較すると、D1の方が圧倒的に安いです。 感覚的にはD1の方が高いのではないか、と考えていたので意外でした。D1を積極的に使いましょう。 KV の料金 ※2026/1時点 Item Free plan Paid plan Keys read 100,000 / day 10 million / month, + $0.50 / million Keys written 1,000 / day 1 million / month, + $5.00 / million Keys deleted 1,000 / day 1 million / month, + $5.00 / million List requests 1,000 / day 1 million / month, + $5.00 / million Stored data 1 GB 1 GB, + $0.50 / GB-month Pricing · Cloudflare Workers KV docs Workers KV pricing for read, write, delete, and list operations, plus storage costs and billing FAQ. Cloudflare Docs D1 の料金 ※2026/1時点 ...

GitHub や Zenn などでは当たり前のようにできるコードブロックのコピーですが、 Hugo 上ではデフォルトでできません。さすがに不便すぎるので作っていきましょう。 ついでに、ファイルパスを表示できるようにしましょう。 こんな感じです これを markdown 上で表現するには以下のように書きます。 ```text {data-filename="ファイル名をつけられます"} こんな感じです ``` 変更・追加するファイルはそれぞれ以下になります。 コピーボタン追加 layout/partials/head.html static/css/code-copy.css static/js/code-copy.js ファイル名追加 layout/partials/head.html static/css/code-copy.css <link rel="stylesheet" href="/css/code-copy.css"> <link rel="stylesheet" href="/css/highlight.css"> .code-block { position: relative; } .copy-btn { position: absolute; top: 2px; right: 12px; padding: 4px 8px; font-size: 0.75rem; border-radius: 6px; background: #1e293b; color: #fff; border: none; cursor: pointer; opacity: 0.8; z-index: 10; } .copy-btn:hover { opacity: 1; } document.addEventListener("DOMContentLoaded", () => { const blocks = document.querySelectorAll("pre > code"); blocks.forEach((code) => { const pre = code.parentElement; // すでに処理済みならスキップ if (pre.parentElement.classList.contains("code-block")) return; const wrapper = document.createElement("div"); wrapper.className = "code-block"; // ファイル名要素の作成 const highlight = pre.closest(".highlight"); if (highlight && highlight.dataset.filename) { const filename = document.createElement("div"); filename.className = "code-filename"; filename.textContent = highlight.dataset.filename; wrapper.appendChild(filename); } const button = document.createElement("button"); button.className = "copy-btn"; button.textContent = "Copy"; button.addEventListener("click", async () => { await navigator.clipboard.writeText(code.textContent); button.textContent = "Copied!"; setTimeout(() => (button.textContent = "Copy"), 1500); }); pre.parentNode.insertBefore(wrapper, pre); wrapper.appendChild(button); wrapper.appendChild(pre); }); }); .highlight[data-filename] { position: relative; padding-top: 0; } .code-filename { position: relative; padding: 6px 12px; font-size: 0.75rem; font-family: monospace; background: #0f172a; color: #e5e7eb; border-bottom-right-radius: 8px; user-select: text; cursor: text; }

Hugo 上で何かのリンクを貼ると↓のようになります。 https://github.com/a2-ito/cf-db-test これだと殺風景なので、Zenn などで自動作成されるブログカードのように装飾してみます。 実際に作ったものがこちら↓ a2-ito/cf-db-test This repository is a minimal and practical example of running Next.js App Router on Cloudflare Workers and using D1 Database with Drizzle ORM. - a2-ito/cf-db-test GitHub 基本的に AI に作ってもらったのですが、いくつか微調整しました。 OGP 画像は 160x120 の領域に拡大して収めています。（比率が違う画像の場合、引き伸ばされた感で微妙です、、、） GitHub リポジトリの場合、ogp:title にリポジトリ名と説明が含まれるようで、リポジトリ名だけを title として抽出・表示しています。 description が長い場合、カードが縦に伸びてしまうので、2行を超えないよう3行目以降は … と表示されるようにしています。 使い方としては、以下の2ファイルをコピペで配置してもらえればOKです。 assets/css/linkcard.css layouts/_shortcodes/linkcard.html a.link-card { box-shadow: none !important; } .link-card { display: flex; gap: 8px; border-radius: 12px; background: #0b2a4a; color: #fff; text-decoration: none; margin: 1.5em 0; } .link-card:hover { opacity: 0.9; } .link-card__body { flex: 1; min-width: 0; padding: 12px; } .link-card__title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; } .link-card__desc { font-size: 0.9rem; opacity: 0.85; margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .link-card__site { font-size: 0.75rem; opacity: 0.6; } .link-card__image { width: 160px; height: 120px; overflow: hidden; flex-shrink: 0; background: #0a1e33; /* 余白用 */ display: flex; align-items: center; justify-content: center; } .link-card__image img { width: 100%; height: 100%; display: block; border-radius: 0px 8px 8px 0px; } layouts/_shortcodes/linkcard.html ...