条件を満たす色を透明にする簡易ツール

グラフィック作業や画像解析などで、画像内の特定の部分だけを残して、それ以外の部分を透明化したいといった場面はよくありますね。 前回は、そのような処理を行う簡単なツールとして、画像内の特定色を透明で置き換えるものを公開しました：

» 複数ファイル一括処理版はこちら !

• 前回: 特定の色を透明にする簡易ツール

上記ような、単色を透明で置き換えるツールは、透明化したい部分を均一な色で着色できるような場合には、単純で便利です。 自分で元の画像を描いていて、「 緑色で塗った部分を透明にしたい 」といった用途であれば、このページのツールよりも、上記のツールの方がおすすめです。

しかし、「 カメラで撮影した写真の中で、緑っぽい部分を透明にしたい 」といった場合には、 透明化対象の部分にはある程度の色ムラがあって、「 この色 」と1個に定める事ができないため、 上記のような単純な方式はあまり役に立ちません。

そこで今回は、前回の強化版として、透明化対象を単色ではなく、 RGB成分が満たす条件で指定できるようにしたツールを作ってみました。 例えば、「 赤色成分が50以下、かつ緑色成分が100以上の部分を透明化 」といった処理が可能です。

これなら、透明化対象の色に幅をもたせる事ができるので、元の画像にある程度の色ムラがあっても、透明化したい部分と残したい部分を、条件指定によって自由に調整できます。

スポンサーリンク

---

使用方法

ダウンロードと展開（解凍）

まず、PC（スマホは未対応）で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされます。

その後、ZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開（解凍）してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。

» 展開がエラーで止まってしまう場合や、ファイル名が文字化けしてしまう場合は…

プログラムの起動

Windows をご使用の場合

上記でZIPファイルを展開したフォルダ内にある、以下のバッチファイルをダブルクリック実行してください：

もしプログラムを書き変えながら使いたい場合は、代わりに「 VCSSL_Editor__プログラム編集はこちら.bat 」を実行してください。

正常に起動できると、初回のみ、Java実行環境を入手するか等を尋ねられるので、適時答えて済ませると、プログラムが起動します。 2回目以降はすぐに起動します。

» うまく起動できずにエラーになってしまう場合は…

Linux 等をご使用の場合

ZIPファイルを展開したフォルダ内へコマンドライン端末で cd して、以下の通り入力して実行してください：

» javaコマンドが使用できない等のエラーが表示される場合は…

実行中にメモリー容量が不足する場合は…

このプログラムは、使い方によっては、それなりに多くのメモリーを使用します。 そのため、デフォルトのメモリー容量設定では不足する場合があります。 その場合は以下の対処方法をご参照ください：

» 実行中にメモリー容量が不足する場合（Microsoft® Windows® をご使用の場合）
» 実行中にメモリー容量が不足する場合（Linux® 等やその他のOSをご使用の場合）

※ 目安として、4288 x 2848 サイズ（約1200万画素）の写真データを加工する場合、大体 3GB（≒3000MB）くらい割り当てれば動くようです。

ファイルの選択

起動すると、まずファイルを選択する画面が表示されるので、透明化処理を行いたいファイルを選んでください。 サンプルとして、ダウンロード・展開したフォルダ内に「 sample.png 」が同梱されています。 まずはそれを選んでみましょう。内容は下記の通り、様々な色がグラデーションで混ざっています。

透明化したい部分を、RGB値の条件で指定

ファイルを選択した後は、透明化したい部分の色が満たす条件を尋ねられるので、テキストフィールドに記入します。 条件は、以下の書き方に基づいて記述してください。

※「RGB値なんて初耳！よくわからない！」という方は、下記ページで詳しい解説と色表示ツールの公開を行っていますので、まずはそちらをご参照ください。

• RGBやカラーコードの色表示と相互変換ができる簡易ツール

ここでは、サンプル画像の緑っぽい部分から青っぽい部分にかけてを透明化してみましょう。 テキストフィールドに「 (r < 50 && g >= 80) || b > 100 」と入力して「 OK 」を押してください。 （試しやすいように、デフォルトでこの内容になっています。）

透明化したファイルの保存（自動）

あとは、指定した色が透明化されたファイルが自動で保存されます。 保存されるファイル名は、元のファイル名の末尾に「 _clear.png 」が付いたものになります。 画像形式はPNGになります。

サンプル画像で試した結果は下図の通りです（実際にこのツールで変換したファイルそのものを表示しています）。 ちゃんと、一部が透明化されていますね。この透明になった部分が、先ほど入力した条件が満たしていた部分です。

複数ファイル一括処理版もあります !

もしも処理対象のファイルがたくさんある場合は、上の手順をファイル1個ごとにくり返すのは、少し面倒です。 そのような場合のために、フォルダ内に複数ファイルを入れて一括処理するバージョン（下記リンク）もあります。 ぜひご利用ください！

コード解説

このプログラムのコードはVCSSLで記述されています。

条件を満たす部分を、透明ではなく別の色に置き換えたいといった場合には、 プログラムのコード「 ConditionedColorToClear.vcssl 」をテキストエディタで開いて改造してください。 スクリプト言語なので、コンパイラなどの別ソフトは不要で、コードを書き換えるだけでOKです。 VCSSLはC系の単純な文法の言語なので、C言語などに触れた事のある方なら簡単に読めると思います。

コード全体

まずは、コード全体を見てみましょう。

以上です。80行程度の比較的短いコードですね。 各部で行っている処理はコード内のコメントの通りですが、 以下では順を追ってもう少し詳しく説明します。

先頭領域

まずは、先頭の3行です。

1行目では、コードのファイルで使用している文字コード（Shift_JIS）を宣言しています。 書かなくても動きますが、書いておくと、別のOSのPC上で実行した際などに文字化けするのを防げます。Shift_JISの他にUTF-8も使用できます。

2行目では、グラフィックスデータを扱うための機能を提供する Graphics ライブラリを読み込んでいます。 ここで「 グラフィックスデータって一体何？ 」となるかと思いますが、いわゆる画像データの事だと思ってください。 VCSSLでは、画像を読み込んだり表示したり描画したりといった事に必要なデータを、まとめてグラフィックスデータという形で扱います。

3行目では、各種の数学関数を提供する Math ライブラリを読み込んでいます。 と言っても、このコード内では特に使っていません。 ユーザー側が指定する条件式の中で、もしかしたら sin や cos などを使いたいという場合もあるかもしれないので、 そのために読み込んでいます。

変換後の色（透明）の定義

続きです。このツールのコードを書き換えたいという方は、おそらくここが重要だと思います。 変換後の色のRGB値、および不透明度（α値）を定義しています。

toRed に赤成分、toGreen に緑成分、toBlue に青成分、toAlpha にα値を定義しています。 ユーザーの指定色を、透明ではなく別の色に置き換えたいという場合は、これらの値を書き換えてください。 デフォルトでは完全な透明に置き換えるため、toAlpha は 0 となっています（ 0 で完全透明、255 で完全不透明）。

試しに、toGreen と toBlue と toAlpha を 255 に書き換えて実行すると：

この通り、緑色の部分が、透明ではなく水色に置き換えられるように動作が変わります（RGBでは、青と緑を混ぜると水色になります）。

ファイルを選択し、グラフィックスデータを生成

続いて、ファイルを開く部分です。

14行目で呼んでいる choose 関数は、ユーザーにファイル選択画面を提示して、 選ばれたファイルのパスを文字列として返します。それを string 型変数の inputFilePath に控えています。

このファイルパスを7行目で newGraphics 関数の引数に渡していますが、 これによってファイルが画像として開かれ、その内容を保持するグラフィックスデータが生成されます。 要するに画像データがメモリー上に展開されます。

この newGraphics 関数は、生成したグラフィックスデータにID番号を割りふって返すので、その値をint型変数の inputGraphics に控えています。 このIDは、複数のグラフィックスデータを区別するのに使用します（実際、後で透明化した別のグラフィックスデータを生成します）。

画像のデータを取りだす

画像ファイルを開いた直後には、幅や高さ、および全ピクセルの色を格納する配列など、 変換処理に必要なデータを取りだしています。

ここで「 全ピクセルの色を格納する配列 」という概念が、 あまりプログラミングで描画や画像処理を扱った事がない場合はイメージし辛いかもしれませんので、少し補足しておきましょう。

テレビやPCの画面は、拡大してよ〜く見ると、「ピクセル」や「画素」と呼ばれる、小さな四角いマス目のような単位が、大量に集まって構成されています。 そして、各ピクセルをさらによく見ると、赤/緑/青の3つの光源がまとめられています。

この3つの光源の明るさを絶妙に調整する事で、そのピクセル色が表現されています （赤/緑/青は光の三原色と呼ばれ、これらを絶妙なバランスで混ぜ合わせれば、一応は人間に見えるほとんどの色が表せます）。

従って、ピクセル1個の色は、赤(Red)/緑(Green)/青(Blue)の3個の光源の明るさを数値に置き換えれば、データとして表す事ができます。 これはテレビやPC画面だけではなく、いま扱っているような画像データについても全く同じ話です。 この色の表し方をRGBと言います。 一般によく使用されるのは、赤/緑/青成分をそれぞれ 0 〜 255 までの整数で表す方式（24bit RGB）です。 透明を扱うためには、もう一つ「 α（アルファ） 」と呼ばれる成分が追加されます。 これも 0 〜 255 の範囲で扱う事が多く、0 で完全な透明、255で完全な不透明になります。 このように、RGBにαを加えた形式を RGBA またはARGBと呼んだりします。

さて、長い前置きになりましたが、要するに今ここで扱っているような画像は、 データ上は全ピクセルのRGBA値の集合なので、画像内の横方向のピクセル位置を x、縦方向のピクセル位置を y とすれば、

のようにインデックスを割りふった配列で表せます。 配列の要素数は [ 画像の幅 ][ 画像の高さ ][ 色成分の数 = 4 ] です。 実際に上のコードで呼び出している getGraphicsPixel 関数は、 この形式で画像の全ピクセル色情報を配列化して返してくれるものです。

透明化する色の条件をユーザーに入力してもらう

先へ進みましょう。次は、画像内で透明化したい部分の色を、RGBの各成分についての条件として、ユーザーに入力してもらう処理です。

input 関数は、ユーザーにテキストフィールドを表示して、文字列を入力してもらい、その入力内容をそのまま戻り値として返す関数です。 第1引数にメッセージ、第2引数にテキストフィールドのデフォルト状態の内容を指定します。

ここでは、ユーザーが入力した条件を、文字列変数 condition に控えています。 その内容を、後でコードと見なして eval 関数によって実行（条件式を評価）する事により、 各ピクセルの色が透明化条件を満たすかどうかの判定を行います。

画像内の全ピクセルを巡り、各ピクセルにおいて色のRGBA成分を取り出す

ここからがいよいよ処理の中核です。 画像の縦方向および横方向のループを回して、 画像内の全ピクセルを一つ一つ巡っていきます。 そして、各ピクセルについて、色のRGBA各成分を変数 r, g, b, a として取り出します。

注目ピクセルの色のRGBA成分が、透明化条件を満たすかどうかを、eval 関数を用いて判定

そして、取り出したRGBA各成分 r, g, b, a の値が、ユーザーに指定された透明化条件を満たすかどうかを判定します。 ただし透明化条件は、ただの文字列として変数 condition に控えられているので、 その内容をプログラムのコードと見なして実行する必要があります。 VCSSLでは、eval 関数がそれを行ってくれます。 また、文字列の内容が正しいプログラムのコードと見なせるかどうかを、evaluable 関数で確認する事ができます。

ここでは、まず変数 condition に控えられた条件式がコードとして正しいかどうか確認した上で、 eval 関数で実行（評価）し、結果を bool 型変数 shouldReplaceColor に控えています。 「 shouldReplaceColor 」は「 色を置き換えるべきか 」という意味で、 これが true なら、このピクセルの色は透明化条件を満たしているので、透明色で置き換えるべきだ、という事になります。

ピクセルの色が透明化条件を満たしていれば、透明色で置き換える

後は本当に素直に、shouldReplaceColor が true ならピクセルの色を透明で置き換えるだけです。 透明の色は、このプログラムの冒頭で変数 toRed 〜 toAlpha に用意しておいたので、 その値をピクセル配列の各色成分に代入します。

ここまでの処理を全ピクセルについて行えばいいだけなので、for 文もここで閉じていますね。

色を置き換えたグラフィックスデータを生成

さて、終盤に入ってきました。 書き換えたピクセル配列の内容を、画像ファイルに保存したいわけですが、 ピクセル配列はただの int 型配列に過ぎないので、 まずはグラフィックスデータへと変換する必要があります。 これには、ピクセル配列を引数に渡して newGraphics 関数を呼べば OK です。

この関数は、変換によって生成した新しいグラフィックスデータにID番号を割りふって返すので、 それをint型変数 outputGraphics に控えています（ファイルの保存の際に使います）。

ファイルの保存

続いて、ファイルの保存処理です。

変数 outputFilePath が保存ファイル名ですが、 同じファイル名で上書き保存してしまうのは大抵の用途でまずそうなので、 開いたファイル名の末尾に「 _clear.png 」を付けたファイル名で保存するようにしています。

その次の行では、exportGraphics 関数を呼んで、グラフィックスデータをPNG形式の画像ファイルに保存しています。 そして、ユーザーに処理完了（と保存ファイルのパス）を伝えるメッセージを表示しています。

終了

最後に、グラフィックスデータを解放し、プログラムを終了しています。

deleteGraphics は、グラフィックスデータを解放する関数です。 どうせプログラムを終了した時点で解放されるのですが、後片付け的な感じで明示的に解放しています。 その後、exit 関数を呼んでプログラムを終了しています （これが無いと、ユーザーがコンソール画面を閉じるまで終了しません）。

コード内容は以上です。

ライセンス

このVCSSL/Vnanoコード（ 拡張子が「.vcssl」や「.vnano」のファイル ）は実質的な著作権フリー（パブリックドメイン) である CC0 の状態で公開しています※。 記事中にC言語/C++/Java言語などでのサンプルコードが掲載されいてる場合は、それらについても同様です。 そのままでのご利用はもちろん、改造や流用などもご自由に行ってください。

※ ただし、このコードの配布フォルダ内には、ダウンロード後すぐに実行できるように、 VCSSLの実行環境も同梱されており、そのライセンス文書は「 License 」フォルダ内に同梱されています （要約すると、商用・非商用問わず自由に使用できますが、使用の結果に対して開発元は一切の責任を負いません、といった具合の内容です）。 配布フォルダ内の各構成物の一覧やライセンスについては「 ReadMe_使用方法_必ずお読みください.txt 」をご参照ください。

※ Vnano の実行環境については、別途スクリプトエンジンのソースコードも一般公開しており、 何らかのソフトウェア内に組み込んでご利用いただく事も可能です。詳細はこちらをご参照ください。

この記事中の商標などについて

• OracleとJavaは、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。文中の社名、商品名等は各社の商標または登録商標である場合があります。
• Windows は、米国 Microsoft Corporation の米国およびその他の国における登録商標です。この記事は独立著作物であり、Microsoft Corporation と関連のある、もしくはスポンサーを受けるものではありません。
• Linux は、Linus Torvalds 氏の米国およびその他の国における商標または登録商標です。
• その他、文中に使用されている商標は、その商標を保持する各社の各国における商標または登録商標です。