はじめに

株式会社ナイトレイで主に位置情報の分析や可視化等を担当している森口です。

普段OSSであるQGISを業務に使用していますが、QGISの特徴の一つとして拡張性の高さがあげられます。例えばQGISの解析プロセスを組み合わせてPythonスクリプトとして作成したり、他のQGISユーザーが作成したプラグインを導入して機能を拡張できたりします。

今回はqgis2webというプラグインを使用して簡単にWeb地図アプリケーションを作成します。

後述にもありますが、Web地図アプリケーションといってもサーバーにデプロイせずに、ローカル環境やGitHubのリポジトリ経由でGitHubPagesとして公開できるものなので作成後も取り扱いがとても気軽です。

qgis2webとは

qgis2webとは、背景地図やポイント、ポリゴンなどの地物とそのスタイル設定を含む地図全体をOpenLayerやLeaflet、Mapboxを用いたWeb地図アプリケーションとして出力するためのQGISプラグインです。

詳細はこちらです。

作成してみる

作成環境

OS：MacOS
QGIS：3.22.16-Białowieża
qgis2web：3.16.0

使用データ

国土地理院タイル - 淡色地図
https://maps.gsi.go.jp/development/ichiran.html#pale2

国土数値情報 - 鉄道データ（令和4年版）
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N02-v3_1.html

プラグイン導入＆作成手順

QGISで背景地図（地理院タイル淡色地図）とデータ（鉄道データ）を読み込む
MacOSの場合は画面上部の、Windows版の場合はウィンドウ上部のメニューバーのプラグインからプラグインの管理とインストールを選択。
ウィンドウが表示した後で検索窓にqgis2webと入力すると画像の通りに結果が出るので、ウィンドウ右下にあるインストールボタンをクリック。

(画像はインストール済みになっています…)

インストール完了後、メニューバーのWebを選択するとqgis2webが追加されるので、それを選択しCreate web mapをクリックするとプラグインのウィンドウが開かれます。
今回はOpenLayersで作成します。

ウィンドウ左半分は設定画面、右半分はプレビュー画面となっています。

今回はシンプルに背景地図と鉄道データのみの地図として、鉄道データのラインをクリックするとポップアップで属性情報が表示されるようにします。

設定は以下の通りです。
```
※チェックと設定した部分の抜粋です。

Layers and Groups
	N02-22_RailroadSection（鉄道データ）
	- Visible
	- Popups
	Popup fields
		N02_003（路線名）：header label
		N02_004（鉄道会社名）： inline label
	
	国土地理院地図_淡色地図（背景地図）
	- Visible
```
設定完了後にウィンドウ下のUpdate previewをクリックするとした画像のように右側画面にプレビューが表示されます。
プレビュー画面で表示の状態を確認して問題なければウィンドウ下にあるExportをクリックする。少し待つと画像のように出力完了する。

保存先のダウンロードフォルダにはqgis2webと出力日時が付与されているフォルダが出力されています。

フォルダ内のindex.htmlをクリックするとブラウザで作成した地図が表示されます。

これで作成完了！

まとめ

今回はQGISプラグインqgis2webを使用してノーコードでweb地図アプリケーションを作成してみました。OpenLayers以外にもLeafletやMapboxを使用することもできますし、今回設定した項目以外にもさまざまな設定ができるのでぜひ色々試してみてください！

また、ノーコードで作成しましたが出力されたファイル(HTML, CSS, JavaScript)を編集することも当然できるという点もあるので、一からコーディングするより最初の一歩のハードルが低くできるのもこのプラグインの良い点ではないかなと思います。

（もちろん慣れてくれば初めから自分でコーディングも？）

最後に

私たちの会社、ナイトレイでは一緒に事業を盛り上げてくれるエンジニアを募集しています！
Web開発メンバー、GISエンジニア、サーバーサイドエンジニアなど複数ポジションで募集しているため、
「専攻分野を活かしたい」「横断的に様々な業務にチャレンジしてみたい」と言ったご要望も相談可能です！

✔︎ GISの使用経験があり、観光・まちづくり・交通・防災系などの分野でスキルを活かしてみたい
✔︎ ビッグデータの処理が好き！（達成感を感じられる）
✔︎ データベース構築、サーバー周りを触るのが好き
✔︎ 社内メンバーだけではなく顧客とのやり取りも実はけっこう好き
✔︎ 自社Webサービスの開発で事業の発展に携わってみたい
✔︎ 地理や地図が好きで、位置情報データにも興味を持っている

一つでも当てはまる方は是非お気軽にエントリーください！

▼Web開発メンバー
「受託開発一切なし！自社WEBサービスを社長やセールスチームと一緒に開発！」

▼GISエンジニア
「位置情報×モビリティ.まちづくりetc事業領域拡大の為GISエンジニア募集」

▼サーバーサイドエンジニア
「裁量が大きい会社でAWSの知識を活かす！インフラ周りの設計・監視好き募集中」

【ナイトレイについて】
2011年の創業時から位置情報ビッグデータの可能性に着目し、観光分析・インバウンド対策・
まちづくり・MaaS領域などで自社開発した分析ダッシュボードや位置情報データを可視化したレポートなど、
「CITY INSIGHT」という地域活性化支援ソリューションを提供しています。

自社独自のデータ収集・解析アルゴリズム開発とデータベース構築だけでなく、
大手企業保有の多様なビッグデータにアクセスできる業務提携を実現させることで特定データに依存せず、
位置情報ビッグデータの活用の幅を広げ、社会に貢献していくことをミッションとしている会社です。

＝MISSION＝
ロケションデータで人々の生活を豊かに、社会をよりスマートに。

代表石川の会社紹介動画も是非ご覧ください。

▼会社HPはこちら