Native Script + Vue.js + Mapbox で地図アプリ

Native Script とは

Javascript もしくは Angular もしくは Vue を使って Web アプリとAndroidやiOSアプリを同時に作れる統合開発環境

↑らしいw
これなら Web 屋さんの自分でも触れると思い使ってみることにした。
今回作るアプリには地図を表示することがマストだったため Mapbox で作った地図を表示させることをゴールとして作っていく！

Mapbox とは

簡単にいうと Google map みたいな地図サービスのことをいう。
Mapbox でアカウントを作ると開発者用にダッシュボードが表示される。
そこで地図のレイアウトを独自に作ることができ、その地図をアプリケーションで使用することができる。
具体的な組み込み方は後述。

Native Script で Hello World

まずはローカルで開発するために専用の npm パッケージをインストール。

$ npm install -g nativescript

次にプロジェクトを作る。

$ vue init nativescript-vue/vue-cli-template mapbox-app

vue-cli と同じような感じですね。一旦プロジェクト内に移動し、以下のコマンドらを実行するとアプリが立ち上がるはず。

$ cd mapbox-app

$ npm run watch:ios

iOSのエミュレータの設定は以下を参考に行ったら、できた。

NativeScript Advanced Setup—macOS

Hello World は以上

Mapbox を組み込む

Mapbox を組み込むために以下の npm パッケージをインストール。

$ npm install nativescript-mapbox --save

これは Mapbox 社が用意したものらしい…すばらしい！
このあと以下の構文をプロジェクト配下の src/main.js に追加。

Vue.registerElement("Mapbox", () => require("nativescript-mapbox").MapboxView)

次に地図を表示させるコンポーネント src/compoents/Map.vue を作っていきます。内容は以下のような感じです。

<template>
    <Page class="page">
        <ActionBar class="action-bar" title="Vue Mapbox Example"></ActionBar>
        <GridLayout>
            <Mapbox
                accessToken="{自分のアクセストークン}"
                mapStyle="traffic_day"
                latitude="52.3833160"
                longitude="4.8991780"
                hideCompass="true"
                zoomLevel="4"
                showUserLocation="false"
                disableZoom="false"
                disableRotation="false"
                disableScroll="false"
                disableTilt="false"
                @mapReady="onMapReady($event)">
            </Mapbox>
        </GridLayout>
    </Page>
</template>

<script>
    import * as utils from "utils/utils";
    export default {
        data () {
            return { };
        },
        methods: {
            onMapReady(args) {
                // 地図上に線を塗る
                args.map.addPolyline({
                    id: 1, // optional, can be used in 'removePolylines'
                    color: '#F00', // Set the color of the line (default black)
                    width: 7, // Set the width of the line (default 5)
                    opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
                    points: [
                        {
                            'lat': 52.3833160, // mandatory
                            'lng': 4.8991780 // mandatory
                        },
                        {
                            'lat': 52.3834160,
                            'lng': 10.8991880
                        },
                        {
                            'lat': 30.3835160,
                            'lng': 10.8991980
                        }
                    ]
                });
            }
        }
    };
</script>

<style scoped></style>

Mapbox に別途アカウント登録をしてアクセストークンを得る必要がありますが、たったこれだけで地図コンポーネントが作れちゃう。

次にこれを src/main.js で include して画面に表示。

import Map from './components/Map';

Vue.registerElement("Mapbox", () => require("nativescript-mapbox").MapboxView)
new Vue({
  render: h => h(Map),
}).$start();

こんな感じです。もともと HelloWorld.vue が記述されていたところを Map.vue に置き換えただけ。

この状態で iOS エミュレータを起動させると以下のように表示される。

f:id:h-piiice16:20180825121410p:plain