windows10にphpとimagemagickを入れてSVGをアニメーションGIFにする

何年か前に windowsで ImageMagick をPHPで使おうとして、
なかなかうまくいかなかったこともあって、
今回必要に迫られて、まとめてみました。

# まず、phpをダウンロードします。
[windows php download] (http://windows.php.net/download)
現時点では 7.1.4 が最新でした。
私のPCは64bit CPUですので、VC14 x64 Thread Safeをダウンロードしました。
[php-7.1.4-Win32-VC14-x64.zip] (http://windows.php.net/downloads/releases/php-7.1.4-Win32-VC14-x64.zip)

# ダウンロードした zip を展開します。
場所は自由に決めていいです。
私は C:\bin\php-7.1.4-Win32-VC14-x64 に置きました。

# 起動してみます。
C:\bin\php-7.1.4-Win32-VC14-x64\index.php ファイルを以下の内容で作成し、

```php:index.php
<?php phpinfo();
```
コマンドプロンプトで

```bat:コマンドプロンプト
> CD /D C:\bin\php-7.1.4-Win32-VC14-x64
> php -S 127.0.0.1:80
```

を実行します。

ブラウザで http://localhost/ にアクセスして以下の画面が表示されればphp葉動作しています。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/82535/268aa61e-5014-c431-0994-41a1532bac5e.png)

80番ポートが使えない場合は8888などに変えてみてください。
>
```bat:8888番ポート使用時のコマンド
php -S 127.0.0.1:8888
```
http://localhost:8888/ で確認

# 次に imagemagick をダウンロードします。
imagemagickはphpのDLL(windows用)とimagemagickランタイムの両方が必要です。

まずは DLL を以下からダウンロードします。
[php_imagick-3.4.3-7.1-ts-vc14-x64.zip] (http://windows.php.net/downloads/pecl/releases/imagick/3.4.3/php_imagick-3.4.3-7.1-ts-vc14-x64.zip)
ファイル名の tsはThread Safeのことで vc14, x64 の文字と合わせて php と一致するものをダウンロードしてください。

ダウンロードした zip 内の php_imagick.dll を C:\bin\php-7.1.4-Win32-VC14-x64\ext に置きます。

このDLLをPHPから使用するようPHPの設定ファイルを次の内容で C:\bin\php-7.1.4-Win32-VC14-x64\php.ini に作ります。

```ini:php.ini
extension_dir="ext"
extension=php_imagick.dll
```

次に imagemagickランタイムを以下からダウンロードします。
[ImageMagick-6.9.3-7-vc14-x64.zip] (http://windows.php.net/downloads/pecl/deps/ImageMagick-6.9.3-7-vc14-x64.zip)
これも x14, x64 をPHPに合わせてダウンロードしてください。

ダウンロードした zip ファイルを C:\bin\ImageMagick-6.9.3-7-vc14-x64.zip に展開します。

そして、ランタイムをどこでも実行できるようPATH環境変数を設定します。

```bat:コマンドプロンプト
set MAGICK_HOME=C:\bin\ImageMagick-6.9.3-7-vc14-x64\bin
set PATH=%PATH%;C:\bin\ImageMagick-6.9.3-7-vc14-x64\bin;
setx MAGICK_HOME "C:\bin\ImageMagick-6.9.3-7-vc14-x64\bin" /M
setx PATH "%PATH%;C:\bin\ImageMagick-6.9.3-7-vc14-x64\bin;" /M
```
set は現在のプロンプトに設定を反映し、 setxはPC全体に設定を反映します。
(setxの実行には管理者権限が必要です。)

これで PHP から imagemagick を使う準備ができました。
もう一度 php で HTTPサーバを起動し、設定内容を確認してみます。

```bat:コマンドプロンプト
> CD /D C:\bin\php-7.1.4-Win32-VC14-x64
> php -S 127.0.0.1:80
```
次のように imagick の設定が出ていればOKです。
![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/82535/4158bd29-a614-0ac1-d6ad-eadcf88d072b.png)

もし、HTTPサーバ時にエラーが出る場合は、VC14のランタイムを以下からダウンロードしてインストールしてください。
[Microsoft Visual C++ 2015 再頒布可能パッケージ Update 3](https://www.microsoft.com/ja-jp/download/details.aspx?id=53587)

# SVGをアニメーションGIFにする

アニメーションさせるため、svgファイルを4種類用意します。

```xml:1.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="70">
<rect x="0" y="0" width="500" height="70" fill="#fbfbc7"/>
<text x="10" y="50" stroke="#ff0000" stroke-width="10" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif">
0123456789
</text>
<text x="10" y="50" fill="#ffffff" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif">
0123456789
</text>
</svg>
```
```xml:2.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="70">
<rect x="0" y="0" width="500" height="70" fill="#fbfbc7"/>
<text x="10" y="50" stroke="#ff0000" stroke-width="10" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.1,1)">
0123456789
</text>
<text x="10" y="50" fill="#ffff99" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.1,1)">
0123456789
</text>
</svg>
```
```xml:3.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="70">
<rect x="0" y="0" width="500" height="70" fill="#fbfbc7"/>
<text x="10" y="50" stroke="#ff0000" stroke-width="10" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.5,1)">
0123456789
</text>
<text x="10" y="50" fill="#99ffff" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.5,1)">
0123456789
</text>
</svg>
```
```xml:4.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="70">
<rect x="0" y="0" width="500" height="70" fill="#fbfbc7"/>
<text x="10" y="50" stroke="#ff0000" stroke-width="10" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.3,1)">
0123456789
</text>
<text x="10" y="50" fill="#ff99ff" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.3,1)">
0123456789
</text>
</svg>
```
複数のSVGをアニメーションGIFに変換するプログラムを作ります。

```php:svg2agif.php
<?php
/*アニメーションGIF作成*/
$gif = new Imagick();

/*各コマを追加*/
foreach(['1.svg', '2.svg', '3.svg', '4.svg'] as $file) {
	$i = new Imagick();
	$i->readImage($file); //SVGファイルを読む
	$i->setImageFormat('gif'); //GIFに変換
	$i->setImageDelay(10); //表示時間(ミリ秒)
	$gif->addImage($i); //アニメーションに追加
	$i->destroy(); //破棄
}
$gif->setImageIterations(0); //表示回数(0で無限)
$gif->setFormat('gif');
$gif->writeImages('svg.gif', true); //ファイル(svg.gif)に出力

/*ブラウザに出力*/
header('Content-Type: image/gif');
readfile('svg.gif');

$gif->destroy(); //破棄
```

1.svg, 2.svg, 3.svg, 4.svg, svg2agif.php ファイルを C:\bin\php-7.1.4-Win32-VC14-x64 に置いてブラウザで http://localhost/svg2agif.php にアクセスします。

以下のように表示されれば成功です。
![svg.gif](https://qiita-image-store.s3.amazonaws.com/0/82535/614ce9b3-5d76-2e0b-3972-85579d308421.gif)

以上