【2019年4月版】NativeScript+Angularで感じた新時代

# NativeScript でハイブリッドアプリの開発に入門してみました。

ちょっと興奮冷めやらぬ感じですが、NativeScript で Angular のサンプルを Android で動かしてみたらこれはも〜凄かったのでご紹介いたします。(語彙力)

## 対象環境

- PC: Windows 10 Pro
- スマホ: Android
- IDE: VSCode

今回は Android スマホで動作確認しましたが、たぶん iOS も同様の手順で大丈夫かと思います。
また、環境構築で例によって管理者権限でコマンドプロンプトを実行する必要あります。

## NativeScript の環境構築

管理者権限でコマンドプロンプトを立ち上げ、以下のコマンドを叩きます。

```console
> @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"
```
インストールの確認が出るので適宜 `y`を指定してください。めんどくさい場合は`a`を指定して都度の確認をスキップできます。
最後の `AVD` の確認だけは別途、`y`が必要でした。
上記のスクリプトで事前に必要な環境はすべてインストールしてくれるはずです。(あら便利。。。)

いったんコマンドプロンプトを終了し、再度、管理者権限でコマンドプロンプトを立ち上げます。
以下のコマンドで、NativeScript本体のインストールを行います。

```console
> npm i -g nativescript
> tns doctor
```
`tns`コマンドが見つからない旨のエラーが発生した場合はコマンドプロンプトを再度立ち上げなおしてみてください。
`tns doctor`で必要な環境が整っているかチェックしてくれます。とくに文句がないようであればVSCodeを立ち上げてさっそく開発モードに入りましょう。

## Angular でのサンプルプロジェクトの作成

VSCodeのターミナルを起動し、以下のコマンドでさっそく最初のNativeScrit+Angular アプリを作成しましょう！

```console
$ tns create my-angular-app --ng
```

プロジェクト作成時に「匿名の使用状況送信していいですか～？」って聞かれるので`n`としておきます。

プロジェクトが作成し終わったら表示されるご案内の通りに以下のコマンドを入力します。

```
$ cd my-angular-app
$ tns preview
```
しばらくすると・・・で、でっかい**QRコード**が表示されました?!

<img width="460" alt="nativescript_QRコードスクショ.png" src="https://qiita-image-store.s3.amazonaws.com/0/335150/2c4f457f-d296-46c4-6cfd-4c10391f6a1c.png">

マジすか？ｗ

ただし、ご案内をよく読むと "NativeScript Playgroud アプリをインストールしてね！" ってことなので、渋々従います。(以降、私は Android 版をダウンロードして確認してますが、iOSでも同様かと思います。)

GoogleのストアからNativeScriptを検索して`NativeScript Playgroud`アプリをインストール(・・・自分で検索しなきゃダメなの？)
しばらくしてダウンロードが終わり、NativeScript PlaygroudアプリからQRコードを読み込ませると、"NativeScript Preview App を入れてね！"と案内が出ます。(いや、先に言えってｗ)

渋々従います。再び、Googleのストアから`NativeScript Preview`アプリをインストールします。しばらくして、ダウンロードが終わると勝手に何かが立ち上がり・・・

<img width="300" alt="55937956-3284be00-5c75-11e9-914f-01b8735231a3.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/335150/08a8ba3b-e1fd-a94f-ccac-400e25457800.jpeg">

ん？？なんか出た？

最初は意味が分かりませんでしたが・・・

しばらくして、以下のコードを発見しました。

```javascript
  function ItemService() {
    this.items = new Array(
      { id: 1, name: 'Ter Stegen', role: 'Goalkeeper' },
      { id: 3, name: 'Piqué', role: 'Defender' },
      { id: 4, name: 'I. Rakitic', role: 'Midfielder' },
      { id: 5, name: 'Sergio', role: 'Midfielder' },
      { id: 6, name: 'Denis Suárez', role: 'Midfielder' },
      { id: 7, name: 'Arda', role: 'Midfielder' },
...
```

え・・・ウソ。。。このリストが自分のスマホに出てる・・・？

半信半疑で以下のようにリストを変えてみます。

```typescript:item.service.ts
...
        { id: 7, name: 'Arda', role: 'Midfielder' },
        { id: 8, name: 'A. Iniesta', role: 'Midfielder' },
        { id: 9, name: 'スアレス', role: 'Forward' },
        { id: 10, name: 'メッシ', role: 'Forward' },
        { id: 11, name: 'ネイマール', role: 'Forward' },
        { id: 12, name: 'Rafinha', role: 'Midfielder' },
        { id: 13, name: 'Cillessen', role: 'Goalkeeper' },
...
```
`Ctrl+S`でファイルを保存すると・・・
直ちにAndroid側のPreviewアプリが勝手に再起動？し・・・

![55937971-3b758f80-5c75-11e9-9049-407f0fe60872.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/d66c16c7-0640-3a3a-bc76-8bd9c6d08909.jpeg)

変わってるーーーーーーーーーーーーー！！！！！ｗ
えっ？！ちょっ！？ナニコレ！？

試しに`スアレス`をタップしてみると・・・

<img width="300" alt="55940893-0456ac80-5c7c-11e9-9316-0d752066a853.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/b0863ded-399d-b827-9948-67100deba0ac.jpeg">

しょ・・・詳細画面、出てる！！！

何回か試しましたが、PC画面でVSCodeでリストを更新し`Ctrl+S`をすると、手元のAndroidのPreviewアプリに即座に反映されます。。。

ビュー側の更新も・・・

```html:items.component.html
<ActionBar title="FCバルサのリスト" class="action-bar"> </ActionBar>
```
`Ctrl+S`で、ポンっと！
![55943419-89909000-5c81-11e9-85f1-69c0befca337.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/360a9517-632f-61dd-a39b-69144211876b.jpeg)

こちらはアプリの再起動なしで、表示がアップデートされてます。。。
なんか、完全に新時代来ちゃってるわ・・・

よし！と、とりあえずこの興奮をQiitaにぶん投げておこう！(←イマココ)

というわけで引き続きいろいろ試してみたいと思います！！

# 本家サイトのセットアップ手順について

以下の本家サイトにWindowsでのセットアップ手順が書かれていましたが・・・
- https://docs.nativescript.org/angular/start/ns-setup-win

最終的には、というか手順の途中で必要なsetupスクリプトが`404`になっていました。
そこでgithubのsetup-scriptをリポジトリを確認してみると・・・
- https://github.com/NativeScript/setup-scripts

実際のスクリプトは以下ですが、なにやら`Chocolatey`や`googlechrome`もインストールしています。
https://github.com/NativeScript/setup-scripts/blob/master/native-script.ps1

これはセットアップ手順に書いてあった`Prerequires`そのまんまじゃないですかー。
README.md に

> for Windows: @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

とありますので、はい・・・これでOKよ、ということらしいです。

iOSもここにrubyのスクリプトがありますのでサクッとインストールできるかと思います。

それでは、実験に戻りたいと思います！

# ビルドの手順について追記

Playgroundアプリで遊んだだけではダメなので、ちゃんとパッケージとしてビルドしましょう。

はい、以下のコマンドです。

```
$ tns build android
```
もしくは、

```
$ tns build ios
```

で、`my-angular-app\platforms\android\app\build\outputs\apk\debug\app-debug.apk`が出力されます。

なんか・・・いろいろ、大変だったのになぁ。。。

ここで紹介した`tns`コマンドの使い方は以下のnpmサイトに載っています。

- https://www.npmjs.com/package/nativescript

いや、ホント、進化してるのね・・・