Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

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

June 21, 2018 115 Views
Show

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ではログイン時に「@」を「..」に置き換える必要があります。例えば、サポートポータルへのログイン名が[email protected]のときは、npmレジストリへのログイン名はfirstname.lastname..sencha.comになります。ログインパスワードには、既存のサポートポータルパスワードを使用します。

Cmd 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

Modern App built using template

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

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 when the device is in landscape orientation

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

 

Time Field

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

Time Field with Time Panel
タイムパネルを含むタイムフィールド

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 example with Grid component menu in French
フランス語のグリッドコンポーネントメニューを表示したKitchensinkアプリ

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

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

Grid with Graphite theme
Graphiteテーマのグリッド

 

Pivot Grid using Graphite theme
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 application with dynamic styling
ダイナミックスタイリングを用いた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 with different kinds of needles
さまざまな針を表示するGauges

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

Gauge with custom needle
カスタム針を表示する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フォーラムにご意見をお寄せください。こちらのページでは、ベータプログラム参加者からのフィードバックもご覧いただけます。

 

Show
Start building with Ext JS today

Build 10x web apps faster with 140+ pre-build components and tools.

Latest Content
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s…

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples
JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development…

Virtual JS Days 2024のハイライト
Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…

See More

Recommended Articles

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development landscape. It powers thousands of web applications, from simple to…

Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript エコシステムの最新情報について学ぶユニークな機会と言えます。

JS Frameworks: A Guide to Dodging 10 Common Blunders

Ext JS is one of the most popular JS frameworks for creating interactive websites. However, beginners often face challenges when using it. This guide helps…

7 Tips for Optimizing Performance in JavaScript Grids

A JavaScript data grid is a UI element that enables developers to efficiently present data in a tabular format. These grids essentially allow us to…

JS Frameworks Dynamic UIs: A Guide to Elevating User Interfaces

Today, we will explore the beauty of dynamic UIs in web development. We’re here to show you how to turn plain web pages into exciting…

Unlocking JS Frameworks Potential: 6 Hidden Features to Know

Nowadays, learning JavaScript has become an essential task for developers. At the same time, experts are learning new JavaScript technologies to excel in web development.…

View More