MCPサーバーからmicroCMSにコンテンツを入稿する
こんにちは！ひまらつ（@himara2）です。 MCPサーバーがとても盛り上がってますね。 MCPはLLMが外部サービスにアクセスする強力な仕組みですが、今回microCMSのMCPサーバーを作ってみました。npmとして下記で公開しています。 今回はこのMCPサーバーを使い、ClaudeからmicroCMSのコンテンツの作成・更新する方法について書いてみます。 事前準備 まずはmicroCMSでAPIを作ります。 今回は「お知らせAPI」と「カテゴリAPI」の2つを作ります。 お知らせAPI。カテゴリをコンテンツ参照している カテゴリAPI 次にAPIキーを設定します。 デフォルトではGETの権限だけがついているので、以下を追加します。 コンテンツAPI POST PUT PATCH マネジメントAPI メディアの取得 メディアのアップロード 通常であればこの後は管理画面から直接入稿、ある
Gemma 3 をブラウザ上で動かして PWA へ搭載する
はじめに Gemma は Google が開発していることで有名な、オープンで軽量な LLM である。 最小モデルとして1Bのモデルもリリースされており、エッジデバイスでの実行も視野に入れられている。 Google のドキュメントでは、このようなモデルによる推論をブラウザで実行するための方法も紹介されていた。 現代の Web アプリケーション開発者にとって馴染みがある React で実行できるコードを用意したので紹介したい。 併せて PWA としてオフラインで動作させられることも確認した。 繰り返すが、モデルによる推論を、「ブラウザで」実行する。 LM Studio など専用のアプリケーションで実行したものへブラウザからアクセスする、のではなく、ブラウザ上で実行する。 手っ取り早くコードを pull して動かしたい場合はこちらのリポジトリを参照されたい。 WebGPU API と Medi
CSS `mask-image` を使って要素の一部だけをはみ出して見せるテクニック
Webサイトのデザインにおいて、要素がその背景やコンテナから一部分だけはみ出しているような表現を使いたい場面があります。例えば、商品画像の上部だけが背景の上に飛び出しているようなデザインです。 参考：BOTANIST | フレグランスコレクション サクラとチェリーの香り これを実現するために、画像を複数枚用意して重ねたり、overflow: hidden を駆使したりする方法も考えられますが、CSSの mask-image プロパティを使うことで、よりスマートかつ柔軟に実装できます。今回はその具体的な方法について解説します。 TL;DR 下記のようなMaskで再現する。 実現したい表現 以下のような、要素（ここではボトル画像を含む div）が、そのコンテナや背景要素の上端から、一部分だけはみ出して表示される表現を目指します。 （ここに、ユーザーが提示した画像のようなスクリーンショットや図を
Hankoを使ってパスキーを使った指紋認証をWebで試してみる
この記事は？ 最近、ヤフーやNTTドコモ、メルカリといった日本で有名な企業がログインにおいて、パスキーを使った認証を採用していること、または、し始めたことを知り、その技術について興味を持ったので調べていました。その中で、パスキーを使った認証が実装できるHankoというライブラリを見つけたので試してみたという記事です。 パスキーとは何か？ 筆者はパスキーについて詳しくないため、次の記事がとても参考になりました。 簡単に言えば、パスキーとは、FIDO(ファイド, Fast IDentity Online)という認証技術で使われる資格情報の一つであり、Web Authenticationの仕様(Web技術標準化団体W3Cが策定)とClient-to-Authenticator Protocol(CTAP)の仕様(FIDOの標準化団体FIDO Allianceが策定)で構成されるFIDO2の仕様で
OpenAPI Specificationを導入するまでの苦労と失敗、その後の効果 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに 対象読者 TL;DR OpenAPI Specificationとは OASを導入することの何が嬉しい？ 1. プロダクトごとにAPI仕様書を記述するツールやフォーマットがバラバラでスイッチングコストがかかる 2. 記述量が増えると動作が重くなる 3. API仕様変更の伝達漏れの多発 導入までの課題 1. OASの調査に時間をかけすぎた 2. OASのデメリット全てに対応策を講じようとしてしまったこと 導入して１年、開発環境は改善されたのか？ おわりに はじめに ラクスフロントエンド開発2課の斉藤です。 ラクスの開発するプロダクトである楽楽明細、楽楽電子保存、楽楽請求ではOpenAPI Specification（以下OAS）を採用した開発を行っています。 今でこそOASを活用した開発を行うことができていますが、導入にあたっては様々な苦労がありました。 そこで今回は 何故OASを
Denoの静的サイトジェネレータ`Lume`の紹介
2023年12月に静的サイトジェネレータであるLumeのバージョン2がリリースされました． 私は個人ブログを書くのに GitHub Pages + Lume を利用しているので，年末はLumeのバージョンアップなどの作業をしていたのですが，改めて体験が良いなと思ったのでLumeの紹介をしたいと思います． 前提知識 GitHub Pages GitHub PagesはGitHub社がプロジェクトのプロジェクトのウェブサイトを提供することを目的に，リポジトリに配置してある静的ファイル(HTMLやJSなど)をホスティングしてウェブサイトを公開してくれるサービスです．@a-skuaというアカウント名の場合，a-skua.githu.io をというリポジトリを作成すると，https://a-skua.github.io[1]というURLのウェブサイトを作ることができます． GitHub Pages
Remix on Cloudflare Pagesで、@vercel/ogを使ってOGP画像を生成する
こんにちは、Webサイト作ってますか？ Webサイトを作ってると、SNSやSlackにURLが貼られた時の見栄えを良くするために、OGP画像（og:image）を設定したくなりますよね。 筆者はCloudflare PagesとRemixでサイトを作ることが多くなってきたのですが、OGP画像を動的に生成する上手い方法を調べていたら一定の成果が出たので、共有しておこうと思います。 要点としては次のとおりです。 Cloudflare Pages向けの @vercel/og ラッパーを使う できたらURLの末尾を .png にする（Cloudflareのキャッシュを効かせるため） VercelのOGP画像生成ライブラリ @vercel/og OGP画像を動的に生成する分野には一定の需要がありますが、簡単に実現する方法というのはあまり多くありません。そんな中、Vercel社が提供している @ver
ポートフォリオのリニューアル／コンセプトの強度とドット絵とWeb開発 - ここぽんのーと
もう何度目になるだろうか。そろそろ数えるのも難しくなってきた、ポートフォリオサイトのリニューアル。今回は「コンセプトの強度」や「ドット絵とWeb開発」といった観点でいろいろ書き散らしていく。 過去の振り返り本サイトcocopon.meは、いまご覧いただいているブログ以外にもいくつか役割を持っており、例えば自身の実績を載せるポートフォリオも兼ねている。 これまで何度もリニューアルを重ねてきており、そのときどきの様子は当時の記事から窺い知ることができる。
GraphQL のデータソースに microCMS を 使う
はじめに この記事では、GraphQL のデータソースに microCMS を利用する方法を書いてみます。GraphQL は BFF として利用するケースも多いですが、GraphQL としては、データがどこから来たのかは重要ではありません。データベースや RESTful API、マイクロサービスから取得するといった選択肢があります。今回は microCMS をデータ取得元にすることを想定し、その構成や構築手順を書いていきます。（以下の図の REST API の部分が mciroCMS になるイメージです。） GraphQL is data source agnostic 出典: https://www.apollographql.com/blog/graphql/basics/what-is-graphql-introduction/ なぜ microCMS を使いたいのか microCM
Denoのフロントエンド開発の動向【2024年冬】
半年程前に、以下のような記事を書きました。 この記事では、上記の記事から半年程の間で起きたDenoでのフロントエンド開発に関して影響がありそうな内容などをまとめていきます。 Deno本体のアップデート 直近半年ほどでDenoに導入された機能からフロントエンド開発に影響しそうなものについていくつか紹介します。 npmパッケージの対応状況について 大きな点として、Deno v1.35からAstroが動作するようになったようです。 それ以外にはDenoでNext.jsを動かすための試みがいくつか進んでいるようです。next buildやnext devを動かすための対応がいくつか入っています。 また、直近で公開されたロードマップではSvelteKit, VuePress, Qwik, Remixなどを動かすための対応を進めていくことが検討されているようです。 Remixについては公式でRemix
HonoXのSSGで個人ブログを構築しました - mooriii's blog
個人ブログを開設する機運が高まっていたところに、HonoXという試したい技術が出てきたので勉強がてら個人ブログを作ってみました。 今回ブログを構築する過程で調べたこと等をまとめていきます。 HonoXでSSGを始める HonoXとは @yusukebeさんが作っているHonoとViteを組み合わせたフルスタックのWebフレームワークです。 SSRが高速だったりCloudflareとの相性が抜群だったり何かとイケているフレームワークだったので時代の波に乗って使ってみました。 手順 に沿って始めればすぐに動きます。 GitHub - honojs/honox: HonoX - Hono based meta frameworkHonoX - Hono based meta framework. Contribute to honojs/honox development by creating
ブログをリニューアルしました
お久しぶりの更新です。ブログをリニューアルしました。 お久しぶりです。 久しぶりのブログ更新です。 ブログのデザインをリニューアルしたいなーと思い立ち、リニューアルを推進するために自分自身にブログのデザインを刷新するまではブログを更新しないぞ、という制約をかけてました。 その過程で TTIL なんていう雑メモ置き場的なサブ・ブログを初めてしまい、本家のこちらの更新をサボっておりました。 が、一念発起してブログをリニューアルしました。 技術スタック ブログの技術スタック…という程大きな技術スタックの変化はないのですが、今回のリニューアルで使った技術を紹介します。 （🆕 が付いているのが今回のリニューアルでの新たな取り組み） Blog Engine: Jekyll Hosting: GitHub Pages 開発中のホスティング: Cloudflare Pages (🆕) CSS: Tai
似ているけどちょっと違うものをスタイリングする CSS テクニック - mizdra's blog
React + CSS Modules なプロジェクトを例にサンプルコードを書いてるけど、それ以外の構成のプロジェクトでも使えるテクニックのはず。記事タイトルは id:hitode909 さんの 似ているけどちょっと違うものたちをモデリングする技術 - hitode909 のリスペクトです。 data 属性, 属性セレクター, CSS カスタムプロパティを使う 記事のリストがあって、記事のカテゴリごとに文字色やボーダーの色を変えたい、みたいな状況だったとする。多分素朴に書くと以下のようになるはず。 import styles from './Entry.module.css'; import clsx from 'clsx' function Entry(props) { return ( <div className={ clsx(props.category === '暮らし' ? s
2024年からはTailwindを使い続けると決めた理由 | Cntlog
ずっとCSSのStyleをいい感じに使いたいと思いつつ、しっくりくるの運用が見つけられず2024年からTailwindを使い続けることを決めました。 Tailwindはこれまでにも何度か使っていたのですが、いつも別の選択をしていたのですが最近のフロントエンドの状況やAIコーディングの進歩を考えると最善ではないかもしれないけど外れない選択肢と決めました。 同じような悩みを持たれてる方に向けてどういう背景からTailwindを使うように決めたのかをこの記事で整理します。 私が悩んでいたこと 悩んでいたことは下記のようなことで、Tailwindを選ぶことで緩和できたと考えています。 ReactのStylingは結局どれを選べば良いのか ChatGPTなどのAIツールに情報をおくるときにstyleのデータも送るのか悩む Stylingが決まっていないのでプロジェクト毎にコンポーネントやディレクトリ
BEMで底に達した問題を探す問題のために生まれる問題 - saneyuki_s log
最近、社内のいろんなプロジェクトのリポジトリを眺めているとスタイルシートの記述にstyled-componentsとかwebpackのcss-loaderとかで頑張っているものを頻繁に目にする。 んで、Lintとかどうしてるの？みたいな話をすると「〜はこの『A（どこかのCSS-in-JS派閥の一つ）』は対応してないんだよねー」という返答が返ってくる。 そのたびに思う。「BEMで問題解決してたんだからBEMでいいじゃん」と。 このようなことを言うと「JVMのJITコンパイラの仕組みを聞いた後に『アセンブラを生で書けばいいじゃん』と言い出す痛いおじさん」感がするので自分でもあんまり好きじゃない。ただ、CSSに関してはBEMで問題が底に達してしまっていて、そこから先の標準化されてないwebdevツール群は問題を再発明しているだけに過ぎないなと思う。 書き味をどう頑張ろうが結局我々はCascadi
限定公開URLについて適当に書く - 日々量産
過去に限定公開URLっぽい機能を実装したので、その時考えていたことを書こうと下書きを始めてから1年以上経ったものを手直しして公開しています。具体的なコードとかは出てきませんし、終始フワフワした感じで歯がゆい感じかもしれませんが、ごめんなさい。 はじめに まず、限定公開URLについては、渋川よしき先生のスライドが詳しいです。特にURLに使う識別子(?)の長さにおけるセキュリティ強度の各サービスの比較と検討に関するページは貴重なまとめだと思います。 （URLの性質を考えればできることは知っていたが、Capability URLといった呼び方があることを知ったのがこのスライドでした） docs.google.com またスライドでも触れられているW3CのCapability URLのデザインに関する記事もわかりやすいです。 どういうものか、使い時、注意点といった話もすべて書かれています。 w3c
組織内サーバーをCloudflare Accessで保護してみた話
Twilogの亡骸を抱きしめながらおひとり様Mastodonを立てる こんにちは。日々是発見が楽しみな西山です。 とある事情があって、自分用のおひとり様Mastodonサーバーを構築しました。 とある事情とはTwitter社のAPI規約改定で、今まで自分のTwitterアカウントの全ツイートを「Twilog」というサービスで残していたのが取れなくなってしまいました（Twilog運営の方、長い間大変お世話になりました……）。 仕方なく「自分がツイートすると「IFTTT」でアクションが起動し、おひとり様MastodonにAPIで投稿する」という代替手段でツイートのログを取ることにしました。 このMastodonインスタンスはAPIの連携投稿を受け付け、ツイートのログをためていくだけで、手動投稿もしないし他のユーザーを作る事もありません。 完全なプライベートインスタンスなので、自分以外アクセスで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub Issueで書くブログをCakePHP4で実装する
ブログを自作の静的サイトジェネレータ Salmon に移行しました
控えめな App Router と持続可能な開発 - PWA Night vol.59
