リアルタイムのサービス監視パネルを構築します!
サービス監視パネルには、リアルタイムで実際のデータが表示されます。これは、ほぼリアルタイムで非同期の非ブロッキング方法でサーバーとマイクロサービスで何が起こっているかを示します。
ここをクリックして、完全なクライアントの例を表示します。
d3.jsを使用してデータを視覚化し、JavaScriptでデータを説明してください! このコースを見るこのコースは、ここでサーバーのデモンストレーションを紹介します。
AngularJSフレームワークと多くのクールなリアルタイムチャートと多くのリアルタイムデータを使用して、この監視パネルの簡略化されたバージョンを構築します。また、.NET 4.5のSignalRおよびWeb APIライブラリを使用してサービスを構築します。
キーポイント
- AngularJSとSignalRを使用して、サーバーとマイクロサービスアクティビティを非同期および非ブロッキングを表示するリアルタイム監視パネルを作成します。
- AngularJS、JQuery、Bootstrap、SignalR、D3.JSやEpochなどのさまざまなチャートライブラリを含む依存関係を備えたプレーンテキストファイルまたはVisual Studioでプロジェクトを設定します。
- リアルタイムのデータ送信を管理するためのサーバー側にSignalrセンターを実装し、非同期要求を処理する.NETの機能を活用し、クライアントに通知をプッシュする能力。
- AngularJSサービスとコントローラーを開発して、SignalRセンターから受信したデータを処理し、サーバーパフォーマンスメトリックの変更を反映するためにUIをリアルタイムで更新します。 NG-EPOCHやN3-PIEなどの図を統合して、データを視覚的に表現し、監視パネルのインタラクティブ性とユーザーエンゲージメントを強化します。
クライアント
Angularjsは、適切なアプリケーション開発慣行を箱から出して実施します。すべてが注入されます。つまり、依存関係はカップリングが低いことを意味します。さらに、Angularには、ビュー、モデル、コントローラーの間に良好な分離があります。
Angularはここに.NETを追加し、サーバー側のコードをコンパクトで管理しやすく、テスト可能に保つことができます。サーバー側のコードは、その利点を活用するためにのみ使用されます - 重い処理を実行します。
サーバー側
.NET 4.5のWeb APIでSignalRを使用することは、socket.ioを使用してnode.jsを使用することに非常に似ており、サーバーからサブスクリプションクライアントへの同じタイプの非ブロッキング、非同期プッシュを許可します。 Signalrは下部にWebSocketsを使用しますが、通信を抽象化するため、Angular内で実行すると、クライアントブラウザーがサポートするテクノロジーに戻ります。 (たとえば、古いブラウザーの場合、それは長い投票に戻る可能性があります。)
さらに、ダイナミックタグとjson.netの魔法により、.NETフレームワークはJavaScriptを一流の市民と見なしています。実際、JavaScriptを使用してWeb APIとSignalRテクノロジーを使用することは、JavaScriptを念頭に置いて構築されているため、ネイティブの.NETクライアントよりも簡単です。コアコンテンツ
設定を開始
このチュートリアルで使用されているすべてのAngularJSコードは、こちらをご覧ください。
プロジェクトを作成するツールに応じて、お気に入りのテキストエディターとプレーンフォルダー、およびVisual Studioを使用して作成する方法について説明します。
プレーンテキストファイルを使用して設定
フォルダーとファイル構造は次のとおりです
<code>root app (Angular应用程序特定的JavaScript) Content (CSS等) Scripts (引用的JavaScript等) ... index.html</code>主な依存関係
次のファイルをダウンロードする必要があります
jQuery(リンクを選択します「圧縮生産をダウンロードjQuery 2.1.1」)
- AngularJS(大きな「ダウンロード」オプションをクリックして、Angular 1.3の最新バージョンをクリックします)
- bootstrap(「bootstrapをダウンロード」オプションをクリックしてください)
- signalr(右側の「zipをダウンロード」ボタンをクリックしてください)
- d3.js(ページの中央にある「d3.zip」リンクをクリックしてください)
- エポック(「v0.6.0 linkをダウンロード」をクリックしてください)
- ng-epoch(右側の「zipをダウンロード」ボタンをクリックしてください)
- n3-pie(右側の「zipをダウンロード」ボタンをクリックしてください)
- スクリプトフォルダーでは、
jQuery-2.1.1.min.js
- angular.min.js
- bootstrap.min.js
- jquery.signalr.min.js
- d3.min.js
- epoch.min.js
- pie-chart.min.js
- コンテンツフォルダー:
bootstrap.min.css
- epoch.min.css
- Visual Studioを使用した
- 設定
ファイルに移動して、新しいWebアプリケーションを設定してください。
その後、プロジェクトを右クリックして、Nugetパッケージの管理に移動し、jQuery、Angularjs、Bootstrap、D3、Signalr JavaScriptクライアントを検索してダウンロードします。
これらをダウンロードしてインストールした後、スクリプトとコンテンツフォルダーに表示されるはずです。また、インストールされているNugetパッケージの下で、次のことがわかります。
アプリケーションを書きましょう
今、いくつかのコードを書く準備ができました。
最初に、Angular JavaScriptコードを保持するBasic Index.htmlファイルを作成しましょう。
注意すべきことがいくつかあります。まず、すべての依存関係を追加して、それらがロードされるようにしました。次に、まだ存在しない新しいファイル(アプリフォルダー内のすべてのファイル)を参照します。これらのファイルを次に書きます。
アプリフォルダーに移動して、app.jsファイルを作成しましょう。これは非常に単純なファイルです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AngularJS - SignalR - ServiceDashboard</title> <link rel="stylesheet" href="Content/bootstrap.min.css" /> <link rel="stylesheet" href="Content/epoch.min.css" /> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> </head> <body ng-app="angularServiceDashboard"> </body> </html>
<code>root app (Angular应用程序特定的JavaScript) Content (CSS等) Scripts (引用的JavaScript等) ... index.html</code>
このファイルは私たちのためにいくつかのことをします。メインアプリケーションモジュールAngularServicedAshboardをセットアップし、2つの外部参照(Ng.Epoch(Epoch.js Angular Directive)とN3-Pie-Chart(Angular Good Chart Library用に作成された構造)を注入します。
気づいた場合は、もちろん他の場所でホストされているバックエンデルバルルに値を注入し、ここで使用する予定です。
サーバーのURLにバインドするサービスファクトリクラスを作成しましょう。これは、htmlで参照されるservices.jsファイルになります。これはアプリフォルダーに送られます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AngularJS - SignalR - ServiceDashboard</title> <link rel="stylesheet" href="Content/bootstrap.min.css" /> <link rel="stylesheet" href="Content/epoch.min.css" /> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> </head> <body ng-app="angularServiceDashboard"> </body> </html>このコードは、人気のあるオンとオフ(ここでは必要ありません)サブスクリプションモードを使用し、Angular Factoryを使用してアプリケーションのSignalRとのすべての通信をカプセル化します。
このコードは一見すると少し圧倒されるかもしれませんが、コントローラーを構築するときにそれをよりよく理解することができます。それが行うのは、バックエンドSignalRサーバーのURLおよびSignalRセンター名を取得することだけです。 (SignalRでは、同じサーバー内の複数のハブを使用してデータをプッシュできます。)
さらに、このコードにより、SignalRサーバー(他の場所にあるボックスにある)がONメソッドを介してアプリケーションを呼び出すことができます。アプリケーションは、Invokeメソッドを介してSignalRサーバー内の関数を呼び出すことができます。
次に、サービスからデータを範囲にバインドするコントローラーが必要です。アプリフォルダーにcontrollers.jsという名前のファイルを作成しましょう。
このコントローラーはここで何かをします。 Angular Serviceオブジェクトを作成し、サーバーがコントローラーに何かを呼び出すようにコールバック関数にバインドします。
'use strict'; var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']); app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');
サーバーが私たちを呼び戻すたびに、サーバーによって返されるJSONアレイを反復することがわかります。次に、パフォーマンスタイプごとにスイッチステートメントがあります。次に、RAMを設定してから、戻って残りを埋めます。
私たちの指示に関しては、実際に私たちには1つのエポックチャートが必要です。 index.htmlスタブファイルで参照したNg-Epoch.jsというオープンソースディレクティブを使用します。
これらすべてのチャートをさまざまな手順に分割し、いくつかのテンプレートを使用してUIルーターを使用できますが、このチュートリアルを簡単にするために、すべてのビューをindex.htmlファイルに配置します。
index.htmlファイルにビューを追加しましょう。ボディタグの下に次のコンテンツを追加することでこれを行うことができます。
これにより、サーバーがRAMデータを押し戻すことができる場所が作成されます。データは最初にサービスを入力し、次にコントローラーを入力し、最後にビューを入力します。
'use strict'; app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl', function ($rootScope, backendServerUrl) { function backendFactory(serverUrl, hubName) { var connection = $.hubConnection(backendServerUrl); var proxy = connection.createHubProxy(hubName); connection.start().done(function () { }); return { on: function (eventName, callback) { proxy.on(eventName, function (result) { $rootScope.$apply(function () { if (callback) { callback(result); } }); }); }, invoke: function (methodName, callback) { proxy.invoke(methodName) .done(function (result) { $rootScope.$apply(function () { if (callback) { callback(result); } }); }); } }; }; return backendFactory; }]);次のように見えるはずです:
次に、いくつかのチャートを追加しましょう。これはまさに私たちが本当にやりたいことです。 Epoch.jsタイムラインにタイムスタンプという名前の変数を追加します。また、Chartentryというアレイを追加します。これをEpoch.ngディレクティブにバインドします。
<code>root app (Angular应用程序特定的JavaScript) Content (CSS等) Scripts (引用的JavaScript等) ... index.html</code>
次に、Switchステートメントにデータをマップし、残りの必要なEpoch.jsデータ項目を追加しましょう。もちろん、それをさらに分割することができます(たとえば、より多くの機能やフィルターを使用して)が、このチュートリアルを簡単にするために、シンプルに保ちます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AngularJS - SignalR - ServiceDashboard</title> <link rel="stylesheet" href="Content/bootstrap.min.css" /> <link rel="stylesheet" href="Content/epoch.min.css" /> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> </head> <body ng-app="angularServiceDashboard"> </body> </html>
私たちのコントローラーはより完全に見えます。範囲にRealtimeareafeeedを追加しました。これは、NG-Epochの指令を通じてビューにバインドし、範囲にエリアアックスを追加して、エリアグラフのレイアウトを決定しました。
次に、index.htmlにディレクティブを追加し、着信CPU値データを表示しましょう。
'use strict'; var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']); app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');チャートクラスとは、D3.jsの配色を指し、チャートハイトはあなたが推測したものであり、チャートストリームはSignalRサーバーから返されたデータです。
それを使用して、チャートがリアルタイムで表示されるのを見る必要があります:
ここで、多数のデータポイントをこのチャートに接続し、N3-PIEフレームワークから別のチャートを追加しましょう(パイチャートが気に入らないため!)。
N3-PIEフレームワークからパイチャートを追加するには、コントローラーに次のことを追加するだけです。
もちろん、この値はSignalRサーバーによって更新されます。これは、コントローラーの完全なコードで確認できます。
'use strict'; app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl', function ($rootScope, backendServerUrl) { function backendFactory(serverUrl, hubName) { var connection = $.hubConnection(backendServerUrl); var proxy = connection.createHubProxy(hubName); connection.start().done(function () { }); return { on: function (eventName, callback) { proxy.on(eventName, function (result) { $rootScope.$apply(function () { if (callback) { callback(result); } }); }); }, invoke: function (methodName, callback) { proxy.invoke(methodName) .done(function (result) { $rootScope.$apply(function () { if (callback) { callback(result); } }); }); } }; }; return backendFactory; }]);また、私たちの見解の完全なコードについて考える時間をとるべきです。
画面に次のデータが表示されるはずです。 AngularがSignalRに非常に簡単に接続できることがわかりました。AngularJSサービスまたは工場にエンドポイントを挿入するだけです。 Angularjs Factoryは、SignalRと通信するカプセル化メカニズムです。 「結合」後、AngularJと.NETが完全に一緒に機能することを誰が知っていますか?
サーバーのコアアスペクト
バックエンドでのこの通信を許可する.NETコードを導入します。 (こちらからソースコードを見つけることができます。)
最初に、サーバーコードの構築を開始するには、Visual StudioソリューションでSignalRを実行する必要があります。これを行うには、ASP.NETの優れたチュートリアルに従って、基本的なSignalRソリューションを実行してください。 (これが最も簡単です。)
実行後、C#HUBクラスを次のように変更します。
ハブクラスを変更した後、Visual Studioはエラーを報告します。パフォーマンスモデルを追加する必要があります(json.netのため、サーバーがプッシュされたときに自動的にjsonに変換されます):
<code>root app (Angular应用程序特定的JavaScript) Content (CSS等) Scripts (引用的JavaScript等) ... index.html</code>
JSonProperty Metadataは、このモデルのJSONに変換するときに、Json.netにプロパティ名を小文字に自動的に変換するように指示するだけです。 JavaScriptは小文字が好きです。
signrrを介して実際のパフォーマンスデータをリスニングクライアントにプッシュするperformanceEngineクラスを追加しましょう。エンジンは、非同期背景スレッドを介してSignalRを介してリスニングクライアントにこれらのメッセージを送信します。
その長さのため、GitHubリポジトリにコードを見つけることができます。
このコードは、基本的に、イテレーション中にそれぞれのサブスクライブされたクライアントに一連のパフォーマンスメトリックをプッシュします。これらのパフォーマンスメトリックは、コンストラクターに注入されます。サーバーからのプッシュ速度は、コンストラクターパラメーターPollintervalMillisに設定されています。
これは、signerをホストするために自己ホスティングとしてOWINを使用する場合にうまく機能することに注意してください。また、Webワーカースレッドを使用する場合はうまく機能するはずです。
最後に行うことは、もちろん、サービスのonstart()またはスタートアップクラスのどこかでバックグラウンドスレッドを開始することです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AngularJS - SignalR - ServiceDashboard</title> <link rel="stylesheet" href="Content/bootstrap.min.css" /> <link rel="stylesheet" href="Content/epoch.min.css" /> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> </head> <body ng-app="angularServiceDashboard"> </body> </html>
バックグラウンドスレッドを開始するコードの2行(推測したように)は、PerformanceEngineをインスタンス化し、Onperformancemonitor()を呼び出します。
今、私はあなたが私がサーバーからデータをランダム化していると思うかもしれないことを知っています。それが事実です。ただし、実際のメトリックをプッシュするには、System.DiagnosticsライブラリとWindowsが提供するPerformanceCounterを使用してください。私はそれをシンプルにしようとしていますが、これはコードがどのように見えるかです:
'use strict'; var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']); app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');
結論
Angularを介してSignalRデータを使用する方法を学び、そのデータをAngular側のリアルタイムチャートフレームワークに接続しました。
クライアントの最終バージョンのデモがここに表示され、そこからコードを取得できます。
サーバーの最終バージョンのデモがここに表示され、ここからコードを取得できます。
このウォークスルーを楽しんでいただければ幸いです。似たようなことを試したことがあるなら、コメントでお知らせください!
FAQ(FAQ)
angularjsにSignalRを設定する方法は?
AngularJSのSignalRのセットアップには、いくつかのステップが含まれます。まず、NUGETまたはNPMを使用してSignalRライブラリをインストールする必要があります。インストール後、サーバーに新しいSignalRセンターを作成できます。このセンターは、メッセージの送信と受信を担当します。クライアントでは、SignalR JavaScriptライブラリを参照し、センターへの接続を作成する必要があります。その後、接続を開始し、着信メッセージを処理する関数を定義できます。SignalRの接続エラーを処理する方法は?
SignalRは、接続エラーを処理するための組み込みメカニズムを提供します。中央接続で.error()関数を使用して、エラーが発生したときに呼び出されるコールバック関数を定義できます。このコールバック関数は、ユーザーにエラーメッセージを表示するか、センターに再接続しようとすることができます。
他のJavaScriptフレームワークでSignalRを使用できますか?
はい、SignalRは、AjaxとWebSocketsをサポートするJavaScriptフレームワークで使用できます。これには、React、Vue.js、Angularなどの一般的なフレームワークが含まれます。 ProjectにSignalR JavaScriptライブラリを含めて、他のJavaScriptアプリケーションと同じように中心的な接続を作成する必要があります。
私の信号アプリケーションを保護する方法は?
Signalrは、アプリケーションを保護するためのいくつかのオプションを提供します。 [Authorize]プロパティを使用して、センターおよびセンターの方法へのアクセスを制限できます。 Global.asaxファイルでMaphubs()メソッドを使用して、ハブのカスタムオーサイザーを指定することもできます。さらに、SSLを使用してSignalRトラフィックを暗号化し、盗聴を防ぐことができます。
SignalRの切断に対処する方法は?
SignalRは、切断を自動的に処理し、再接続を試みます。ただし、中央接続の.disconnected()関数を使用して、手動で切断を処理することもできます。この関数を使用すると、接続が失われたときに呼び出されるコールバック関数を定義できます。
non.netサーバーでSignalRを使用できますか?
SignalRは、.NETサーバーで使用するように設計された.NETライブラリです。ただし、互換性のあるWebSocketライブラリを使用して、SignalRを非.NETサーバーで使用できます。サーバーにSignalRプロトコルを実装し、接続とメッセージングロジックを自分で処理する必要があります。
私のsignalRアプリケーションをテストする方法は?
PostmanやFiddlerなどのツールを使用してSignalRアプリケーションをテストし、HTTPリクエストをセンターに送信して応答を確認できます。また、中央の方法やクライアント機能のユニットテストを作成することもできます。
モバイルアプリでSignalRを使用できますか?
はい、モバイルアプリでSignalRを使用できます。 SignalR JavaScriptライブラリは、CordovaまたはIonicで構築されたハイブリッドモバイルアプリケーションで使用できます。ネイティブモバイルアプリの場合、iOSとAndroidの両方がSIGNRクライアントを提供します。
私のsignalアプリケーションを拡張する方法は?
Signalrは、アプリケーションを拡張するためのいくつかのオプションを提供します。 Azure SignalR Serviceを使用できます。これは、すべてのSignalR接続を処理する完全に管理されたサービスです。また、複数のサーバー間でメッセージを配布するためのソフトウェアレイヤーであるバックエンドを使用することもできます。
以上がAngularJSを使用してリアルタイムSignalRダッシュボードを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

WebStorm Mac版
便利なJavaScript開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
