グラフAPIの件、続き。
今週は半分以上扁桃腺炎で高熱出して寝込んでいました。
40度超えると当たり前ですけどしんどいですね。。。
さて、前回の続きです。もうめんどうなのでベタッと貼り付けます。
仕事で作ったところから不要なところを削除しています。
余計な処理とか変な処理が残っていますので、心の目で読んでください。
ちなみに折れ線グラフです。
長くてみてられないよ！て人は、最後の方までスクロールするといいかもしれません。
HTMLの方で、グラフを二回持ってきています。
これは、一度目はデフォルト用のダミーで、
二回目にクリックした情報をjQueryで吸いだしてajaxでPHPに投げています。
PHPの方では、POSTされてきたデータをもとに、
データベースからsqlでデータを引き出し、
GoogleAPI用のjsonに変換して戻しています。
HTML側、戻ってきたjsonデータはそのまま google.visualization.DataTable に突っ込んでいます。
それで表示できます。
最後に、HTML側最後、setTimeoutを利用しています。
これは今回、複数種類のグラフを切替なければならなかったのでこうなりました。。。
どういうことかというと、googleAPIのグラフは表示された状態でスクリプトが走らないと凡例やら何やらが微妙にズレるんです。
表示→非表示させるために入れてあります。
ダミー用はそれのためもあります。
さぁ、まとめです。
各機能だけをシンプルに抜き出します。
https://gist.github.com/10fc5d4ac1b86b124aa9.git
以上！
GoogleのChartAPI＋jQuery＋JSON＋PHPでグラフデータを動的に変更。
お久しぶりです。生きています。
色々ありまして、もうしばらくしたらフルタイムな正社員に戻る予定です。
いじょう。報告。
で、本日の本題。JSON使って生まれて初めて自分でAjaxしてみてるよ！うまく動かなくてすんごい苦労したよ！！
という話です。
無駄にマニアックな話になるので、興味ない方はリターンされたほうがお得です。
PHPでDBから表を出力→セルをクリックするとグラフ表示、という要件がございまして。
まぁ、javascriptからPHPに抽出元データ渡してjsonで返してもらえばGoogleVisualizationAPIさんがうまいことやってくれんじゃん？とタカをくくっていました。
自分javascriptもjsonもましてやGoogleAPIもろくに使ったことないくせに…！
出来るのはわかっているけど、やり方が分からないアレですよ。見切り発車もいいところですよ…！！
結論としては、その方向で間違いないのですが、普段Javascriptいじっていないので無駄に悩んでしまいました。。。
以下ポイント箇条書き。
- 最初のロードでデフォルト値のグラフを描画しておく。
- クリック時にjQueryで必要なデータをひろってphpに投げる。
- jsonで返す。フォーマットに注意。evalも要らなかった。
- 帰ってきたjsonをDataTableに入れてもっかいdrawする。
つまづいたのは、最初のグラフ描画と再描画をわける必要があるとこ、jsonのフォーマットとevalの要不要、再描画できること。の3つですね。
特にフォーマットは最初に「公式」を参考にするべきです！！！
公式のjsonサンプルが円グラフだったので、適当な参考っぷりで後から後悔です。
他のブログに載っているサンプルも動いたり動かなかったりというか、私のコピペでは動きませんでしたorz
公式のサンプルをそのまま表示させるところからやり直したら無事に進みましたよ。
公式大事です。
まだ完璧には動いていないのと、gitに入れられる状態にしていないので、
もろもろ片付いたらサンプルコードあげて詳しく書きます。
んではまた。
aspもphpもみんなまとめて同じ文法にならないかな。。。
前回書きましたが、環境の関係でPHPをASPに書き換えています（途中）。
まぁ、プログラムなんて一度書いてしまえば、文法的に違う所書き換えればいいだけっしょ☆
とたかをくくっていました…orz
いえ、間違ってないです。
もとから何千行もあるプログラムでもないし、
手続き型で上から下へ行くだけの処理だったので、構造ごと変えなきゃいけない事態でもないし。
その「文法的に違う所を書き換える」だけで一苦労しただけです。。。
aspというかこの場合はvbscriptですね（この言語ももう随分レガシーですが）、
VBに触ったのが年単位で昔になってしまったので、記憶だけで書いてたら動かない動かない。。。
phpやjavaみたいに行番号がでて「ここが違ってるヨ！」みたいなの出てくれればいいものを、
「なにこれ！よくわかんない！ちゃんと処理できないから全部エラーだお！（５００）」みたいな。
文法忘れてるから、検索するわけですよ。書き方を。
ネットで見たとおりに書き直しても５００エラーがバンバンとか、どうしろと！
導入（愚痴）が長くなってしまいましたorz
以下、今回の教訓をもとに、書き換え方法をまとめます。
| PHP | VBScript | 備考 | |
| コメント | // スラッシュ×２ |
' シングルコーテーション |
|
| if文 | if(条件式){ 処理文 }else if(条件式){ 処理文 }else{ 処理文 } |
If 条件式 Then 処理文 Else If 条件式 処理文 Else 処理文 End If |
まず、｛｝じゃないのにつっかかる。 |
| Case文 | switch(条件変数){ case"1": 処理文 break; case"2":case"3": 処理文 break; } |
select case 条件変数 case "1" 処理文 case"2","3" 処理文 end select |
いちいちBreakしなくていいのは楽ちん。 |
| For each文 | foreach(連想配列 as $key => $val){ 処理文 } |
For Each key In 連想配列 処理文 Next |
valが取れないので、都度、連想配列(key)で取得。 |
| 連想配列 | $dataAry = array("01" => 55); もしくは $dataAry["01]=55; |
Dim dataAry Set dataAry = CreateObject("Scripting.Dictionary") dataAry.add "01",55 |
Scripting.Dictionaryてなに。。。 |
| フォームからの値取得 | $_POST['項目'] | Request.Form("項目") | 変数で持ってないのか。。。指定がjavascriptっぽい。 |
| 日付計算 | $date = mktime(0,0,0,$Mon,$Day-1,$Year); | bdate = DateAdd("d",-1,fdate) | VBScriptは関数がある。 phpはいちいち分解するのが面倒。 |
| アウトプット | <input type="hidden" name="name" value=<?php print(date("Y",$date)); ?> > | Response.Write("<input type=""hidden"" name=""name"" value=""" & Year(bdate) & """>") | VBScriptだとタグ内入れ込みはできない。 |
色々他にもつまったところはあるけれど。
こういうちょっとした違いは、なんでもいいから統一されればいいのに！
ここ最近のこと。
第三子が生まれてから早三ヶ月半。
生まれてすぐは子供らが順繰りに体調をくずすので非常にドタバタしておりましたが、
最近ではようやく落ち着いて参りました。
毎日子供三人連れて自転車で送り迎えしちょります。
そんな折に、ひょろりとWordPressのカスタマイズ案件が舞い込み、
現在その作業中です。
WordPressって本当になんでもできそうな感じですねー。。。
なんかもう、一から作るのが馬鹿らしくなってきたりなんだり。
んでも、父からお願いされている件はまだ手付かずなので、
ベースPHPとCakephpは勉強しないとｗｗｗ(ﾏﾃ
勉強のアウトプットはカスタマイズ案件終わり次第、また再開したいと思いまーす。
読書日記も書きたいところではあるのですが、ブクログで怠けてますorz
生まれました。
8月15日午前１１時、三人目の息子を出産しました。
ヤバかったです。自宅で一人で生まなきゃいけないかと…orz
朝7時陣痛開始。
8時になってもおさまらないので、あわてて入院の準備をはじめる。
いくら予定日より10日も前だっつっても、入院の準備はしとくべきだった…orz
8時半保育園に送りに出発。
うん、これも主人に任せるべきでした。
でも、この辺りまでは休み休みでも普通に歩けました。
先生やママさん達と陣痛きてるので、今日かもーなんて話をしたり。余裕ありますね。
9時頃シーツ入れも終わり、主人に病院行くよと電話しつつ急いで自宅へ。
の前に、母子手帳と一緒にもらったはずの書類やら(先天性なんちゃらの検査申請書とか赤ちゃん訪問のハガキとか)がなくなってた(ﾏﾃ)ので、
家の目の前の福祉センターにもらいにいく。
陣痛きてるんですよー、あははと会話しつつ、病院に今から行きますと電話もしつつ自宅へ。
かばんに着替えやらタオルやら書類やらなんやらをつめてる最中に、
何やら、えぇ、何やらでできそうな痛みに変化致しまして。
動けなくなりました。
焦りましたー。このままここで、一人で生まなきゃいけないかと…。
床に横になったまま主人に電話。
職場が理解ある上に、自転車で10分の距離で本当に助かりました。
ほどなく主人到着。
残りの必需品をつめてもらい、私は気合いで玄関へ。
もうね、立てないので四つん這いで移動しましたよ。
サンダルをつっかけ、外に出ました。
外に出てからは主人に腰を支えてもらい、歩いて目の前の病院へ。
本当に近くてよかった…。
外来待ち中に車椅子に乗せてもらい、診察。
ここでもう子宮口が9cmでした。
主人に入院の手続きをまかせ、急いで病棟へ運ばれる。
分娩台に座るとすでに子宮口全開、赤ちゃんを包んでる膜がはってるのが見えてたそうです。
センサー取り付けられーの、点滴つけられーのして10分後。
いきみ二回ですぽんと生まれました。
3070gの元気な男の子です。
陣痛開始から四時間弱のスピード出産でした。
教訓。
入院の準備は早めにしておきましょう。
必要な書類も早めに準備しておきましょう。
あと、陣痛始まってるのに保育園送りに行っちゃダメです。
ただでさえ経産婦は進みが早いのに、歩いたらなおさら加速します。加速装置を使用してはいけません。
私は幸運なことに、病院が歩いて目の前で、主人の職場も近くて理解があり、
安産体質というか痛みに強いというか、お産が進んでも動ける方なので(だから保育園に行ってしまったっつーのもある)間に合いましたが、
普通は9cmになる前に動けなくなります。
きたなと思ったらすぐに病院行きましょう。
というわけで、母子共に元気です。
