【GPT4】色覚異常での見え方を比較できるWEBアプリを作った【プロンプト有り】
この記事は2023/04/24 22:46に公開された記事をnoteに移動させたものです。
ここからアクセス可能
誰にでも優しい色使いって難しいですよね
あまり色を捉えるのが得意でない方に向けて不親切なものを作らないように画像に対してそのようなフィルタ加工ができるといいと思って
最近ハマってるGPT4でそのようなwebサイトを作成し、オープンソースでみなさんが使えるようにしました。
この記事では、下の方でGPT-4君との会話も紹介しますので、ぜひ参考にしてみてくださいね！(ちょくちょく読みやすいように編集はしてます。)
成果物
冒頭のリンクを踏んでもらうと画像の様なページに飛びます。
静的なサイトなので動作も早いハズ
GitHubソースはここから
いろんな画像で検証
うまく出来ているのだろうか...... 丸投げしたので。
感想
なんだかGPT4でこんなことが出来てヤバい！！！！！みたいなのはよく見ますが
こういうの作ったよ！みたいなのって埋もれちゃってますよね。
使ってなんぼなのでこの記事が参考になれば幸いです。
ほぼ日本語の入力だけでコレが作れるのはヤバいゼ
以下、GPT君とのやり取り
ハシビロ工業: web上でjpeg画像の色味変えるとかって可能？
-----------------------------------------------------------------------------------
assistant(GPT4): はい、Web上でJPEG画像の色味を変更することは可能です。
いくつかのオンラインツールやWebアプリが画像の色味を変更する機能を提供しています。
ここでは、いくつかの代表的な方法を紹介します。
1. オンライン画像編集ツール: たとえば、Canva（https://www.canva.com/）や
Pixlr（https://pixlr.com/）などのオンライン画像編集ツールを使用して、
画像の色味を簡単に調整できます。
これらのツールは、ユーザーがブラウザ上で画像を編集できるように設計されています。
2. CSSフィルター: Webページに画像が表示されている場合、CSS（Cascading Style Sheets）を使って
画像の色味を変更できます。CSSフィルター（`filter`プロパティ）を使うことで、
画像にさまざまな効果を適用できます。例えば、以下のコードでは、画像の色相が変更されています。
```css
img {
filter: hue-rotate(90deg);
}
```
ただし、CSSフィルターを使用すると、ページ上で表示される画像の見た目だけが変わるため、
ファイル自体の色味は変更されません。
3. JavaScriptライブラリ: さまざまなJavaScriptライブラリが、
ブラウザ上で画像の色味を変更する機能を提供しています。
代表的なライブラリには、CamanJS（http://camanjs.com/）や
fabric.js（http://fabricjs.com/）があります。
これらのライブラリを使用すると、画像に対してさまざまなエフェクトや変更を適用できます。
いずれの方法を選択しても、Web上でJPEG画像の色味を変更することは十分に可能です。
自分のニーズに応じて、最適なツールや手法を選択してください。
-----------------------------------------------------------------------------------
ハシビロ工業: CSSやjsを使ってD&Dされた画像を色覚異常の人がどういうふうに見えるかを比較するような
webページ記述できますか？
-----------------------------------------------------------------------------------
assistant(GPT4): はい、CSSやJavaScriptを使って、D&D（ドラッグアンドドロップ）された画像が
色覚異常の人にどのように見えるかを比較するWebページを作成することができます。
以下に、簡単な例を示します。
まず、HTMLファイルを作成し、必要な要素を追加します。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Blindness Simulator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>色覚異常シミュレータ</h1>
<p>画像を以下のボックスにドラッグアンドドロップしてください。</p>
<div id="dropzone" class="dropzone"></div>
<div class="image-container">
<h2>元の画像</h2>
<img id="original-image" src="#" alt="Dropped image">
</div>
<div class="image-container">
<h2>色覚異常フィルター適用後の画像</h2>
<img id="colorblind-image" src="#" alt="Filtered image">
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
```
次に、CSSファイル（`styles.css`）を作成し、スタイルを適用します。
```css
body {
font-family: sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.dropzone {
border: 2px dashed #ccc;
width: 100%;
height: 200px;
margin-bottom: 30px;
}
.image-container {
display: inline-block;
margin: 0 15px;
}
img {
max-width: 100%;
height: auto;
}
```
最後に、JavaScriptファイル（`scripts.js`）を作成し、イベントリスナーと色覚異常フィルターの
適用を追加します。
```javascript
document.addEventListener("DOMContentLoaded", function() {
const dropzone = document.getElementById("dropzone");
const originalImage = document.getElementById("original-image");
const colorblindImage = document.getElementById("colorblind-image");
dropzone.addEventListener("dragover", function(event) {
event.preventDefault();
});
dropzone.addEventListener("drop", function(event) {
event.preventDefault();
const file = event.dataTransfer.files[0];
const reader = new FileReader();
reader.onload = function(event) {
originalImage.src = event.target.result;
colorblindImage.src = event.target.result;
// 色覚異常フィルターを適用
colorblindImage.style.filter = "url(#protanopia)";
};
if (file) {
reader.readAsDataURL(file);
}
});
});
```
この例では、色覚異常フィルターとしてCSSフィルターを適用していますが、より正確なシミュレーションを行い
-----------------------------------------------------------------------------------
ハシビロ工業: 画面を4分割し、正常・１色型色覚・２色型色覚・異常３色型色覚 の加工をして
それとどういうファイルをD&Dすればいいか書いて
-----------------------------------------------------------------------------------
assistant(GPT4): 画面を4分割し、正常・1色型色覚・2色型色覚・異常3色型色覚の加工を表示するために、
以下のHTML、CSS、およびJavaScriptのコードを使用して、Webページを作成します。
この例では、ドラッグアンドドロップ（D&D）でアップロードできるファイルは、
JPEGやPNGなどの画像ファイルです。
まず、HTMLファイルを作成し、必要な要素を追加します。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Blindness Simulator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>色覚異常シミュレータ</h1>
<p>画像ファイル（JPEG, PNG）を以下のボックスにドラッグアンドドロップしてください。</p>
<div id="dropzone" class="dropzone"></div>
<div class="row">
<div class="image-container">
<h2>正常</h2>
<img id="original-image" src="#" alt="Dropped image">
</div>
<div class="image-container">
<h2>1色型色覚</h2>
<img id="type1-image" src="#" alt="Type 1 colorblind image">
</div>
</div>
<div class="row">
<div class="image-container">
<h2>2色型色覚</h2>
<img id="type2-image" src="#" alt="Type 2 colorblind image">
</div>
<div class="image-container">
<h2>異常3色型色覚</h2>
<img id="type3-image" src="#" alt="Type 3 colorblind image">
</div>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
```
次に、CSSファイル（`styles.css`）を作成し、スタイルを適用します。
```css
body {
font-family: sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.dropzone {
border: 2px dashed #ccc;
width: 100%;
height: 200px;
margin-bottom: 30px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.image-container {
flex: 1;
max-width: 45%;
margin: 0 15px 30px;
}
img {
max-width: 100%;
height: auto;
}
```
最後に、JavaScriptファイル（`scripts.js`）を作成し、イベントリスナーと色覚異常フィルターの
適用を追加します。
```javascript
document.addEventListener("DOMContentLoaded", function() {
const dropzone = document.getElementById("dropzone");
-----------------------------------------------------------------------------------
ハシビロ工業: ソースは省略しないでください
-----------------------------------------------------------------------------------
assistant(GPT4): 失礼しました。以下に、ソースコードを完全に示します。
まず、HTMLファイルを作成し、必要な要素を追加します。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Blindness Simulator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>色覚異常シミュレータ</h1>
<p>画像ファイル（JPEG, PNG）を以下のボックスにドラッグアンドドロップしてください。</p>
<div id="dropzone" class="dropzone"></div>
<div class="row">
<div class="image-container">
<h2>正常</h2>
<img id="original-image" src="#" alt="Dropped image">
</div>
<div class="image-container">
<h2>1色型色覚</h2>
<img id="type1-image" src="#" alt="Type 1 colorblind image">
</div>
</div>
<div class="row">
<div class="image-container">
<h2>2色型色覚</h2>
<img id="type2-image" src="#" alt="Type 2 colorblind image">
</div>
<div class="image-container">
<h2>異常3色型色覚</h2>
<img id="type3-image" src="#" alt="Type 3 colorblind image">
</div>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
```
次に、CSSファイル（`styles.css`）を作成し、スタイルを適用します。
```css
body {
font-family: sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.dropzone {
border: 2px dashed #ccc;
width: 100%;
height: 200px;
margin-bottom: 30px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.image-container {
flex: 1;
max-width: 45%;
margin: 0 15px 30px;
}
img {
max-width: 100%;
height: auto;
}
```
最後に、JavaScriptファイル（`scripts.js`）を作成し、
イベントリスナーと色覚異常フィルターの適用を追加します。
```javascript
document.addEventListener("DOMContentLoaded", function() {
const dropzone = document.getElementById("dropzone");
const originalImage = document.getElementById("original-image");
const type1Image = document.getElementById("type1-image");
const type2Image = document.getElementById("type2-image");
const type3Image = document.getElementById("type3-image");
dropzone.addEventListener("dragover", function(event) {
event.preventDefault();
});
dropzone.addEventListener("drop", function(event) {
event.preventDefault();
const file = event.dataTransfer.files[0];
const reader = new
-----------------------------------------------------------------------------------
ハシビロ工業: scripts.jsが途切れています 全て書いて下さい
-----------------------------------------------------------------------------------
assistant(GPT4): 失礼しました。以下に`scripts.js`の全文を示します。
```javascript
document.addEventListener("DOMContentLoaded", function() {
const dropzone = document.getElementById("dropzone");
const originalImage = document.getElementById("original-image");
const type1Image = document.getElementById("type1-image");
const type2Image = document.getElementById("type2-image");
const type3Image = document.getElementById("type3-image");
dropzone.addEventListener("dragover", function(event) {
event.preventDefault();
});
dropzone.addEventListener("drop", function(event) {
event.preventDefault();
const file = event.dataTransfer.files[0];
const reader = new FileReader();
reader.onload = function(event) {
originalImage.src = event.target.result;
// カラーブラインドフィルタを適用
// これらのフィルターは、実際の色覚異常シミュレーションには不十分ですが、デモンストレーション目的で使用されています。
// 実際のプロジェクトでは、より正確な色覚異常シミュレーションのためのJavaScriptライブラリを使用してください。
type1Image.src = event.target.result;
type1Image.style.filter = "sepia(100%)";
type2Image.src = event.target.result;
type2Image.style.filter = "saturate(50%)";
type3Image.src = event.target.result;
type3Image.style.filter = "hue-rotate(180deg)";
};
if (file) {
reader.readAsDataURL(file);
}
});
});
```
このコードでは、ドラッグアンドドロップされた画像ファイル（JPEG、PNG）を読み込み、
4つの画像にそれぞれ異なるカラーブラインドフィルターを適用しています。
ただし、ここで使用しているフィルターはデモンストレーション目的であり、
実際の色覚異常シミュレーションには不十分です。実際のプロジェクトでは、
より正確な色覚異常シミュレーションのためのJavaScriptライブラリ
（たとえば、Coblis（https://www.color-blindness.com/coblis-color-blindness-simulator/）
やColorOracle（https://colororacle.org/））を使用してください。
-----------------------------------------------------------------------------------
ハシビロ工業: リンクを挿入できるヘッダを追加して
-----------------------------------------------------------------------------------
assistant(GPT4): HTMLファイルにヘッダーを追加し、リンクを挿入するには、以下のようにコードを変更します。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Blindness Simulator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="https://example.com">リンク1</a></li>
<li><a href="https://example.org">リンク2</a></li>
<li><a href="https://example.net">リンク3</a></li>
</ul>
</nav>
</header>
<div class="container">
<!-- 以前のコンテンツはここに続く -->
</div>
<script src="scripts.js"></script>
</body>
</html>
```
この例では、`<header>`要素を追加し、その中にナビゲーション用の`<nav>`要素を入れています。
`<nav>`要素の中には、リンクが含まれた`<ul>`（順序なしリスト）を配置しています。
また、ヘッダーのスタイルを整えるために、`styles.css`に以下のCSSを追加します。
```css
header {
background-color: #333;
padding: 10px;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover {
color: #ccc;
}
```
これにより、ヘッダーにリンクが追加され、適切なスタイルが適用されます。
リンク先は、実際のウェブサイトのURLに置き換えてください。
-----------------------------------------------------------------------------------
ハシビロ工業: D&Dだけでなくファイルを選択して投稿もできるようにして下さい
-----------------------------------------------------------------------------------
assistant(GPT4): ファイル選択機能を追加するには、HTMLファイルに`<input type="file">`要素を追加し、
JavaScriptコードでイベントリスナーを設定します。
以下のようにHTMLファイルを変更してください。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Blindness Simulator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- ヘッダーは省略 -->
<div class="container">
<h1>色覚異常シミュレータ</h1>
<p>画像ファイル（JPEG, PNG）を以下のボックスにドラッグアンドドロップするか、ファイルを選択してください。</p>
<input type="file" id="file-input" accept="image/jpeg, image/png">
<div id="dropzone" class="dropzone"></div>
<!-- 以前のコンテンツはここに続く -->
</div>
<script src="scripts.js"></script>
</body>
</html>
```
次に、`scripts.js`ファイルでファイル選択イベントを処理するために、以下の変更を加えます。
```javascript
document.addEventListener("DOMContentLoaded", function() {
const dropzone = document.getElementById("dropzone");
const fileInput = document.getElementById("file-input");
// 以前の要素の定義はここに続く
// ファイル選択イベントリスナーを追加
fileInput.addEventListener("change", function(event) {
handleFile(event.target.files[0]);
});
// 以前のイベントリスナーはここに続く
// ファイル処理を関数に抽出
function handleFile(file) {
const reader = new FileReader();
reader.onload = function(event) {
// 以前の画像処理コードはここに続く
};
if (file) {
reader.readAsDataURL(file);
}
}
// ドロップイベントのコードを変更
dropzone.addEventListener("drop", function(event) {
event.preventDefault();
handleFile(event.dataTransfer.files[0]);
});
});
```
これで、ドラッグアンドドロップだけでなく、
ファイル選択ダイアログからも画像をアップロードできるようになりました。
ファイル選択ダイアログは、`<input type="file">`要素をクリックすることで表示されます。
-----------------------------------------------------------------------------------
ハシビロ工業: scripts.jsは省略せずに全部書いて下さい
-----------------------------------------------------------------------------------
assistant(GPT4): 失礼しました。以下に、`scripts.js`の全文を示します。
```javascript
document.addEventListener("DOMContentLoaded", function() {
const dropzone = document.getElementById("dropzone");
const fileInput = document.getElementById("file-input");
const originalImage = document.getElementById("original-image");
const type1Image = document.getElementById("type1-image");
const type2Image = document.getElementById("type2-image");
const type3Image = document.getElementById("type3-image");
dropzone.addEventListener("dragover", function(event) {
event.preventDefault();
});
fileInput.addEventListener("change", function(event) {
handleFile(event.target.files[0]);
});
dropzone.addEventListener("drop", function(event) {
event.preventDefault();
handleFile(event.dataTransfer.files[0]);
});
function handleFile(file) {
const reader = new FileReader();
reader.onload = function(event) {
originalImage.src = event.target.result;
// カラーブラインドフィルタを適用
// これらのフィルターは、実際の色覚異常シミュレーションには不十分ですが、デモンストレーション目的で使用されています。
// 実際のプロジェクトでは、より正確な色覚異常シミュレーションのためのJavaScriptライブラリを使用してください。
type1Image.src = event.target.result;
type1Image.style.filter = "sepia(100%)";
type2Image.src = event.target.result;
type2Image.style.filter = "saturate(50%)";
type3Image.src = event.target.result;
type3Image.style.filter = "hue-rotate(180deg)";
};
if (file) {
reader.readAsDataURL(file);
}
}
});
```
このバージョンの`scripts.js`は、ファイル選択とドラッグアンドドロップの両方をサポートしています。
ユーザーは、ファイル選択ダイアログから画像をアップロードするか、
画像をドラッグアンドドロップしてアップロードできます。
-----------------------------------------------------------------------------------
ハシビロ工業: ファイルを選択 の横の文字(画像の名前表示)の表示がおかしいので消してしまって下さい
-----------------------------------------------------------------------------------
assistant(GPT4): `<input type="file">`要素のファイル名表示を非表示にするには、
HTMLファイルの変更とCSSの追加が必要です。
まず、HTMLファイルにラベル要素を追加し、ファイル選択要素をラベル内に移動します。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Blindness Simulator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- ヘッダーは省略 -->
<div class="container">
<h1>色覚異常シミュレータ</h1>
<p>画像ファイル（JPEG, PNG）を以下のボックスにドラッグアンドドロップするか、ファイルを選択してください。</p>
<label id="file-label">
ファイルを選択
<input type="file" id="file-input" accept="image/jpeg, image/png" hidden>
</label>
<div id="dropzone" class="dropzone"></div>
<!-- 以前のコンテンツはここに続く -->
</div>
<script src="scripts.js"></script>
</body>
</html>
```
そして、`styles.css`に以下のスタイルを追加して、ラベルのスタイルを整えます。
```css
#file-label {
display: inline-block;
background-color: #333;
color: white;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
#file-label:hover {
background-color: #444;
}
```
この変更により、「ファイルを選択」ボタンのみが表示され、ファイル名が表示されなくなります。
ファイル選択ダイアログは引き続き機能し、画像をアップロードすることができます。
-----------------------------------------------------------------------------------
ハシビロ工業: styles.cssは省略せずに全て書いて下さい
-----------------------------------------------------------------------------------
assistant(GPT4): すみません、以下に`styles.css`の全文を示します。
```css
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
padding: 10px;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover {
color: #ccc;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.dropzone {
width: 100%;
height: 200px;
border: 2px dashed #ccc;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.dropzone:hover {
border-color: #999;
}
.image-container {
display: inline-block;
margin: 0 10px;
}
#file-label {
display: inline-block;
background-color: #333;
color: white;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
#file-label:hover {
background-color: #444;
}
```
この`styles.css`ファイルには、以前に提供したスタイルのコードが含まれており、
ヘッダー、ドロップゾーン、画像コンテナ、およびファイル選択ボタンのスタイルが適用されています。
このCSSファイルを使用することで、Webページは整ったデザインになります。
-----------------------------------------------------------------------------------
ハシビロ工業: 画像のサイズとかがおかしいです。以前のCSSを参考に修正して下さい
header {
background-color: #333;
padding: 10px;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover {
color: #ccc;
}
body {
font-family: sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.dropzone {
border: 2px dashed #ccc;
width: 100%;
height: 200px;
margin-bottom: 30px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.image-container {
flex: 1;
max-width: 45%;
margin: 0 15px 30px;
}
img {
max-width: 100%;
height: auto;
}
-----------------------------------------------------------------------------------
assistant(GPT4): 失礼しました。画像のサイズが適切に表示されるように、
以下のように`styles.css`を修正しました。
```css
header {
background-color: #333;
padding: 10px;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover {
color: #ccc;
}
body {
font-family: sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.dropzone {
border: 2px dashed #ccc;
width: 100%;
height: 200px;
margin-bottom: 30px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.image-container {
flex: 1;
max-width: 45%;
margin: 0 15px 30px;
}
img {
max-width: 100%;
height: auto;
}
#file-label {
display: inline-block;
background-color: #333;
color: white;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
#file-label:hover {
background-color: #444;
}
```
これで、画像のサイズが適切に表示されるようになります。
画像はそのコンテナに合わせて自動的にサイズが調整され、正しくレイアウトされます。
(記事の終わり)
この記事が気に入ったらサポートをしてみませんか？