NativeScriptを導入してみました

エンジニアの土屋と申します。 今回、とある業務で調査した時に見つけて興味を持ちました、NativeScript…

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

今回、とある業務で調査した時に見つけて興味を持ちました、NativeScriptについてご紹介したい
と思います。

⑴ NativeScriptとは
参考URL:https://www.nativescript.org/
NativeScriptは、Telerik社から提供されているAngular2とも組み合わせて使うことができるフレーム
ワークです。
JavaScript(およびTypeScript)によるクロスプラットフォーム開発が可能ながらネイティブと同様の
実行速度を得られるらしいです。
ネイティブで実行されるパフォーマンスとUXを提供し、その結果、ネイティブプラットフォームのレンダ
リングエンジンを使ってUIを構築します。WebViewsでのUIレンダリングはしていません。

⑵ 環境を構築してみよう
環境構築は(http://docs.nativescript.org/start/quick-setup)を参照して実施します。
動作には
Rubyのインストール
Node.jsのインストール
NativeScript CLIのインストール
iOSとAndroid開発に必要なもののインストール(Xcodeやエミュレータ等)

が必要となりますので、上記を確認しながら環境を作っていきましょう!!

⑶ 動かしてみよう
さて、環境を整えたら早速動かしてみましょう。
まずはHelloWorldのような、カウンタ機能を実装してみます。
nativescriptはスカッフォールディング(コード雛形の自動生成)を提供するモジュールで、tnsコマンド
によって実行されます。

以下のコマンドで実行致します。

$ cd ~
$ tns create HelloWorld
$ cd HelloWorld
$ tns platform add dos
$ tns run ios --emulator

以下が実行した画面です。

Simulator Screen Shot 2016.10.24 21.58.18

「TAP」をタップすると、

こんな感じでカウンタアプリが実行されます。
なお、実行環境の構成は以下となります。

├── app
│   ├── App_Resources
│   ├── app.css
│   ├── app.js
│   ├── main-page.js
│   ├── main-page.xml
│   ├── main-view-model.js
│   ├── package.json
│   └── references.d.ts
├── lib
│   └── iOS
├── node_modules
│   ├── tns-core-modules
│   └── tns-core-modules-widgets
├── package.json
└── platforms
└── iOS

次は簡単に動作ファイルの説明を行います。

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout>
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ onTap }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
  </StackLayout>
</Page>

main-view-model.js

var Observable = require("data/observable").Observable;

function getMessage(counter) {
    if (counter <= 0) {
        return "Hoorraaay! You unlocked the NativeScript clicker achievement!";
    } else {
        return counter + " taps left";
    }
}

function createViewModel() {
    var viewModel = new Observable();
    viewModel.counter = 42;
    viewModel.message = getMessage(viewModel.counter);

    viewModel.onTap = function() {
        this.counter--;
        this.set("message", getMessage(this.counter));
    }

    return viewModel;
}

exports.createViewModel = createViewModel;

xmlファイルでviewファイルを実装し、実際のロジックはjsファイルで行っております。

NativeScriptはすぐ実行ができる便利なテンプレートが用意されているようなのですが、
https://www.tjvantoll.com/2016/02/22/creating-nativescript-templates/

正直そんなに多くありません。。しかし使えそうなのも幾つかありますので、そのうちの1つを紹介したい
と思います。

・tns-template-tab-navigation

tns-template-tab-navigationはタブ切り替え機能を実装するテンプレートです。
早速適用してみましょう!

$ tns create Tab --template tns-template-tab-navigation
$ cd Tab
$ tns platform add dos
$ tns run ios --emulator

以下、実行結果となります。

Simulator Screen Shot 2016.10.24 21.56.44

タブをタップすると

Simulator Screen Shot 2016.10.24 21.56.51

このように簡単に実装することができます。

⑷ 最後に
というわけで、iOSに特化してだいぶ駆け足でNativeScriptをご紹介しましたが、Angularを使った
NativeScriptアプリケーションも作成することができたり、いろいろと可能性を秘めているフレームワーク
なので、これからも少しずつ学んでいきたいと思います。