Log.log(work)

いろんな作業メモ

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

YYYY/MMからYYYYMMにしたい

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

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

CentOS7にzipが入っていなかった件

環境 VM上のCentOS7 ※ホストOSはWindows

検証用のCentOSにzipコマンドが含まれているスクリプトを動かしたら

zip: コマンドが見つかりません

え?入ってないんかい。

$ yum list installed | grep zip
bzip2-libs.x86_64                     1.0.6-13.el7                     @anaconda
gzip.x86_64                           1.5-8.el7                        @anaconda

ほんとに入ってなかった。

yumでインストールできるかinfoオプションをつけて確認。

$ sudo yum --enablerepo=epel,remi,rpmforge info zip
読み込んだプラグイン:fastestmirror
Loading mirror speeds from cached hostfile
 * base: ftp.iij.ad.jp
 * epel: ae.mirror.rasanegar.com
 * extras: ftp.iij.ad.jp
 * updates: centos.usonyx.net
利用可能なパッケージ
名前                : zip
アーキテクチャー    : x86_64
バージョン          : 3.0
リリース            : 11.el7
容量                : 260 k
リポジトリー        : base/7/x86_64
要約                : A file compression and packaging utility compatible with
                    : PKZIP
URL                 : http://www.info-zip.org/Zip.html
ライセンス          : BSD
説明                : The zip program is a compression and file packaging
                    : utility.  Zip is analogous to a combination of the UNIX
                    : tar and compress commands and is compatible with PKZIP (a
                    : compression and file packaging utility for MS-DOS
                    : systems).
                    :
                    : Install the zip package if you need to compress files
                    : using the zip program.

お、あるある。

じゃあインストール。

$ sudo yum install zip
読み込んだプラグイン:fastestmirror
base                                                     | 3.6 kB     00:00
extras                                                   | 3.4 kB     00:00
updates                                                  | 3.4 kB     00:00
updates/7/x86_64/primary_db                                | 2.2 MB   00:00
Loading mirror speeds from cached hostfile
 * base: ftp.iij.ad.jp
 * extras: ftp.iij.ad.jp
 * updates: centos.usonyx.net
依存性の解決をしています
--> トランザクションの確認を実行しています。
---> パッケージ zip.x86_64 0:3.0-11.el7 を インストール
--> 依存性解決を終了しました。

依存性を解決しました

================================================================================
 Package        アーキテクチャー  バージョン              リポジトリー     容量
================================================================================
インストール中:
 zip            x86_64            3.0-11.el7              base            260 k

トランザクションの要約
================================================================================
インストール  1 パッケージ

総ダウンロード容量: 260 k
インストール容量: 796 k
Is this ok [y/d/N]: y
Downloading packages:
zip-3.0-11.el7.x86_64.rpm                                  | 260 kB   00:00
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
  インストール中          : zip-3.0-11.el7.x86_64                           1/1
  検証中                  : zip-3.0-11.el7.x86_64                           1/1

インストール:
  zip.x86_64 0:3.0-11.el7

完了しました!

p.s. unzipも入ってなかった。。。