wakwak3125's blog

年に数回更新する予定のブログ。 AndroidとかKotlinとかJavaとか。

NativeScriptの環境構築をやってみたよ

NativeScriptの公式サイトにあるセットアップをしてみました。 どうやら二種類のセットアップ方法があるようです。

NativeScript

www.nativescript.org

Quick setup

http://docs.nativescript.org/start/quick-setup

  • バイル開発未経験者向けのセットアップ方法
  • インストール方法が簡略化されている模様

Advanced setup

私はAndroid開発経験があり、MacユーザーなのでAdvanced setupMac版を選択しました。 基本的には公式サイトの手順通りに進めていきます。

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. と表示されれば晴れてオッケーです。

以上です。