<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>WWW WATCH</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/" />
<link rel="self" type="application/atom+xml" href="https://hyper-text.org/atom/" />
<icon>https://hyper-text.org/static/img/favicon.png</icon>
<id>tag:hyper-text.org,2008://1.0</id>
<updated>2023-11-20T00:08:27Z</updated>
<subtitle>Webデザイン、HTML、XML、CSS、JavaScript 関連の話題、新しいWebサービス、Webサイトの話題をはじめとしたインターネット上での最新トピックスなどを中心に取り上げるBlog</subtitle>
<author>
<name>Yoshiki Kato</name>
<uri>https://hyper-text.org/about/</uri>
</author>



<entry>
<title>Astro と Tailwind CSS でこの Blog をリニューアルしました</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2023/11/rebuild_blog_astrojs_and_tailwind.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/static/img/profile/w3w_og.png" />

<id>tag:hyper-text.org,2023-11-20://10028</id>

<published>2023-11-20T00:08:37Z</published>
<updated>2023-11-20T00:08:27Z</updated>

<summary>Blog をリニューアルするにあたり、今までの Movable Type でテンプレート作って、という手法から、Movable Type は JSON データの書き出しだけ担当させて、フロントエンドは Astro と Tailwind CSS で開発する形に切り替えたので、その概要を簡単にメモ。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="HTML/CSS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Development" scheme="http://www.sixapart.com/ns/types#category" />

<category term="astrojs" label="astrojs" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="movabletype" label="movabletype" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="tailwindcss" label="tailwindcss" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">


<![CDATA[<p>この Blog は立ち上げ当初から Movable Type で運用していますが、MT タグを書いて、テンプレートを作って、という一般的な運用っていうんですかね？ それをやめて、Movable Type は記事データの管理と JSON を書き出す役割だけにして、フロントエンドは <a href="https://astro.build/" target="_blank">Astro</a> + <a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a> でリニューアルしました。</p>

<p>面倒だったのでデザインは大きく変えず、ぱっと見はリニューアルしたのがわかりにくい感じになっていますが、Movable Type とフロントエンドを完全に分離することで、フロントエンド側の開発やメンテナンスは Git ワークフローに組み込めるようになり、私的にはとても快適になりました。</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>CSS Values and Units Module Level 5 に追加された random() 関数が面白そう</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2023/11/css_random_functions.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/css-ogp.png" />

<id>tag:hyper-text.org,2023-11-14://10026</id>

<published>2023-11-14T06:03:14Z</published>
<updated>2023-11-14T06:03:16Z</updated>

<summary>CSS Values and Units Module Level 5 の Editor&apos;s Draft を眺めていて気になった、ランダムな値を生成するための random() と random-item() 関数について簡単に紹介してみます。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="HTML/CSS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="css" label="css" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/css-ogp.png" alt="CSS Values and Units Module Level 5 に追加された random() 関数が面白そう ： WWW WATCH" /></p>]]>

<![CDATA[<p>昨日、<a href="https://drafts.csswg.org/css-values-5/" target="_blank">CSS Values and Units Module Level 5 (Editor's Draft)</a> が更新されたのに気がついたんですけども、今ってどんな内容になってんの...... と思いつつなんとなく眺めてたら、ランダムな値を生成するための <code>random()</code> と <code>random-item()</code> 関数ってのが入ってました。</p>

<p>Editor's Draft （編集者草案） ってのは、W3C の仕様策定プロセスにおいてはまだ非公式、非承認のドキュメントですから、あまりここに書いてある内容を Web 標準仕様になるとか、ブラウザの実装が進む前提で話しても仕方ないんですが、ちょっと面白そうなので簡単に触れてみたいと思います。</p>

<p>例えばランダムに背景画像を変えたいな、とか、装飾に使っているアクセントカラーをランダムに出し分けたりしたいんだけど、といったニーズに CSS だけで対応することができるかもしれません。</p>

<ul>
<li><a href="https://drafts.csswg.org/css-values-5/" target="_blank">CSS Values and Units Module Level 5 Editor's Draft, 13 November 2023</a></li>
</ul>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>OpenAI TTS（Text to Speech） を Node.js で試してみた</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2023/11/openai_text_to_speech_api_node.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/ai-ogp.png" />

<id>tag:hyper-text.org,2023-11-08://10025</id>

<published>2023-11-08T02:23:45Z</published>
<updated>2023-11-10T09:13:28Z</updated>

<summary>先日開催された OpenAI Dev Day で新たに発表された、テキストから音声を生成する OpenAI TTS (Text To Speech) API が面白そうだったので、早速ですが Node.js 環境で簡単に試してみました。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Service" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Topic" scheme="http://www.sixapart.com/ns/types#category" />

<category term="ai" label="ai" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="nodejs" label="nodejs" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="openai" label="openai" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/ai-ogp.png" alt="OpenAI TTS（Text to Speech） を Node.js で試してみた ： WWW WATCH" /></p>]]>

<![CDATA[<p>先日開催された <a href="https://devday.openai.com/" target="_blank">OpenAI Dev Day</a> では大幅な機能追加に加え、いくつかの新しい API も発表されました。</p>

<p>その中で、テキストから音声を生成する OpenAI TTS (Text To Speech) API が面白そうだったので、早速ですが簡単に試してみることに。</p>

<p>Text to speech の概要や、API の リファレンスは下記にあります。</p>

<ul>
<li><a href="https://platform.openai.com/docs/guides/text-to-speech" target="_blank">Text to speech - OpenAI API</a></li>
<li><a href="https://platform.openai.com/docs/api-reference/audio/createSpeech" target="_blank">Create speech - API Reference - OpenAI API</a></li>
</ul>

<p>で、ご丁寧に Python や Node.js でのリクエストサンプルコードも提示してくれているのでこれを使って秒で試せます。</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>axe-auto-reporter というアクセシビリティ自動テストのためのスクリプトを公開しました</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2023/10/axe_auto_reporter.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/accessibility-ogp.png" />

<id>tag:hyper-text.org,2023-10-27://10024</id>

<published>2023-10-27T07:03:35Z</published>
<updated>2023-11-05T07:06:59Z</updated>

<summary>@axe-core/puppeteer を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存するスクリプト 「axe-auto-reporter」 を公開しました。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="Accessibility" scheme="http://www.sixapart.com/ns/types#category" />

<category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Development" scheme="http://www.sixapart.com/ns/types#category" />

<category term="a11y" label="a11y" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="accessibility" label="accessibility" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/accessibility-ogp.png" alt="axe-auto-reporter というアクセシビリティ自動テストのためのスクリプトを公開しました ： WWW WATCH" /></p>]]>

<![CDATA[<p>「<strong>axe-auto-reporter</strong>」 という （名前に全くひねりがない）、<a href="https://github.com/dequelabs/axe-core-npm/tree/develop/packages/puppeteer" target="_blank">@axe-core/puppeteer</a> を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存するスクリプトを GitHub で公開しました。</p>

<p>所謂、黒い画面 （CLI） で操作しますがテストしたい URL のリストをテキストファイルで作って、あとはコマンド 1つ実行するだけなので、多分ほとんどの人にとって難しくないと思います。</p>

<ul>
<li><a href="https://github.com/burnworks/axe-auto-reporter" target="_blank">burnworks/axe-auto-reporter</a></li>
</ul>

<p>同じようなもの作ってる人は他にもいると思いますが、自分の会社の業務とかで使うためには人が作ったものより、自前で作った方が色々とやりやすいってことで、何年か前に作って運用してたのを今回、全面的に書き直したので、いい機会だからということで公開することにした次第。</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>ChatGPT の画像認識機能を使って画像内のコントラスト比チェックができるか試してみた件</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2023/10/color_contrast_auto_check_chatgpt.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/ai-ogp.png" />

<id>tag:hyper-text.org,2023-10-02://10023</id>

<published>2023-10-02T02:14:49Z</published>
<updated>2023-10-03T02:39:16Z</updated>

<summary>ChatGPT が新たに画像認識・生成機能の追加を発表し、実際に私の環境でも使用できるようになっていましたので、試しに、こちらの指定したとおりにアップロードした画像内の色のコントラスト比を調べ、出力することができるのか、実験してみました。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="Accessibility" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Tool" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Service" scheme="http://www.sixapart.com/ns/types#category" />

<category term="a11y" label="a11y" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="accessibility" label="accessibility" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="ai" label="ai" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="chatgpt" label="chatgpt" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/ai-ogp.png" alt="ChatGPT の画像認識機能を使って画像内のコントラスト比チェックができるか試してみた件 ： WWW WATCH" /></p>]]>

<![CDATA[<p class="attention">どうやら私が勘違いしていてて GPT-4V だと思って使ってたのは別の機能だったらしいので正式に GPT-4V が使えるようになったらこの記事は書き直します。その前提でどうぞ。</p>

<p>つい先日ですが、ChatGPT が新たに画像認識と生成機能 （GPT-4V）、さらに現状ではスマートフォンアプリからのみですが音声機能の追加を発表し、実際に私の環境でも使用できるようになっていましたので早速試してみました。</p>

<p>で、音声機能は後々試すとして、まずは画像認識機能がどんな感じなのかなということで、ある画像を用意し、その画像内から 『隣り合わせになっている色のコントラスト比を調べ、あるしきい値以下の場合はその箇所を特定して画像内に印を付けてくれ』 という結構難しいんじゃないかなと思われる作業をやってみてもらったのでその結果を残しておきます。</p>

<p>実際には事前にプロンプトを何度か調整しながら、どうすればうまいこと望み通りの処理をしてくれるかなというのを試しつつ、最終的に決めたプロンプトで数回試してみた結果なのと、今回使用した検証用画像に特化したプロンプトの調整になっているので、恐らく汎用性は低いというか、多分使う画像によって結果も変わってくる可能性が高いですが、個人的にはこんな簡単なプロンプトでお任せしてここまで出来るんだ、すげぇなっていう感想でした。</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>アクセシビリティ試験で補助的に使えるブックマークレット集</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2023/09/a11y_test_assist_bookmarklets.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/accessibility-ogp.png" />

<id>tag:hyper-text.org,2023-09-28://10022</id>

<published>2023-09-28T04:51:49Z</published>
<updated>2023-11-19T04:34:03Z</updated>

<summary>アクセシビリティ試験を実施する際に個人的に使用しているブックマークレットをひとまとめにして GitHub に公開しました。アクセシビリティ試験時によく確認する項目について、それを補助するようなブックマークレット集になっています。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="Accessibility" scheme="http://www.sixapart.com/ns/types#category" />

<category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Tool" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Development" scheme="http://www.sixapart.com/ns/types#category" />

<category term="a11y" label="a11y" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="accessibility" label="accessibility" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="tools" label="tools" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/accessibility-ogp.png" alt="アクセシビリティ試験で補助的に使えるブックマークレット集 ： WWW WATCH" /></p>]]>

<![CDATA[<p>お仕事でアクセシビリティ試験を実施する際に個人的に作って使用しているブックマークレットがいくつかあるんですが、あくまで個人的に使うだけだったので適当に手元のエディタで書いて、動かしてって感じで済ませて長い時間が経っていました。</p>

<p>つい最近ですが、これらブックマークレットを少し手直しをした際に、いい機会なので Git で管理するようにしましたが、折角なので公開しようと思います。</p>

<p>個人で使っているものなので適当な感じですし、私が便利と思って使ってるだけで、もしかすると汎用性は低く、多くの方にとっては大した役には立たない可能性もありますが、私がアクセシビリティ試験時によく確認する項目について、それを補助するようなブックマークレット集になっています。</p>

<ul>
<li><a href="https://github.com/burnworks/a11y-test-assist-bookmarklets/tree/main" target="_blank">burnworks/a11y-test-assist-bookmarklets: Collection of bookmarklets to assist with accessibility testing</a></li>
</ul>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>「できるポケット Web 制作必携 HTML&amp;CSS 全事典 改訂 3 版」 2 度目の重版 （第 3 刷） が決定しました</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2023/06/dekiru_pocket_html_css_reference_v3_third.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/dekiru_pocket_html_css_reference_v3.png" />

<id>tag:hyper-text.org,2023-06-29://10021</id>

<published>2023-06-29T00:11:49Z</published>
<updated>2023-06-29T00:39:03Z</updated>

<summary>2022 年 8 月に、発売された 「できるポケット Web 制作必携 HTML&amp;CSS 全事典 改訂 3 版」 ですが、今年 2 月の重版出来に続き、来月、2023 年 7 月 12 日に第 3 刷の重版が決定しました。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="Book" scheme="http://www.sixapart.com/ns/types#category" />

<category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="HTML" scheme="http://www.sixapart.com/ns/types#category" />

<category term="HTML/CSS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="book" label="book" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="css" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="html" label="html" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/dekiru_pocket_html_css_reference_v3.png" alt="「できるポケット Web 制作必携 HTML&amp;CSS 全事典 改訂 3 版」 2 度目の重版 （第 3 刷） が決定しました ： WWW WATCH" /></p>]]>

<![CDATA[<p>2022 年 8 月に、発売された 「できるポケット Web 制作必携 HTML&amp;CSS 全事典 改訂 3 版」 ですが、今年 2 月の重版出来に続き、来月、7 月 12 日に第 3 刷の重版が決定しました。</p>

<p>重版がかかる間隔が想定より速くて驚いておりますが、これもこの書籍をご購入いただいた皆様のおかげです。ありがとうございます。</p>

<ul>
<li><span class="module-entry-label-hot">参考</span> <a href="/archives/2022/06/dekiru_pocket_html_css_reference_v3.shtml">「できるポケット HTML&amp;CSS 全事典」 が全面改訂、「改訂 3 版」 の発売が決定しました</a></li>
<li><span class="module-entry-label-hot">参考</span> <a href="/archives/2023/01/dekiru_pocket_html_css_reference_v3_second.shtml">「できるポケット Web 制作必携 HTML&CSS 全事典 改訂 3 版」 の重版が決定しました</a></li>
<li><a href="/html-css-book-v3/" target="_blank">できるポケット Web 制作必携 HTML&amp;CSS 全事典 改訂 3 版 - 書籍情報</a></li>
</ul>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>HTML Standard 仕様に search 要素が追加された</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2023/03/html_search_element.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/html-ogp.png" />

<id>tag:hyper-text.org,2023-03-29://10020</id>

<published>2023-03-29T12:32:22Z</published>
<updated>2023-03-29T14:24:26Z</updated>

<summary>HTML Standard 仕様に search 要素が追加されました。検索やフィルタリングなどの操作を実行するための入力コントロールや関連コンテンツをまとめることができます。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="HTML" scheme="http://www.sixapart.com/ns/types#category" />

<category term="HTML/CSS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Development" scheme="http://www.sixapart.com/ns/types#category" />

<category term="html" label="html" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/html-ogp.png" alt="HTML Standard 仕様に search 要素が追加された ： WWW WATCH" /></p>]]>

<![CDATA[<p>先週末 （3 月 24 日） ですが、HTML Standard 仕様に、新たに search 要素が追加されました。</p>

<p>search 要素は、検索やフィルタリングなどの操作を実行するための入力コントロールや関連コンテンツのまとまりを表します。要するに Web サイトに設置する 「サイト内検索」 のフォームですとか、Web アプリケーション内で情報を検索するための一連の UI なんかをマークアップするのに使用できる要素ということになります。</p>

<ul>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element" target="_blank">4.4.15 The search element - HTML Standard</a></li>
<li><a href="https://github.com/whatwg/html/commit/c598ff023f081dd3f03b2e43177a632fb7dc92ec" target="_blank">Add the &lt;search&gt; element - whatwg/html@c598ff0</a></li>
</ul>

<p>search 要素はまだ HTML Standard 仕様に追加されたばかりですので、各ブラウザのサポート待ちになると思いますが、実装が進めば、検索機能の存在をブラウザや支援技術に明示できるようになるでしょう。<code>role="search"</code> を置き換えていくことが可能になります。</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>「できるポケット Web 制作必携 HTML&amp;CSS 全事典 改訂 3 版」 の重版が決定しました</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2023/01/dekiru_pocket_html_css_reference_v3_second.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/dekiru_pocket_html_css_reference_v3.png" />

<id>tag:hyper-text.org,2023-01-30://10019</id>

<published>2023-01-30T01:14:56Z</published>
<updated>2023-06-29T00:34:51Z</updated>

<summary>昨年、2022 年 8 月 22 日に発売された 「できるポケット Web 制作必携 HTML&amp;CSS 全事典 改訂 3 版」 ですが、おかげさまで早くも重版が決定しました。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="Book" scheme="http://www.sixapart.com/ns/types#category" />

<category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="HTML" scheme="http://www.sixapart.com/ns/types#category" />

<category term="HTML/CSS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="book" label="book" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="css" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="html" label="html" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/dekiru_pocket_html_css_reference_v3.png" alt="「できるポケット Web 制作必携 HTML&amp;CSS 全事典 改訂 3 版」 の重版が決定しました ： WWW WATCH" /></p>]]>

<![CDATA[<p>昨年、2022 年 8 月 22 日に、「できるポケット Web 制作必携 HTML&amp;CSS 全事典 改訂 3 版」 を上梓させていただきましたが、おかげさまで早くも重版が決まったという、うれしいお知らせをインプレスさんより頂戴しました。</p>

<ul>
<li><span class="module-entry-label-hot">参考</span> <a href="/archives/2022/06/dekiru_pocket_html_css_reference_v3.shtml">「できるポケット HTML&amp;CSS 全事典」 が全面改訂、「改訂 3 版」 の発売が決定しました</a></li>
<li><a href="/html-css-book-v3/" target="_blank">できるポケット Web 制作必携 HTML&amp;CSS 全事典 改訂 3 版 - 書籍情報</a></li>
</ul>

<p>重版に伴い、第 2 刷では、一部誤字があった （ホント申し訳ないです） 部分を修正はしていますが、内容自体に変更はありません。よって、第 2 刷を待たないで書店に並んでいる初版を買うとなんか内容が古いぞ...... みたいなことはありませんのでご安心ください。</p>

<p>ちなみに、「重版が決まりました」 というお知らせをもらった状況で本記事を書いていますので、実際に第 2 刷が店頭に並ぶのはもう少し先の話だと思います。一応、第 2 刷の発売日が 2 月 15 日とのことですので、書店での在庫のはけ具合によって徐々に入れ替わっていくものと思われます。</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>さくらの VPS で 俺専用 Mastodon （マストドン） インスタンスを立ててみた話 - リベンジ</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2023/01/mastodon-instance-again.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/mastodon_cover.png" />

<id>tag:hyper-text.org,2023-01-28://10018</id>

<published>2023-01-28T00:13:43Z</published>
<updated>2023-02-11T02:19:08Z</updated>

<summary>2017 年に一度立ち上げたけれどその後あまり使わなくなって結局閉じてしまった Mastodon （マストドン） インスタンス。久しぶりに調べてみたら、さくらの VPS でスタートアップスクリプトなどが提供されていたりと色々便利になっていたので久しぶりに立ち上げてみることに。おひとり様インスタンス、再び。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="Application" scheme="http://www.sixapart.com/ns/types#category" />

<category term="SNS" scheme="http://www.sixapart.com/ns/types#category" />


<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/mastodon_cover.png" alt="さくらの VPS で 俺専用 Mastodon （マストドン） インスタンスを立ててみた話 - リベンジ ： WWW WATCH" /></p>]]>

<![CDATA[<p>2017 年なのでもう 5 年以上前ですが、日本でも Mastodon （マストドン） が話題になった際に面白そうってことで私も個人用のインスタンス立ち上げたりして遊んでました （参考記事は内容が古いので、書いてあることは参考にしないでください）。</p>

<ul>
<li><span class="module-entry-label-hot">参考</span> <a href="/archives/2017/04/mastodon-instance-single-user.shtml">さくらの VPS + CentOS7 で 俺専用 Mastodon インスタンスを立ててみた話</a></li>
</ul>

<p>インスタンス立ち上げて以降は、<a href="/archives/2017/04/mastodon-instance-with-amazon-s3.shtml">画像や動画の保存先をクラウドストレージ （Amazon S3） に移行したり</a>、<a href="/archives/2017/06/bow_docker_masutodon_assets_precompile.shtml">バージョンアップでコケたり</a>、色々苦労したりしながらも 1 年くらいは運用してたんですが、Twitter とか他の SNS とかもあるし、Mastodon の方はあんまり更新しなくなっていくという......</p>

<p>まぁ有り体に言えば飽きたわけですけども、サーバも維持するにはお金と手間がかかるわけですし、そのまま放置しててもあれだなということで結局サーバは閉じてしまったんですよね。</p>

<p>で、そこから特に Mastodon に再び興味を持つこともなく、冒頭に書いたとおり 5 年以上もの歳月が過ぎ去ったわけですけども、最近 Twitter のゴタゴタに関係して Mastodon がまた話題になってたじゃないですか。それで最近の Mastodon はどんな感じなの？ と思って公式ドキュメントとかを読みつつ調べてみたら、なんか以前よりかなり洗練されて楽そうになってるじゃんということで、再度インスタンス立ち上げてみようかなと思い立った次第。</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>さくらの VPS （Ubuntu 22.04 amd64 + nginx） で Movable Type 実行環境を作る</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2022/12/Installing_mt_on_ubuntu_2204_and_nginx.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/movabletype-ogp.png" />

<id>tag:hyper-text.org,2022-12-27://10017</id>

<published>2022-12-27T01:59:26Z</published>
<updated>2022-12-27T03:00:01Z</updated>

<summary>さくら VPS （Ubuntu 22.04 amd64 + nginx） 上で Movable Type を実行するための環境を構築した件について簡単に手順をまとめました。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="CMS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Development" scheme="http://www.sixapart.com/ns/types#category" />

<category term="movabletype" label="movabletype" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="nginx" label="nginx" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="ubuntu" label="ubuntu" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/movabletype-ogp.png" alt="さくらの VPS （Ubuntu 22.04 amd64 + nginx） で Movable Type 実行環境を作る ： WWW WATCH" /></p>]]>

<![CDATA[<p>長年、個人的な Web サイトに関しては、CentOS と Apache っていう環境で運用してきたこともあって、Movable Type についても同環境でしか動かしてなかったんですけども （仕事ではもちろん別の環境も触りますが、立ち上げから保守管理まで全部自分で責任を持つって状況ではという話です）、年の瀬にそろそろ個人で運用しているサーバのリプレースでもしよっかなと思い立ちまして。</p>

<p>それで、この機会に CentOS + Apache から離れて Ubuntu や nginx をきちんと使ってみたいなということで、さくらの VPS さんで新規に VPS 立ち上げて、標準 OS として用意されている <a href="https://manual.sakura.ad.jp/vps/os-packages/ubuntu-22.04.html" target="_blank">Ubuntu 22.04 amd64</a> に Web サーバは nginx という組み合わせで新しい環境を作ってみました。</p>

<p>nginx で perl を動作させたことがなかったのでちょっとだけ不安だったんですが、fcgiwrap を使用することで比較的簡単に環境を整えることができましたので、その辺の手順を備忘録として残しておこうと思います。</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>Tailwind CSS でつくるダークモード切り替えスイッチ</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2022/12/tailwindcss_dark_mode_switch.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/darkmode-ogp.png" />

<id>tag:hyper-text.org,2022-12-25://10016</id>

<published>2022-12-25T05:46:28Z</published>
<updated>2022-12-25T05:49:24Z</updated>

<summary>Tailwind CSS を使用してライトモード / ダークモードの切り替えスイッチを作ってみたという話。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="HTML" scheme="http://www.sixapart.com/ns/types#category" />

<category term="HTML/CSS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Development" scheme="http://www.sixapart.com/ns/types#category" />

<category term="css" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="tailwindcss" label="tailwindcss" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/darkmode-ogp.png" alt="Tailwind CSS でつくるダークモード切り替えスイッチ ： WWW WATCH" /></p>]]>

<![CDATA[<p>個人的なサイトで使うために作ったものですが、もしかしたら使う人もいるかなということで流用しやすいように整理して公開してみました。<a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a> を使用することで CSS は一切書かずにダークモード対応します。</p>

<p>ソースコードは下記。</p>

<ul>
<li><a href="https://github.com/burnworks/tailwindcss-dark-mode-switch" target="_blank">burnworks/tailwindcss-dark-mode-switch: Dark Mode/Light Mode switcher with Tailwind CSS</a></li>
</ul>

<p>動作デモは下記。</p>

<ul>
<li><a href="https://burnworks.github.io/tailwindcss-dark-mode-switch/" target="_blank">Tailwind CSS Dark Mode Switch Sample</a></li>
</ul>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>MovableType.net サイトサーチを Google カスタム検索エンジン使用中サイトに 5 分で導入する</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2022/12/movabletypenet_sitesearch.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/search-ogp.png" />

<id>tag:hyper-text.org,2022-12-11://10015</id>

<published>2022-12-11T00:59:43Z</published>
<updated>2023-11-10T04:18:04Z</updated>

<summary>手軽な価格と最小限の手間で Google カスタム検索 JSON API を利用した、広告表示なしのサイト内検索機能が導入可能な MovableType.net サイトサーチを、もともと Google カスタム検索エンジンを使用していたサイトに導入してみたら超簡単でしたという記事。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="Blog" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Development" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Service" scheme="http://www.sixapart.com/ns/types#category" />

<category term="google" label="google" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="movabletype" label="movabletype" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="search" label="search" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/search-ogp.png" alt="MovableType.net サイトサーチを Google カスタム検索エンジン使用中サイトに 5 分で導入する ： WWW WATCH" /></p>]]>

<![CDATA[<p class="memo">この記事は 「<a href="https://adventar.org/calendars/7425" target="_blank">Movable Type Advent Calendar 2022</a>」、11 日目の記事です。</p>

<p>今年の Movable Type Advent Calendar 2022 は 1 日目の記事を書かせて頂いたのですが、数日後に同 Advent Calendar を見ていたら遠慮のかたまりのようにこの日だけ書く人が決まってなかったのでとりあえず埋めとこということで登録しておいてから書くこと決めました。なのでかなり雑です。</p>

<p>さて、この Blog ではサイト内検索に <a href="https://programmablesearchengine.google.com/" target="_blank">Google カスタム検索エンジン</a> （今は 「Programmable Search Engine - プログラム可能な検索エンジン」って呼んでるみたいですね） を長年使っていまして、別にこの検索機能自体に不満はないんですけども、以前から機会があったら <a href="https://developers.google.com/custom-search/v1/overview" target="_blank">カスタム検索 JSON API</a> を使用してサイト内検索を実装し直そうかななんて考えてました。</p>

<p>機会があったら...... なんて言ってるとだいたいやらないんですけど、ご多分に漏れず数年放置。そんな中でシックス・アパートさんが Google のカスタム検索 JSON API を使用しつつも簡単にサイト内検索を導入可能なサービス、MovableType.net サイトサーチを提供開始したニュースも当然、目にはしていましたが、これも 「まぁ時間があったら試すか......」 のまま放置と駄目人間状態で数年。</p>

<p>が、ここに来て急遽 Advent Calendar のためにネタを...... で思い出して、早速導入してみました。前置きが長いですし、「5 分で導入する」 は釣りタイトルです。</p>

<ul>
<li><a href="https://movabletype.net/sitesearch/" target="_blank">MovableType.net サイトサーチ</a></li>
</ul>

<p>ところでサイトサーチ、MovableType.net と名前が付いているだけで正確には Movable Type 関係ない気もしますがよいのでしょうか......</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>Astro.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2022/12/creating_jamstack_blog_astrojs_and_mt_data_api.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/movabletype-ogp.png" />

<id>tag:hyper-text.org,2022-12-01://10014</id>

<published>2022-12-01T01:47:48Z</published>
<updated>2023-05-12T09:11:18Z</updated>

<summary>Movable Type をヘッドレス CMS として使用し、Data API から取得したデータで Astro.js による Jamstack なサイトを作成してみようというお話。以前書いた Next.js を使用した同趣旨記事の Astro.js 版です。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="CMS" scheme="http://www.sixapart.com/ns/types#category" />

<category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Development" scheme="http://www.sixapart.com/ns/types#category" />

<category term="astrojs" label="astrojs" scheme="http://www.sixapart.com/ns/types#tag" />
<category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/movabletype-ogp.png" alt="Astro.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる ： WWW WATCH" /></p>]]>

<![CDATA[<p class="memo">この記事は 「<a href="https://adventar.org/calendars/7425" target="_blank">Movable Type Advent Calendar 2022</a>」、1 日目の記事です。</p>

<p>2年前、「<a href="https://adventar.org/calendars/4971" target="_blank">Movable Type Advent Calendar 2020</a>」 の記事として、Movable Type をヘッドレス CMS のように利用しつつ、<a href="https://nextjs.org/" target="_blank" hreflang="en">Next.js</a> の SSG （Static Site Generation） による、所謂 Jamstack な Blog サイトを作る件について書いたのですが （下記参照）、今回はそれの <a href="https://astro.build/" target="_blank" hreflang="en">Astro.js</a> 版です。</p>

<ul>
<li><a href="/archives/2020/12/creating_jamstack_blog_nextjs_and_mt_data_api.shtml">Next.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる</a></li>
</ul>

<p>今回は、CSS フレームワークとして <a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a> を使用し、短時間で簡単にとりあえず動くところまで持って行くサンプルを作ってみます。</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

<entry>
<title>Stable Diffusion による AI 画像生成を Google Colaboratory （Colab） で試してみた件</title>
<link rel="alternate" type="text/html" href="https://hyper-text.org/archives/2022/09/stable_diffusion_on_google_colab.shtml" />
<link rel="enclosure" type="image/png" href="https://hyper-text.org/img/asset/stable-diffusion-on-google-colab-ogp.png" />

<id>tag:hyper-text.org,2022-09-02://10013</id>

<published>2022-09-02T12:59:59Z</published>
<updated>2022-09-02T13:17:10Z</updated>

<summary>2022 年 8 月にオープンソースとして無償公開され話題になった画像生成 AI 「Stable Diffusion」 を Google が提供する 「Colaboratory」 （ブラウザ上で Python を記述、実行できる機械学習の教育、研究を目的とした便利ツール） 上で動かして実際に画像を生成してみました。</summary>
<author>
<name>Yoshiki Kato</name>
</author>

<category term="Application" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Tool" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Service" scheme="http://www.sixapart.com/ns/types#category" />

<category term="Web Topic" scheme="http://www.sixapart.com/ns/types#category" />

<category term="webservice" label="webservice" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="https://hyper-text.org/">
<![CDATA[<p class="ogp-image"><img src="https://hyper-text.org/img/asset/stable-diffusion-on-google-colab-ogp.png" alt="Stable Diffusion による AI 画像生成を Google Colaboratory （Colab） で試してみた件 ： WWW WATCH" /></p>]]>

<![CDATA[<p>2022 年 8 月にオープンソースとして無償公開され話題になった画像生成 AI 「Stable Diffusion」 ですが、面白そうなので実際に動かして遊んでみようということで、Google Colaboratory （以下、Google Colab） で稼働させてみました。</p>

<ul>
<li><a href="https://github.com/CompVis/stable-diffusion" target="_blank" hreflang="en">CompVis/stable-diffusion - GitHub</a></li>
</ul>

<p>Stable Diffusion を Google Colab 上で稼働させる方法についてはすでに色々なところで紹介されているので細かくは書きませんが、それら情報のおかげで簡単に稼働させることができましたので備忘録がてらに書いておきます。</p>]]>

<![CDATA[
<hr />
<p>【お知らせ】このフィードは今後更新されなくなります。</p>
<p>新しいフィードは 「<a href="https://hyper-text.org/feed/blog.xml">https://hyper-text.org/feed/blog.xml</a>」 です。</p>
<p>お手数ですが、新しいフィードをご購読ください。</p>
]]>
</content>
</entry>

</feed>