2009年11月

最近JavaScriptを使い始めました。

色々できるので覚えることが多く難しいです つД`)・゚・。・゚゚・*:.。

フォームのsubmitボタンを押した時にテキストボックスの内容にチェックをかけるという処理をしたかったのですが、いかんせん初心者のため検討もつきません。

ですが、ようやく見つけたのでメモがてらに。

予想としてはsubmitのonlick属性にチェック関数でも指定すればよいのかなぁと思ってたんですが、そうではなかったです(他にもやり方はあるんでしょうが)。

実際にはformタグのonSubmit属性で自前のチェック関数を指定をしました。

[html]







function validForm() {
//if(チェック処理がOK) {
return true;
} else {
//チェック処理がNGだったらfalseを返す
return false;
}
}


[/html]formタグの中のonSubmit="return validForm()"がポイント。onsbumitイベントはfalseを戻すことでイベントの操作(ここではフォームの送信処理)を中止することができるようです。
このエントリーをはてなブックマークに追加

そろそろボーナスの季節!

自宅で文字通り幅をきかせているサーバーを新調しようかと考えております。

現在のサーバーは7年前に作ったものでかなり大きく、幅だけでなく、ファンから繰り出される熱風と爆音もたまりません!(><)

値段、電気代、低発熱性、省スペースであることを考えるとShuttleのX27Dが良さげ。でもCPUがオンボードのため変更できないのがちょっと気がかり。

とは言うもののCPUなんて変えない気がする(<・> _ <・>)

何よりとても安い!2万円ほどでこれほどのものが買えるなんて素晴らしい世の中になったもんです。

うーーむ、どうしよう。とりあえずボーナスの配分が決まってから本気で考えることにします。

他にも欲しいものが山盛りだし!

このエントリーをはてなブックマークに追加

かなり久しぶりです。
書くのだいぶサボってしまいました(汗)

今資格を取ろうとシコシコ勉強してるんですけど、年のせいかすぐに飽きてしまいます。

いや、飽きるっていうのは違うな。「日々の成果が見えないからモチベーションが下がってくる」が正しいかも。

要は成果が見えないと続けるのが難しいんです。

んで、勉強した時間を記録してグラフ化できるサイトないかなーと思って探したらカラダカラというのを見つけたんですが、ちと違うんですよね。

足りないなと思う機能としては携帯から記録ができないということですかね。というか私にとっては一番重要です。記録だけじゃなく、成果を見るにも携帯から見れないとダメです。

人によっては前日勉強した時間を通勤、通学の電車内で記録して、成果を確認したい人もいるかもしれないのでやっぱりモバイル携帯からのアクセスは必須だと思うんです。

だったら無いものは作ってしまえということで、作ることにしました。目指す仕様としてはこんな感じです。

・言語はPHPを使用。
・携帯から記録、閲覧が可能。
・記録した内容はグラフ化。
・携帯からの利用を考え、入力内容はできるだけ少なくする。
・ユーザー認証あり。
・データの保存はDB(MySQL)を使用。
・グラフに関してはPCからのアクセスではFLASH(Open Flash Chart)を使用し、携帯からであれば画像(GDライブラリ)で表示。

完成目標は2009/11/29としておきます。
このエントリーをはてなブックマークに追加

前回、Open Flash Chart(ver2.x)とPHPを使ってグラフを書く(導入編)でOpen Flash Chartの導入について書きました。今回はDBとの連携について書きたいと思います。

例によって内容は公式サイト(英語)の内容を拝借しております。まぁ、英語が苦手な人に向けてといった感じですf(^^)

流れとしてはこの図のようになります。
①HTML内に書かれたPHPファイルを読み込む
②PHPからDBにデータを取りに行く
③取りに行ったデータからJSONデータを作成する
④JSONデータからチャートを生成する
ofc

1.データベースの準備

Open Flash ChartをDBと連携させるには当然テーブルとデータを作成しておく必要があります。まずテーブルを作成します。ちなみにDBはMySQLを使用していますが、下記のSQLは標準SQLなので他のDBでも実行できるはずです。
[sql light="true"]
CREATE TABLE `ofc_downloads`
( `id` int NOT NULL AUTO_INCREMENT , `date` date , `downloads` int , PRIMARY KEY (`id`));
[/sql]続いてテーブルにデータを挿入します。
[sql light="true"]
INSERT INTO `ofc_downloads`(`id`,`date`,`downloads`)
VALUES
(1,'2009-02-01',7381),
(2,'2009-01-01',7921),
(3,'2008-12-01',9499),
(4,'2008-11-01',14958),
(5,'2008-10-01',10600),
(6,'2008-09-01',9407),
(7,'2008-08-01',4694),
(8,'2008-07-01',4717),
(9,'2008-06-01',6267),
(10,'2008-05-01',6496),
(11,'2008-04-01',6211),
(12,'2008-03-01',5804),
(13,'2008-02-01',5287),
(14,'2008-01-01',5042),
(15,'2007-12-01',4375),
(16,'2007-11-01',3346),
(17,'2007-10-01',1933),
(18,'2007-09-01',1378),
(19,'2007-08-01',1106);
[/sql]これでDBの準備は完了です。
ちなみにこのデータはOpen Flash Chartの月別ダウンロード数のようです。

2.チャートの元データを作成するPHPを用意する

Open Flash ChartではJSONデータを元データとしてチャートを作成しているということは前回の導入編で触れましたが、そのJSONデータを作成するコードは次のようになります。

途中intval関数でdownloadsの値を数値属性に変換していますが、これをしないと文字属性でJSONデータが作成されてしまい都合が悪いのでこの関数をかましています。
db.php
[php]
//ここは各自の環境によりパスを変更する
include_once 'php-ofc-library/open-flash-chart.php';

//DB接続の際のhost名、usernameとpasswordは自分の環境に合わせて設定
$con = mysql_connect('localhost', 'username', 'passowrd');
//データベース名(ここではtestとしている)も自分の環境に合わせて設定
$db = mysql_select_db('test', $con);
$result = mysql_query("select * from ofc_downloads order by date");

$data = array();
$max = 0;
while($row = mysql_fetch_array($result))
{
//intval関数でdownloadsの値を数値属性に変換
$data[] = intval($row['downloads']);
}

//open_flash_chartオブジェクト作成
$chart = new open_flash_chart();
//タイトルの設定
$chart->set_title( new title( 'Open Flash Chart downloads' ) );

//dotオブジェクト作成
$d = new dot();
//グラフ上の点の色とサイズを設定
$d->colour('#9C0E57')->size(4);

//areaオブジェクト作成
$area = new area();
$area->set_width( 2 );
$area->set_default_dot_style($d);
$area->set_colour( '#C4B86A' );
$area->set_fill_colour( '#C4B86A' );
$area->set_fill_alpha( 0.7 );
$area->set_values( $data );

//チャートにareaオブジェクトをセット
$chart->add_element( $area );

//y_axisオブジェクト作成
$y_axis = new y_axis();
//Y軸のメモリ幅と最大値を設定
$y_axis->set_range( 0, 16000, 1000 );

//チャートにy_axisオブジェクトをセット
$chart->add_y_axis( $y_axis );

//JSONデータ作成
echo $chart->toPrettyString();
?>
[/php]

3.動かしてみよう!

次のようなHTMLを作成します。swfobject.jsやopen-flash-chart.swfのパスは環境により異なると思うので、自分の環境に合わせて変更してください。
db-chart.html
[html]










[/html]

作成できたらサーバにdb.phpdb-chart.htmlをアップロードし、http://***/db-chart.html?ofc=db.phpにアクセスします。***の部分は自分の環境に合わせてください。
こんな↓グラフが出ればバッチリです。





DBと連携できると動的にチャートを生成できるので色々なことができるようになりますね。
このエントリーをはてなブックマークに追加

↑このページのトップヘ