QGISで作成した地図をインタラクティブマップとしてWordPressに埋め込む方法（プラグイン不使用）
GIS関連の記事を作っていると，「自作の地図を記事に入れたい」と思うことがあります．
静的な地図ならば画像として貼り付ければいいわけですが，インタラクティブな地図はどうするのでしょうか？
プラグインを使う方法はいくつかあるようですが，サイトを重くしないためにもできる限り使いたくありません．
そこで今回は，WordPressのプラグインを使わずにインタラクティブマップを挿入する方法をまとめていきます．
全体の流れとしては以下の通りです．
- QGISで地図を作成する
- QGIS用プラグイン「qgis2web」により地図をエクスポート
- エクスポートしたフォルダをサーバーにアップロード
- 記事編集画面で「カスタムHTML」を挿入し，そこに「iframe」要素として地図を埋め込む
最初に，サンプル完成図をお見せします．
（データ量の都合でちょっと重いですw）
注意：モバイルでは表示されないかもしれません．
複数の地図をオーバーレイさせて，表示・非表示を切り替えることも可能です．
また，ラスタデータもベクタデータも両方可能です．
それでは始めましょう！
事前準備
QGISのインストール
まだインストールされていない方は，公式サイトからQGISをインストールしてください．
QGISには2系と3系がありますが，3系の最新版で大丈夫です．
詳細なインストール方法は割愛します．
qgis2webのインストール
「qgis2web」とは，QGIS専用のプラグインです．
プラグイン起動時にQGIS上に読み込んでいる地図データをインタラクティブマップとしてエクスポートしてくれます．
QGISを起動し，[プラグイン]→[プラグインの管理とインストール]と選択します．
検索ボックスに「qgis2web」と記入したら表れると思うのでインストールしてください．
表示する地図データの用意
QGISで読み込むための地図データを用意してください．
地図データ入手元サイトを以下ページで紹介させていただきます．
QGISで地図を作成
QGISを起動します．
地図データを読み込み，各地図のスタイル（色分け，シンボロジなど）をお好みに設定します．
また， 複数の地図をオーバーレイさせる場合は，上下関係をお好みに調整しておきます．
qgis2webにより地図をエクスポート
プラグインツールバーに「qgis2web」が表示されていると思いますので，起動します．
左のペインでエクスポート設定，右にプレビューが表示されます．
プレビューは，最初に読み込んだ時には表示されない場合があります．
その場合，左下の形式ラジオボタン（OpenLayersとLeaflet）を切り換えるか，「Update preview」を押したら表示されます．
ここからは，エクスポート設定について抜粋して解説します．
Appearanceタブ
- Add layers list
複数レイヤーの表示切替設定 - Measure tool
距離測定機能など - Scale/Zoom
表示領域の設定
Exportタブ
- Exporter
Local folderかFTP siteが指定できます． - Minify GeoJSON
GeoJSONファイルの圧縮設定(?).
チェックしてもほとんどサイズ変わりませんでした．（というかむしろ増えry）
出力先をFTP siteにすれば直接サーバーにアップロードできます．
（この場合，次節は読み飛ばしてください）
ここではあえてローカルフォルダに落としたものとして説明します．
出力形式
「OpenLayers」か「Leaflet」かという２択なわけですが，状況によって適切な方を選んでください．
簡単な違いを申し上げますと…
- Leafletは軽量（OpenLayersの約65%）
- OpenLayersは地図の細かいスタイルに対応可（透明度など）
どうしても表示したいスタイルがある場合はOpenLayers，そうでもない場合はLeafletといった感じでしょうか．
Export
Exportボタンを押すと，設定通りに出力されます．
途中で出力されるログを見ると，ラスタデータはpngに，ベクタデータはJSONやGeoJSONに変換されていることがわかります．
フォルダをサーバーにアップロード
対象のフォルダをサーバーにアップロードします．
FTPソフトなどを用いてください．
パスは「/wordpress/wp-content/uploads/○○/」あたりが妥当ではないでしょうか．
記事に地図を挿入
記事の編集画面において，「カスタムHTML」ブロックを挿入してください．
そのブロックの中に「iframe」要素としてエクスポートフォルダ内の「index.html」を追加します．
下に記入例を示します．
<iframe src="割愛/index.html" width="500" height="400"></iframe>これで埋め込みは完了です！
プレビューで確認してみてください．
注意と後処理
お察しの方もおられると思いますが，インタラクティブマップの埋め込みはWebページの表示を遅くします．
特にラスタデータを埋め込んだ場合は顕著です．
というのも，Exportの節で述べたように，ラスタデータはpngに変換されて保存されます．
その画像は，OpenLayersの場合は「/出力フォルダ/layers/」に，Leafletの場合は「/出力フォルダ/data」に保存されています．
もちろん，それらの画像はWeb用に圧縮・最適化されていません．
そこで，皆さんがお使いの画像圧縮ツールなりプラグインでそれらを圧縮してください．
注意点として，png以外の画像形式に変換しないでください．
（たぶん正常に表示されなくなります．）
それと，png画像と同じフォルダに「ファイル名.png.aux.xml」というファイルも出力されていると思いますが，これも削除してください．
これで，かなり表示速度が改善されるはずです．
おわりに
マッピングライフを楽しみましょう！(^c^)/