WWW WATCH - Web デザインやテクノロジーの話題がメインのブログ
人気記事
カテゴリーリスト
ブログについて
検索フォームを開く
検索フォームを閉じる
サイト内検索
最新記事
WCAG(JIS X 8341-3)の学習をサポートしてくれる MCP サーバ(実験中)を作ってみた
AI に相談しながら記事の下書き執筆が可能な Movable Type 用の MCP サーバを作ってみた
Web サイトのアクセシビリティ品質をモニタリングできるダッシュボードツールを作ってみた
音声からテキストをリアルタイムに生成するツールを作ってみた
サービス終了する 「Pocket」 に代替するオンラインブックマークとして 「Wallabag」 をセルフホストする
最新のコーディング環境にあわせて 7 年ぶりに大幅改訂された「Web 制作者のための Sass の教科書 改訂 3 版」
microCMS の API からデータを取得する MCP サーバを作ってみた
Claude デスクトップアプリに MCP サーバを設定してコラムの原稿作成などが色々捗るようにする
手軽におしゃれなチラシや資料、バナーなどを自分で作りたい人にオススメの書籍 「イチからはじめる Canva ビジネス活用入門」
Web UI で指定した URL に対するアクセシビリティチェックレポートを生成可能な 「Burnworks A11y Reporter Web UI」
この Blog が最初の記事投稿から 20 周年を迎えました
アクセシビリティチェック(試験)で補助的に使えるブックマークレット集を更新しました
CSS の :has() 疑似クラスを使って :hover や :focus-within されたセルをわかりやすくハイライトする
tailwindcss-animation-delay プラグインを Tailwind CSS v4 に対応させました
この Blog で使用している Tailwind CSS を v3 から v4 にアップグレードしてみた
Tailwind CSS v4.0 が正式リリース。高速化、CSS ファイル内での設定など大幅進化
書籍「できるポケット HTML&CSS全事典 改訂4版」をコリスさんでご紹介いただきました
書籍「できるポケット HTML&CSS全事典 改訂4版」が発売されました
CSS の position-area プロパティで、アンカー要素基準の配置をしてみよう
popover 属性を使用すればポップオーバーする要素を簡単に作成できる
すべての記事を見る
人気記事
Hot Entries
書籍「できるポケット HTML&CSS全事典 改訂4版」が発売されました
「できるポケット HTML&CSS 全事典 改訂 4 版」 の刊行にあたって
Chatbot UI (オープンソースの ChatGPT UI クローン) を Vercel でホストする
Astro.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる
「できるポケット HTML&CSS 全事典」 が全面改訂、「改訂 3 版」 の発売が決定しました
さくらの VPS を使用してオープンソースのアクセス解析ツール 「Umami」 をホストしてみる
人気記事をすべて見る
カテゴリ別最新記事
Browse Categories
Web Development
Web サイトのアクセシビリティ品質をモニタリングできるダッシュボードツールを作ってみた
音声からテキストをリアルタイムに生成するツールを作ってみた
サービス終了する 「Pocket」 に代替するオンラインブックマークとして 「Wallabag」 をセルフホストする
microCMS の API からデータを取得する MCP サーバを作ってみた
Web Topic
サービス終了する 「Pocket」 に代替するオンラインブックマークとして 「Wallabag」 をセルフホストする
Raspberry Pi 4 で運用中の umbrelOS 0.5.4 を umbrelOS 1.0 にアップデートする
OpenAI TTS(Text to Speech) を Node.js で試してみた
Stable Diffusion による AI 画像生成を Google Colaboratory (Colab) で試してみた件
Accessibility
WCAG(JIS X 8341-3)の学習をサポートしてくれる MCP サーバ(実験中)を作ってみた
Web サイトのアクセシビリティ品質をモニタリングできるダッシュボードツールを作ってみた
Web UI で指定した URL に対するアクセシビリティチェックレポートを生成可能な 「Burnworks A11y Reporter Web UI」
アクセシビリティチェック(試験)で補助的に使えるブックマークレット集を更新しました
AI
WCAG(JIS X 8341-3)の学習をサポートしてくれる MCP サーバ(実験中)を作ってみた
AI に相談しながら記事の下書き執筆が可能な Movable Type 用の MCP サーバを作ってみた
音声からテキストをリアルタイムに生成するツールを作ってみた
microCMS の API からデータを取得する MCP サーバを作ってみた
Web Service
サービス終了する 「Pocket」 に代替するオンラインブックマークとして 「Wallabag」 をセルフホストする
X(Twitter) API を使用して、投稿データ用の JSON から定期的に自動投稿する Python スクリプトを書いてみた
Dify を さくらの VPS でセルフホストしてみる
Dify をアップデートしたらナレッジのデータソースで 「Web サイト」 を指定可能になっていた件
HTML/CSS
CSS の :has() 疑似クラスを使って :hover や :focus-within されたセルをわかりやすくハイライトする
tailwindcss-animation-delay プラグインを Tailwind CSS v4 に対応させました
この Blog で使用している Tailwind CSS を v3 から v4 にアップグレードしてみた
Tailwind CSS v4.0 が正式リリース。高速化、CSS ファイル内での設定など大幅進化
HTML
書籍「できるポケット HTML&CSS全事典 改訂4版」が発売されました
popover 属性を使用すればポップオーバーする要素を簡単に作成できる
select 要素の子要素として hr 要素が使えるようになっています
「できるポケット HTML&CSS 全事典 改訂 4 版」 の刊行にあたって
CSS
CSS の :has() 疑似クラスを使って :hover や :focus-within されたセルをわかりやすくハイライトする
tailwindcss-animation-delay プラグインを Tailwind CSS v4 に対応させました
この Blog で使用している Tailwind CSS を v3 から v4 にアップグレードしてみた
Tailwind CSS v4.0 が正式リリース。高速化、CSS ファイル内での設定など大幅進化
JavaScript
アクセシビリティチェック(試験)で補助的に使えるブックマークレット集を更新しました
Node.js で X(Twitter)、Bluesky、Mastodon に JSON データから同時投稿(クロスポスト)する
DMARC レポートの XML ファイルを HTML 形式のレポートに変換するスクリプト
Astro で details 要素に name 属性を使うと型チェックでエラーになる件を解決する
Next.js
Vercel AI SDK を使用して、Claude 3 と、ChatGPT ライクにチャットする Web UI を作る
Next.js (SSG) + Vercel + GitHub Actions を使用した定期デプロイ
Next.js から Feedly API を叩いて記事データを取得する
Next.js から Qiita API v2 を叩いて人気記事のデータを取得する
Tool
WCAG(JIS X 8341-3)の学習をサポートしてくれる MCP サーバ(実験中)を作ってみた
AI に相談しながら記事の下書き執筆が可能な Movable Type 用の MCP サーバを作ってみた
Web サイトのアクセシビリティ品質をモニタリングできるダッシュボードツールを作ってみた
サービス終了する 「Pocket」 に代替するオンラインブックマークとして 「Wallabag」 をセルフホストする
Browser
popover 属性 (含む関連属性) がすべてのモダンブラウザで利用可能に
Firefox 121 が正式リリース、やっと :has() 疑似クラスに対応
Internet Explorer 11 がついにサポート終了、2022年 6月 15日でお別れへ
Google Chrome が4週間隔にリリースサイクルを高速化、Edge も同様に
Security
Movable Type の XMLRPC API における OS コマンドインジェクションの脆弱性 (CVE-2021-20837) を悪用した攻撃被害に関する対応メモ
Let's Encrypt で発行するサーバ証明書の暗号方式を RSA から ECDSA (楕円曲線 DSA) に変更する
Firefox 83 に 「HTTPS-Only モード」 が追加、Web サイトへの接続時、HTTPS 接続を強制可能に
パソコンやスマートフォンが得意ではないという人でもわかるオススメのパスワード管理方法(2020年10月版)
Application
Claude デスクトップアプリに MCP サーバを設定してコラムの原稿作成などが色々捗るようにする
Dify を さくらの VPS でセルフホストしてみる
Telegram 上で猫さんを育てる Catizen
Dify をアップデートしたらナレッジのデータソースで 「Web サイト」 を指定可能になっていた件
CMS
AI に相談しながら記事の下書き執筆が可能な Movable Type 用の MCP サーバを作ってみた
microCMS の API からデータを取得する MCP サーバを作ってみた
JSON データをテンプレートで作るときに、面倒くさい「末尾のカンマ」の処理をほんのちょっとだけ楽にする Movable Type プラグイン
オープンソースのヘッドレス CMS 「Strapi」をさくらの VPS でセルフホストしてみる
Gadget
Raspberry Pi 4 で運用中の umbrelOS 0.5.4 を umbrelOS 1.0 にアップデートする
Umbrel で立ち上げた Lightning ノードに Alias (エイリアス) と Color (カラー) を設定する
Windows 11 にアップグレードするための 「PC 正常性チェック」 で NG になったので、BIOS の設定から TPM 2.0 を有効にする
Raspberry Pi 4 + Umbrel で Bitcoin フルノードを立ち上げ、Lightning Network (Diamond Hands プロジェクト) に参加してみる
Blog
この Blog が最初の記事投稿から 20 周年を迎えました
書籍「できるポケット HTML&CSS全事典 改訂4版」をコリスさんでご紹介いただきました
個人サイトのこれまでを振り返ってみる
ごく普通のクリエーター、個人事業主、零細企業社長のための投資戦略
SNS
X(Twitter) API を使用して、投稿データ用の JSON から定期的に自動投稿する Python スクリプトを書いてみた
Telegram 上で猫さんを育てる Catizen
Node.js で X(Twitter)、Bluesky、Mastodon に JSON データから同時投稿(クロスポスト)する
さくらの VPS で Bluesky PDS (Personal Data Server) をセルフホストしてみる
Cloud
日本語化して、ダッシュボードへのベーシック認証を追加した Pa11y Dashboard を作ってみた
DigitalOcean (Ubuntu 20.04) で Pa11y Dashboard を簡単に立ち上げる
Mastodon インスタンスの画像や動画の保存先をクラウドストレージ (Amazon S3) に移行した話
Dropbox が 「Project Infinite」 を発表、ローカルのディスク容量が少ない環境でも使いやすく
Event
1990 年代後半から CSS を触っている私が当時の記憶を振り返る、CSS 昔話
「アクセシビリティ」 を当たり前にするために制作者はどう考えればよいのか
Web アクセシビリティを身近に感じてもらうためのごく簡単なお話
Happy birthday W3C - World Wide Web Consortium が設立から 20周年
Book
最新のコーディング環境にあわせて 7 年ぶりに大幅改訂された「Web 制作者のための Sass の教科書 改訂 3 版」
手軽におしゃれなチラシや資料、バナーなどを自分で作りたい人にオススメの書籍 「イチからはじめる Canva ビジネス活用入門」
書籍「できるポケット HTML&CSS全事典 改訂4版」をコリスさんでご紹介いただきました
書籍「できるポケット HTML&CSS全事典 改訂4版」が発売されました
Product
動画 (Netflix) 視聴目当てで Oculus Go を購入したら正解だった件
Surface Pro 3 が 「Surface」 ロゴ表示で固まって起動しなくなった時の対処方法
Microsoft が Surface Pro、Surface Pro 2 等の電源コードを自主回収
Windows 7 のメインストリームサポートが終了、延長サポート期間へ
HTML5
「できるポケット HTML&CSS全事典」 の重版が決定しました
AMP の実装で 「要素に class 付けて開閉する」 みたいな UI は amp-bind を使うと超簡単で手軽だった件
Firefox 75、HTML の指定のみで動作する画像遅延読み込み (loading="lazy") に正式対応
W3C と WHATWG、HTML/DOMの仕様策定で協力し、共通の仕様を共同管理すると発表
Mobile
優れた UX を提供する Web サイトを強調するため、Chrome for Android に 「Fast Page」 ラベルが導入される
AMP ページで Font Awesome を使用する
AMP の実装で 「要素に class 付けて開閉する」 みたいな UI は amp-bind を使うと超簡単で手軽だった件
次期 Android では 「DNS over TLS」 がサポートされる
New Service
Tailwind CSS を使用した日本語ウェブサイト向け UI サンプル集 「バーンワークス UI ライブラリ」
フロントエンド開発に関連する技術系記事をまとめてチェックできる 「TechDeck」 という Web サイトを作ってみた
ボタンを押したら商品が届く、「Amazon Dash Button」 を早速試してみた
Amazon が Kindle for PC をリリース、和書も PC で閲覧可能に
Podcast
世界初の Firefox OS 商用端末、ZTE Open が発売開始
Vodcast 対応 PSP MM
Yahoo! Podcasts BETA
iTunes で Podcast を公開
XML
DMARC レポートの XML ファイルを HTML 形式のレポートに変換するスクリプト
IFTTT から Blog の更新を自動で画像付きツイートするためにフィードを少し直した件
SVG のフォールバックは結局 Modernizr に落ち着いた件
ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」
Item
Kindle Voyage 買ったけど 1点だけどうしても納得いかないことが......
国立競技場の座席 (自由席 / 指定席) からスツールを作ってみた
Surface Pro 3 買ったら Surface Pro 2 で不満だったところをほとんど解消してくれた件
Anker 5ポート USB急速充電器 ACアダプタとまな板スタンドの組み合わせがいい感じな件