マイ地図タイルを作ろう #6 画像の最適化・キャッシュの設定

自作タイルを公開する前に

だいぶ寄り道しながら来ましたが、マイ地図タイル作りは今回で最後です。

地図タイルを作るプラグインは完成し本番用のタイルも作成できましたが、タイルファイル一式は結構な容量（数十MB）なので今契約しているこの共用レンタルサーバにそれをそのまま上げる前にもうひと手間かけます。

画像の最適化

GIMP で書き出したタイルに画像最適化ツールを使い、メタ情報を除去・画質を最終調整して全体のサイズを落とします。

今回は JPEGmicro を利用（すばらしいソフトですが、開発が終わってしまったみたいで残念です…）。画質を変えずにメタ情報を落とす処理をするだけでも10%近いサイズダウンが得られました。タイル1枚あたりのファイルサイズは大したことないのでメタ情報の比率が高かったのかと。

キャッシュの設定

次にタイル取得にかかる負荷をなるべく減らせるよう web サーバにキャッシュの設定をしておきます。

サーバの設定といっても共用レンタルサーバなので .htaccess に追記するだけです。
画像ファイルに1か月、css と javascript ファイルに1週間のキャッシュの有効期限を指定し、ETag ヘッダの出力を抑制します（実際の設定からの抜粋です）。
サーバへのリクエストを抑えるのが目的です。

<ifModule mod_expires.c>
  ExpiresActive on
  ExpiresByType text/css                  "access plus 1 week"
  ExpiresByType application/javascript    "access plus 1 week"
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/x-icon              "access plus 1 month"
</ifModule>

FileETag None

参考

圧縮の設定

ついでに圧縮の設定も。

特定の拡張子の画像ファイル（圧縮済み）を除いたファイルを圧縮して転送するように指定しています。これも実際の設定の抜粋です。

これによって主な圧縮対象となる html(php), js, css などのテキストファイルは圧縮率が高いので転送量を減らすことができ、クライアント（ブラウザ）側はサイトの読み込みが早くなることが期待できます。

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  SetEnvIfNoCase  Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>

参考

Apache モジュール mod_deflate

マイ地図タイル完成！

諸々やりまして、工作の環境ができました。

ここで使用している画像の著作権は任天堂株式会社にあります。画像データの転載・配布等はご遠慮ください。

今回は GIMP-Python を Python ごと一から勉強してプラグインを自作するという方法をとりましたが、こんな面倒なことをしなくても世の中には ImageMagick などの著名な画像処理ライブラリや、1枚画像からタイルを生成してくれる python スクリプトなど探せば結構あります。これが仕事だったら自分も迷わずそういったツールを使わせて頂いただろうと思いますが、今回は泥縄的な工作を楽しみました。 Youtube 先生とGIMP 先生に大感謝。

今後は Leaflet の勉強を進めてその成果をこのゲームマップに反映させていく予定です。

2018.10.22

LeafletでBotW地図を作ろう