WWW WATCH

このフォードは更新を停止します。

2023-11-19T15:03:14+09:00

このフィードは今後更新されません。新しいフィードは https://hyper-text.org/feed/blog.xml です。

CSS Values and Units Module Level 5 に追加された random() 関数が面白そう

Tue, 14 Nov 2023 15:03:14 +0900

昨日、CSS Values and Units Module Level 5 (Editor's Draft) が更新されたのに気がついたんですけども、今ってどんな内容になってんの...... と思いつつなんとなく眺めてたら、ランダムな値を生成するための random() と random-item() 関数ってのが入ってました。 Editor's Draft （編集者草案）ってのは、W3C の仕様策定プロセスにおいてはまだ非公式、非承認のドキュメントですから、あまりここに書いてある内容を Web 標準仕様になるとか、ブラウザの実装が進む前提で話しても仕方ないんですが、ちょっと面白そうなので簡単に触れてみたいと思います。例えばランダムに背景画像を変えたいな、とか、装飾に使っているアクセントカラーをランダムに出し分けたりしたいんだけど、といったニーズに CSS だけで対応することができるかもしれません。 CSS Values and Units Module Level 5 Editor's Draft, 13 November 2023

OpenAI TTS（Text to Speech）を Node.js で試してみた

Wed, 08 Nov 2023 11:23:45 +0900

先日開催された OpenAI Dev Day では大幅な機能追加に加え、いくつかの新しい API も発表されました。その中で、テキストから音声を生成する OpenAI TTS (Text To Speech) API が面白そうだったので、早速ですが簡単に試してみることに。 Text to speech の概要や、API のリファレンスは下記にあります。 Text to speech - OpenAI API Create speech - API Reference - OpenAI API で、ご丁寧に Python や Node.js でのリクエストサンプルコードも提示してくれているのでこれを使って秒で試せます。

axe-auto-reporter というアクセシビリティ自動テストのためのスクリプトを公開しました

Fri, 27 Oct 2023 16:03:35 +0900

「axe-auto-reporter」という（名前に全くひねりがない）、@axe-core/puppeteer を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存するスクリプトを GitHub で公開しました。所謂、黒い画面（CLI）で操作しますがテストしたい URL のリストをテキストファイルで作って、あとはコマンド 1つ実行するだけなので、多分ほとんどの人にとって難しくないと思います。 burnworks/axe-auto-reporter 同じようなもの作ってる人は他にもいると思いますが、自分の会社の業務とかで使うためには人が作ったものより、自前で作った方が色々とやりやすいってことで、何年か前に作って運用してたのを今回、全面的に書き直したので、いい機会だからということで公開することにした次第。

ChatGPT の画像認識機能を使って画像内のコントラスト比チェックができるか試してみた件

Mon, 02 Oct 2023 11:14:49 +0900

どうやら私が勘違いしていてて GPT-4V だと思って使ってたのは別の機能だったらしいので正式に GPT-4V が使えるようになったらこの記事は書き直します。その前提でどうぞ。つい先日ですが、ChatGPT が新たに画像認識と生成機能（GPT-4V）、さらに現状ではスマートフォンアプリからのみですが音声機能の追加を発表し、実際に私の環境でも使用できるようになっていましたので早速試してみました。で、音声機能は後々試すとして、まずは画像認識機能がどんな感じなのかなということで、ある画像を用意し、その画像内から『隣り合わせになっている色のコントラスト比を調べ、あるしきい値以下の場合はその箇所を特定して画像内に印を付けてくれ』という結構難しいんじゃないかなと思われる作業をやってみてもらったのでその結果を残しておきます。実際には事前にプロンプトを何度か調整しながら、どうすればうまいこと望み通りの処理をしてくれるかなというのを試しつつ、最終的に決めたプロンプトで数回試してみた結果なのと、今回使用した検証用画像に特化したプロンプトの調整になっているので、恐らく汎用性は低いというか、多分使う画像によって結果も変わってくる可能性が高いですが、個人的にはこんな簡単なプロンプトでお任せしてここまで出来るんだ、すげぇなっていう感想でした。

アクセシビリティ試験で補助的に使えるブックマークレット集

Thu, 28 Sep 2023 13:51:49 +0900

お仕事でアクセシビリティ試験を実施する際に個人的に作って使用しているブックマークレットがいくつかあるんですが、あくまで個人的に使うだけだったので適当に手元のエディタで書いて、動かしてって感じで済ませて長い時間が経っていました。つい最近ですが、これらブックマークレットを少し手直しをした際に、いい機会なので Git で管理するようにしましたが、折角なので公開しようと思います。個人で使っているものなので適当な感じですし、私が便利と思って使ってるだけで、もしかすると汎用性は低く、多くの方にとっては大した役には立たない可能性もありますが、私がアクセシビリティ試験時によく確認する項目について、それを補助するようなブックマークレット集になっています。 burnworks/a11y-test-assist-bookmarklets: Collection of bookmarklets to assist with accessibility testing

「できるポケット Web 制作必携 HTML&CSS 全事典改訂 3 版」 2 度目の重版（第 3 刷）が決定しました

Thu, 29 Jun 2023 09:11:49 +0900

2022 年 8 月に、発売された「できるポケット Web 制作必携 HTML&CSS 全事典改訂 3 版」ですが、今年 2 月の重版出来に続き、来月、7 月 12 日に第 3 刷の重版が決定しました。重版がかかる間隔が想定より速くて驚いておりますが、これもこの書籍をご購入いただいた皆様のおかげです。ありがとうございます。参考「できるポケット HTML&CSS 全事典」が全面改訂、「改訂 3 版」の発売が決定しました参考「できるポケット Web 制作必携 HTML&CSS 全事典改訂 3 版」の重版が決定しましたできるポケット Web 制作必携 HTML&CSS 全事典改訂 3 版 - 書籍情報

HTML Standard 仕様に search 要素が追加された

Wed, 29 Mar 2023 21:32:22 +0900

先週末（3 月 24 日）ですが、HTML Standard 仕様に、新たに search 要素が追加されました。 search 要素は、検索やフィルタリングなどの操作を実行するための入力コントロールや関連コンテンツのまとまりを表します。要するに Web サイトに設置する「サイト内検索」のフォームですとか、Web アプリケーション内で情報を検索するための一連の UI なんかをマークアップするのに使用できる要素ということになります。 4.4.15 The search element - HTML Standard Add the element - whatwg/html@c598ff0 search 要素はまだ HTML Standard 仕様に追加されたばかりですので、各ブラウザのサポート待ちになると思いますが、実装が進めば、検索機能の存在をブラウザや支援技術に明示できるようになるでしょう。role="search" を置き換えていくことが可能になります。

「できるポケット Web 制作必携 HTML&CSS 全事典改訂 3 版」の重版が決定しました

Mon, 30 Jan 2023 10:14:56 +0900

昨年、2022 年 8 月 22 日に、「できるポケット Web 制作必携 HTML&CSS 全事典改訂 3 版」を上梓させていただきましたが、おかげさまで早くも重版が決まったという、うれしいお知らせをインプレスさんより頂戴しました。参考「できるポケット HTML&CSS 全事典」が全面改訂、「改訂 3 版」の発売が決定しましたできるポケット Web 制作必携 HTML&CSS 全事典改訂 3 版 - 書籍情報重版に伴い、第 2 刷では、一部誤字があった（ホント申し訳ないです）部分を修正はしていますが、内容自体に変更はありません。よって、第 2 刷を待たないで書店に並んでいる初版を買うとなんか内容が古いぞ...... みたいなことはありませんのでご安心ください。ちなみに、「重版が決まりました」というお知らせをもらった状況で本記事を書いていますので、実際に第 2 刷が店頭に並ぶのはもう少し先の話だと思います。一応、第 2 刷の発売日が 2 月 15 日とのことですので、書店での在庫のはけ具合によって徐々に入れ替わっていくものと思われます。

さくらの VPS で俺専用 Mastodon （マストドン）インスタンスを立ててみた話 - リベンジ

Sat, 28 Jan 2023 09:13:43 +0900

2017 年なのでもう 5 年以上前ですが、日本でも Mastodon （マストドン）が話題になった際に面白そうってことで私も個人用のインスタンス立ち上げたりして遊んでました（参考記事は内容が古いので、書いてあることは参考にしないでください）。参考さくらの VPS + CentOS7 で俺専用 Mastodon インスタンスを立ててみた話インスタンス立ち上げて以降は、画像や動画の保存先をクラウドストレージ（Amazon S3）に移行したり、バージョンアップでコケたり、色々苦労したりしながらも 1 年くらいは運用してたんですが、Twitter とか他の SNS とかもあるし、Mastodon の方はあんまり更新しなくなっていくという...... まぁ有り体に言えば飽きたわけですけども、サーバも維持するにはお金と手間がかかるわけですし、そのまま放置しててもあれだなということで結局サーバは閉じてしまったんですよね。で、そこから特に Mastodon に再び興味を持つこともなく、冒頭に書いたとおり 5 年以上もの歳月が過ぎ去ったわけですけども、最近 Twitter のゴタゴタに関係して Mastodon がまた話題になってたじゃないですか。それで最近の Mastodon はどんな感じなの？と思って公式ドキュメントとかを読みつつ調べてみたら、なんか以前よりかなり洗練されて楽そうになってるじゃんということで、再度インスタンス立ち上げてみようかなと思い立った次第。

さくらの VPS （Ubuntu 22.04 amd64 + nginx）で Movable Type 実行環境を作る

Tue, 27 Dec 2022 10:59:26 +0900

長年、個人的な Web サイトに関しては、CentOS と Apache っていう環境で運用してきたこともあって、Movable Type についても同環境でしか動かしてなかったんですけども（仕事ではもちろん別の環境も触りますが、立ち上げから保守管理まで全部自分で責任を持つって状況ではという話です）、年の瀬にそろそろ個人で運用しているサーバのリプレースでもしよっかなと思い立ちまして。それで、この機会に CentOS + Apache から離れて Ubuntu や nginx をきちんと使ってみたいなということで、さくらの VPS さんで新規に VPS 立ち上げて、標準 OS として用意されている Ubuntu 22.04 amd64 に Web サーバは nginx という組み合わせで新しい環境を作ってみました。 nginx で perl を動作させたことがなかったのでちょっとだけ不安だったんですが、fcgiwrap を使用することで比較的簡単に環境を整えることができましたので、その辺の手順を備忘録として残しておこうと思います。

Tailwind CSS でつくるダークモード切り替えスイッチ

Sun, 25 Dec 2022 14:46:28 +0900

個人的なサイトで使うために作ったものですが、もしかしたら使う人もいるかなということで流用しやすいように整理して公開してみました。Tailwind CSS を使用することで CSS は一切書かずにダークモード対応します。ソースコードは下記。 burnworks/tailwindcss-dark-mode-switch: Dark Mode/Light Mode switcher with Tailwind CSS 動作デモは下記。 Tailwind CSS Dark Mode Switch Sample

MovableType.net サイトサーチを Google カスタム検索エンジン使用中サイトに 5 分で導入する

Sun, 11 Dec 2022 09:59:43 +0900

この記事は「Movable Type Advent Calendar 2022」、11 日目の記事です。今年の Movable Type Advent Calendar 2022 は 1 日目の記事を書かせて頂いたのですが、数日後に同 Advent Calendar を見ていたら遠慮のかたまりのようにこの日だけ書く人が決まってなかったのでとりあえず埋めとこということで登録しておいてから書くこと決めました。なのでかなり雑です。さて、この Blog ではサイト内検索に Google カスタム検索エンジン（今は「Programmable Search Engine - プログラム可能な検索エンジン」って呼んでるみたいですね）を長年使っていまして、別にこの検索機能自体に不満はないんですけども、以前から機会があったらカスタム検索 JSON API を使用してサイト内検索を実装し直そうかななんて考えてました。機会があったら...... なんて言ってるとだいたいやらないんですけど、ご多分に漏れず数年放置。そんな中でシックス・アパートさんが Google のカスタム検索 JSON API を使用しつつも簡単にサイト内検索を導入可能なサービス、MovableType.net サイトサーチを提供開始したニュースも当然、目にはしていましたが、これも「まぁ時間があったら試すか......」のまま放置と駄目人間状態で数年。が、ここに来て急遽 Advent Calendar のためにネタを...... で思い出して、早速導入してみました。前置きが長いですし、「5 分で導入する」は釣りタイトルです。 MovableType.net サイトサーチところでサイトサーチ、MovableType.net と名前が付いているだけで正確には Movable Type 関係ない気もしますがよいのでしょうか......

Astro.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる

Thu, 01 Dec 2022 10:47:48 +0900

この記事は「Movable Type Advent Calendar 2022」、1 日目の記事です。 2年前、「Movable Type Advent Calendar 2020」の記事として、Movable Type をヘッドレス CMS のように利用しつつ、Next.js の SSG （Static Site Generation）による、所謂 Jamstack な Blog サイトを作る件について書いたのですが（下記参照）、今回はそれの Astro.js 版です。 Next.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる今回は、CSS フレームワークとして Tailwind CSS を使用し、短時間で簡単にとりあえず動くところまで持って行くサンプルを作ってみます。

Stable Diffusion による AI 画像生成を Google Colaboratory （Colab）で試してみた件

Fri, 02 Sep 2022 21:59:59 +0900

2022 年 8 月にオープンソースとして無償公開され話題になった画像生成 AI 「Stable Diffusion」ですが、面白そうなので実際に動かして遊んでみようということで、Google Colaboratory （以下、Google Colab）で稼働させてみました。 CompVis/stable-diffusion - GitHub Stable Diffusion を Google Colab 上で稼働させる方法についてはすでに色々なところで紹介されているので細かくは書きませんが、それら情報のおかげで簡単に稼働させることができましたので備忘録がてらに書いておきます。

Web 開発時に確認したい項目を簡単に一覧できるダッシュボード的なものを作ってみた件

Tue, 30 Aug 2022 10:34:50 +0900

週末に思い立って簡単に作ってみたシリーズですが、仕事してて現状の最新ブラウザバージョンっていくつだっけ？とか、ブラウザのシェアや画面解像度のシェアみたいのを確認することってたまにあるんですが、そういうのを 1つにまとめて簡単に確認できるページを作ってみました。 burnworks Dashboard - Data Dashboard for Web Developers