{"id":1010,"date":"2019-06-15T23:05:56","date_gmt":"2019-06-15T14:05:56","guid":{"rendered":"https:\/\/ito-u-oti.com\/?p=1010"},"modified":"2019-06-15T23:05:59","modified_gmt":"2019-06-15T14:05:59","slug":"post-1010","status":"publish","type":"post","link":"https:\/\/ito-u-oti.com\/?p=1010","title":{"rendered":"\u3010RequireJS\u3011\u3010BackboneJS\u3011\u3010HighchartsJS\u3011backboneJS\u3067highchartsJS\u3092\u4f7f\u3046\u2010\u305d\u306e\uff12"},"content":{"rendered":"\n

\u524d\u56de\u8a18\u4e8b\u306e\u7d9a\u304d\u3067\u3059\u3002
\u3010RequireJS\u3011\u3010BackboneJS\u3011\u3010HighchartsJS\u3011backboneJS\u3067highchartsJS\u3092\u4f7f\u3046\u2010\u305d\u306e\uff11<\/a><\/p>\n\n\n\n

\u524d\u56de\u306fhighcharts\u306b\u56fa\u5b9a\u5024\u3092\u8a2d\u5b9a\u3057\u3066View\u3067\u305d\u306e\u307e\u307e\u753b\u9762\u306b\u8868\u793a\u3055\u305b\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3057\u305f\u304c\u3001\u4eca\u56de\u306fbackbone\u306eCollection\u3092\u4f7f\u3063\u3066\u30b5\u30fc\u30d0\u304b\u3089\u53d6\u5f97\u3057\u305f\u60c5\u5831\u3092highcharts\u306e\u30c7\u30fc\u30bf\u3068\u3057\u3066\u4f7f\u7528\u3057\u3066\u753b\u9762\u306b\u8868\u793a\u3055\u305b\u308b\u3088\u3046\u306b\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\u524d\u63d0<\/h2>\n\n\n\n

\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\u30b5\u30fc\u30d0\u5074\u60c5\u5831 (Hello)<\/h3>\n\n\n\n

REST URL<\/h4>\n\n\n
\ncurl -X GET http:\/\/localhost:3000\/hello\n<\/pre><\/div>\n\n\n
 \u53d6\u5f97\u30c7\u30fc\u30bf <\/h4>\n\n\n
\n{\n  "hello": {\n    "text": "Hello World Backbone Fetch!!"\n  }\n}\n<\/pre><\/div>\n\n\n
 \u30b5\u30fc\u30d0\u5074\u60c5\u5831 (HelloValue) <\/h3>\n\n\n\n
 REST URL<\/h4>\n\n\n
\ncurl -X GET http:\/\/localhost:3000\/helloValue\n<\/pre><\/div>\n\n\n
 \u53d6\u5f97\u30c7\u30fc\u30bf  <\/h4>\n\n\n
\n{\n  "helloValue": [\n      {\n          "num":0.5\n      },\n      {\n          "num":1.5\n      }\n  ]\n}\n\n<\/pre><\/div>\n\n\n
requireJS+backboneJS+highchartsJS <\/h2>\n\n\n\n
index.html<\/h3>\n\n\n
\n<!DOCTYPE html>\n<html lang="ja">\n    <head>\n        <meta charset="utf-8">\n        <title><\/title>\n    <\/head>\n    <body>\n        <script src="https:\/\/requirejs.org\/docs\/release\/2.3.6\/minified\/require.js"><\/script>\n        <script src=".\/js\/config\/config.js"><\/script>\n        <script src=".\/js\/views\/HelloWorldView.js"><\/script>\n        <script type="text\/template" id="hello-template">\n            <h2><%= text %><\/h2>\n        <\/script>\n        <h1>Hello World!<\/h1>\n        <div class="hoge"><\/div>\n        <div id="container"><\/div>\n    <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
 hoge\u30af\u30e9\u30b9\u3068containerID\u304c\u4ed8\u4e0e\u3055\u308c\u3066\u3044\u308bdev\u30bf\u30b0\u3092\u305d\u308c\u305e\u308c\u4f5c\u6210\u3057\u3066\u304a\u304d\u307e\u3059\u3002
hoge\u306bModel\u306e\u5185\u5bb9\u304c\u5165\u308a\u307e\u3059\u3002
container\u306b\u30b0\u30e9\u30d5\u304c\u63cf\u753b\u3055\u308c\u307e\u3059\u3002 <\/p>\n\n\n\n
config.js<\/h3>\n\n\n
\nrequire.config({\n    packages: [{\n        name: 'highcharts',\n        main: 'highcharts'\n    }],\n    baseUrl: "js",\n    paths: {\n        "backbone" : "lib\/backbone",\n        "jquery" : "lib\/jquery",\n        "underscore" : "lib\/underscore",\n        \/\/'highcharts': 'https:\/\/code.highcharts.com'\n        "highcharts": "lib"\n    },\n    shim: {\n        'backbone' : {\n            deps: ['underscore', 'jquery'],\n            exports: 'Backbone'\n        }\n    }\n});\n\n<\/pre><\/div>\n\n\n
 backboneJS\u3068highchartsJS\u306e\u8aad\u307f\u8fbc\u307f\u8a2d\u5b9a\u3092\u884c\u306a\u3063\u3066\u3044\u307e\u3059\u3002
highcharts\u306epaths\u8a2d\u5b9a\u3067URL\u306e\u65b9\u304c\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u305f\u3044\u5834\u5408\u306fURL\u6307\u5b9a\u3067\u3082\u884c\u3051\u308b\u3088\u3068\u3044\u3046\u610f\u5473\u3067\u4e00\u5fdc\u8a18\u8f09\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
 HelloWorldModel.js <\/h3>\n\n\n
\ndefine(['backbone'], function(backbone) {\n\n    var HelloWorldModel = backbone.Model.extend({\n        url: "http:\/\/localhost:3000\/hello",\n        defaults: {\n            "text":"Hello World Backbone!!"\n        },\n        read: function(){\n            this.fetch()\n        }\n    });\n    return HelloWorldModel;\n});\n<\/pre><\/div>\n\n\n
fetch\u304c\u6210\u529f\u3059\u308b\u3068\u3001text\u304c\u300cHello World Backbone fetch!!\u300d\u306b\u4e0a\u66f8\u304d\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
HelloWorldCollection.js<\/h3>\n\n\n
\ndefine(['backbone'], function(backbone) {\n\n    var HelloWorldCollection = backbone.Collection.extend({\n        url: "http:\/\/localhost:3000\/helloValue",\n        defaults: {\n            "text":"Hello World Backbone!!"\n        },\n        read: function(){\n            this.fetch()\n        }\n    });\n    return HelloWorldCollection;\n});\n<\/pre><\/div>\n\n\n
helloValue\u306efetch\u3067\u53d6\u5f97\u3059\u308b\u30c7\u30fc\u30bf\u304c\u914d\u5217\u3068\u306a\u308b\u306e\u3067\u3001backbone\u306eCollection\u3092\u4f7f\u3044\u307e\u3059\u3002
Collection\u306e\u5404\u8981\u7d20\u306bnum\u3068\u3044\u3046\u30d5\u30a3\u30fc\u30eb\u30c9\u304c\u751f\u6210\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
HelloWorldView.js<\/h3>\n\n\n
\nrequire(['backbone', 'model\/HelloWorldModel', 'collection\/HelloWorldCollection', 'highcharts'],\nfunction(backbone, helloWorldModel, helloWorldCollection, hi) {\n\n    var model = new helloWorldModel();\n    var collection = new helloWorldCollection();\n\n    var HelloWorldView = backbone.View.extend({\n        el: $('.hoge'),\n        initialize: function() {\n            model.read();\n            this.listenToOnce( model, 'sync', this.render);\n            collection.read();\n            this.listenToOnce( collection, 'sync', this.graph);\n        },\n        render: function() {\n            $(this.el).html(_.template($('#hello-template').text())({ "text": model.get("text") }));\n        },\n        graph: function() {\n            hi.chart('container', {\n                chart: {\n                    renderTo: 'chart',\n                    type: 'bar'\n                },\n                title: {\n                    text: 'Hello Highcharts'\n                },\n                xAxis: {\n                    categories: ['Hello', 'World']\n                },\n                yAxis: {\n                    title: 'Value'\n                },\n                series: [{\n                    name: 'Highcharts Intro',\n          \t         data: [collection.at(0).get('num'), collection.at(1).get('num')]\n                }]\n            });\n        }\n    });\n    new HelloWorldView();\n});\n\n<\/pre><\/div>\n\n\n
  1. model\u306eread\u3092\u547c\u3073\u51fa\u3057\u3001\u30b5\u30fc\u30d0\u304b\u3089\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308b<\/li>
  2.  listenToOnce\u3067model\u306e\u72b6\u614b\u3092\u76e3\u8996\u3057\u3001model\u304c\u5909\u5316\u3057\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067View\u306erender\u3092\u547c\u3073\u51fa\u3059<\/li>
  3. read\u3057\u305f\u6642\u70b9\u3067model\u306etext\u304c\u4e0a\u66f8\u304d\u3055\u308c\u3001model\u306e\u72b6\u614b\u304c\u5909\u308f\u3063\u305f\u305f\u3081render\u304c\u547c\u3073\u51fa\u3055\u308c\u3001template\u304c\u753b\u9762\u306b\u633f\u5165\u3055\u308c\u308b<\/li>
  4. collection\u306eread\u3092\u547c\u3073\u51fa\u3057\u3001\u30b5\u30fc\u30d0\u304b\u3089\u914d\u5217\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308b<\/li>
  5. listenToOnce\u3067collection\u306e\u72b6\u614b\u3092\u76e3\u8996\u3057\u3001collection\u304c\u5909\u5316\u3057\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067View\u306egraph\u3092\u547c\u3073\u51fa\u3059<\/li>
  6. read\u3057\u305f\u6642\u70b9\u3067collection\u306bnum\u304c\u751f\u6210\u3055\u308c\u3001collection\u306e\u72b6\u614b\u304c\u5909\u308f\u3063\u305f\u305f\u3081graph\u304c\u547c\u3073\u51fa\u3055\u308c\u3001highcharts\u306e\u30b0\u30e9\u30d5\u304c\u753b\u9762\u306b\u63cf\u753b\u3055\u308c\u308b <\/li><\/ol>\n\n\n\n
    \u8868\u793a<\/h3>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \u68d2\u30b0\u30e9\u30d5\u306e\u6570\u5024\u304c\u30b5\u30fc\u30d0\u304b\u3089\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u306b\u306a\u3063\u3066\u3044\u308b\u3053\u3068\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
    \u307e\u3068\u3081<\/h2>\n\n\n\n
    \u4eca\u307e\u3067\u4f7f\u3063\u305frequireJS\u3001backboneJS\u3001highchartsJS\u3068\u30b5\u30fc\u30d0\u53d6\u5f97\u306e\u6a5f\u80fd\u5168\u90e8\u4e57\u305b\u306a\u307e\u3068\u3081\u7684HelloWorld\u3067\u3057\u305f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u524d\u56de\u8a18\u4e8b\u306e\u7d9a\u304d\u3067\u3059\u3002\u3010RequireJS\u3011\u3010BackboneJS\u3011\u3010HighchartsJS\u3011bac […]<\/p>\n","protected":false},"author":1,"featured_media":975,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[211],"tags":[220,228,227,225,224,213,226,221],"class_list":["post-1010","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-backbonejs","tag-collection","tag-fetch","tag-highchartsjs","tag-model","tag-requirejs","tag-server","tag-view"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t