jsフレームワークstimulusでyahoo地図を操作してみた（その一）

「railsアプリで、stimulusを使ってyahoo地図を操作する方法」についての纏めーー
当初はgooglemapで試してみるつもりだったが、料金請求が怖そうなのでyahoo地図に切り替えた（操作自体は似ているので、ちょっと書き換えればgooglemapにも簡単に切り替えられるはず。実際、【googlemap操作について書かれたサイト】も複数参照して書いています）。

# やったこと、やる予定のこと
#### 0. [railsアプリへのstimulus適用](https://qiita.com/wkya_4a/items/e85bd6324fe4085dce0e)（以前書いた記事）
#### 1. stimuluｓでyahoo地図を表示（←今ここ）

#### ２. [表示した地図上で、指定座標に移動](https://qiita.com/wkya_4a/items/3e2f5bb6cf8abe525bf0)
……この段階では「指定座標」はコードに直接書いています。
　座標取得の方法は「3」以降でやる予定。


#### 3. [住所から座標を取得し、それをDBに登録](https://qiita.com/wkya_4a/items/883ad988f2ad5cf58f55)

#### 4.[「3」で登録した情報を選択し、yahoo地図上でその場所に移動（最終回）](https://qiita.com/wkya_4a/items/3df3c39c0c779ce2f452)

##【事前準備】railsにstimulusを適用し、yahooのアプリケーションIDも取得しておく

stimulus適用は[こちら](https://qiita.com/wkya_4a/items/e85bd6324fe4085dce0e)（自記事）や[こちら](https://fuyu.hatenablog.com/entry/2018/11/18/115909)、アプリケーションID取得は[こちら](https://developer.yahoo.co.jp/start/)を参照。


##とりあえず、地図を表示させてみる。
[公式サイト](https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/geocoder.html)を参照つつ……

###まずはアプリケーションビューで、


```erb:app/views/layouts/application.html.erb
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>

    <%# ↓これを追記↓ %>
    <script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=【取得した自分のID】"></script>
    <%# ↑これを追記↑ %>
```
と【yahooのAPIを使用する】旨を記述
……APIを使用するビューだけに個別に書いても問題ない（というか、アクセス回数制限を考え得るならそちらのほうがいい）のだろうけど、今回は面倒なので全部に適用させることにした。

###で、地図を表示したい場所(ビュー、今回はusers/testを作ってそこでやりました)に

```erb:app/views/users/test.html.erb

<!-- ↓①↓ -->
<div data-controller="moving">

  <p>Google Maps APIを使ったサンプルです。</p>

　<!-- ↓②↓ -->
  <div id="idmeihatekitoudemoiiyo" style="width:500px; height:300px"  data-target="moving.map" ></div>


</div>
```
と記述。
①stimulus用に【div要素の枠、「data-controller="moving"」】を作成。
②「①」の枠の中に配置した【ヤフー地図を表示するためのdiv要素……「div id="map"」】に【「map」というターゲット名……「data-target="moving.map"」】を設定する。
（stimulusだと要素はデータターゲット名で指定可能なので、「②」のdiv要素のid名は適当でも問題なくなります（いやでも、これは適当すぎだろう）。


###最後に、対応するstimulusファイルを作成。
↑で「data-controller="moving"」としているので、ファイル名は「moving_controller.js」となります。

```js:app/javascript/controllers/moving_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "map" ]

  initialize() {//←①

       this.map = new Y.Map(this.mapTarget.id);//←②
       this.map.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);//←③

　　　　//↓④
       var center = new Y.CenterMarkControl
       var control = new Y.LayerSetControl();
       this.map.addControl(center);
       this.map.addControl(control);

  }
}

```

①イニシャライズ時に、
②【ビュー側で「data-target="moving.map"」としている要素】のidを使って、「this.map」を設定
　……ここはid名を直接記入しても、問題はないです。ただ要素の指定はターゲット名で統一したほうが、なんかカッコイイ気がする（いや、id名が異なる違う要素にも使い回せますし）。
③「this.map」にヤフー地図を書き込む（「drawMap」。「35.66572, 139.73100」が初期表示する座標、お好みで変更してください。
④お好みでレイヤーを設定（ [公式サイト](https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/)にある「レイヤーセットID」をご参照ください）。

###これで、地図が画面に表示されるように……
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3431303637342f32366564633133662d643562642d646432342d376464612d3335383833623632313764352e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410674/0a1f0816-ef01-d102-82a6-8866cb246acc.png)

　　なりました(【20190624、変更】yahooMapをそのまま上げるのは問題がありそうだったため、画像をモザイク付きのものに変更しました)。


とりあえずは今回はここまで。続きは**[こちら](https://qiita.com/wkya_4a/items/3e2f5bb6cf8abe525bf0)**です。