{"id":2975,"date":"2013-07-26T11:52:13","date_gmt":"2013-07-26T02:52:13","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2975"},"modified":"2013-12-30T21:39:39","modified_gmt":"2013-12-30T12:39:39","slug":"post-2975","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/node-js\/2975","title":{"rendered":"\u3010D3.js + node.js\u3011 \u30d6\u30ed\u30b0\u306e\u30c7\u30fc\u30bf\u3092Github\u98a8\u306e\u30ab\u30ec\u30f3\u30c0\u30fc\u306b\u8868\u793a\u3059\u308b"},"content":{"rendered":"

\"wpcalendar\"<\/a><\/p>\n

example<\/a><\/p>\n

WordPress\u3082\u304f\u3082\u304f\u52c9\u5f37\u4f1a@\u7fa4\u99ac #1<\/a>\u3067\u4f5c\u6210\u3057\u305f\u3082\u306e\u3067\u3059\u3002
\n\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/a>\u304c\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u305d\u308c\u3092\u5143\u306b\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n

Github\u306e\u30ab\u30ec\u30f3\u30c0\u30fc\u8868\u793a\u6a5f\u80fd\u306fD3.js\u3067\u4f5c\u6210\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u305d\u306eBlog\u7248\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3002
\n\u2193\u3053\u308c
\n\"githubcalenar\"<\/a><\/p>\n

\u8272\u304c\u3064\u3044\u3066\u3044\u308b\u30bb\u30eb\u304c\u8a18\u4e8b\u3092\u63cf\u3044\u305f\u65e5\u3001\u540c\u3058\u65e5\u306b\u66f8\u3044\u305f\u8a18\u4e8b\u304c\u591a\u3044\u307b\u3069\u6fc3\u3044\u7dd1\u8272\u3067\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u307e\u3059\u3002
\n\u30bb\u30eb\u306b\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3059\u308b\u3068\u8a18\u4e8b\u306e\u30bf\u30a4\u30c8\u30eb\u304c\u8868\u793a\u3055\u308c\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u305d\u306e\u65e5\u306e\u30d6\u30ed\u30b0\u8a18\u4e8b\u3078\u98db\u3073\u307e\u3059\u3002<\/p>\n

\u30ab\u30ec\u30f3\u30c0\u30fc\u306b\u3057\u3066\u307f\u308b\u3068\u3001\u30d6\u30ed\u30b0\u8a18\u4e8b\u3092\u9811\u5f35\u3063\u3066\u66f8\u3044\u305f\u6708\u3068\u305d\u3046\u3067\u3082\u306a\u3044\u6708\u304c\u4e00\u77a5\u3067\u304d\u3066\u306a\u304b\u306a\u304b\u9762\u767d\u3044\u3067\u3059\u306d\u3002<\/p>\n

\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u306e\u4f5c\u6210<\/h2>\n

WordPress\u306e\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u304b\u3089\u300c\u30c4\u30fc\u30eb\u2192\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u300d\u3092\u9078\u629e\u3057\u3001\u6295\u7a3f\u8a18\u4e8b\u3092\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002
\n\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3057\u305fxml\u30d5\u30a1\u30a4\u30eb\u3092node.js\u3092\u4f7f\u3063\u3066json\u306b\u5909\u63db\u3057\u307e\u3057\u305f\u3002
\n\u5909\u63db\u30b9\u30af\u30ea\u30d7\u30c8\u306f\u3001\u4ee5\u524dRSS\u30ea\u30fc\u30c0\u30fc\u3092\u4f5c\u3063\u305f<\/a>\u969b\u306e\u30b3\u30fc\u30c9\u3092\u5229\u7528\u3002
\n(XML\u306e\u30d1\u30fc\u30b9\u306bfeedparser\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f7f\u3063\u3066\u307e\u3059)<\/p>\n

var FeedParser = require('feedparser')\n  , fs = require('fs');\n\nif(!process.argv[2])  throw 'Not File Found!';\nvar file = process.argv[2];\nvar data={\n    url:"",\n    title:"",\n    item:[]\n};\n\nfs.createReadStream(file)\n    .on('error', function (error) {\n        console.error(error);\n    })\n    .pipe(new FeedParser())\n    .on('error', function (error) {\n        console.error(error);\n    })\n    .on('meta', function (meta) {\n        data.url = meta.link;\n        data.title= meta.title\n    })\n    .on('readable', function() {\n        var stream = this, item;\n        stream.end = output;\n        while (item = stream.read()) {\n             data.item.push({title:item.title, url:item.link, date:item["wp:post_date"]["#"]});\n        }\n    });\n\nfunction output(){\n    console.log(JSON.stringify(data));\n}<\/pre>\n
\u4e0b\u8a18\u3092\u5b9f\u884c\u3057\u3066json\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
$ node wpxml2json.js [wp file]  >  wp.json<\/pre>\n
\u3053\u306e\u30c7\u30fc\u30bf\u3092\u4f7f\u3063\u3066\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n
\u30ab\u30ec\u30f3\u30c0\u30fc\u8868\u793a<\/h2>\n
\u57fa\u672c\u3001\u4e0a\u8a18\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3092\u3061\u3087\u3063\u3068\u5f04\u3063\u305f\u3060\u3051\u3068\u3044\u3046\u3002<\/p>\n
d3.json('wp.json', function(json){\n    d3main(json);\n});\n\n\nfunction d3main(json) {\n    var width = 960;\n    var height = 136;\n    var cellSize = 17; \/\/ \u30bb\u30eb\u306e\u30b5\u30a4\u30ba\u6307\u5b9a\n    \n    \/\/\u65e5\u4ed8\u30ab\u30e9\u30fc\n    var color = d3.scale.linear().domain([1, 5]).range(["#aae272", "#2b470e"]);\n\n    \n\n    \/\/string\u2192date\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5909\u63db\u95a2\u6570\n    var day = d3.time.format("%w");\n    var week = d3.time.format("%U");\n    var format = d3.time.format("%Y-%m-%d");\n    \n    var blogURL = json.url;\n    \/\/\u30bf\u30a4\u30c8\u30eb\u306b\u30ea\u30f3\u30af\u8ffd\u52a0\n    d3.select('h1').append('a').attr('href', blogURL).text(json.title);\n    \n    \n    \n    \/\/\u30c7\u30fc\u30bf\u6574\u5f62\t\n   var data = d3.nest()\n\t.key(function(d) { return d.date.split(' ')[0]; }) \/\/date\u3092key\u306b\u30cd\u30b9\u30c8(\u6642\u9593\u306f\u5207\u308a\u843d\u3068\u3059)\n\t.map(json.item);    \n\n    \/\/\u8868\u793a\u5e74\u306e\u6700\u5c0f\u5024\u3068\u6700\u5927\u5024\u3092\u53d6\u5f97\n    var tmp = d3.keys(data);\n    var minYear = d3.min(tmp, function(d){  return +d.split('-')[0]\u3000} );\n    var maxYear = d3.max(tmp, function(d){  return +d.split('-')[0]\u3000} );\n    \n    \/\/\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u6570(\u5e74\u6bce)\u3060\u3051svg\u30bf\u30b0\u3092\u751f\u6210\n    var svg = d3.select("#stage").selectAll("svg")\n\t    .data(d3.range(minYear, maxYear+1)) \n\t    .enter()\n\t    .append("svg")\n\t    .attr("width", width)\n\t    .attr("height", height)\n\t    .append("g")\n\t    .attr("transform", "translate(" + ((width - cellSize * 53) \/ 2) + "," + (height - cellSize * 7 - 1) + ")"); \/\/\u30ab\u30ec\u30f3\u30c0\u2015\u4f4d\u7f6e\u6307\u5b9a\n    \n        \/\/\u5e74\u30bf\u30a4\u30c8\u30eb \u751f\u6210 \n    svg.append("text")\n\t    .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")\n\t    .style("text-anchor", "middle")\n\t    .text(function(d) { return d; });\n\n\n    \/\/\u65e5\u4ed8\u30bb\u30eb\u751f\u6210\n    var cell = svg.selectAll(".day") \n\t    .data(function(d) { return  d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));})\n\t    .enter()\n\t    .append("rect")\n\t    .attr({\n\t\t    "class": "day",\n\t\t    "width": cellSize,\n\t\t    "height": cellSize,\n\t\t    "x": function(d) { return week(d) * cellSize; },\n\t\t    "y": function(d) { return day(d) * cellSize; },\n\t\t    "fill": "#fff",\n\t\t    "stroke": "#ccc"\n\t})\n\t.datum(format);\n    \n\n\t\/\/\u30c7\u30fc\u30bf\u306b\u3082\u3068\u4ed8\u304d\u30bb\u30eb\u3092\u30ab\u30e9\u30fc\u30ea\u30f3\u30b0\n\tcell.filter(function(d) { return d in data; }) \/\/\u30c7\u30fc\u30bf\u304c\u5b58\u5728\u3059\u308b\u304b\u30c1\u30a7\u30c3\u30af\n\t\t.attr("fill", function(d){\n\t\t    return color(data[d].length); \/\/ \u30c7\u30fc\u30bf\u304c\u5b58\u5728\u3059\u308b\u30bb\u30eb\u306b\u8272\u4ed8\u3051\n\t\t})\n\t\t.on("mouseover", function(){\n\t\t\treturn tooltip.style("visibility", "visible");\n\t\t})\n\t\t.on("mousemove", function(d){\n\t\t\tvar titles = "";\n\t\t\tdata[d].forEach(function(d){ titles += "<li>"+d.title+"<\/li>" });\n\t\t\t\n\t\t\treturn tooltip\n\t\t\t\t.style("top", (d3.event.pageY+30)+"px")\n\t\t\t\t.style("left",(d3.event.pageX-90)+"px")\n\t\t\t\t.html(d + ": <br><ul>" + titles + "<\/ul>");\n\t\t\t\t\n\t\t\t\t\n\t\t})\n\t\t.on("mouseout", function(){\n\t\t    return tooltip.style("visibility", "hidden");\n\t\t})\n                .on('click', function(d){\n\t\t    window.open(blogURL+'\/date\/'+d.replace(\/-\/g,'\/'));\n\t\t})\n\n\n                \n                \n    \/\/\u6708\u5883\u754cpath\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\n    var monthPath = function(t0) {\n            var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),\n                    d0 = +day(t0), w0 = +week(t0),\n                    d1 = +day(t1), w1 = +week(t1);\n            \/\/console.log("d0:"+d0+"\/d1:"+d1+"\/w0:"+w0+"\/w1"+w1);\n            var path = "M" + (w0 + 1) * cellSize + "," + d0 * cellSize\n                    + "H" + w0 * cellSize + "V" + 7 * cellSize\n                    + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize\n                    + "H" + (w1 + 1) * cellSize + "V" + 0\n                    + "H" + (w0 + 1) * cellSize + "Z";\n            \/\/console.log(path); \n            return path;\n    }\n    \n    \/\/\u65e5\u4ed8\u30bb\u30eb\u3092\u6708\u6bce\u306bpath\u3067\u5206\u985e\n    svg.selectAll(".month")\n\t    .data(function(d) {\n\t\t return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1));\n\t    })\n\t    .enter()\n\t    .append("path")\n\t    .attr({\n\t\t    "class": "month",\n\t\t    "d": monthPath,\n\t\t    "fill": "none",\n\t\t    "stroke": "#000",\n\t\t    "stroke-width": "2px"\n\t    });\n\n\n    \/\/\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u8981\u7d20\u4f5c\u6210\t\n    var tooltip = d3.select("body")\n\t    .append('div')\n\t    .attr('class', 'arrow_box')\n\t    .style("position", "absolute")\n\t    .style("z-index", "10")\n\t    .style("visibility", "hidden")\n\t    .text("a simple tooltip");\t\n\n    \/\/\u30b9\u30c6\u30fc\u30b8\u3092\u30bb\u30f3\u30bf\u30ea\u30f3\u30b0\n    var windowWidth = document.body.clientWidth;\n    \n    if(windowWidth>width) d3.select('#stage').style('margin-left', Math.floor((windowWidth-width)\/2)+'px');<\/pre>\n
\u4e00\u756a\u8fbc\u307f\u5165\u3063\u3066\u3044\u308b\u306e\u304c\u3001\u65e5\u4ed8\u30bb\u30eb\u3092\u6708\u3054\u3068\u306bPath\u3067\u533a\u5207\u308b\u51e6\u7406(\u6708\u5883\u754cpath\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc)\u306a\u306e\u3067\u3059\u304c\u3001\u3053\u3053\u3089\u8fba\u306f\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u304b\u3089\u4e38\u5199\u3057\u3067\u3059\u3002
\n\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u5439\u304d\u51fa\u3057\u8868\u793a\u306f\u4e0b\u8a18\u3001CSS\u5439\u304d\u51fa\u3057\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u3067\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n
cssarrowplease<\/a><\/p>\n
\u4e0b\u65b9\u306e\u5439\u304d\u51fa\u3057\u304c\u898b\u3065\u3089\u304b\u3063\u305f\u308a\u3001\u65e5\u4ed8\u306e\u30bb\u30eb\u306b\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3059\u308b\u3068documetn\u306e\u30b5\u30a4\u30ba\u304c\u304a\u304b\u3057\u304f\u306a\u3063\u305f\u308a\u3001\u4e00\u756a\u6700\u5f8c\u306e\u8a18\u4e8b\u30c7\u30fc\u30bf\u306bnull\u304c\u5165\u3063\u3066\u3044\u305f\u308a\u3068\u30d0\u30b0\u3060\u3089\u3051\u3067\u307e\u3063\u305f\u304f\u5b8c\u6210\u3057\u3066\u306a\u3044\u3093\u3067\u3059\u304c\u3001\u3082\u304f\u3082\u304f\u4f1a\u306e\u6210\u679c\u767a\u8868\u3067\u306f\u7d20\u77e5\u3089\u306c\u9854\u3057\u3066\u300c\u3067\u304d\u307e\u3057\u305f\u300d\u3068\u5831\u544a\u3057\u3066\u304d\u307e\u3057\u305f\uff08\uff3e\uff3e\uff1b\uff09<\/p>\n
\u3010\u4f59\u8ac7\u3011
\n\u4eca\u56de\u306fGithub\u3092\u4f7f\u3063\u3066\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u4f5c\u6210\u3057\u306a\u304c\u3089\u7d30\u304b\u304f\u30b3\u30df\u30c3\u30c8\u3092\u533a\u5207\u308a\u3001\u3042\u3068\u304b\u3089\u30b3\u30df\u30c3\u30c8\u30ed\u30b0\u3092\u78ba\u8a8d\u3057\u305f\u969b\u306b\u4f5c\u6210\u904e\u7a0b\u304c\u5206\u304b\u308b\u3088\u3046\u306b\u3063\u3066\u306e\u3092\u72d9\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u9014\u4e2dpush\u3059\u308b\u306e\u3092\u5fd8\u308c\u305f\u308a\u3001\u6700\u5f8c\u306e\u65b9\u3067\u30b3\u30df\u30c3\u30c8\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8003\u3048\u308b\u306e\u304c\u9762\u5012\u306b\u306a\u308a\u3059\u3079\u3066\u300cfix\u300d\u3067\u6e08\u307e\u3059\u306a\u3069\u6b8b\u5ff5\u306a\u7d50\u679c\u3068\u306a\u308a\u307e\u3057\u305f\u3002\u2026\u2026\u3082\u3046\u3061\u3087\u3063\u3068\u3001\u3061\u3083\u3093\u3068\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u305f\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
example WordPress\u3082\u304f\u3082\u304f\u52c9\u5f37\u4f1a@…<\/p>\n","protected":false},"author":1,"featured_media":2972,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,5],"tags":[],"class_list":["post-2975","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","category-node-js","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2975","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=2975"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2975\/revisions"}],"predecessor-version":[{"id":3263,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2975\/revisions\/3263"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2972"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}