WordPressの投稿にLeafletでOpenStreetMapを表示

Googleマップに代わるマップサービスをWordPressの投稿で表示するための方法をいくつか試してみました。
その中でも一番手軽に感じられたのはマップクライアントの「Leaflet」でした。
 

 

Leafletとは

マップクライアントの「Leaflet」は地図タイルを操作/表示するためのJavaScriptライブラリーで、マッププロバイダーの地図データをマップタイルとして利用します。無料のものから有料のものまで、さまざまな地図を使うことができますが、最もよく使われているのが「OpenStreetMap」です。
マップを表示する基本的な機能はありますが、さまざまなプラグインでさらに機能を拡張することもできます。
 

Leafletのライセンス

「Leaflet」はだれでも2-clause BSD License(二条項BSDライセンス)に従えば無料で利用することができます。

2-clause BSD License(二条項BSDライセンス)
1 ソースコードの再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項を保持すること。
2 バイナリ形式の再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項は、ドキュメントまたは他の資料で配布すること。

WordPressの投稿に地図を表示させる使い方であれば、ソースコードやバイナリコードの再配布を伴わないので、地図上にLeafletのライブラリを使用している表記(Leafletへのリンク)があれば大丈夫のようです。
 

Leafletを使う準備

まずはクイックスタートガイドを参考にして試してみます。
・Leaflet Quick Start Guide
ガイドではhtmlファイルに記入してありますが、WordPressなのでfunctions.phpに記入して読み込ませます。
LeafletのスタイルシートとJavaScriptの2つを読み込ませます。順番は必ずスタイルシートを先にしなければなりません。

function leaflet_enqueue_styles() {
	wp_enqueue_style( 'leaflet-style', '//unpkg.com/leaflet@1.3.1/dist/leaflet.css', NULL, NULL );
}
add_action( 'wp_enqueue_scripts', 'leaflet_enqueue_styles' );
/* 先にスタイルシートを読み込んでからJavaScriptを読み込む */
function leaflet_enqueue_script() {
	wp_enqueue_script( 'leaflet-js', '//unpkg.com/leaflet@1.3.1/dist/leaflet.js', NULL, NULL );
}
add_action('wp_enqueue_scripts', 'leaflet_enqueue_script');

 

投稿へ地図を描き出すコンテナの指定

ここからは投稿の本文へ記入します。
地図を表示するコンテナ要素にid属性(ここではmymap)を指定します。コンテナ要素の高さ(height)を指定しないと表示されませんので適切な値をstyleに記入しておきます。

<div id="mymap" style="height: 400px;"></div>

 

投稿へ描き出す地図の設定

ここも投稿の本文へ記入します。
表示させる地図に「OpenStreetMap」のスタンダードタイルレイヤーを使う設定を行います。

<script>
var map = L.map('mymap').setView([38.260440, 140.882427], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
}).addTo(map);
</script>

2行目:マップオブジェクト(map)と地図を表示するコンテナ要素のid(mymap)を関連付けます。またsetViewで表示する地図の座標(緯度、経度)とズームレベルを指定します。
3行目:マップオブジェクトに追加するタイルレイヤー(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png)を指定します。
4行目:attributionでOpenStreetMapのクレジット表記をします。
Leafletへのリンクは自動的に挿入されるようです。
※OpenStreetMap:JA:タイル利用規約
※OpenStreetMap:著作権とライセンス
 

OpenStreetMapのスタンダートタイルレイヤーを表示する例


 

OpenStreetMap日本のスタンダートタイルレイヤーを表示する例

OpenStreetMap Japanのタイルレイヤ―(https://tile.openstreetmap.jp/{z}/{x}/{y}.png)を指定しています。
色合いが違っているほかに、道路の幅の描き方や建物の表示名などにも違いがみられます。


 
情報量ではGoogleMapにどうしても劣ってしまいますが、LeafletとOpenStreetMapの組み合わせはWordPressでも簡単に利用することができそうです。

脱Googleマップの選択肢は?

現在最もよく使われているインターネットの地図サービスのひとつGoogleマップ。その地図を活用するためのAPIサービスの「Google Maps APIs」が「Google Maps Platform」となって料金体系が大きく変わり、無料で使用できる割引はあるものの今後の動向がちょっと心配になってきたGoogleマップ。
さて、他の選択肢はあるのでしょうか?

 

Yahoo! Open Local Platform

Yahoo! JAPANがデベロッパー向けに提供する地図・地域情報のAPI・SDK。地図上に気象情報を重ねて表示できるなどの特徴があります。個人、法人を問わず、基本無償で利用が可能ですが、APIの呼び出し回数に上限があります(5万回/日)。
・Yahoo! Open Local Platform(YOLP)
YOLP地図
日本語での開発情報も用意されています。
・Yahoo!デベロッパーネットワーク、YOLP(地図)
 

OpenLayers

ウェブページに地図を表示するためのオープンソースのJavaScriptライブラリ「OpenLayers」。無料で使用することができてライセンスは2-clause BSD License(二条項BSDライセンス)※です。
・OpenLayers
OpenLayers
地図データのデフォルトはOpenStreetMapとなっていますが、他の地図タイルを表示することもできます。
 

Leaflet

マップクライアントの「Leaflet」は地図タイルを操作/表示するためのJavaScriptライブラリーで2-clause BSD License(二条項BSDライセンス)※のもと無料で使うことができます。
・Leaflet
Leaflet
OpenLayersと同じように、表示させる地図データは別の所からもってくる必要があります。
 

※二条項BSDライセンス
1 ソースコードの再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項を保持すること。
2 バイナリ形式の再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項は、ドキュメントまたは他の資料で配布すること。

 

地図データ

OpenLayersやLeafletなどのJavaScriptライブラリーだけでは地図を表示することができないため、地図データを用意する必要があります。無料で使うことができる地図データには以下のようなサービスがあります。
 

OpenStreetMap:無料で使える代表格

・OpenStreetMap
OpenStreetMap

OpenStreetMapはオープンデータです。あなたはOpenStreetMapと協力者の著作権を表示すれば、いかなる目的でも無料で利用することができます。
OpenStreetMap は、数多くのウェブ サイト、モバイル アプリ、ハードウェア機器で利用されています:オープン データ

ということでウェブページではOpenStreetMapを表示している部分にクレジットを著作権とライセンスのページの指示にしたがって表記すればデータを自由に使うことができます。
日本国内の地図データもそこそこ充実してきましたが、Googleマップと比べてしまうと物足りないところがまだまだあります。それでも誰もが編集可能な地図ですから、今後の可能性は国内のユーザー次第といったところでしょうか。
 

国土地理院地図:日本国内限定

・地理院地図
地理院地図
地理院地図を複製や加工して利用するには手続きが必要です。
国土地理院の地図の利用手続
一読しただけではどうすればいいのかわかりにくいのですが、大丈夫。

国土地理院のサーバ上にある地理院タイルを、リアルタイムで読み込み表示するウェブサイトやソフトウェア、アプリケーションを製作する場合、地理院タイルは出典の明示のみで申請不要でご利用いただけます。
出典は、「国土地理院」または「地理院タイル」等と記載していただき、地理院タイル一覧ページ(https://maps.gsi.go.jp/development/ichiran.html)へのリンクを付けてください。
地理院タイルのご利用について

OpenLayersやLeafletを使ってウェブページに表示させるのであれば問題なさそうです。
 
 
さてWordPressを組み合わせるのはどのサービスがいいのかな?

フィッシングメール:あなたの PаyPаl アカウントは限定されています

わりと涼しかった明け方から一転、日が昇るにつれて気温がぐんぐん上昇している仙台。昨晩から断続的に降った雨のせいもあって蒸し暑くなっています。
不快指数が急上昇中の所に届いたフィッシングメールはPayPalを装うものでした。
 
フィッシングメール:あなたの PаyPаl アカウントは限定されています

件名:あなたの PаyPаl アカウントは限定されています
 
お客様各位。
 
あなたのPay34P82alアカウントを元に戻すには、添付ファイル(PD47F88)を開くか、ダウンロードして、最良の結果を得るためにファイルを保存してから、Webブラウザで開きます。
 
Pay67P97al
 
Copyright © 2018 Pay67P97al. All rights reserved. Pay67P97al Pte. Ltdはシンガポール法人です。PayPal Pte. Ltdは、資金移動業の役務提供を行う資金移動業者として日本国金融庁に登録されています。関東財務局長第00026号
 
Pay67P97al PPC000478:1.5:1fddef2fe1af3

 
 
今回は同時に類似品のフィッシングメールがもう一通届いています。
フィッシングメール:最近あなたのアカウントのPayPalが変更された.

件名:最近あなたのアカウントのPayPalが変更された.
 
親愛なる xxx@xxxxxxx.xxx,
 
パスワードを変更したことを確認しただけです。 この変更を加えなかった場合は、今すぐPayPalアカウントにログインしてください。
Login to PayPal
 
許可されていないユーザーがPayPalネットワークやアカウント情報にアクセスするのを防ぐことができますので、お知らせください。
 
パスワードを保護するためのヒント:
 
  誰とでもパスワードを共有しないでください。
  推測が難しいパスワードを作成し、個人情報を使用しないでください。 大文字、小文字、数字、記号を必ず入力してください。
  オンラインアカウントごとに異なるパスワードを使用してください。
 
敬具、 
PayPal 
 
Help & Contact | Security | Apps
 
PayPalは不正な電子メールを防止することに専念しています。 PayPalからのメールには常にあなたのメールアドレスが含まれます。 詳細については、PayPalのウェブサイトにアクセスし、ページの下部にある[セキュリティ]をクリックしてください。
 
このメールに返信しないでください。 私たちと連絡を取るには、をクリックしてください。 Help & Contact.
 
PayPal PPID – 12186 – 54827

 
私自身はPayPalのアカウントを持っているので、ホンモノのPayPalからのメールと比べてみると
1 フィッシングメールでは短縮URLやそれ以外のアドレスが混じったリンク先ですが、ホンモノはすべて「https://www.paypal.com/・・・・」で始まるアドレスがリンク先になっています。
2 フィッシングメール中の顧客名は「親愛なる xxx@xxx.xxx(メールアドレス)」ですが、ホンモノは「xxxxx(アカウント名)様」で表記されています。
といった違いがありました。
それ以前に文章の内容がおかしいんですけど。
 
メール中のリンクや添付ファイルにはノータッチで、即削除ですね。

Google Maps APIs からGoogle Maps Platform へ

これまでGoogleのマップサービスだったGoogle Maps APIsに代わって、2018年6月から新しく始まったサービスが「Google Maps Platform」です。これまでとは利用料金体系がガラリと変わり、7月16日より適用開始となります。
・Google Maps Platform
 

有料サービスのGoogle Maps Platform

これまでは有償版の「Google Maps APIs Premium Plan」と、無償で使えた「Google Maps APIs Standard Plan」に分かれていたのが統合されて有料のサービスとなりました。ユーザーが使った(呼び出した)回数に応じて料金が加算されていく従量制ですが、毎月使用した合計から200USドル分が無償となりこれを超えた分が課金対象となるようです。
・Google Maps Platform 料金表
 

無料で使える地図表示もある

また、すべてが有料というわけではなく、GoogleMapの機能「地図を共有または埋め込む」のようにAPIキーを使わずに表示する場合や、APIキーを使用しても「Embed API」のPlace modeやView mode、モバイルアプリ用のSDK「Mobile Native Static Maps」「Mobile Native Dynamic Maps」などを利用した地図表示は無料のようです。
 
これからGoogleMapを使ってWebページに地図を表示させるのであれば、多くの場合はGoogleMapの機能「地図を共有または埋め込む」で事足りるかと思っています。地図の移動や拡大縮小ができればほとんどの場合は十分じゃないかな。
GoogleMap共有・地図の埋め込み
 

地図を共有または埋め込むを利用して地図表示


 

Embed APIを利用して地図表示


 
「Embed API」を利用した地図表示と「地図を共有または埋め込む」で表示した地図の違いは感じられません。
このような単純に地図を表示させるだけならばこれまでと変わりなく使えるのですが、問題が起こるのは課金対象のサービスを使っていた時です。
 
メディアデザインでは「避難所はどこだ? – 仙台市の避難所案内」という、地震や津波などの災害時に避難できる仙台市指定の施設や場所を表示するウェブサービスを開設してます。
このサービスでは現在地から近い避難所を探す機能と、現在地から避難所までの経路を示す機能に「Maps JavaScript API」と「Maps Embed API」を使っています。現在のところそれほどアクセス数が多くないので毎月の使用料は200USドル分を超えてはいませんが・・・・・
 
一日あたりのGoogle Maps API呼び出し回数に制限を設定していますが、それを超えてしまうと地図が表示されなくなります。
GoogleMap制限を超えると表示されない
 
新しい料金体系は7月16日より適用開始となるので、今後どうするかそろそろ決めないといけませんね。
クレジットカードと請求先アカウントを登録すれば今のままで使うことはできますが、無料のサービスなのにそこまでするべきなのか悩みます。

請求先アカウントを追加しない場合、1 か月の使用量が 200 ドル超えたとき、Maps API が正常に機能しなくなったり、他の API リクエストでエラーが返されたりする可能性があります。
価格と請求に関する変更Q:クレジット カードまたは請求先アカウントが必要ですか?

これによると請求先アカウントを登録せずとも継続して使うことは可能のようです。
とはいえ、代替策があった方が良いのでちょっと考えています。

フィッシングメール:Appleアカウントのアカウントに

関東地方が異常に早く梅雨明けした6月末に届いたフィッシングメール。
件名は「Apple ID は一時的にロックされています。」というもので、以前からよくあるAppleサポートを装っています。
今回のフィッシングメールは今までに届いた中でも特に日本語が変。
「Appleアカウントのアカウントに異常なアカウントにログインしています」とアカウントが3つも並んで行ってさっぱり意味が通りません。

件名:Apple ID は一時的にロックされています。
親愛な xxxx@xxxxxx.jp,

Appleアカウントのアカウントに異常なアカウントにログインしています。 新しい場所や別の端末からログインしている可能性があります。下のリンクをクリックしてアカウント情報を確認してください。:

マイアカウント確認 >

私たちは24時間以内にあなたからの応答を受信しない場合は、アカウントがロックされます。 Appleチーム

 
直ちにゴミ箱行き。

マルウェア:エクセルファイルが添付されたメールたち

週明けの月曜日から届き始めたSPAMメールの中に、似たようなエクセルファイルが添付されているものが3通ありました。
 
どのメールも本文は短く、一応ビジネスメールを装っていますが社名が変だったり無かったり、担当者や住所が記入されていませんから直ぐにゴミ箱行きです。

 

1通目

タイトル:注文書よろしくお願いします。
添付:2445.注文書(2018.06.26).xls
マルウェアが隠されたエクセルファイルが添付されたメール1
 

2通目

タイトル:添付ファイルをご確認下さい。
添付:8224_6月.xls
マルウェアが隠されたエクセルファイルが添付されたメール2
 

3通目

タイトル:2018.6月分請求データ送付の件
添付:1834_6月.xls
マルウェアが隠されたエクセルファイルが添付されたメール3
 
添付されていたエクセルファイルはどれもマルウェア(悪意のあるプログラム)が仕込まれていました。いわゆるトロイの木馬型のコンピュータウィルスです。
このマルウェアを含むエクセルファイルは、Windows Defender セキュリティセンターで検出可能でした。

このようなメールに対する注意喚起は、日本サイバー犯罪対策センターのページ:犯罪被害につながるメール INDEX版にも掲載されています。

何かうまくいかなかったようです。時間を置いてもう一度お試しください

ウエブサイトを開設していると外部からの攻撃に対するセキュリティに気をつける必要があります。様々な攻撃に対処するにはいくつもの方法がありますが、その一つにWAF(ウェブアプリケーションファイアウォール)があります。
WAFは、ウェブサイトに対するクロスサイトスクリプティングやSQLインジェクションなどの攻撃パターンを検知してブロックします。多くのレンタルサーバーではこのWAFの機能を装備しており、より安全なサイト運営ができるようになっています。

 

ワードプレスとWAFの関係

ところが、このWAFの影響でワードプレスを使っているときに管理画面であるダッシュボードからの更新作業ができなくなることがあります。
カスタマイザーで更新できない
スタイルシートをちょっと変更、なんて時にカスタマイザーは便利なのですが、時間をおいても公開できません。
 
先程のWAFが、ワードプレスの更新作業を攻撃パターンと認識してブロックしているようです。
プラグインなど、他に原因があることもありますが、投稿の編集や新規追加ができるのに、カスタマイザーだけがおかしい場合はWAFが原因の可能性が大です。
 

ロリポップWAFの設定

ロリポップWAFの設定
レンタルサーバーのロリポップを例にあげると、サーバーのWAFの設定はドメインごとに切り替えができるようになっています。(ユーザー専用ページ>セキュリティ>WAF設定)
1 ドメインの一覧にWAFが有効になっているかどうか設定状態を見ることができます。
2 有効と無効を切り替える設定変更のボタンがあります。
3 攻撃として記録されたログを見ることができます。
 
ここで、問題のあるドメインのWAFを無効にして、ワードプレスが正常に動くようになるかチェックします。
[無効にする]ボタンをクリックしていったんWAFを無効にします。
すぐには設定変更が反映されないので10分ほど待ってからワードプレスで更新作業をしてみます。
何事もなく更新作業が公開されればWAFが原因ですね。WAFを無効にしたままだとせっかくのセキュリティが無駄になってしまいます。更新作業のたびに無効と有効を切り替えるのも面倒です。何かいい方法はないでしょうか?
 

WAFのログを見る

3 WAF設定の[ログ参照]をクリックしてWAFが検知してブロックした記録を見てみます。
ロリポップWAFのログ
4 ドメイン名 ワードプレスを公開しているドメインです。
5 アクセスした日時から自分自身がアクセスしたログかどうか判断します。
6 攻撃と判断されたURL
7 アクセス元のIPです、自分のアドレスか判断します。
8 検出されたシグネチャは、攻撃パターンの定義です。
本当に外部からの攻撃を受けていないのであれば、カスタマイザーで[公開]できなかった分のログが記録されているはずです。
全部自分自身のアクセスですからアクセス元IPはすべて同じはずですので、このIPからのアクセスのWAFだけを無効にすればセキュリティを損なわずにできそうです。
 

IPアドレスを使ってWAFを無効にする

IPアドレスを使ってWAFをコントロールするには.htaccessファイルの書き換えをします。
ワードプレスをインストールしたディレクトリにある.htaccessファイルの最後に以下のように追加しておきます。

<IfModule mod_siteguard.c>
  SiteGuard_User_ExcludeSig ip(xxx.xx.xxx.xxx)
  SiteGuard_User_ExcludeSig ip(ooo.ooo.oo.ooo)
</IfModule>

xxx.xxx.xxx.xxやooo.ooo.oo.oooの部分に7[アクセス元IP]で表示されている自分のIPを記入します。
自宅や職場など複数のIPからアクセスする場合はSiteGuard_User_ExcludeSig ip(ooo.ooo.oo.ooo)のように、複数のIPを追加しましょう。
※.htaccessファイルの書き換えに不具合があると、サイトが表示されないなんて事態にもなるので、バックアップを用意して書き換え前に戻せるようにしておくなど、くれぐれも慎重に行ってください。

使い心地が大きく変わったWordPress 4.9

ワードプレス最新版のWordPress 4.9がリリース。
この更新では、WordPressによるサイト作成/変更の使い心地が大きく変わりました。

WordPress 4.9リリース
 

カスタマイズしたデザインの適用を予約

前もって編集していたサイトのデザインの公開日時を予約できます。
これからだとクリスマスやお正月バージョンのデザインを作っておいて、自動的に切り替える、なんてことができるようになります。

 

テキストウィジェット内のショートコードサポート

いままではfunctions.phpにadd_filter(‘widget_text’, ‘do_shortcode’ );なんたらかんたら・・・とやってましたがもう必要ありません。

 

テーマの編集が便利に

WordPress 4.9テーマの編集注意

テーマのスタイルシートを変更しようとしたらこんな注意書きが表示されました。
テーマを直接編集せずに、子テーマで変更するかテーマのバックアップをとってから編集することを勧められます。

WordPress 4.9テーマの編集

そのままスタイルシートの変更へ進むと、付随のCSSエディター(テーマカスタマイザーにある追加のCSS)でCSSを変更できるんですよ、とお知らせ。
もちろんこれまでと同じように直接編集することができます。行番号がつくようになって編集が楽になりました。

WordPress 4.9テーマの編集チェック

さらに、構文のエラーチェックまでしてくれます。

他にも変更点がありますが、個人的に気になったのはこの3点でした。

フィッシングメール:口座振替払い

今回のフィッシングメール、件名は「口座振替払い」で、登記費用の請求を求めている内容。
怪しい添付ファイルは、Excel形式(サービス請求書.xls)。
SPAM:口座振替払い
身に覚えは無いけれどとりあえず請求書を確認・・・なんて事はせずに、即刻削除。

改正個人情報保護法が施行されました

平成29年5月30日から「改正個人情報保護法」が施行されました。
これまでとの主な違いをあげてみると、以下のようになります。
 

1 法律の適用対象が個人情報を取り扱うすべての事業者・団体に

これまでは5001人以上の個人情報を取り扱う事業者に限り適用されてきましたが、これからは中小企業や個人事業主、町内会、同窓会やPTAなど、規模の大小や営利/非営利を問わず個人情報を取り扱うすべての事業者が対象となります。
 

2 個人情報の定義を明確化

これまでは明確でなかった情報(顔・指紋・音声データー、電話番号、メールアドレス、アカウントIDなど)も個人情報と定義されました。
 
メールフォームや申込用紙、あるいは履歴書などで、イベントや物品販売等の申し込みを受け付けたデータはすべて個人情報になりますので、法令に則った取り扱いが必要になります。
サーバーやパソコンのデータベース、申し込み用紙や履歴書の管理・取り扱いルールの明確化と厳格化が求められますね。
 

3 要配慮個人情報

個人情報のうち、人種、信条、病歴(健康診断の結果)などは不当な差別・偏見が生じる可能性があるため「要配慮個人情報」として、本人の同意なしに取得や第三者への提供ができません。
 

4 罰則規定

不正に利益を得る目的で個人情報を漏らす行為に対し罰則規定「個人情報データベース等不正提供罪」(6ヶ月以下の懲役または30万円以下の罰金)
が設けられました。
 

5 第三者への提供についての記録義務

情報第三者に提供する場合は、提供者、受領者ともに記録を保存する義務があります。
 

6 第三者へ提供する場合の届け出義務

いわゆるオプトアウトで一定の条件下で本人の同意を得ずに個人情報を第三者に提供する場合には、個人情報保護委員会への届け出が必要です。
 

7 匿名加工情報の利用が可能

個人を特定できないよう個人情報を加工し、かつ戻せない状態にした場合には一定のルールのもとで活用できる。
 
改正個人情報保護法の詳細や、説明については、以下のリンクが参考になります。
個人情報保護委員会 (個人情報取扱事業者に対する監督機関)
“平成29年5月30日から 小規模事業者や自治会・同窓会も対象に。 これだけは知っておきたい「個人情報保護」のルール”(政府広報オンライン)