nativescript

WSLのUbuntuでNativeScript+Vueの開発環境を構築する手順


Image Credit:nativescript.org

はじめに

NativeScriptは、JavascriptでiOS、Android用のアプリを構築することができるフレームワークです。Javascript、Angular.js、Vue.js、TypeScriptでiPhone、Androidのアプリを作成することが可能です。この記事では、Windows Subsystems for Linux(以降、WSL)上のUbuntu18.04にNativeScriptの開発環境を構築して、実際に実機でアプリのプレビューを表示するところまでの手順をまとめます。なお、NativeScriptではJavascript、Angular.js、Vue.jsをベースとして選択できますが、この記事ではVue.jsをベースとして構築します。

できるようになること

NativeScriptとVue.jsを使って、以下のようなスマートフォン用のアプリを作成して動作確認します。

前提と環境

今回はWSL上のUbuntu18.04で環境構築を行いましたが、WSL上でなくてもVagrant上の仮想マシンやUbuntuがインストールされた実マシンでも同様の手順で構築できました。NativeScriptの開発環境を構築するにあたって前提となる環境は以下になります。

  • WSLは有効化済とする
  • Ubuntu16.04以上推奨
  • Node.js(ver10以上)がインストールされていること
  • iPhone、またはAndroid端末の実機を用意する(実機でのアプリ動作確認のため)

その他のWindows、MacOSへのNativeScriptのインストールについての前提は公式サイトにまとめられていますので必要な方は見てみてください。

System Requirements

The NativeScript CLI offers both a Quick Setup for getting started quickly, and a Full Setup that allows you to compile iOS and Android apps locally. This page outlines the system compatibility for both setup options.

Node.jsがインストール済かどうかは、端末で以下のコマンドを実行することで確認できます。ver10以上が表示されればOKです。

$ node -v
v10.15.3

NativeScriptをインストールする

NativeScriptのインストールは簡単で、以下のようにnpmを使用してインストールします。WSL上のUbuntu18.04を起動して以下のコマンドを実行します。

$ npm install -g nativescript

上記を実行すると、いくつか質問が表示されてそれに対して回答しながら進めていきます。
最初の質問は、「NativeScript改善のために統計情報を匿名化して自動送信して良いか?」という内容です。ここではnで進めます。

Do you want to help us improve NativeScript by automatically sending anonymous usage statistics? We will not use this information to identify or contact you. You can read our official Privacy Policy at
? http://www.telerik.com/company/privacy-policy (Y/n)

続いて、「zshを使っている場合、NativeScriptのコマンド補完を有効化できるが有効化するか?」という内容です。各自の環境に合わせて選択します。私の場合はzshではないためここではnで進めます。

If you are using bash or zsh, you can enable command-line completion.
? Do you want to enable it now? (Y/n)

上記の質問後、インストールが開始され以下のようにInstallation successful.と表示されます。
その後に続けて「NativeScriptの最新情報をメールで受信したいか?」という質問が表示されます。もし最新情報を自身のメールアドレスに届けてほしい場合は、? Input your e-mail address to agree or leave empty to decline:に続けて自身のメールアドレスを入力してEnterを押します。不要な方は何も入力せずにEnterを押します。

(...上省略...)
Installation successful. You are good to go. Connect with us on http://twitter.com/NativeScript.

You can review the Progress Software Privacy Policy at https://www.progress.com/legal/privacy-policy

I agree to receive email communications from Progress Software or its Partners (https://www.progress.com/partners/partner-directory),containing information about Progress Software's products. Consent may be withdrawn at any time.

? Input your e-mail address to agree or leave empty to decline:

そして最終的に以下のようにYou have successfully installed the NativeScript CLI!のメッセージとともに、NativeScriptのコマンドの使い方が表示されて無事にインストールは完了です。

You have successfully installed the NativeScript CLI!
To create a new project, you use:
tns create <app name>

To build your project locally you use:
tns build <platform>

NOTE: Local builds require additional setup of your environment. You can find more information here: https://docs.nativescript.org/start/quick-setup
To build your project in the cloud you can use:
tns cloud build <platform>

NOTE: Cloud builds require Telerik account. You can find more information here: https://docs.nativescript.org/sidekick/intro/requirements

If you want to experiment with NativeScript in your browser, try the Playground: https://play.nativescript.org
If you have any questions, check Stack Overflow: https://stackoverflow.com/questions/tagged/nativescript and our public Slack channel: https://nativescriptcommunity.slack.com/

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/nativescript/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ nativescript@5.3.4
added 944 packages from 1353 contributors in 127.63s

動作確認として、NativeScriptのtnsコマンドを実行してみると、以下のようにコマンドの使い方等がずらっと表示されます。

$ tns
# NativeScript CLI

┌─────────┬─────────────────────────────────────────────────────────────────────┐
│ Usage   │ Synopsis                                                            │
│ General │ $ tns <Command> [Command Parameters] [--command <Options>]          │
│ Alias   │ $ nativescript <Command> [Command Parameters] [--command <Options>] │
└─────────┴─────────────────────────────────────────────────────────────────────┘

## General Commands

┌─────────────────┬───────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Command         │ Description                                                                                                   │
│ help <Command>  │ Shows additional information about the commands in this list in the browser.                                  │
│ autocomplete    │ Configures your current command-line completion settings.                                                     │
│ usage-reporting │ Configures anonymous usage reporting for the NativeScript CLI.                                                │
│ error-reporting │ Configures anonymous error reporting for the NativeScript CLI.                                                │
│ doctor          │ Checks your system for configuration problems which might prevent the NativeScript CLI from working properly. │
│ info            │ Displays version information about the NativeScript CLI, core modules, and runtimes.                          │
│ proxy           │ Displays proxy settings.                                                                                      │
│ update          │ Updates the project with the latest versions of iOS/Android runtimes and cross-platform modules.              │
└─────────────────┴───────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
(...以下省略...)

ちなみに、インストールされたバージョンは5.3.4です。(2019年4月30日時点)

$ tns --version
5.3.4

また、tnsはTelerik NativeScriptの略です。TelerikはNativeScript開発元の会社名です。なお、tnsと全く同じコマンドとしてnativescriptも使用できますが、基本的には短いtnsを使おうと書いてあります。

NativeScript+Vueのアプリを作成し動作確認を行う

冒頭でも説明したように、NativeScriptでは、Javascript、Angular、Vue.jsをベースとして選択できますが、ここではVue.jsで構築します。
NativeScript + Vue.jsでのアプリ作成については、以下の手順で進めます。

まず、WSL上のUbuntu18.04の適当なディレクトリに移動します。ここでは、ホームディレクトリにworkspaceというディレクトリで作業するとします。
はじめにVue.js関係のパッケージをnpmでインストールします。

~/workspace/$ npm install -g @vue/cli @vue/cli-init

その後、以下のコマンドでアプリの雛形を作成します。以下のmyappは適当なプロジェクト名です。この名前のディレクトリが作成されます。

~/workspace/$ vue init nativescript-vue/vue-cli-template myapp

上記を実行すると、以下の質問が表示されます。試す用であれば基本的にはデフォルトのままで大丈夫かと思います。ただ、1点だけ、Install vue-devtools?についてはNoにしなければ私の環境では作成したアプリのプレビュー時にどうしてもエラーが出てしまいました。詳細は後述します。

~/workspace/
? Project name myapp (プロジェクト名)
? Project description A native application built with NativeScript-Vue(プロジェクトの説明)
? Application name NativeScript-Vue Application(アプリの名前)
? Unique application identifier org.nativescript.application(アプリケーション任意のID)
? Project version 1.0.0(プロジェクトのバージョン)
? Author(開発者)
? License MIT(ライセンスの種類)
? Select the programming language javascript(使用する言語の選択)
? Select a preset (more coming soon) Simple(用意するアプリのテンプレートの選択)
? Install vuex? (state management) Yes(Vuexを使用するかの選択)
? Install vue-devtools? No(Vuedevtoolsを使用するかの選択。ここはNoにしておくのが良さそうです。後述します。)
? Color scheme aqua(カラーテーマの選択)

作成されたmyappディレクトリに移動し、npmパッケージをインストールします。

~/workspace/myapp$ cd myapp
$ npm install

完了後、tnsコマンドを使用してアプリのプレビューを起動します。--bundleはWebpackの使用のために必須で、Vue.jsベースの場合は必須となります。

~/workspace/myapp$ tns preview --bundle

プレビューを起動すると以下のように端末に大きなQRコードが表示されます。このQRコードをiPhone、またはAndroidの実機からNativeScript専用のアプリで読み取ると、実機で作成したアプリの動作確認を行うことができます。

QRコードを読み取るためのアプリは、「NativeScript Playground」、「NativeScript Preview」の2つです。App Store、Google Playのどちらからでもダウンロード可能です。
App Storeだと以下のような表示になります。

「NativeScript Playground」をインストールしたら起動します。起動すると、以下のように「Scan QR code」という部分をタップします。

カメラが起動したら端末に表示されたQRコードを読み取ります。すると、以下のようにデフォルト状態のアプリが表示されます。

ホットリロードを有効にしてプレビューを起動する

プレビューでは、Hot Module Replacement機能、いわゆるホットリロード機能も用意されています。これを有効化するには、--hmrオプションを与えます。なお、--hmrオプションが与えられた場合は--bundleオプションが自動的に付与されるため改めて与える必要はありません。

~/workspace/myapp$ tns preview --hmr

この状態で適当にmyappディレクトリにあるファイルを更新すると、即座に「NativeScript Playground」上のアプリに反映されます。

Could not find module ‘nativescript-vue-devtools’エラーについて

vue initでプロジェクトを作成した際に、Install vue-devtools? という質問がありここでyにして進めると、tns preview --hmrを実行すると以下のようなエラーが「NativeScript playground」側で表示されました。

内容を見てみると、nativescript-vue-devtoolsが見つけられていないようです。色々と調査してみましたが、どうにも解決できませんでした。

私の環境依存の可能性も大いにありますが、同様の症状が出ている方のためにメモしておきます。もし今後このエラーが解決できたらまた追記します。似たようなエラーに遭遇している方もいるようでした。

Failed to find module nativescript-vue-devtools

Failed to find module nativescript-vue-devtools

まとめ

NativeScriptによって、Web関係の知識をもってiPhoneやAndroidのアプリを作成することができます。特にVue.jsやAngular.jsを使い慣れている方にとってはとても魅力的だと思います。一度触ってみることをおすすめします。

SPONSORED LINK

コメントを残す

メールアドレスが公開されることはありません。