naitive scriptを触ってみる

はじめに

• native scriptというものを見つけたので、試しに触ってみる。しかもPlaygroundがあるのでブラウザで試すことができる。

play.nativescript.org

• Playgroundで実装したアプリは下記の２つをインストールして実機で検証することができました。
• NativeScriptのplaygroundアプリでQRコードを読み取ると、previewアプリが起動されて実機で動作確認ができる。 play.google.com play.google.com

いろいろなスクリプトで開発できる

• vuejsや react nativeも選択することができる。すごい。
• 今回はvuejsで開発してみる

playgroundの画面

• 実際の画面は下記のようなイメージとなり、ドラック＆ドロップでボタンなどを設置することができる。
• scriptもjsやVuejsの記述ができるので、vuejsでもアプリが開発できるかも。
• 触った感じmonacaに似ている。

サンプルコード

• 下記のコードはボタンを押した時にダイアログを表示するのと、位置情報を取得するサンプルです。

<template>
    <Page>
        <ActionBar title="トップ" />
        <ScrollView>

            <StackLayout>
                <Button text="Button" @tap="onButtonTap" />
                <Button text="位置情報取得" @tap="enableLocationServices"
                    :visibility="currentGeoLocation.latitude ? 'collapsed' : 'visible'" />
                <StackLayout
                    :visibility="currentGeoLocation.latitude ? 'visible' : 'collapsed'">
                    <Label
                        :text="'Latitude: ' + currentGeoLocation.latitude" />
                    <Label
                        :text="'Longitude: ' + currentGeoLocation.longitude" />
                    <Label
                        :text="'Altitude: ' + currentGeoLocation.altitude" />
                    <Label
                        :text="'Direction: ' + currentGeoLocation.direction" />
                </StackLayout>
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    const geoLocation = require("nativescript-geolocation");
    const dialogs = require("tns-core-modules/ui/dialogs");
    export default {
        methods: {
            enableLocationServices: function() {
                geoLocation.isEnabled().then(enabled => {
                    if (!enabled) {
                        geoLocation
                            .enableLocationRequest()
                            .then(() => this.showLocation());
                    } else {
                        this.showLocation();
                    }
                });
            },
            showLocation: function() {
                geoLocation.watchLocation(
                    location => {
                        this.currentGeoLocation = location;
                    },
                    error => {
                        alert(error);
                    }, {
                        desiredAccuracy: 3,
                        updateDistance: 10,
                        minimumUpdateTime: 1000 * 1
                    }
                );
            },

            onButtonTap() {
                dialogs.alert("テスト").then(function() {
                    console.log("Dialog closed!");
                });
            }
        },

        data() {
            return {
                currentGeoLocation: {
                    latitude: null,
                    longitude: null,
                    altitude: null,
                    direction: null
                }
            };
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>