Category Archives: WebStorm

WebStorm 7.0.2 リリース – Mocha 連携とDartサポートの改善

一週間前になりますがWebStorm 7の最新アップデート7.0.2がリリースされました。大きく分けて3つの重要な更新があります。 一つはDart言語対応を大きく改善し、また最新のGoogle Dart SDKに対応したことです。 Dartiumにおけるスマートデバッグが簡単に: WebStormはDartプロジェクトを自動認識し、Dartiumを使ったデバッグセッションがデフォルトになります 依存のアップデートとpub buildコマンドはpubspec.yamlファイルのコンテクストメニューより実行可能になりました Dartのチュートリアルがこちらにあります 次にMochaテストフレームワークをサポートしました。npmを使ってMochaをインストールし、Mocha Run/Debug設定の作成・実行、テストディレクトリの指定やテストの実行は1クリックで出来ます。Mocaを連携についてわかりやすい動画を用意していますので是非ご覧ください。 そして、最後にたくさんの修正や改善があります。例えばFlexbox CSSプロパティの補完が出来るようになりました。 このアップデートはIDEからパッチダウンロード、またはwebサイトよりダウンロードしていただけます。リリースノートはこちらにあります。 Develop with pleasure! WebStorm チーム

Posted in WebStorm | Leave a comment

WebStorm 7.0.1リリース

WebStorm 7.0.1 をリリースしました。 一ヶ月ほど前にリリースしたWebStorm 7.0のマイナーアップデートになります。皆様のフィードバックを元に数多くのバグ修正が施されて言います。修正内容について詳しくはこちらをご参照ください。 Unfortunately, it doesn’t come as a patch for WebStorm 7.0: you need to download the installation file on WebStorm web site and make a fresh install. All your settings will be saved. バグ修正以外に、いくつか便利な機能が追加されており、中でも優れているのはHTML内でEmmetをプレビューできる機能です。 この機能はSettings → … Continue reading

Posted in WebStorm | Leave a comment

WebStorm 7を使いJavaScript テストをKarmaで動かす

WebStormは常に開発をより楽しくする最新のテクノロジやツールをサポートしています。WebStorm 7において中でも大きなのはKarmaのサポートです。KarmaはAngularJSチームが開発しているJavaScriptをテストするためのシンプルでフレキシブルなツールです。 これまで通りJSTestDriver(詳しい解説はこちら(英語) )も利用できます。 WebStormのKarma連携の主要機能は以下の通りです: ローカルWebサーバを使い、コンピュータにインストールされている任意のブラウザでテストを走らせる Jasmine、QUnit、Mochaなど、好きなフレームワークと組み合わせてテストできる istanbulコードカバレッジエンジンと一緒に動かせる 全体を説明するビデオ(英語)を用意しましたので是非ご覧ください。また、チュートリアル – Running JavaScript tests with Karmaを併せてご参照いただければと思います。 Karmaを使うには、まずNode.jsをインストールする必要があります。KarmaはWebStormの内蔵ターミナルやお好みのターミナルでグローバルにインストールする方法、WebStormの内蔵npmでプロジェクトディレクトリに直接インストールする方法があります(ツールバーのNode.js設定よりkarmaモジュールを検索、インストール)。 プロジェクトのKarma設定はKarma configuration fileを追加するか自動生成させます。この設定ファイル内で利用したいテストフレームワークとブラウザ(複数指定可)を指定します。 続いてKarma Run Configurationを作り、ワンクリックでいつでもテスト実行できるようにします。 テスト結果はRunパネル内に綺麗に表示されます。テスト結果からコードにジャンプしたり、テスト結果の統計を確認したり、HTMLのレポートを作ったりすることができます。 WebStormはKarmaが使っているistanbul code coverage engineもサポートします。nodeのモジュールkarma-coverageをインストールして、Karma configuration fileに追加します。Run with coverageボタンを押せばテスト実行時にカバレッジ測定ができます。 WebStormのKarma連携について詳しくはRunning JavaScript tests with Karma tutorial (英語)をご覧ください。 Develop with pleasure! WebStorm … Continue reading

Posted in WebStorm | 1 Comment

WebStorm 7.0リリース – 全てのWebデザイナ、エンジニアが必要な機能が妥協なしに!

WebStormチームより最新バージョンWebStorm 7.0をお届けしいます!素晴らしいWeb IDEをお届けするためにがんばりました。気に入っていただければ幸いです。 数多くの新機能が含まれますが、中でも注目すべき7つの機能を挙げます: EJS Web Components Mustache、Handlebars テンプレート EJS, Web Components、Mustache、Handlebarsテンプレートサポートによりより完成された開発体験をお届けします Stylus — 初期段階ではありますがStylus stylesheet languageをサポートし、補完、フォーマットやシンタックスハイライト、CSSへ自動コンパイルができます Karma、istanbul — Karma ランナー連携とistanbulコードカバレッジエンジンによりシンプルでパワフルなJavaScriptテストが可能に npm — node package managerの統合でモジュールの検索、インストールやアップデートがより手軽に Terminal — IDE内にターミナルを内蔵 他のアップデートとしては: JavaScriptデバッガとElements Tabの変数ビューの改善 最新のTypeScript 0.9のサポート CSSオーサリングフレームワークであるCompassのサポート RESTクライアントの新機能 GitHubプルリクエストなど 詳しくはWhat’s new in WebStorm … Continue reading

Posted in WebStorm | Leave a comment

WebStorm 7の大幅に改善されたJavaScriptデバッガ

新しいWebStorm 7のデバッガは新たにデザインされ、Google ChromeのWebKit Remote Debugging ProtocolとV8 Debugger Protocolをサポートしました。 基本的にはデバッガのバックエンドが書き直されただけですが、WebStorm 7ユーザーはきっとパフォーマンスの向上や、便利な機能に気づくことでしょう。主な新機能は以下のビデオで、またこのエントリの後半でご確認いただけます。 更新内容を掘り下げる前に、JavaScriptのデバッグ方法についておさらいしましょう: コンテクストメニューよりDebug fileをクリック。Run/Debug設定が自動的に作成され、ブラウザで開かれます または メインツールバーですでに自分で作成した、または作られているRun/Debug設定を選択してDebugをクリック WebStorm 7のアップデートと改善 Live Edit Live Edit はHTML や CSS ファイルの更新内容を即座にブラウザで確認できる機能です。ファイルを保存したりブラウザをリロードしたりする必要はありません(こちらのdemoをご覧ください)。現在のところLive EditoはGoogle Chromeのみサポートしています。ChromeのエクステンションであるJetBrains IDE Supportをインストールする必要があります。 WebStorm 7ではLive Editの動作をより安定化させました。HTMLファイルのみならず動作中のアプリケーションでもお楽しみいただけます。 Elementsタブ 新しいElements タブ がデバッガに追加されました。DOMや、JavaScriptによって新たに追加されたDOMエレメントなどを確認することができます。 Elementsタブより即座にオリジナルのファイルや定義箇所へジャンプすることもできます。Cmd(WindowsではCtrl)をお品がrファイル名やクラス名をクリックしてください。 Variables view Variablesはデバッグウィンドウ内でより見やすくなりました。 … Continue reading

Posted in WebStorm | Leave a comment

WebStorm 7.0 リリース候補版

WebStorm7ベータ版以来、最終的な調整、修正を行ってきまし(WebStorm 7 Beta以降の変更内容についてはリリースノートをご覧ください)。メジャーリリースの一歩手前でWebStorm 7.0 リリース候補版をだしました。 各OS用のWebStorm 7 RCはこちらよりダウンロードしていただけます。このバージョンはアクティブなWebStormのライセンスをお持ちの方に限り30日間お試しいただけます。 気になる点などございましたらいつも通りYouTrackへの報告をお待ちしております。またEarly Access Programにご参加いただいた皆様に感謝を申し上げます。

Posted in WebStorm | Leave a comment

PhpStormのLiveEdit

Live Edit は編集内容をブラウザを手動でリロードさせることなく即座に確認できる機能です。ブラウザのエクステンションをインストールすればHTML、CSS、JavaScriptで編集している箇所のみをブラウザ内で自動的にリロードし、カーソル位置の要素をハイライトしてくれます。コード補完もライブに行えます。 以下のビデオをご覧いただけばフロントエンドデベロッパにとってLive Editがいかに生産性を向上させるのかご理解いただけるでしょう: Live Editの設定や利用方法はPhpStorm 7 / WebStorm 7で大きく修正されました(これまでは挙動が不安定でブラウザやPhp/WebStormを再起動させないとうまくはたらかないこともありました)。挙動をより安定させるため、Live EditはJavaScript debug session内でのみ有効となります。つまりRun/Debug 設定を先に行う必要があります。 HTMLファイル用のRun/Debug設定はコンテクストメニュー内のDebug [ファイル名] を選択するだけで自動的に作成されます。 または手動でRun/Debug設定を作ることもできます。 ところで、Live EditはReload in Browserアクションも提供しています。ページ全体をリロードしたい場合はブラウザに移動することなく、割り当てたホットキーでPhpStormからリロードさせることができます。(PHPファイルだけでなくSmarty/Twigテンプレートでも有効です)。 Live Editのチュートリアルもあわせてごらんください。 是非 PhpStorm 7 EAP をお試しいただき、YouTrackや掲示板へフィードバックを頂ければ幸いです。 Develop with pleasure! – JetBrains PhpStorm チーム

Posted in PhpStorm, WebStorm | Leave a comment

WebStorm 7.0 Beta リリース

WebStorm 7.0 Betaをリリースしました! これまでのEAPリリースで説明してきたことのまとめになりますが、WebStorm 7.0 で追加される主な機能は以下の通りです: ・JavaScript テンプレートサポート (EJS、Mustache、Handlebars) ・Stylusの基本的なサポート ・Compassのサポート ・Karma test-runnerとistanbul コードカバレッジエンジンのサポート ・npmとターミナルの内蔵 WebStorm 7のページでベータ版のダウンロードと、詳しいアップデート内容の確認をしていただけます。 また、いつも通りYouTrackへのフィードバックをお待ちしております。

Posted in WebStorm | Leave a comment

WebStorm 7 EAP 131.24リリース – ローカルターミナルとCompassのサポート

WebStormの新しいEAPビルドをリリースしました。WebStorm 7で予定している機能が一通り実装されたビルドになります。このビルドで大きなの新機能は二つあり、一つはCompassのサポート、もう一つはPhpStormやPyCharmのEAPにも最近追加されたローカルターミナルです。またStylusサポートも前のEAPビルドよりも洗練されており、コード補完やパーサーのバグ修正など盛りだくさんです。 変更内容について詳しくはリリースノートをご参照ください。またEAPはダウンロードページから、またはIDEから差分ダウンロードをすることも出来ます。

Posted in WebStorm | Leave a comment