WebStormでローカルに保存したXMLスキーマやDTDを参照させる
id:masanobuimai さんがツイートしてたのでAIRのXMLスキーマを登録してみました。
プロジェクトのデフォルト設定にしておきたいので、プロジェクト開いてない状態で設定開いてTemplate Project Settings→Schemas and DTDsと選択
+をクリックして
URIを入力して、Pathには、AIR SDKにあるXMLスキーマを指定します。
ちなみにAIR3.1のDescriptorにしてみました。
ダウンロードしてきたSDKでも、Adobe Flash Builderに含まれているものの場合でも、SDKディレクトリ内のtemplates/air下にあります。
URI登録されてないよって怒られてignoreにしてたんですが、これでIgnoreにしなくてすみますね。
追記:masanobuimaiさんからコメントもらいました。ありがとうございます。
ignoreする？と一緒にfetchするとローカルから登録する？が候補にあがったと思うけど。
その時にfetchをやったのかどうか覚えてないので、登録されたXMLスキーマを外して確認してみました。
Template Project Settings→Schemas and DTDsで登録したスキーマのProjectにチェックを入れて・・
項目にありますね。fetchしてみます。
errorになりました。
やってみて思い出しましたが、fetchがerrorになったので諦めてignoreにしたのでした。
ローカルから登録は、項目名がManualy Setup External Resourceだったので、勝手に手打ちするのかなと思い込み、面倒くさいとスルーしました。
記憶力が大分鶏頭。
WebStorm:追加した独自のコード補完候補をプロジェクトで使用可能にする
これの続きです。
追記:カスタムのコード補完候補もプロジェクトのデフォルトに設定出来るやり方を下に追加しました。thanks id:masanobuimai !
前回カスタムのコード補完候補を登録して使えるようにしたつもりだったのですが、実は勘違いしていて、それだけでは、自分の意図したようには使えてなかったので補足。
何を勘違いしていたかというと、勝手に全てのプロジェクトで補完候補が使用可能になるのかと思っていました。
が、実際にはちゃんと明示的にセットしてやらないと補完候補に出ないです。
こんな感じに各プロジェクトのProject Settings→JavaScript Libraries→Usage Scopeでプロジェクト全体に追加するなり、各ファイルでセットしてやります。
Scopeとなっているとおり、プロジェクト、ディレクトリ、ファイル単位でセット出来るようになっています。
カスタムの補完候補は、新しくプロジェクトを作成してもセットされていないので、プロジェクト作成時に最初にやっておくといいでしょう。
なぜ勘違いしてたかというとProject SettingsのJavaScript Librariesで見たときに、カスタムで追加したやつはTypeがGlobalとかいうのになっていたので、全部のプロジェクトで勝手に使えるようになると思い込んじゃってました。Globalってそういう意味じゃなかったのか。
ちなみに登録した時に作業してたプロジェクトでは、カスタムの補完を作成して登録した後、コード補完したい各ファイルで右クリックのコンテキストメニューから、候補をとりあえず追加してました。
これは、先ほどの設定画面でいうと、一つ一つのファイルに個別に使う補完候補を追加しているのと同じ作業になります。
細かく制御は出来るけど自前でセットしてねというのがIntelliJっぽいというやつですかね。
追記:masanobuimaiさんにプロジェクトのデフォルト設定の仕方を教えてもらいました。
コメントからの引用
WebStormのSettingsがどんなかちゃんとは知らないんだけど、IntelliJはプロジェクト開いてない状態でSettings設定するとProjectのデフォルト設定ができるよ。WebStormも同じ事できない？
プロジェクト開いてない状態で設定開いたらTemplate Project Settingsに。ここでJavaScript Libraries→Usage Scopeと開いて設定してやればデフォルト設定出来ます。自動で出来ないとかいってすんません。
AIR(HTML+JavaScript)アプリケーションをQUnitでテストしてみる
http://d.hatena.ne.jp/xibbar/20120327#1332854876
本日の朝活でもJavaScriptというかAIRアプリケーションを書いてました。
朝活参加者は5名。
皆様お疲れ様でした。
で、HTMLベースのAIRアプリケーション開発でテストを実行する方法について。
他にもっと良い方法があったら教えてください。
ちなみにActionScriptベースのAIRなら、FlexUnit使えばいいです。
前提
AIR SDK部分、例えばファイル読み込み、書き込み等がテスト出来ないといけないので、AIRランタイム上での動作環境でないといけない。
AIRのHTMLレンダリングエンジンはWebKit相当なので、クロスブラウザは考慮する必要が無い。
JavaScriptなのでJavaScript用のテストツールがいい。
テスト実行してもアプリの環境に影響がないように、テスト環境は切り分けたい。
検討
1.JsTestDriver
クロスブラウザ対応する必要無いのでパス
2.JsUnit
QUnitの方が主流なようなので?パス
3.FlexUnit
AIRのHTML環境では、ActionScriptのライブラリを読み込めるようにscriptタグが拡張されています。
<script src="lib/myClasses.swf" type="application/x-shockwave-flash"></script>
これを利用すればFlexUnitも使えますが、HTMLベースのAIRの場合、わざわざやるメリットがないかと。
よって今回はパス。
4.QUnit
最近の主流はやはりこれでしょうか。今回はこれを採用します。
QUnitをダウンロード
以下からダウンロードします。
http://docs.jquery.com/Downloading_jQuery
CDNで外部から読み込んでも可。
AIRアプリケーションを準備
実際にやってみます。
ローカルファイルを読み込み、その内容をdivタグに表示するというケースを例にとってみます。
動作イメージは以下の通り。
ボタンをクリックすると
読み込んだファイルの中身を表示
テスト対象のAIRアプリケーションをまずは普通に作成します。
メインのHTML,アプリケーション記述ファイル,AIRAliases.jsを適当に用意。
<input type="button" id="button" value="Read a local file using AIR APIs"> <div id="divE"></div>
メインのHTMLにファイル読み込み用のボタンと、表示用のdviエレメントを用意。
追記:ロジックをテストするだけだったので、ボタンとdivエレメントは、今回のテストには関係ない部分でした。
<script> var divE=document.getElementById('divE'); document.getElementById("button").addEventListener('click',function(e){ var content=readLocalFile(); divE.innerHTML=content; }); </script>
アプリケーション自体も動かすならメインのHTMLにこんな感じで追加してください。
ダウンロードしたQUnitを忘れずにプロジェクト内に突っ込んでおきます。
テスト環境を用意
今度はテストを用意します。
テスト用のHTMLファイルと、そのアプリケーション記述ファイルを作成します。
先ほど作成したHTMLとアプリケーション記述ファイル名は、上にTestを付けたものにしてみました。
<link rel="stylesheet" href="lib/qunit/qunit.css"/> <script src="lib/qunit/qunit.js"></script>
テスト用のHTMLファイルで、QUnitのJavaScriptとCSSを読み込んでおきます。
あ、読み込み対象のファイルとロジックを記述するJavaScriptファイルを忘れていました。
追加します。LocalFile.txtとApplication.jsとしました。
ロジックを記述するjsの中身はまだ空でいいです。
読み込まれるファイルの中は適当に用意して下さい。
テストを記述するJavaScriptファイルを用意します。
<script type="text/javascript" src="lib/AIRAliases.js"></script> <script type="text/javascript" src="lib/Application.js"></script> <script type="text/javascript" src="test/TestApplication.js"></script> <div id="qunit"></div> </body>
テスト用のHTMLファイルに、AIRAliases.js,ロジックファイル、テスト記述ファイルを読み込みます。また、テスト結果表示用エレメントも用意しておきます。
テストコードを書いてみる
準備が整ったのでtestApplication.jsにテストを記述していきます。
test('Local file read',function(){ equal(readLocalFile(),'This is the content of the "LocalFile.txt"',"read complete"); });
readLocalFileというファイルの中身をStringとして取得する関数を読んで、実際に取得出来ているかという内容にしました。
adl TestAIRSample.xml
adlで起動してみます
readLocalFileという関数はまだ実装していないので、当然失敗します。
function readLocalFile(){ var f = air.File.applicationDirectory.resolvePath("LocalFile.txt"); var fs = new air.FileStream(); fs.open(f, air.FileMode.READ); var content = fs.readUTFBytes(fs.bytesAvailable); fs.close(); return content; }
Application.jsにrealLocalFileを実装します。
adlで実行してみると、今度は成功しています。
まとめ
HTMLベースのAIRでのテストは、殆ど、というか全くといって良いほどWeb上に情報がなかったので、このような感じにしてみました。
ポイントは同一プロジェクト内にテストアプリケーションを置くことです。
このようにすると、アプリケーションのロジックをテスト側から簡単に呼ぶことができます。
今回の例では出てきていませんが、このようにするとアプリケーションの記憶領域*1はアプリケーションとテストで別々に用意されますので、記憶領域を使って読み書きするような場合、テスト環境がアプリケーション環境を汚さずに済みます。
又、アプリケーションが大規模になってきた場合には、テスト自体を分割して、複数のテストアプリケーションを用意すれば、各テスト環境が別々になりますので、setupやteadownの必要性が減ります。
悪くない手法ではないかなと考えています。
JavaScript+HTMLなAdobe AIRの開発環境あれこれ
HTML+JavaScriptで作るAdobe AIRアプリを開発する環境について個人的にどれがいいのか今時点の考察。
viキーバインドが大前提という但し書き付き。
他、欲しい機能として、シンタックスハイライト、コード補完、AIR Debug Launcher（ADL）の起動あたり。
ActionScriptベースのAIRだと、自分的にはFlash Builder4.6 Premium+Vrapper+SourceMate 3.0で安定なんですが。
1.WebStorm+IdeaVIM+AIR SDK
別途SDKを用意して、JavaScript IDEとして最強の呼び声が高いWebStormで開発。
AIRプロジェクト独自のサポートは用意されていないが、adlを動かしたり、補完も用意出来たので良い感じ。
欲しいなと思った部分は一通りそろった感じ。
何よりIdeaVIMがNetBeansのjViより素直でいい。
後日本語化されてないのは、個人的には苦じゃない。
ヘルプも丁寧だし。
prototype.jsなどを開いたときに、コード解析？で一部重いファイルがあるのだけが残念な所か。同じくらいの規模であるjQueryを開いてもさほどでないので、特定のコーディングスタイルで書かれたjsファイルと相性が悪い予感。
WebStorm自体の機能も好感触なので、今時点では一番ベターな感じ。
2.Vim+AIR SDK
SDKを用意してエディタは当然Vimで、のスタイル。
各種プラグインをインストールしたり、オレオレプラグインとか、補完用辞書作成等々作り込めば、オレの考えた最強の開発環境が作成可能。
最近環境構築に疲れてしまいました。もう環境オタクではないのでしょう。
3.NetBeans+jVi+AIR SDK
前にこんな記事を書いているのですが、ちょっと前まではNetBeansで書いてました。adlも無理矢理使えます。
しかしjViプラグインの使い勝手が微妙に気に入らない部分がありまして。
NetBeans全体のインデントとjViでのインデントの扱いとかビジュアルモードの扱いとか。
後、AIR SDKの補完がAIRAliases.js止まりなのがペケ。
悪くないのですが、WebStormに比べると今一歩。
4.Titanium Studio+Vrapper+AIR SDK
かつてAptana Studio2までだとAIRプラグインがサポートされていたのですが、AptanaがAppcelerator社に買収され、AIRプラグインはAptana Studio3からサポートされなくなってしまいました。
Appcelerator社のTitaniumと技術的に思いっきり競合するので当然といえば当然なのですが。
閑話休題、後継にあたるTitanium StudioあるいはAptana Studio 3です。
JavaScript,HTML,CSSの開発環境として、中々悪くないです。GCookpadはこれで書いてました。
ただ、adl動かせるのか分かりませんでした。あとAIR SDKの補完はやっぱりペケなので。
5.Dreamweaver+Adobe AIR 拡張機能
Dreamweaver 用 Adobe AIR 拡張機能をインストールして使う。
Adobeの各種ソフトの中でHTML+JavaScriptなAIRアプリを作るならまずこの環境。
viキーバインドが使えないので終了。
AIR(HTML+JavaScript)アプリを作るならAdobeのプロダクトの中でデファクトな筈なのに、拡張機能をダウンロードする場所を見ると隅に追いやられている感じなんですけど、どうなんでしょうこれ。
PhoneGap推しという事なんですかね？
まとめ
AIR(HTML+JavaScript)開発環境としては、個人的にWebStormが今時点でベター。
AIR(HTML+JavaScript)に限らず色々な物を開発するときIntelliJ IDEA ファミリーが、現時点ではベターではないかという気がしています。
もちろん労を厭わなければVimが一番とは今でも思ってるけど、前ほどそういったことに力をかける気分ではなくなりました。自分の中で優先順位が変わったというか。
自分的に開発している物からすると、 RubyMineとWebStormがあればいいかなと。
だったら全部入りのIntelliJ IDEA ultimateあればいいんじゃという話もあるかとは思いますが、個人的には各開発環境はそれぞれの環境で閉じていた方が好み。
あと、そもそも論としてAdobe AIR、特にHTML,JavaScriptベースという技術自体がAdobe的に位置づけがアレな感じが(ry
WebStormでAIR SDK独自のコード補完候補を追加する
http://efcl.info/2012/0226/res3015/
http://efcl.info/2010/1203/res2152/
上記に書いている通りでOK。
最終的にはid:masanobuimaiさんの言うとおりになりました。
@katahirado よーわからんけど，JavaScriptライブラリ登録してみた？ URL URL
2012-03-23 18:56:06 via SOICHA to @katahirado
AIRのSDKはバイナリで、WebStormで読み込む形式にはなっていないため、JavaScriptで補完用に新たに定義を書いて追加していきました。
基本方針
- ドキュメントは公式リファレンスを参照するので、補完の為のJSDocでは詳細にドキュメントを記載しない
- 補完の為に必要な最低限のタグだけ入れる
- 使用する機会があったものだけ追加していき、最初から全部用意したりしない
追加作業
まずWebStormで空プロジェクトを作成。JavaScriptファイルを追加。
でもってそのJavaScriptファイルをProject SettingsにあるJavaScript Librariesに登録。Addをクリックして・・
適当な名前を付けて、AttachをクリックしてJavaScriptファイルを追加。
ちなみにJavaScriptファイルの中身はこんな感じにしました(一部)。
/** * @type air.File */ air.File.applicationDirectory= new air.File('applicationDirPath'); /** * @type air.File */ air.File.applicationStorageDirectory= new air.File('storageDirPath'); /** * @param {String} path * @return {air.File} */ air.File.prototype.resolvePath=function(path){ return new air.File(path); }; /** * @type Boolean */ air.File.exists= true; /** * @param {air.File} newLocation * @param {Boolean} overrite */ air.File.copyTo=function(newLocation,overrite) {};
後は必要になった都度JavaScriptファイルに書き足していけばOK
どうにか出来ないかと思っていた問題はこれで一応解消されました。
WebStormの外部ツールにAIR Debug Launcher（ADL）を登録してみた
最近、WebStormでJavaScriptベースのAIRアプリ(not ActionScript,Flex)を書いています。
で、2つほどどうにか出来ないかと思っている問題があり、今日一つ解決出来ました。
AIR SDKのメソッド、プロパティを補完してくれない
WebStormはJavaScript用IDEですので、通常のJavaScript,HTML,CSSまでは補完してくれます。
が、当然ながら、AIR SDKに含まれるメソッド、プロパティは補完してくれません。
プロジェクトには大体AIRAliases.jsという、AIR SDK内の各クラス名をショートカットして呼べるファイルを置くので、クラス名までは補完してくれるのですが。
これはそこまで不便という訳ではないので、まあ目を瞑っています。
SDK自体がswfやswcだし。
追記:出来るかどうかちょっと調べてみました。Project SettingsにあるJavaScript LibrariesにJavaScriptのコード書いて追加すればいいみたいですけど・・。うーむ。3/24:これを採用しました。
さらに追記:masanobuimaiさんから色々リプライもらったので、IntelliJ IDEA Ultimate Editionも試してみました。
確かにAIRとかFlexのプロジェクトを扱えるんですけど、残念ながら基本ActionScriptベースのプロジェクトしか駄目でした。
プロジェクト作成時にFlexのとこにrequire JavaScript,CSSって書いてあったけど、プロジェクト内でのJavaScript,CSSサポートって事でした。微妙に届きませんでした。
HTML,CSS,JavaScriptでAIR作る場合はやっぱりDreamweaverが主流なんでしょうかね。Dreamweaverはviのキーバインドが使えないので・・。
AIR Debug Launcher（ADL）を呼べない
AIRアプリ開発時は通常、パッケージ化しないでAIR Debug Launcher（ADL）というものを使ってアプリを起動させています。
当然AIRのプロジェクトとして認識してくれない訳なので、WebStormさんはこれを呼べないわけです。
で、id:masanobuimaiさんがそういえばIntelliJ IDEAで外部ツールを登録する方法を書いていたなというのを唐突に思いだしました。
登録してみた
WebStorm -> Preferences -> External Tools でこんな具合にadlを登録。
ショートカットキーも登録。Comand+Rが空いていたので当てたけど変更するかも。
3/28追記:結局F10に変更しました
アプリケーション記述ファイルを開いてComand+Rを押せばOK。
アプリケーション記述ファイル開くか、コンテキストメニューからというのがいまいちな感じですが、いちいちターミナルからコマンド叩くのに比べたら大分楽になりました。
