爆速プロトタイピングツールNoodlのデプロイ方法

# 目的
Noodlはスウェーデンのデザイン会社TOPPが提供しているツールです。
Java ScriptベースのUIツールで、プログラミングをせずに
WEBアプリやスマホアプリをスムーズに（爆速に）作ることができます。

そういう私も、Javaを学生の頃学んだくらいでJava Scriptは
さっぱりわかりませんが、スマホアプリを短時間（集中すれば一日）で作れました。

本稿では、そのNoodlのデプロイの仕方を備忘録がてら、共有します。
今回はAndroidアプリのデプロイ紹介ですが、iOSにもある程度は共通する手順です。

[Noodl（日本語紹介ページ）](https://tensorx.co.jp/noodl-jp/)
# 環境
- OS:windows10
- メモリ:16GB
- CPU:i3-8100


# デプロイとは
スマホの画面にあるアイコンを作ることです（たぶんね）
つまり、Noodlで作ったプロトタイプをパッケージング化して、スマホに置くことができるんですね。
デプロイすることで、ネットにつながってなくても
Noodlのプロトタイプが君のスマホの中に！！
が実現できるんですね。

# デプロイ手順
[noodlのdeploy方法](http://docs.getnoodl.com/deploying.html)
[cordovaのAndroid Platform Guide](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support)
を参考にやっていきます。途中難儀したところ、あるのでその辺をフォローできればと思います。

## node.jsのインストール
node.jsをインストールします
https://nodejs.org/
LTS版でよいです。
このインストールでnpmも一緒にインストールされます。
npmはNode Package Managerの略で、node.jpのノード（機能みたいなもの）を管理するツールです。
インストールの完了を確認するために、コマンドプロンプトを起動して、以下のコマンドを入力します。

`$node --version`
`$npm --version`
数字が出れば、インストール成功

## cordovaのインストール
`$npm install -g cordova`
でcordovaをインストールします
(-gオプションをつけることで、ネット上からインストールを実行する）

## cordova実行準備１
次に以下のコマンドを実行すると、カレントファイル直下にMyAppという名前のcordova用のフォルダが作られる。フォルダの場所を変えたい場合は事前にcdコマンドでカレントディレクトリを移動する。
`$cordova create MyApp`

フォルダ作成後、__作ったフォルダ内で__cordovaの機能が使えるので
`$cd MyApp`
で今作ったフォルダに移動する。

MyAppフォルダをエクスプローラで見るとwwwフォルダがある。
なかをみると、複数のファイルが入っているので、それらを削除します。
__削除していいんです__。

## Noodlからソースファイルをwwwフォルダにエクスポートする
Noodlを起動して、デプロイしたいプロジェクトの画面で
DEPLOY TO FOLDER
を選び、Pick Folder...で先ほどのMyAppのwwwを選択します。
<img width="328" alt="sh-deploy[1].png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408801/43fa3a8f-3556-8297-51c0-87dfdd6bedd7.png">

## cordovaの実行準備２
MyAppフォルダにいる状態で
`$cordova platform add android`
を実行して、Androidのプロットフォームを作成します。

ちなみに
`$cordova platform ls`
を実行すると、今作られたplatformフォルダに作られたファイルが見れます。


## java8のインストール
Java Developement Kit(JDK)をインストールします。
ここで注意点として、
この後にAndroid SDKをインストールします。そして、Android SDKはJava8までしかサポートしていないのか、
Java8以降を入れると、デプロイができません。（最新は現在12）
私は、
[こちらのダウンロードページ](https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
から、Java8版としてjdk-8u211-windows-x64.exeをダウンロード、インストールしました。
OSの種類によって、ダウンロードすべきファイルは変わります。

__インストール時、自分がどこにインストールしたかメモしておきましょう!環境変数の設定で慌てない済みます__ 

環境変数の設定は、この後、改めて行います。

## Gradleのインストール
このソフトはアプリのbuildをサポートしてくれるものです。
それ以上はわかりません（汗
以下のサイトにアクセスして、画面中央の1.Install Gradleをクリックします。
[Gradleページ](https://gradle.org/)
INstallation画面に移動するので、releases pageの文字をクリックして、
最新バージョン（2019.07.29時点ではv5.5.1）をダウンロードします。

![Screenshot_2019-07-29 Gradle Releases.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408801/d298f604-fa6f-cdf2-497c-583da0faa409.png)

zip形式でダウンロードされるので、解凍してインストールします。
これで、Gradleも完了！

__インストール時、自分がどこにインストールしたかメモしておきましょう!環境変数の設定で慌てない済みます__ 

環境変数の設定は、この後、改めて行います。

## Android SDKのインストール
Googleが提供しているスマホアプリ開発環境のインストールです。
必要なのは、Android SDKですが、自分はAndroid Stduioを含めてインストールしました。
Android StduioはUIを含んだパッケージ（？）なので、インストール量は重くなりますが、今回のデプロイで必要な設定をUI上でやれるので、便利かなと思っています。
ですが、Android SDK単体のほうが確実にデータ量は少ないので、それ単体でのインストールをしたい方はやってみてください。
自分は
[Android Studio](https://developer.android.com/studio)
で最新版をダウンロード、インストールしました。
また、インストール先は、全角文字やスペースがないパスにしておいたほうがいいかもしれません（ビルドエラーになる可能性があります）

__インストール時、自分がどこにインストールしたかメモしておきましょう!環境変数の設定で慌てない済みます__ 

環境変数の設定は、この後、改めて行います。

## 環境変数の設定

環境変数を設定することで、お互いに関係しあうソフトがお互いのソフトをスムーズに使えるようになります。環境変数を設定しないといちいちユーザーが実行ファイルの場所をそのソフトに教えないといけないので、面倒になります。

環境変数の変更方法はWEB上にごろごろ転がっていますので、ここでは割愛して必要な
変数と値のみを記します。
環境変数にはユーザー変数とシステム環境変数がありますが、今回変更するのは__システム環境変数__です
↓の図のような感じで、新しい環境変数を作ります。ただし、値は実際にインストールした場所のパスを指定してください。
ANDROID_HOME
GRADLE_HOME
JAVA_HOME
![環境変数.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408801/e2112c68-e21f-4349-38a8-865ddd8ce359.png)
また、これらの環境変数をPathという環境変数に組み入れます。
![環境変数＿並び順.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408801/899455cc-e76c-55c4-2bdf-69d5fe475508.png)
なお、JAVA_HOMEは一番上に置くようにするのがいいようです。ほかのJavaアプリより先に参照されるらしいです。自分の場合、一番上にしないと、別にインストールしたJava12がcordovaに認識されてしまいました。

## cordova requirementsで必要環境を確認
コマンドプロンプトでMyAppのフォルダに移動後、
`$cordova requirements`
のコマンドをコマンドプロンプトで入力すると、現在のPCで足りない開発環境を教えてくれます。
既に、Java,Gradle,Android SDKを入れているので、ほとんどは要件を満たしていると思います。Not installedになっているのは、Target deviceくらいのはずです。

![build1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408801/dc7bae1f-8d1f-7c0b-74f1-023ce5d44295.png)

※１：この時点では、Android targetはNot installedになっているかも。この後、解決させます


## SDK managerでの設定・インストール
[Android SDKでの追加インストール](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support)
SDK managerを使って、追加で細かいライブラリ（？）のインストールをしていきます。
> 
    １．Android Platform SDK for your targeted version of Android
    ２．Android SDK build-tools version 19.1.0 or higher
    ３．Android Support Repository (found under the "SDK Tools" tab)

上記の一番目のインストールはアプリをデプロイしたスマホのアンドロイドのバージョンのライブラリを入れるということです。SDK Managerの中のSDK Platformsから、インストールしたいバージョンを選択して、インストールしていきます。「スマホ　アンドロイド　バージョン」でググれば、確認方法は分かります。
この後、Buildという作業をする際には、スマホをPCにつなげます。その時に、必要なバージョンを通知してくれるので、その時にインストールでもいいかも。

![SDK Manager.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408801/d856660d-b99b-8224-762d-c66b2159c943.png)


２，３番目は、SDK Managerの中のSDK Toolsの画面で設定・インストールできます。

![SDK Manager２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408801/472b23c8-1fc0-5666-9829-a16670fc49a9.png)



## Android Targetについて
自分の場合、Android Targetはbuild前は、常にNot installedの状態でした。ネットをググりましたが、有効な手段がなかったです。
しかし、Buildすると、なんらかのAndroid Targetが設定されたので、まずはNot Installedでいきましょう！

## Build
`$cordova build android`
を入力すると、Buildが実行されます。
自分の開発環境では、３０秒ほどかかってBuildが完了しました。
![build2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408801/22837fcf-5013-d9c6-53c2-46b54ffda517.png)

もしかすると、初回のBuildは、Failedするかもしれません。これは、Android TargetがNot installedになっていることが関係しているのか、そのまま再度Buildをしたら、Successしました。

## スマホの認識作業とデプロイ
Noodlを使っている場合は、エミュレーターを使用せずにローカルで動作を確認できているで、ダイレクトに実機にデプロイします。
下記の記事を参考に、一気にデプロイします。
なお、USBデバッグモードにするには、USBケーブルでPCとスマホをつなぐ必要があります。またUSBデバッグ機能をONにするには、特別な操作をスマホでする必要があります。ググれば分かりますのでここで割愛！
> 実機で検証

    Android実機のUSBデバッグ機能をONに
    MacにAndroid実機をUSB接続 (USBケーブルが充電専用だとNGなので注意)
    次のコマンドで接続確認して、表示されればOK $ adb devices
    Cordovaから起動 $ cordova run android
    ビルドを待つ...
    実機でアプリが起動!

参考記事
[Cordovaを使って、Androidの実機実行するまで](https://qiita.com/cognitom/items/3b30284e8d01eaf122b7)

成功すれば、スマホ画面にNoodlで作ったアプリが表示されます。
また、スマホアプリとして、アプリリストに表示されます。（アイコンはCordovaのアイコンです）

## おわりに
記事として書いてみると、かなり手順が多いんだなとしみじみ感じました汗
一回、やってしまえば次からは不要な作業ですが、何かトラブったときに、トラブルシューティングできるようにこの辺の環境構築はきちんと自分でしておきたいですね。

なにか、誤記、追記要望あればご連絡くださいー