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」を入力 → プラグインを選択 → プラグインをインストール
QGIS_030_01

 

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

 

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

 

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」でタスクの実行順を確認したいと思います。

node.js_016_02

 

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

gulpfile.js

 

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

 
node.js_019_02

 

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

 

タスクを返す処理:

 

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

 
 

  • 参考文献

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

 

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

 

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

node.js_016_02

 

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

 

index.html

 

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

gulpfile.js

 

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

 

node.js_018_01

 

node.js_017_02

 

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

node.js_018_02

 

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

 

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」でファイルをコピーする方法を試したいと思います。

node.js_016_02

 

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

 

index.html

 

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

gulpfile.js

 

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

 

node.js_017_03

 

node.js_017_02

 

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

 

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

 
 

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

全てのファイルを指定:

 

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

 

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

 

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

 

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

 
 

  • 参考文献

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

 

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

 

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

 

node.js_016_02

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

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

 

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

 

node.js_016_01

 

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

package.json

 

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

 

node.js_016_06

 

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

package.json

 

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

 

node.js_016_04
 

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

gulpfile.js

 

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

 
node.js_016_05

 

タスクの内容を記述:

 

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

 

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

 
 

  • 参考文献

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

 

stylesheet.css

 

script.js

 

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

 

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

 

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

leaflet_024_03
 

レイヤーグループ作成:

 

コントロール追加:

 

ベクトルを保存:

 

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

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

 

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

 
 

 

Walking #035

 

日付 曜日 歩数
2016.01.24 4121
2016.01.25 8349
2016.01.26 8939
2016.01.27 9336
2016.01.28 8451
2016.01.29 8881
2016.01.30 8546
合計
56623

 

QGIS #029 – プラグイン自動更新「Plugin Reloader」

 

今回はプラグインを自動更新できる「Plugin Reloader」というプラグインを試します。

 

「Plugin Reloader」でプラグインを自動更新するためには下記方法でおこないます。

 

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

 

サンプルで作成したプラグインを起動すると文字が切れています。
QGIS_029_02

 

「Qt Designer」を起動して文字が切れている部分を修正して保存します。
QGIS_029_03

 

通常だとQGISを再起動することによりプラグインの更新が反映しますが、「Plugin Reloader」を実行することによりQGISを再起動しなくてもプラグインを更新することが可能になります。
QGIS_029_04

 

プラグイン作成時に修正する時は、QGISを何回も再起動しなくていいので便利です。

 
 

  • 参考文献

Plugin Reloader
QGISプラグインの作り方(パッケージ生成編)