なんとなくコマンド(22) sips+JavaScriptで画像処理その１

node.jsをインストールする

　次は他の環境でもJavaScriptを動作させてみましょう。Webブラウザじゃ駄目なの？という人もいるかもしれません。Webブラウザだとセキュリティ的な制約などがあり、できないことが多々あります。そこで、定番のnode.jsをインストールして、JavaScriptを動かします。なお、今回は簡単なサンプルしか動かさないので、すでにnode.jsをインストール済みなら、それを利用しても構いません。特に最新版である必要もありません。また、node.jsには最新版と長期サポート(LTS)版がありますが、どちらをインストールしても構いません。

node.jsをインストールするには以下のページにアクセスします。

・node.js
https://nodejs.org/ja/

ここでは最新版をダウンロードします。アクセス時に自動的にOSが判別され対応したインストーラーがダウンロードされます。

なお、macOSの場合、図のようなダイアログが出ることがあります。この場合は「許可」をクリックしてダウンロードしてください。

他のOSやバージョンをダウンロードしてインストールしたい場合は以下のページにアクセスしてください。

https://nodejs.org/ja/download/

後はインストーラーの指示に従って進めます。ここではWindows 10の例を掲載しています。矢印で示すボタンをクリックしてインストールを進めてください。

無事にインストールされたかどうか確認してみましょう。macOSの場合はターミナルから以下のように入力します。するとインストールしたnode.jsのバージョンが表示されます。-vでなく—versionを指定しても構いません。どちらでも同じ結果になります。

node -v

Windows 10の場合はコマンドプロンプトから行います。node.jsを入れるとNode.js command promptが追加されスタートメニューから選択できるようになります。これを選択して起動しても構いません。コマンドラインから以下のように入力するとnode.jsのバージョンが表示されます。

node -v

バージョンが表示されない場合は正しくインストールできなかったか、もしかしたらパスが通っていない、正常に設定されなかった可能性があります。
アンインストールして再度インストールするか、それでもうまく行かない場合は新規に管理者権限を持つユーザー（アカウント）を作成し、そのユーザーでnode.jsをインストールしてみてください。

node.jsでJavaScriptを動かす

　無事にnode.jsがインストールでき動くようになったら、簡単なスクリプトを実行してみましょう。すでに最初に作成したsample1.jsファイルを実行してみましょう。sample1.jsは以下の内容になっています。

・sample1.js

console.log(123456);

カレントディレクトリに、このsample1.jsファイルがある場合、以下のようにするとスクリプトが実行されます。

node sample1.js

他のサンプルも実行してみましょう。最新版のnode.jsでは巨大な値を扱うBigIntも問題なく処理できます。古いnode.jsで動かしている人はエラーが出るかもしれません。

・sample2.js

console.log(Math.PI);
console.log(new Date());

・sample3.js

const str1="Mac ";
let str2=new String("sips");
var str3=str1+str2;
console.log(str3);

・sample4.js

let text="JavaScrip,JAVA,sips,Japan"
for(let i of text.matchAll(/ja/gi)){
  console.log(i);
}

・sample5.js

console.log(globalThis);

・sample6.js

var n1=1234567890123456789;
var n2=BigInt(n1);
console.log(n1);
console.log(n2);

node.jsは、いろいろモジュールもありますし、解説ページなど豊富にあります。興味ある方は勉強してみるとよいでしょう。ラズベリーパイにもインストールできるので興味ある方は検索してインストールしてみるとよいでしょう。

簡単な図形を描いてみる

　と言うことで本題に戻ります。まずは簡単な図形を描いてみましょう。sipsでの図形描画はPhotoshop/GIMP/Paintなどと同じピクセルベースで行われます。つまり点（ピクセル）単位で処理ができるということです。
Illustrator/Inkscape/Corel Drawなどのようにベクトルベースではありません。が、描画するための命令（メソッド）はベクトルベースのような指示の仕方になります。古くからのUNIXユーザーもしくはDTP（Desktop Publishing）を知ってる人ならばPostScript/GhostScriptでの描画機能と似たようなものだと思ってもよいかもしれません。
Webでのベクトルベース図形やInkscapeを使った事があるなら、Canvas 2Dよりも前に登場し現在も使われているSVG（Scalable Vector Graphics）と似たような感じと言えばよいでしょうか。

sipsでのグラフィックはWebのCanvas 2Dそのもので多くのコードがそのまま使用できますが、最初の手続きが多少異なります。異なるのは最初と出力部分です。Webではブラウザが出力先になりますが、sipsではファイルになります。速度的な部分に問題がなければ標準出力も含まれるでしょう。

という事で実際に四角形を描いてみましょう。まず、以下のようにして描画するキャンバスを生成します。自分で適当に使うだけならconstでなくてletでも構いません。varを使って宣言しても今回のようなシンプルなもので試験的用途なら問題ありません。ライブラリにしたり大規模な用途に使用するなら、constかletにしておくのが妥当でしょう。

const canvas = new Canvas(320, 240);

Webではキャンバスは2D（二次元平面へのピクセル描画）だけでなく3D（三次元空間への描画）も扱えますが、sipsの場合は2Dのみです。つまり上記のようにすると2Dのキャンバスが用意され各種機能が使えるようになります。WebでのCanvas 2DではgetContext()メソッドでコンテキストを取得しますが、sipsではこの段階でgetContext("2d")と同じ状態（2Dコンテキストを取得した状態）となっています。

まずは四角形を描いてみましょう。四角形を描画する場合はfillRect()メソッドを使います。
パラメータは描画する座標値(左、上、右、下)になります。座標系は一般的なコンピューター系と同様に左上が原点で右下にいくに従って座標値が大きくなります。

canvas.fillRect(30, 30, 50, 50);

sipsの場合、四角形を描いても、ファイル等に出力しないと正しく描画されたかわかりません。Webブラウザなら、描画すれば自動的に画面に表示されますが、sipsの場合は自動的に表示されません。
そこで描画したら結果をファイルに保存するようにします。このファイルに出力するOutputオブジェクトはsips特有のものです。

Outputオブジェクト生成時に出力するキャンバスとファイルパスを指定します。以下のようにするとカレントディレクトリにdraw1.pngというPNG形式の画像ファイルが保存されます。

let output = new Output(canvas, "draw1.png");
output.addToQueue();

3番目のパラメーターで明確な形式を指定できますが、2番目のファイル名の拡張子を判別し自動的に対応する画像形式として処理してくれます。なお、ファイル名にパスを指定しても無効になるようです。相対パス、絶対パスとも駄目だったので、ここらへんは使用にあたって注意が必要なところかもしれません。

ここまでをまとめると以下のスクリプトになります。

・sample7.js

const canvas = new Canvas(320, 240);
canvas.fillRect(30, 30, 50, 50);
let output = new Output(canvas, "draw1.png");
output.addToQueue();

以下のように入力して実行するとカレントディレクトリにdraw1.pngという名前の画像ファイルが生成されます。

sips -j sample7.js

四角形の塗りの色を指定する場合はfillStyle()メソッドを使います。RGB形式で指定しcanvas.fillStyle = "rgb(255,0,0)"のように指定します。輝度は赤、緑、青の順番で指定します。値は0〜255で値が大きくなるほど明るくなります。

・sample8.js

const canvas = new Canvas(320, 240);
canvas.fillStyle = "rgb(255,0,0)";
canvas.fillRect(30, 30, 50, 50);
let output = new Output(canvas, "drawt2.png");
output.addToQueue();