Model Context Protocol（MCP）とは？生成 AI の可能性を広げる新しい標準
はじめに こんにちは。クラウドエースの荒木です。 ChatGPT や Claude などの生成 AI が日常生活やビジネスに浸透してきましたが、これらの AI の真価は外部システムと連携したときに発揮されます。しかし、この連携には大きな課題がありました。 これまで AI と外部システムを連携させるには、システムごとに個別の API 統合が必要で、認証方法やデータ形式、エラー処理など、細かな実装を繰り返す必要がありました。このような個別対応は開発効率を下げ、拡張性や保守性の面でも問題がありました。 そこで登場したのが「Model Context Protocol（MCP）」です。2024 年 11 月に Anthropic が発表したこのオープンプロトコルは、AI と外部システムの接続を標準化し、開発者の負担を大幅に軽減します。 この記事では、MCP の基本概念から実装方法、活用事例まで、技
【WordPress】CursorのAgentモードでカスタムブロックを作る
環境 Cursor 0.47.8 Agentモードでclaude 3.7 sonnet使用（Thinkingにしたりしなかったり） ChatGPT（デスクトップアプリ） Cursorはモデル色々ありますが基本的にclaude 3.7 sonnetしか使ってないです。MAXが増えてますがこっちはまだ手を出してません。 ChatGPTは「この関数は何？」って聞いたりするときに使ってます。Askモードでいいじゃんと思いはするものの、完全に好みの問題でデスクトップアプリの方が見やすいんです………………。 書かれたコードの部分的な解説は基本Askモードでやりますが、時々ChatGPTに聞いたりもしています。 準備 CursorのUser Rulesを整備 私が今設定しているのはこれです。 ### 重要な注意事項： - 全ての応答は日本語で行うこと（例外なく）。 - 特に指示がない場合は、カジュアルな
最近のCSSを改めてちゃんと学んでみた
弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの現状と進化 2019-2024年に標準化された主要な機能 2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。 レイアウト関連： コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承 CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方） セレクタと制御： 親要素セレクタ (:has) - 子要素に基づいて親要素を選択 カスケードレイヤー
Arrival.Spaceの使い方
Arrival Space の基本的な使い方をまとめてみました。 ガウシアンスプラッティング (3D Gaussian Splatting) の .ply .spz ファイルにも対応したメタバースプラットフォーム (Webベースで複数人で同一空間へアバターで入り音声によるコミュニケーションも可能なプラットフォーム) です。 ブラウザで体験できるWebベースのためアプリインストール不要で、スマホでも体験できます。 ↑こんな感じで複数人で空間を巡れちゃいます。 ↑私の作成したスペースはこちら。 散策してみてくださいー。 ※試しにスペースに入るだけならアカウント作成すらも不要 なお、Apple Vision Proでも動いた！ 作成したスペースにはglb等の3Dモデル、Webサイト、動画等が配置できるようです。 ガウシアンスプラッティングにも対応しているという事でさっそく試してみたのですが、初見
CursorとWindsurfを約1ヶ月弱併用して分かったそれぞれの特徴 | 比較
こんにちは、しば田と申します。エンジニアの皆様、AIエディタ使っていますでしょうか。私は毎日10時間以上AIエディタ使っているのですが、本当にえげつなく高性能で毎日驚かされます。 今回は、CursorとWindsurfを約3週間くらい併用してみてかなり分かってきたので自分の整理も兼ねてアウトプットします。 注意 個人的な好みも含まれています。 感覚値ベースで書いている部分も多分にあります。反対意見ウェルカム（むしろ欲しい）です。 ツール自体もモデルもアップデートがとてつもなく早いため本記事の執筆時点から今日までで機能や使用感が大きく変わっている可能性も十分にあります。 チームで使用したことはありません。 結論 どちらがいいという結論はありません。どちらにも強み・弱みがあります。（しかも使う人によって強み弱みの判断も変わると思います。） 本章で語る内容を凝縮して表にしました。 項目 Curs
個人WordPressサイトをCloudflare経由で爆速にしてみた
概要 本記事は Cloudflare Advent Calendar 2024 19日目の記事です。 WordPressのサイトをCloudflareのCDNを使って高速に表示できるようにした事例を紹介します。 今回移行してみたサイトの1つはこちら。瞬間的に表示されると思います。 3行まとめ Cloudflare CDNを利用して、パフォーマンスが15req/sec => 512req/sec。(約34倍改善) レスポンス速度が平均611.64ms/req => 28.82ms/req。(約21倍改善)。 WordPressにCloudflareプラグインを導入してCDN連携を自動化 E2EE(End to End Encryption)を導入して経路の安全性を向上 背景 自宅サーバでWordPressを使ったサイトを10個ほど運用しています。 問題 WordPressは動的にページを生成
ヒーロー画像を様々なレイアウトで一括確認できる Hero Image Tester というものを作りました
はじめに ウェブサイトのデザインをするとき、メインビジュアルをどうしようかなとか、画像は支給されたけどどういうレイアウトがいいかなとか、メインコピーの位置をどうしようかなとか、ほぼ毎回同じようなレイアウトを作っては「これじゃない」「あれじゃない」ってやるわけですが、よくあるレイアウトはもう予め作っておいて、画像を差し替えるだけで一括確認できたほうがいいんじゃないかと思ったのがきっかけで、Figma の components、styles、auto layout、variants などを駆使して、Hero Image Tester というものを作りました。 Hero Image Tester まずは短い動画で雰囲気を掴んでいただければと思います。 Figma を使いこなしている方であれば、特に説明なども不要ですぐに使っていただけるかと思います。そうではない方向け、また、よりベターな編集方法な
macOS のファイルを断捨離して 60 GB 空ける
日々生活するにつれゴミが溜まるのは日常も PC も大差ないのですが，特に macOS は不要なキャッシュファイルが溜まりやすいと感じます．ディスク容量が逼迫し続け 10 GB を切り，いよいよ Photoshop も開けなくなってきたので，不要なファイルを 60 GB 分削除しました．以下メモです． 便利コマンド # ルートから 5 個下の階層までに存在する，100 MB 以上のファイルを検索 sudo du -x -m -d 5 / | awk '$1 >= 100{print}' # 現在のディレクトリ以下に存在する，50 MB 以上のファイルを検索 du -x -m | awk '$1 >= 50{print}' # ディレクトリを削除する rm -rf
【Chome126】View Transitions APIで滑らかな画面遷移を実装する
こんにちは！ Chrome 111からView Transitions APIが利用可能になりましたが、今まで試す機会がありませんでした。 今回満を持して試してみたところ非常に面白かったので、この記事で共有したいと思います。 また、2024年6月11日にリリースされたChrome 126からView Transitions APIが強化されましたので、その点についても触れてみたいと思います。 View Transitions APIとは View Transitions APIは一言で言うと、 異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組み だそうです。 ほう...？？🤔 百聞は一見にしかずということで、以下のサイトにView Transitions APIを使ったデモがわかりやすくまとまっており、イメージがつきやすいので触ってみてください！ View Transiti
HAMWORKSのサイトをブロックテーマに変えていく
{ "name": "@hamworks/wordpress", "private": true, "version": "1.0.0", "description": "WordPress local environment for HAMWORKS Co., Ltd.", "main": "index.js", "scripts": {}, "author": "HAMWORKS Co., Ltd.", "license": "GPL-2.0-or-later", "homepage": "https://ham.works/", "volta": { "node": "18.19.0" } }
入力線画を全く変えずに画像生成AIに色塗りさせる方法
タイトル通り、入力線画を(基本的には)1pixelも変えずに画像生成AIに色塗りをさせる方法について解説していきます。 本題に入る前に そもそも画像生成AIによる色塗り（着彩）について知らない方向けに、既存技術でAIに色塗りをさせるとはどのような事を指すか？またどのような課題があるか？について一度整理します。 画像生成AIによる着彩 テキストから画像を生成できるという事で一躍有名になった画像生成AIですが、テキストだけでは生成したい画像を詳細に指示することが困難であるという課題を抱えていました。 そこで、テキストと比較してより具体的に生成したい画像を指示する方法として。ControlNetを用いた画像とテキストを入力して新たな画像を生成する手法が現れます。 この応用として、色塗りがされていない線画と指示テキストを入力することで、入力した線画に対し色を塗った状態の画像を生成するという方法が存
無料で商用にも使える日本の郵便番号APIをリリースしました
jp-postal-code-api https://github.com/ttskch/jp-postal-code-api 日本の郵便番号から住所のデータを取得できるWeb APIです。 GitHub Pagesを使用して静的なJSONファイルとして配信している ため、可用性が高いのが特徴です。また、オープンソースなのでクライアントワークでも安心してご使用いただけます。もしリポジトリの永続性や GitHub Pagesの利用制限 が心配な場合は、ご自由にフォークしてご利用ください。 日本郵便によって公開されているデータ を元に住所データのJSONファイルを生成して配信しています。JSONファイルには日本語表記・カナ表記・英語表記の住所データが含まれています。ただし、以下の注意事項があります。 大口事業所個別番号の住所データは以下のように出力されます（元データ の内容がそうであるため）
【随時更新】主要な大規模言語モデル比較表
これはなに？ 自著 「つくりながら学ぶ！生成AIアプリ＆エージェント開発入門」 に掲載するために作ったOpenAI・Anthropic・GoogleのLLMの一覧表です。 各社が新しいモデルを出すたびに本の内容が陳腐化するため、この記事に最新の情報を更新していきます。 各社のモデルの主要諸元・費用に加えて、自分の印象を書いてあります。 性能の目安としてChatbot Arenaのスコアを参考までに添付しています これはあくまで参考用かつ英語での評価なので、スコアが一番高いものがいい、もしくは低いからダメというわけではありません。 少なくともこの記事に掲載されているモデルは、スコアが低いものでも単純な翻訳などでは十分な性能を持っています。そして何より高性能モデルとは比較にならないほど高速です。 用途や使用言語によって試してみて最適なものを選ぶのが良いでしょう [PR] 宣伝 本の紹介は↓に書
OpenAI、次世代AIモデル「GPT-4o」を発表
日本時間2024年5月14日未明、OpenAIは新たなフラッグシップモデル「GPT-4o」を発表しました。このモデルは、音声、視覚、テキストのリアルタイム処理を可能とし、従来のAIモデルを大きく上回る性能を誇ります。OpenAIのCTOであるミラ・ムクティ氏は、「GPT-4oは、人間とマシンのインタラクションの未来を大きく変える一歩です。このモデルにより、コラボレーションがはるかに自然で簡単になります」と述べました。 「GPT-4o」の主な特徴を以下にまとめました。 他のモデルを凌駕する性能 GPT-4oは、OpenAIの以前のモデルであるGPT-4 Turboや、ライバル会社のClaude 3 Opusなどの大規模言語モデルと比較して、頭ひとつ抜けた性能向上を実現しました。サム・アルトマンCEOは、今年4月に "Chatbot Arena" でgpt2というコードネームでテストされていた
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
STUDIO開発で気をつけたいこと
私が直近（2023年10月〜2024年1月）のSTUDIOプロジェクトで直面した問題をもとに、3ヶ月前の自分に伝えたかったことを書き残したいと思います。 この記事は主にWeb開発者の方へ向けた内容となります。 STUDIOの読み込み速度には気をつけて STUDIOでページを制作する際は、十分に読み込み速度に配慮するようにしましょう。 PCは問題なくとも、スマホの読み込み速度が遅い傾向があり注意が必要です。 超特急で開発したものの、いざスマホ実機でページにアクセスすると重たいページで読み込みに10秒かかってしまう経験をしました。 これからSTUDIOでの開発を検討されている方は、 後ほど記載する点についても気をつけていただけたらと思います。 STUDIOの見解 STUDIO側もスマホ読み込み速度の遅さは認識しており、解決のために継続的に調査をされているようです。 現時点でSTUDIOが提案し
ずぼらな私の2023年のファビコン事情（SVGでダークモード対応）
2023/05/03: 下部にさらにズボラな案を追加、FAQも追加しました。 デモサイトを作りました。リポジトリはこちら。 favicon（ファビコン）てなに？ みんなだいすき、ブラウザのタブの妖精、この小さいアイコンたちです。 サイトに設定されているファビコンをチェックするには Chrome だと Favicon Detector 拡張を使うと便利。ぜひインストールしていろんなサイトを見てみてくださいね！ こちらは Spotify のファビコンを Favicon Detector 拡張でチェックした例です。 ところでファビコン、こんなにいる？ つらつらと…長い…全部いるのこれ？ <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-tou
大規模言語モデルはエリート就活生を超えるか
はじめに はじめまして、株式会社松尾研究所のきむ（@kangsoo_kim_）と申します。 松尾研究所で、さまざまなAIの社会実装の開発案件を手掛けてきたほか、金融に特化したチームの立ち上げなどを行ってきました。また、現在は経営戦略本部という社内外の特命のPJTを推進するチームを統括しております。詳細については下記記事もどうぞ。 入社３年目で最速で役員へ。データサイエンティストが経験した松尾研での0→1の新規事業開発と今後の展望。 大規模言語モデルに対する素朴な疑問 大規模言語モデル（LLM）の進歩が目覚ましい昨今ですが、ふと疑問に思ったことがあります。 確かにLLMは知識はすごい。けど彼らは本当に賢いと言えるのか。確率的に単語を予測しているだけで、本当に高い推論能力・論理能力を得られているのだろうか。 そこで、ちょっとしたテストをしてみたいと思っていたところ、ふと外資系の就活をしていた学
まだ日本ではWebアクセシビリティが義務化されません（2024年4月から6月の時点では）
筆者は、より多くのWebサイトやWebサービスが、より高いアクセシビリティをもつものになることを強く願っています。 （2024/02/04追記）もう少しわかりやすく書き直したものを投稿しました Webアクセシビリティと合理的配慮 「2024年からWebアクセシビリティ対応が義務化される」というようなことが書かれたWeb上の記事が増えているようです。 しかし、2024年1月現在、日本で「Webアクセシビリティ」について法的な義務が発生している・または2024年内に発生するようになる法的な根拠はおそらくありません。法律の改正が施行され、「やったほうがいい」度合いは高まっていると解釈できますが、「Webアクセシビリティは義務です」とまでは明言できないはずです。 ところが、「アクセシビリティ 義務化」などでWebを検索すると、「2024年にアクセシビリティが義務化します」と説明していたり、あるいは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのブロックテーマ制作手順まとめ
