新たにオープンツールを搭載したSencha Ext JS 6.6を発表

Senchaチーム全体を代表して、npmパッケージとオープンツールをサポートするSencha Ext JS 6.6のリリースを発表します。npmパッケージにより、Ext JS 6.6では、すべてのJavaScript開発者にとって親しみのある、極めて簡単なワークフローを新たにサポートします。また、Ext JS開発者は、オープンツールにより、Ext JSアプリケーションを迅速に作成し、ビルド、更新できる強力なツール環境を利用可能になります。Ext JS 6.6には、いくつかの主要な機能強化も加えられています。新しいモダンコンポーネント、美しいアクセシブルテーマ、モダンローカライゼーション、高度なルーティング、Ext JSコンポーネントやフレームワークの拡張などです。

Ext JS 6.6のハイライト

npmとオープンツールを搭載したExt JS 6.6は、Ext JSアプリケーションのビルド／作成方法を抜本的に変革します。このリリースには、以下の新機能が含まれます。

• Ext JS npmパッケージ – Ext JSの標準コンポーネントおよびプレミアムコンポーネント、テーマ、フレームワークが、Sencha npmリポジトリによってホストされるnpmパッケージで利用可能に
• ExtGen – いくつかの新しいアプリケーションテンプレートを提供し、質問形式で新規Ext JSアプリケーションを生成しできる新しいオープンツール
• ExtBuild – アプリケーションのビルドとトランスパイルを行う新しいオープンツール
• 新しいモダンコンポーネント – マテリアルデザイン仕様に基づいたアナログタイムビューを提供するモダン形式のTime FieldおよびTime Panelコンポーネント
• グラファイトテーマ – アクセシブルなアプリケーションの美しい外観を実現
• ローカリゼーションサポート – モダンアプリケーションでローカライゼーションをサポート
• 動的スタイリング – マテリアルテーマを使用したアプリケーションで利用可能
• Ext JSルーティングの強化
• 拡張ゲージコンポーネント – インターバル値の表示能力を向上

オープンツールとExt JS 6.6をお試しください

• Ext JSユーザーは、サポートポータルにログインして、すべてのExt JS npmパッケージとオープンツールにアクセスできます。
• 無料の30日トライアル版をダウンロードすれば、オープンツールとSencha Ext JS 6.6を試用できます。
• Ext JS NPMとオープンツールの使い方については、こちらのドキュメントをご覧ください。
• Ext JS NPMパッケージの詳細は、こちらのドキュメントを参照ください。

注意：npmではログイン時に「@」を「..」に置き換える必要があります。例えば、サポートポータルへのログイン名がfirstname.lastname@sencha.comのときは、npmレジストリへのログイン名はfirstname.lastname..sencha.comになります。ログインパスワードには、既存のサポートポータルパスワードを使用します。

Cmd 6.6とExt JS 6.6をお試しください

• Ext JSユーザーは、サポートポータルにアクセスしてSencha Ext JS 6.6をダウンロードできます。
• 無料の30日トライアル版をダウンロードすれば、Sencha Ext JS 6.6を試用できます。
• Cmd 6.6.0をダウンロードします。
• Ext JS 6.6のガイドとドキュメントは、こちらをご覧ください。
• さまざまなデバイス向けのExt JS 6.6サンプルをご覧ください

Webセミナーのスケジュール

オープンツールを使用したSencha Ext JS 6.6の主要機能について学ぶことのできる、Webセミナーにぜひご参加ください。

参加登録はこちら

「Learn What’s New in Sencha Ext JS 6.6 and Open Tooling」

日程：2018年7月11日（水）午前2時（日本時間）
7月10日（火）午前10時（PDT） | 午後1時（EDT） | 午後6時（BST）

Sencha Ext JS 6.6の新機能

Ext JSフレームワーク、コンポーネント、テーマ向けのnpmパッケージ

JavaScriptコミュニティのツールは、より迅速なタイムラインでWebアプリケーションを作成するべく進化しており、品質とメンテナンス性の向上が進んでいます。Node Package Manager、いわゆるnpmは、JavaScript開発者に広く普及したパッケージマネージャです。npmには、70万のJavaScriptベースの巨大なコードパッケージのリポジトリがあり、開発者はこれをアプリケーションで使用することができます。

Ext JS 6.6では、Ext JSのフレームワーク、コンポーネント、テーマが、npm.sencha.comのnpmリポジトリでホストされたnpmパッケージとして利用できるようになりました。Ext JS開発者は、パッケージをプロジェクトに追加したり、依存関係を管理したり、使用しているパッケージのバージョン管理を行うためのコマンドなどを実行できます。Ext JSアプリケーションに、サードパーティのJavaScriptライブラリを組み込むことも容易です。

例えば、次のコマンドを用いれば、Ext JS Pivot Grid npmパッケージを、簡単にプロジェクトに追加することができます。

npm i --save @sencha/ext-pivot

同じように、次のコマンドを用いれば、新しいGraphiteテーマをExt JS npmプロジェクトに追加できます

npm i --save @sencha/ext-classic-theme-graphite

Sencha npmレジストリでは、以下のコマンドを用いて、一度だけ認証を実行する必要があります。

npm login --registry=http://npm.sencha.com --scope=@sencha

ExtGen – Ext JSアプリケーションを生成する新しいオープンツール

新しいExt JS npmパッケージによって、私たちは、コード生成、ビルド・インテグレーション、ワークスペースの管理に役立つ、強力な新しいオープンツールを作成しました。ExtGenは、Ext JS npmパッケージを使用した、新規アプリケーションを素早く作成できる強力な新ツールです。ExtGenには、モバイルアプリケーション、デスクトップアプリケーション、ユニバーサルアプリケーションの作成に利用できる、複数の新しいテンプレートが用意されています。独自のテンプレートを使用して、新しいExt JSアプリケーションを作成することもできます。ExtGenは、アプリケーションを生成するための複数のモードを提供する、ノードベースのクロスプラットフォーム コマンドラインツールです。デフォルト構成オプションを使用してアプリケーションをすばやく組み上げるための自動モードを提供しているほか、インタラクティブモードも用意しており、一連の質問に答えることで、アプリケーションを生成できます。

次のコマンドを実行することで、ExtGenをインストールできます。

npm install -g @sencha/ext-gen

ExtGenを用いれば、たったひとつのコマンドだけで、npmパッケージを使用してExt JSアプリケーション全体を生成できます。

ext-gen app -a

オプションを使用すれば、アプリケーションの生成をカスタマイズできます。例えば、次のコマンドオプションは、モダンアプリケーションの生成を指定しています。

ext-gen app -t moderndesktop -n ModernApp

テンプレートを使用して構築されたモダンアプリケーション

ExtBuild – Ext JSアプリケーションをビルドするための新しいオープンツール

ExtBuildは、Ext JSアプリケーションをビルドするための新しいノードベースのツールです。ExtBuildでは、Ext JSアプリケーションのビルドとトランスパイルに、Sencha CmdとGoogle Closureコンパイラを使用しています。オープンツールを使用して生成されたアプリケーションは、ExtBuildを使用して、Ext JSアプリケーションの開発バージョンおよびプロダクションバージョンをビルドできます。

例えば、次のコマンドを使用してモダンアプリケーションを生成すると、次のようなビルドプロファイルを含むアプリケーションが生成されます。

ext-gen app -t moderndesktop -n ModernApp
 
"builds": {
		"desktop": {
			"toolkit": "modern",
			"theme": "theme-material",
      	}
	}

オープンツールを使用した場合でも、Sencha Cmdを実行するための下位互換性は保持されます。NPXはnpmパッケージランナーで、アプリケーションワークスペース内でSencha Cmdバイナリを呼び出せます。

例えば、次のコマンドはSencha Cmdを直接使用してアプリケーションをビルドします。

npx sencha app build desktop

新しいモダンコンポーネント – Time PanelとTime Field

Time Panel

Time Panelは、アナログ時計を使って簡単に時刻を選択できる新しいモダンコンポーネントです。Time Panelコンポーネントは、デスクトップ、タブレットに加え、iOS、Androidデバイスをサポートしています。コンポーネントは時刻を選択すると、自動的に分の選択に進みます。アナログ時計のアラインメントやモードを設定するためのいくつかの設定オプションも用意されていますTime Panelは、デバイスの向きに合わせてヘッダー位置を変更します。

デバイスを横向きにした状態のTime Panel

Time Field

Time Fieldは、入力フィールドに入力した時刻の自動チェック機能を提供する新しいモダンコンポーネントです。Time Fieldは、JavaScriptのDateオブジェクトを使って入力をチェックします。このコンポーネントは、複数の時刻形式をサポートしており、デフォルトは選択したロケールに依存します。Time Fieldは、Time Pickerを使って、簡単に時刻を選択することができます。

タイムパネルを含むタイムフィールド

Ext JSモダンアプリケーションのローカライゼーション

ユーザーの母国語や慣習に基づいたコミュニケーションは、非常に重要な要件です。Ext JS Modernには、開発者が英語以外の多くの言語にアプリケーションを簡単にローカライズできる、ローカライズサポート機能が用意されています。Ext JS 6.6では、ドイツ語、イタリア語、フランス語、スペイン語、ポルトガル語の言語サポートが追加されています。ロケールパッケージには、オーバーライドフォルダ内に、これらのロケールファイルが含まれています。ロケールオーバーライドによって、Ext JSのコンポーネントで用いる日付形式、月、曜日などを、英語のデフォルト値から置き換えることができます。

以下は、フランス語をサポートするアプリケーションのapp.jsonの例です。

"requires": [
        …, 
        "ext-locale"
    ],
"locale":"fr",
 
For an npm created application, you will also need to import ext-modern-locale package:
 
npm i --save @sencha/ext-modern-locale

フランス語のグリッドコンポーネントメニューを表示したKitchensinkアプリ

Graphite – 新たに搭載した美しいアクセシブルテーマ

Ext JS 6.6では、アクセシブルアプリケーションをのビジュアルを強化する、美しいGraphiteテーマを新たに提供しています。Graphiteテーマは、アクセシブルなハイコントラストテーマで、視覚障害のあるユーザーが視認しやすいアプリケーションを作成できるようにデザインされています。Graphiteテーマは、フラットでシンプル、イメージのないTritonテーマを継承しています。Graphiteテーマは、そのままアプリケーションに適用することも、拡張してカスタマイズしたルック＆フィールを作成することもできます。Graphiteテーマの色、フォント、パディング等は、WCAG 2.0アクセシビリティガイドラインに準拠するようにデザインされています。

Graphiteテーマのグリッド

Graphiteテーマを使用したピボットグリッド

マテリアルテーマを使用したダイナミックスタイリング

多くのWebアプリケーションで、テーマの変更によってアプリケーションのルック＆フィールが変更されたことをすばやく検知することができると役に立ちます。Ext JSマテリアルテーマはCSS変数をサポートしており、色の取得や設定を行うためのAPIが提供されています。また、マテリアルカラーで決められた色だけを選択できるColor Pickerを、作成できるようになりました。外部サーバーやSencha Cmdを使わなくても、アプリケーションのルック＆フィールをその場でアップデートできます。

マテリアルテーマには、すべてのマテリアルカラーとウェイトを持つネストオブジェクトを取得するためgetColors APIが用意されています。

Ext.theme.Material.getColors()

マテリアルテーマでは、次のように色を設定するためのAPIも用意されています。

Ext.theme.Material.setColors({
                'darkMode': darkMode,
                'base': base || me._materialBaseColor,
                'accent': accent || me._materialAccentColor
            });

この強力な機能を説明するために、Modern Kitchensinkにカラーパレット機能を追加しました。このパレットでは、Kitchensinkアプリのルック＆フィールをダークモードに変更し、異なるベース／アクセントのカラーセットを適用できます。

ダイナミックスタイリングを用いたKitchensinkアプリケーション

高度なアプリケーションルーティング

Ext JSは、ブラウザ履歴を使用してアプリケーションの状態を追跡する機能を含む、ルーティング機能を提供します。ルーティングは、アプリケーションの特定の部分への直接リンクを可能にするディープリンクもサポートします。これは、アプリケーションをブックマークしたり、アプリケーションの特定箇所にアクセスできるようにリンクを送ったりできるので、ユーザーにとって非常に便利な機能です。

Ext JS 6.6では、「exit」ルート、ルート内のオプションのタイプ指定子によって指定される名前付きパラメータ、最初に使用してから切断されたルートなど、数多くの高度なルーティング機能を提供しています。以下は、ワイルドカードルートの例です。

routes : {
    '*'   : 'onRoute',
    'foo' : 'onFoo'
}
 
routes : {
    '*'   : {
        before : 'onBeforeRoute',
        exit : 'onExit',
        action : 'onRoute'
    },
    'foo' : 'onFoo'
}

ニードル付きのGaugesコンポーネントの強化

Gaugesコンポーネントは、インターバル値を表示するのに便利なコンポーネントです。Ext JS 6.6では、Guagesは、モダンとクラシックの双方で強化されており、さまざまなメーターの針（Needle）ゲージが強化されおり、Wedge、Diamond、Spike、Arrowといった、一般的な針の種類を選択できます。

さまざまな針を表示するGauges

以下の例のように、Gaugesコンポーネントでは、カスタムの針を表示させるように設定することもできます。

カスタム針を表示するGauges

その他の機能とパフォーマンスの向上

Ext JS 6.6には、複数のコンポーネントにおけるマテリアルデザインの変更、チャート、データパッケージ、フォーム、レイアウト、メニュー、ツリー、カレンダー、ピボットグリッド、グリッドの強化が含まれています。特にグリッドは、モダンとクラシックの双方のツールキットで、24以上のパフォーマンス改善とバグ修正が施されています。モダングリッドには、イベントのセレクションをハンドリングするためのよりよい方法が提供されているほか、クラッシックグリッドで、ストアバインディングの改善が加えられています。また、CordovaにバンドルしてiOSネイティブアプリとしてExt JS 6.6アプリを実行した場合のパフォーマンスが、大幅に向上しています。Ext JS 6.6は、5000件以上のテストケースを用いたSencha Testによる自動テストを含む、広範なテストフェーズを経て、リリースされています。

フィードバックをお寄せください

私たちは、皆さんがExt JSで作成したすばらしいWebアプリケーションを見ることを楽しみにしています。Ext JS 6.6とオープンツールを使用して、すばらしいアプリケーションを作成し、Ext JSフォーラムにご意見をお寄せください。こちらのページでは、ベータプログラム参加者からのフィードバックもご覧いただけます。