2012年1月27日金曜日

PHP json_decode ではまったこと

配列をjsonに変換し、POSTした画面先で再度配列に直す処理を書いていたときにはまったこと。

json_decodeの第二引数を「true」にして連想配列にすれば良かったのですが、見逃していて自力で配列にキャストした時に、よくわからないことが起こりました。

自力で配列へのキャスト
<?php
$arr = array(1 => 'hoge',
'a' => 'fuga',
2 => 'piyo',
'b' => 1234,
);

$json = json_encode($arr);
var_dump($json);

$json_arr = (array)json_decode($json);
var_dump($json_arr);

foreach ($json_arr as $k => $v) {
var_dump($json_arr[$k]);
}


このコードの実行結果は以下の様になりました。



エラーが出るのでキーに「"1"」の文字列が入ったのかなとか思ったのですが、結局そのキーを指定しても、ダメでした。
結局なぜダメなのかはわからずですが、json_decodeの第二引数を「true」にした場合は、問題なかったのでそちらでやるようにしました。
原因知りたいですが、未だわからずです。


第二引数に「true」を師弟
<?php
$arr = array(1 => 'hoge',
'a' => 'fuga',
2 => 'piyo',
'b' => 1234,
);

$json = json_encode($arr);
var_dump($json);

$json_arr = json_decode($json, true);
var_dump($json_arr);

foreach ($json_arr as $k => $v) {
var_dump($json_arr[$k]);
var_dump($json_arr[(string)$k]);
}


このコードの実行結果は以下の様になりました。


jsonから配列に変換する時は、json_decodeを利用するとキーが数字の場合は、int型のキー配列に変換してくれるようです。

2012年1月10日火曜日

SVGの簡単なサンプル

SVGというものを最近知ったので、サンプルを書いてみた。
サンプルと言っても、下記ページを読んで、そのまま書いて見ただけです。
ASCII.jp

サンプルHTML
<html>
<head>
<meta charset="UTF-8" />
<title>SVGサンプル</title>
</head>
<body>
<table border="1">
<tr>
<th><div><p>四角</p></div></th>
<th><div><p>角丸四角</p></div></th>
<th><div><p>正円</p></div></th>
<th><div><p>楕円</p></div></th>
<th><div><p>直線</p></div></th>
<th><div><p>連続直線</p></div></th>
<th><div><p>多角形</p></div></th>
<th><div><p>ベジエ曲線</p></div></th>
<th><div><p>JSで記述</p></div></th>
</tr>
<tr>
<td width="100" height="100">
<svg>
<rect x="1" y="1" fill="blue" stroke="red" width="100" height="100">
</svg>
</td>
<td width="100" height="100">
<svg>
<rect x="1" y="1" fill="blue" stroke="red" width="100" height="100" ry="20">
</svg>
</td>
<td width="100" height="100">
<svg>
<circle cx="50" cy="50" r="50" fill="blue" stroke="red">
</svg>
</td>
<td width="100" height="100">
<svg>
<ellipse cx="50" cy="50" rx="50" ry="30" fill="blue" stroke="red">
</svg>
</td>
<td width="100" height="100">
<svg>
<line x1="1" y1="1" x2="100" y2="100" stroke="blue">
</svg>
</td>
<td width="100" height="100">
<svg>
<polyline points="1,1 50,100 100,1" fill="none" stroke="blue">
</svg>
</td>
<td width="100" height="100">
<svg>
<polygon points="1,1 50,100 100,1" fill="none" stroke="blue">
</svg>
</td>
<td width="100" height="100">
<svg>
<path d="M 1,1 C 33,100,66,20,100,30" fill="none" stroke="blue">
</svg>
</td>
<td width="100" height="100">
<form>
<input type="button" value="直線を描く" onclick="drawLine()" />
</form>
<script><!--
function drawLine() {
document.getElementById('mySVG').innerHTML = '<svg><line x1="1" y1="100" x2="100" y2="1" stroke="blue">';
}
--></script>
<div id="mySVG"></div>
</td>
</tr>
</table>
</body>
</html>




連続曲線の時に、fill属性をnoneにしないと、黒で内部が塗りつぶされます。
ブラウザは特定以上のバージョンじゃないと、上手く表示されないようです。

これを使えば、僕の用にあまりhtmlとか詳しくなくてもちょっとした図形を書くことができそうです。
以前と比べて導入しやすくなったようです。このような物もあるんだなと思いました。