Log.log(work)

いろんな作業メモ

IEのnew Date()

Edgeでnew Date().toString()すると

Fri Jul 28 2017 10:12:34 GMT+0900 (東京 (標準時))

という文字列が返ってくる。

IE10とIE9で同様に試したところ、返ってきた文字列は

Fri Jul 28 10:12:34 UTC+0900 2017

になった。

今回たまたまURLにくっついていたからEdgeだと動かないというエラーが発生したが、 ほかのブラウザだとどうなるのかな。

Gtk-WARNING **: cannot open display: で怒られた

コンソール越しに言われても。

そんなときはこのコマンド

unset SSH_ASKPASS

参考:

コンソール越しに git コマンドから Gtk-WARNING **: cannot open display と怒られた時 - Qiita

git submodule

外部リポジトリを自リポジトリに持ってきて参照できるしくみ。

[Add submodule] submoduleを別ブランチに追加する場合

  • When you command ‘git clone’

.gitmodulesファイルがあれば、そこに記述されているrepositoryをsubmoduleとして取り込む。

  • When you command manually ‘submodule add’

手動でsubmoduleを追加する場合は以下のコマンドで追加する。

$ git submodule add url/xxx.git [フォルダ名]

[Edit submodule] (取り込んだ先から)submoduleを編集する場合

取り込んだsubmoduleディレクトリに移動し、別ブランチを作成してcommit & pushする。

  • example
$ cd common

$ git checkout -b work

修正したらadd & commit & push

$ git commit -m "common update"

$ git push origin work

repositoryに修正内容を反映し、取り込んでいる各repositoryを更新する。

[Update submodule] submoduleが最新になった場合

下記のコマンドで取り込む。

git submodule foreach git pull origin master

[Delete submodule] submoduleを削除する場合

取り込んだsubmoduleを削除する場合

  • example (hogeがsubmoduleである場合)
git submodule deinit hoge
git rm hoge

json2csvめも

Express でアプリを作ったときにCSVをDLする機能があったのでjson2csvを使ってみたら思いのほか楽だった。

json2csv

model.js

const jsonbody ={
  {
    "key1":"value",
    "key2":1,
    "key3":"2017-05-22",
  },
  {
    "key1":"value2",
    "key2":2,
    "key3":"2017-05-23",
  },
};

const csvdata = json2csv({ data: jsonbody, fields: Object.keys(jsonbody[0]) });

routes.js

    res.setHeader('Content-Type', 'text/csv; charset=shift-jis');
    res.setHeader('Content-Disposition', `attachment; filename=download.csv`);
    res.write(csvdata);
    res.end();

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で開発したときのメモ

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

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,
        }
      }],
    },
  };