2009年10月

前回Open Flash Chart(ver1.x)とPHPを使ってグラフを書く(導入編) でバージョン1.x系の記事を書いたのですが、どうやら1.x系は開発が終了してるとのことで、今回新たに2.x系の記事を書くことにしました。

2.x系ではグラフの元データとしてJSONを使うようになり実装自体も1.x系よりも簡単になってると感じました。というわけで今回は導入編として簡単なグラフを動かすとこまでやってみようと思います。プログラムは公式サイトからいただいています(笑)

1.サーバーにインストールする


インストールと言ってもダウンロードしてきたファイルをサーバーに保存するだけです。ココからバージョン2の最新版(現時点ではVersion 2 Lug Wyrm Charmer)をダウンロードします。

3

ダウンロードした圧縮ファイルを解凍するといくつかフォルダとファイルが出てくるので、その中から

・js
・php5-ofc-library
・php-ofc-library
・js-ofc-library
・open-flash-chart.swf

をサーバーにアップロードします。これでインストールは完了です。

2.あらかじめ用意されたデータからグラフを作成してみる


いよいよグラフを作成してみます。先程も触れましたが、Open-Flash-Chartはグラフの元になるデータのフォーマットとしてJSON(JavaScript Object Notation)を使用しています。JSONデータはこのようなデータです。

data.json
[javascript light="true"]
{
"title":{
"text": "Many data lines",
"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
},

"y_legend":{
"text": "Open Flash Chart",
"style": "{color: #736AFF; font-size: 12px;}"
},

"elements":[
{
"type": "bar",
"alpha": 0.5,
"colour": "#9933CC",
"text": "Page views",
"font-size": 10,
"values" : [9,6,7,9,5,7,6,9,7]
},
{
"type": "bar",
"alpha": 0.5,
"colour": "#CC9933",
"text": "Page views 2",
"font-size": 10,
"values" : [6,7,9,5,7,6,9,7,3]
}
],

"x_axis":{
"stroke":1,
"tick_height":10,
"colour":"#d000d0",
"grid_colour":"#00ff00",
"labels": {
"labels": ["January","February","March","April","May","June","July","August","Spetember"]
}
},

"y_axis":{
"stroke": 4,
"tick_length": 3,
"colour": "#d000d0",
"grid_colour": "#00ff00",
"offset": 0,
"max": 20
}
}
[/javascript]
まずはこのJSON形式のデータを使ってグラフを書いてみます。このデータをdata.jsonで先程アップロードしたのと同じ場所に保存します。そしてこのデータにアクセスするためのHTMLを用意します。

chart.html
[html]





codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="500"
height="250" id="graph-2" align="middle">




quality="high"
bgcolor="#FFFFFF"
width="500"
height="250"
name="open-flash-chart"
align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />




[/html]
できたらchart.htmlにアクセスします。ここでポイントなのが?ofc=data.jsonをURLのお尻につける必要があります。chart.html?ofc=data.jsonという感じですね。
http://fujitaiju.com/sakura_app/open-flash-chart2/chart.html?ofc=data.json

実行結果(上のURL先と同じものです)





3.PHPでグラフの元データを作成し、グラフを表示してみる


先程、chart.htmlではFLASHを表示するコードを直接書いていましたが、JavaScriptからこのコードを生成することもできます(というかこちらが本当のやり方です)。6行目がその処理になります。FlashをHTMLに貼るライブラリ swfobject 2 を使っているようです。
chart-2.html
[html]















[/html]
さっきはあらかじめ用意されたデータを使ってグラフを表示しました。ですが、通常はPHPからこのデータを作り出します。それが次のコードです(今回は動作させることが目的なのでプログラムの詳細には触れません)。アクセスの仕方はさっきと同じようにchart-2.html?ofc=data.phpとします。

data.php
[php]

include 'php-ofc-library/open-flash-chart.php';

// ランダムなデータを生成
srand((double)microtime()*1000000);

$max = 20;
$tmp = array();
for( $i=0; $i<9; $i++ )
{
$tmp[] = rand(0,$max);
}

//タイトルを設定
$title = new title( date("D M d Y") );

//X軸のラベルを設定
$bar = new bar();
$bar->set_values( array(1,2,3,4,5,6,7,8,9) );

$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $bar );

// データを生成
echo $chart->toString();
?>
[/php]URLはこんな感じになります。
http://fujitaiju.com/sakura_app/open-flash-chart2/chart-2.html?ofc=data.php

実行結果(上のURL先と同じものです)





ちなみにこのdata.php単体で動作させるとJSON形式のデータを生成していることがよくわかります。

なんとか動作させることはできました。割と簡単に綺麗なグラフを書けるのはとても便利ですね。次回からはDBの値と連携したり、フォームからの入力値を使うなど、ダイナミックなグラフ作成をしてみたいと思います。
このエントリーをはてなブックマークに追加

2009/10/30 追記---------------------------------
この記事を書いた後に気がついたのですが、Open Flash Chartはバージョン2系を中心に開発をしていくようです。1.x系の開発は終了したようなので、使うのであれば2系を推奨します。
------------------------------------------------------------------------------------

最近よく見かけるFlashで書かれたグラフ、なんかいいの無いかなぁと思って探していたところamChartsOpen Flash ChartPHP/SWF Chartsとフリーのものが割とあるようです。FlashではないですがGoogle Chartというのもありますね。

中でも「Open Flash Chart」というのがシンプルかつ導入が簡単そうだったので公式サイトを参考に実装してみました。

とりあえず今日は導入編です。
(ここで紹介するプログラムは公式サイトのチュートリアルのものを使用しています)

今回はPHPを使用しますが、PHPからだけではなく次の言語から使うこともできます。実際には各言語に対応したモジュールがセットになっています。
・Java
・Perl
・Python
・Ruby
・.NET

1.サーバーにインストール

インストールとは言っていますが、ダウンロードしたモジュールをサーバーに保存するだけです。モジュールはココからゲッツします。私は最新バージョンの1.9.7をダウンロードしました。

1

解凍するといくつかフォルダができますが、今回は

・php-ofc-library
・open-flash-chart.swf

をサーバの適当な場所にアップロードします。
これで準備は完了です。

2.いよいよ動かしてみる!

先程ファイルをアップロードした場所と同じ場所に次の二つのコードをアップロードします。現時点でディレクトリ構成はこんな感じです。

┣php-ofc-library
┃┣open_flash_chart_object.php
┃┗open-flash-chart.php
┣chart.php
┣chart-data.php
┗open-flash-chart.swf

chart.php
グラフ化するモジュールを呼び出すプログラムです。今回は動作確認が目的なので、コード中の関数とかには特に触れません(次回以降で触れる予定)。open_flash_chart_object関数の第3引数は元データを作成するプログラムを指定しますが、ここは環境によって変わってくるので各自変えてください。
[php]


Open Flash Chartを使ってみる!


include_once 'php-ofc-library/open_flash_chart_object.php';
open_flash_chart_object( 500, 250, 'http://'. $_SERVER['SERVER_NAME'] .'/sakura_app/open-flash-chart/chart-data.php', false );
?>


[/php]
chart-data.php
グラフの元データを作成するプログラムです。
[php]

//ランダムデータを作成
srand((double)microtime()*1000000);

$max = 50;
$data = array();
for( $i=0; $i<12; $i++ )
{
$data[] = rand(0,$max);
}

// モジュールのインクルード
include_once( 'php-ofc-library/open-flash-chart.php' );
$g = new graph();

//グラフのタイトルやフォントサイズを指定
$g->title( '稼動確認 '. date("Y"), '{font-size: 26px;}' );

$g->set_data( $data );
// X軸のラベル名を指定
$g->set_x_labels( array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec' ) );

//Y軸の最大値を指定
$g->set_y_max( 60 );
// Y軸の目盛り20毎のラベル名を指定
$g->y_label_steps( 6 );

// 画面に表示
echo $g->render();
?>
[/php]
準備ができたら、ブラウザからchart.phpにアクセスすると、グラフができました!ランダムな値を発生させて描画しているのでリロードする度にグラフの形が変わりますよ。

これでとりあえず動作の確認はできました。次回はDBの値と連動させたり、フォームから入力した値からグラフを作ってみようかと思います。

2009/10/31 追記
と思っていたのですが、実はバージョン1.x系は開発が終了しているらしく、バージョン2.x系が主流になる模様。なので続きは2.x系からやりたいと思います。
このエントリーをはてなブックマークに追加

10月18日にAmazon.comから発送完了メールがきてから5日間、ようやくKindle internationalが到着いたしました!日本でもKindleが浸透してくれば買う人も出てくるでしょうからこのエントリが参考になればと思います(あまりの興奮に文中Kindleの事をキンドルちゃんとかキンちゃんとか言ってますがご了承ください)。 
 
とりあえず写真撮りまくったので画像メインでご紹介したいと思います。
コチラには撮った写真全てアップロードしたので良かったら見てください。 
 
まずは届いた時の状態。いかにも外国からの荷物という感じで届きました。「輸入許可書」という文字がそれを物語っています。 
IMG_1388_1 
 
ダンボールをあけるといよいよ中からキンドルちゃんが!今回はケースも同時購入しました。 
IMG_1390 
 
こっちにはキンドルが入っています。 
IMG_1392 
 
キンドル専用の入れ物のようです。 
IMG_1393 
 
明け口には「Once upon a time...」の文字が。にくい演出です。 
IMG_1396 
 
いよいよ開封!中から麗しきキンちゃんが出てまいりました(この時点でかなり興奮していた)。 
IMG_1397 
 
色々なところにさりげない演出があります。箱を捨てるのがもったいないくらいです。 
IMG_1399 
 
中には説明書とキンドル本体と充電アダプターが入ってます。 
IMG_1400 
 
アダプター。プラグのところは取り外し可能です。iPodと同じ方式ですね。 
IMG_1401 
 
IMG_1411 
 
説明書も凝ってます。 
IMG_1403 
 
IMG_1404 
 
IMG_1402 
 
キンドル本体の背面です。 
IMG_1405 
 
IMG_1407 
 
充電中ヽ(●´ε`●)ノ 
IMG_1412 
 
ついに電源ON!(といっても最初から電源はONになってました笑) 
IMG_1408 
 
なにやら起動中のようです。 
IMG_1414 
 
うぇるかむ画面キタ - .∵・(゚∀゚)・∵. - ッ!! 
IMG_1415 
 
今度はキンドルカバーです。 
IMG_1417 
 
こちらも箱がいい感じです。 
IMG_1419 
 
ロゴプレートもついてます。 
IMG_1418 
 
全体はこんな感じ。 
IMG_1420 
 
キンドル本体に戻ります。文字を出すとこんな感じ。思ってよりクッキリで目が疲れなそうですね。 
IMG_1429 
 
ページ送りは本体の両端についてる「Next Page」と「Prev Page」ボタンを使います。 
IMG_1433 
 
IMG_1434 
 
キーボードです。 
IMG_1435 
 
それにしてもアメリカからなのに発送から到着までわずか5日なんてすごい世の中になったもんです。サンプルをいくつかダウンロードしてみましたが、Webでのサンプルよりもページ数がかなり多くてしっかり中身を確かめてから購入判断ができます。 
 
これからどんどんKindle対応の書籍が増えていってほしいですね。 
 
~2009/10/22 21:55 追記~ 
なにやらAmazon.comからメールが来ていてKindleが$20値下げになったと!ヽ(`Д´#)ノ ムキー!!しかしよくメールを読んでみたところ、今回$279で買った人には$20の返金(実際にはAmazonでしか使えないギフトカードのようなもの?)があるようです。 
 
これがそのメール全文です。 
 
Hello,  
 
Good news! Due to strong customer demand for our newest Kindle with U.S. and international wireless, we are consolidating our family of 6" Kindles. As part of this consolidation, we are lowering the price of the Kindle you just purchased from $279 down to $259. You don't need to do anything to get the lower price--we are automatically issuing you a $20 refund. This refund should be processed in the next few days and will appear as a credit on your next billing statement.  
 
We'll also send you a follow-up e-mail to confirm the refund once it has been completed.
We hope you enjoy your new Kindle. Please send us your feedback at: Kindle-feedback@amazon.com
 
 
Sincerely,  
 
The Kindle Team 
このエントリーをはてなブックマークに追加

日本にいながら洋書を買う時、今までは日本のAmazonで買うことが多かったのですが、実は米国Amazonで買う方が安い場合があるということに気づきました。 
 
米国Amazonの本は定価からかなり割引されて売られていることも珍しくなく、新品が半額以下で買える事もあります。ですが、日本のAmazonでは基本的に(ほぼ)定価販売なので、配送料や税金を考えても米国Amazonで買う方が安く済むことがあります。 
 
今回PHP and MySQL Web Development (4th Edition) (Developer's Library)という本でどれくらいの値段差が出るのか試してみました。 
41Y2ojM7oHL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA240_SH20_OU09_ 
 
左が米国Amazonでの決済画面で、右が日本Amazonでの決済画面です。なんと米国Amazonで購入したほうが400円もお徳です!400円なら微々たる金額かと思ってしまいますが、配送量と手数料は一定のため、いくつかまとめて買うということであればかなりのお金が節約できそうです。
us_amazonja_amazon 
 
 
 
 

 
 
 
 
 
 
ちなみに、これは普通の(追加料金のかからない)発送方法を選択した時の金額です。日本に発送する場合、料金体系として米国Amazonでは次の3つの体系があります。下に行くにつれて配送料金も高くなりますが、早く届きます(詳しくはコチラを参考)。 
 
■Standard Shipping Rates to Asia & Pacific Islands 
ship1 
 
■Expedited Shipping Rates to Asia & Pacific Islands 
ship2 
 
■Priority Courier Shipping Rates to Asia & Pacific Islands 
ship3 
 
Priority Courier Shippingで頼むと2日~4日で届くようですが、配送料がとても高くなってしまうので通常配送で気長に待ちましょう(笑)
このエントリーをはてなブックマークに追加

数日前にKindleの世界同時発売が発表され、私も早速ポチったわけですが、一つ気がかりなのが日本語が使えないことです。日本語の書籍はしょうがないとして、なんとしてでもPDFくらいは日本語で読めないもんだろうか?と調べていたところなんとか読むことができそうな方法を見つけました。 
 
一言で言うと、 
 
PDFファイルを画像ファイルとして保存し、さらにそれをPDFに変換する。 
 
だけです。画像ファイルとしてPDF化されればKindleにフォントが入っていようがいまいが関係ないですからね。手順として確立されたものがあまりなかったのでまとめました。 
 
1.PDFを画像ファイルに変換する
 
PDF⇒画像の変換にはPDFXVwerを使用します。ダウンロードしたファイルを解凍すると二つのexeファイルができますが、PDFXVwer.exeのみ使用します。ダブルクリックでインストールされます。 
 
変換したいPDFファイルをPDFXVwerで開き、「ファイル」→「エクスポート」→「イメージへエクスポート」を選択します。 
1 
 
右下の「エクスポート」を押します。するとエクスポートが始まります。途中でキャンセルしてしまうと、それまでエクスポートされたファイルが正しく表示されなくなるのでエクスポートは最後までちゃんと行ってください。また、ページ毎に画像ファイルが生成されるので新しいフォルダを作ってそこをエクスポート先に指定するのがよいです。 
2 
 
3 
 
2.画像ファイルをPDFに変換する

画像⇒PDFの変換にはPDF Designer - ImageEdition v1.0を使用します。ファイルをダウンロードし、解凍するとpdfi.exeというのが出てきます。使用する前に設定をします。「全般」タブの用紙サイズを「サイズを指定する」にしておきます。これをしておかないとビッグサイズでPDF化されてしまいます。それ以外には特にいじる必要はないと思います。 
5 
 
次に画像ファイルが入っているフォルダをpdfi.exeにドラッグ&ドロップします。すると選択ダイアログというのがでてくるので「OK」を押せばPDF化が始まります。 
4 
 
以上で終了です。ただ、この方法の難点としてファイルサイズがかなり大きくなってしまうことが挙げられます。今回の変換では4.5MB⇒39.7MBになってしまいました。もうちょっと設定を工夫すればサイズは小さくなるかもしれませんが、元のファイルより小さくなることはなさそうです。 
 
この方法の場合、wirelessでKindelに送るのは通信料がかなりかかるのでやめた方がいいです。USBを介してPCからKindelに転送すれば料金はかかりません(wirelessでの通信料は1MBあたり$0.99)。
このエントリーをはてなブックマークに追加

↑このページのトップヘ