font-variantプロパティを使用すると、フォントの特定のスタイルや装飾を制御できます。これは、OpenTypeフォントのさまざまな機能を有効化するためのプロパティであり、細かい文字の見た目を調整するために役立ちます。この記事では、font-variantの各種プロパティについて、とくに日本語フォントに役立つものに焦点を当てて紹介します。 font-variantプロパティを適用するには、使用するフォントが対応するOpenType機能をサポートしている必要があります。サポートされていない場合、指定したプロパティが適用されないことがあります。 font-variant-east-asian font-variant-east-asianプロパティはその名の通り、日本語や中国語など、東アジアの文字の字形を指定できます。指定できる値はいくつかありますが、その中から2つを紹介します。 fon
ZennのWAFとCDNはそれぞれ Google Cloud の Cloud Armor と Cloud CDN を利用していました。DDoS対策の一環で、WAFはいろいろなサービスを試してみようということになり、Cloudflareを導入したところ、実際に検知・ブロックまでやってくれたことがあったので…
今年流行るのではと話題の「グラスモーフィズム（Glassmorphism）」。半透明のガラスのような表現手法は以前からありましたが、新しいmacOSのBig Surで取り入れられたこともあり、再び注目を集めています。 そんなグラスモーフィズムをUIデザインに取り入れる際に、あなたのヒントになりそうなポイントを挙げてみました。よかったら参考にしてみてください！ （元ネタは私の個人アカウントでツイートしていたものになります。） 1. 1pxの境界線を引く枠に1pxほどの細い線を取り入れることで、よりリアルになるだけでなく、オブジェクトとしての境目も際立たせてくれます。上図の例では、白の境界線を不透明度を少し落として利用しています。 2. 白のグラデーションや光彩を取り入れるオブジェクトを半透明にするだけでなく、上にグラデーションや光彩を重ねることで、また違った表情をみせてくれます。 3. シャ
この記事は、「Web UI 実装勉強会 #1」での同タイトルの発表をもとにしたものです。 ターゲットエリアを広げる工夫 リンクやボタンなどのUI要素を押したときに反応する領域のことをターゲットエリアと呼びます。素朴に実装すれば、その要素の視覚的なサイズがそのままターゲットエリアになります。 しかし場合によっては、これではあまり使い勝手が良くならないことがあります。要素自体のサイズが小さいと押すことができる領域も狭くなるので、その分正確性が求められて押しづらくなります。 そういうときには、視覚的なサイズよりも余分にターゲットエリアを広げるテクニックを使います。paddingプロパティを使って要素自体のサイズを広げつつ、レイアウトが崩れないように同じ大きさのネガティブマージンを適用します。 a { margin: -4px; padding: 4px; } 一方、プレーンなテキストリンクと違っ
Wordpressのブログの記事をベースにRAGを構築し、そのRAGを活用したアプリケーションとしてブログ上にQAボットを構築しました。次の課題は、新規記事の投稿時や既存記事の更新時に、どのようにVectorStoreを更新するかということになります。Wordpressには、記事投稿・更新時にフックできるPHP関数が用意されているので、それを用いて自動的にVectorStoreを更新するシステムを構築してみました。 Wordpressの記事更新時にVectorStoreも自動的に更新するシステム ブログに限らず、Webサイトというのは、常にコンテンツの追加や更新が発生します。RAGを用いたQAボットを提供している場合には、新しいコンテンツに関する質問にも適切に答えられるように、VectorStoreの更新も必要になります。 前回の記事で、Wordpress上でRAGを用いたQAボットを実装
こんにちは。株式会社 Sally エンジニアの @piesukeです。 私たちは、マーダーミステリーを遊べることが出来るアプリ「ウズ」と、マーダーミステリーを制作してウズ上で遊べることが出来るアプリ「ウズスタジオ」を開発しています。 私が最近やって面白かったマーダーミステリーは プライト・フライト です。 弊社は状態管理ライブラリに zustand を使用しています。今回は zustand を使ってブラウザストレージへの状態の永続化を簡単かつ高機能に実現する方法を解説します。 zustand とは Zustand は、React のためのシンプルで高速な状態管理ライブラリです。「状態」を意味するドイツ語から名付けられました。なぜドイツ語なのかは分かりませんがとてもセンスが良いですね。Redux のような複雑なボイラープレートを必要とせず、React のフックをベースにした直感的な API
Chrome 141 ベータ版に追加されたChromeに内蔵されたAIを使用した文章校正機能（Proofreader API）が良さそうだったので試してみました。 Proofreader APIとは Proofreader APIは、ユーザーが入力した文章を校正する機能です。具体的には文法や綴りの間違いを検出し、検出された箇所とその修正内容や修正された文章を出力することができる機能です。これはGoogle I/O 2025で紹介されたGemini NanoというChromeに内蔵されたAI API機能の一つで、 Android、ChromeOS、Linux、macOS、WindowsのChromeで利用できます。 Chromeに内蔵されてるので、もちろんオフラインでも使用できます。 試してみる ざっと検証用ファイルを作成して試してみました。 まずは英語の文章 完璧に修正されていますね。 次
はじめに Chrome 128 で WebAuthn で Hints が使えるようになったということで、使ってみたメモです。 環境 macOS Sonoma 14 Chrome 128 Hints について Hintsとは、WebAuthnでパスキーを作成するときのオプションです。以降は PublicKeyCredentialHints とします。 今までは、パスキーを作成する認証器を制限したい場合、AuthenticatorAttachment を使用してたんですけど、加えてPublicKeyCredentialHints を使うことができるようになった、とのことです。 パスキーを作成する場所はたくさんある 最近はとにかくいろんなところにパスキーを作成できるようになってます。OSやブラウザ、使っている拡張機能などによっていろいろですが、例えば私の環境の場合、以下の場所にパスキーが作成でき
こんにちは🌤 ソーシャルデータバンクのデザインチームでインターンをしている河合です。 普段の業務では、弊社のプロダクトであるLinyのUI改善やデザインシステム構築に関する業務、さらに社内で使うシステムのUIデザインをしています！ この記事では、私が他職種（主にエンジニア）にとって見やすいFigmaでのデザインデータ作成を行うために、日頃心がけていることについてお話しできたらと思います。 前提：UIデザインに従事するのであればマークアップの知識はあったほうがいい 「デザイナーはコードも理解できたほうがいいのか？」という議論は業界でたくさんあるかと思いますが、個人的にはデザイナーもエンジニアリング領域の知見は持っておいたほうがいいと思っています。 なぜならデザイナー（特にこの記事でいうデザイナーはデジタルプロダクトのUIデザイナーを指す）は、「絵を描く人」ではなく「開発者」である からです
webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は
ウェブとリアルタイム通信は、もはや切り離せない関係となりました。 ロングポーリングやそれを応用したComet、チャンク通信を利用したServer-Sent Event、新しくはWebSocketという技術は、 いずれもリアルタイム通信を実現するために先人たちが築き上げてきた礎です。 それらの技術の中に、次は WebTransport が加わろうとしています。 WebSocketとTCP WebSocketという偉大な発明は、ひとつの時代を作りました。 双方向性のリアルタイム通信がもたらした恩恵は計り知れません。 しかし一方で問題もありました。 WebSocketはTCP上に構築されたプロトコルであり、当然ながらTCPの特性による制約を受けます。 顕著な例としてTCPの到達保証や順序保証があります。TCPにおいてはパケットが途中でロスした場合は再送制御が行われます。 また、パケットには番号が
IETFでも、WebにおけるAIエージェント(クローラ)の議論がいくつかあります 1つ目のテーマは、robots.txtの拡張など、AIクローラの制御仕組みです。AI Preferences WGでは、コンテンツの取り扱いについてAIを制御できるように議論をしています。いくつかの提案が出てきてはいますが、引き続き議論が進んでおります。 2つ目のテーマは、WebにアクセスするクローラおよびAIエージェントを認証・識別する仕組みです。今まではUser-Agentで識別していましたが、署名などを利用して適切に識別したいという背景です。Cloudflareらが『HTTP Message Signatures for automated traffic Architecture』 などを提案しており、IETFでもWeb Bot Auth Bofが立ち上がっています。 Paid Web Crawlin
WEBソリューション課の田畑です。 現在Figmaというデザインツールを使ってUIデザイン（ウェブサイトの見た目や使い勝手を設計すること）や画面デザインなどを行なっています。 Figmaでデザインを作成後に、それを元にHTMLとCSSでwebページを作成しています。 もっと効率的にページ作成を行いたいと思ったので、Figmaのデザイン画面をHTMLやCSSへ変換する方法について調べてみました。 Figmaとは FigmaのデザインからHTML/CSSへ変換する方法 1.Figmaの開発モード(Dev Mode）を使う 2.プラグインを使ってデザインをHTML/CSSへ変換する 試したプラグイン プラグインの使い方 プラグインで変換した結果 3.AIにFIgmaデザイン画像を読ませてHTML/CSSへ変換する まとめ Figmaとは Figmaとはウェブ上で使えるデザインツールです。 Fig
Hono Advent Calendar 2024 4 日目の記事です。遅れてすみません！！！！！！！！！！！！！！！！！！！！！ 去年はかけなかったけど今年は書けたのでよかったです.......... TL;DR Cloudflare Images を使えば、Next.js の next/image による画像最適化を再現できます。さらに、Cloudflare Images の「blur」オプションを利用することで、base64 プレースホルダー画像をサーバー側で生成する必要がなくなり、処理が効率化されます。コスト面でも、Vercel の画像最適化機能（$5/1000 枚[1]）に比べ、Cloudflare Images は大幅に安価（$0.5/1000 枚[2]）です。 デモ はじめに この記事は @cloudflare/next-on-pages や @opennextjs/clou
Automattic/wordpress-mcp - Github WordPress MCP を使うことで、AI との自然な対話で WordPress を操作できるようになります。AI エージェントを介することで、管理画面で何度もクリックを重ねて行わなければできない作業や複数の作業を連続して実行(バッチ処理)できるようになります。 開発元は WordPress.com を運営する Automattic 社。JWT 認証による堅牢なセキュリティシステムと詳細な監査ログ機能により、企業レベルでも安心して使えそうです。 WordPress MCP を使ってできること WordPress を API (JSON-RPC 2.0) 経由で操作できるようになります。 投稿の作成、編集、削除 コメントの取得・承認・削除 メディアのアップロードと取得 ユーザーの作成、更新、削除 プラグインの管理 (イン
2025年6月17日、FigmaはPayloadというCMSを提供する企業を買収しました。Figmaは、なぜCMSを買収したのか、なぜCMSの中でもPayloadなのかについて考察してみたいと思います。 Figmaのアナウンスはこちら Payloadのアナウンスはこちら 最近のFigmaの動向 Figmaは、2025年5月7日に開かれたConfig 2025で、Figma Sitesという新しい機能を発表しました。Figma Sitesとは、Figma上でデザインしたWebサイトをそのまま公開できる機能で、従来行なってきたデザインをもとにフロントエンドのコーディングを行ないWebサイトを実装するという一連の作業が不要になります。Figmaは単なるデザインツールではなく、ノーコード開発ツールへと進化を遂げようとしているわけです。 ただし、Webサイト開発と一口に言ってもその規模は大小様々です
こんにちは！ひまらつ（@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 は Google が開発していることで有名な、オープンで軽量な LLM である。 最小モデルとして1Bのモデルもリリースされており、エッジデバイスでの実行も視野に入れられている。 Google のドキュメントでは、このようなモデルによる推論をブラウザで実行するための方法も紹介されていた。 現代の Web アプリケーション開発者にとって馴染みがある React で実行できるコードを用意したので紹介したい。 併せて PWA としてオフラインで動作させられることも確認した。 繰り返すが、モデルによる推論を、「ブラウザで」実行する。 LM Studio など専用のアプリケーションで実行したものへブラウザからアクセスする、のではなく、ブラウザ上で実行する。 手っ取り早くコードを pull して動かしたい場合はこちらのリポジトリを参照されたい。 WebGPU API と Medi
Webサイトのデザインにおいて、要素がその背景やコンテナから一部分だけはみ出しているような表現を使いたい場面があります。例えば、商品画像の上部だけが背景の上に飛び出しているようなデザインです。 参考：BOTANIST | フレグランスコレクション サクラとチェリーの香り これを実現するために、画像を複数枚用意して重ねたり、overflow: hidden を駆使したりする方法も考えられますが、CSSの mask-image プロパティを使うことで、よりスマートかつ柔軟に実装できます。今回はその具体的な方法について解説します。 TL;DR 下記のようなMaskで再現する。 実現したい表現 以下のような、要素（ここではボトル画像を含む div）が、そのコンテナや背景要素の上端から、一部分だけはみ出して表示される表現を目指します。 （ここに、ユーザーが提示した画像のようなスクリーンショットや図を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く