本記事には広告を含む場合があります

本記事には「アフィリエイト広告」および「アドセンス広告」などの広告を掲載している場合があります。 消費者庁の定める『誇大な宣伝や表現』とならないように配慮し、コンテンツを制作しております。
消費者庁:景品表示法の新運用基準について

雑記

WordPress + ACF でGoogleMapで構築しちゃってる案件を何とかしたい(OpenStreetMapとLeaflet.js)

GoogleMapsApiがMaps Platformになってから大分放置してたんですが
いろいろあって、複数あるプロジェクトの中から一つだけ課金設定をしてみた。

この変更ってもっとネット界隈で阿鼻叫喚みたいになってもおかしくないと思うんだけどなんかあんまり声が上がってないっていうか…

みんな素直に課金設定したの?自治体とか年の予算が決まっているような案件ではクレカの従量課金って中々通らないと思うのだが。

それとももう諦めて別のライブラリに移行するのがマストでしょうか。

どうであれ、Googleのコンソール画面は訳わからないし、一定のルールも定まってないしで(無登録でも依然見れてるところもある)

この仕様変更なんなんだよ!ってな感じです。
有料化自体は大分前から始まってたけど、登録自体にクレカ要求するってめんどくさすぎるでしょうよ…。


んで、ちょっと手が空いていたのでオープンソースなライブラリでなんとか出来ないかを調べてみました。
結果的にいうと結構簡単に移行出来た。

自分がやった過去案件でよくある組み合わせが
WP+ACFって組み合わせで、記事毎に住所データをもたせてそれをマップにプロットする
的なやつでした。

こんなんマイマップでもええやんけぇとか思ったりもするが、仕様書にそうすると
記載があるのだから仕方が無い。

まず第一の問題として

ACFのGoogleMAPフィールドをオープンソースの物に変更できるのか?

という問題がありましたが、こちらに関しては暫定対応ではあるものの
公式のサポートに対応方法が載っていました。

別途プラグインを導入する事でOpenStreetMapでのフィールド定義が可能になる

https://support.advancedcustomfields.com/forums/topic/openstreetmap-support/

ACFに別途プラグインを追加する事で、OpenStreetMapのフィールドを定義できるようなります。
んでここで注意なのがあくまで上記で紹介されているプラグインは非公式?なもののようで動作に関しては保証されてないようです。

また、上記プラグインの動作環境が

Requires ACF 5.7+

となっています。公式で配布されているACFの最新Verは2018.08現在で
Version: 4.4.12で今ん所、Ver5~はアーリーアクセス版との事です。

ACF本体をまず5.7以上にバージョンアップする必要があるのですが
こちらもちょっと特殊です。

https://www.advancedcustomfields.com/resources/upgrade-guide-version-5/

使用しているテーマのfunctions.phpに

define('ACF_EARLY_ACCESS', '5');

の一文を加える事で、プラグイン画面からアーリーアクセス版にアップデートできます
アップデート後、DBの更新が入りフィールド定義画面にOpenStreetMapという項目が追加されました。
ACFのフォーラムにも書いてあったありましたが、GoogleMapが実質クレカ必須になった事もあり、もしかしたらVer5~の正式公開時にはデフォルトで対応になっているかもしれませんね。

ACF Openstreetmap

フロント側の実際の表示はLeaflet.jsで対応。

ACFで記事等に位置情報をもたせるのはクリアしましたがフロントの表示もGoogleMapAPIを使っていたのでこちらの改修も必要です。

この部分は案件毎に微妙にコードが違いますが結局これまでのコーディングでは

ACFで緯度経度を設定する → GoogleMapで表示

という事だけなので、前述したOpenStreetMapで緯度経度が取得・設定出来ているので
リプレイスはそこまで大変では無いのかなと。。。

とりあえず単純にピン立てるだけならという事で下記を参考にしました。
https://qiita.com/amagasu1234/items/baf15da6655b74b4723a

L.marker([緯度経度]).bindPopup("コメント").addTo(map);

上記部分をWPでループを回して作っていけばよさげ。
GoogleMapAPIで作ったコードを大方流用できそうです。

いろいろ分からない事はまだあるがたぶん大丈夫!

っという訳で、解決の道筋がわかった所で力付きてしまいましたとさ…
マップのピンとか、カスタマイズの部分でまだまだ課題は残っているけど
ざっくり見た感じ、大体クリアできそうな雰囲気でした。
オープンソースなんでたくさんのカスタマイズ事例が転がってるのが良いですね。

細かい部分のカスタマイズ方法は、その時の未来の自分が解決してくれるであろうという事で。。。

  • この記事を書いた人
  • 最新記事

ZAKI LABO(ザキラボ)

ZAKI LABO(ザキラボ)ではスマートウォッチ、スマートフォン・タブレットなどの最新ガジェット機器をレビューしています。実際に使用・検証を行い精度の高いレビューをお届けします。

Youtubeでも活動をしています。 現在チャンネル登録者数 16,000人(2023年10月現在) 月間再生数 30万再生を突破

Xiaomi / Huawei / Amazfit などのガジェットブランドに強くレビュー実績多数あります。スマートウォッチは年間20本近くレビューしており、機能性・デザイン・価格などをトータル目線で評価するスペシャリストです。

スマートフォンに関してはメインがGalaxy推しで、本サイトとYoutubeは全てGalaxy端末で撮影を行っています。

Androidタブレットとスタイラスを用いたドローイングなどの特殊なレビューも実績があります。

本業はWEBデザイナー・エンジニアとしても活動しています。 全体的に手広く・ディープに伝える事をモットーにしています!

本サイトで紹介したレビューはYoutubeチャンネル ZAKILABOでも動画レビューしています!

-雑記