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

目的

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

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

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

Noodl（日本語紹介ページ）

環境

• OS:windows10
• メモリ:16GB
• CPU:i3-8100

デプロイとは

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

デプロイ手順

noodlのdeploy方法
cordovaのAndroid Platform Guide
を参考にやっていきます。途中難儀したところ、あるのでその辺をフォローできればと思います。

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を選択します。

cordovaの実行準備２

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

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

java8のインストール

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

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

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

Gradleのインストール

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

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

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

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

Android SDKのインストール

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

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

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

環境変数の設定

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

環境変数の変更方法はWEB上にごろごろ転がっていますので、ここでは割愛して必要な
変数と値のみを記します。
環境変数にはユーザー変数とシステム環境変数がありますが、今回変更するのはシステム環境変数です
↓の図のような感じで、新しい環境変数を作ります。ただし、値は実際にインストールした場所のパスを指定してください。
ANDROID_HOME
GRADLE_HOME
JAVA_HOME

また、これらの環境変数をPathという環境変数に組み入れます。

なお、JAVA_HOMEは一番上に置くようにするのがいいようです。ほかのJavaアプリより先に参照されるらしいです。自分の場合、一番上にしないと、別にインストールしたJava12がcordovaに認識されてしまいました。

cordova requirementsで必要環境を確認

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

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

SDK managerでの設定・インストール

Android SDKでの追加インストール
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の中のSDK Toolsの画面で設定・インストールできます。

Android Targetについて

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

Build

$cordova build android
を入力すると、Buildが実行されます。
自分の開発環境では、３０秒ほどかかってBuildが完了しました。

もしかすると、初回の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の実機実行するまで

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

おわりに

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

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