CMY３色間のカラーサンプラーアプリを制作した時の話

記事

IT・テクノロジー

以前に書いた記事のネタ元になったアプリの話です。機密情報に当たる部分もございますので、詳細は伏せますが、ある特殊染料を扱うクライアント様からのご相談で、染料調合割合を計算するためのカラーサンプラーアプリを制作した時の話です。

なお、本記事はQiitaで公開した記事の要約版と補足となります。

要件定義

要望は概ね以下の通りでした。

1.タブレットでの使用を前提

2.ＣＭＹそれぞれの濃度１００％時の色成分初期値（ＲＧＢ）を変更したい

3.３色間の調合割合ごとの混色結果を一括で確認したい

4.タップした部分の各色調合割合を表示したい

問題点や要望を踏まえ、要件定義を行ない、ＵＩ及びＵＸに関するプロトタイプの仕様をまとめました。以下は関連部分の抜粋です。

1.タイル状のカラーブロックを濃度１０％刻み固定でピラミッド状に並べる（カラーテーブル）

2.問題点の補完用として直線状に並べたカラーブロックを別に用意する

3.スライダーにて各色個別の割合調整、全体の濃度調整を行う

4.カラーブロックをクリックで調合割合を表示する

※実際のアプリでは、monacaとOnsen UIで構築しました。なお、プライベートアプリのため一般公開はしていません。

1-カラーブロックの集合体、カラーテーブル生成

ベースのロジックは以前の記事を参照いただければと思いますが、今回は自動生成部分をアプリ用にクラスにしたものをそのまま使用しています。簡単に説明すると、カラーブロックを直線状に並べるクラスと、それを拡張してピラミッド状に並べるクラスになります。

上記のインスタンスはＣＭＹ各色ブロック、クリックイベントを設定するためのブロック、背景用の白のブロックと、合計５層のカラーテーブルで構成されます。

2-mix-blend-modeで減法混色をシミュレート

上記の内、ＣＭＹ各色カラーテーブルのopacityを増減させて濃度をコントロールし、mix-blend-modeにより減法混色をシミュレートします。別記事でも述べています通り、演算の方がロジック面、リソース面でもよりスマートです。

仕様を満たす演算方法が思い浮かばず、力技のようになってしまいましたが、表現方法としては面白いと思っています。（元々ＤＴＰ屋であったこともありますが、クライアント様にとっても感覚的に理解しやすかったようです。）

ただ、この場合、各色のopacityが０になった場合、背景と同化してしまう不具合があったため、濃度コントロール下にない背景が白のカラーテーブルを追加しました。

3-全体の濃度と個別の濃度調整

当初、全体の濃度調整はカラーテーブル全体を包括するDIV要素のOpacityをコントロールするようにしていましたが、先述の問題もあり、ＣＭＹ各色のOpacityをコントロールするように変更しています。

4-調合割合の計算

最前面に無色のカラーテーブルを配置し、各ブロックに対しイベントリスナーを設定しています。各ブロックにはDATA属性にてＣＭＹの比率がセットされているので、現在の濃度を参照し調合割合を計算しています。

※実案件では各色ごとの計算式がありましたが、サンプルのため単純化しました。

なお、今回紹介した内容について、ソースコードを含めた詳細解説をQiitaにて公開しています。よろしければ訪問してみてください。

以下サービスよりご相談受付けております。