Subscribed unsubscribe Subscribe Subscribe

Seasons.NET

ちょっとした技術ブログです

TitaniumのIDEとしてWebStormを使う(+補完機能の追加方法の紹介)

Titanium

Titanium Mobileみなさん使ってますか?
ちょっとしたツールを作る時やwebサービスとの連携アプリを
作る時はむちゃくちゃ便利で、現在私も使いまくってます。


Titanium Mobileアプリを作る際に一緒にダウンロードする
Titanium Studioは、eclipseベースで拡張されたIDEなのですが、
補完機能がちょっといまいち。。。
シンタックスカラーもデフォルトだとシンプル過ぎるんですよね。


なので、私はどうしているかというと、
JetBrains社が開発販売しているThe best JavaScript IDE with HTML Editor for Web development :: JetBrains WebStormというIDEを使っています。
人によっては、IntelliJを使っている方もいらっしゃるかもしれません。


IntelliJ含め、WebStormは、
f:id:Seasons:20111023233441p:image
OpenSource版もあるみたいでコミッターなどは
是非申請して無償で使うのもありでしょう。
IntelliJは、少々高めなので安く使いたい場合は、
WebStormを購入されることをお勧めします(最初の30日は無償で利用可能)。
JavaScriptPHPをメインで使われる方)

【追記】PHPを使いたい方は、PHPStormをオススメします。JavaScriptのエデェットも可能です。

さて、本題に入りますが、このIDEは、とにかくコード補完やリファクタリング
機能が素晴らしく、例えば、変数の名前変更も一発で行う事ができます。
また、利用されている変数や関数の場所を一覧で表示したり、
コードの場所をブックマークしておいて、ジャンプしたり。
クラス構造一覧を眺めて”キャッハ、うふふ”したり。


でも1つ難点がありました。
Titaniumのコード補完ができない!!!!
コレに関しては、Titanium自体に慣れてくると、Titanium Docを開きながら
エディットすることが多いので特に気にならなかったのですが、
でもやっぱり気になる.....
と言うわけでそのまま放置していたわけですが...
こんな記事を発見したので、まとめておきましょう。
(ちなみに今回は、WebStorm上での話となります)


Appcelerator Titanium JavaScript Code Completion in IntelliJ « Navin Peiris
→IntelliJでTitaniumの補完機能を追加する方法




1)Titanium Mobileコード補完用のファイルをダウンロード
titanium-mobile-1.7.3.js GitHubからjsファイルをダウンロード


2)Preference->JavaScript Librariesの設定
ダウンロードしたJSをWebStormでJavaScript Libraryとして追加する
f:id:Seasons:20111023233232p:image
f:id:Seasons:20111023233425p:image


3)Preference->JavaScript Libraries->Usage Scopeの設定
f:id:Seasons:20111023233441p:image


あとは、念のためWebStormを再起動。
Titaniumのコードを入力するとコードが補完されます!
ビルドは、Titanium Studioを使っています。
この辺は、コマンドラインでビルドする環境など構築しても良いかもですね。