[ 前へ | 目次 | 次へ ]
Now Loading...
ダウンロード
PC (※スマートフォンでは動きません) でダウンロードし、ZIPファイルを右クリックメニューから展開して、できたフォルダ内の「 VCSSL.bat(バッチファイル) 」をダブルクリックすると起動します。 Linux等では「 VCSSL.jar 」をコマンド実行してください。
» 詳しい使用方法や、エラーで展開できない際の対応方法などはこちら

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

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

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

単純に、特定色を透明で置き換える例
前回のコードで行った、特定色からの単純な一致比較・置き換え処理です。透明化したい部分を、あらかじめ均質な色で塗れる場合には便利です。しかし、色ムラがあると対応できません。

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

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

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

透明化対象の色を、RGB成分が満たす条件で指定する
透明化対象の色に幅をもたせる事ができ、透明化したい部分と残したい部分を、条件指定によって調整できます。

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

使用方法

ダウンロードと展開(解凍)

まず、PC(スマホは未対応)で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされるので、そのZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開(解凍)してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。

» 展開がエラーで止まってしまう場合は…

なお、Linux® 等をご使用で、右クリックメニューから展開するとファイル名が文字化けしてしまう場合は、 コマンドライン端末でZIPファイルのある場所まで cd した上で「 unzip -O cp932 ZIPファイル名 」で展開してみてください。

プログラムの起動

Microsoft® Windows® をご使用の場合

上記の通りにZIPファイルを展開したフォルダ内にある、 「 VCSSL.bat(種類はバッチファイル) 」をダブルクリック実行してください。 もしプログラムの内容を書き変えながら使いたい場合は、代わりに「 VCSSL_Editor.bat 」を実行してください。

実行すると、最初にメモリー使用量や、(必要な場合のみ)Java®実行環境を自動で入手するか 等を尋ねられるので、適時答えると、プログラムが起動します。2回目以降はすぐに起動します。

※ ここで入手したJava®実行環境は、ZIPファイルを展開した中の「 jre 」フォルダ内にダウンロードされ、このプログラムの実行のみに使用されます。PC全体に影響する形でインストールされる事はありません。

Linux® 等やその他のOSをご使用の場合

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

java -jar VCSSL.jar
(プログラムの内容を書き変えながら使いたい場合は、代わりに VCSSL_Editor.jar を実行)

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

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

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

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

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

ファイルの選択

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

サンプル画像
サンプル画像「 sample.png 」
ダウンロード・解凍したフォルダ内に同梱されています。

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

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

条件の書き方
条件の記述スタイル(文法)
C言語で if 文の中に書くような(条件式の)スタイルで記述します。正確には、C言語ではなくVCSSLの文法で書く必要がありますが、条件式については大体同じです。
RGBの各成分を表す変数
赤成分は「 r 」、緑成分は「 g 」、青成分は「 b 」 という名前の変数で表します。
「〜以上」や「〜未満」といった関係
「 <= 」や「 < 」、「 >= 」や「 > 」といった、不等号の記号が使えます(イコールは必ず < > の右側に書いてください)。
例: r <= 100    (赤成分が100以下の色を透明化)
一致と不一致
「 一致する 」は「 ==(イコールが2個連続) 」、「 一致しない 」は「 != 」で表せます。
例: r == 100    (赤成分がちょうど100の色を透明化)
「 かつ 」や「 または 」
「 かつ 」は「 && 」、「 または 」は「 || 」で表せます。 複数組み合わせて使用する場合は、必ずカッコ ( ) を使用して、かかる範囲をはっきりさせる必要があります( この点はC言語よりも厳しくなっています )。
例: (r < 50 && g >= 80) || b > 100
(『「赤が50未満かつ緑が80以上」か、または青が100より大きい』部分を透明化)

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

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

透明化したファイルの保存(自動)

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

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

サンプル画像の透明化結果
サンプル画像を透明化した結果「 sample.png_clear.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 とすれば、

pixel [ y ][ x ][ RGBAのどの成分かを指定する番号 ]

のようにインデックスを割りふった配列で表せます。 配列の要素数は [ 画像の幅 ][ 画像の高さ ][ 色成分の数 = 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のプログラミングガイド(無料)はこちらへ!

上記のコードはプログラミング言語VCSSLで記述されており、VCSSLのプログラミングガイドは下記で無料公開しています。 上記のコードを改造したい方や、新しいコードを書いてみたい方はぜひご活用ください!

ブラウザで読めるWeb版だけでなく、PDF版も無料で配布しています!

スタートアップガイド( プログラミングがはじめての方向け )
プログラミングの入門書に相当する内容です。プログラミングが初めての方はこちらがおすすめです。
即席ガイド( C系言語ユーザー向け )
C言語や C++ などのC系の言語を扱われている方が、即席でVCSSLを扱うための簡易ガイドです。
文法ガイド
VCSSLの文法や基本的な機能を淡々とまとめた、リファレンスマニュアル的な位置づけのガイドです。
GUI開発ガイド
ボタンや入力項目などのGUI部品が並ぶ、画面を備えたVCSSLプログラムを開発するためのガイドです。
2DCG開発ガイド
画面上や画像ファイルなどに、2次元的な描画を行うVCSSLプログラムを開発するためのガイドです。
3DCG開発ガイド
画面上や画像ファイルなどに、3次元的な描画を行うVCSSLプログラムを開発するためのガイドです。
標準ライブラリ 仕様書
コード内で呼び出される関数は、大半が標準ライブラリのものです。その詳細仕様を掲載しています。

ライセンス

このVCSSLコード( 拡張子が「.vcssl」のファイル )は実質的な著作権フリー(パブリックドメイン) である CC0 の状態で公開しています。 そのままでのご利用はもちろん、言語の種類を問わず、改造や流用などもご自由に行ってください。

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

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

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

[ 前へ | 目次 | 次へ ]
画像を任意サイズに拡大・縮小する簡易ツール(複数ファイル一括処理版)

フォルダ内にある全ての画像ファイルを開き、任意のサイズに拡大・縮小して、別のフォルダに保存する簡易ツールです。
画像を任意サイズに拡大・縮小する簡易ツール

画像ファイルを開き、任意のサイズに拡大・縮小して、別名で保存する簡易ツールです。
画像の矩形(四角形)領域を切り抜く簡易ツール(複数ファイル一括処理版)

フォルダ内にある全ての画像ファイルを開き、その中の矩形(四角形)領域を切り抜いて、別のフォルダに保存する簡易ツールです。
画像の矩形(四角形)領域を切り抜く簡易ツール

画像ファイルを開き、その中の矩形(四角形)領域を切り抜いて保存する簡易ツールです。
連番画像をアニメーション再生する簡易ツール

フォルダ内の連番画像ファイルを、動画への変換不要で、そのままアニメーションとして再生できる簡易ツールです。
条件を満たす色を透明にする簡易ツール(複数ファイル一括処理版)

フォルダ内の全画像ファイルに対して、条件を満たす範囲の色を透明に置き換え、別のフォルダに保存する簡易ツールです。
特定の色を透明にする簡易ツール(複数ファイル一括処理版)

フォルダ内にある全てのPNG形式画像ファイルを開き、特定の色を透明に置き換えた上で、別のフォルダに保存する簡易ツールです。
条件を満たす色を透明にする簡易ツール

画像ファイルを開き、指定された条件を満たす色を透明に置き換えて保存する簡易ツールです。
特定の色を透明にする簡易ツール

画像ファイルを開き、特定の色を透明に置き換えて保存する簡易ツールです。
2DCGと3DCGの合成

2DCGと3DCGを一枚に合成し、画面に表示するプログラムの例です。
RGBやカラーコードの色表示と相互変換ができる簡易ツール

RGB値とカラーコードから、GUI画面上で色の表示や相互変換を行う事ができる簡易ツールです。
頂点配列によるモデルの変形アニメーション

頂点配列によってモデルを変形アニメーションさせるサンプルです。
頂点配列によるモデルの作成(四角形格子メッシュ形式)

四角形格子メッシュの形式で、頂点配列からモデルを作成するサンプルです。
この階層の目次
[ 前へ | 目次 | 次へ ]
お知らせ

Vnanoの公式サイトがオープン、チュートリアルやAPI仕様書等も掲載
2019年08月07日 - オープンソースのアプリケーション組み込み用スクリプトエンジン「 Vnano 」の公式サイトを開設しました。チュートリアルや、スクリプトエンジンのAPI仕様書などが参照できます。その概要をお知らせします。

リニアングラフ3D/2Dが連番ファイルのアニメーションに標準で対応
2019年07月17日 - リニアングラフ3D/2Dでは、7月17日公開の最新版より、連番ファイルを連続的に読み込みながらアニメーション描画するプログラムを同梱し、メニューから標準で使用可能になりました。その概要をお知らせします。

Vnanoのスクリプトエンジンアーキテクチャ解説2: コンパイラ
2019年07月03日 - オープンソースで開発中のスクリプトエンジン「 Vnano 」のアーキテクチャを解説する連載の第2回です。今回は、スクリプトを中間コードへと変換する、コンパイラ部分の内部をクローズアップして解説します。

新着
[公式ガイドサンプル] ユーザーのGUI操作に対して処理を行う

「VCSSL GUI開発ガイド」内のサンプルコードです。ユーザーがGUIを操作した際に行う処理を実装します。
2019年07月28日
[公式ガイドサンプル] 各種GUIコンポーネントを画面上に配置する

「VCSSL GUI開発ガイド」内のサンプルコードです。色々な種類のGUI部品を画面上に配置します。
2019年07月28日
連番ファイルから3Dグラフをアニメーション描画するツール

フォルダ内の連番データファイルを読み込み、3Dグラフを高速で連続描画して、アニメーションさせるツールです。グラフを連番の画像ファイルに保存する事もできます。
2019年06月03日
連番ファイルから2Dグラフをアニメーション描画するツール

フォルダ内の連番データファイルを読み込み、2Dグラフを高速で連続描画して、アニメーションさせるツールです。グラフを連番の画像ファイルに保存する事もできます。
2019年05月24日
[公式ガイドサンプル] 立体モデルを生成して3D空間に配置する

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体モデルを生成し、3D空間に配置します。
2019年05月21日
開発元Twitterアカウント