D&I Blog

このブログでは、今までに培ってきた技術的なことや、得意としている地図のことなどについて、幅広く取り扱っていこうと考えています。積極的に新しいことにチャレンジしたいメンバーもいるので、そのようなトピックも扱っていきたいと思います。

D&I BLOG

To mind the creative destruction

QGISでGoogleMapを表示してみる

以前、QGIS地理院タイルを表示してみました。今回は、私たちの生活に馴染みのある Google Map を表示してみたいと思います。

用意するもの

  • QGIS ※本ブログではMac版のQGISを利用しています。
  • インターネット環境

具体的な作業

OpenLayers Plugin をインストールします。

  1. QGIS を起動します。
  2. プラグイン」->「プラグインの管理とインストール」を選択します。
  3. 検索ボックスより「openlayers」と入力することで、「OpenLayers Plugin」がリスト上に現れますので、それを選択し「プラグインをインストール」ボタンを押します。 f:id:d-and-i:20161003223831p:plain

Google Mapを表示します。

  1. 「Web」->「OpenLayers Plugin」-> 「Google Maps」 -> 「Google Streets」を選択します

すると、あっという間にQGIS上に Google Maps が表示することができました。 f:id:d-and-i:20161003225243p:plain

最後に

プラグインを用いることで、 Google Maps の他にも OpenStreetMapBing Map などを表示することもできるようでした。

背景の地図を作るのが面倒な場合は、手っ取り早く Google Maps を利用するのも良いかもしれませんね。

Basic認証の設定方法

はじめに

WebサイトにBasic認証を設定する際、 .htaccess.htpasswd を1セットとして作成していたのですが、毎回「 .htaccess.htpasswdをどうやって作成していたんだっけ?」ということが頻繁に起きていたので、簡単に設定方法をまとめておきたいと思います。

.htaccess の作成方法

.htaccessを作成するのは実に簡単で、以下の書式に従い作成するだけで良いです。

本記事は、あくまでシンプルな設定方法の場合です。
「特定のIPアドレスから接続可能にする」と言ったような凝った設定にする時は、ここに示されているような、マニュアルを読んで見ると良いでしょう。

AuthUserFile /virtual/ドメイン(IPアドレス)/[.htpasswdが配置されているディレクトリ]/.htpasswd
AuthName "Input ID and Password."
AuthType Basic
require valid-user
AddType text/cache-manifest .appcache

ファイルパーミッション0644 としておきましょう。

$ chmod 0644 .htaccess

.htpasswd の作成方法

.htpasswdファイルは、以下のコマンドを用いて作成します。

$  htpasswd -c -b .htpasswd username password  

// .htpasswd : パスワードファイル
// username : Basic認証で使用したいユーザ名
// password : Basic認証で使用したいパスワード

ファイルパーミッション0644 としておきましょう。

$ chmod 0644 .htpasswd

仕上げに

生成できた .htaccess.htpasswd を、Basic認証をかけたいサイトに配置しましょう。

うまくいくと、以下のような認証画面が表示され、ユーザ名とパスワードを入力することで、そのサイトを閲覧できるようになります。 f:id:d-and-i:20160925213703p:plain

Atomでcssを開くとエラー

はじめに

今回の記事は、開発で使用しているAtomcssファイルを開いたときに、急に意味不明なエラーが発生してしまっていたので、その対処方法について紹介します。

エラー内容

  • エラーメッセージ
    • Uncaught TypeError: Cannot read property 'isDestroyed' of undefined
  • エラーキャプチャ

なんのエラーなのかさっぱりわからなかったので

エラーキャプチャにある View Issue を辿ってみました。

すると、記載されたIssueの内容を見ていくと、「おやっ、私の状況とまったく同じだ」ということで、この記事を読み進めていけば、解決につながるのではないかと期待しました。

f:id:d-and-i:20160917210753p:plain

<私の解釈>
[Enter steps to reproduce below:]

1. cssファイルを開いたら
2. (エラーキャプチャのような)エラーが現れてしまった。 

いろいろな方のコメントを読み進めていくと

同じ現象の遭遇した方が、結構いたようです。 ※()内は、私の勝手な意訳ですので、あまり細かいことは気になさらずに。。

  • I am also facing the same problem.(僕も同じ問題に直面しているよー)
  • Same problem, what we should do?(同じ問題だー。なんかしないといけないのか?)
  • I'm getting this issue too.(俺もこの問題に遭遇ている。)

解決を見いだした方の中には、

  • I seem to have fixed it after uninstalling, restarting atom, and reinstalling.(俺は、一度Atomをアンインストールして、再起動し、その後に再インストールしたら、問題が片付いたぜ)

という人もいました。

ただ、なるべくなら今更こんな面倒なことはしたくない(だって、再インストールしたらこれまでコツコツやってきた設定が全て飛んでしまうので)ので、何か良い対応策を施した人がいないかという希望を胸に、さらに読み進めます。

そして何となく希望が持てるコメントにたどり着きます。

  • Disabling the package until the issue is fixed.(このパッケージ(Pigmentsのこと)を無効化したら、問題が解決したよ。)

おっ、やはりこのパッケージ(Pigments : 色コードを書くと、その色でハイライトしてくれるAtom拡張機能)が悪いんやん。

f:id:d-and-i:20160917212734p:plain

さらに読み進めると、これで解決できそうなコメントに遭遇。

  • Same problem here. Updating atom packages with the command "apm update" from my project root fixed the problem. (I start up atom with the "atom ." command from my project root too)(同じ問題だ。おれのプロジェクトルートから、apm update コマンドを打って、Atomのパッケージをアップデートしたら問題が解決したよ。(おれのプロジェクトルートから atom コマンドで起動もしたよ。)

問題を解決するにはPigmentsのアップデートが必要

早速、AtomのパッケージであるPigmentsを以下の手順でアップデートしました。

  1. Atom -> 環境設定
  2. 設定の左ペインより Updates を選択
  3. 利用可能なアップデート にPigmentsが表示されていたので、アップデートを選択
  4. Atomの再起動

結果

無事にエラーは出なくなりました。よかった。

この問題に遭遇した人に、少しでも参考になれば嬉しいです。

緯度経度表現における変換式

緯度経度の表現方法

私たちが普段目にする緯度経度には、実は色々な表現方法があるのをご存知でしょうか?私がざっと思いつく限り、以下の表現方法があります。

  • 度分秒形式
  • 度単位10進数形式
  • 秒形式

上記は、計算式によって相互に変換できるのですが、いざ変換しようとした際、変換式がすぐにでてこないという場合があります。

今回のブログでは、表現方法の簡単な解説と、変換式について紹介したいと思います。

なお私たちの会社の場所を、解説に使用する緯度経度として利用します。

度分秒形式

学校で地理を学んできた過程で、一番馴染みのある表現形式ですね。

表現例

緯度: 33° 51′ 10.59″
経度: 130° 45′ 17.86″

変換式

  • 度単位10進数形式
    • 緯度: 33 + ( 51 * 60 + 10.59 ) /3600 = 33.852942
    • 経度: 130 + ( 45 * 60 + 17.86 ) / 3600 = 130.75496
  • 秒形式
    • 緯度: ( 33 * 60 + 51 ) / 3600 + 10.59 = 121870.59
    • 経度: ( 130 * 60 + 45 ) / 3600 + 17.86 = 470717.86

度単位10進数形式

この形式は、Google Map 等で使われている表現形式です。またGISソフトウェア(ArcGISQGISなど)でも利用されている形式で、GIS関連で一般的に利用されている表現方法です。

表現例

緯度: 33.852942
経度: 130.75496

変換式

  • 度分秒形式(便宜上、Excelの数式を用いています。 INT()関数は、引数に与えられた数値の整数部分を取り出します。)
    • 緯度
      • 度の取り出し方: INT(33.852942) = 33
      • 分の取り出し方: INT( ( 33.852942 - 33 ) * 60 ) = 51
      • 秒の取り出し方:( ( 33.852942 - 33 - (51 / 60) ) * 3600 ) = 10.59
    • 経度
      • 度の取り出し方: INT( 130.75496 ) = 130
      • 分の取り出し方: INT( ( 130.75496 - 130 ) * 60 ) = 45
      • 秒の取り出し方: ( ( 130.75496 - 130 - (45 / 60) ) * 3600 ) = 17.86
  • 秒形式
    • 緯度: 33.852942 * 3600 = 121870.59
    • 経度: 130.75496 * 3600 = 470717.86

秒形式

GIS関連ではあまり使われない形式ですが、プログラムを書くときには、秒の加減算がしやすいので、私はよく利用しています。

表現例

緯度: 121870.59
経度: 470717.86

変換式

  • 度分秒形式(便宜上、Excelの数式を用いています。 INT()関数は、引数に与えられた数値の整数部分を取り出します。)
    • 緯度
      • 度の取り出し方: INT( 121870.59 / 3600 ) = 33
      • 分の取り出し方: INT( ( 121870.59 - ( 33 * 3600 ) ) /60 ) = 51
      • 秒の取り出し方:121870.59 - ( 33 * 3600 ) - ( 51 * 60 ) = 10.59
    • 経度
      • 度の取り出し方: INT( 470717.86 / 3600 ) = 130
      • 分の取り出し方: INT( ( 470717.86 - ( 130 * 3600 ) ) /60 ) = 45
      • 秒の取り出し方:470717.86 - ( 130 * 3600 ) - ( 45 * 60 ) = 17.86
  • 度単位10進数形式
    • 緯度: 121870.59 / 3600 = 33.852942
    • 経度: 470717.86 / 3600 = 130.75496

忘れた頃にやってくる緯度経度の変換式。皆さんの役に立つことがあれば嬉しいです。

Playbookを活用する。

前回の記事で、管理端末からターゲット端末に対して、Ansibleコマンドを用いて、PING送信やechoコマンドによりシェルを実行してみました。

しかし、一回一回Ansibleコマンドを実行していくのは大変な作業です。「Ansibleコマンドをまとめたバッチシェルを作成できないのか?」と思い浮かぶのですが、Ansibleには Playbook というファイルに、ターゲット端末に対しての命令をまとめて記述することができます。

今回は Playbook についての設定方法と、それを実行してみるところまで紹介したいと思います。

Playbookを書き始める前に

Playbook自身は YAML フォーマットで書いていくことになります。ここで簡単に YAML フォーマットの約束事を紹介します。

  • YAMLファイルを作成する際の文字コードは、UTF-8とします。
  • "---" は、一つのYAMLドキュメントの始まりであるという事を示します。
  • "..."は、一つのYAMLドキュメントの終わりであるという事を示します。
  • "-" は、配列を示します。
  • インデントは全てスペースで行います。タブは使用できません。
  • 要素名と値の間は":"で区切ります。":"のあとには最低1文字の空白を入れておく必要があります。ここでもタブは使用できません。
  • 行頭に"#"を入れることでコメントとして扱われます。なお、複数行をまとめてコメント化するような書き方はありません。
  • ファイル拡張子は、*.yml とします。

以上の事を念頭に置いて、YAMLで表現するデータ構造の例を見てみましょう。

# YAMLでデータ構造を表現してみる例です。
---
- A: 
    - a: apple
      b: banana
- B: 
    - a: orange
      b: strawberry
      c: cherry
...

実際にPlaybookを書いてみましょう

Playbookの書き方が分かったところで、つぎに実際にPlaybooksを書いてみましょう。

今回書いてみるPlaybookは、

  • zipコマンドをインストール

といったことを行って見たいと思います。

環境構成

f:id:d-and-i:20160904164817p:plain

インベントリファイルの配置

以下の内容でインベントリファイルを作成します。(具体的な作成手順は、こちらの記事を参考にしてください。)

192.168.10.2

Playbookの作成

任意の場所に web.yml という名前で、以下の内容のPlaybookを作成してみましょう。

---
- hosts: all   # /etc/ansible/hostsに描かれているすべてのほすとをターゲットにします。
  sudo: yes
  tasks: 
    - name: 共通で使用するパッケージをインストールする。
      yum:
        name=zip
        state=latest
...

Playbookの内容についての説明

  • hosts
    • 実行する先のターゲット端末を指定します。
  • sudo
    • sudoを用いて実行するかどうかを指定します。
  • tasks
    • タスクリストの開始を示します。
  • name
    • 各タスクの名前を示します。ここでは、わかりやすい名前をつけてあげると良いです。
  • yum
    • ansibleのモジュールを示します。ここではyumに対する操作を行うモジュールを使っていますが、他にも色々なモジュールが提供されていますので、近いうちに紹介したいと思います。
  • yum -> name
    • yumで何のパッケージをインストールするかをここで指定します。
  • yum -> state
    • yumでインストールするパッケージのバージョンをここで指定します。

Playbookの文法確認

作成したPlaybookの文法は以下のコマンドで確認が行えます。

$ ansible-playbook --syntax-check web.yml

Playbookの実行

Playbookの実行は、以下のコマンドを使用します。

$ ansible-playbook --ask-become-pass web.yml
SUDO password: 

PLAY [all] ******************************************************************** 

GATHERING FACTS *************************************************************** 
ok: [192.168.10.2]

TASK: [共通で使用するパッケージをインストールする。] **** 
ok: [192.168.10.2]

PLAY RECAP ******************************************************************** 
192.168.10.2                : ok=2    changed=0    unreachable=0    failed=0   

最後の行の PLAY RECAP の部分が実行ステータスとなります。「failed=0」となっていれば、特にエラーはおきていないことを示しています。

Ansible :: 初めてのインベントリファイル設定

以前の記事でAnsibleのインストール方法を紹介しました。今回は、インベントリファイルを設定し、実際にAnsibleがどういうものなのかを紹介していきたいと思います。

動作環境について

以下の環境が整っていることを前提に説明していきます。

  • 管理する側と管理される側のマシン間でSSH接続が行えること。
    • SSH接続する方法はこの記事を参考になります。
  • 管理する側のマシンにAnsibleがインストールされていること。
    • Ansibleのインストール方法はこの記事が参考になります。

なお「管理する側の端末」「管理される側の端末」という表現は、理解するのにややこしいので、

  • 管理する側の端末 =管理端末
  • 管理される側の端末 = ターゲット端末

と表現することとします。
※それでも表現がややこしいかもしれませんが、お許しください。

f:id:d-and-i:20160828171910p:plain

Ansibleを用いて疎通確認をしてみます。

まずは「インベントリファイル」を作ることから。

「インベントリファイル」とは、簡単に言うとターゲット端末のIPアドレスや、ドメイン名を記載したファイルです。

では、インベントリファイルを実際に作っていきましょう。

  1. /etc/ansible/hostsファイルを新規に作成します。
  2. /etc/ansible/hostsファイルにターゲット端末の情報を追加します。

/etc/ansible/hostsファイルを新規に作成・開きます。

$ sudo mkdir /etc/ansible
$ sudo touch /etc/ansible/hosts
$ sudo vi /etc/ansible/hosts

/etc/ansible/hostsファイルにターゲット端末の情報を追加します。

ターゲット端末が一台であった場合

f:id:d-and-i:20160828171910p:plain

IPアドレスで指定する場合は、

192.168.10.2

ドメイン名で指定する場合は、

targetserverA

となります。

ターゲット端末が複数台ある場合

f:id:d-and-i:20160828172703p:plain

IPアドレスで指定する場合は、

192.168.10.2
192.168.10.3

ドメイン名で指定する場合は、

targetserverA
targetserverB

となります。

なお、IPアドレスドメイン名の混在表記も可能です。

ターゲット端末へのPING送信

インベントリファイルが作成できたら、今度は管理端末からターゲット端末に対してPING送信してみます。

$ ansible all -m ping
$ targetServerA | success >> {         // PING送信が成功した例
    "changed": false, 
    "ping": "pong"
}

このPING送信が、上手く通れば疎通確認が行えたと言っても良いかと思います。

つぎにターゲット端末に対してシェルを実行してみましょう。

$ ansible all -a "/usr/bin/echo hello"
$ okisoftware | success | rc=0 >>     // echoコマンドを実行た例
    hello

結果は正しく表示されたでしょうか?今回の例では、"echo"コマンドを実行してみましたが、他のコマンドでも試してみて頂ければと思います。

この疎通がうまくできたようであれば、Ansibleを使い始める環境を整えることができたということになります。

Google Maps API上にKMLデータを載せる際の制限事項

Google Maps API を利用して、地図上にKMLデータを載せようとする場合は、以下のような制限事項があります。

  1. KMLファイルのファイルサイズの上限が10MByteまで
  2. KMLファイルを圧縮した形態であるKMZファイルサイズの上限が3MByteまで
  3. 1ファイル(KML or KMZ)あたりの図形の数が1,000個まで
  4. 重ね合わせるレイヤ数は、KML or KMZファイルへアクセスするためのURLの長さで決定される。

「4.」については少し曖昧な表現をしていますが、Googleのドキュメントを確認すると、以下のことが補足で書いてあります。

  • 一般的なURL(:階層が深くないURL)だと、大体平均して10〜20ぐらいのレイヤが表示できます。
  • URLの長さでの制限に引っかかってしまった場合は、地図上にKML/KMZデータは表示されなくなりますので、短縮URLなどを利用してURLの長さを短くして下さい。

参考までに、上述についてのGoogleのドキュメントを以下に掲載しておきます。 f:id:d-and-i:20160821205445p:plain

なお、Google Maps APIを利用してKML/KMZファイルを重ねる場合は、誰でも参照できる場所に配置しておく必要があります。

もし、閉じたネットワーク内に配置したり、(ログイン処理が必要とするような)アクセス制限がかかっている場所に配置したりすると、重ねようとしているKMLデータは表示されませんので注意して下さい。