{"componentChunkName":"component---src-templates-post-js","path":"/post/misskey_backupandrestore/","result":{"data":{"ghostPost":{"childHtmlRehype":{"html":"
Docker-composeで構築したmisskeyサーバーをCloudflareR2にバックアップ＆リストアする
\"\"Zennちん
\"\"

これの焼き増し

\n

結論

\n

バックアップ（シェルスクリプト）

\n
#!/bin/bash\n\nSERVICE_NAME=\"db\"\n\nPOSTGRES_DB=\"misskey\"\nPOSTGRES_PASSWORD=\"postgrespassword\"\nPOSTGRES_USER=\"postgresuser\"\n\nBUCKET_NAME=\"bucketname\"\nAWS_USER=\"awsuser\"\nYOUR_R2_ID=\"r2id\"\n\nDB_DUMP_FILE=`date \"+%Y%m%d\"`-misskeybk\n\ndocker-compose exec $SERVICE_NAME pg_dumpall -U $POSTGRES_USER > ../backup/$DB_DUMP_FILE\n\ngzip ../backup/$DB_DUMP_FILE\n\naws s3 mv ../backup/${DB_DUMP_FILE}.gz s3://${BUCKET_NAME} --profile $AWS_USER --endpoint-url https://${YOUR_R2_ID}.r2.cloudflarestorage.com\n
\n

リストア
\n{DUMP_FILE}はバックアップしたファイル名　他の変数はバックアップのものを読み替えること

\n
BUCKET_NAME=\"bucketname\"\n\naws s3 cp s3://{BUCKET_NAME}/{DUMP_FILE}.gz ../backup --profile {AWS_USER} --endpoint-url https://{YOUR_R2_ID}.r2.cloudflarestorage.com\n\n# {DUMP_FILE}.gzのあるディレクトリで\ngunzip {DUMP_FILE}.gz\n\n# misskey関係のdocker-compose.ymlのあるディレクトリで\ndocker-compose up -d db\n\ndocker-compose exec -T db psql -U $POSTGRES_USER -d $POSTGRES_DB -c 'DROP DATABASE ${POSTGRES_DB};'\ndocker-compose exec -T db psql -U $POSTGRES_USER -d $POSTGRES_DB -c 'CREATE DATABASE ${POSTGRES_DB};'\n\n# {container_id}を調べる\ndocker ps\n\ndocker cp ../backup/{DUMP_FILE}.db {container_id}:/db.dump\ndocker-compose exec -T db psql -U $POSTGRES_USER -d $POSTGRES_DB -f /db.dump\n\nrm ../backup/*\n
\n

説明

\n

バックアップ

\n

前提としてaws-cliをインストールしていること　あと適当なtempディレクトリがあること（ここではひとつ上の階層にbackupを置いている）
\ndocker-composeで直接postgresにアクセスしてpf_dumpallでデータベースをダンプしてgzipで圧縮してaws-cliでCloudflareR2に作成したbucketにアップロードしています
\nなのでSERVICE_NAMEからPOSTGRES_USERはそれぞれdocker-compose.ymlやdocker.envのものを使うこと
\nDB_DUMP_FILEは一日毎にバックアップを取ることを想定して日付で命名
\nあとはcronなどで定期的に実行するだけ！

\n

リストア

\n

環境で若干操作が異なると思う
\n一応動作確認済み🤗

\n
VPSにDockerでMisskeyを立てていろいろあった話 - GirakBlog
2022年6月3日 2022年6月3日 こんにちはきろたです 突然ですが先日 ぎらくMisskey支部 を立てました。もともと立ててたのですがいろいろあって廃墟になってたのをリメイクしたものです。久しぶりに立てたせいでいろいろ忘れてて時間を溶かしたので備忘録といつの日かのために書きます。
\"\"GirakBlog白月 きろた
\"\"

上記のような環境でセットアップしたとする

\n

まずCloudflareR2からdumpファイルをダウンロードしてgunzipで解凍、docker-compose up -d dbでmisskey以外のコンテナを起動してからPostgresのdbを一度削除して再構成する
\ndocker内にダウンロードしたダンプファイルを導入してpsqlでリストア

\n

ちなみにdocker-composeのときにmisskeyも起動すると接続中とかで怒られるっぽい？
\nあとdbを削除して再構成しないと色々重複してリストアがうまくいかない

\n

参考文献

\n
Postgresqlのデータをバックアップする(docker compose)
\"\"Misskey鯖缶Wiki
Docker Composeで構築したMisskeyサーバーのデータベースをバックアップ＆リストアする
\"\"Zennおかゆりぞっと
\"\"
VPSにDockerでMisskeyを立てていろいろあった話 - GirakBlog
2022年6月3日 2022年6月3日 こんにちはきろたです 突然ですが先日 ぎらくMisskey支部 を立てました。もともと立ててたのですがいろいろあって廃墟になってたのをリメイクしたものです。久しぶりに立てたせいでいろいろ忘れてて時間を溶かしたので備忘録といつの日かのために書きます。
\"\"GirakBlog白月 きろた
\"\"
【Windows/Mac/Linux（Ubuntu）】AWS CLIインストール方法 - Qiita
AWS CLIインストール方法【Windows】インストーラをダウンロードするインストーラAWSCLIV2.msi をダブルクリックして起動Next を押下するI accept the t…
\"\"Qiitaryome
\"\"
【Windows10】AWS CLIを導入してS3のファイルをダウンロードする。
この記事ではWindows10にてAWS コマンドラインインターフェイス (AWS CLI)をインストールし環境変数やプロファイルを設定した後、実際にS3からファイルをダウンロードする手順を紹介します。記事の流れについては目次を参照していただければと思います。
\"\"DENET 技術ブログchiyoda
\"\"
バックアップとリストア
","tableOfContents":[{"id":"%E7%B5%90%E8%AB%96","heading":"結論"},{"id":"%E8%AA%AC%E6%98%8E","heading":"説明","items":[{"id":"%E3%83%90%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97","heading":"バックアップ"},{"id":"%E3%83%AA%E3%82%B9%E3%83%88%E3%82%A2","heading":"リストア"}]},{"id":"%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE","heading":"参考文献"}]},"tags":[{"accent_color":null,"name":"技術","slug":"tech","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"accent_color":"#9EC23F","name":"misskey","slug":"misskey","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"accent_color":"#116796","name":"PostgreSQL","slug":"postgresql","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"accent_color":"#F2801F","name":"Cloudflare","slug":"cloudflare","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"accent_color":"#0196E4","name":"Docker","slug":"docker","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"primary_author":{"location":"北海道","name":"ssks","slug":"ssks","bio":"平素よりお世話になっております","profile_image":"https://ghostmedia.ssks-ss.com/content/images/2023/12/----------2023-11-20-004315-1.jpg","twitter":"@Sn50Tin","facebook":null,"website":"https://www.pixiv.net/users/25391430,https://www.nicovideo.jp/user/31837529"},"feature_image_caption":null,"id":"Ghost__Post__6586d0c77718c600015a1052","title":"Docker-composeで構築したmisskeyサーバーをCloudflareR2にバックアップ＆リストアする","slug":"misskey_backupandrestore","featured":false,"feature_image":"https://res-3.cloudinary.com/ddrr1fpam/image/upload/q_auto/v1/blog-images/----------2023-12-21-174647.jpg","excerpt":"Docker-composeで構築したmisskeyサーバーをCloudflareR2にバックアップ＆リストアするZennちん\n\nこれの焼き増し\n\n\n\n結論\n\n\nバックアップ（シェルスクリプト）\n\n\n#!/bin/bash\n\nSERVICE_NAME=\"db\"\n\nPOSTGRES_DB=\"misskey\"\nPOSTGRES_PASSWORD=\"postgrespassword\"\nPOSTGRES_USER=\"postgresuser\"\n\nBUCKET_NAME=\"bucketname\"\nAWS_USER=\"awsuser\"\nYOUR_R2_ID=\"r2id\"\n\nDB_DUMP_FILE=`date \"+%Y%m%d\"`-misskeybk\n\ndocker-compose exec $SERVICE_NAME pg_dumpall -U $POSTGRES_USER > ../backup/$DB_DUMP_FILE\n\ngzip ../backup/$DB_DUMP_FILE\n\naws s3 mv ../backup/${DB_DUMP_FILE}.gz s3://${BUCKET_NA","custom_excerpt":null,"visibility":"public","created_at_pretty":"21 December, 2023","published_at_pretty":"21 December, 2023","updated_at_pretty":"24 December, 2023","created_at":"2023-12-21T17:45:55.000+09:00","published_at":"2023-12-21T17:53:38.000+09:00","updated_at":"2023-12-24T23:37:23.000+09:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"ssks","slug":"ssks","bio":"平素よりお世話になっております","profile_image":"https://ghostmedia.ssks-ss.com/content/images/2023/12/----------2023-11-20-004315-1.jpg","twitter":"@Sn50Tin","facebook":null,"website":"https://www.pixiv.net/users/25391430,https://www.nicovideo.jp/user/31837529"}],"primary_tag":{"name":"技術","slug":"tech","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"plaintext":"Docker-composeで構築したmisskeyサーバーをCloudflareR2にバックアップ＆リストアするZennちん\n\nこれの焼き増し\n\n\n\n結論\n\n\nバックアップ（シェルスクリプト）\n\n\n#!/bin/bash\n\nSERVICE_NAME=\"db\"\n\nPOSTGRES_DB=\"misskey\"\nPOSTGRES_PASSWORD=\"postgrespassword\"\nPOSTGRES_USER=\"postgresuser\"\n\nBUCKET_NAME=\"bucketname\"\nAWS_USER=\"awsuser\"\nYOUR_R2_ID=\"r2id\"\n\nDB_DUMP_FILE=`date \"+%Y%m%d\"`-misskeybk\n\ndocker-compose exec $SERVICE_NAME pg_dumpall -U $POSTGRES_USER > ../backup/$DB_DUMP_FILE\n\ngzip ../backup/$DB_DUMP_FILE\n\naws s3 mv ../backup/${DB_DUMP_FILE}.gz s3://${BUCKET_NAME} --profile $AWS_USER --endpoint-url https://${YOUR_R2_ID}.r2.cloudflarestorage.com\n\n\n\nリストア\n\n{DUMP_FILE}はバックアップしたファイル名　他の変数はバックアップのものを読み替えること\n\n\nBUCKET_NAME=\"bucketname\"\n\naws s3 cp s3://{BUCKET_NAME}/{DUMP_FILE}.gz ../backup --profile {AWS_USER} --endpoint-url https://{YOUR_R2_ID}.r2.cloudflarestorage.com\n\n# {DUMP_FILE}.gzのあるディレクトリで\ngunzip {DUMP_FILE}.gz\n\n# misskey関係のdocker-compose.ymlのあるディレクトリで\ndocker-compose up -d db\n\ndocker-compose exec -T db psql -U $POSTGRES_USER -d $POSTGRES_DB -c 'DROP DATABASE ${POSTGRES_DB};'\ndocker-compose exec -T db psql -U $POSTGRES_USER -d $POSTGRES_DB -c 'CREATE DATABASE ${POSTGRES_DB};'\n\n# {container_id}を調べる\ndocker ps\n\ndocker cp ../backup/{DUMP_FILE}.db {container_id}:/db.dump\ndocker-compose exec -T db psql -U $POSTGRES_USER -d $POSTGRES_DB -f /db.dump\n\nrm ../backup/*\n\n\n\n\n説明\n\n\n\nバックアップ\n\n\n前提としてaws-cliをインストールしていること　あと適当なtempディレクトリがあること（ここではひとつ上の階層にbackupを置いている）\n\ndocker-composeで直接postgresにアクセスしてpf_dumpallでデータベースをダンプしてgzipで圧縮してaws-cliでCloudflareR2に作成したbucketにアップロードしています\n\nなのでSERVICE_NAMEからPOSTGRES_USERはそれぞれdocker-compose.ymlやdocker.envのものを使うこと\n\nDB_DUMP_FILEは一日毎にバックアップを取ることを想定して日付で命名\n\nあとはcronなどで定期的に実行するだけ！\n\n\n\nリストア\n\n\n環境で若干操作が異なると思う\n\n一応動作確認済み🤗\n\n\nVPSにDockerでMisskeyを立てていろいろあった話 - GirakBlog2022年6月3日 2022年6月3日 こんにちはきろたです 突然ですが先日 ぎらくMisskey支部 を立てました。もともと立ててたのですがいろいろあって廃墟になってたのをリメイクしたものです。久しぶりに立てたせいでいろいろ忘れてて時間を溶かしたので備忘録といつの日かのために書きます。GirakBlog白月 きろた\n\n上記のような環境でセットアップしたとする\n\n\nまずCloudflareR2からdumpファイルをダウンロードしてgunzipで解凍、docker-compose up -d dbでmisskey以外のコンテナを起動してからPostgresのdbを一度削除して再構成する\n\ndocker内にダウンロードしたダンプファイルを導入してpsqlでリストア\n\n\nちなみにdocker-composeのときにmisskeyも起動すると接続中とかで怒られるっぽい？\n\nあとdbを削除して再構成しないと色々重複してリストアがうまくいかない\n\n\n\n参考文献\n\n\nPostgresqlのデータをバックアップする(docker compose)Misskey鯖缶WikiDocker Composeで構築したMisskeyサーバーのデータベースをバックアップ＆リストアするZennおかゆりぞっとVPSにDockerでMisskeyを立てていろいろあった話 - GirakBlog2022年6月3日 2022年6月3日 こんにちはきろたです 突然ですが先日 ぎらくMisskey支部 を立てました。もともと立ててたのですがいろいろあって廃墟になってたのをリメイクしたものです。久しぶりに立てたせいでいろいろ忘れてて時間を溶かしたので備忘録といつの日かのために書きます。GirakBlog白月 きろた【Windows/Mac/Linux（Ubuntu）】AWS CLIインストール方法 - QiitaAWS CLIインストール方法【Windows】インストーラをダウンロードするインストーラAWSCLIV2.msi をダブルクリックして起動Next を押下するI accept the t…Qiitaryome【Windows10】AWS CLIを導入してS3のファイルをダウンロードする。この記事ではWindows10にてAWS コマンドラインインターフェイス (AWS CLI)をインストールし環境変数やプロファイルを設定した後、実際にS3からファイルをダウンロードする手順を紹介します。記事の流れについては目次を参照していただければと思います。DENET 技術ブログchiyodaバックアップとリストア","html":"
Docker-composeで構築したmisskeyサーバーをCloudflareR2にバックアップ＆リストアする
Zennちん

これの焼き増し

\n

結論

\n

バックアップ（シェルスクリプト）

\n
#!/bin/bash\n\nSERVICE_NAME=\"db\"\n\nPOSTGRES_DB=\"misskey\"\nPOSTGRES_PASSWORD=\"postgrespassword\"\nPOSTGRES_USER=\"postgresuser\"\n\nBUCKET_NAME=\"bucketname\"\nAWS_USER=\"awsuser\"\nYOUR_R2_ID=\"r2id\"\n\nDB_DUMP_FILE=`date \"+%Y%m%d\"`-misskeybk\n\ndocker-compose exec $SERVICE_NAME pg_dumpall -U $POSTGRES_USER > ../backup/$DB_DUMP_FILE\n\ngzip ../backup/$DB_DUMP_FILE\n\naws s3 mv ../backup/${DB_DUMP_FILE}.gz s3://${BUCKET_NAME} --profile $AWS_USER --endpoint-url https://${YOUR_R2_ID}.r2.cloudflarestorage.com\n
\n

リストア
\n{DUMP_FILE}はバックアップしたファイル名　他の変数はバックアップのものを読み替えること

\n
BUCKET_NAME=\"bucketname\"\n\naws s3 cp s3://{BUCKET_NAME}/{DUMP_FILE}.gz ../backup --profile {AWS_USER} --endpoint-url https://{YOUR_R2_ID}.r2.cloudflarestorage.com\n\n# {DUMP_FILE}.gzのあるディレクトリで\ngunzip {DUMP_FILE}.gz\n\n# misskey関係のdocker-compose.ymlのあるディレクトリで\ndocker-compose up -d db\n\ndocker-compose exec -T db psql -U $POSTGRES_USER -d $POSTGRES_DB -c 'DROP DATABASE ${POSTGRES_DB};'\ndocker-compose exec -T db psql -U $POSTGRES_USER -d $POSTGRES_DB -c 'CREATE DATABASE ${POSTGRES_DB};'\n\n# {container_id}を調べる\ndocker ps\n\ndocker cp ../backup/{DUMP_FILE}.db {container_id}:/db.dump\ndocker-compose exec -T db psql -U $POSTGRES_USER -d $POSTGRES_DB -f /db.dump\n\nrm ../backup/*\n
\n

説明

\n

バックアップ

\n

前提としてaws-cliをインストールしていること　あと適当なtempディレクトリがあること（ここではひとつ上の階層にbackupを置いている）
\ndocker-composeで直接postgresにアクセスしてpf_dumpallでデータベースをダンプしてgzipで圧縮してaws-cliでCloudflareR2に作成したbucketにアップロードしています
\nなのでSERVICE_NAMEからPOSTGRES_USERはそれぞれdocker-compose.ymlやdocker.envのものを使うこと
\nDB_DUMP_FILEは一日毎にバックアップを取ることを想定して日付で命名
\nあとはcronなどで定期的に実行するだけ！

\n

リストア

\n

環境で若干操作が異なると思う
\n一応動作確認済み🤗

\n
VPSにDockerでMisskeyを立てていろいろあった話 - GirakBlog
2022年6月3日 2022年6月3日 こんにちはきろたです 突然ですが先日 ぎらくMisskey支部 を立てました。もともと立ててたのですがいろいろあって廃墟になってたのをリメイクしたものです。久しぶりに立てたせいでいろいろ忘れてて時間を溶かしたので備忘録といつの日かのために書きます。
GirakBlog白月 きろた

上記のような環境でセットアップしたとする

\n

まずCloudflareR2からdumpファイルをダウンロードしてgunzipで解凍、docker-compose up -d dbでmisskey以外のコンテナを起動してからPostgresのdbを一度削除して再構成する
\ndocker内にダウンロードしたダンプファイルを導入してpsqlでリストア

\n

ちなみにdocker-composeのときにmisskeyも起動すると接続中とかで怒られるっぽい？
\nあとdbを削除して再構成しないと色々重複してリストアがうまくいかない

\n

参考文献

\n
Postgresqlのデータをバックアップする(docker compose)
Misskey鯖缶Wiki
Docker Composeで構築したMisskeyサーバーのデータベースをバックアップ＆リストアする
Zennおかゆりぞっと
VPSにDockerでMisskeyを立てていろいろあった話 - GirakBlog
2022年6月3日 2022年6月3日 こんにちはきろたです 突然ですが先日 ぎらくMisskey支部 を立てました。もともと立ててたのですがいろいろあって廃墟になってたのをリメイクしたものです。久しぶりに立てたせいでいろいろ忘れてて時間を溶かしたので備忘録といつの日かのために書きます。
GirakBlog白月 きろた
【Windows/Mac/Linux（Ubuntu）】AWS CLIインストール方法 - Qiita
AWS CLIインストール方法【Windows】インストーラをダウンロードするインストーラAWSCLIV2.msi をダブルクリックして起動Next を押下するI accept the t…
Qiitaryome
【Windows10】AWS CLIを導入してS3のファイルをダウンロードする。
この記事ではWindows10にてAWS コマンドラインインターフェイス (AWS CLI)をインストールし環境変数やプロファイルを設定した後、実際にS3からファイルをダウンロードする手順を紹介します。記事の流れについては目次を参照していただければと思います。
DENET 技術ブログchiyoda
バックアップとリストア
","url":"https://ghost.ssks-ss.com/misskey_backupandrestore/","canonical_url":null,"uuid":"4c077094-417a-40d1-8e17-7c45bbbb5694","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"6583fb43ec7fd7067c977c12","reading_time":4},"relatepost":{"edges":[{"node":{"id":"Ghost__Post__692dbf382ba9e10001ff15ad","title":"彩度合成モードはなにを合成しているのか？","slug":"08","featured":false,"feature_image":"https://ghostmedia.ssks-ss.com/content/images/2025/12/----------2025-12-02-022020.jpg","excerpt":"背景\n\n\nClipStudioやphotoshopには彩度合成モードがあるが　公式ガイドやらTipsやらhtmlベタ打ちのサイトを参照しても基本的な説明は\n\n\n\n\n\n下のレイヤーの輝度と色相を維持したまま、上のレイヤーの彩度にします。\n\n\n\nといった文言もしくは説明自体がなく　具体的な計算式が出てこない\n\n\nこの記述から素直に推測できるのはHSL色空間上の輝度　色相　彩度を用いて処理する方法だが\n\n実際に試すと正しくないとわかる\n\n\n\n\n\n基本色\n合成色\n結果色\n\n\n\n\n(0,50,50)\n(0,95,50)\n(0,100,57)\n\n\n(0,50,50)\n(0,80,50)\n(0,91,56)\n\n\n(0,50,50)\n(0,10,50)\n(0,12,42)\n\n\n(0,50,50)\n(0,0,50)\n(0,0,40)\n\n\n(0,50,50)\n(0,25,50)\n(0,28,45)\n\n\n(0,50,50)\n(0,100,50)\n(0,100,57)\n\n\n\n\n\n(H:色相[°], S:彩度[％], L:輝度[％])\n\n\n一方phothoshopについての説明だが　ここにあるようにRGB値の最","custom_excerpt":null,"visibility":"public","created_at_pretty":"01 December, 2025","published_at_pretty":"03 December, 2025","updated_at_pretty":"05 December, 2025","created_at":"2025-12-02T01:15:52.000+09:00","published_at":"2025-12-03T22:44:20.000+09:00","updated_at":"2025-12-05T20:53:40.000+09:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"ssks","slug":"ssks","bio":"平素よりお世話になっております","profile_image":"https://ghostmedia.ssks-ss.com/content/images/2023/12/----------2023-11-20-004315-1.jpg","twitter":"@Sn50Tin","facebook":null,"website":"https://www.pixiv.net/users/25391430,https://www.nicovideo.jp/user/31837529"}],"primary_author":{"name":"ssks","slug":"ssks","bio":"平素よりお世話になっております","profile_image":"https://ghostmedia.ssks-ss.com/content/images/2023/12/----------2023-11-20-004315-1.jpg","twitter":"@Sn50Tin","facebook":null,"website":"https://www.pixiv.net/users/25391430,https://www.nicovideo.jp/user/31837529"},"primary_tag":{"name":"技術","slug":"tech","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"tags":[{"name":"技術","slug":"tech","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"彩度","slug":"cai-du","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"クリスタ","slug":"kurisuta","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"合成モード","slug":"he-cheng-modo","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"plaintext":"背景\n\n\nClipStudioやphotoshopには彩度合成モードがあるが　公式ガイドやらTipsやらhtmlベタ打ちのサイトを参照しても基本的な説明は\n\n\n\n\n\n下のレイヤーの輝度と色相を維持したまま、上のレイヤーの彩度にします。\n\n\n\nといった文言もしくは説明自体がなく　具体的な計算式が出てこない\n\n\nこの記述から素直に推測できるのはHSL色空間上の輝度　色相　彩度を用いて処理する方法だが\n\n実際に試すと正しくないとわかる\n\n\n\n\n\n基本色\n合成色\n結果色\n\n\n\n\n(0,50,50)\n(0,95,50)\n(0,100,57)\n\n\n(0,50,50)\n(0,80,50)\n(0,91,56)\n\n\n(0,50,50)\n(0,10,50)\n(0,12,42)\n\n\n(0,50,50)\n(0,0,50)\n(0,0,40)\n\n\n(0,50,50)\n(0,25,50)\n(0,28,45)\n\n\n(0,50,50)\n(0,100,50)\n(0,100,57)\n\n\n\n\n\n(H:色相[°], S:彩度[％], L:輝度[％])\n\n\n一方phothoshopについての説明だが　ここにあるようにRGB値の最大値と最小値の差を最大値で割った彩度を用いるのも（非線形で扱いにくそうなので）おそらく正しくない\n\n\nどのパラメータを合成しているか気になったのでこの計算を推定した（=合成を再現した）\n\n\nサンプルデータ等はClipStudioで取得\n\n\n\n結論\n\n\n彩度合成は以下の3つのルールにより計算される\n\n\n・彩度合成モードは一度RGB色空間からYCbCr空間へ線形変換を行い輝度であるY値と、独自に定義されかつ表示されないパラメータである色相と彩度の計3つのパラメータを用いている・彩度合成モードは下のレイヤーのYである輝度、CbCrから導出された色相を保持し、上のレイヤーのCbCrからから導出された彩度をそのまま結果色として出力する・ただし、下のレイヤーによって指定された色相と輝度からとりうる彩度の範囲から上のレイヤーから導出された彩度が外れた場合、結果色の彩度は下のレイヤーによって指定されたとりうる彩度に最も近い値をとる\n\n\n説明\n\n\nひとつずつ見ていく\n\n\n・彩度合成モードは一度RGB色空間からYCbCr色空間へ線形変換を行った上で、輝度であるY値と、独自に定義されかつ表示されないパラメータである色相と彩度の計3つのパラメータを用いている\n\n前提としてRGB色空間とYCbCr色空間とその相互変換について\n\n\n・RGB色空間はほとんどのPC上の色表現に用いられる色空間である\n\n\nRは赤　Gは緑　Bは青とした三要素から色を表現する色空間でありそれぞれの値域は$[0,255]$となる\n\n\n・YCbCr色空間は映像信号などの処理に用いられる色空間である\n\n\nYは輝度　Cbは青方向色差　Crは赤方向色差とした三要素から色を表現する色空間でありそれぞれの値域は$[0,255] [-127.5,127.5] [-127.5,127.5]$となる（ただし実際の信号処理においては符号化により$[0,255]$となる）\n\n\n・RGBからYCbCrへの変換は特定の係数行列をかけて線形的に行われる　逆変換も同様\n\n\nその変換式は以下で定義される(wikiからの引用値)\n\n\n$$\n\\begin{pmatrix}\nY \\\\\nCb \\\\\nCr\n\\end{pmatrix}\n=\n\\begin{pmatrix}\n0.299 & 0.587 & 0.114 \\\\\n-0.168736 & -0.331264 & 0.5 \\\\\n0.5 & -0.418688 & -0.081312\n\\end{pmatrix}\n\\begin{pmatrix}\nR \\\\\nG \\\\\nB\n\\end{pmatrix} \\\\\\\\\n\\begin{pmatrix}\nR \\\\\nG \\\\\nB\n\\end{pmatrix}\n=\n\\begin{pmatrix}\n1 & 0 & 1.402 \\\\\n1 & -0.344136 & -0.714136 \\\\\n1 & 1.1772 & 0\n\\end{pmatrix}\n\\begin{pmatrix}\nY \\\\\nCb \\\\\nCr\n\\end{pmatrix}\n\n$$\n\n\n\nこれはいわゆるITU-R BT.601規格でありこの係数行列は規格により異なることに留意する\n\n\n次に用いられる3つのパラメータ：輝度　彩度　色相について\n\n\nこれらはすべてYCbCr色空間上で定義される\n\n\n輝度について：YCbCr色空間のYの値\n\n実際にRGB画像をYCbCrに変換してYのみをグレースケールで表示すると白黒画像になる\n\n\nRGB値に人間の色認識に応じた加重平均をとるためヒトの分光視感効率に応じた白黒画像を得られる\n\n\n彩度と色相について：Y-Cb-Crはそれぞれ直交するのでCb-Crを複素数平面としたときの偏角を色相とし大きさを彩度とする\n\n\nこうすることで色相は360°で定義される（計算上はラジアンになるが）\n\n\n・彩度合成モードは下のレイヤーのYである輝度、CbCrから導出された色相を保持し、上のレイヤーのCbCrからから導出された彩度をそのまま結果色として出力する\n\n1つめのルールも含め具体的な計算式を追って確認していく\n\n\nまず下のレイヤーのRGB値$RGB_b$を変換して$Y_b,Cb_b,Cr_b$を得る\n\n\n同様に上のレイヤーのRGB値$RGB_c$を変換して$Y_c,Cb_c,Cr_c$を得る\n\n\n次に結果色の輝度($L$)　色相($H$)　彩度($S$)を計算する\n\n\n輝度と色相は下のレイヤーのものを使うので\n\n\n$$\nL = Y_b\\\\\nH = arg(Cb_b+Cr_bi)\n$$\n\n\n\n彩度は上のレイヤーのものを使うので\n\n\n$$\nS = \\sqrt{Cb_c^2 + Cr_c^2}\n$$\n\n\n\nこの時結果色の$YC_bC_r$はそれぞれ戻して\n\n\n$$\nY = L = Y_b\\\\\nCb = Scos(H)\\\\\nCr = Ssin(H)\n$$\n\n\n\nとなる\n\n\nこれをRGBへ逆変換すると結果色$RGB_r$が得られる　ということ\n\n\n・ただし、下のレイヤーによって指定された色相と輝度からとりうる彩度の範囲から上のレイヤーから導出された彩度が外れた場合、結果色の彩度は下のレイヤーによって指定されたとりうる彩度に最も近い値をとる\n\nこれが一番めんどくさいルール\n\n\n先ほどの計算では\n\n$$\n\nRGB \\to YCbCr \\to RGB\n\n$$\n\nとして結果色を求めるが　この$YCbCr \\to RGB$の変換\n\nの際にRGBの値域から外れることがある（飽和する）\n\n\nその対応として彩度を最大限維持するためにとることのできる彩度うち最も近い値をとっているということ\n\n\n式を追うためにまず$YCbCr \\to RGB$を輝度$L$　彩度$S$　色相$H$を用いて整理する　添え字はそれぞれRGBのどれから求められた値かを示す\n\n\n$$\n\\begin{cases} \nR=Y+1.402Cr\\\\\nG=Y−0.344136Cb−0.714136Cr\\\\\nB=Y+1.772Cb\n\\end{cases} \\\\\nS_R = \\dfrac{R-L}{1.402sin(H)}\\\\\nS_G = \\dfrac{G-L}{-0.344136cos(H)-0.714136sin(H)}\\\\\nS_B = \\dfrac{B-L}{1.772cos(H)}\n$$\n\n\n\nRGBの値域は$[0,255]$であることとRGBの係数の正負が分母の符号で決まることを考慮すれば\n\n\nそれぞれの分母の符号が正のとき：\n\n\n$$\n\\dfrac{-L}{1.402sin(H)}≤S_R≤\\dfrac{255-L}{1.402sin(H)}\\\\\n\\dfrac{-L}{-0.344136cos(H)-0.714136sin(H)}≤S_G≤\\dfrac{255-L}{-0.344136cos(H)-0.714136sin(H)}\\\\\n\\dfrac{-L}{1.772cos(H)}≤S_B≤\\dfrac{255-L}{1.772cos(H)}\n$$\n\n\n\nとなりそれぞれの分母の符号が負のときは大小関係は逆になる\n\n\nこの様に求めた各範囲の共通部分に彩度$S$が入っていないとき最も近い値を採用するということ\n\n\n\n実際に逐次計算してみる\n\n\n計算するとわかりやすいので以下の組み合わせで結果色を計算から求めてみる\n\n\n\n\n\n基本色($RGB_b$)\n合成色($RGB_c$)\n結果色($RGB_r$)\n\n\n\n\n(80,74,48)\n(239,223,143)\n(93,76,0)\n\n\n\n\n\n表記は(R, G, B)\n\n\n計算が面倒なので変換の係数行列は4ケタにする\n\n添え字は$b$が下のレイヤー,$c$が上のレイヤー,結果色が$r$としている\n\n\nまずはそれぞれのRGBをYCbCrへ変換\n\n\n$$\nY_b = 0.299\\cdot80+0.587\\cdot74+0.114\\cdot48 = 72.83\\\\\nCb_b = -0.1687\\cdot80-0.3312\\cdot74+0.5\\cdot48 = -14.00\\\\\nCr_b = 0.5\\cdot80-0.4187\\cdot74-0.08131\\cdot48 = 5.113\\\\\\\\\nY_c = 0.299\\cdot239+0.587\\cdot223+0.114\\cdot143 = 218.7\\\\\nCb_c = -0.1687\\cdot239-0.3312\\cdot223+0.5\\cdot143 = -42.68\\\\\nCr_c = 0.5\\cdot239-0.4187\\cdot223-0.08131\\cdot143 = 14.50\\\\\n$$\n\n\n\n次に輝度($L$)色相($H$)を求める\n\n$L$と$H$は下のレイヤーから求められるので\n\n\n$$\nL = Y_b = 72.83\\\\\nH = arg(Cb_b+Cr_bi) = arg(-14.00+5.113i) = 2.791\n$$\n\n\n\n得られた$L$と$H$からとりうる$S$の最大値を求めておく\n\n\n$$\n-151.2 = \\dfrac{L}{1.402sin(H)}≤S_R≤\\dfrac{255-L}{1.402sin(H)} = 378.3\\\\\n-934.5 = \\dfrac{L}{-0.344136cos(H)-0.714136sin(H)}≤S_G≤\\dfrac{255-L}{-0.344136cos(H)-0.714136sin(H)} = 2337\\\\\n-109.4 = \\dfrac{255-L}{1.772cos(H)} ≤ S_B ≤ \\dfrac{L}{1.772cos(H)} = 43.76\n$$\n\n\n\nこれの共通するSの範囲は$[-109.4,43.76]$\n\n\n一方で上のレイヤーから求められる彩度$S$は\n\n\n$$\nS = \\sqrt{Cb_c^2 + Cr_c^2} = \\sqrt{(-42.68)^2 + 14.50^2} = 45.08\n$$\n\n\n\nこれは取ることのできない値なので最も近い値である$S = 43.76$が採用される彩度となる\n\n\n結果色の$Y_r$,$Cb_r$,$Cr_r$はこれらの値から\n\n\n$$\nY_r = L = 72.83\\\\\nCb_r = Scos(H) = 43.76sin(2.791) = 15.02　\\\\\nCr_r = Ssin(H) = 43.76cos(2.791) = -41.10\n$$\n\n\n\nこれを逆変換すれば\n\n\n$$\nR=Y+1.402Cr = 72.83+1.402\\cdot15.02 = 93.88\\\\\nG=72.83-0.3441\\cdot-41.10-0.7141\\cdot15.02 = 76.25\\\\\nB=Y+1.772Cb = 72.83+1.772\\cdot-41.10 = 0.0008\n$$\n\n\n\nということで結果色は整数に丸めて(94,76,0)となり実際の値(93,76,0)とほぼ一致する\n\n\n\n終わり\n\n\nここまでの話を理解できれば他の色相や輝度の合成モードは結果色が上下レイヤーのどのパラメータを選び取るかの違いでしかないことがわかる\n\n\nまたグリザイユ画法で使われるカラー合成は上のレイヤーの色相と彩度を保持するとのこと　つまりグリザイユ画法は白黒の絵(=Y値画像)にカラー合成でCbCr平面上の色相と彩度を合成しているということがわかる\n\n\nさらに画像のY値化（輝度化）には色相や彩度やカラー合成モードで彩度ゼロの色調補正レイヤーを上に掛けるだけで行えることがわかる　これは彩度ゼロ=色相もゼロとなる（大きさゼロの複素数は偏角の定義ができない）ためである\n\n\nなぜドキュメントに計算式が記載されないかもわかった　四則演算のみで記述できない上に前提知識が必要で実用上知る必要がないため\n\n\n一方で問題は表示されない数字を使用しているということ　ClipStudioではHSLやHSV表示できるが合成モードの名前の印象とは違いそれぞれの色空間での値自体を保持するわけではないので直感に反するかもしれない　そもそも合成モードのリストの一番下にあることから実用性があまりないことを示唆しているが\n\n\nとはいえここまでの話は実際の挙動から推測した解釈なので合っていない可能性も普通にある　調べても出てこないので答え合わせもできない\n\n\n実際に関数を組んでみると誤差±1くらいにはなるので再現性は高いと思うが誤差の由来はよくわからない\n\nおそらくガンマ補正か小数点以下の切り捨て処理関係だと思われるが…\n\n\n\n色空間や画像処理や信号処理を調べるとデジタルイラストやデジタルモニタを用いた作業ひいては撮影や画像解析で意識すべき点がわかるのが楽しかった\n\n\n編集ソフトなどのよくわからない環境設定の項目は大抵こういう話に関係している　DTPなどにも関係するので知識を持っておくといいかもしれない\n\n\nこういう試行錯誤はやりたいことに対してどのような手法を取るかを考える上で結構重要だなと思う\n\n\nおわり\n\n\n\n参考資料\n\n\nYUV - Wikipediaウィキメディア財団ウィキメディアプロジェクトへの貢献者YCbCr ‐ 通信用語の基礎知識色空間の変換 (4)色覚の多様性と視覚バリアフリーなプレゼンテーション | 第2回　色覚が変化すると、どのように色が見えるのか？第2回　色覚が変化すると、どのように色が見えるのか？","html":"

背景

\n

ClipStudioやphotoshopには彩度合成モードがあるが　公式ガイドやらTipsやらhtmlベタ打ちのサイトを参照しても基本的な説明は

\n
\n

下のレイヤーの輝度と色相を維持したまま、上のレイヤーの彩度にします。

\n
\n

といった文言もしくは説明自体がなく　具体的な計算式が出てこない

\n

この記述から素直に推測できるのはHSL色空間上の輝度　色相　彩度を用いて処理する方法だが
\n実際に試すと正しくないとわかる

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
基本色合成色結果色
(0,50,50)
(0,95,50)
(0,100,57)
(0,50,50)
(0,80,50)
(0,91,56)
(0,50,50)
(0,10,50)
(0,12,42)
(0,50,50)
(0,0,50)
(0,0,40)
(0,50,50)
(0,25,50)
(0,28,45)
(0,50,50)
(0,100,50)
(0,100,57)
\n

(H:色相[°], S:彩度[％], L:輝度[％])

\n

一方phothoshopについての説明だが　ここにあるようにRGB値の最大値と最小値の差を最大値で割った彩度を用いるのも（非線形で扱いにくそうなので）おそらく正しくない

\n

どのパラメータを合成しているか気になったのでこの計算を推定した（=合成を再現した）

\n

サンプルデータ等はClipStudioで取得

\n

結論

\n

彩度合成は以下の3つのルールにより計算される

\n
・彩度合成モードは一度RGB色空間からYCbCr空間へ線形変換を行い輝度であるY値と、独自に定義されかつ表示されないパラメータである色相と彩度の計3つのパラメータを用いている
・彩度合成モードは下のレイヤーのYである輝度、CbCrから導出された色相を保持し、上のレイヤーのCbCrからから導出された彩度をそのまま結果色として出力する
・ただし、下のレイヤーによって指定された色相と輝度からとりうる彩度の範囲から上のレイヤーから導出された彩度が外れた場合、結果色の彩度は下のレイヤーによって指定されたとりうる彩度に最も近い値をとる

説明

\n

ひとつずつ見ていく

\n
・彩度合成モードは一度RGB色空間からYCbCr色空間へ線形変換を行った上で、輝度であるY値と、独自に定義されかつ表示されないパラメータである色相と彩度の計3つのパラメータを用いている

前提としてRGB色空間とYCbCr色空間とその相互変換について

\n

・RGB色空間はほとんどのPC上の色表現に用いられる色空間である

\n

Rは赤　Gは緑　Bは青とした三要素から色を表現する色空間でありそれぞれの値域は$[0,255]$となる

\n

・YCbCr色空間は映像信号などの処理に用いられる色空間である

\n

Yは輝度　Cbは青方向色差　Crは赤方向色差とした三要素から色を表現する色空間でありそれぞれの値域は$[0,255] [-127.5,127.5] [-127.5,127.5]$となる（ただし実際の信号処理においては符号化により$[0,255]$となる）

\n

・RGBからYCbCrへの変換は特定の係数行列をかけて線形的に行われる　逆変換も同様

\n

その変換式は以下で定義される(wikiからの引用値)

\n
$$\n\\begin{pmatrix}\nY \\\\\nCb \\\\\nCr\n\\end{pmatrix}\n=\n\\begin{pmatrix}\n0.299 & 0.587 & 0.114 \\\\\n-0.168736 & -0.331264 & 0.5 \\\\\n0.5 & -0.418688 & -0.081312\n\\end{pmatrix}\n\\begin{pmatrix}\nR \\\\\nG \\\\\nB\n\\end{pmatrix} \\\\\\\\\n\\begin{pmatrix}\nR \\\\\nG \\\\\nB\n\\end{pmatrix}\n=\n\\begin{pmatrix}\n1 & 0 & 1.402 \\\\\n1 & -0.344136 & -0.714136 \\\\\n1 & 1.1772 & 0\n\\end{pmatrix}\n\\begin{pmatrix}\nY \\\\\nCb \\\\\nCr\n\\end{pmatrix}\n\n$$\n
\n

これはいわゆるITU-R BT.601規格でありこの係数行列は規格により異なることに留意する

\n

次に用いられる3つのパラメータ：輝度　彩度　色相について

\n

これらはすべてYCbCr色空間上で定義される

\n

輝度について：YCbCr色空間のYの値
\n実際にRGB画像をYCbCrに変換してYのみをグレースケールで表示すると白黒画像になる

\n

RGB値に人間の色認識に応じた加重平均をとるためヒトの分光視感効率に応じた白黒画像を得られる

\n

彩度と色相について：Y-Cb-Crはそれぞれ直交するのでCb-Crを複素数平面としたときの偏角を色相とし大きさを彩度とする

\n

こうすることで色相は360°で定義される（計算上はラジアンになるが）

\n
・彩度合成モードは下のレイヤーのYである輝度、CbCrから導出された色相を保持し、上のレイヤーのCbCrからから導出された彩度をそのまま結果色として出力する

1つめのルールも含め具体的な計算式を追って確認していく

\n

まず下のレイヤーのRGB値$RGB_b$を変換して$Y_b,Cb_b,Cr_b$を得る

\n

同様に上のレイヤーのRGB値$RGB_c$を変換して$Y_c,Cb_c,Cr_c$を得る

\n

次に結果色の輝度($L$)　色相($H$)　彩度($S$)を計算する

\n

輝度と色相は下のレイヤーのものを使うので

\n
$$\nL = Y_b\\\\\nH = arg(Cb_b+Cr_bi)\n$$\n
\n

彩度は上のレイヤーのものを使うので

\n
$$\nS = \\sqrt{Cb_c^2 + Cr_c^2}\n$$\n
\n

この時結果色の$YC_bC_r$はそれぞれ戻して

\n
$$\nY = L = Y_b\\\\\nCb = Scos(H)\\\\\nCr = Ssin(H)\n$$\n
\n

となる

\n

これをRGBへ逆変換すると結果色$RGB_r$が得られる　ということ

\n
・ただし、下のレイヤーによって指定された色相と輝度からとりうる彩度の範囲から上のレイヤーから導出された彩度が外れた場合、結果色の彩度は下のレイヤーによって指定されたとりうる彩度に最も近い値をとる

これが一番めんどくさいルール

\n

先ほどの計算では
\n$$
\nRGB \\to YCbCr \\to RGB
\n$$
\nとして結果色を求めるが　この$YCbCr \\to RGB$の変換
\nの際にRGBの値域から外れることがある（飽和する）

\n

その対応として彩度を最大限維持するためにとることのできる彩度うち最も近い値をとっているということ

\n

式を追うためにまず$YCbCr \\to RGB$を輝度$L$　彩度$S$　色相$H$を用いて整理する　添え字はそれぞれRGBのどれから求められた値かを示す

\n
$$\n\\begin{cases} \nR=Y+1.402Cr\\\\\nG=Y−0.344136Cb−0.714136Cr\\\\\nB=Y+1.772Cb\n\\end{cases} \\\\\nS_R = \\dfrac{R-L}{1.402sin(H)}\\\\\nS_G = \\dfrac{G-L}{-0.344136cos(H)-0.714136sin(H)}\\\\\nS_B = \\dfrac{B-L}{1.772cos(H)}\n$$\n
\n

RGBの値域は$[0,255]$であることとRGBの係数の正負が分母の符号で決まることを考慮すれば

\n

それぞれの分母の符号が正のとき：

\n
$$\n\\dfrac{-L}{1.402sin(H)}≤S_R≤\\dfrac{255-L}{1.402sin(H)}\\\\\n\\dfrac{-L}{-0.344136cos(H)-0.714136sin(H)}≤S_G≤\\dfrac{255-L}{-0.344136cos(H)-0.714136sin(H)}\\\\\n\\dfrac{-L}{1.772cos(H)}≤S_B≤\\dfrac{255-L}{1.772cos(H)}\n$$\n
\n

となりそれぞれの分母の符号が負のときは大小関係は逆になる

\n

この様に求めた各範囲の共通部分に彩度$S$が入っていないとき最も近い値を採用するということ

\n

実際に逐次計算してみる

\n

計算するとわかりやすいので以下の組み合わせで結果色を計算から求めてみる

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
基本色($RGB_b$)合成色($RGB_c$)結果色($RGB_r$)
(80,74,48)
(239,223,143)
(93,76,0)
\n

表記は(R, G, B)

\n

計算が面倒なので変換の係数行列は4ケタにする
\n添え字は$b$が下のレイヤー,$c$が上のレイヤー,結果色が$r$としている

\n

まずはそれぞれのRGBをYCbCrへ変換

\n
$$\nY_b = 0.299\\cdot80+0.587\\cdot74+0.114\\cdot48 = 72.83\\\\\nCb_b = -0.1687\\cdot80-0.3312\\cdot74+0.5\\cdot48 = -14.00\\\\\nCr_b = 0.5\\cdot80-0.4187\\cdot74-0.08131\\cdot48 = 5.113\\\\\\\\\nY_c = 0.299\\cdot239+0.587\\cdot223+0.114\\cdot143 = 218.7\\\\\nCb_c = -0.1687\\cdot239-0.3312\\cdot223+0.5\\cdot143 = -42.68\\\\\nCr_c = 0.5\\cdot239-0.4187\\cdot223-0.08131\\cdot143 = 14.50\\\\\n$$\n
\n

次に輝度($L$)色相($H$)を求める
\n$L$と$H$は下のレイヤーから求められるので

\n
$$\nL = Y_b = 72.83\\\\\nH = arg(Cb_b+Cr_bi) = arg(-14.00+5.113i) = 2.791\n$$\n
\n

得られた$L$と$H$からとりうる$S$の最大値を求めておく

\n
$$\n-151.2 = \\dfrac{L}{1.402sin(H)}≤S_R≤\\dfrac{255-L}{1.402sin(H)} = 378.3\\\\\n-934.5 = \\dfrac{L}{-0.344136cos(H)-0.714136sin(H)}≤S_G≤\\dfrac{255-L}{-0.344136cos(H)-0.714136sin(H)} = 2337\\\\\n-109.4 = \\dfrac{255-L}{1.772cos(H)} ≤ S_B ≤ \\dfrac{L}{1.772cos(H)} = 43.76\n$$\n
\n

これの共通するSの範囲は$[-109.4,43.76]$

\n

一方で上のレイヤーから求められる彩度$S$は

\n
$$\nS = \\sqrt{Cb_c^2 + Cr_c^2} = \\sqrt{(-42.68)^2 + 14.50^2} = 45.08\n$$\n
\n

これは取ることのできない値なので最も近い値である$S = 43.76$が採用される彩度となる

\n

結果色の$Y_r$,$Cb_r$,$Cr_r$はこれらの値から

\n
$$\nY_r = L = 72.83\\\\\nCb_r = Scos(H) = 43.76sin(2.791) = 15.02　\\\\\nCr_r = Ssin(H) = 43.76cos(2.791) = -41.10\n$$\n
\n

これを逆変換すれば

\n
$$\nR=Y+1.402Cr = 72.83+1.402\\cdot15.02 = 93.88\\\\\nG=72.83-0.3441\\cdot-41.10-0.7141\\cdot15.02 = 76.25\\\\\nB=Y+1.772Cb = 72.83+1.772\\cdot-41.10 = 0.0008\n$$\n
\n

ということで結果色は整数に丸めて(94,76,0)となり実際の値(93,76,0)とほぼ一致する

\n

終わり

\n

ここまでの話を理解できれば他の色相や輝度の合成モードは結果色が上下レイヤーのどのパラメータを選び取るかの違いでしかないことがわかる

\n

またグリザイユ画法で使われるカラー合成は上のレイヤーの色相と彩度を保持するとのこと　つまりグリザイユ画法は白黒の絵(=Y値画像)にカラー合成でCbCr平面上の色相と彩度を合成しているということがわかる

\n

さらに画像のY値化（輝度化）には色相や彩度やカラー合成モードで彩度ゼロの色調補正レイヤーを上に掛けるだけで行えることがわかる　これは彩度ゼロ=色相もゼロとなる（大きさゼロの複素数は偏角の定義ができない）ためである

\n

なぜドキュメントに計算式が記載されないかもわかった　四則演算のみで記述できない上に前提知識が必要で実用上知る必要がないため

\n

一方で問題は表示されない数字を使用しているということ　ClipStudioではHSLやHSV表示できるが合成モードの名前の印象とは違いそれぞれの色空間での値自体を保持するわけではないので直感に反するかもしれない　そもそも合成モードのリストの一番下にあることから実用性があまりないことを示唆しているが

\n

とはいえここまでの話は実際の挙動から推測した解釈なので合っていない可能性も普通にある　調べても出てこないので答え合わせもできない

\n

実際に関数を組んでみると誤差±1くらいにはなるので再現性は高いと思うが誤差の由来はよくわからない
\nおそらくガンマ補正か小数点以下の切り捨て処理関係だと思われるが…

\n
\n

色空間や画像処理や信号処理を調べるとデジタルイラストやデジタルモニタを用いた作業ひいては撮影や画像解析で意識すべき点がわかるのが楽しかった

\n

編集ソフトなどのよくわからない環境設定の項目は大抵こういう話に関係している　DTPなどにも関係するので知識を持っておくといいかもしれない

\n

こういう試行錯誤はやりたいことに対してどのような手法を取るかを考える上で結構重要だなと思う

\n

おわり

\n

参考資料

\n
YUV - Wikipedia
ウィキメディア財団ウィキメディアプロジェクトへの貢献者
YCbCr ‐ 通信用語の基礎知識
色空間の変換 (4)
色覚の多様性と視覚バリアフリーなプレゼンテーション | 第2回　色覚が変化すると、どのように色が見えるのか？
第2回　色覚が変化すると、どのように色が見えるのか？
","url":"https://ghost.ssks-ss.com/08/","canonical_url":null,"uuid":"cd0114c6-d9b6-40e7-a555-92282658463f","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"692dbf382ba9e10001ff15ad","reading_time":7}},{"node":{"id":"Ghost__Post__65ff228dd6364c0001761da5","title":"ファイトクラブへようこそ","slug":"welcometofightclub","featured":false,"feature_image":"https://ghostmedia.ssks-ss.com/content/images/2024/03/--_Insane_--_20240226---frame-at-2m22s-1.jpg","excerpt":"ファイトクラブへようこそファイトクラブへようこそ [エンターテイメント] なりたい自分になろうこの動画は投稿者によって修正されましたニコニコ動画ちん\n\n動画を投稿\n\n\n\n素材\n\n\nファイト・クラブです\n\n\n何度も見返したときに発見が常にあったり解釈が常に発生する作品は本当にすごい　特に時代の移り変わりにも対応していて素晴らしい\n\nこの映画かなりカット数が多くてスピード感があるのも昔の映画ながら今でも十分に印象が残る構成になっていて色々な意味で先取りをした映画だなと思います\n\nなにより若いころのブラットピットのビジュアルが相当に強い　常に画になる\n\n是非何度でも映画を観てください\n\n\nというか先達がいます　ちょうど原語版と吹替版で住み分けできてるんじゃないでしょうか　2017年が7年前なのびっくり\n\n\n\n動画\n\n\n結構前からAEを使ってるんですけど動画として投稿できるものでAEで作ったものってない\n\n\nこの動画の作成にあたって二つほどコードを書きました　コードを書くことにあんまり抵抗がなくなったのはいい傾向\n\nひとつ目はこれ\n\nこれは選択したレイヤーを設定したインターバルのフレーム数でラ","custom_excerpt":null,"visibility":"public","created_at_pretty":"23 March, 2024","published_at_pretty":"06 May, 2024","updated_at_pretty":"06 May, 2024","created_at":"2024-03-24T03:42:21.000+09:00","published_at":"2024-05-06T18:25:09.000+09:00","updated_at":"2024-05-06T18:37:27.000+09:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"ssks","slug":"ssks","bio":"平素よりお世話になっております","profile_image":"https://ghostmedia.ssks-ss.com/content/images/2023/12/----------2023-11-20-004315-1.jpg","twitter":"@Sn50Tin","facebook":null,"website":"https://www.pixiv.net/users/25391430,https://www.nicovideo.jp/user/31837529"}],"primary_author":{"name":"ssks","slug":"ssks","bio":"平素よりお世話になっております","profile_image":"https://ghostmedia.ssks-ss.com/content/images/2023/12/----------2023-11-20-004315-1.jpg","twitter":"@Sn50Tin","facebook":null,"website":"https://www.pixiv.net/users/25391430,https://www.nicovideo.jp/user/31837529"},"primary_tag":{"name":"音mad","slug":"yin-mad","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"tags":[{"name":"音mad","slug":"yin-mad","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"技術","slug":"tech","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"ブログ","slug":"blog","description":"語源はWeblogらしい","feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"ファイト・クラブ","slug":"huaitokurabu","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"破壊","slug":"po-huai","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"plaintext":"ファイトクラブへようこそファイトクラブへようこそ [エンターテイメント] なりたい自分になろうこの動画は投稿者によって修正されましたニコニコ動画ちん\n\n動画を投稿\n\n\n\n素材\n\n\nファイト・クラブです\n\n\n何度も見返したときに発見が常にあったり解釈が常に発生する作品は本当にすごい　特に時代の移り変わりにも対応していて素晴らしい\n\nこの映画かなりカット数が多くてスピード感があるのも昔の映画ながら今でも十分に印象が残る構成になっていて色々な意味で先取りをした映画だなと思います\n\nなにより若いころのブラットピットのビジュアルが相当に強い　常に画になる\n\n是非何度でも映画を観てください\n\n\nというか先達がいます　ちょうど原語版と吹替版で住み分けできてるんじゃないでしょうか　2017年が7年前なのびっくり\n\n\n\n動画\n\n\n結構前からAEを使ってるんですけど動画として投稿できるものでAEで作ったものってない\n\n\nこの動画の作成にあたって二つほどコードを書きました　コードを書くことにあんまり抵抗がなくなったのはいい傾向\n\nひとつ目はこれ\n\nこれは選択したレイヤーを設定したインターバルのフレーム数でランダムに表示するスクリプト(UI付き)です　なんかランダムシード関数があんまりよくわからなくて機能してません　たすけて～～～\n\nこれはグランジ素材などののランダム描画に使いました　一日で完成\n\n\nふたつ目は以下\n\n\nimport os\nfrom PIL import Image\n\n# 画像があるディレクトリパス\ndirectory = './'\n\n# 新しいディレクトリの名前\nnew_directory_name = 'output_images'\n\n# 新しいディレクトリのパス\nnew_directory_path = os.path.join(directory, new_directory_name)\n\n# 新しいディレクトリを作成\nos.makedirs(new_directory_path, exist_ok=True)\n\n# ディレクトリ内のPNG画像を取得\npng_images = [f for f in os.listdir(directory) if f.endswith('.png')]\n\n# アルファチャンネルの多い順にソート\nsorted_images = sorted(png_images, key=lambda img: sum(1 for pixel in Image.open(os.path.join(directory, img)).convert(\"RGBA\").getdata() if pixel[3] == 0), reverse=True)\n\n# 書き出すファイル名のベース\noutput_base_name = 'output_'\n\n# 画像を書き出す\nfor i, image_name in enumerate(sorted_images, start=1):\n image_path = os.path.join(directory, image_name)\n img = Image.open(image_path)\n output_name = f\"{output_base_name}{i}.png\"\n output_path = os.path.join(new_directory_path, output_name)\n img.save(output_path)\n\nprint(\"All images processed.\")\n\n\n\nこれはpng画像をアルファチャンネルのピクセル数にソートして新規ファイルに出力するpythonのコード　ffmpegとかでもできるんだろうな～\n\nもうローカルでしか使わないからめちゃくちゃ適当\n\nあと画像を各々走査して処理するから結構枚数があると遅い？py系の画像処理のライブラリよく知らないからまあできたからいいか…で終わりました\n\n\n作るにあたって152枚ほど画像を切り抜いたんですけどこれもphotoshopの自動化でかなり楽ができてよかった　これは標準機能でやりました\n\n全体的に暗くてコントラストが弱い映画だったため被写体選択だと割と漏れができてた\n\n選択範囲ツール内の自動選択ツールの方が精度が高いけど自動化できなくてちょっと面倒だった\n\n\n\n原曲\n\n\nInsaneProvided to YouTube by DistroKidInsane · Black Gryph0n · BaasikInsane℗ Black Gryph0n & BaasikReleased on: 2021-06-11Auto-generated by YouTube.YouTube\n\n原曲はInsane　アーティストはBlack Gryph0n＆Baasikです\n\nハズビンホテルという作品のラジオデーモンたるアラスターの非公式キャラソン\n\n\nアラスターは作中舞台の地獄において絶大な権能を持っていて　生前にはラジオアナウンサーと殺人鬼という二面性を持ったいわゆるサイコパスキャラ…ということらしい\n\n\nハズビンホテルは見たほうがいい　楽曲が粒ぞろいでお話もおもしろい　というか基本ミュージカル風？ラップバトルっぽくもあるけど\n\n大人向けのカートゥーンだなという感じ　特に日本だと成人女性向けという雰囲気がある\n\n人外ばっかだし倫理も破綻してるのでオススメ　下ネタも多いです\n\n\n\n他\n\n\n個人的にMIXTAPE -ラップ調音MAD-の特に竹塔さんのごちうさパートが音madに対する印象をかなり変えた作品だったのでこういう意識で音声と映像を合わせてうまく作ろうかなと思ってました\n\nこの動画押韻とか話の流れとかえげつない刻みとか映像構成とか全体のデザインとかほんとにすごい\n\n今の感覚からしてもマスターピースだよなとずっと思っています\n\n\nよく考えたらこうして文字書くのも着想は竹塔さんからなので最近の動向のルーツってかなり頼ってる節があるかも\n\n\nあとモニターによって（疑似だけど）グローの見た目が変わるのがすげー嫌だった\n\n結構前に絵描いてて気づいてたけど多分輝度か彩度かの閾値以下をなんらかの切り捨て処理してるっぽくて一定色域が正しく発色できてない…　なんで～～～\n\n\n\n私信\n\n\n最近はディーゼルエンジンに対して蒸留範囲の異なる燃料における燃焼特性を研究しています　おもしろい\n\nあと色々あって3000ドルくらい(45万円くらい？)を手に入れました　二輪免許が欲しいな～と　エアコンも欲しい…\n\n\nTo Be Kontinuedも行きました！　これマジで最高でした　体が勝手に動くって感覚を初めて覚えたかも\n\nこの時ばかりは運動部に所属してた経験が活きたなと思った\n\nデカい音で音madを聞く、これだけで普段使わない能領域をめちゃくちゃ刺激される\n\n完全に音madへの認識を塗り替えられました　クラブシーンで良さが最大限発揮されるという状況があるというのを認識できたのは大きい\n\n似たような部分では10選とか超晒しの生放送とかは似てる感じがある　なんだかんだ人が周りにいるというのも大事なのかも\n\notogrooveも相当盛り上がるでしょう！　完全新規の動画が流れるのであればまた違った雰囲気になるんだろうな～\n\n\n厚岸(一発で変換できない)も行きました　道東で太平洋側なのでめちゃくちゃ遠い　結局1000kmくらい運転しました\n\n\nバニーガーデンを酒飲んで複数人でやったりもした　胸が大きくて優しくてめちゃくちゃ良い子でちょっとスケベってあらゆる男性から人気だと思う\n\n\nあとはハンコも作ったりとか\n\n\n大きいのでも770円くらい？　安くて楽しいマイグッズ\n\nお近くのosmo設置店にて！\n\n\nいますぐつくれる わたしスタンプ OSMO オスモ｜シヤチハタどこでも・その場で・カンタンに 自分だけのオリジナルスタンプがつくれる、シヤチハタの新しいサービスOSMOを紹介します。いますぐつくれる わたしスタンプ OSMO オスモ｜シヤチハタ\n\n\n今後の目標としては作りかけの動画の完成と絵を描くというところ\n\n今年は去年よりはかなり時間的余裕がある感じなのでやる気次第！！！　やる気ってどうやって生み出すんだ～～～　オ～イ\n","html":"
ファイトクラブへようこそ
ファイトクラブへようこそ [エンターテイメント] なりたい自分になろうこの動画は投稿者によって修正されました
ニコニコ動画ちん

動画を投稿

\n

素材

\n

ファイト・クラブです

\n

何度も見返したときに発見が常にあったり解釈が常に発生する作品は本当にすごい　特に時代の移り変わりにも対応していて素晴らしい
\nこの映画かなりカット数が多くてスピード感があるのも昔の映画ながら今でも十分に印象が残る構成になっていて色々な意味で先取りをした映画だなと思います
\nなにより若いころのブラットピットのビジュアルが相当に強い　常に画になる
\n是非何度でも映画を観てください

\n

というか先達がいます　ちょうど原語版と吹替版で住み分けできてるんじゃないでしょうか　2017年が7年前なのびっくり

\n

動画

\n

結構前からAEを使ってるんですけど動画として投稿できるものでAEで作ったものってない

\n

この動画の作成にあたって二つほどコードを書きました　コードを書くことにあんまり抵抗がなくなったのはいい傾向
\nひとつ目はこれ
\nこれは選択したレイヤーを設定したインターバルのフレーム数でランダムに表示するスクリプト(UI付き)です　なんかランダムシード関数があんまりよくわからなくて機能してません　たすけて～～～
\nこれはグランジ素材などののランダム描画に使いました　一日で完成

\n

ふたつ目は以下

\n
import os\nfrom PIL import Image\n\n# 画像があるディレクトリパス\ndirectory = './'\n\n# 新しいディレクトリの名前\nnew_directory_name = 'output_images'\n\n# 新しいディレクトリのパス\nnew_directory_path = os.path.join(directory, new_directory_name)\n\n# 新しいディレクトリを作成\nos.makedirs(new_directory_path, exist_ok=True)\n\n# ディレクトリ内のPNG画像を取得\npng_images = [f for f in os.listdir(directory) if f.endswith('.png')]\n\n# アルファチャンネルの多い順にソート\nsorted_images = sorted(png_images, key=lambda img: sum(1 for pixel in Image.open(os.path.join(directory, img)).convert(\"RGBA\").getdata() if pixel[3] == 0), reverse=True)\n\n# 書き出すファイル名のベース\noutput_base_name = 'output_'\n\n# 画像を書き出す\nfor i, image_name in enumerate(sorted_images, start=1):\n    image_path = os.path.join(directory, image_name)\n    img = Image.open(image_path)\n    output_name = f\"{output_base_name}{i}.png\"\n    output_path = os.path.join(new_directory_path, output_name)\n    img.save(output_path)\n\nprint(\"All images processed.\")\n
\n

これはpng画像をアルファチャンネルのピクセル数にソートして新規ファイルに出力するpythonのコード　ffmpegとかでもできるんだろうな～
\nもうローカルでしか使わないからめちゃくちゃ適当
\nあと画像を各々走査して処理するから結構枚数があると遅い？py系の画像処理のライブラリよく知らないからまあできたからいいか…で終わりました

\n

作るにあたって152枚ほど画像を切り抜いたんですけどこれもphotoshopの自動化でかなり楽ができてよかった　これは標準機能でやりました
\n全体的に暗くてコントラストが弱い映画だったため被写体選択だと割と漏れができてた
\n選択範囲ツール内の自動選択ツールの方が精度が高いけど自動化できなくてちょっと面倒だった

\n

原曲

\n
Insane
Provided to YouTube by DistroKidInsane · Black Gryph0n · BaasikInsane℗ Black Gryph0n & BaasikReleased on: 2021-06-11Auto-generated by YouTube.
YouTube

原曲はInsane　アーティストはBlack Gryph0n＆Baasikです
\nハズビンホテルという作品のラジオデーモンたるアラスターの非公式キャラソン

\n

アラスターは作中舞台の地獄において絶大な権能を持っていて　生前にはラジオアナウンサーと殺人鬼という二面性を持ったいわゆるサイコパスキャラ…ということらしい

\n

ハズビンホテルは見たほうがいい　楽曲が粒ぞろいでお話もおもしろい　というか基本ミュージカル風？ラップバトルっぽくもあるけど
\n大人向けのカートゥーンだなという感じ　特に日本だと成人女性向けという雰囲気がある
\n人外ばっかだし倫理も破綻してるのでオススメ　下ネタも多いです

\n

他

\n

個人的にMIXTAPE -ラップ調音MAD-の特に竹塔さんのごちうさパートが音madに対する印象をかなり変えた作品だったのでこういう意識で音声と映像を合わせてうまく作ろうかなと思ってました
\nこの動画押韻とか話の流れとかえげつない刻みとか映像構成とか全体のデザインとかほんとにすごい
\n今の感覚からしてもマスターピースだよなとずっと思っています

\n

よく考えたらこうして文字書くのも着想は竹塔さんからなので最近の動向のルーツってかなり頼ってる節があるかも

\n

あとモニターによって（疑似だけど）グローの見た目が変わるのがすげー嫌だった
\n結構前に絵描いてて気づいてたけど多分輝度か彩度かの閾値以下をなんらかの切り捨て処理してるっぽくて一定色域が正しく発色できてない…　なんで～～～

\n

私信

\n

最近はディーゼルエンジンに対して蒸留範囲の異なる燃料における燃焼特性を研究しています　おもしろい
\nあと色々あって3000ドルくらい(45万円くらい？)を手に入れました　二輪免許が欲しいな～と　エアコンも欲しい…

\n

To Be Kontinuedも行きました！　これマジで最高でした　体が勝手に動くって感覚を初めて覚えたかも
\nこの時ばかりは運動部に所属してた経験が活きたなと思った
\nデカい音で音madを聞く、これだけで普段使わない能領域をめちゃくちゃ刺激される
\n完全に音madへの認識を塗り替えられました　クラブシーンで良さが最大限発揮されるという状況があるというのを認識できたのは大きい
\n似たような部分では10選とか超晒しの生放送とかは似てる感じがある　なんだかんだ人が周りにいるというのも大事なのかも
\notogrooveも相当盛り上がるでしょう！　完全新規の動画が流れるのであればまた違った雰囲気になるんだろうな～

\n

厚岸(一発で変換できない)も行きました　道東で太平洋側なのでめちゃくちゃ遠い　結局1000kmくらい運転しました

\n
神グッズたち

バニーガーデンを酒飲んで複数人でやったりもした　胸が大きくて優しくてめちゃくちゃ良い子でちょっとスケベってあらゆる男性から人気だと思う

\n

あとはハンコも作ったりとか

\n
ちっちゃいサイズで赤インクのものが売り切れてました

大きいのでも770円くらい？　安くて楽しいマイグッズ
\nお近くのosmo設置店にて！

\n
いますぐつくれる わたしスタンプ OSMO オスモ｜シヤチハタ
どこでも・その場で・カンタンに 自分だけのオリジナルスタンプがつくれる、シヤチハタの新しいサービスOSMOを紹介します。
いますぐつくれる わたしスタンプ OSMO オスモ｜シヤチハタ
\n

今後の目標としては作りかけの動画の完成と絵を描くというところ
\n今年は去年よりはかなり時間的余裕がある感じなのでやる気次第！！！　やる気ってどうやって生み出すんだ～～～　オ～イ

\n","url":"https://ghost.ssks-ss.com/welcometofightclub/","canonical_url":null,"uuid":"7497fbbc-55eb-4027-ab7e-d6c16d1dfd70","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"65ff228dd6364c0001761da5","reading_time":5}}]}},"pageContext":{"slug":"misskey_backupandrestore","tag":"tech","prev":{"primary_tag":{"slug":"blog"},"slug":"04","title":"激忙・忙忙忙・忙忙","year":"2023","month":"08"},"next":{"primary_tag":{"slug":"blog"},"slug":"2023-yeah","title":"2023年終了","year":"2023","month":"12"}}},"staticQueryHashes":["1752937443","2358152166","2561578252","2731221146","4145280475"]}