地図プラグイン比較

位置情報を指定して地図を表示させるプラグインが色々あり、試してみました。

(1)MapPress

最初に良いかなと思ったのが、MapPress。

インストール、有効化は、普通に実行。

有効化後、こんな感じで、APIを選択。

色々無料ユーザに優しそうな、Leaflet にしてみる。
そうすると次は、mapboxへのサインアップを求められる。
一応、強く推奨ということではある。
https://mappresspro.com/mappress-documentation/#toc-mapbox-and-leaflet

サインアップしてログインすると、Default public token が表示されている。
それを設定して、インストールを完了させます。

固定ページへの地図埋め込み

まずは、普通に固定ページへの地図埋め込みを確認。

ブロックに「MapPressMap」が追加されているので、選択。すると、こんなものが追加されます。

「Map Library」をクリックすると

こんな感じなので、「Add New」。

津田沼駅とか検索するとこんな感じ。

左上のタイトルも入力してSave。

「Insert into post」とすることで、埋め込まれる。

プレビューしてみると、そんな感じで埋め込まれています。

WP REST API

現在は、WordPressに「WP REST API」が標準搭載されているんですね。

固定ページだと
サイト/wp-json/wp/v2/pages
で取得できますね。その中に、上記のページの情報も含まれています。

  {
    "id": 2400,
    "date": "2021-11-01T12:19:48",
    "date_gmt": "2021-11-01T03:19:48",
    "guid": { "rendered": "http://jqinglong.wp.xdomain.jp/?page_id=2400" },
    "modified": "2021-11-01T12:19:51",
    "modified_gmt": "2021-11-01T03:19:51",
    "slug": "%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e3%81%ae%e7%a2%ba%e8%aa%8d",
    "status": "publish",
    "type": "page",
    "link": "http://jqinglong.wp.xdomain.jp/%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e3%81%ae%e7%a2%ba%e8%aa%8d/",
    "title": { "rendered": "\u4f4d\u7f6e\u60c5\u5831\u306e\u78ba\u8a8d" },
    "content": { "rendered": "\n\n\n<p></p>\n", "protected": false },
    "excerpt": { "rendered": "", "protected": false },
    "author": 1,
    "featured_media": 0,
    "parent": 0,
    "menu_order": 0,
    "comment_status": "closed",
    "ping_status": "closed",
    "template": "",
    "meta": { "spay_email": "" },
    "jetpack_sharing_enabled": true,
    "jetpack_shortlink": "https://wp.me/P74ZVA-CI",
    "_links": {
      "self": [
        { "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/pages/2400" }
      ],
      "collection": [
        { "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/pages" }
      ],
      "about": [
        { "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/types/page" }
      ],
      "author": [
        {
          "embeddable": true,
          "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/users/1"
        }
      ],
      "replies": [
        {
          "embeddable": true,
          "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/comments?post=2400"
        }
      ],
      "version-history": [
        {
          "count": 1,
          "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/pages/2400/revisions"
        }
      ],
      "predecessor-version": [
        {
          "id": 2401,
          "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/pages/2400/revisions/2401"
        }
      ],
      "wp:attachment": [
        {
          "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/media?parent=2400"
        }
      ],
      "curies": [
        { "name": "wp", "href": "https://api.w.org/{rel}", "templated": true }
      ]
    }
  },

しかし、残念ながら、この中には、埋め込んだMapPressMapの情報は含まれていませんでした。

(2) WP Map Block

今時は、ブロックを追加しようとすると、こんな感じでその場でプラグインの検索・インストールができるのですね。

そこで見つけた、評価の高そうな「WP Map Block」をインストール。

そして、右側のように設定します。
APIキー設定不要で使えるというのが特徴ですね。

そして、このページを登録すると、API出力にも情報が含まれていました。

  {
    "id": 2400,
    "date": "2021-11-01T12:19:48",
    "date_gmt": "2021-11-01T03:19:48",
    "guid": { "rendered": "http://jqinglong.wp.xdomain.jp/?page_id=2400" },
    "modified": "2021-11-01T23:11:02",
    "modified_gmt": "2021-11-01T14:11:02",
    "slug": "%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e3%81%ae%e7%a2%ba%e8%aa%8d",
    "status": "publish",
    "type": "page",
    "link": "http://jqinglong.wp.xdomain.jp/%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e3%81%ae%e7%a2%ba%e8%aa%8d/",
    "title": { "rendered": "\u4f4d\u7f6e\u60c5\u5831\u306e\u78ba\u8a8d" },
    "content": {
      "rendered": "\n<p></p>\n\n\n\n<p></p>\n\n\n\t\t<div id=\"wpmapblock_1\" data-settings='{&quot;map_marker&quot;:[{&quot;lat&quot;:&quot;35.69119525&quot;,&quot;lng&quot;:&quot;140.02045551610456&quot;,&quot;title&quot;:&quot;\\u6d25\\u7530\\u6cbc\\u99c5&quot;,&quot;content&quot;:&quot;chiba&quot;,&quot;iconType&quot;:&quot;default&quot;,&quot;customIconUrl&quot;:&quot;&quot;,&quot;customIconWidth&quot;:&quot;25&quot;,&quot;customIconHeight&quot;:&quot;40&quot;}],&quot;map_zoom&quot;:10,&quot;scroll_wheel_zoom&quot;:false,&quot;map_type&quot;:&quot;OSM&quot;,&quot;center_index&quot;:0}' class=\"wpmapblockrender\" style=\"\n\t\t\twidth: 100%;\n\t\t\theight: 500px;\n\t\t\"></div>\n        ",
      "protected": false
    },
    "excerpt": { "rendered": "", "protected": false },
    "author": 1,
    "featured_media": 0,
    "parent": 0,
    "menu_order": 0,
    "comment_status": "closed",
    "ping_status": "closed",
    "template": "",
    "meta": { "spay_email": "" },
    "jetpack_sharing_enabled": true,
    "jetpack_shortlink": "https://wp.me/P74ZVA-CI",
    "_links": {
      "self": [
        { "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/pages/2400" }
      ],
      "collection": [
        { "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/pages" }
      ],
      "about": [
        { "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/types/page" }
      ],
      "author": [
        {
          "embeddable": true,
          "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/users/1"
        }
      ],
      "replies": [
        {
          "embeddable": true,
          "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/comments?post=2400"
        }
      ],
      "version-history": [
        {
          "count": 4,
          "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/pages/2400/revisions"
        }
      ],
      "predecessor-version": [
        {
          "id": 2408,
          "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/pages/2400/revisions/2408"
        }
      ],
      "wp:attachment": [
        {
          "href": "http://jqinglong.wp.xdomain.jp/wp-json/wp/v2/media?parent=2400"
        }
      ],
      "curies": [
        { "name": "wp", "href": "https://api.w.org/{rel}", "templated": true }
      ]
    }
  },

ちょっと見にくいですが、この部分です。

    "content": {
      "rendered": "\n<p></p>\n\n\n\n<p></p>\n\n\n\t\t
<div id=\"wpmapblock_1\" data-settings='{&quot;map_marker&quot;:[
{
&quot;lat&quot;:&quot;35.69119525&quot;,
&quot;lng&quot;:&quot;140.02045551610456&quot;

(3)map

もう一つ、元々緑色に表示されるその名も「map」というブロックが使えることに気づきました。Jetpack の機能ですね。

上で、取得したMapboxのAPIキーを使えます。
表示のバラエティが豊富なのが特徴でしょうか。

これも、API出力に対応していました。
該当部分抜粋します。

    "content": {
      "rendered": "\n<p></p>\n\n\n\n<div data-api-key=\"xxx\" class=\"wp-block-jetpack-map\" data-map-style=\"default\" data-map-details=\"true\" data-points=\"
[{&quot;placeTitle&quot;:&quot;\u6d25\u7530\u6cbc\u99c5 (Tsudanuma Sta.)&quot;,&quot;title&quot;:&quot;\u6d25\u7530\u6cbc\u99c5 (Tsudanuma Sta.)&quot;,&quot;caption&quot;:&quot;\u6d25\u7530\u6cbc\u99c5 (Tsudanuma Sta.), \u6d25\u7530\u6cbc1-1-1, \u7fd2\u5fd7\u91ce\u5e02, Chiba 275-0016, Japan&quot;,&quot;id&quot;:&quot;poi.498216250197&quot;,&quot;coordinates&quot;:
{&quot;longitude&quot;:140.0204525,&quot;latitude&quot;:35.691215}
}]
\" data-zoom=\"11\" data-map-center=\"
{&quot;lng&quot;:140.0204525,&quot;lat&quot;:35.691215}
\" data-marker-color=\"red\" data-show-fullscreen-button=\"true\"><ul><li><a href=\"https://www.google.com/maps/search/?api=1&amp;
query=35.691215,140.0204525\">
\u6d25\u7530\u6cbc\u99c5 (Tsudanuma Sta.)</a></li></ul></div>\n",
      "protected": false
    },

これが良いような気がします。

ブロックパターン

Drupal がヘッドレスCMS用の基盤として評価される大きな理由は、コンテンツタイプという考え方を前面に押し出しているからではないかと思っています。
情報の型を定義できることによって、登録する人にも、利用するアプリにも優しくなる。そういうことかなと思います。

では、それに対応することがWordPressでできるのか。

言葉的には、カスタム投稿タイプが該当するのかなと思いましたが、カスタム投稿タイプは、投稿、固定ページ以外の分類を作るということであって、中身には関知しないのですね。

型を定義する、という意味だと、ブロックパターンということで、作成してみます。

普通に、プラグインを検索するとあまり利用者の多いものが見つからず、不安だったのですが、こちらで紹介されているプラグインは良さそうな気がします。

インストール、有効化して、新しく追加される「Blocks」メニューから新規追加。

普通のページ追加と同様の画面。
ここで、下記のようにデータ定義として登録してみます。

で普通に「公開」。
一覧に追加されます。

ここから、「ブロックパターンに変換」。

では、固定ページで使用してみます。

新規作成の画面で、ブロックの追加の「＋」ボタンの「パターン」。
「再利用ブロックから変換しました」の表示はいまいちですが、これを選択すると、先程作成したパターンが選択できます。

で、各項目を変更すれば、「型」通りの固定ページが作成されるというわけです。

最低限の期待は満たしてくれたと思います。ただ、データ構造として定義されているわけではなく、あくまでも固定ページ等作成時の初期値でしかないので、これをAPIとして取得しようとしても、普通に固定ページ情報の文字解析にはなってしまいます。

この後、今度はこの情報をAPI経由で取得して、位置情報を取り出すのですが、それはまた改めて。