画像からExifの読取り削除するコマンドあれこれ

Exifは、カメラでの撮影時にその時の状況などを写真へ付加する情報です。

これを応用することでいつどこで撮影したかや、カメラのシャッタースピードやISO感度なんかも記録されているので、後でそれを元に写真を加工したりと便利な面もある一方で、何のカメラを使っているかやいつどこに行って撮影したかという情報からプライバシーが侵害される危険性もあったりします。

少し前に、芸能人がブログにアップした画像から、何の携帯を使っているかとかがリスト化されて問題になっていたりもしました。

そういったことから写真の情報をネットに公開する際には、Exifを削除してから公開することが望ましいわけですが、個人で加工したりするのは面倒であったりもしますし、Webサービス側もそういった利用者のプライバシーを保護する目的でアップされた画像からExifを削除するというようなことが必要になってきたりもします。

というわけで、Linux上でコマンドラインから画像ファイルのExif情報を読み取ったり削除することは出来ないかと調べてみたら幾つかコマンドがあるようなのでまとめてみました。

なお、インストール等の情報はCentOS5.7をベースに書いています。

jheadコマンドの使い方

jheadコマンド を使えば、コマンドラインから一発で画像ファイルのExifを読み取ったり削除するということが可能です。

インストール方法は、ソースファイルをサーバー上に展開して、

$ make
$ su -
# make install

をするだけです。

これで、jheadコマンドが利用可能になっています。

まずは、Exifの情報を表示してみます。

$ jhead hoge.jpg
File name    : hoge.jpg
File size    : 127534 bytes
File date    : 2011:10:10 23:33:14
Camera make  : Apple
Camera model : iPhone 4
Date/Time    : 2011:10:09 19:36:23
Resolution   : 478 x 640
Flash used   : No
Focal length : 3.8mm
Exposure time: 0.067 s  (1/15)
Aperture     : f/2.8
ISO equiv.   : 1000
Whitebalance : Auto
Metering Mode: pattern
Exposure     : program (auto)
GPS Latitude : N 35d 39.61m  0s
GPS Longitude: E 139d 43.87m  0s

上記の情報からもわかるように、iPhone4で2011/10/09の19時36分に撮影した情報だとわかります。

また、iPhoneで撮影するとGPSの情報も記録されるので、緯度経度からどこで撮影したものかもわかってしまいます。（この画像は六本木ヒルズを撮影したものです）

$ jhead -v hoge.jpg

と実行すればより多くの情報を見ることもできます。

続いて、Exifを削除する方法ですが、

$ jhead -purejpg hoge.jpg
Modified: hoge.jpg
$ jhead hoge.jpg
File name    : hoge.jpg
File size    : 126810 bytes
File date    : 2011:10:10 23:33:14
Resolution   : 478 x 640

上記のように「-purejpg」オプションを付けて実行します。

その後、再度jheadコマンドを実行していますがファイルサイズや画像サイズ以外の余計な情報は全て削除されていることがわかります。

割愛しますが、jheadコマンドはこの他にも豊富なオプションが用意されており、画像をローテーションさせたり撮影日時のファイル名へ一括でリネームしたりすることも出来ます。

exiftoolの使い方

exiftool はjheadコマンド同様にコマンドラインから画像ファイルのExif情報を簡単に操作することが出来ます。

インストール方法は、サーバー上でソースファイルを展開した後に、下記のような感じでビルドします。

$ perl Makefile.PL
$ make
$ su -
# make install

exiftoolもコマンドラインから簡単にExif情報を読み取ることが可能です。

$ exiftool hoge.jpg
ExifTool Version Number         : 8.66
File Name                       : hoge.jpg
Directory                       : .
File Size                       : 125 kB
File Modification Date/Time     : 2011:10:11 00:13:57+09:00
File Permissions                : rw-r--r--
File Type                       : JPEG
MIME Type                       : image/jpeg
Exif Byte Order                 : Little-endian (Intel, II)
Make                            : Apple
Camera Model Name               : iPhone 4
X Resolution                    : 72
Y Resolution                    : 72
Resolution Unit                 : inches
Software                        : 4.3.5
Modify Date                     : 2011:10:09 19:36:23
Y Cb Cr Positioning             : Centered
Exposure Time                   : 1/15
F Number                        : 2.8
Exposure Program                : Program AE
ISO                             : 1000
Exif Version                    : 0221
Date/Time Original              : 2011:10:09 19:36:23
Create Date                     : 2011:10:09 19:36:23
Components Configuration        : -, -, -, Y
Shutter Speed Value             : 1/15
Aperture Value                  : 2.8
Metering Mode                   : Multi-segment
Flash                           : Off, Did not fire
Focal Length                    : 3.9 mm
Flashpix Version                : 0100
Color Space                     : sRGB
Exif Image Width                : 1936
Exif Image Height               : 2592
Sensing Method                  : One-chip color area
GPS Latitude Ref                : North
GPS Longitude Ref               : East
GPS Time Stamp                  : 12:15:40
GPS Img Direction Ref           : True North
GPS Img Direction               : 168.5023041
Subject Area                    : 1295 967 699 696
Exposure Mode                   : Auto
White Balance                   : Auto
Scene Capture Type              : Standard
Sharpness                       : Soft
Image Width                     : 478
Image Height                    : 640
Encoding Process                : Baseline DCT, Huffman coding
Bits Per Sample                 : 8
Color Components                : 3
Y Cb Cr Sub Sampling            : YCbCr4:2:0 (2 2)
Aperture                        : 2.8
GPS Latitude                    : 35 deg 39' 36.60" N
GPS Longitude                   : 139 deg 43' 52.20" E
GPS Position                    : 35 deg 39' 36.60" N, 139 deg 43' 52.20" E
Image Size                      : 478x640
Shutter Speed                   : 1/15
Focal Length                    : 3.9 mm
Light Value                     : 3.6

jheadコマンドに比べてデフォルト表示する情報が多くなっています。 （読み取れる情報は一緒ですが）

特定の項目だけを見たい場合は、オプションに指定すればその情報だけを表示できます。

$ exiftool -Make -Model hoge.jpg
Make                            : Apple
Camera Model Name               : iPhone 4

Exifの削除時には、「-all=」オプションを使います。

$ exiftool -all= hoge.jpg
    1 image files updated
$ exiftool hoge.jpg
ExifTool Version Number         : 8.66
File Name                       : hoge.jpg
Directory                       : .
File Size                       : 124 kB
File Modification Date/Time     : 2011:10:11 00:18:54+09:00
File Permissions                : rw-r--r--
File Type                       : JPEG
MIME Type                       : image/jpeg
Image Width                     : 478
Image Height                    : 640
Encoding Process                : Baseline DCT, Huffman coding
Bits Per Sample                 : 8
Color Components                : 3
Y Cb Cr Sub Sampling            : YCbCr4:2:0 (2 2)
Image Size                      : 478x640

表示する項目は多いですが、Exifに含まれる情報は綺麗さっぱり削除されています。

こちらも非常に多くのオプションが用意されているので「man exiftool」で確認してみてください。

ImageMagickを使ってExifの表示・削除を行う

画像の加工に定評のあるImageMagickですが、Exifの表示や削除も行うことが出来ます。

インストールは、パッケージが用意されているのでyumコマンド経由で行うのが簡単です。

# yum search ImageMagick
-snip-
ImageMagick.x86_64 : 画像の表示/処理用の X アプリケーション
-snip-
# yum install ImageMagick.x86_64

ImageMagicでExif情報を表示するには、identifyコマンドを使います。

$ identify -verbose hoge.jpg
Image: hoge.jpg
  Format: JPEG (Joint Photographic Experts Group JFIF format)
  Class: DirectClass
  Geometry: 478x640
  Type: TrueColor
  Endianess: Undefined
  Colorspace: RGB
  Channel depth:
    Red: 8-bits
    Green: 8-bits
    Blue: 8-bits
  Channel statistics:
    Red:
      Min: 0 (0)
      Max: 255 (1)
      Mean: 55.9857 (0.219552)
      Standard deviation: 69.9776 (0.274422)
    Green:
      Min: 0 (0)
      Max: 255 (1)
      Mean: 53.1425 (0.208402)
      Standard deviation: 67.0988 (0.263133)
    Blue:
      Min: 0 (0)
      Max: 255 (1)
      Mean: 49.6519 (0.194713)
      Standard deviation: 64.7818 (0.254046)
  Colors: 37673
  Rendering intent: Undefined
  Resolution: 72x72
  Units: PixelsPerInch
  Filesize: 1.2e+02kb
  Interlace: None
  Background color: white
  Border color: #DFDFDF
  Matte color: grey74
  Page geometry: 478x640+0+0
  Dispose: Undefined
  Iterations: 0
  Compression: JPEG
  Quality: 96
  Orientation: Undefined
  JPEG-Colorspace: 2
  JPEG-Sampling-factors: 2x2,1x1,1x1
  Signature: ad46060cb05ff394947cb7775054a47111c1cf7e7b01da6efd3c71fb8a654a2b
  Profile-exif: 738 bytes
0x00000000: 78696600 0049492a 00080000 000f000f 01020006  Exif--II*-----------
0x00000190: 000000c2 00000010 01020009 000000c8 0000001a  --------------------
0x00000320: 01050001 000000d2 0000001b 01050001 000000da  --------------------
0x000004b0: 00000028 01030001 00000002 004d0131 01020006  ----(---------M-1---
0x00000640: 000000e2 00000032 01020014 000000e8 00000013  --------2-----------
0x000007d0: 02030001 00000001 004d0169 87040001 00000004  ----------M-i-------
0x00000960: 01000025 88040001 00000032 02000014 92030004  ----%-------2-------
0x00000af0: 000000fc 00000002 a4030001 00000000 004d0103  ------------------M-
0x00000c80: a4030001 00000000 00000006 a4030001 00000000  --------------------
0x00000e10: 0008000a a4030001 00000001 00000000 00000041  --------------------
0x00000fa0: 70706c65 00695068 6f6e6520 34007f48 00000001  Apple-iPhone 4--H---
0x00001130: 00000048 00000001 00000034 2e332e35 00323031  ----H-------4.3.5-20
0x000012c0: 313a3130 3a303920 31393a33 363a3233 000f05c7  11:10:09 19:36:23---
0x00001450: 03bb02b8 0212009a 82050001 000000e2 0100009d  --------------------
0x000015e0: 82050001 000000ea 01000022 88030001 00000002  ------------"-------
0x00001770: 00000027 88030001 000000e8 03000000 90070004  ----'---------------
0x00001900: 00000030 32323103 90020014 000000f2 01000004  ----0221------------
0x00001a90: 90020014 00000006 02000001 91070004 00000000  --------------------
0x00001c20: 00000101 920a0001 0000001a 02000002 92050001  --------------------
0x00001db0: 00000022 02000007 92030001 00000005 00000009  ----"---------------
0x00001f40: 92030001 00000010 0000000a 92050001 0000002a  --------------------
0x000020d0: 02000000 a0070004 00000030 31303001 a0030001  *-----------0100----
0x00002260: 00000001 00000002 a0040001 00000090 07000003  --------------------
0x000023f0: a0040001 00000020 0a000017 a2030001 00000002  -------- -----------
0x00002580: 00000000 00000001 0000000f 0000000e 00000005  --------------------
0x00002710: 00000032 3031313a 31303a30 39203139 3a33363a  ----2011:10:09 19:36
0x000028a0: 32330032 3031313a 31303a30 39203139 3a33363a  :23-2011:10:09 19:36
0x00002a30: 32330019 130000e2 040000b9 100000a1 0500004d  :23-----------------
0x00002bc0: 00000014 00000007 00010002 00020000 004e0077  M-----------------N-
0x00002d50: 4a020005 00030000 008c0200 00030002 00020000  wJ------------------
0x00002ee0: 004500e4 f2040005 00030000 00a40200 00070005  --E-----------------
0x00003070: 00030000 00bc0200 00100002 00020000 00540000  ------------------T-
0x00003200: 00110005 00010000 00d40200 00000000 00230000  ------------------#-
0x00003390: 00010000 00790f00 00640000 00000000 00010000  ------y---d---------
0x00003520: 008b0000 00010000 00231100 00640000 00000000  ----------#---d-----
0x000036b0: 00010000 000b0000 00010000 00090000 00010000  --------------------
0x00003840: 00a00f00 00010000 00d58e00 00d90000 0000      ------------------
    Make: Apple.
    Model: iPhone 4.
    X Resolution: 72/1
    Y Resolution: 72/1
    Resolution Unit: 2
    Software: 4.3.5.
    Date Time: 2011:10:09 19:36:23.
    Y Cb Cr Positioning: 1
    Exif Offset: 260
    Exposure Time: 1/15
    F Number: 14/5
    Exposure Program: 2
    ISO Speed Ratings: 1000
    Exif Version: 0221
    Date Time Original: 2011:10:09 19:36:23.
    Date Time Digitized: 2011:10:09 19:36:23.
    Components Configuration: ....
    Shutter Speed Value: 4889/1250
    Aperture Value: 4281/1441
    Metering Mode: 5
    Flash: 16
    Focal Length: 77/20
    Flash Pix Version: 0100
    Color Space: 1
    Exif Image Width: 1936
    Exif Image Length: 2592
    Sensing Method: 2
    GPS Info: 562
    Subject Area: 1295
    Exposure Mode: 0
    White Balance: 0
    Scene Capture Type: 0
    Sharpness: 1
  Tainted: False
  Version: ImageMagick 6.2.8 10/20/10 Q16 file:/usr/share/ImageMagick-6.2.8/doc/index.html

こちらも非常に多くの情報が表示されますので、必要があれば特定の項目だけを表示するという方がよいかもしれません。

$ identify -format "%[EXIF:Make] %[EXIF:Model]" hoge.jpg
Apple. iPhone 4.

指定オプションの詳細は、公式のマニュアル を参照してください。
最後に、ImageMagicでExifを削除する方法ですが、この場合はconvertコマンドを利用します。

$ convert -strip hoge.jpg foo.jpg
Image: foo.jpg
  Format: JPEG (Joint Photographic Experts Group JFIF format)
  Class: DirectClass
  Geometry: 478x640
  Type: TrueColor
  Endianess: Undefined
  Colorspace: RGB
  Channel depth:
    Red: 8-bits
    Green: 8-bits
    Blue: 8-bits
  Channel statistics:
    Red:
      Min: 0 (0)
      Max: 255 (1)
      Mean: 55.964 (0.219467)
      Standard deviation: 69.9302 (0.274236)
    Green:
      Min: 0 (0)
      Max: 255 (1)
      Mean: 53.1362 (0.208377)
      Standard deviation: 67.0765 (0.263045)
    Blue:
      Min: 0 (0)
      Max: 255 (1)
      Mean: 49.644 (0.194682)
      Standard deviation: 64.7416 (0.253889)
  Colors: 37420
  Rendering intent: Undefined
  Resolution: 72x72
  Units: PixelsPerInch
  Filesize: 1.2e+02kb
  Interlace: None
  Background color: white
  Border color: #DFDFDF
  Matte color: grey74
  Page geometry: 478x640+0+0
  Dispose: Undefined
  Iterations: 0
  Compression: JPEG
  Quality: 96
  Orientation: Undefined
  JPEG-Colorspace: 2
  JPEG-Sampling-factors: 2x2,1x1,1x1
  Signature: ccde99cc75db274980e81d7683c39850db9d6ed5e147f2a2e3b5717982c0ddc5
  Tainted: False
  Version: ImageMagick 6.2.8 10/20/10 Q16 file:/usr/share/ImageMagick-6.2.8/doc/index.html

Exif情報の表示する項目は違うものの、削除に関しては同様のことができるので環境に合わせて使えるものを使ってみるということでもよいかもしれません。

[PR]初心者おススメ！24時間サポートセキュリティ特化レンサバ！

[PR]低価格・携帯対応のSSLをお探しなら　ジオトラスト クイックSSLプレミアム

[PR]スマホやTV、PCで、いつでも映画や海外ドラマを見れる！今すぐ無料視聴！

関連記事

[PHP] 簡単に画像の加工ができるintervention/image

PDFを他のファイル形式に簡単に変換できるpoppler-utils

 

Linux上でファイルを削除してしまった際にさっくり復活できるextundelete

 

[PHP] pChartの使い方 - 棒グラフとレーダーチャートを描いてみる

 

ノンプログラミングでも利用可能！PHPで多様なグラフを作れるpChart

 

Webページをコマンドラインから一発でPDFや画像に変換する

 

ImageMagickを使ってコマンドラインからCAPTCHAを作ってみる

 

Linuxサーバー上でデータ操作に便利な10のコマンド

 

はてブ数の画像ってどうやって表示してんだろうって疑問に挑んでみた

 

mod_actionsを使ってドキュメントや画像、Flashファイルを保護する

[PHP] pChartの使い方 - 棒グラフとレーダーチャートを描いてみる

前回の「ノンプログラミングでも利用可能！PHPで多様なグラフを作れるpChart 」で、pChartの概要を書いてみましたが、多種多様でおまけにスタイリッシュなグラフを簡単に書くことができます。

前回はプログラムについて深く突っ込みませんでしたが、今回はpChartのライブラリを使ってPHPからグラフを描き出す方法について書いてみたいと思います。

pChartのライブラリを使うための準備

pChartのサンプルやサンドボックスを見たい場合は、pChartのソースをそのままドキュメントルート以下に設置するというやり方でも問題ありませんが、クラスライブラリだけを使いたい場合は、ドキュメントルート外におくだけでなく不要なファイルも消しておいたほうがよいでしょう。

まず、pChartのソースの中でクラスライブラリとして利用するにあたって必要なディレクトリは下記のものです。

.
`-- pchart
    |-- cache
    |-- class
    |-- data
    `-- fonts

各フォルダの中身のファイルはそのままにしておきます。

前回書いたように、日本語フォントを使い他場合は、fontsディレクトリに使いたいフォントのttfファイルを格納しておきましょう。

これらのディレクトリを、php.iniで定義されているinclude_path内に設置しておけば、プログラム側の呼び出し方も簡略化できます。

pChartで棒グラフを描いてみる

サンプルを見てもわかるように、pChartはかなり豊富なオプションがあるので、それらを全て網羅できるようなプログラムを書くのは骨が折れますが、シンプルな棒グラフであれば下記のようにして書くことができます。

<?php

include("pchart/class/pDraw.class.php");
include("pchart/class/pImage.class.php");
include("pchart/class/pData.class.php");

// データセット用オブジェクトの生成
$myData = new pData();

// データセット1を追加
$myData->addPoints(array(7,2,6,27,47,3,26,28),"Serie1");
// データセット1のラベル
$myData->setSerieDescription("Serie1","チームA");
$myData->setSerieOnAxis("Serie1",0);

// データセット2を追加
$myData->addPoints(array(42,35,42,14,37,18,42,38),"Serie2");
// データセット2のラベル
$myData->setSerieDescription("Serie2","チームB");
$myData->setSerieOnAxis("Serie2",0);

// Y軸に表示する項目
$myData->addPoints(array("1月","2月","3月","4月","5月","6月","7月","8月"),"Absissa");
$myData->setAbscissa("Absissa");

// グラフのサイズとデータセットを引数に渡してpChartオブジェクトを生成
$myPicture = new pImage(500,230,$myData);

// フォントとサイズを指定
$myPicture->setFontProperties(array("FontName"=>"pchart/fonts/sazanami-gothic.ttf","FontSize"=>16));

// グラフの出力位置と大きさを指定(右からX軸、Y軸、幅、高さ)
$myPicture->setGraphArea(60,60,450,190);

// 背景色と背景色に入れる斜線の色を指定
$Settings = array("R"=>170, "G"=>183, "B"=>87, "Dash"=>1, "DashR"=>190, "DashG"=>203, "DashB"=>107);
// 背景を描く
$myPicture->drawFilledRectangle(0,0,500,230,$Settings);

// 背景のグラデーションのオプション指定
$Settings = array(
    "StartR"=>210, "StartG"=>252, "StartB"=>197,
    "EndR"=>138, "EndG"=>143, "EndB"=>106,
    "Alpha"=>70);
// 背景を描く
$myPicture->drawGradientArea(0,0,700,230,DIRECTION_VERTICAL,$Settings);

// テキストの出力位置と文字の色を指定
$TextSettings = array("Align"=>TEXT_ALIGN_MIDDLEMIDDLE, "R"=>0, "G"=>0, "B"=>0);
// テキストの出力位置、文字列とフォントの情報を引数にしてタイトルを出力
$myPicture->drawText(250,25,"販売実績",$TextSettings);

// フォンとサイズを切り替え
$myPicture->setFontProperties(array("FontName"=>"pchart/fonts/sazanami-gothic.ttf","FontSi
ze"=>8));

// メモリを描く
$myPicture->drawScale();

// ラベルの説明文のオプションと表示
$Config = array(
    "FontR"=>0, "FontG"=>0, "FontB"=>0, // ラベルのフォントの文字色
    "Margin"=>6, // ラベルのマージン
    "Alpha"=>30, // ラベルの透明度
    "Style"=>LEGEND_ROUND, // ラベル枠の形式(角丸)
    "Mode"=>LEGEND_HORIZONTAL); // ラベル内の文字の表示形式(水平)
$myPicture->drawLegend(380,25,$Config);

// グラフのバーにデータセットの数値を表示する、グラデーションを付けるオプション
$Config = array("DisplayValues"=>1, "Gradient"=>1, "AroundZero"=>1);
// 描くグラフの種類をメソッド名で指定
$myPicture->drawBarChart($Config);

// 描いたグラフの保存
$myPicture->render("mypic.png");
//$myPicture->autoOutput("mypic.png");

echo "<img src='mypic.png' />";

上記のプログラムにより出力されるグラフは下記の通りです。

基本的なpChartのライブラリの使い方はコメントの通りですが、幾つか追加で解説が必要なところもありますので、追加で書いてみたいと思います。

- テキスト（グラフタイトル）の追加のオプション

// テキストの出力位置と文字の色を指定
$TextSettings = array("Align"=>TEXT_ALIGN_MIDDLEMIDDLE, "R"=>0, "G"=>0, "B"=>0);

このAlignという項目で指定している「TEXT_ALIGN_MIDDLEMIDDLE」という定数ですが、文字列の中心に揃えて表示するというもので、他にも幾つか存在し指定の方法によって表示位置が変わってきます。

このオプションは、下記のpChartのマニュアルに詳細が記載されているので、そちらを参照してください。

drawText - Write text ＠ pChartマニュアル

- 背景とテキスト、オプションの表示順序

どうもpChartは指定したオプションや呼び出したメソッドの順番にグラフのパーツを描いていくようで、その順番を間違えたら、思ったとおりのグラフが出来上がりません。

例えば、テキストを書き出した（drawText）後に背景を書く（drawFilledRectangle）とテキストが隠れて表示されません。

また、フォンとサイズなども指定した以降が有効になるため、サイズを変更した場合それ以降の文字の大きさが全て変わってきます。（個別のメソッドの引数としてフォンとサイズが指定できる場合もありますが）

- ファイルの書き出しと表示

ファイルの書き出しは、render()で行いますが、これはファイルを書き出すだけなので、個別にIMGタグを生成してファイルを画面上に出力しています。

ただ、サーバー上へのファイルの保存が必要ない場合、下記のようにすることで画面に出力することもできます。

（この場合、IMGタグは必要ありません）

$myPicture->autoOutput("mypic.png");

ただし、autoOutputはheader関数を使ってファイルを出力するようで、事前に出力していた場合はWarningが発生してしまうので注意が必要です。

ちなみに、autoOutputはプログラムをCLIで動かした場合は、自動的にファイルを保存してくれます。

pChartでレーダーチャートを描いてみる

今度は、pChartを使ってレーダーチャートを書く方法です。

<?php

include("pchart/class/pData.class.php");
include("pchart/class/pDraw.class.php");
include("pchart/class/pRadar.class.php");
include("pchart/class/pImage.class.php");

// データセット用オブジェクトを生成
$MyData = new pData();

// スコアのデータセット
$MyData->addPoints(array(10,5,6,1,5,7,0),"ScoreA");
$MyData->setSerieDescription("ScoreA","Application A");
$MyData->setPalette("ScoreA",array("R"=>150,"G"=>5,"B"=>217));

// チャートの項目
$MyData->addPoints(array("攻撃力","守備力","魔力","賢さ","すばやさ","運のよさ","魅力"),"Point");
$MyData->setAbscissa("Point");

// グラフのサイズとデータセットを引数に渡してpChartオブジェクトを生成
$myPicture = new pImage(350,350,$MyData);

// 背景色と背景色に入れる斜線の色を指定
$Settings = array("R"=>170, "G"=>183, "B"=>87, "Dash"=>1, "DashR"=>190, "DashG"=>203, "DashB"=>107);
// 背景を描く
$myPicture->drawFilledRectangle(0,0,350,350,$Settings);

// グラフのタイトルをセット
$myPicture->setFontProperties(array("FontName"=>"pchart/fonts/sazanami-gothic.ttf","FontSize"=>8));
// グラフタイトルを書く
$myPicture->drawText(10,18,"勇者のステータス",array("R"=>0,"G"=>0,"B"=>0));

// フォンとサイズ、色のを切り替え
$myPicture->setFontProperties(array("FontName"=>"pchart/fonts/sazanami-gothic.ttf","FontSize"=>8,"R"=>80,"G"=>80,"B"=>80));

// グラフに影を付ける
$myPicture->setShadow(TRUE,array("X"=>5,"Y"=>5,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10));

// レーダーチャート作成用オブジェクトを生成
$SplitChart = new pRadar();

// レーダーチャートを書くX軸、Y軸、幅、高さ
$myPicture->setGraphArea(45,25,320,320);
// レーダーチャートのオプション
$Options = array(
    "FixedMax"=>10, // データセットの最大値
    "WriteValues"=>TRUE, // データセットの値を表示
    "DrawPoly"=>TRUE, // データセットをつないだ領域を塗りつぶす
    "AxisRotation"=>-90, // グラフの回転角度
    "Layout"=>RADAR_LAYOUT_STAR, // レーダーチャートのレイアウト(星型)
    "LabelPos"=>RADAR_LABELS_HORIZONTAL, // ラベルの表示形式(水平)
    "BackgroundGradient"=> // レーダーチャート内のグラデーション
        array(
            "StartR"=>255,"StartG"=>255,"StartB"=>255,
            "StartAlpha"=>100,
            "EndR"=>207,"EndG"=>125,"EndB"=>227,
            "EndAlpha"=>50)
    );
// レーダーチャートを描く
$SplitChart->drawRadar($myPicture,$MyData,$Options);

// 描いたグラフの保存
$myPicture->render("mypic.png");

echo "<img src='mypic.png' />";

上記のプログラムにより出力されるグラフは下記の通りです。

グラフの種類が変われば、呼び出すクラスライブラリの数からセットするオプションやメソッドまで異なってきます。

注意点としては、棒グラフと同じものもありますがレーダーチャートを作る上での一番のポイントになるのは、レーダーチャートを出力するdrawRadar()の引数となるオプションでしょうか。

かなり数も多いのですが、こちらも下記のマニュアルを参考にしてみてください。

drawRadar - Draw radar charts ＠ pChartマニュアル

個人的にどうすればいいかわかりづらかった部分を幾つかピックアップしてみます。

- チャートのラベルの表示形式

チャートの周りのラベル（攻撃力とか防御力とかの部分）がデフォルトだと、チャートの方向にあわせて回転していく表示（RADAR_LABELS_ROTATED）になっていたので、それを水平に表示するためのオプションが下記になります。

"LabelPos"=>RADAR_LABELS_HORIZONTAL, // ラベルの表示形式(水平)

- グラフを回転させる

デフォルトの表示だとうまく最初のラベル（図の攻撃力の部分）が一番上に表示されなかったので、グラフを回転させて調整しています。

"AxisRotation"=>-90, // グラフの回転角度

- チャートの表示形式

レーダーチャートは丸型と星型（デフォルトの表示形式）の2つがあるみたいで（図は星型）、丸型にしたい場合は下記のように指定します。

"Layout"=>RADAR_LAYOUT_CIRCLE, // レーダーチャートのレイアウト(丸型)

サンプルが豊富にあり、サンドボックスを利用して最初からプログラムを書かなくてもソースを取り出すことも可能なので、そのあたりを参考にしながらオプションを調整していけば、思い通りのグラフが描けるのではないでしょうか。

[PR]ビジネスに信頼の無停止レンタルサーバー アイルの「iCLUSTA」

[PR]重いパソコンがサクサク動くウイルス対策ソフト

[PR]海外WiFiレンタルなら！イモトのWiFi

関連記事

[JS] 多様なグラフを作ることができるC3.js

[jQuery] 組織図が簡単に書けるOrgChart

[PHP] 簡単に画像の加工ができるintervention/image

PHPで簡単に日付操作ができるライブラリCarbon

 

[PHP] 余計なHTMLタグや属性を消してくれるHTML Purifier

 

ノンプログラミングでも利用可能！PHPで多様なグラフを作れるpChart

 

画像からExifの読取り削除するコマンドあれこれ

 

Webページをコマンドラインから一発でPDFや画像に変換する

 

ImageMagickを使ってコマンドラインからCAPTCHAを作ってみる

 

PHPでブラウザのキャッシュを利用させる検証

ノンプログラミングでも利用可能！PHPで多様なグラフを作れるpChart

PHPで棒グラフやレーダーチャートなどのグラフを作りたい場合、そしてそれを綺麗に見せたいのであればpChart を使えば簡単に実装することができます。

（他にも、JpGraph を使ったり、Google Chart Tools やOpen Flash Chart を使うという選択肢もあります）

pChartはバージョン1系と2系が存在しますが、1系は2008年ごろに開発が停止しているようで、PHP5.3系で動かしたりするとエラー吐いたりもするので、最新の2系を使う方がよいでしょう。

ここでは、CentOS5.7＋PHP5.3.8上で2011年9月末時点で最新のpChart2.1.3を使って解説しています。

pChartを使い始める前にGDライブラリ関連を確認する

pChartはGDライブラリを使って描画するため、関連するパッケージやPHPもGDが使えるようにセットアップしておく必要があります。

GDライブラリがPHPから利用可能かは、phpinfo()での出力結果を見てみるのが早いでしょう。

または、pChartのソースをサーバー上で展開してドキュメントルーと以下に配置し、アクセスしてみるのがもっと手っ取り早いかもしれません。

必要な環境がそろっていないと下記のようなエラーメッセージが表示されます。

Warning
It seems that you're not meeting the pChart minimal server requirements: 
- PHP must be at least 4.x
- GD version 2.x

環境がそろっていない場合は、GDライブラリやlibjpegやlibpng、libXpmなどをインストールしておきます。

PHPもパッケージから利用している場合は、php-gdパッケージが必要になります。

# yum search php-gd
-snip-
php-gd.x86_64 : gd グラフィックライブラリを使用するための PHP アプリケーション用モジュール
php53-gd.x86_64 : gd グラフィックライブラリを使用

PHPをソースからインストールしている場合は、下記のような感じでconfigureします。

./configure --with-apxs2 \
--enable-mbstring \
--with-openssl \
--with-gd \
--with-jpeg-dir=/usr \
--with-png-dir=/usr \
--with-zlib-dir=/usr \
--with-xpm-dir=/usr \
--with-freetype-dir=/usr \
--with-libdir=lib64

※ ハイライトの箇所がGD関連のオプション

pChartで出力するグラフ内に日本語を使いたい場合のフォントの設定方法については後述しています。

pChartで作れるグラフの種類

pChartのソースにはかなり豊富なサンプルが用意されています。

ダウンロードしたソースをドキュメントルート以下に配置してアクセスしてみたら、使えるグラフのサンプルとそれを書くためのソースが表示されます。

サンプルの中のグラフを幾つか紹介。

- 折れ線グラフ

- 棒グラフ

- 円グラフ

- レーダーチャート

- バブルチャート

- 株価チャート


- バーコード（発送ラベル）

 

この他にも散布図や積み上げの棒グラフなど多くの種類のグラフが作成できます。

また、各グラフにはラベルを付けられたり、複数のグラフを合わせて表示するといった画像も作れるようです。

バーコードやそれを加工したラベルのような画像が作れるのはかなりユニークですよね。

ノンプログラミングでのpChartの使い方

これだけ豊富なサンプルが用意されているので、プログラムを書くのもそこまでてこずらずに済みそう、とは思うのですがさらに凄いのは、グラフを作るためのユーザーインターフェースが用意されていること。

先ほどのpChartのトップ画面から「Sandbox」メニューをクリックすると表示されます。

「General settings」メニューで画像サイズや背景色などの一般的な設定を、「Data」メニューでグラフの元になるデータを、「Scale」メニューでグラフの軸やメモリなどの設定を、「Legend, thresholds & Misc」メニューで注釈の表示位置や閾値の設定などができます。

全ての設定が完了したら右上にある「Render picture」でグラフを描画してくれます。

また、そのグラフを作るためのソースコードを「Show code」で表示することが出来ますので、サーバー上に保存すればいつでも呼び出すことが可能です。

ある程度こういうグラフを作りたいって場合も、この機能でソースコードを出力してから改修していけば効率的にプログラミングできるかもしれません。

ただ、デフォルトでは日本語フォントが選択できなかったりするので、使いたい場合はサンドボックスのプログラムに多少手を入れてあげる必要があります。

- サンドボックスで日本語を使う場合

まず最初に、日本語フォントをpChartのfontsディレクトリに格納します。

今回は、CentOS標準で使えるsazanami-gothicフォントを使います。

フォント用のttfファイルをfontsディレクトリにコピーするか下記のようにシンボリックリンクを作成します。

ln -s /usr/share/fonts/japanese/TrueType/sazanami-gothic.ttf sazanami-gothic.ttf

次に、pChartのディレクトリ内にあるexamples/sandbox/index.phpの623行目に定義されているlistfonts関数内に、さざなみフォントを出力するようにoptionタグを追加します。

echo "<option value='advent_light.ttf'>advent_light</option>";
echo "<option value='sazanami-gothic.ttf'>Sazanami</option>";
echo "<option value='Bedizen.ttf'>Bedizen</option>";

これで、サンドボックスからでも下記のようにキャプションに日本語フォントを使用することができます。

で、実際にサンドボックスから書いてみた棒グラフ。

上記のグラフを書くために自動生成されたPHPのソースコードは下記。

<?php
include("class/pData.class.php");
include("class/pDraw.class.php");
include("class/pImage.class.php");
$myData = new pData();
$myData->addPoints(array(12,11,32,4,90,48),"Serie1");
$myData->setSerieDescription("Serie1","Aさん");
$myData->setSerieOnAxis("Serie1",0);
$myData->addPoints(array(22,60,3,0,15,22),"Serie2");
$myData->setSerieDescription("Serie2","Bさん");
$myData->setSerieOnAxis("Serie2",0);
$myData->addPoints(array("1月","2月","3月","4月","5月","6月"),"Absissa");
$myData->setAbscissa("Absissa");
$myData->setAxisPosition(0,AXIS_POSITION_LEFT);
$myData->setAxisName(0,"1st axis");
$myData->setAxisUnit(0,"");
$myPicture = new pImage(500,230,$myData);
$Settings = array("R"=>170, "G"=>183, "B"=>87, "Dash"=>1, "DashR"=>190, "DashG"=>203, "DashB"=>107);
$myPicture->drawFilledRectangle(0,0,500,230,$Settings);
$Settings = array("StartR"=>219, "StartG"=>231, "StartB"=>139, "EndR"=>1, "EndG"=>138, "EndB"=>68, "Alpha"=>50);
$myPicture->drawGradientArea(0,0,500,230,DIRECTION_VERTICAL,$Settings);
$myPicture->drawRectangle(0,0,499,229,array("R"=>0,"G"=>0,"B"=>0));
$myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>50,"G"=>50,"B"=>50,"Alpha"=>20));
$myPicture->setFontProperties(array("FontName"=>"fonts/sazanami-gothic.ttf","FontSize"=>14));
$TextSettings = array("Align"=>TEXT_ALIGN_MIDDLEMIDDLE
, "R"=>255, "G"=>255, "B"=>255);
$myPicture->drawText(250,25,"販売実績",$TextSettings);
$myPicture->setShadow(FALSE);
$myPicture->setGraphArea(50,50,475,190);
$myPicture->setFontProperties(array("R"=>0,"G"=>0,"B"=>0,"FontName"=>"fonts/sazanami-gothic.ttf","FontSize"=>8));
$Settings = array("Pos"=>SCALE_POS_LEFTRIGHT
, "Mode"=>SCALE_MODE_ADDALL_START0
, "LabelingMethod"=>LABELING_DIFFERENT
, "GridR"=>255, "GridG"=>255, "GridB"=>255, "GridAlpha"=>20, "TickR"=>0, "TickG"=>0, "TickB"=>0, "TickAlpha"=>50, "LabelRotation"=>0, "CycleBackground"=>1, "DrawXLines"=>1, "DrawSubTicks"=>1, "SubTickR"=>255, "SubTickG"=>0, "SubTickB"=>0, "SubTickAlpha"=>50, "DrawYLines"=>ALL);
$myPicture->drawScale($Settings);
$myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>50,"G"=>50,"B"=>50,"Alpha"=>10));
$Config = array("DisplayValues"=>1, "Gradient"=>1, "AroundZero"=>1);
$myPicture->drawBarChart($Config);
$Config = array("FontR"=>0, "FontG"=>0, "FontB"=>0, "FontName"=>"fonts/sazanami-gothic.ttf", "FontSize"=>8, "Margin"=>6, "Alpha"=>30, "BoxSize"=>5, "Style"=>LEGEND_ROUND
, "Mode"=>LEGEND_VERTICAL
);
$myPicture->drawLegend(50,15,$Config);
$myPicture->stroke();
?>

プログラムが書けなくてもここまでのことができますし、高度な画像編集ソフトを使う必要も無く、おまけにデザインも綺麗に仕立ててくれて、ライセンスはGPL v3となんか嘘みたいなライブラリになっています。

ただし、このUIを使って描画するには投入できるデータの項目数に限りがあったり、出力できるグラフが限定されていたりというような制限があるので、大規模なデータを使って色んなグラフを書きたいという場合は、やはりプログラミングするしかないかと思いますが。

pChartを使ったプログラミング方法の詳細については、「[PHP] pChartの使い方 - 棒グラフとレーダーチャートを描いてみる 」を参考にしてみてください。
 

[PR]スマホやTV、PCで、いつでも映画や海外ドラマを見れる！今すぐ無料視聴！

[PR]初心者おススメ！24時間サポートセキュリティ特化レンサバ！

[PR]SSLサーバ証明書なら[ドメインキーパー]◆VeriSign/GlobalSign/他取り扱い

関連記事

[JS] 多様なグラフを作ることができるC3.js

[jQuery] 組織図が簡単に書けるOrgChart

[PHP] 簡単に画像の加工ができるintervention/image

PHPで簡単に日付操作ができるライブラリCarbon

 

[PHP] pChartの使い方 - 棒グラフとレーダーチャートを描いてみる

 

画像からExifの読取り削除するコマンドあれこれ

 

Webページをコマンドラインから一発でPDFや画像に変換する

 

ImageMagickを使ってコマンドラインからCAPTCHAを作ってみる

 

ApacheのプロセスがどのPHPプログラムの処理をしているか調べる方法

 

mod_actionsを使ってドキュメントや画像、Flashファイルを保護する