Computational Themingをどこでも。ここでも。

プログラミング

Computational Themingで遊びたいWebサイト向けに、便利グッズを以前作成したのでご紹介します。

⇧⇧⇧ 記事タイトルのボタンも押してみて❗️⇧⇧⇧

github.com

Computational Themingとは

下記サイトにて詳しく説明されています。（丸投げ）

components.ai

意訳

文字と背景色の組み合わせ（可能性空間/Possibility Space）は非常に広大ですが、コンピュータが生成する色の組み合わせ（生成空間/Generative Space）はアルゴリズムや定数によって限定することができます。

Computational Themingとは、生成空間/Generative Spaceから抽出した、美的に満足のいくデザイン（視認性を保持した色の組み合わせ）の組み合わせからなるテーマのことを意味します。

random-pair-colors

便利グッズ1つ目は、視認性を考慮したランダムな文字と背景色の組み合わせのペアを取得できるライブラリです。

視認性とポップさを天秤にかけて、文字と背景色のコントラスト値を渡してあげよう！

文字や背景色のどちらかを固定することもできます。もしくは、どちらも固定してしまうことも...

import { generateRandomPairColor } from '@ergofriend/random-pair-colors'

const theme = generateRandomPairColor({ backgroundColor: '#3f2697', threshold: 70 })
console.log(theme.textColor, theme.backgroundColor) // #82fce9, #3f2697

focus-pair-reader

便利グッズ2つ目は、上記のライブラリを使用したWeb Componentsのカスタム要素(custom elements)です。

任意の要素を<focus-pair-reader> というタグで囲うと、上記ライブラリrandom-pair-colorsの結果を文字と背景に反映してくれます。

デモサイトでも遊べるのでぜひ触ってみてください。

ergofriend.github.io

使い方

導入は簡単です。ぜひ、あなたのサイトでもお試しください。

最初に、カスタム要素を有効にします。


<script defer type="module" src="https://unpkg.com/@ergofriend/focus-pair-reader"></script>

あとは、使いたい要素を囲むだけです。

<focus-pair-reader>
  <p>こんにちは。</p>
</focus-pair-reader>

付録

ブログに刺激が欲しい方へ

この記事のタイトルでも使っている、はてなブログのタイトルで遊ぶためのコードを紹介します。

なんと、5行目にfocusPairReader.setAttribute("no-control", "true")を追加するとボタンも消せるよ！

The Article title For Hatena Blog · GitHub 

<script>
const focusPairReader = document.createElement("focus-pair-reader")
const titleColor = "#FFFFFF"
focusPairReader.setAttribute("text-color", titleColor)
focusPairReader.style.padding =  "0.66em 0"

const title = document.querySelector("h1.entry-title")
title.style.padding = "0 70px  0 0"
title.firstElementChild.style.color = titleColor

const content = document.createElement("div")
content.style.padding = ".01em .67em"
content.style.wordBreak = "auto-phrase"
content.appendChild(title.cloneNode(true))

const description = document.createElement("p")
description.style.padding = ".67em 0"
description.textContent = "右のボタンをクリックすることで色を変えることができます。"
content.appendChild(description)

focusPairReader.appendChild(content)
title.before(focusPairReader)
title.remove(); 
</script>

カスタム要素を有効にするのも忘れずに〜