廻る技術の覗き穴スマートフォン用の表示で見る廻る技術の覗き穴この広告は、90日以上更新していないブログに表示しています。2012の15日目の記事です。実は先日転職をして、12月からJava/JavaScriptをやってる会社で働いています。IDEAを使いたいよね。Touchアプリの開発を始める方法を紹介したいと思います。IDEAとは、多言語に対応した統合開発環境(IDE)です。*2JavaScriptでの開発にはEmacsやvimを使っている人が多いとは思いますが、統合開発環境には補完機能、デバッグ機能、バージョン管理機能との連携、ブックマーク機能などなど便利な機能がたくさん用意されているので、一度試してみると良いのではないでしょうか。開発環境さて、まずは開発環境を構築しましょう。12.04を使いました。利用ソフトウェアは下記の通りです。Cmd、nginxのインストールを行います。Ubuntuでのnginxのインストールは下記のコマンドで行います。nginx編集するnginxの設定ファイルのパスはMacとは異なって以下にあります。IDEAのインストールを行います。JetBrainsのページからインストーラをダウンロードして実行します。IDEAにはnginxプラグインもあるので、必要であればインストールします。Cmdを使ってプロジェクトのひな形を生成します。Touchのライブラリのパス(ここでは~/apps/sencha-touch/としました)に移動して、下記のコマンドを実行します。../adventnginxを起動して、ブラウザからアプリのページが見えることを確認してください。Project...を選択します。Moduleを選択します。locationには、プロジェクトを保存するパスを指定します。好きなディレクトリを指定してください。Cmdのコマンドで生成したファイルのパスを指定します。以上でプロジェクトの作成は完了です。それではさっそく、コードを書いてみましょう。IDEAの最大の魅力はやはり何といっても優秀なコード補完機能。関数の引数や戻り値の型を表示してくれるのはもちろん、どのブラウザに対応しているのか、どのJSファイルで定義されているのかといった情報まで分かります。CamelCaseの頭文字での補完機能なども使えて非常に便利です。(例えば、getHogeBarという名前の関数であればghbと入力すると補完してくれます)JavaScriptだけではなく、HTMLやCSSでも補完機能は使えます。関数宣言へのジャンプや、リファクタリングなどの機能も充実しています。IDEAでは内部的にJavaScriptのコードを解析しているらしいので、静的型付け言語と変わらないくらいコーディングのサポートをしてくれます。デバッグ続いてアプリのデバッグ機能を使ってみましょう。Configurations...を開きます。DebuggingのRemoteを選択します。URLにアプリが起動しているアドレス(例:http://localhost:3333/advent)を入力し、Debugボタンを押します。ブラウザは好みのものを指定します。ここではFirefoxを使います。デバッグを行った場合、下記のようなFirefoxの画面が表示されると思うので、プラグインのインストールを行ってください。エディタの左側の領域をクリックすると、ブレイクポイントを設定することができます。アプリの実行を一時停止して変数の値を見たり変更したり、ステップ実行したりすることができます。JavaScriptのパスを解決できない時に、ブレイクポイントの箇所に×マークが表示されることがあります。'XXXX'を選択しURLを正しく指定してあげましょう。デバッガには他にもたくさん機能があります。以下の動画で紹介されているので、一度見てみるとよいと思います。Touchの本を書きました。2012の20日目の記事で...2008-08-30LLFuture行ってきた朝10時から夜9時までというかなりの長丁場。Touchパーフェクトガイド月別アーカイブはてなブログをはじめよう!ZOETROPEさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。