読者です 読者をやめる 読者になる 読者になる

Umi Uyuraのブログ

Titaniumを使ったスマートフォンアプリ開発を中心に、プログラミング関連の作業ログ。

Appcelerator CLIと、Appcelerator Studioを(無理やり)インストールした

ようやくAppcelerator CLIとAppcelerator Studioをインストールしました。

が、Appcelerator Studioについては、自分の環境との相性もあって、ちょっとイレギュラーな導入のしかたになってしまいました。

前提となる環境と導入方針

Titanium CLIとStudio

私はこれまでもTitaniumで開発をしていたので、Appcelerator CLI/Studioを入れようとしているMac上には、すでにTitanium CLISDKがインストールされている状態です。

Titanium Studioに関しては、いつのころからか私の環境ではうまく動かなくなってしまったのと、そもそもEmacsとTitanium CLIで開発をしていたこともあり、あまり使っていませんでした。

そのため、今回もAppcelerator CLIだけ入れれば良いかな、と思ってはいたのですが、新しいAppcelerator Studioは機能強化されているらしいので、とりあえず触ってみておこうと、こちらも入れてみることにしました。

Node.jsとバージョン切り替えツールndenv(anyenv)

Appcelerator Platformのツール群は、Node.jsをベースにしていますので、これも導入済みです。(私の環境は、v0.10.38が入っていました)

Node.js自体は公式サイトから配布されているインストーラを使うのが基本的ですが、Node.jsはアップデートが頻繁にあることもあり、Node.js自体のバージョンを複数導入して簡単に切り替えられるように、ndenvというツールを使っています。

より正確には、rbenvをはじめ**env系をまとめて扱えるanyenvを導入して、その上でndenvを導入しています。

実はTitanium Studioがうまく動かなかった要因は、このndenvベースのNode.js環境だからという可能性が大いにあったのですが、先に書いたとおり、Studio自体をあまり使っていないこともあり、それほど深追いしていませんでした。

導入方針

上記の通り、Titanium Studio時代にNode.jsの環境の作り方によって問題が出ることは把握していたので、まずはAppcelerator CLIを先にインストールして、その後でAppcelerator Studioをインストールすることにしました。

発生した問題

Appcelerator CLI自体は問題なくインストールできたのですが、Appcelerator Studioのインストールで、大きく2つの問題が発生しました。

  • Appcelerator Studioのインストーラが、ndenvで導入しているNode.jsを認識してくれない
  • Appcelerator Studioが、ndenvで導入しているNode.jsを認識してくれない

Appcelerator Studioのインストーラが、ndenvで導入しているNode.jsを認識してくれない

Appcelerator Studioのインストール時、途中でPC内にNode.jsとAppcelerator CLIがあるかを確認されるのですが、ndenvで導入しているにも関わらず、インストールが必要と出てしまいました。

f:id:umi-uyura:20150608213935p:plain

Appcelerator Studioが、ndenvで導入しているNode.jsを認識してくれない

先の対処については後述しますが、なんとか誤魔化しつつAppcelerator Studioをインストールしたものの、今度は起動時にAppcelerator CLIとCode Analyzerが入っていないと言われてしまいました。

Code Analyzerは3.0から導入されたtitanium-code-processorのことのようなので、これもすでにインストール済みなのですが…。

f:id:umi-uyura:20150608213952p:plain

さらに、構わずインストールしようとしてもエラーになります。

f:id:umi-uyura:20150608214004p:plain

これは、以前Titanium Studioで発生していた問題と同じでした。

問題の要因と対処

発生した問題は、どちらもNode.jsがあるPATHを認識できていないのだと推測しました。

自分が普段使っているターミナルなどの環境では、 .bashrcなどでPATHを設定していますが、MacはFinderやLaunchpadから実行したアプリの環境変数はそれらが使われないようなので、そのあたりで不整合が発生しているようです。

シンボリックリンクを張る

そこで色々と試したところ、どうやらNode.jsの標準的なインストール先となる /usr/local/bin/node をみてくれるようであることはわかってきたので、必要なものをそこへシンボリックリンクを張ることで対処できないかと考えました。

結果的には、以下のシンボリックリンクを用意することで、インストーラとStudioに認識させることができました。

※参照先のバージョンは、 $ ndenv global で指定しているバージョン

シンボリックリンク 参照先
/usr/local/bin/node $HOME/.anyenv/envs/ndenv/versions/v0.10.38/bin/node
/usr/local/bin/appc $HOME/.anyenv/envs/ndenv/versions/v0.10.38/bin/appc
/usr/local/bin/appcelerator $HOME/.anyenv/envs/ndenv/versions/v0.10.38/bin/appcelerator
/usr/local/bin/titanium-code-processor $HOME/.anyenv/envs/ndenv/versions/v0.10.38/bin/titanium-code-processor
/usr/local/lib/node_modules/npm $HOME/.anyenv/envs/ndenv/versions/v0.10.38/lib/node_modules/npm
/usr/local/lib/node_modules/appcelerator $HOME/.anyenv/envs/ndenv/versions/v0.10.38/lib/node_modules/appcelerator
/usr/local/lib/node_modules/titanium-code-processor $HOME/.anyenv/envs/ndenv/versions/v0.10.38/lib/node_modules/titanium-code-processor

Appcelerator Studioの起動方法

実は、シンボリックリンクを貼っただけでは、インストール自体はできたものの、Appcelerator StudioはNode.js類を認識してくれませんでした。

Launchpadから起動した場合、 node コマンド自体は $HOME/.anyenv/envs/ndenv/shims/node として認識してくれます。

f:id:umi-uyura:20150608214018p:plain

これ自体はndenv環境としては問題ないのですが、同じく内部で npm コマンドを $HOME/.anyenv/envs/ndenv/shims/npm として参照していることが、先のStudio上でCLIやCode Analyzerをインストールする際にエラーとなる原因のようでした。

で、どうしたかというと、なぜかターミナルから open -a AppceleratorStudio.app で実行した場合は、Detected Pathが /usr/local/bin/node になり、この場合は既存のCLIやCode Analyzerを認識してくれる、ということがわかりました。

なんだかよくわからないのですが、とりあえず私の環境でAppcelerator Studioを使う場合は、ターミナルから起動することにしました。

以前やったシェルスクリプトをアプリ化する方法で対処できないかと思ったのですが、結局Launchpadから起動したケースと同じ動きになってしまったため、断念しています。

今回の導入手順

これらを踏まえつつ、今回私の環境で実施したインストール手順は、以下のような感じです。

Appcelerator CLIのインストール

Appcelerator CLI(※要ログイン) の手順に従います。

Node.jsはすでに入っていましたので、Appcelerator CLIをインストールします。

$ npm install appcelerator -g

Appcelerator CLIは、 appcelerator もしくは appc コマンドで実行します。

CLIインストール後、最初に一度セットアップを実行するそうです。

$ appc setup

セットアップを実行すると、必要なモジュールのダウンロード後、認証が求められました。

認証はアカウント登録時と同様に二段階認証で、登録しているメールアドレスに認証コードが送られてくるので、それも入力が必要です。

また、その後 ? Do you plan on developing Titanium apps? [Y/n] という質問が出てきたので、当然Titaniumアプリの開発をするので YES と回答すると、4.0.0.GAのSDKのダウンロードが始まります。

SDKのインストールが終わると、CLIが使えるようになりました。

$ appc -v
4.0.1

シンボリックリンクの生成

Appcelerator Studioのインストールの前に、先に書いたシンボリックリンクを生成しておきます。

いちおう、こんな感じのシェルスクリプトを書いてみました。

ndenv環境でAppcelerator Studioをインストール/起動できるようにシンボリックリ ...

ndenvを使っている場合、 $ ndenv global で現在のグローバル指定されているNode.jsのバージョン、 $ ndnev prefix <バージョン> で、そのバージョンのNode.js環境へのパスが取れるので、それを組み合わせてシンボリックリンクを張るようにしたものです。

例えば appc-ndenv.sh といった名前にして、実行権限を付与しておいて、

$ ./appc-ndenv.sh

で、各シンボリックリンクを生成、

$ ./appc-ndenv.sh reset

で、各シンボリックリンクを削除します。

なお、 /usr/local/lib に書き込む際にsudoを使っているので、パスワードを求められます。

Appcelerator Studioのインストール

Getting started with Appcelerator Studio (※要ログイン) から、Mac版の64-bit Installerをダウンロードします。

ダウンロードした Appcelerator_Studio.dmg を開いて、 Appcelerator Studio.pkg を実行します。

f:id:umi-uyura:20150608214112p:plain

基本的には次へ次へで進めます。

PrerequisitesでNode.jsとAppc CLIのインストールを求められなければ成功!

Appcelerator Studioの起動

f:id:umi-uyura:20150608214126p:plain

Launchpadにもアイコンが出来ましたが、先に書いたとおり、なぜかここから起動するとうまくいかないので、ターミナルから起動します。

$ open -a AppceleratorStudio.app

これで起動した後、追加のインストールが求められなければ、これも成功!

とりあえず、上記のコマンドはaliasに登録しておきました。

サンプルプロジェクトのビルド

念のため、サンプルプロジェクトをひとつビルドしてみることにしました。

Studio起動後に表示される画面から、サンプルプロジェクトをひとつインポートしてみました。

f:id:umi-uyura:20150608214141p:plain

インポートしたプロジェクトをビルドして実行してみたところ、

iOS

f:id:umi-uyura:20150608214156p:plain

Android

f:id:umi-uyura:20150608214214p:plain

動きました!

まとめ

標準的なNode.jsのインストールをしている、もしくはそもそもNode.jsが入っていない環境の人などは、こういう問題は出ないと思います。。。

他で問題が出てしまうかもしれませんが、しばらくはこの環境でAppcelerator Studioを触ってみようと思います。

前回の補足

umi-uyura.hatenablog.com

前回管理画面を眺めたときに、旧管理画面同様アプリの削除機能が見当たらないと書いていたのですが、今回デモアプリを追加したところ、表示されました。

これで、旧管理画面のようにサンプルアプリで溢れかえることはなさそうです。