Web開発技術を利用したスマホ向けアプリのクロスプラットフォーム開発（１つのソースでAndroid / iOS両方のアプリを動かす開発方法）というと、Cordova、Monaca、ionicなどのWebViewを軸にした開発方法を思い出しますが、今回紹介する、「NativeScript-vue」は少し異なった特徴を持っています。
目次
特徴は？
NativeScript-vueはJavaScriptのフロントエンドフレームワークのVue.jsを使ってアプリ開発を行う事が出来るオープンソースフレームワークです。
厳密には「NativeScript」というJavaScriptでアプリ開発を行えるフレームワークがVue.jsをサポートし、Vue.jsを使ってアプリ開発が実現可能になりました。
無料で利用できます。
WebView軸のアプリとの比較
個人的に最大の特徴は、CordovaなどのWebView機能を使ったWebページの表示ではなく、ネイティブのUIコンポーネントを利用して開発が出来る点です。
WebView軸のアプリはWebページをアプリ内で見せている為、ネイティブアプリというよりはWebアプリに近い性質を持ちます。
開発したWebアプリがあればそれをWebViewで表示させてあげればアプリが完成する手ごろさがある一方、アプリ特有の機能※（カメラ操作、プッシュ通知、バックグラウンド同期など）が使えない、通信が発生するので読み込み処理やスムーズな動作が出来ない場合があります。
※（Cordovaなどではプラグインを利用すれば実装できる機能もあるようです）
かといって、JavaやSwiftを覚えて、それぞれの環境で一からアプリを開発するのも気が引けます。
NativeScriptは、そんなWebviewアプリとネイティブアプリのちょうど中間地点にいる存在なんじゃないかなと思います。
以下の記事でCordovaで抱えていた問題をNativeScriptを使って解消した内容が詳細に書かれているので参考に確認してみてください。
まだCordovaで消耗してるの？4ヶ月かけてCordovaからNativeScriptアプリに移行して良かったこと
開発の特徴
本来、JavaScriptはWebページを動的に変化をつけるために用いられますが、NativeScriptでのアプリ開発はWeb開発ではない、ようは「HTML」を使用しない開発になります。
なので「div」や「input」のようなHTMLタグは使えません。
その代わり、NativeScriptで用意されたタグを利用することができます。
このタグが、Android、iOSのそれぞれのUIコンポーネントに変換されます。
タグは、NativeScriptで用意されたもの以外にもプラグインを導入すれば、より機能が拡張されたUIを使う事もできます。
プラグインは NativeScript Marketplace で確認できます。
NativeScript-vueでの実際の開発はどんな感じなのか、以下のWebサイトで実際に試すことができます。
NativeScript Playground (Vue.js開発版)
開発環境を作成する
上で紹介したWebサイト内でも開発を進めることが出来ますが、より本格的にアプリ開発を進める場合は以下の手順でPCに環境を作成してじっくりと開発していきましょう。
私はWindows PCで環境を作成しましたが、Macでも基本同じだと思います。（iOSアプリ開発にはMacのXcodeが必要です）
インストール・環境作成は公式サイトをベースに進めます。
https://nativescript-vue.org/ja/docs/getting-started/quick-start/
こちらの記事も参考にしました。
１．node.jsのインストール
NativeScript本体やプラグインのインストールにnode.jsを必要とします。
node.js入っているか確認する場合は、コマンドプロンプト（Macならターミナル）に 「node –version」と入力して実行します。
バージョンが表示されればインストール済みです。
PCに入れていない場合はこちらの公式サイトからインストールします。
最新のLTSをダウンロードします。
インストーラを起動したら、全部デフォルトで（たしか）進めてインストールします。
２．NativeScriptのインストール
次に、公式サイトを参考にNativeScriptのインストールを行います。
・Vue CLIをインストール
|
1 |
npm install -g @vue/cli @vue/cli-init |
・NativeScriptのプロジェクトを作成（hogehogeにプロジェクト名を入れます）
|
1 |
vue init nativescript-vue/vue-cli-template hogehoge |
・プロジェクト階層に移動しnpm依存ファイルをインストール
|
1 2 |
cd hogehoge npm install |
・tnsコマンドが有効化確かめる
コマンドリストが表示されれば成功です。
|
1 |
tns |
・環境設定のチェック
|
1 |
tns doctor |
チェックマークになっていない箇所は、そこに書いてある要件を満たしていないので、指摘の通り実装します。
Android SDKやJava(JDK)などは別途要件通り実装しましょう。
「Update available for component tns-android(tns-ios)」が出ている場合、こちらのページを参考にコマンドを実行します。
バージョン部分は表示されているバージョンを@右側に入力します。
|
1 |
tns platform update android@6.1.2 |
|
1 |
tns platform update ios@6.1.1 |
「tns doctor」を実行し、下のようになれば環境設定完了です。
３．VisualStudio Codeでプロジェクトを開く
NativeScriptにかかわらず、開発エディタはVisualStudio Codeがオススメです。
無料で利用できます。
インストールはこちらから
Microsoft Azure Visual Studio Code 公式
インストール出来たら、「ファイル」→「Open Folder」でプロジェクトのフォルダを指定して開きます。
ここではVisualStudio Codeの細かな使い方などには触れませんが、「Japanese Language Pack」と「Vetur」はダウンロードしておきましょう。
「Japanese Language Pack」はVisualStudio Codeを日本語化してくれるプラグインです。
「Vetur」はVueを使った開発になるのでVueファイルを整形してくれるプラグインです。
４．アプリのビルドと実行
今回はWindowsPCなので、Androidエミュレータで実行する場合としての手順を紹介します。
下準備としてAndroid StudioにあるSDK Managerの設定と、AVDManagerでエミュレータの作成を行います。
DK Manager、AVDManagerともにAndroidStudioの「Configuer」のから選択で起動します。
・SDKManager設定
「Android SDK」の「SDK Platforms」で「8.0～9.+」までチェックしインストールします。
（画像時点では9.＋(Q)はまだアップデートさせていませんでした…）
・AVDmanagerでエミュレータ作成
「+ create Viertual Device…」ボタンからエミュレータ作成が行えます。
詳しい作成方法はこちらの記事を参照ください。
https://akira-watson.com/android/avd-manager.html
・エミュレータを起動させる
エミュレータを起動させなくても「tns run android」コマンドで起動するらしいのですが、私の環境ではundefindとなってしまいうまく起動してくれませんでした。
うまく起動しない場合は、あらかじめ手動で起動させておいてください。
ここまでのAndroidの下準備が終わったら、プロジェクトをビルドしてエミュレータで実行してみましょう。
・プロジェクトの実行
|
1 |
tns run android |
最初にこのコマンドを実行するとわわーっと必要なファイルがインストールされていきますのでじっと待ちましょう。
アプリが起動できたら成功です。
お疲れさまでした！
