NativeScriptの環境構築をやってみたよ
NativeScriptの公式サイトにあるセットアップをしてみました。 どうやら二種類のセットアップ方法があるようです。
NativeScript
Quick setup
http://docs.nativescript.org/start/quick-setup
- モバイル開発未経験者向けのセットアップ方法
- インストール方法が簡略化されている模様
Advanced setup
- Mac http://docs.nativescript.org/start/ns-setup-os-x
- Windows http://docs.nativescript.org/start/ns-setup-win
モバイル開発経験者向け
- 色々とマニュアルでインストールしていくタイプ
私はAndroid開発経験があり、MacユーザーなのでAdvanced setup
のMac版を選択しました。
基本的には公式サイトの手順通りに進めていきます。
1. HomeBrewのインストール
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2. Node.jsをインストール
Node.jsの4.x, 6.x, 7.xのどれかの最新版かつstable版をインストールしてくださいとのことです。 NativeScriptの公式サイトでは、Node.js 6.xを使うことを推奨としているそうですが、すでにNode.js 7.4.0が入っていたのでそのまますることにしました。 HomeBrewでインストールします。
brew install homebrew/versions/node6-lts
brew install node
3. iOSの開発環境をセットアップしていきます
3-1. Xcodeのインストール
AppStoreから最新版を落として来ましょう。
3-2. Command Line Toolsのインストール
https://developer.apple.com/downloads/index.action この辺から自分のOSのバージョンとXcodeのバージョンにマッチするCommand Line Toolsをインストールしてください。
3-3. 色々gem等をインストール
gem install xcodeproj gem install cocoapods
Xcode7.3と古いcocoapods(0.39.0以前)を使っている人はこちらも必ずインストールしてくださいとのことです。
brew install xcproj
4. Androidの開発環境をセットアップしていきます
HomeBrewを使ってAndroid SDKをセットアップしている箇所は都合上、AndroidStudioをインストールするような形で代用させていただきました。
4-1. JDK8をインストール
http://www.oracle.com/technetwork/java/javase/downloads/index.html ここから最新版をインストールしてください。
インストールが終わったら、JAVA_HOME
を設定してあげましょう。
export JAVA_HOME=/path/to/your_java
4-2. Android SDKをインストール
https://developer.android.com/studio/index.html こちらから最新版のAndroidStudioをダウンロードしましょう。 インストール方法や設定が日本語で書かれているので、安心です。
4-3. ANDROID_HOMEを設定
インストールが終わったら、ANDROID_HOME
を設定してあげましょう。
export ANDROID_HOME=/path/to/android-sdk
4-4. Android SDKをアップデートする
結構時間かかるのでお茶でも飲んで待ちましょう。
android update sdk --filter tools,platform-tools,android-23,build-tools-23.0.3,extra-android-m2repository,extra-google-m2repository,extra-android-support --all --no-ui
5. いよいよNativeScript CLIのインストール
なんか長かった気がする… こちらのコマンドでインストールしましょう これも結構時間がかかります。コーヒーでも飲んで待ちましょう。
npm i -g nativescript
終わったら
tns doctor
と打って、問題がないか確認しましょう!
No issues were detected.
と表示されれば晴れてオッケーです。
以上です。