先日、HTML5 Canvas のサーバーサイド版である Node-Canvas を紹介しました：
Node.js から使えるサーバーサイド Canvas : node-canvas


HTML5 Canvas と互換性のある API を使って動的に Canvas 上に描画をします。実際には単に描画をするだけでなく、描画した内容を画像として取り出したりすることで、サーバー側の JavaScript で動的に画像ファイルを生成することができるようになり、とても便利なライブラリです。

実際に使っていて、１点問題気になることがありました。開発中は（日本語環境バッチリな）自分のマシンを使って動作テストなどを行うので気が付きにくいのですが、実際の本番サーバー上で動かした際にキャンバス上に描画した日本語文字列が化けてしまうケースを発見しました。

例えばこのようなコードを実行して、サーバーサイドで画像を動的に生成したとします：

  :
var fs = require( 'fs' );
var Canvas = require( 'canvas' ),
    Image = Canvas.Image;

  :

var canvas = new Canvas( 300, 300 );
var ctx = canvas.getContext( '2d' );

//. 赤い直線を１本描画する
ctx.beginPath();
ctx.moveTo( 100, 100 );
ctx.lineTo( 200, 200 );
ctx.strokeStyle = 'red';
ctx.stroke();

//. 文字列を表示する
ctx.fillText( 'ハローワールド！', 10, 30 );

//. 画像データをファイルにして保存する
var b64 = canvas.toDataURL().split( ',' )[1];
var buf = new Buffer( b64, 'base64' );
fs.writeFileSync( __dirname + '/images/aaa.png', buf );

  :

このコードを Node.js で実行すると、./images/aaa.png というファイル名で動的に画像ファイルが生成されて保存されます。が、その時に生成される画像で「ハローワールド！」と明示されている文字列はサーバー実行環境によって正しく表示されたり、されなかったりします：

（正しく表示される場合）


（文字化けを起こす場合）



これはサーバー OS 側に日本語フォントが導入されているかどうかで決まります。特にクラウド環境においては OS は（デフォルトでは）英語版が用意されることが多く、そのまま利用しても日本語フォントが用意されていないため、「ハローワールド」という文字列を正しく描画できず、結果として文字化けを起こしてしまうことになります。

ということは、仮に文字化けを起こしても、OS に日本語フォントを導入した上でアプリケーションサーバーを再起動すれば回避できる、ということになります。

が、ここで問題が発生します。IBM Bluemix のような PaaS 環境の場合、OS 環境設定の自由度が低く、用意されたプラットフォームをカスタマイズして使うハードルが高くなります。現に SSH でログインすることはできますが apt-get などは使えません。またフォントファイルを後から無理やりコピーしてもアプリケーションサーバーを再起動するとそのファイルは消えてしまいます。このような自由度があまり高くないプラットフォーム上で日本語を正しく表示させることが結構難しかったりします。

そしてなんと更に、Node-Canvas の Issue ボードによると、この部分にはどうもバグがあるらしく、（2017/May/29 現在）ステータスが Open になっているので、まだ解決できていない模様でした：
https://github.com/Automattic/node-canvas/issues/783


・・・と、とても困った状況なのですが、結論から言うとなんとかアプリケーション側の工夫で回避することができました。まずは日本語フォントが必要になるので、フリーの日本語フォントを適当にダウンロードしてきます。例えば eFont プロジェクトから配布されているさざなみフォントの最新版を使うことにします。アーカイブファイル（*.tar.bz2）をダウンロード＆展開し、sazanami-***.ttf というファイルをアプリケーション内の fonts/ ディレクトリに格納しておきます：


（以下のコードではゴシックフォントしか使いませんが、とりあえず明朝フォントと合わせて展開しておきます）


そしてコードの該当部分を以下のように変更します：

  :
var fs = require( 'fs' );
var Canvas = require( 'canvas' ),
    Image = Canvas.Image;

  :

var canvas = new Canvas( 300, 300 );
var ctx = canvas.getContext( '2d' );

//. 赤い直線を１本描画する
ctx.beginPath();
ctx.moveTo( 100, 100 );
ctx.lineTo( 200, 200 );
ctx.strokeStyle = 'red';
ctx.stroke();

//. フォントを強制指定する
var Font = Canvas.Font;
var myFont = new Font( 'myFont', 'fonts/sazanami-gothic.ttf' );
ctx.addFont( myFont );
ctx.font = '20px myFont';

//. 文字列を表示する
ctx.fillText( 'ハローワールド！', 10, 30 );

//. 画像データをファイルにして保存する
var b64 = canvas.toDataURL().split( ',' )[1];
var buf = new Buffer( b64, 'base64' );
fs.writeFileSync( __dirname + '/images/aaa.png', buf );

  :

これで実行すると、フォントが指定のものに強制指定され、日本語が化けずに表示できるようになります（下図は IBM Bluemix 環境下で実行した結果です）：



なお、上記の方法を使う場合、Ubuntu はこのままでも動くのですが、Mac OS X 環境においては Pango ライブラリを無効にした上で実行する必要があります。具体的には Node-Canvas を npm install した後で、node_modules/canvas/binding.gyp ファイルを編集し、15行目の値を 'false' にする（８行目と同じにする）作業を行い、再度 npm rebuild した上で node コマンドを実行する必要がありました。ご注意ください。

タグ ：

bluemix

nodejs

canvas

node-canvas

japanese

前回の続きです：
ラズパイに Kali Linux をインストールする

ラズベリーパイに Kali Linux のイメージを導入して起動する、という所までを紹介しました。これで OS としては動きますが、このままの状態では以下の２点の問題があります：
(1) （Kali Linux の真髄でもある）ペネトレーションテスト用ツールがまだ足りない
(2) ウェブブラウザなどで日本語表示ができない

この２つの問題を解決するためのセットアップを行います。

まずは (1) の問題、これは最新版のリポジトリを使って、モジュールを最新版に更新すれば解決します：

# apt-get update
# apt-get upgrade

特に２番目のコマンドの実行にはかなり時間がかかりますが、一晩かけるつもりで寝る前に実行するなどしてください。

次に (2) の問題、こちらは日本語フォントが含まれていないのでデフォルト状態ではブラウザで日本語ページを見たりしても文字化けしてしまうのでした。これは適当な日本語フォントを導入することで解決できます：

# apt-get install fonts-vlgothic

ここまで行うことでペネトレーションテスト用ツールがアプリケーションメニューからも利用できるようになります。またブラウザで日本語ページを見ても文字化けせずに表示できるようになります：



 

タグ ：

kali

japanese

setup

linux

ラズベリーパイベースのラップトップ PC である PiTop を、デスクトップ環境として整備しています。さすがにメイン機として使うのは・・・　ですが、サブ機として支障なく使える程度にできないだろうか、と思っています。

ただ改めてラズパイを使ってみると、色々足りない部分も見えてきます。それら足りない部分を導入する手順を調べてみました。ちなみに PiTop で使う OS は Raspbian Jessie とします。


日本語表示

導入手順によってはインストール時にある程度設定できるので、初めから日本語表示ができる環境を手にしている人もいるかもしれませんが念のため。　以下の手順で日本語が正しく表示できるように（□みたいな文字にならないように）して、更に日本語フォントを導入します：

$ sudo raspi-config

"Innternnationalisation Options" 選択
"Change Locale" 選択
"ja_JP.UTF-8" 選択し、デフォルト言語に設定し raspi-config を終了

$ sudo apt-get install ttf-kochi-gothic xfonts-intl-japanese xfonts-intl-japanese-big

日本語入力

日本語が正しく表示できても、入力となると別の設定が必要です。今回は IBUS を使って日本語を入力できるよう、必要なアプリを導入して日本語入力設定を行います：

$ sudo apt-get install ibus-anthy

メニューから「設定」-「IBUS の設定」を選択
「インプットメソッド」タブで「日本語 - Anthy」を設定

これで画面右上の IBUS アイコンをクリックすることで入力言語を切り替えることができるようになります。


Eclipse

自分がこれがないと Java アプリが作れません。というほど依存している統合開発環境である Eclipse のラズパイ版を導入します。ラズパイ用の Pleiades （ちなみに Eclipse 3.8 ベース）が用意されていたとは・・・

$ sudo apt-get install pleiades

スクリーンショット

ラズパイでスクリーンショットを撮るにはいくつかの方法があります。自分はこれまでは直接スクリーンショット撮ることはなく、VNC 経由で別PCから画面ショットを撮っていました。が、今回は折角デスクトップ環境を手に入れることができたので、単体で取得できる scrot を使うことにします：

$ sudo apt-get install scrot

その他

個人的によく使う screen と vim を入れておきます：

$ sudo apt-get install screen vim

screen と同じくらい使う tmux も Raspbian 上で使うことができそうです：

$ sudo apt-get install libevent-dev libncurses5-dev
$ cd /tmp
$ wget https://github.com/tmux/tmux/archive/2.2.tar.gz
$ tar xvfz 2.2.tar.gz
$ cd tmux-2.2
$ ./configure && make
$ sudo make install

とあるメインフレームコンテストに参加するために IBM 3270 環境が必要になるのでコマンドライン版を導入します：

$ cd /tmp
$ mkdir 3270
$ cd 3270
$ wget http://downloads.sourceforge.net/project/x3270/x3270/3.3.14ga11/suite3270-3.3.14ga11-src.tgz
$ tar xavf suite3270-3.3.14ga11-src.tgz
$ cd c3270-3.3
$ ./configure && make
$ sudo make install

自分はいい歳したオッサンなので、オッサンが喜ぶような X11 アプリをまとめて導入しておきます：

$ sudo apt-get install x11-apps

これで懐かしい "xeyes" などが使えるようになります：




その他プログラミング言語やミドルウェアについては適当に。

タグ ：

pitop

desktop

japanese