Monthly Archives: 2月 2016

Walking #039

日付	曜日	歩数
2016.02.21	日	2321
2016.02.22	月	9263
2016.02.23	火	5413
2016.02.24	水	8499
2016.02.25	木	7990
2016.02.26	金	8043
2016.02.27	土	4414

合計
45943

QGIS #030 – フィールドを編集「Table manager」

今回はフィールドを編集できる「Table manager」というプラグインを試します。

「Table manager」でフィールドを編集するためには下記方法でおこないます。

プラグイン検索画面で「Table manager」を入力 → プラグインを選択 → プラグインをインストール

フィールドを編集したいレイヤを選択して、インストールした「Table manager」を実行します。

編集ダイアログで、フィールドの順番を変更したりフィールド名を変更することが可能になります。

QGISの通常機能ではできないフィールドの順番変更やフィールド名を変更することなどが可能になるので便利です。

参考文献

Table manager

Walking #038

日付	曜日	歩数
2016.02.14	日	2857
2016.02.15	月	9689
2016.02.16	火	8365
2016.02.17	水	8510
2016.02.18	木	8472
2016.02.19	金	8189
2016.02.20	土	8411

合計
54493

Node.js #019 – gulpでタスクの実行順

今回は、「gulp」でタスクの実行順を確認したいと思います。

「gulpfile.js」に下記コードを記述します。

gulpfile.js

var gulp = require('gulp');

gulp.task('sample01', function() {
    return gulp.src('./sample/index.html')
        .pipe(gulp.dest('./dist'));
});

gulp.task('sample02', ['sample01'], function() {
    return gulp.src('./sample/sample.html')
        .pipe(gulp.dest('./dist'));;
});

gulp.task('log', ['sample02'], function() {
    console.log('処理終了しました。');
});

gulp.task('default', ['log']);

var gulp = require('gulp');

gulp.task('sample01', function() {

return gulp.src('./sample/index.html')

.pipe(gulp.dest('./dist'));

});

gulp.task('sample02', ['sample01'], function() {

return gulp.src('./sample/sample.html')

.pipe(gulp.dest('./dist'));;

});

gulp.task('log', ['sample02'], function() {

console.log('処理終了しました。');

});

gulp.task('default', ['log']);

作業フォルダでgulpを実行すると実行結果がコマンドプロントに表示されます。

gulp

gulp

第2引数に先に実行したいタスクを指定:

gulp.task('sample02', ['sample01'], function() {

1	gulp.task('sample02', ['sample01'], function() {

タスクを返す処理:

return gulp.src('./sample/sample.html')

1	return gulp.src('./sample/sample.html')

gulpではタスクが並列で実行されます。そのため実行順を指定しなければどういう順番で実行するかわかりません。今回の記述を利用すると実行順を指定して実行することが可能になります。

参考文献

gulp
gulp.js を今一度キチンと！gulp.js 導入基礎
 タスクランナーgulp.js最速入門

Node.js #018 – gulpでファイルを監視

今回は、「gulp」でファイルを監視する方法を試したいと思います。

まず、サンプルとしてsampleフォルダに「index.html」を用意します。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>sample</title>
</head>

<body>

    <p>サンプル!</p>

</body>

</html>

<!DOCTYPE html>

<head>

<title>sample</title>

</head>

<body>

</body>

</html>

「gulpfile.js」にgulp.watchメソッドを追加記述します。

gulpfile.js

var gulp = require('gulp');

gulp.task('sample', function() {
    gulp.src('./sample/index.html')
        .pipe(gulp.dest('./dist'));
});

gulp.task('watch', function() {
    gulp.watch('./sample/index.html', ['sample']);
});

gulp.task('default', ['sample', 'watch']);

var gulp = require('gulp');

gulp.task('sample', function() {

gulp.src('./sample/index.html')

.pipe(gulp.dest('./dist'));

});

gulp.task('watch', function() {

gulp.watch('./sample/index.html', ['sample']);

});

gulp.task('default', ['sample', 'watch']);

作業フォルダでgulpを実行すると「dist」フォルダが作成され「index.html」がコピーされます。そして指定したファイルが監視状態になります。

gulp

gulp

「sample」フォルダの「index.html」を更新すると、リアルタイムで「dist」フォルダの「index.html」も更新されます。

パスと監視するタスクを指定:

gulp.task('watch', function() {
    gulp.watch('./sample/index.html', ['sample']);
});

gulp.task('watch', function() {

gulp.watch('./sample/index.html', ['sample']);

});

watchタスクを追加:

gulp.task('default', ['sample', 'watch']);

1	gulp.task('default', ['sample', 'watch']);

任意ファイルを監視してリアルタイムで更新を反映できるので便利です。

参考文献

gulp
gulp.js を今一度キチンと！gulp.js 導入基礎
 Gulp.js入門

Walking #037

日付	曜日	歩数
2016.02.07	日	2432
2016.02.08	月	10522
2016.02.09	火	7925
2016.02.10	水	9162
2016.02.11	木	8742
2016.02.12	金	8962
2016.02.13	土	9217

合計
56962

Node.js #017 – gulpでファイルコピー

今回は、「gulp」でファイルをコピーする方法を試したいと思います。

まず、サンプルとしてsampleフォルダに「index.html」を用意します。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>sample</title>
</head>

<body>

    <p>サンプル!</p>

</body>

</html>

<!DOCTYPE html>

<head>

<title>sample</title>

</head>

<body>

</body>

</html>

「gulpfile.js」に下記コードを記述します。

gulpfile.js

var gulp = require('gulp');

gulp.task('sample', function() {
    gulp.src('./sample/index.html')
        .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['sample']);

var gulp = require('gulp');

gulp.task('sample', function() {

gulp.src('./sample/index.html')

.pipe(gulp.dest('./dist'));

});

gulp.task('default', ['sample']);

作業フォルダでgulpを実行すると「dist」フォルダが作成され「index.html」がコピーされます。

gulp

gulp

コピーするファイルを指定:

gulp.src('sample/index.html')

1	gulp.src('sample/index.html')

ファイルのコピー先を指定:

.pipe(gulp.dest('./dist'));

1	.pipe(gulp.dest('./dist'));

ワイルドカードも利用できるため一括指定や任意指定も可能です。

全てのファイルを指定:

gulp.src('./sample/*')

1	gulp.src('./sample/*')

任意の拡張子ファイルを指定:

gulp.src('./sample/*.html')

1	gulp.src('./sample/*.html')

任意のフォルダのファイルを指定:

gulp.src('./**/*.html')

1	gulp.src('./*/.html')

任意のファイルのコピーを除外:

gulp.src(['./sample/*.html', '!./sample/sample.html'])

1	gulp.src(['./sample/*.html', '!./sample/sample.html'])

必要なファイルだけを自動コピーして環境を構築できるため便利です。

参考文献

gulp
gulp.js を今一度キチンと！gulp.js 導入基礎
 Gulp.js入門

Node.js #016 – gulpでタスク実行

今回は、先日参加した勉強会きっかけで「gulp」を試してみたいと思います。ずっと試してみたかったので勉強になりそうです。

gulpとは、Node.jsで利用できる「タスクランナー」です。gulpを利用することで様々な作業を自動化することが可能になります。同じようなタスクランナーとしてGruntとよく比較されていますが、gulpは正式には「タスクランナー」ではなく「ストリーミングビルドシステム」のようです。

何をどこまでできるのか、今日はまずgulpでタスクを動かすところから試していきます。

まずnpmでgulpをグローバルインストールします。

npm install -g gulp

1	npm install -g gulp

次に作業フォルダに「package.json」を作成します。
※今回は{}のみ記載します。

package.json

{
}

{

}

作業フォルダでnpmでgulpをローカルインストールします。

npm install --save-dev gulp

1	npm install --save-dev gulp

インストール時の引数に「–save-dev」を記述することによって「package.json」にバージョン情報が追加されます。

package.json

{
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

{

"devDependencies": {

"gulp": "^3.9.1"

}

gulpがインストールされているか確認します。

gulp -v

gulp -v

インストールが完了したら処理を記述する「gulpfile.js」を作成します。
※今回は簡単なコメント表示を記述します。

gulpfile.js

var gulp = require('gulp');

gulp.task('sample', function() {
    console.log('サンプル!');
});

gulp.task('default', ['sample']);

var gulp = require('gulp');

gulp.task('sample', function() {

console.log('サンプル!');

});

gulp.task('default', ['sample']);

作業フォルダでgulpを実行すると下記のようにコメントがコマンドプロンプトに表示されます。

gulp

gulp

タスクの内容を記述:

gulp.task('sample', function() {
    console.log('サンプル!');
});

gulp.task('sample', function() {

console.log('サンプル!');

});

デフォルトのタスクを指定:

gulp.task('default', ['sample']);

1	gulp.task('default', ['sample']);

とりあえずタスクを動かすところまでできました。

参考文献

gulp
gulp.js を今一度キチンと！gulp.js 導入基礎
 Gulp.js入門

Walking #036

日付	曜日	歩数
2016.01.31	日	2769
2016.02.01	月	8494
2016.02.02	火	7809
2016.02.03	水	7711
2016.02.04	木	7777
2016.02.05	金	7298
2016.02.06	土	8255

合計
50113

Leaflet #024 – ベクトルを作図

Leafletでベクトルを作図するためには、既存のAPIでも可能ですが「Leaflet.draw」と言うプラグインがすごく便利です。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Leaflet Sample</title>

    <script src="./Library/leaflet-0.7.3/leaflet.js"></script>
    <link href="./Library/leaflet-0.7.3/leaflet.css" rel="stylesheet" />

    <script src="http://maps.google.com/maps/api/js?sensor=false&amp;region=JP"></script>
    <script src="./plugin/leaflet-plugins-master/layer/tile/Google.js"></script>

    <script src="./plugin/Leaflet.draw-master/dist/leaflet.draw.js"></script>
    <link href="./plugin/Leaflet.draw-master/dist/leaflet.draw.css" rel="stylesheet" />

    <link href="./css/stylesheet.css" rel="stylesheet" />

</head>

<body>

    <div id="map"></div>

    <script src="./js/script.js"></script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Leaflet Sample</title>

</head>

<body>

</body>

</html>

stylesheet.css

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}

html, body {

height: 100%;

padding: 0;

margin: 0;

}

#map {

z-index: 0;

height: 100%;

}

script.js

var t_std = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var g_roadmap = new L.Google('ROADMAP');

var g_satellite = new L.Google('SATELLITE');

var g_hybrid = new L.Google('HYBRID');

var map = L.map('map', {
    center: [35.6831925, 139.7511307],
    zoom: 13,
    zoomControl: false,
    layers: [o_std]
});

var Map_BaseLayer = {
    "地理院地図 標準": t_std,
    "地理院地図 淡色": t_pale,
    "地理院地図 オルソ": t_ort,
    "OpenStreetMap 標準": o_std,
    "GoogleMap 標準": g_roadmap,
    "GoogleMap オルソ": g_satellite,
    "GoogleMap ハイブリッド": g_hybrid
};

L.control.scale({
    imperial: false,
    maxWidth: 300
}).addTo(map);

L.control.layers(Map_BaseLayer, null, {
    collapsed: false
}).addTo(map);

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    }
});
map.addControl(drawControl);

map.on('draw:created', function (e) {
    var layer = e.layer;

    drawnItems.addLayer(layer);
});

var t_std = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {

attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"

});

var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {

attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"

});

var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {

attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"

});

var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

});

var g_roadmap = new L.Google('ROADMAP');

var g_satellite = new L.Google('SATELLITE');

var g_hybrid = new L.Google('HYBRID');

var map = L.map('map', {

center: [35.6831925, 139.7511307],

zoom: 13,

zoomControl: false,

layers: [o_std]

});

var Map_BaseLayer = {

"地理院地図標準": t_std,

"地理院地図淡色": t_pale,

"地理院地図オルソ": t_ort,

"OpenStreetMap 標準": o_std,

"GoogleMap 標準": g_roadmap,

"GoogleMap オルソ": g_satellite,

"GoogleMap ハイブリッド": g_hybrid

};

L.control.scale({

imperial: false,

maxWidth: 300

}).addTo(map);

L.control.layers(Map_BaseLayer, null, {

collapsed: false

}).addTo(map);

var drawnItems = new L.FeatureGroup();

map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({

edit: {

featureGroup: drawnItems

}

});

map.addControl(drawControl);

map.on('draw:created', function (e) {

var layer = e.layer;

drawnItems.addLayer(layer);

});

index.htmlを実行すると下記のようにブラウザで表示されます。左上に作図コントロールが表示されます。

各コントロールで、任意でライン・ポリゴン・マーカーを作図することが可能になります。

作図したベクトルは、編集したり削除することも可能です。

レイヤーグループ作成：

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

1 2	var drawnItems = new L.FeatureGroup(); map.addLayer(drawnItems);

コントロール追加：

var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    }
});
map.addControl(drawControl);

var drawControl = new L.Control.Draw({

edit: {

featureGroup: drawnItems

}

});

map.addControl(drawControl);

ベクトルを保存：

map.on('draw:created', function (e) {
    var layer = e.layer;

    drawnItems.addLayer(layer);
});

map.on('draw:created', function (e) {

var layer = e.layer;

drawnItems.addLayer(layer);

});

カスタマイズすると色んなことができそうです。

作図するベクトル属性を変更：

var drawControl = new L.Control.Draw({
    draw: {
        polyline: {
            shapeOptions: {
                color: 'red',
                weight: 50
            },
        },
        polygon: {
            shapeOptions: {
                color: 'blue'
            },
        },
    },
    edit: {
        featureGroup: drawnItems
    }
});
map.addControl(drawControl);

var drawControl = new L.Control.Draw({

draw: {

polyline: {

shapeOptions: {

color: 'red',

weight: 50

polygon: {

shapeOptions: {

color: 'blue'

edit: {

featureGroup: drawnItems

}

});

map.addControl(drawControl);

作図するマーカーにポップアップ追加：

map.on('draw:created', function (e) {
    var layer = e.layer;
    var type = e.layerType;

    if (type === 'marker') {
        layer.bindPopup('マーカー作成!!');
    }

    drawnItems.addLayer(layer);
});