Log.log(work)

いろんな作業メモ

javascript いろいろ

メモ：

  • 配列内の数値を合算したい
mapData.map(o => o.total).reduce((prev, current) => prev + current);
  • 日付を操作するmomentについて

format？型？が違うと操作できないので、ISOじゃないといわれたら素直にnew Dateする。

const a = moment().format('YYYY/MM/DD');

// aの一ヵ月後
const b = moment(a).add(1, 'months').format('YYYY/MM/DD'); // 怒られる
const c = moment(new Date(a)).add(1, 'months').format('YYYY/MM/DD'); // OK

あと、ローカル時間をUTCに変換する場合はこんなかんじ。

const d = moment().utc().format(); // formatすれば現地時間に直してくれる
  • スラッシュをはずす
const beforeStr = '2017/05';
const afterStr = beforeStr.replace(/\u002f/g, ''); // 201705
  • こまったときの
<%= JSON.stringify(data); %>
  • IEの空href 回避　

IEだとhrefに何も指定がないとリンク先が親ディレクトリになるという良く分からないことがおきるため、 hrefには何かしらいれること。

<a href="javascript:void(0)">

  • ES6の場合for of、そうでない場合はforEachを優先的にかく。

  • オレオレ回避

export NODE_TLS_REJECT_UNAUTHORIZED=0

と教わったがAPIを操作するパラメーターに

rejectUnauthorized: false

を追加したほうがスマートかな。

.bowerrcの設定例

デフォルトのディレクトリではなく、指定の場所にインストールしたいときはdirectory設定。
registryは入れておいたほうが吉。
あとよくproxyにひっかかるので。
(環境変数に入れてるはずなんだけどなぁ。。

  • example
{
  "directory": "public/components",
  "json": "bower.json",
  "registry": "http://bower.herokuapp.com",
  "proxy":"http://user:pass@proxy.com:port/",
  "https-proxy":"http://user:pass@proxy.com:port/"
}

chart.js メモ

chart.js javascript

chart.jsで開発したときのメモ

棒×２本と線グラフで描画

Javascript:

var data ={
 labels: ['2017/01','2017/02','2017/03','2017/04','2017/05'],
 lineLabel: '線グラフのラベル'
 linedata: ['100','200','300','400','500'],
 bar1Label: '棒グラフ1のラベル'
 bar1data: ['10','20','30','40','50'],
 bar2Label: '棒グラフ2のラベル'
 bar2data: ['50','40','30','20','10'],
};


var chartData = {
  labels: data.labels,
  datasets: [{
    type: 'line',
    label: data.lineLabel,
    data: data.linedata,
    fill: false,
    backgroundColor: '#fff',
    yAxisID: 'y-axis-right',
  },
  {
    type: 'bar',
    label: data.bar1Label,
    data: data.bar1data,
    yAxisID: 'y-axis-left',
  },
  {
    type: 'bar',
    label: data.bar2Label,
    data: data.bar2data,
    yAxisID: 'y-axis-left',
  },
  ],
};

var complexChartOption = {
  responsive: true,
  scales: {
   yAxes: [{
    id: 'y-axis-left',
    type: 'linear',
    position: 'left',
   }, 
   {
    id: 'y-axis-right',
    type: 'linear',
    position: 'right',
    gridLines: {
     borderDash: [2],
     borderDashOffset: 0.0,
    },
   }],
  },
 };

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: complexChartOption,
});

html:

  <canvas id="canvas"></canvas>

参考：

javascript - Grouped bar charts, in chart.js - Stack Overflow

おまけ

数値のカンマを入れたい。

Javascript:

  var complexChartOption = {
    responsive: true,
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          return String(value).split(/(?=(?:...)*$)/).join(',');
        }
      }
    },
    scales: {
      yAxes: [{
        id: 'y-axis-left',
        type: 'linear',
        position: 'left',
        ticks: {
          callback: function(label, index, labels) {
            return String(label).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          }
        },
        scaleLabel: {
            display: true,
            labelString: data.bar1Label + ' & ' + data.bar2Label,
        }
      }, 
      {
        id: 'y-axis-right',
        type: 'linear',
        position: 'right',
        gridLines: {
          borderDash: [2],
          borderDashOffset: 0.0,
        },
        ticks: {
          callback: function(label, index, labels) {
            return String(label).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          }
        },
        scaleLabel: {
            display: true,
            labelString: data.lineLabel,
        }
      }],
    },
  };

YYYY/MMからYYYYMMにしたい

javascript

momentを使っていればformatで変えられるけど、

直前の処理で正しい日付であることが担保されているので単純に正規表現をつかってみたり。

const yyyy_mm = '2017/05'

const foo = moment(yyyy_mm).format('YYYYMM');
console.log(foo); // 201705

const hoge = yyyy_mm.replace(/\u002f/g, ''); // スラッシュ＝u002f
console.log(hoge); // 201705

 
const hogehoge = yyyy_mm.split('/');  // スラッシュの前後の値が配列としてそれぞれの要素に入る。
console.log(`${hogehoge[0]}${hogehoge[1]}`); // 201705

オブジェクトの判定

Javascriptで中身がないオブジェクトを判定する際のメモ。

const hoge = {};

空でもIFで判定するとtrueになる。

if (hoge) { // true

}

中身がないことを判定するにはキーの数がゼロかどうかで見分ける。

if (Object.keys(hoge).length === 0) {

}

openstreetmap + Leaflet.js memo

javascript openstreetmap Leaflet.js

openstreetmap
https://openstreetmap.jp/

API
http://leafletjs.com/reference.html

レイヤーについて
http://leafletjs.com/examples/layers-control/

プラグイン紹介
http://qiita.com/pokohide/items/6329f1f92253ced23599

経路検索
http://wiki.openstreetmap.org/wiki/JA:OpenRouteService#.E7.9B.B4.E6.8E.A5.E7.B5.8C.E8.B7.AF.E6.A4.9C.E7.B4.A2.E3.83.AA.E3.82.AF.E3.82.A8.E3.82.B9.E3.83.88.EF.BC.88GET_.E3.82.92.E4.BD.BF.E7.94.A8.EF.BC.89

ルートの描画
https://github.com/leaflet/Leaflet.Draw#readme
https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw

上のサンプル
https://leaflet.github.io/Leaflet.draw/docs/examples/snapping.html

Using GeoJSON with Leaflet（つかうかな？
http://leafletjs.com/examples/geojson/
http://s.kitazaki.name/docs/geojson-spec-ja.html

カスタマイズ
http://qiita.com/ShingoOikawa/items/41a522c1361e33c3c3dd