【Vue.js】WSL 上で Vue.js を用いた Android アプリを開発する

# はじめに

仕事中、睡魔と戦いながら、Android アプリを作ろうと思いました。

ところが私は、C# は触った程度だし Java はコンソールアプリしかやったことがなく GUI はわかりません。そこで調べてみると、HTML で作れるそうじゃないですか。社会人二年目で Web 系しかしていない私にはありがたい話です。

もう少し欲を出して、業務で使用している Vue.js を使えないかなーと思ったら、ちょうどいいのがあるじゃないですか。

というわけで、Windows Subsystem for Linux (WSL) 上で Vue.js を用いて Android アプリを開発するための手順を紹介します。


# つかうもの

* WSL ： Windows 環境がカオスにならないようにするため
* Vue.js ： 今回使いたかったもの
* nativescript ： Javascript でアプリ開発できるようにするすごいやつ
* アンドロイド実機 ： 開発時の実機との連携がすごい


# 手順

WSL の有効化から実機での起動まで端折らずにやるよ。

1. WSL 環境の構築
2. Ubuntu への各種インストール


## 1. WSL 環境の構築

まずは WSL を有効化し、Ubuntu をインストールします。

1. コントロールパネル > プログラムのアンインストール を選択

    ![WSL1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/7b7a88bb-a637-0ece-f70f-fb337c061832.png)

2. 左側 windows の機能の有効化または無効化を選択

    ![WSL2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/c2073214-6ac3-827c-6bab-2a1fe575eafe.png)

3. Windows Subsystem for Linux にチェックを入れ有効化

    ![WSL3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/5b2876da-e2ad-804e-ba8b-f8dca06f593a.png)

4. インストール完了次第再起動

5. （念の為）設定 > 更新とセキュリティ > 開発者向け > 開発者モードを有効にする

    ![WSL4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/f67f36a2-f02a-2420-8984-3d8bd2879719.png)

6. スタートから Microsoft Store を開く

    ![WSL5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/fa950a33-226f-0807-3ba4-45b12ba0081d.png)

7. 「Ubuntu」で検索し、Ubuntu を選択

    ![WSL6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/7a3ec0ca-e766-51d1-2d0e-4f35a793a6d7.png)

8. 入手をクリックでインストール

    ![WSL7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/a4c1022f-e182-d83c-0b98-29f8cea5dee2.png)

9. スタートから Ubuntu を開く

    ![WSL8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/05a5564d-f404-cc05-6aa8-031ac0deb623.png)

10. インストール完了を待ち、ユーザー名とパスワードを入力（パスワードは表示されないので注意）

    ![WSL9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/571f62e6-2c1c-5645-ed99-f0460e94f6f1.png)

11. リポジトリを日本のサーバに変更（sudo 利用時、パスワード入力を求められます）

    ``` sh
    $ sudo sed -i -e 's%http://.*.ubuntu.com%http://ftp.jaist.ac.jp/pub/Linux%g' /etc/apt/sources.list
    ```

12. パッケージのアップデート

    ``` sh
    $ sudo apt update
    $ sudo apt upgrade
    ```

13. Windows との共有ディレクトリを作成

    ``` sh
    $ ln -s /mnt/c/Users/(username)/shareWithUbuntu ~/shareWithWindows # (username)はWindows側のユーザ名に置き換え
    ```

以上で WSL 環境の構築は完了です。WSL 環境をリセットしたい場合は
スタート > Ubuntu 右クリック > アプリの設定 > リセット
から可能です。リセット後は Ubuntu を起動するとまたアカウント設定から始まります。環境破壊と再構築、簡単ですね。


## 2. Ubuntu への各種インストール

NativeScript-Vue での開発に必要なものをインストールしていきます。

1. Node.js のインストール

    ``` sh
    $ sudo apt install -y nodejs npm # node、npmのインストール
    $ sudo npm install n -g          # n package導入
    $ sudo n stable                  # nを使用してnodeのstable版をインストール
    $ sudo apt purge -y nodejs npm   # 最初に入れた古いnode、npmは削除
    $ exec $SHELL -l                 # 再ログイン
    $ node -v                        # バージョン確認
    ```

2. NativeScript CLI のインストール

    ``` sh
    $ sudo npm install -g nativescript
    ```

3. G++ （C++ のコンパイラ）のインストール

    ``` sh
    $ sudo apt install g++
    ```

4. JDK8 の設定

     ``` sh
    $ sudo apt install openjdk-8-jdk         # JDK8インストール
    $ sudo update-alternatives --config java # JAVAのバージョンが複数あればJDK8を選択
    ```

5. 環境変数 JAVA_HOME の追加

    1. ~/.bashrc を開く

        ``` sh
        $ vi ~/.bashrc
        ```

    2. Iキーで編集モードに入り、一番下に以下の行を追加

        ``` sh
        $ export JAVA_HOME=$(update-alternatives --query javac | sed -n -e 's/Best: *\(.*\)\/bin\/javac/\1/p')
        ```

    3. ESCキーを押し、:wq と入力

6. Android SDK のダウンロード（**Windows 側での操作**）
    1. [ここ](https://developer.android.com/studio) の下の方の「Command line tools only」から Linux のものをダウンロード（<font color="Red">※20200530追記 最新版のsdkmanagerを利用するとエラーが出るようです。その場合はsdk-tools-linux-4333796を利用してください。参考 -> [nativeScriptIssue](https://github.com/NativeScript/nativescript-cli/issues/5304)</font>）

        ![WSL10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/63f0300f-47c2-3755-37ff-73118b1a04b1.png)

    2. ダウンロードした zip ファイルを解凍
    3. 解凍した中にある tools ディレクトリを shareWithUbuntu ディレクトリに移動

7. /usr/lib/android/sdk/ ディレクトリを作成

    ``` sh
    $ sudo mkdir -p /usr/lib/android/sdk/
    ```

8. shareWithWindows ディレクトリ内の tools ディレクトリを /usr/lib/android/sdk/ に移動

    ``` sh
    $ sudo mv ~/shareWithWindows/tools /usr/lib/android/sdk/
    ```

9. 環境変数 ANDROID_HOME の追加

    1. ~/.bashrc を開く

        ``` sh
        $ vi ~/.bashrc
        ```

    2. Iキーで編集モードに入り、一番下に以下の行を追加

        ``` sh
        $ export ANDROID_HOME="/usr/lib/android/sdk/"
        $ export PATH="${PATH}:${ANDROID_HOME}tools/:${ANDROID_HOME}platform-tools/"
        ```

    3. ESCキーを押し、:wq と入力

10. 再ログイン

    ``` sh
    $ exec $SHELL -l
    ```

11. 必要なパッケージのインストール

    ``` sh
    $ sudo $ANDROID_HOME/tools/bin/sdkmanager "tools" "emulator" "platform-tools" "platforms;android-28" "build-tools;28.0.3" "extras;android;m2repository" "extras;google;m2repository"
    ```

12. 再ログイン

    ``` sh
    $ exec $SHELL -l
    ```

13. 以下のコマンドを実行し、No issues were detected. が出力されれば成功

    ``` sh
    $ tns doctor # 統計情報を自動送信して良いか聞かれるが n で構わない
    ```

NativeScript 関連のインストールはここまで。


## 3. アプリケーションの作成

アプリケーションを作成します。

1. Vue 関連パッケージのインストール

    ``` sh
    $ sudo npm install -g @vue/cli @vue/cli-init
    ```

2. プロジェクトを作成するディレクトリを作成、移動

    ``` sh
    $ mkdir workspace && cd workspace
    ```

3. プロジェクトの作成

    ``` sh
    $ vue init nativescript-vue/vue-cli-template sample-app

    # 以下対話形式（vue-devtools以外はデフォルトでもOK）
    ? Project name sample-app                                              # プロジェクト名
    ? 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を使用するか（デフォルトはNo）
    ? Install vue-devtools? No                                             # Vuedevtoolsを使用するか（デフォルトはYes）
    ? Color scheme none                                                    # カラーテーマ
    ```

4. プロジェクトディレクトリに移動し、パッケージインストール

    ``` sh
    $ cd sample-app && npm install
    ```

5. アプリを起動

    ``` sh
    $ tns preview --bundle
    ```

    ![WSL11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/5d586221-f4b3-5ecf-9bbe-d41ee380945a.png)

プロジェクトの作成からアプリ実行までは簡単ですね。コンソールに表示される QR コードは後ほど利用するので消さないでください。


## 実機で表示

作成したアプリケーションを実機に表示します。ここでは、Android 側にアプリケーションの導入が必要となります。

1. Google Play から NativeScript Playground をインストール
2. Google Play から NativeScript Preview をインストール

    ![WSL12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/2b139d44-1c87-5b63-9aec-0a22654e752f.png)

3. NativeScript Playground を開き、 Scan QR code をタップ

    ![WSL13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/b6205f53-b2f5-f462-e523-520560aff570.png)

4. コンソールの QR コードを読み込む
5. 完了

    ![WSL14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324940/7c0d8f28-1238-376c-9d02-9541ac5aad4e.png)

QR の読み込み後に少し時間がかかりますが、個人的には QR 読み込みだけで実機で試せるのは革命的です。


# おわりに

NativeScript-Vue のおかげで睡魔に打ち勝つことができました。が、この記事を書いている間は何度も睡魔に負けています。何か実用的なものを NativeScript-Vue で作成してまた記事を上げたいですが、今度は仕事が忙しくなり睡魔に襲われる機会が減りそうなので、なかったことになるかもしれないです。

ここを見れば誰でも同じことができるように心がけていますが、訳わかんねー記述があればコメントください。まあ私も素人ですが。


# 参考サイト

[Windows Subsystem for Linuxをインストールしてみよう！](https://qiita.com/Aruneko/items/c79810b0b015bebf30bb)
[Ubuntuに最新のNode.jsを難なくインストールする](https://qiita.com/seibe/items/36cef7df85fe2cefa3ea)
[NativeScript-Vue / Installation（英語）](https://nativescript-vue.org/en/docs/getting-started/installation/)
[NativeScript Advanced Setup: Linux（英語）](https://docs.nativescript.org/start/ns-setup-linux)
[Windows 10のWindows Subsystem for Linux（WSL）を日常的に活用する](https://www.clear-code.com/blog/2017/11/8.html)