Ext JS 6.5とSencha Cmd 6.5のリリース

May 11, 2017 107 Views

Ext JS JavaScript Framework

Senchaチーム全体を代表して、Ext JS 6.5とSencha Cmd 6.5のリリースを発表させて頂きます。Ext JS 6.5ではModernツールキットに多くの素晴らしい機能を追加しました。新しい強力なグリッド、高度なフォームのバリデーション、メニュー、ダイアログはその一例です。もし皆様がModernツールキットを「モバイルファースト」のものと考えているのであれば、それは正しいです。しかし、それを「モバイルだけ」のものと考えているのであれば、Ext JS 6.5はその考え方を大きく変えるでしょう。Ext JS 6.5のModernツールキットでは、リッチなユーザー体験をモバイル、そしてデスクトップにも提供することが可能です！

Ext JS 6.5.1 のハイライト

ダイアログ、日付パネル、Modernグリッドの広範囲なアップグレード（spreadsheetセレクションやセル編集、ツール機能など）を含む強力な新しいコンポーネント
ボックス・プロットやナビゲーター、D3組織図などのリッチなデータビジュアライゼーションのサポート
ツリーの編集プラグインやリストのスワイプ操作、プル・リフレッシュ、スムーズなスクロール体験の改善など、主要なコンポーネントへの機能強化
バーチャル・ストアによる大規模なデータセットの管理とシームレスなスクロール、動的パッケージ読み込みによる大規模なアプリケーションのスムーズなローディング体験
よりExcelライクな機能とtabularレイアウト、ピボット定義を含むデータ出力機能などの改善によるピボット・グリッドの洗練されたデータ分析機能のサポート
フィールドのバリデーションや入力のマスキング、ボックスラベル、新しいコンボボックス・コンポーネントを含むフォーム機能の強化でデータの入力を集中的に行うアプリケーションをサポート
従業員ディレクトリやプレグレッシブWebアプリなどのフルスタックで実践的なサンプルアプリ
JavaScript標準の最新機能を利用してExt JSアプリケーションを作成できるようCmd 6.5によるECMAScript 2015（またはES6）のサポート

お試し下さい

サポートポータルよりExt JS 6.5とCmd 6.5をダウンロード
Ext JS 6.5とツールの 30日間の無償評価版をダウンロード
任意のデバイスから Ext JS 6.5のサンプルを閲覧
「What’s New in Ext JS」

ガイドの閲覧

「What’s New in Sencha Cmd 6.5」

ガイドの閲覧

近日開催予定の「What’s New in Sencha Ext JS 6.5 and Cmd 6.5」ウェビナーに参加

Ext JS 6.5.1の新機能

多くの機能強化はModernツールキットに実施しているため、まずはそれらについて紹介し、続いて、双方のツールキットで共通の新機能を紹介します。

グリッド

Ext JSのグリッドは最も人気のあるコンポーネントの一つですが、これまで以上に強力になりました。まずはじめに、グリッドの新しいselectableコンフィグを利用することでセルや行、列などの選択を制御することが可能です。さらにこの新しいオプションはユーザーにMicrosoftのExcelのようにグリッドを操作させることができます:

グリッド部品はフォームベースの行編集の他にセルのインライン編集をサポートしました。platformConfigを利用することで、これらの体験を簡単に制御できます。デスクトップのユーザー向けには、”gridcellediting”プラグインを利用したセルのインライン編集が最適でしょう。モバイルのユーザー向けには、”grideditable”プラグインを利用した行のフィールドを編集するためのモーダルのフォームがより適切です。コード例については後ほどご紹介します。

適切な場所へのアイコン配置は機能性を向上させ、ユーザーの目的達成を助けます。ついにセルやグループヘッダー、列でもツールを追加することが可能になりました。列のヘッダーに追加の機能をまとめるために、列メニュー（Classicツールキットに既にあったような）を利用することもできます。

皆様がきっと気に入るグリッドの新機能が、この記事には収まりきらないくらいあります。例えば、列への独自のグルーピングやピン付けするグループヘッダーやフッターなどです。

ツリー

ツリー部品はグリッドと密接に関連しており、多くの機能を共有しています。これは、Ext JS 6.5では、ツリー部品でもコンテンツの編集などのグリッドと同じプラグインが利用できることを意味します。例えば、デスクトップユーザー向けの”gridcellediting”プラグインは下記をご覧下さい:

モバイルのユーザー向けには、”grideditable”プラグインを利用します。コードは次のようになります:

    platformConfig: {
        desktop: {
            plugins: {
                gridcellediting: true
            }
        },

        '!desktop': {
            plugins: {
                grideditable: true
            }
        }
    }

バーチャル・ストア

バーチャル・ストアにより、非常に大きなデータセットを描画しスクロールできるグリッドやリストを作成できます。Classicツールキットのbufferedストアと同じように、バーチャル・ストアはグリッドが必要とするページのみを読み込みます。リスト部品のinfiniteコンフィグと組み合わせることで、それはグリッドのデフォルト設定でもありますが、読み込んだレコードの一部の小さな範囲のみがDOMに描画されます。

これらの最適化により、どんな量のデータを表示する場合でも、ユーザーにとって快適なブラウザ性能を確保できます。

シンプルなリスト部品には今回のリリースで多くの内部的な改良を施しました。新しい”listswiper”プラグインを利用することでリスト項目にアクションを追加することが可能で、それらには片側もしくは両側をドラッグすることでアクセスできます。

またlistswiperを”stepper”モードで利用することで、項目をスワイプした時点でアクションを実行させることができます。そして、グリッドはリストのサブクラスのため、listswiperはグリッドでも利用することが可能です（行のswiperのように動作するでしょう）。

恐らく行のスワイプとツールの両方を同時に必要とすることはないでしょうが、Ext JSのグリッドでは、それらはあなたの選択次第です。

フォーム

Ext JS 6.5の新しい入力マスキングや高度なバリデーション機能により、洗練されたデータ入力アプリケーションを構築することはロケット工学のように難しいものではなくなるでしょう。また日付フィールドのような部品にも機能強化を施しており、デスクトップだけでなくモバイルでも素晴らしいユーザー体験を提供することが可能となっています。

デスクトップのデバイスでは、日付フィールドは新しい日付パネル部品を利用します。もちろん、直接日付パネルを利用しても構いません。

また新しいcontainerfieldコンポーネントを利用することで、一つのラベルとエラー表示に複数のサブフィールドを関連づけることが可能になりました。

パネルとタブパネル

ヘッダーの回転やリサイズ、開閉（下記参照）のようなClassicツールキットでの馴染みのある機能がModernのパネルでも利用できるようになりました。

開閉やリサイズを管理するコンフィグは各々のヘルパークラスであるExt.panel.CollapserとExt.panel.Resizerに集約されています。もしこの機能が必要ない場合は、単純にそれらをrequireしないことです。それらをrequireした場合、collapsibleやcollapsed、resizableのような追加のコンフィグが全てのパネルに追加されます。

記述例:

    {
        xtype: 'panel',

        collapsible: {
            direction: 'right',
            animation: {
                duration: 300
            }
        },

        resizable: {
            dynamic: true,  // resizes as you drag
            edges: 'r',
            split: true
        }
    }

パネルが折り畳まれた際、フロートした描画で一時的にパネルを表示できます。この表示の様々な側面はdrawerコンフィグを利用して設定可能です。上記のアニメーションではClassicツールキットのborderで実現できる結果と同じことをdockedコンフィグの組み合わせで実現できることを証明しています。

タブパネル

デスクトップのアプリケーションでは、タブはいくつかの追加機能を必要とします。Ext JS 6.5のタブでは、リップルやインジケーターのアニメーションのようなマテリアルデザインの特徴だけでなく、閉じたり無効にしたりを指定できるようになりました。

メニュー

メニューはデスクトップのアプリケーションにとって重要な部品です。それらはコンテキストメニューや複数の機能を持つボタンのような場所で表示されます。またそれらはモバイルアプリケーションでも表示されることがありますが、装飾は最小限です。

メニューはClassicツールキットで期待されている機能と同じものをサポートしました。メニュー項目はアイコンを持つことができ、またチェックをつけたり、ラジオのグループに加わったり、当然ながら各々のサブメニューを持つことが可能です。

メニューはパネルを継承しているため、アンカーのようなパネルの全ての標準機能をサポートしています。これはメニューは「メニュー項目」だけでなくどのようなコンポーネントでも含めることができることを意味します。この特徴により下記のような素晴らしい活用が可能です。

アクセシビリティ、テーマ設定、他

キーボードのナビゲーションやフォーカスの管理など基本的なアクセシビリティの機能がModernツールキットに加わりました。例えば、フォームやグリッドでセル間の編集をナビゲートできるように、全てのコンポーネントがキーボード操作をサポートしています。またテーマAPIを大幅に拡張し、コンポーネントの外観をより制御可能にしました。

上記はModernツールキットでの新しい機能のハイライトです。本投稿では説明できなかった新しい機能も数多くありますので、ぜひ「What’s New In Ext JS 6.5」ガイドもご参照頂けますと幸いです。

全てのツールキットで新しいもの

それでは、ClassicツールキットとModernツールキットの両方に加えられた新しい機能と改善について見ていきましょう。

チャート

チャートにボックス・プロットとナビゲーター部品が加わりました。ナビゲーターを利用することでデカルト系チャートのx軸の可視範囲を指定することが可能です。

新しいボックス・プロットは複数のデータセットのデータを表示する用途に便利です。下記の例ではボックス・プロットをScatterシリーズと組み合わせて外れ値を表示しています。

上記のチャートは、注釈を簡単に追加できる新しいcaptionsコンフィグを活用しています。

    {
        captions: {
            title: 'Age of Nobel Prize winners by field',
            subtitle: '1901 to 2014'
        }
    }

それぞれ注釈はコンフィグオブジェクトを利用してカスタマイズが可能ですが、キャプションはテーマ機能で見た目を簡単に変えることができるため、基本的には必要ないでしょう。

D3アダプター

D3ベースのデータビジュアライゼーションをより簡単に利用できるようExt JSの「D3アダプター」パッケージを強化しました。Ext JS 6.5では、D3アダプターはD3のバージョン4のAPIを利用するようアップグレードしています。また、階層データと動作する組織図ビジュアライゼーション（下記参照）を追加しました。

ピボット・グリッド

「ピボット・グリッド」パッケージを利用することで大規模なデータセットの集計を表示できます。Ext JS 6.5では、Excelの表のフォームと似たtabularレイアウトが加わりました。下記のサンプルをご参照下さい。このレイアウトはClassicとModern両方のツールキットで利用できます。

またピボット・グリッドの中にウィジェットを埋め込むことができるようになりました。ティッカーまたはレーティング部品などを用いてより効果的なビジュアライゼーションを作成できるようになっています。またピボット・グリッドに行や列を開閉できる新しいコンフィグが加わりました。これによりデータの閲覧がより簡単で簡潔になります。

データ出力

「データ出力（Exporter）」パッケージを利用することで、様々なファイル形式でデータを出力することが可能です。Ext JS 6.5では、ピボット・テーブルの定義を出力できるようになりました。これは、出力したデータをMicrosoft Excelのピボットテーブルでそのまま利用できることを意味します。下記のxlsxファイルに出力した例では、最初のシートでピボットテーブルを、2つ目のシートでその元データを確認できるかと存じます。

現実的なサンプル – 従業員ディレクトリ

今回のリリースの一環で、現実のプロジェクトで開発されるものと類似したフルスタックのサンプルアプリを用意しました。コードはGitHubで公開しており、READMEファイルの指示に従ってアプリケーションを起動することが可能です。GitHubのリポジトリではExt JSのクライアントアプリケーションと共にNode.jsのバックエンドサーバーのコードを含めています。従業員ディレクトリアプリではModernツールキットを利用して異なるフォームに適応するUIを構築する方法を示しています。このアプリケーションはグリッドやリスト、マップ、データビュー、コンテナ、そしてレイアウトなどのExt JS 6.5のコンポーネントを利用しています。動作については下記をご参考下さい。

Sencha Cmd 6.5.1の新機能

Sencha Cmd 6.5は、JavaScript標準の最新機能を利用した、大規模でモダン、プログレッシブなWebアプリケーションの構築を支援します。新機能は以下の通りです:

ECMAScript 2015（またはES6）

Sencha Cmd 6.5は、モダンなJavaScriptのソースコードを機能の足りないブラウザ（例えばIE11のような）で動作するよう変換するトランスパイラをサポートします。これにより、アロー関数やletキーワード、オブジェクトの分割代入などのES6のクールな機能を活用してコードを書き始めることができます。Sencha Cmdはコードをどこでも動作するようコンパイルします。

内部的には、Sencha CmdはGoogleのClosure Compilerを利用してトランスパイルしており、Closureが提供する全てのポリフィルを活用しています。そのため、新しいArrayメソッドを利用する際にブラウザのサポートを心配する必要はありません。

トランスパイルが不要な場合もあるでしょう。Electronやモダンブラウザのみを対象とした場合などです。Sencha Cmdのコード圧縮機能は記述したES6のコードに適用しつつ、トランスパイラを無効にすることが可能です。必要な作業はapp.jsonにてトランスパイラとそのポリフィルにさようならを言う微調整だけです。

    "output": {
        "js": {
            "version": "ES6"
        }
    }

動的パッケージ読み込み

Sencha Cmdは数年に渡りパッケージというコンセプトをサポートしており、大規模なアプリケーションはクラスやスタイル、リソースをカプセル化するためにパッケージの仕組みを活用してきました。そして、そのパッケージ機能に全く新しい仕組みが備わりました – 動的です。

もし現在パッケージを利用しているのなら、app.jsonに”requires”の配列を確認できるでしょう:

    requires: [
        'dashboard',
        'settings',
        'users'
    ]

パッケージを動的読み込みに切り替えるには、単純にそれらの一部もしくは全てを”uses”配列に移動させ、新しいパッケージを”requires”に追加します:

    requires: [
        'package-loader'
    ],
    uses: [
        'dashboard',
        'settings',
        'users'
    ]

これらの変更の後、Sencha Cmdを利用してアプリケーションをビルドする際（下記参照）、アプリケーションと利用されるパッケージはそれぞれ別々のバンドルに分割されます。アプリケーションを読み込む時には、そのコードと依存するパッケージが含まれますが、usedパッケージは含まれません。それらのusedパッケージのJavaScriptやCSS、そしてresourcesは、ちょうど画像やその他のアセットと同じように、アプリケーションのbuildフォルダに格納されます。

準備ができた場合は、Ext.Package.load メソッドを実行することでパッケージを読み込むことが可能です。パッケージ・ローダーはパッケージのJavaScriptやCSSのアセット、そしてそれらが依存する他のパッケージを再帰的に読み込みます。

もしExt JSのルーティング機能を利用している場合は、パッケージを読み込むために、下記のような実装を行うことになるでしょう:

    routes: {
        ':type': {
            before: 'loadPackage',
            action: 'showView'
        }
    },

    loadPackage: function (type, action) {
        var view = this.getView(),
            pkg = this.getPackageForType(type);

        if (!pkg || Ext.Package.isLoaded(pkg)) {
            action.resume();
        }
        else {
            view.setMasked({
                message: 'Loading Package...'
            });

            Ext.Package.load(pkg).then(function () {
                view.setMasked(null);

                action.resume();
            });
        }
    },

動的パッケージ読み込みを使うことで、ユーザーの時間の真の節約ができるでしょう。全体の20%だけが必要な場合に、もはやアプリケーションの全てのバイトを待つ必要がありません。またSencha Cmdは全てのコードを”dev”ビルドで読み込み監視する必要がないため、開発者の時間の節約にも繋がります。

“app build”や”app watch”を切り替えるための新しいコマンドラインを利用して、外部のパッケージのビルドや監視を制御することが（必要であれば）可能です。例えば、アプリケーションと全ての外部パッケージの全てをビルドしたい場合は、–uses を追加します。

    sencha app build --dev --uses

もしくは、ある特定のパッケージをビルドしたい場合:

    sencha app build --dev --package=Users

ビルドしたい外部パッケージを明示することで、現在作業中の部分だけをビルドすることが可能なため、ビルド時間を大幅に削減できます。

お試し下さい

最初の一歩として、実際のシナリオを想定した複数の外部パッケージを扱うデモアプリを用意しました。 GitHubのリポジトリをご参照下さい。サンプルのREADMEファイルでは、参考のために他のビルドに切り替える方法も説明しています。

プログレッシブウェブアプリ

プログレッシブウェブアプリ（PWA）はモダンなWeb技術を利用してネイティブに近いユーザー体験を提供します。PWAにより、Androidユーザーの場合にはホームスクリーンにアプリをインストールするよう促すバナーを表示することができます。Service Workerの魔法とそのキャッシュ機能（現在はChromeとFirefoxのみサポートしています）により、アプリケーションはオフライン環境下でも動作します。

Sencha Cmdは事前にビルドされたService Worker（Googleの sw-toolbox) をベースにした）を利用してビルド処理を合理化します。Service Workerはapp.jsonで設定可能で、そのキャッシュマニュフェストはソースコード内の@sw-cacheコメントに基づいてSencha Cmdが追加します。

PWAのサンプル

プログレッシブウェブアプリがどのように動作するか紹介するためサンプルを作成しました。 GitHubのリポジトリを参照し、READMEの指示に従ってお試し下さい。GitHubのリポジトリにはExt JSのアプリケーションとNode.jsベースのバックエンドのサーバーが含まれています:

詳細については「What’s New in Sencha Cmd 6.5」ガイドをご参照下さい。

ありがとうございます

私たちは今回のリリースを本当に誇りに感じています。心からの感謝をSenchaのコミュニティとお客様に捧げます。皆様の長年のご愛顧、フィードバック、バグ報告が私たちにこの巨大なマイルストーンの達成を可能にしました。皆様がExt JS 6.5を利用して素晴らしいアプリ開発を楽しまれることを願うと共に Ext JSのフォーラムや Sencha Cmdのフォーラムでの皆様からのフィードバックを楽しみにしております。