{"id":3804,"date":"2014-10-23T12:17:56","date_gmt":"2014-10-23T03:17:56","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3804"},"modified":"2014-10-23T16:11:38","modified_gmt":"2014-10-23T07:11:38","slug":"post-3804","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/javascript\/3804","title":{"rendered":"\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u30c7\u30fc\u30bf\u3092D3.js\u3067\u4f7f\u3046\u306b\u306f\uff1f"},"content":{"rendered":"<p>\u300c\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u30c7\u30fc\u30bf\u3092D3.js\u3067\u4f7f\u3046\u306b\u306f\uff1f\u300d\u3068\u3044\u3046\u8cea\u554f\u3092\u3044\u305f\u3060\u3044\u305f\u306e\u3067\u8a18\u4e8b\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u3002D3.js\u306e\u8a71\u3068\u3044\u3046\u3088\u308a\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092\u3069\u3046\u3084\u3063\u3066\u7e4b\u3050\u304b\uff1f\u3068\u3044\u3046\u8a71\u306a\u308a\u307e\u3059\u304c\u3002<\/p>\n<p>\u57fa\u672c\u7684\u306b\u306f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5074\u3067\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u30c7\u30fc\u30bf\u3092<a href=\"http:\/\/thinkit.co.jp\/article\/70\/1\/\">JSON\u5f62\u5f0f<\/a>\u3067\u51fa\u529b\u3059\u308bAPI\u3092\u4f5c\u308a\u3001API\u306b\u5bfe\u3057\u3066JavaScript\u304b\u3089<a href=\"http:\/\/hakuhin.jp\/js\/xmlhttprequest.html\">XMLHttpRequest<\/a>\u3092\u4f7f\u3063\u3066\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u53d6\u308b\u3068\u3044\u3046\u5f62\u304c\u4e00\u822c\u7684\u3060\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u300cD3.js Tips and Tricks\u300d\u306b\u305d\u306e\u3082\u306e\u30ba\u30d0\u30ea\u306a\u8a18\u4e8b\u304c\u63b2\u8f09\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u3053\u306e\u8a18\u4e8b\u3067\u306fphp\u90e8\u5206\u3092pdo\u3092\u4f7f\u3063\u305f\u30b3\u30fc\u30c9\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/www.d3noob.org\/2013\/02\/using-mysql-database-as-source-of-data.html\">Using a MySQL database as a source of data<\/a><\/p>\n<h3>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u69cb\u6210<\/h3>\n<ul>\n<li>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\uff1aMySQL<\/li>\n<li>WEB\u30b5\u30fc\u30d0\u30fc\uff1aApache<\/li>\n<li>API:PHP<\/li>\n<\/ul>\n<p>\u3060\u3044\u305f\u3044\u3053\u3093\u306a\u611f\u3058\u3002<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/10\/d32db141023.png\" alt=\"d32db141023\" width=\"590\" height=\"226\" class=\"alignnone size-full wp-image-3805\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/10\/d32db141023.png 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/10\/d32db141023-300x115.png 300w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><br \/>\n\u8cea\u554f\u3044\u305f\u3060\u3044\u305f\u5185\u5bb9\u304c\u300cPHP+MySQL\u300d\u3068\u3044\u3046\u3053\u3068\u3060\u3063\u305f\u306e\u3067\u3053\u306e\u69cb\u6210\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5074\u306f\u57fa\u672c\u7684\u306bJSON\u3067\u51fa\u529b\u3059\u308b\u4ed5\u7d44\u307f\u3055\u3048\u3064\u304f\u308c\u308c\u3070\u4f55\u3067\u3082OK\u3067\u3059\u3002<\/p>\n<h3>\u30c6\u30fc\u30d6\u30eb\u306e\u5185\u5bb9(sample_tb)<\/h3>\n<p>\u4eca\u56de\u4f7f\u7528\u3059\u308b\u30c7\u30fc\u30bf\u306e\u5185\u5bb9\u306f\u4ee5\u4e0b\u3067\u3059\u3002<\/p>\n<style type=\"text\/css\">\n.tg  {border-collapse:collapse;border-spacing:0;border-color:#aaa;}\n.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#333;background-color:#fff;}\n.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;background-color:#f38630;}\n.tg .tg-s6z2{text-align:center}\n.tg .tg-z2zr{background-color:#FCFBE3}\n<\/style>\n<table class=\"tg\">\n<tr>\n<th class=\"tg-s6z2\">id<\/th>\n<th class=\"tg-s6z2\">user<\/th>\n<th class=\"tg-s6z2\">age<\/th>\n<th class=\"tg-s6z2\">tel<\/th>\n<th class=\"tg-s6z2\">mail<\/th>\n<th class=\"tg-s6z2\">count<\/th>\n<\/tr>\n<tr>\n<td class=\"tg-z2zr\">1<\/td>\n<td class=\"tg-z2zr\">shimizu<\/td>\n<td class=\"tg-z2zr\">12<\/td>\n<td class=\"tg-z2zr\">00-0000-0000<\/td>\n<td class=\"tg-z2zr\">sample@hoge.ne.jp<\/td>\n<td class=\"tg-z2zr\">120<\/td>\n<\/tr>\n<tr>\n<td class=\"tg-031e\">2<\/td>\n<td class=\"tg-031e\">suzuki<\/td>\n<td class=\"tg-031e\">23<\/td>\n<td class=\"tg-031e\">00-0000-0000<\/td>\n<td class=\"tg-031e\">sample@hoge.ne.jp<\/td>\n<td class=\"tg-031e\">333<\/td>\n<\/tr>\n<tr>\n<td class=\"tg-z2zr\">3<\/td>\n<td class=\"tg-z2zr\">tanaka<\/td>\n<td class=\"tg-z2zr\">33<\/td>\n<td class=\"tg-z2zr\">00-0000-0000<\/td>\n<td class=\"tg-z2zr\">sample@hoge.ne.jp<\/td>\n<td class=\"tg-z2zr\">469<\/td>\n<\/tr>\n<tr>\n<td class=\"tg-031e\">4<\/td>\n<td class=\"tg-031e\">yamada<\/td>\n<td class=\"tg-031e\">42<\/td>\n<td class=\"tg-031e\">00-0000-0000<\/td>\n<td class=\"tg-031e\">sample@hoge.ne.jp<\/td>\n<td class=\"tg-031e\">530<\/td>\n<\/tr>\n<tr>\n<td class=\"tg-z2zr\">5<\/td>\n<td class=\"tg-z2zr\">uehara<\/td>\n<td class=\"tg-z2zr\">26<\/td>\n<td class=\"tg-z2zr\">00-0000-0000<\/td>\n<td class=\"tg-z2zr\">sample@hoge.ne.jp<\/td>\n<td class=\"tg-z2zr\">432<\/td>\n<\/tr>\n<\/table>\n<h3>API.php<\/h3>\n<p>\u30c6\u30fc\u30d6\u30eb\u306e\u5185\u5bb9\u3092\u305d\u306e\u307e\u307eJSON\u3068\u3057\u3066\u51fa\u529b\u3059\u308bAPI\u3092\u4f5c\u308a\u307e\u3059\u3002 <\/p>\n<pre class=\"lang:php decode:true \" >&lt;?php\r\n\/\/\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3078\u306e\u63a5\u7d9a\r\ndefine('DB_NAME', 'sampledb');\r\ndefine('DB_HOST', 'localhost');\r\ndefine('DB_USER', 'user');\r\ndefine('DB_PASS', 'password');\r\n \r\n$dsn = 'mysql:dbname=' . DB_NAME . ';host=' . DB_HOST . ';charset=utf8';\r\n$option = array(\r\n    PDO::ATTR_ERRMODE =&gt; PDO::ERRMODE_EXCEPTION,\r\n    PDO::ATTR_DEFAULT_FETCH_MODE =&gt; PDO::FETCH_ASSOC,\r\n    PDO::MYSQL_ATTR_USE_BUFFERED_QUERY =&gt; true,\r\n    PDO::ATTR_EMULATE_PREPARES =&gt; false,\r\n    PDO::ATTR_STRINGIFY_FETCHES =&gt; false\r\n);\r\n \r\ntry {\r\n    $db = new PDO($dsn, DB_USER, DB_PASS, $option);\r\n} catch (PDOException $e){\r\n    echo $e-&gt;getMessage();\r\n}\r\n\r\n\/\/\u30af\u30a8\u30ea\u9001\u4fe1\r\n$sql = \"SELECT * FROM sample_tb\";\r\n$result\u3000= $db-&gt;query($sql);\r\n\r\n\/\/json\u3068\u3057\u3066\u51fa\u529b\r\n$json = json_encode($result);\r\nheader('Content-type: application\/json; charset=UTF-8');\r\n\/\/header('Access-Control-Allow-Origin:*');  \/\/*1\r\necho($json);<\/pre>\n<p>API\u3092\u4f5c\u6210\u3057\u305f\u3089\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bapi.php\u3092\u7f6e\u304d\u3001\u5b9f\u969b\u306b\u30d6\u30e9\u30a6\u30b6\u3067\u30a2\u30af\u30bb\u30b9\u3057\u3066\u307f\u3066JSON\u304c\u3061\u3083\u3093\u3068\u51fa\u529b\u3055\u308c\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3059\u308b\u3068\u826f\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<p>*1 Access-Control-Allow-Origin\u306b\u3064\u3044\u3066\u306f\u4e0b\u8a18\u8a18\u4e8b\u3092\u3001<br \/>\n<a href=\"http:\/\/otiai10.hatenablog.com\/entry\/2013\/04\/04\/233057\">\u3010\u4f55\u305e\uff1f\u3011Access-Control-Allow-Origin, \u30af\u30ed\u30b9\u30c9\u30e1\u30a4\u30f3\u5236\u7d04, \u540c\u4e00\u751f\u6210\u5143\u30dd\u30ea\u30b7\u30fc\u3063\u3066\u4f55\u305e\u3010XMLHttpRequest\u3011\u3010JavaScript\u3011\u3010Apache\u3011 &#8211; DRY\u306a\u5099\u5fd8\u9332<\/a><\/p>\n<p>*2 PDO\u306e\u4f7f\u3044\u65b9\u306b\u3064\u3044\u3066\u306f\u4e0b\u8a18\u8a18\u4e8b\u3092\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n<a href=\"http:\/\/php-archive.net\/php\/pdo-mysql\/\">[PHP]PDO\u3092\u4f7f\u3063\u305fMySQL\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3078\u306e\u63a5\u7d9a\u3068\u57fa\u672c\u64cd\u4f5c | PHP Archive<\/a><\/p>\n<h3>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u5074<\/h3>\n<p>D3.js\u3067API\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" >d3.json(\"api.php\", function(dataSet){\r\n\tconsole.log(dataSet);\r\n});<\/pre>\n<p>\u53d7\u3051\u53d6\u3063\u305f\u30c7\u30fc\u30bf\u306e\u5185\u5bb9\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n<pre class=\"lang:js decode:true \" >console.log(dataSet)\r\n&gt;\r\n[\r\n\t{\"id\":1,\"user\":\"shimizu\",\"age\":12,\"tel\":\"00-0000-0000\",\"mail\":\"sample@hoge.ne.jp\",\"count\":120},\r\n\t{\"id\":2,\"user\":\"suzuki\",\"age\":23,\"tel\":\"00-0000-0000\",\"mail\":\"sample@hoge.ne.jp\",\"count\":333},\r\n\t{\"id\":3,\"user\":\"tanaka\",\"age\":33,\"tel\":\"00-0000-0000\",\"mail\":\"sample@hoge.ne.jp\",\"count\":469},\r\n\t{\"id\":4,\"user\":\"yamada\",\"age\":42,\"tel\":\"00-0000-0000\",\"mail\":\"sample@hoge.ne.jp\",\"count\":530},\r\n\t{\"id\":5,\"user\":\"uehara\",\"age\":26,\"tel\":\"00-0000-0000\",\"mail\":\"sample@hoge.ne.jp\",\"count\":432}\r\n]<\/pre>\n<p>d3.json\u3092\u4f7f\u3063\u305f\u901a\u4fe1\u306f\u57fa\u672cGET\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\nPOST\u30ea\u30af\u30a8\u30b9\u30c8\u3067\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u306a\u3069\u3082API\u5074\u306b\u9001\u308a\u305f\u3044\u3068\u3044\u3046\u5834\u5408\u306f\u4ee5\u4e0b\u3092\u3002<\/p>\n<p><a href=\"http:\/\/qiita.com\/_shimizu\/items\/9f53935c6e62ae0d0de6\">JavaScript &#8211; d3.json\u3067post\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3059\u308b &#8211; Qiita<\/a><\/p>\n<h2>\u88dc\u8db3<\/h2>\n<p>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u3064\u306a\u304e\u65b9\u306f\u5927\u4f53\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u304b\u306d\u3002<br \/>\n\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u7d61\u3081\u3066\u3082\u3063\u3068\u8907\u96d1\u306a\u4e8b\u304c\u3057\u305f\u3044\u3068\u3044\u3046\u610f\u5834\u5408\u306f\u4e0a\u8a18\u306e\u3088\u3046\u306a\u7c21\u6613\u7684\u306aAPI\u3067\u306a\u304f\u3001\u3061\u3083\u3093\u3068\u300c<a href=\"http:\/\/www.atmarkit.co.jp\/ait\/articles\/1310\/23\/news078.html\">RESTful API<\/a>\u300d\u3092\u4f5c\u6210\u3059\u308b\u306e\u304c\u826f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\nFuelPHP\u306a\u3069\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f7f\u3046\u3068REST\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u304c\u7c21\u5358\u306b\u4f5c\u308c\u308b\u3089\u3057\u3044\u3067\u3059\u3002<br \/>\n<a href=\"http:\/\/blog.ko31.com\/201408\/fuelphp-book-review\/\">\u300c\u306f\u3058\u3081\u3066\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u3057\u3066\u306eFuelPHP \u7b2c2\u7248\u300d\u304c\u5f53\u9078\u3057\u305f\u306e\u3067FuelPHP\u3092\u8efd\u304f\u3044\u3058\u3063\u3066\u307f\u307e\u3057\u305f<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u300c\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u30c7\u30fc\u30bf\u3092D3.js\u3067\u4f7f\u3046\u306b\u306f\uff1f\u300d\u3068&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3805,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,6,13],"tags":[],"class_list":["post-3804","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","category-javascript","category-php","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=3804"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3804\/revisions"}],"predecessor-version":[{"id":3806,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3804\/revisions\/3806"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3805"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}