NativeScriptを導入してみた-Angular JS導入編

エンジニアの土屋と申します。 だいぶ前にエントリーしたNativeScript(http://tokyo.su…

エンジニアの土屋と申します。

だいぶ前にエントリーしたNativeScript(http://tokyo.supersoftware.co.jp/code/5921)について、
もう少し学んだので今回第2弾としてご紹介したいと思います。

こんな実装ができますよ〜的な感じで記載していきます。
今回は、Angular JSと組み合わせてもう少し複雑な動きをさせてみます。

・準備
前回のエントリー(http://tokyo.supersoftware.co.jp/code/5921)に書かれています。
しかし、久しぶりに動作させようと思ったら、全く動かずもう一度導入からやる羽目になりました。。
Node.jsのバージョンをv7.0.0にあげてtnsを再設定することで対処できました。

・実装
実装する前に、使うテンプレートを落としてみましょう。

$ tns create HelloWorld2 --template nativescript-template-ng-tutorial
$ cd HelloWorld2
$ tns run ios

こんな画面が表示されました。

次に、テンプレートのimages内にリンゴの画像(apple.jpg)が入っていますが、そのままだと面白くないので
record.jpgをimagesフォルダに入れて、これを表示させてみます。

app/app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <ActionBar title="My App"></ActionBar>
    <!-- Your UI components go here -->
    <Image src="~/images/record.jpg"></Image> //これを追加
  `
})
export class AppComponent {
  // Your TypeScript logic goes here
}

上記ですが、こちらを保存すると以下のようにjs形式に自動で書き換えてくれます。

app/app.component.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var AppComponent = (function () {
    function AppComponent() {
    }
    return AppComponent;
}());
AppComponent = __decorate([
    core_1.Component({
        selector: "my-app",
        template: "\n    <ActionBar title=\"My App\"></ActionBar>\n    <!-- Your UI components go here -->\n    <Image src=\"~/images/apple.jpg\"></Image>\n  ",
        styles: ["\n    @keyframes spin {\n      from { transform: rotate(0); } to { transform: rotate(360); }\n    }\n    Image {\n      animation-name: spin; animation-duration: 3s;\n      animation-iteration-count: infinite;\n      animation-timing-function: linear;\n    }\n  "]
    })
], AppComponent);
exports.AppComponent = AppComponent;

レコードが表示されました。

続いてレコードを動かしてみます。

app/app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <ActionBar title="My App"></ActionBar>
    <!-- Your UI components go here -->
    <Image src="~/images/record.jpg"></Image>
  `,
  styles: [`
    @keyframes spin {
      from { transform: rotate(0); } to { transform: rotate(360); }
    }
    Image {
      animation-name: spin; animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
  `]
})
export class AppComponent {
  // Your TypeScript logic goes here
}

以下のように動かすことができました。

Angular JSとの組み合わせですが、頑張れば以下のようなものもできるようです。
以下、サンプルコードのインストール方法と、実行結果になります。

$ git clone https://github.com/NativeScript/sample-Groceries.git NgTodosNative
$ cd NgTodosNative
$ tns platform add ios
$ tns platform add android
$ tns run ios --emulator
$ tns run android --emulator

・終わりに – ネイティブかハイブリッドか
動画やゲーム等、端末のスペックをフル活用するようなものに関しては、間違いなくフルネイティブで
開発した方が良いと思います。逆にニュース系等のサービスは、100%とは言えないですが不具合等が発生
した場合に即時対応できるメリットを活かしてハイブリッドを選択するのもありかなと思いました。