Maplatをなでしこさんで使いたい！　～本気のプラグインを作るよ！～

# Maplatとは？
　すでに[前回](https://qiita.com/snowdrops89/items/86cd0e0a177da51239d0)、[前々回](https://qiita.com/snowdrops89/items/e153a108b9a356ea42d6)と書いていますが、Maplatとは、正確な地図と、正確ではない古地図/絵地図を歪み無く重ねて表示してくれるという、とっても素敵なライブラリです☆
　本格的なUIを備えた地図アプリがかなり手軽に作れます！

https://github.com/code4history

# なでしことは？
　日本語でプログラムの出来る、超ありがたい素敵なプログラミング言語です☆
　この四月からは中学校の教科書にも採用されているそうですよ！　しゅごい（≧▽≦） 
　v3はHTMLへ埋め込んで、Webブラウザで動くアプリを日本語で簡単に作ることが出来ます！

https://nadesi.com/

# Maplatをなでしこさんで使いたい！
　さて、ワタクシなでしこじゃないとプログラムが出来ない人なので、どうしてもMaplatをなでしこで使いたいと思いました。
　MaplatのAPIは、ごく簡単なJavascriptで、私などにも簡単に使うことが出来ましたけれど、このままではその他の部分もJavascriptで書かなきゃいけません。ええもう、ちょっとした「もし」や「繰り返し」なんかも、いちいち検索して大騒ぎなんですから(´д｀)
　と、いうわけで、なでしこ３のプラグインにしてみます！
　プラグインにするのもJavascriptだけど、頑張る(｀・ω・´)
　なでしこ３のプラグインを作ってみたよシリーズ、まさかの第４弾です☆（１～３は、昨年末に『[日本語プログラミング言語「なでしこ」 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/nadesiko)』で書きました）

# 「＊＊した時には～」という命令
　第４弾と言うからには、一応新しい知見があります。
　MaplatのAPIでは、まず最初に`Maplat.createObject`でMaplatのオブジェクトを作り、それに対してなんやかやするワケです。

```Javascript
Maplat.createObject(option).then(function(app) {
  //ここに処理書く
　app.core.changeMap("osm");
});
```

　コード自体はとっても簡単なんですけど、ぷろみすとかこーるばっくとか、チョットナニイッテルカワカンナイ(´・ω・｀)
　ともあれ、なでしこならばさだめし、

```
オプションでMaplat作成した時には、
  //ここに処理書く
　「osm」に地図変更する。
ここまで。
```

　という感じになる予定？
　この構文は、今まで作ってきた物の中にはありません。どうやんの？
　例によって[プラグインの作り方](https://github.com/kujirahand/nadesiko3/blob/master/doc/plugins.md)を眺めてみますが、これについての直接的な説明はありません。
　とりあえず、

> 関数内で、システム・グローバル変数にアクセスするには、sys.__v0['変数名']でアクセスできる。

　とゆうことなので、なんやかやするための`app.core`は、定数を作ってそいつに代入してやって、`sys.__v0['定数名']`に対して、各APIを実行してやればよさそう。

## 無名関数？

> **『[暗黙的な無名関数の指定「＊＊には・・・ここまで」構文](https://nadesi.com/v3/doc/index.php?%E6%96%87%E6%B3%95%2F%E7%84%A1%E5%90%8D%E9%96%A2%E6%95%B0&show)』**

　おっと、コレだね。

>「＊＊には・・・ここまで」の、・・・の部分に書いた処理が、関数の第一引数に与えられる。

　とゆうことで、書いた処理がまるっと第一引数に入ってやって来るわけ？
　それをJavascript側のコールバック関数の中に突っ込んでやれば良さげ？

## できました！
　結局、なでしこの「クリックした時」とか眺めに行ったりしてｗ
　こんな感じ？

```Javascript
  'MaplatApp': {type: 'const', value:''}, // @MaplatApp
  'Maplatマーカー非表示ボタン': {type: 'var', value: 0}, // @Maplatまーかーひひょうじぼたん
  'Maplat地図境界表示ボタン': {type: 'var', value: 0}, // @Maplatちずきょうかいひょうじぼたん
  'Maplat共有ボタン': {type: 'var', value: 0}, // @Maplatきょうゆうぼたん
  'Maplat作成時': { // @Maplatオブジェクト作成 // @Maplatさくせいしたとき
    type: 'func',
    josi: [['を'],['で','の']],
    fn: function (fn, option, sys) {
      //オプションが文字列だったら、appidということにする。
      if (typeof option === 'string') {
        option = {
          appid: option,
          enableHideMarker: sys.__v0['Maplatマーカー非表示ボタン'],
          enableBorder: sys.__v0['Maplat地図境界表示ボタン'],
          enableShare: sys.__v0['Maplat共有ボタン']
        };}
      Maplat.createObject(option).then(function(app) {
        window.setTimeout(function(){
          sys.__v0['MaplatApp'] = app.core
          return fn(app, sys)
        }, 1);
      });
    }
  },
```

　`Maplat.createObject`する時の`option`はオブジェクトで、私が発見した物の他にも、モノスゴク沢山の設定項目があるのを教えて頂きました。
　もちろん普通に全部オブジェクトで設定出来るけど、怠惰なワタシは文字列でappidだけを指定することも出来るようにしといたｗ
　よく使いそうなUI追加の項目は変数にしてオフオン出来るようにしておく。
　他の項目も必要に応じてそのうちできるようにするかもしんない。

# その他の関数
　あとはまあ、簡単なんですよｗ

```Javascript
  // @地図変更
  '地図変更': { // @表示状態の地図をmapIDに変更する。 // @ちずへんこう
    type: 'func',
    josi: [['に', 'へ']],
    fn: function (mapID, sys) {
      sys.__v0['MaplatApp'].changeMap(mapID)
    }
  },
```

　前の方で書いたとうり`app.core`を代入した`sys.__v0['MaplatApp']`に対してAPIを実行するだけ！
　この調子で、今わたしが把握しているAPIは全部プラグインに入れたので、[前回](https://qiita.com/snowdrops89/items/86cd0e0a177da51239d0)Javascriptでお試しした内容も、全部日本語で書けるようになりました。やったね！

# なでしこで書いたMaplatのコード
　前回のテストとだいたい同内容の部分を抜粋したので、[Javascriptのコード](https://qiita.com/snowdrops89/items/86cd0e0a177da51239d0#%E3%81%A7%E3%82%82api%E3%81%A4%E3%81%8B%E3%81%86)と見比べて欲しい。

```json-doc:なでしこ
//--- UIボタンの追加 ------
Maplatマーカー非表示ボタンはオン。
Maplat地図境界表示ボタンはオン。
Maplat共有ボタンはオン。

//--- Maplat作成 ------
「nako3_test」のMaplat作成した時には、
　３で古地図ズーム。
　20で地図透過度設定。

//--- レイヤー ------
// 表示するマーカーをレイヤー毎に切り替え
　史跡ボタンをクリックした時には、
　　「史跡」のレイヤー表示。「観光」のレイヤー隠す。
　ここまで。
　観光ボタンをクリックした時には、
　　「観光」のレイヤー表示。「史跡」のレイヤー隠す。
　ここまで。
　全レイヤー表示ボタンをクリックした時には、
　　「史跡」のレイヤー表示。「観光」のレイヤー表示。
　ここまで。
　全レイヤー非表示ボタンをクリックした時には、
　　「史跡」のレイヤー隠す。「観光」のレイヤー隠す。
　ここまで。

//--- マーカー関連 ------
　全マーカー表示ボタンをクリックした時には、
　　全マーカー表示。
　ここまで。
　全マーカー非表示ボタンをクリックした時には、
　　全マーカー隠す。
　ここまで。

　選択ボタンをクリックした時には、
　　「タワー」のマーカー選択。
　ここまで。
　選択解除ボタンをクリックした時には、
　　「タワー」のマーカー選択解除。
　ここまで。

　クリアボタンをクリックした時には、
　　「史跡」のマーカークリア。
　ここまで。
　削除ボタンをクリックした時には、
　　「タワー」のマーカー削除。
　ここまで。

　マーカー追加ボタンをクリックした時には、
　　タワーとは変数＝{
        "id": "タワー",
        "lnglat":[140.75395646590007,41.79463859482169],
        "name": "五稜郭タワー",
        "url": "https://www.goryokaku-tower.co.jp/"
　　}
　　タワーを「観光」へマーカー追加。
　ここまで。

//iconDataは省略可
　レイヤー追加ボタンをクリックした時には、
　　iconDataとは変数＝{
        "icon": マーカー青,
        "selectedIcon": マーカー赤
    }
　　iconDataで「goryokaku2#新規」をレイヤー追加。
　　二ノ橋とは変数＝{
        "id": "二ノ橋",
        "lnglat":[140.75575537303416,41.79561542967801],
        "name": "二ノ橋",
        "html": "鯉がいっぱいいます！",
        "icon": マーカー赤
　　}
　　二ノ橋を「goryokaku2#新規」へマーカー追加。
　ここまで。

//マーカーの移動とマーカー画像変更
　更新ボタンをクリックした時には、
　　移動先とは変数＝{
      "lnglat":[140.75553148088343,41.79538581110293],
      "icon":マーカー赤
      }
　　「箱館奉行所」を移動先でマーカー更新。
　ここまで。
ここまで

//--- 描画 -----
　線引ボタンをクリックした時には、
　　Maplat線色は赤色。Maplat線太さは3。
　　座標とは変数＝[
        [140.75509899875652,41.79486069621012],
        [140.7560612947552,41.79512929859726],
        [140.75563781096838,41.795486705576906],
        [140.75505015022142,41.79561680945611],
        [140.75509899875652,41.79486069621012]
      ]
　　座標で線引く。
　ここまで。

　線消ボタンをクリックした時には、
　　線消す。
　ここまで。
```

　どーですかどーですか、全部日本語だから読みやすいですね♪♪♪
　でも、シンタックスハイライトがないので、あまり見やすい感じじゃないですけれど；
　自分のエディタの画面を貼りたい感・・・
　Qiitaさん、なでしこのシンタックスハイライト、対応してくれないかなぁ・・・
　全国の中学生が、なでしこ使うんですぜ！

# 動作確認
　他の命令のテストなども加えて、一通り全部お試し出来るようにして、こんな感じ。
　コードは「ページのソースを表示」で全部見れます。
　取り留めなく、それぞれの機能がちゃんと動作するのを確認してるだけですが；

> https://snowdrops89.github.io/Maplat_test/test/nako3_test_2.html

　地図上に線を引くだけじゃなく、面を塗りたいという私の無茶振りに答えて、早速ポリゴンを描画する命令を追加して下さいました！　@kochizufanさま、ありがとうございます！！

　プラグイン本体はココ。
> https://github.com/snowdrops89/nako3_plugin_Maplat


# つづきます
　記事で紹介されていた[Turf.js](https://turfjs.org/)を使った命令もできるようにしたい。

> [Maplat Coreで古地図の上に明滅するバスを走らせてみる](https://qiita.com/kochizufan/items/5303898ecbb6f089eccf)
> [Maplat Coreで古地図上を進行方向に視点を変えながら走り回ってみる](https://qiita.com/kochizufan/items/84e36400e6d7a00e31eb)

　Turf.jsを使うのは、別プラグインにした方が良いかな？
　これ、なんかモノスゴク色々なことが出来そうだけど、全部英語だからツラい・・・