はてなブックマーク

WordPress の「パターン」は、スタイリングしたブロックや、複数のブロックを組み合わせて構成したものを、１つのパーツとして扱うためのしくみです。これまでは、公式のパターンディレクトリやテーマ、プラグインで用意されたパターンを利用できました。 公式のパターンディレクトリに用意されたパターン WordPress 6.3 ではこのパターンの機能が整備・強化され、エディターでパターンを作成・管理できるようになっています。さらに、再利用ブロックがパターンに統合され、「同期がオンになったパターン（同期パターン／Synced Pattern）」として扱われるようになりました。 パターンが整備・強化された流れと将来的な構想 このような整備・強化が行われたのは、エディターの機能をわかりやすくするためなのはもちろんですが、それだけではありません。将来的にパターンを「セクションを構成するものとして利用する

MPA なフレームワークの代表的な存在である Astro。 ただ、SPA なサイトに慣れてしまったためか、個人的には MPA のパタパタした挙動がどうも落ち着きません。これは、ページやサイト側の処理だけが原因ではなく、ブラウザの挙動がページの移動を強調するようになった影響も大きい気がします（セキュリティ対策？）。 そのため、Astro でサイトを作る場合には挙動を SPA っぽくしたくなり、その対策をいろいろと考えるのですが、React Server Components が登場してきた現状だと Next.js で SPA でいいや… と、Astro の出番が少なくなっていました。 ところが、ブロックテーマな WordPress のフロントエンドとして使うフレームワークを検討していたところ、Gatsby.js ではブロックテーマのスタイルと GatsbyImage の相性の悪さが問題となり

WordPress のテーマ（クラシックテーマ）に theme.json を追加したら何が起きるのか？　を調べていたところ、DOM の構造や適用される CSS の変化など、思った以上にたくさんの影響が起きていました。 影響（全 28 項目 ＋ すべてのテーマに影響する 1 項目）と、その影響が起きる条件（トリガーとなるもの）は一覧表にしてこの記事の最後に掲載しました。 これだけあると、影響を受けないテーマを探す方が大変です。 そのため、個々の影響の詳細や対策方法については、実例と合わせて『WordPress ノート クラシックテーマにおける theme.json の影響と対策 2023』にしっかりとまとめましたので、参考にしてください。 何が起きるかを調べようと思ったきっかけ 現在の WordPress ではブロックテーマがスタンダードとなり、theme.json で機能の有効化やレイアウ

世の中の流れに応じて、OpenAI の API で遊び始めました。ChatGPT と DALL-E の API は Next.js を使って自前の環境を作ったりして便利に使っています。 ただ、それ以外にも気になったものがありました。それが、Embedding のモデルです。 https://openai.com/blog/new-and-improved-embedding-model このモデルを使うことで、文章をベクトル化してくれます。形態素解析などの処理も必要なく、テキストを渡すだけでシンプルにベクトル化してくれるんです。 大規模言語モデルによる Embedding もいろいろと公開されていますが、実際に自分で試してみようと思うとハードルが高くて手を出せませんでした。しかし、OpenAI の Embedding のモデルは ChatGPT や DALL-E と同じように使えますので、

WordPress 6.2 がリリースされ、ついに、フルサイト編集を行うサイトエディターから「ベータ」表記がはずされました。合わせて、インターフェースまわりが強化・改善されましたので、その点に絞ってまとめておきます。 サイトエディター ［外観＞エディター］をクリックすると、サイトエディターが開きます。このとき、左側にナビゲーションが、右側にトップページの画面が表示されるようになりました。 右側の画面をクリックすると、トップページの生成に使用しているテンプレートの編集画面が開きます。この手順で編集画面を開くと、「投稿コンテンツ」ブロックにコンテンツを読み込んだ状態でカスタマイズできます。 個々のテンプレートやテンプレートパーツは、左側のナビゲーションから選んで編集します。それぞれのメニュー内にある「すべての○○を管理」を選択すると、WordPress 6.1 のときと同じ一覧画面を開くことが

実用はまだ先だろうと思っていたブロックテーマですが、WordPress 6 のリリース以降、WordPress の開発がブロックテーマを中心にする形で加速したことで、制作環境が一気に整いました。 Create Block Themeプラグインが登場したことで、フルスクラッチでテンプレートや theme.json を作成する必要もなくなり、快適なノーコードな環境でテーマを作成できます。 こんな快適な環境を使いこなすためには、これまでのテーマとは全く異なる、ブロックテーマを理解する必要があります。 もちろん、テキストエディターで手を加えなければならない部分は残っています。ただ、実装が追いついていないからというよりも、簡単にさわれないようにする方法が定まっていないから後回しにされているかな、と思えるレベルには整っています。 ブロックテーマとは ブロックテーマは、これまでの WordPress の

WordPress の開発がブロックテーマを中心とした形になってきました。そんなブロックテーマの作成に欠かせないのが「Create Block Theme」プラグインです。 このプラグインには、Gutenberg の一部として検討されていたテーマ制作者向けの機能が分離され、開発が進められています。テーマ制作者には必須のプラグインと言えますが、まだまだ活用されていない印象ですので、このプラグインでできることを紹介します。 Create Block Theme プラグインでできること Create Block Theme プラグインをインストールして有効化すると、以下のような機能が利用できるようになります。 各機能は［外観］に追加されるメニュー「ブロックテーマを作成」と「テーマフォントを管理する」から利用します。ただし、メニューが追加されるのは［外観＞テーマ］で Twenty Twenty T

Next.js 13のnext/imageは、Next.js 12では「next/future/image」と呼ばれていたものです。Next.js 12で使われていたnext/imageは、Next.js 13では「next/legacy/image」となっています。 ※以後、区別しやすいように next/future/image、next/legacy/image と表記します。 Next.js 12から13へ移行する場合、next/imageに関しては2つの選択肢があります。 next/imageからインポートしていたものを、next/legacy/imageからインポートする形に修正する。next/future/imageに合わせて、Imageコンポーネントまわりを修正する。 ここではnext/future/imageに合わせて、Imageコンポーネントを書き換える方法をまとめます。

画像はWebサイト・Webページの構成要素として非常に重要な存在です。また、ページのデータ量の中でも、大きな割合を占めます。 そのため、デバイスに対する画像の最適化は必須であり、現状であれば、解像度＆画像フォーマットの両方を考慮した以下のようなレスポンシブイメージのコードが必要です。 <picture> <source type="image/webp" srcset=" image/lemons-w400.webp 400w, image/lemons-w768.webp 768w ... " sizes="100vw" /> <img srcset=" image/lemons-w400.jpg 400w, image/lemons-w768.jpg 768w ... " sizes="100vw" src="image/lemons.jpg" alt="Lemons" loading

CSS Container Queries（コンテナクエリ）は不足していた要素を補いつつ策定が進んでいますが、素のHTML & CSS以上に「コンポーネント」という概念を持つReactとの相性が良いのは明らかです。 これらのCSSを素のHTML & CSS環境だけで理解しようとすると、その必要性がピンときません。正直なところ、解説のための具体的なサンプルを考えるのも頭がいたいです。 また、「２カラムレイアウト と これからのHTML&CSS」の中でも触れましたが、素のHTML & CSS（pure HTML & CSS）で直接書かれたページを見ることがどんどん少なくなってきている現状では、そうしたコードを読みこなすためにもReactの知識が必要です。 デザインツールのFigmaなどを見ても、Reactといった環境を意識した構成になっており、機能を理解する上でReactの知識があった方が効率

公式テーマであるTwenty Twenty-Twoがブロックテーマとして公開されました。 現状のWordPressの機能をフルで使うためには、ブロックテーマとして作るしかないわけですから当然の流れではありますが、ブロックテーマへの移行がいよいよ本格的に始まるのかと考えると、ちょっと気が重くなります。 WordPress/twentytwentytwo: Twenty Twenty-Two, the default WordPress theme that will launch with WordPress 5.9. https://github.com/WordPress/twentytwentytwo ブロックテーマへの移行でクローズアップされるのはもちろん、Full Site Editing（FSE / フルサイト編集）です。しかし、Twenty Twenty-Twoを眺めていくと、

WordPress 5.xに対応したテーマ作成の本をオリジナルの電子書籍として出すことにしたところまでは、昨日の著者NOTE「『グーテンベルク時代のWordPressノート テーマの作り方（入門編）』について」でお話しました。 次に問題となるのが、「どこでどんな形で出すのか」ですが、これに関しては迷うことなくAmazon Kindleを選択しました。というのも、現状では余程のことがない限り、「Kindleのサービスそのものが途絶えることはありえない」と思えるからです。 ただ、Kindleを選択した場合に最大の問題となるのが、「KindleはPaperwhiteのようなE Inkスクリーンの端末でしか読めない」と思っている方が意外と多いということです。 実際のところは、AndroidとiOSはもちろん、Windows PCでも、macOSでも、問題なく読むことができます。「Kindleはどん

WordPress 5.8 では FSE（Full Site Editing / フルサイト編集）関連の機能がいろいろと導入されています。 どの機能を試してみるにも CSS が深くかかわってくるため、改めて、テーマの種類ごとにエディタとフロントに適用されるCSSの構成を確認してみました。 ※確認には WordPress 5.8 RC1 を使っています。 テーマの種類 - ブロックテーマとクラシックテーマ まず、現在のWordPressのテーマは、 FSEに対応した「ブロックテーマ」と、FSEに対応していない「クラシックテーマ」 に分類されます。 クラシックテーマは PHP で作成された従来型のテーマのことで、『WordPressレッスンブック 5.x対応版』や『グーテンベルク時代のWordPressノート』で作っているテーマもこちらになります。 そして、クラシックテーマであっても、Word

『HTML5&CSS3デザイン 現場の新標準ガイド【第2版】』はHTMLとCSSをリファレンス的にまとめた書籍です。第１版を出してから３年が経ち、その間の変化を反映させて最新の状態に改定しました。 Web制作の変化 ３年の間にWeb制作の現場は大きく変化しました。 第１版を出した時点ではマイナーな存在だった「フレキシブルボックス（Flexbox）」や「CSSグリッド（CSS Grid）」も、今ではWebデザインのコントロールに欠かせないメジャーな機能となっています。フィルタやブレンドといった便利な機能も幅広く活用されるようになってきました。 あれもこれもフロート（float）でコントロールしていたことを考えると、たった３年の間にWeb制作の効率が大幅に向上したと言えるでしょう。 第２版には、 フレキシブルボックスの「ギャップ（gap）」CSSグリッドの「サブグリッド（subgrid）」スク

Gatsbyを調べ始めた頃にたどり着いた、こちらの記事。 Reactベース静的サイトジェネレータGatsbyの真の力をお見せします https://qiita.com/uehaj/items/1b7f0a86596353587466 当時はさっぱりでしたが、Gatsbyを色々と使うようになって、随分と理解できるようになってきました。 そして、この記事の中で当時から引っかかっていたのが、 …「クエリの結果」のみをJSONとして合わせてデプロイし、ブラウザ内ではGraphQL DBクエリ結果取得の代りにJSON値を使うことで… というお話。 ん？ もしかして…ということで、テストでこんなコンポーネントを用意してみました（書籍のサンプルに合わせています）。 import React from "react" import { graphql, useStaticQuery, Link } fro

WordPress 5.5 以降のロードマップも見え始め、年内には Full Site Editing (FSE) ＆ Block-based Themes が出てくるようで、非常に楽しみです。 また、Block-based Themesを見ているとどうしても SSG（静的サイトジェネレーター）っぽく見えるもので、WordPress が Jamstack を気にしないわけないよな… などと妄想してみたりしています。 一方、静的サイトジェネレーター周辺では、打倒WordPressなんて話をよく見かけます。気持ちはよくわかります。最近のWordPressは色々と大変ですし…。 また、コストをかけずにサイトを公開できる時代になって、WordPress のためのサーバーコストが気になり始めたという話もよく見かけるようになりました。 このあたりを考えれば、WordPress からの避難先として、静的

意外なところに手を出してきたと思われるかもしれませんが、きっかけは WordPress ＆ Gutenberg なんです。 2015年の Automattic社 Matt Mullenweg 氏の "Learn JavaScript, Deeply" という言葉。そして、バージョン5.4までたどり着いた現在の WordPress と、見え始めた Block Based Theme。 世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScript（React）なわけです。 すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。 なので、自分たちも JavaScript（React）をもっと身近なものにしておかなければと動き始めました。 入門者の通常ルート通り、

3月末にリリース予定のWordPress 5.4に関する情報とともに、Block Based Theme（フルサイトエディタ）の話もよく見かけるようになってきたので、ちょっと試してみました。 Block Based Themeはこれまでのテーマとは異なり、サイト全体をGutenbergのブロックを使って構築してしまおうという考えのもと、新しいテーマの構造として検討が始まったものです。 テーマの構造や作り方に関しては、 以下のページが参考になります。 https://developer.wordpress.org/block-editor/developers/themes/block-based-themes/ 簡単にまとめると、 style.css これまでと変わることはありません。functions.php 基本的には、これまで通りです。今回は、Gutenbergの機能設定とstyle

『グーテンベルク時代のWordPressノート テーマの作り方 2（ランディングページ＆ワンカラムサイト編）』ではJavaScriptファイルを用意してブロックスタイルを追加する方法を紹介しましたが、最新のGutenberg（バージョン6.2）ではPHPだけでも簡単に追加できるようになりました。 たとえば、functions.phpに次のように register_block_style() の設定を追加すると、見出しブロックに「デザイン01」と「デザイン02」の２つのブロックスタイルが追加され、見出しのデザインを切り替えることができるようになります。 register_block_style( 'core/heading', array( 'name' => 'design01', 'label' => 'デザイン01', 'inline_style' => '.is-style-desi

「CSS3 スタンダード・デザインガイド【改訂第2版】」 を上梓しました。2013年4月段階での情報に基づき、CSS3 および CSS4の最新機能や各ブラウザの対応状況をまとめていますので、参考にしてください。 → 改訂第2版での主な追加・更新内容 なお、ブラウザでの対応状況に大きな変化があった場合には、本ページで対応状況一覧を更新していきます。 旧版「CSS3 スタンダード・デザインガイド」の巻末に掲載したCSS3のプロパティ＆ブラウザ対応一覧です。2012年10月1日に更新した古い情報となっていますので、最新情報については「CSS3 スタンダード・デザインガイド【改訂第2版】」を参照してください。 CSS3 CSS3で新しく追加されたプロパティ。 CSS3 CSS2.1からのプロパティで、CSS3で機能が追加されたもの。 拡張 ブラウザが拡張したプロパティでW3Cの規格に未掲載のもの。

もともとは「XHTML/HTML+CSSスーパーレシピブック」をHTML5&CSS3な現状にあわせてリニューアルすることを目指してスタートした本だったのですが、単純にソースをHTML5&CSS3化するだけではなく、今どきにマッチした形にするためにレシピの内容を吟味していたところ… 「Webページを構成するパーツって昔に比べてシンプルになってるよ？」 「画像とかほとんど使わなくなってるし。」 「パーツの基本って１イメージ１テキストでいいんじゃないか？」 といったところから始まったわけですが、 「段組とかって自分でやらなきゃダメなの？」 「レスポンシブデザインも当然必要でしょ」 「なら、CSSフレームワークを使った方が便利なんじゃ？」 「パーツも相互に干渉しないようなものにしないとダメじゃない？」 …などと展開していきまして、当初目指していたものから大きく変化してしまい…結果的に進行が大幅に遅

昨年の本あたりから、同じ本に初級者向きだというレビューと中～上級者向きだというレビューをいただくケースが増えてきました。 これは、狙い通りではありますし、エビスコムの本をご贔屓にしていただいている方にはご理解いただけると思います。しかし、はじめて手にとっていただく方には「？」以外の何ものでもありませんので、このあたりでエビスコムの本のロードマップを公開したいと思います。 HTML5 スタンダード・デザインガイド CSS3 スタンダード・デザインガイド【改訂第2版】 この2冊のメインテーマは、「これまで第一線でバリバリと仕事をしてきたものの、忙しすぎてHTML5やCSS3といった最近のトレンドにちょっと乗れてないな…なんて方が、これまでに積み上げたスキルを生かしてこれからも第一線でがんばってもらうためには何が必要か？」というところから始まっています。 そのため、現状＆ちょっと未来までの把握と

「CSS3 スタンダード・デザインガイド」の補足解説です。掲載・未掲載プロパティに関する最新情報を簡単にまとめていきます。ブラウザの対応状況などについては「CSS3プロパティ＆ブラウザ対応一覧」を参照してください。 IE10が対応したcss3（float: positioned） IE10では最終的にflow:wrapは廃止され、「Exclusion（エクスクルージョン／除外）」がサポートされています。 float: 配置 配置 … positioned CSS3 IE10（Platform Preview 2）が対応した「Positioned Floats」の機能を利用すると、positionプロパティで表示位置を指定した要素に対して、テキストや画像といったインライン要素が回り込むように指定することができます。回り込みを指定するにはfloatプロパティを適用し、値を「positioned