Category Archives: WebStorm

WebStorm 2016.1リリース: より的確なリファクタリングオプション、Angular 2サポート/デバッガの改善等々

今年最初のメジャーアップデートであるWebStorm 2016.1をリリースしました。JavaScriptとTypeScriptの編集やリファクタリングエクスペリエンスの改善、そしてIDEのデバッグ機能のセットアップの改善が目玉となっております。 こちらよりダウンロードしていただけます。 アップデートのハイライトは以下の通りです: ECMAScript 6とTypeScriptサポートの改善: より的確なリファクタリングオプション、Unused importsインスペクションとOptimize importsアクション。 Angular 2サポートの改善: イベントとプロパティバインドのコードアシスタンス、データバインド内のコード補完。テンプレートに定義している変数、カスタムイベントハンドラ、templateUrlとstyleUrlフィールドのコードインサイトとナビゲーション 非同期クライアントサイドコード、ES6のarrow function、Webとサービスワーカーのデバッグ IDEからNode.jsアプリをリモートやVagrant boxで起動 他に触れておくべきなのはAngularJS ui-router/CSSカスタムプロパティのサポート、ElectronアプリのIDEからの実行/デバッグ、JSON Schemaフォーマットサポートによるコードアシスタンス、Convert string to template stringインテンションです。 詳しくはWhat’s new in WebStorm 2016.1(後日翻訳予定)をご参照ください。 JetBrains WebStorm Team [原文]

Posted in WebStorm | Leave a comment

IntelliJ IDEA 14、WebStorm 9はPhoneGap / Cordova、Ionicに対応します!

IntelliJ IDEAはJavaデベロッパ向けの最高のツールであり続けると共に、Java以外のテクノロジーのサポートも怠りません。特にWeb開発については力を入れています。IntelliJ IDEAをJavaScript、CSS、AngularJS開発に使った事がある方ならばそのパワーをご理解頂いているかと存じます。 そしてIntelliJ IDEA 14ではその方向性がより明確になります。最新のEAPをお使い頂ければHTML5ハイブリッドモバイルアプリケーション開発に体する強力な面を感じて頂けるはずです。 本日お知らせしたいのはIntelliJ IDEAとWebStormが公式にPhoneGap/Apache Cordova、そしてIonicフレームワークを専用のプラグインでサポートすることです。 詳しくはチュートリアルをご参照ください。 このプラグインは既にIntelliJ IDEA 14 EAPでお試し頂けます。是非ダウンロードしてみてください。うまく動かないことがありましたら掲示板やYouTrackへフィードバックを頂ければ幸いです。 またPhoneGap/CordovaプラグインはオープンソースでGitHubリポジトリにありますので、どなたでもコントリビュートしていただけます。 Develop with Pleasure! 原文

Posted in IntelliJ IDEA, WebStorm | Leave a comment

リモートホストとプロジェクトファイル間のファイルの移動がより直感的に

先のエントリでリモートホストツールウィンドウを使ってリモートサーバに接続する方法を説明しました。IDE内からFTP、FTPS、SFTPサーバへのファイルの送受信を簡単に行える便利な機能です。PhpStorm 7.1.1を始めとする最新のIDEではドラッグ&ドロップの挙動をMacのFinderやWindowsのエクスプローラに近づけました。 この機能はIntelliJ IDEA、PyCharm、WebStorm、PhpStorm、RubyMineでご利用いただけます。 改めて説明いたしますが、リモートホストへの接続はTools | Deployment | Configuration で行えます。続いてTools | Deployment | Browse Remote Hostよりリモートホストブラウザを開けます。 プロジェクトペイン/リモートホスト間のドラッグ&ドロップは、OSのファイルブラウザでローカルファイルを扱うように操作できます。例えば単にドラッグ&ドロップをした場合、ファイルは移動します。Macの場合、optionキーを押しながらドラッグ&ドロップをすると移動ではなくコピーになります。(Windowsの場合はctrlキー) 以下の動画をご覧いただくと分かりますが、移動の場合とコピーの場合(ctrlまたはoptionを押している場合)はマウスカーソルの形が異なり、移動なのかコピーなのかが分かります: 細かい変更になりますが、IDEがより直感的に、便利になったのではないでしょうか? Develop with pleasure! – JetBrains PhpStorm チーム 原文

Posted in IntelliJ IDEA, PhpStorm, PyCharm, WebStorm | Leave a comment

プロジェクトファイルをドラッグ&ドロップでリモートサーバに送る

リモートホストペインを使うとIDE内からFTP、FTPS、SFTP、またはローカル/ネットワークフォルダを操作できます。また、ファイルのドラッグ&ドロップや、コピーペーストもリモートホストペイン内、またはプロジェクトペインとリモートホストペイン間で行えます。 この機能はIntelliJ Idea、PyCharm、WebStorm、PhpStorm、RubyMineでご利用いただけます。 リモートホストを追加するにはTools | Deployment | Configurationより必要な接続情報を設定します。設定が終わったらTools | Deployment | Browse Remote Hostよりリモートホストのファイルブラウザを表示できます。 あとはプロジェクトペインから簡単に任意のファイルをリモートホストにアップロードすることができます: プロジェクトペイン/リモートホストペイン間のコピー&ペーストも可能です: もちろんリモートホストからプロジェクトへファイルをコピーすることもできます: Develop with pleasure! – JetBrains Web IDE チーム 原文

Posted in IntelliJ IDEA, PhpStorm, PyCharm, RubyMine, WebStorm | Leave a comment

WebStorm 8 EAPの提供開始

WebStorm 8のアーリーアクセスプログラムを開始いたしました。こちらよりダウンロードしていただけます。 これまでのところ、WebStorm 8のロードマップで予定しているたくさんの機能のうち数個だけ実装が完了した状態です。ぜひ皆様のフィードバックをお寄せください。今後のEAPビルドでもっともっと多くの新機能を追加していきます。 今回のEAPで実装された機能は以下の通りです: より強化されたAngularJSサポート Spy-js JavaScriptトレースツール連携 AngularJSサポートはプラグインの追加インストールなしにお使いいただけるようになりました。 AngularJSでは以下の機能がお使いいただけます: ディレクティブの補完(内蔵とカスタム) ビルトインタグのクイックドキュメンテーション(WindowsではCtrl+Q、MacではCtrl-J)、Shift-F1でAngularJSのサイトへジャンプも可能 ng-appとng-controller属性の補完(controller(‘foo’,…)という形式のdeclarative styleのみサポート) Go to symbolでフィルタやコントローラなどAngularJSの要素へジャンプ可能 Spy-js Spy-js はJavaScriptのトレースツールで、今回WebStormと連携できるようになりました。コードのトレース、デバッグ、プロファイリングにはうってつけです。イベントコールのスタックを掘り下げたり実行中のコードをエディタでハイライトしたりできます。 spy-jsは以下のようにお試しいただけます: 新しいspy-js RCを作成する node.jsパスとトレースサーバのポートを指定する default configurationを使う オプション: トレースしたいURLを指定する。ローカルのサーバでもWebStorm内蔵のWebサーバでもどんなURLでもかまいません。すべてのURLをトレースしたい場合は空欄にしておきます WebブラウザやOSでプロキシサーバとしてlocalhost:3546を使うように設定します。各OSにおけるプロキシサーバの指定方法はこちら: Windows, Mac, Ubuntu. spy-js RCを起動する トレースしたいページを開いたり更新したりする お手持ちのspy-js設定ファイルを使うこともできます。詳しくはこちらのドキュメンテーション(英語)をご覧ください。 spy-jsをローカルプロキシで利用する方法はまだ開発途上段階にあります。 WebStorm 8 EAPはこちらでダウンロードしていただけます。フィードバックなどありましたらYouTrackへご報告ください。 … Continue reading

Posted in WebStorm | 1 Comment

WebStorm 7.0.3リリース

WebStorm 7.0.3をリリースしました!IDEからアップデートすることも、インストーラをダウンロードしてフレッシュインストールすることもできます。 WebStorm 7.0.3はバグ修正や改善だけでなく、IntelliJ IDEAプラットフォーム由来のたくさんの新機能を含んでいます。 ・WebStorm 7.0.3にアップデートする理由 ツールバーやツールウィンドウはデフォルトで隠れるようになっており、エディタ領域が広がりました。[View | Toolbar]と[View | Tool Buttons]で再度表示させられます。 次に、どこでも検索(Search everywhere)機能が導入されました。Shiftキー2回で起動できるこの機能ではクラスやアクション、シンボルやファイルを簡単に探し出して移動することができます。 レンズモードではスクロールバーにマウスカーソルをあてることでファイルの任意の位置をエラーや警告メッセージ付でプレビューできます。 またSubversion 1.8をフルサポートしました。GitやMercurialのログビューも大幅に強化されています。 詳しくはリリースノートをご覧ください。 Windowsにおいてインストールがうまくいかない場合は以下の手順をお試しください: こちらのページに書いてある手順を実施: http://nsis.sourceforge.net/Why_do_I_get_NSIS_Error 以下のミラーサイトのうちのどれかからWebStorm 7.0.3をダウンロード: http://download-cf.jetbrains.com/webstorm/WebStorm-7.0.3.exe http://download-ln.jetbrains.com/webstorm/WebStorm-7.0.3.exe http://download-eu.jetbrains.com/webstorm/WebStorm-7.0.3.exe それでもうまくいかない場合はzipアーカイブのバージョンをお試しください: http://download.jetbrains.com/webstorm/WebStorm-7.0.3.zip Develop with pleasure!   -JetBrains WebStorm チーム 原文

Posted in WebStorm | Leave a comment

WebStorm 7.0.3 EAP

WebStorm 7の次のアップデートはいつものバグ修正を中心としたものではなく、新機能が盛りだくさんになる予定です。 正式には年末までにはリリースされる見込みですが、いつも通りEAP(アーリーアクセスプログラム)としてこちらから現段階のビルドをお試しいただけます。 WebStorm 7.0.3 EAP のハイライト TypeScriptとDartサポートが大幅に改善されています。またMochaテストのツリービューの改善、JSDoc内のtemplateのサポートなどです。詳しくはリリースノートをご覧ください。 WebStorm 7.0.3 EAPは最新のIntelliJプラットフォームの新機能群を含みます: インターフェースがよりコンパクトに、そしてエディタ領域がより広くなりました。[View | Toolbar]か[View | Tool Buttons] (または左下の アイコン)よりおなじみのツールバーやボタンは表示させることが出来ます。   レンズモード – スクロールバーの警告やエラーを示す縞にマウスカーソルをあてると警告/エラーメッセージと共にコードの断片を表示してくれます:   より速く、よりパワフルな検索とナビゲーション: Shiftを二回、または右上のアイコンでクラスでもファイルでもシンボルでも素早く探し出して移動することができます:   フォルダへの移動がナビゲートダイアログからも出来るように:     Subversion 1.8サポート GitとMercurialのログビューの大幅な改善 是非WebStorm 7.0.3 EAPをお試しになり、何か不具合などございましたらYouTrackへ報告をしていただければ幸いです。 Develop with pleasure! -JetBrains WebStorm … Continue reading

Posted in WebStorm | Leave a comment

WebStorm(やその他のJetBrains IDE)でCompassを使う方法

SassやSCSSはCSSを変数やmixim、セレクタの継承といった機能でCSSをモダンなスタイルで開発できるようにするフレームワークです。CompassフレームワークはSassをベースにした新しいフレームワークで、SassやSCSSの機能を引き継ぎながらより再利用性、生産性を引き上げることができます。 WebStormでCompassをセットアップするには以下の手順に従ってください。(PhpStorm、RubyMine、PyCharm、IntelliJ IDEAも概ね同様に設定できます) まず、お使いのコンピュータにRubyをインストールます。次にビルトインターミナルより次のコマンドを打ち、Compassをインストールします: gem install compass Compassの一般的なインストール方法については次のページにより詳しく記載されています: http://compass-style.org/install/ 新しいプロジェクトでCompassを使いたい場合はビルトインターミナルより [compass init]とと打ちます。このコマンドによりSCSSとCSS、そしてCompassの設定ファイルであるconfig.rbがプロジェクトのルートに作成されます。 続いて新しい.scss (または .sass)ファイルを作ってみましょう。 WebStormは.scssファイルを作成すると自動的にCSSにコンパイルしてくれる[File Watcher]を作るか尋ねますがキャンセルしてください。今回はCompassにコンパイルを行わせるため、別のファイルウォッチャーを作成する必要があります。 .scssファイル内で以下のようにタイプしてください: @import “compass” WebStormはまだCompassを使ったプロジェクトであることを認識していませんが、クイックフィックス(Option + EnterまたはAlt + Enter)により簡単に設定/認識させることができます。または[Preferences/Settings | Compass Support]よりCompassサポートを手動で有効かすることもできます。 [Enable Compass]をチェック 注意: Compassの実行ファイルへは明示的な絶対パスで指定する必要があります。たとえばMacでは以下のようになります。 /Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/bin/compass for Mac, Windowsでは以下のようになります。 C:\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2\bin\compass これでようやくWebStormはCompassのファイルウォッチャを作るか尋ねてくれるようになります。入力・出力ファイルの相対パスを指定したマクロがconfig.rbに記載されます。これでSCSS(またはSass)を修正すると自動的にCSSへとコンパイルされるようになります。 もしconfig.rbをプロジェクトルートに置かないようにしたい場合は以下の点に気をつけて設定してください: Compass Support … Continue reading

Posted in WebStorm | 1 Comment

ご存じですか?JetBrains IDEから簡単に外部ツールを実行できます

JetBrainsのIDEは元から様々なツールと連携しています。しかしながら世の中のすべてのツールを内蔵するのはほぼ不可能です。あまり知られていない機能として外部ツールを起動する仕組み(external tool)が用意されています。この仕組みにより、外部ツールをIDEの色々の箇所からショートカットやメニューで起動できるようになります。 この機能はIntelliJ IDEA、PyCharm、WebStorm、PhpStorm、RubyMine、AppCodeで有効です external toolの例として、多くの画像エディタが出力する最適化されていないPNG画像を最適化するというユースケースがあります。たとえばOptiPNGを使って画像最適化を簡単にするというのはいかがでしょう? プロジェクトよりPNGを選択して、以下のようにAlt+Iショートカットで最適化するという設定が可能です: どうやって設定するかについてはPhpStormのチュートリアルページ(英語)をご覧ください! コメントやフィードバックは是非YouTrackや掲示板へお寄せください! Develop with pleasure! – JetBrains PhpStorm チーム

Posted in AppCode, IntelliJ IDEA, PhpStorm, PyCharm, RubyMine, WebStorm | Leave a comment

WebStorm 8のロードマップ – YeomanサポートやAngularJSサポート強化など

WebStormは二度目のバグフィクスアップデートがリリースされ、次期バージョンを検討する段階に入りました。我々はこれが素晴らしいものになると確信しています! 現在のロードマップは確定したものではありませんのでご注意ください。内容はフレキシブルに変わっていく見込みです。まず早い段階で計画をアナウンスし、皆様のフィードバックを得られればと考えております。 WebStorm 8は2014年の早い段階(2月か3月)のリリースを予定しています。ロードマップの全容についてはこちらをご覧ください。 次期リリースで一番重点を置いているのはツールとワークフローです。ひとまずロードマップに入れたいのが以下の3つです。 Spy-js連携– Spy-JSはJavaScriptのトレース、デバッグ、プロファイルの強力なツールです Yeomanワークフローのサポート: Yo、BowerとGrunt JavaScript debuggerコンソールの改善 もう一つ大きいのはより進化したAngularJSサポート(デフォルトで内蔵)です。是非現在のプラグインをお試し頂き、良い点・悪い点についてフィードバック頂ければ幸いです。 もちろん既にサポートしているテクノロジー(JavaScript、TypeScript、スタイルシート言語等々)の改善やパフォーマンスの改善も予定しています。 1月までにはWebStorm 8のプレビューをEAPにて提供できる見込みです。最新情報にについては@WebStormIDEや@JetBrainsJP、そしてこのブログをご確認ください。 皆様のフィードバックは是非YouTrackkerへ寄せてください。 Develop with pleasure! WebStorm チーム

Posted in WebStorm | Leave a comment