この記事は Olga Petrova による Modernize your application with Ext JS 7.0 の抄訳です Senchaのエンジニアとして、私は顧客を訪問したり、テレビ会議での顧客と画面共有するなどの対応に多くの時間をかけて、優れたUIの構築を支援しています。私たちの顧客ベースに見られる傾向の1つは、これらのWebアプリケーションの寿命を延ばす必要性です。 Webアプリケーションを介して顧客や従業員にリーチするビジネスの必要性は確立されており、ほとんどのビジネスセクターに共通しています。企業は、構築する各Webアプリにより多くの投資を行っており、アプリが社内およびクライアントベースの両方で長期的な価値を提供することを期待しています。Webアプリは新しいエンタープライズアプリケーションになりつつあります。 私は、Ext JSバージョン5.xおよび6.xのアプリをたくさん見てきました。それらは機能豊富で業務に必要な機能を備えているものの、すこし古くなり始めています。Webアプリに慣れるユーザーが増えるにつれて、品質、使いやすさ、アプリケーションのルックアンドフィールへの要求水準は非常に高くなります。実際、従来のアプリの多くは、完全な手直しが必要なくらい古くなっています。 Ext JS 5またはExt JSをClassic Toolkitアプリケーションで使用している場合、Ext JS 7では、わずか2行のコードでアプリケーションのルックアンドフィールをモダナイズできるシンプルで低コストの方法が提供されます！ Ext JS 7に移行するとClassic Toolkitの新しいモダンなマテリアルテーマを使用できるようになります。このテーマは、Googleが開発したマテリアルデザインを利用します。マテリアルデザインは、アプリケーションの視覚的なコンポーネントとレイアウト、可能な相互作用、色、形状、動きなどを統一感のある品質で表現できます。マテリアルデザインは、アプリの視覚的な側面だけでなく、動きも対象にしています。この新しいテーマを興味深いものにしているのは、インターフェイスモーションに関するガイドラインであり、開発者が明るくて光沢のある新しいUIを作成するだけでなく、モーションを使用してエンドユーザーにはるかに改善されたエクスペリエンスを提供する機会を与えています。 マテリアルデザインを最大限に活用するには、アプリケーションの2行のコードを文字通り変更する必要があります。 まず、package.jsonファイルで新しいNPMパッケージ@sencha/ext-classic-theme-material を参照します（modernツールを使用している場合）： "dependencies": { "@sencha/ext": "~7.0.0", "@sencha/ext-classic": "~7.0.0", "@sencha/ext-classic-theme-material": "~7.0.0", ... },…

Ext JS 7.0のアーリーアクセス版が利用可能となったことをお知らせいたします。このリリースでは、Modern ツールキットの機能強化エンハンスメントに重点を置いた、機能強化とエキサイティングな新機能が満載です。このリリースのハイライトを紹介します。 Modernツールキットの新機能やアップデートされた機能 フォームグループ（チェックボックス、ラジオボタン） チェックボックスとラジオボタンのコレクションを容易にグループ化し、グループレベルでのレイアウトのカスタマイズや値の検証などのアクションをサポートします。 パンくずリスト（ブレッドクラム）ツールバー 階層情報をパンくずリスト（ブレッドクラム）形式で表示できるツールバーを追加しました。 アコーディオンレイアウト 複数のパネルに対する折りたたみや展開の機能を提供します。 グリッドの機能強化 利用者が行やセル内のコンテンツを容易に移動、並べ替え、挿入できるように、行のドラッグアンドドロップ編集をサポートします。 グリッドでの折りたたみ可能なグループ化機能の追加 情報をグループ化して容易な操作で整理、表示する機能を追加しました。 Tree View 向けの Drag and Drop プラグイン Tree View でユーザがツリー表示のメニューを容易に移動や並べ替え可能となるプラグインを提供しました。 その他のアップデート Modern Toolkitでのタブインデックスやフォーカス移動へのキーボード操作のサポートによる操作性改善 アプリケーションを英語以外の言語に容易にローカライズするためのローカライゼーションパッケージをModern Toolkiに追加（locale パッケージには、オランダ語、デンマーク語、イタリア語、チェコ語、ノルウェー語、フィンランド語、ロシア語、韓国語、日本語、および簡体字中国語を含む） ミニマルな外観と大胆な色使いのMaterialテーマが、Classic Toolkitにも追加 その他の不具合の修正を含む Ext JS 7.0 アーリーアクセス版を試用するには Ext JS…

企業システムでは様々な大量のデータ（取引先情報、受発注情報、出荷情報その他）から必要な情報を取り出して使用します。従来のC/S型ネイティブアプリの場合であれば、こうした処理はたやすかったでしょう。 しかし、ブラウザベースのユーザーインターフェイスを前提としたWebシステムの場合では、設計や実装が変わってきます。効率よく大量のデータをWebシステムで扱うには、どのようしたらよいのでしょうか。   かつてのWebシステムで用いられていたアプローチの一つは、JSPやPHP、Springなどで作成したHTMLページのテンプレートでデータの一覧表示を行うページをサーバ側で生成するという方法です。クライアントのブラウザはサーバから配信された完パケ状態のHTML画面を表示することが主な役割でした。この画面にページネーションをつけることでページ単位の画面切り替え機能を提供し、またサーバから取得するデータ量を適度に制限できました。しかし求める情報にたどり着くために複数回のページ切り替えを伴い、そのつど画面全体の再描画が必要になるなど、UXやパフォーマンス上の問題がありました。   これに対して Sencha Ext JS で取れるアプローチでは、JavaScriptで画面を描画するWebアプリケーションを Ext JS フレームワークで作成し、使用するデータを提供するWeb APIを組み合わせて必要な情報を画面の必要な場所に動的に差し込むような実装が行えます。   この方法は、いわゆるデスクトップOSでデータベースを利用するネイティブアプリケーションの実装と同様に、ユーザが画面上で行う操作にあわせて必要なデータだけをAPIから取得でき、利用者の利便性が大きく向上します。 またスマートフォンやタブレットなどのモバイルデバイスではデータ一覧表示の操作に伴って動的にデータの読み込みと表示の更新を行うようなUIにより、ページ単位ではない操作を提供していますが、Sencha Ext JS により、そのようなUIの実装もたやすく実現できます。   2019/7/30に開催するセミナー「大容量データのハンドリング、グリッド、グラフも！Web開発の限界点を知る、Senchaによる企業システム開発」では、企業向けWebアプリケーションのUI実装におけるデータハンドリングについてフォーカスし、最新の Ext JS による解決方法を紹介、検証します。 同時に、Webアプリケーション構築の開発サイクル全体で、どのような点に注意すべきか、陥りがちな落とし穴とその対策についても紹介します。 セミナーの詳細とお申込みはこちらのページをご覧ください。

図のような、従来型の古いWebアプリケーションを少しずつ機能強化してきて、パフォーマンスに難がある状態で、全面的な刷新はできないけれど、システムを止めずになんとかモダンでサクサク動くアプリケーションに変えていくにはどうしたらいいでしょうか？ 観念して大規模刷新計画の稟議を書きますか。 マイクロサービスという考え方が注目されています。要約すれば、アプリケーションを、結合度の低い複数の小さいサービスの集合として構成するアーキテクチャですが、この「結合度の低さ」が、システムの柔軟な改修を可能にするのです。 例えば、上記のシステムは、性能の問題のある箇所を優先して刷新するアプローチが考えられます。 Webアプリケーション全体の刷新はまだ先ですが、とりあえず目先の問題は解決できます。重要なのは、これが目先の問題の解決だけでなく、将来への布石であるという点です。 次のステップは、他の箇所も含めてWeb API化して、新しい統一されたインターフェイスでサーバー機能を利用できるようにすることです。すでに最初のステップで、優先すべき箇所はWeb API化していますので、作業の重複はありません。 そしてこれらのWeb APIを利用するかたちで、Webクライアントの刷新を行います。ここは、Senchaを使いたいところですね。 システムの刷新は部分的に継続されていきますが、ひとつひとつの小さな改善が、将来の資産へとつながっていくという考え方が非常に建設的に見えます。 今回このようなアプローチを、関連するツールやフレームワークの利用を含めて紹介するセミナーを開催します。ぜひご参加ください。 セミナーの概要： ケースで学ぶエンタープライズシステム構築法セミナー 「企業向けWebシステム構築はマイクロサービスが決め手！」 主催：エンバカデロ・テクノロジーズ 日時：2019年6月20日（木）14:00～17:00（13:40受付開始） 会場：エンバカデロ飯田橋オフィス　セミナールーム（東京・飯田橋） 参加費：無料（事前登録制） 詳細・お申込みはこちらから https://jp.staging.sencha.com/company/events/web-appdev-w-microservices/

Ext JS Upgrade Adviser 1.0 リリース Ext JS Upgrade Adviser 1.0 が利用可能となったことをお知らせします。 Ext JS Upgrade Adviserは、Ext JS 4.xおよび5.xアプリケーションをスキャンし、最新のExt JSバージョン（6.x）にアップグレードする前に対処すべきソースコード内の問題点を検出しレポートします。Ext JS Upgrade Adviser では以下の機能が提供されます。 Ext JS ESLint PluginはExt JSアプリケーションに対してコマンドラインから実行したり、Visual Studio CodeなどのIDEに統合する形で利用可能 Ext JS ESLint Plugin ESlintルールにより Ext JS 6.x で削除、プライベート、非推奨となったメソッド、設定、プロパティを検知可能 Ext…

この記事はMarc GusmanoによるExtWebComponents Early Access is Now Availableの抄訳です Sencha ExtWebComponentsのアーリーアクセス版が利用可能になったことをお知らせします。ExtWebComponentsには、何百ものビルド済みユーザーインターフェースコンポーネントが用意されています。主要フレームワークで構築されたWebアプリケーションだけでなく、フレームワークを全く用いていないWebアプリケーションにも、すんなりと組み込むことができます。   Sencha ExtWebComponentsアーリーアクセス版の特徴 フィルタリングやグリッドのロック機能を含む高機能なモダンブラウザ用グリッドにより、ビッグデータのパワーを活用 非定型レポートを構築するピボットグリッドコンポーネントにより、ユーザーがデータを細かく分析可能 チップ、マルチセレクトコンボボックス、カラーピッカー、タブ、ダイアログ、シート、メニュー、ツールバー、リスト等、115を超える数のマテリアルデザインを踏襲したコンポーネントにより、美しくダイナミックアプリケーションを作成 レスポンシブデザインに対応したレイアウトにより、様々な大きさの画面やデバイスに対応するアプリケーションを開発 豊富なフォームフィールドにより、使いやすい入力フォームを作成 カレンダーコンポーネントにより、アプリにインタラクティブな予約機能を追加 豊富なチャートやD3（データ駆動型ドキュメント）準拠のビジュアライゼーションコンポーネントにより、アプリに見栄えのよいデータ視覚化機能を追加 標準搭載のWebpackプラグインにより、アプリケーションのビルドを圧縮及び最適化 ExtWebComponents Kitchen Sinkに用意された数百ものコンポーネントのサンプル Sencha ExtWebComponentsアーリーアクセス版を試用するには Sencha ExtWebComponentsアーリーアクセス版のトライアル版をダウンロードしてください。 ExtWebComponents Kitchen Sink（サンプル集）にアクセスして使用例をご覧になるか、GitHubからダウンロードしてください。 ExtWebComponentsの入門ガイドをご参照ください。 Getting Started with ExtWebComponents and JavaScript（JavaScript用ExtWebComponents入門） Getting Started with…

この記事はAlan Weissによる When to Choose ExtAngular の抄訳です。 2018年から2019年にかけては、「JavaScriptの時代」というだけではなく、「シングルページ アプリケーションの時代」でもあるようです。シングルページアプリケーションを明確にサポートしているフレームワークの一つは、Angularです。Angularは、TypeScriptを採用し、オープンソースで開発されているフロントエンドのWebアプリケーションプラットフォームです。「The State of JavaScript 2018」（2018年版JavaScriptの現状）の記事によると、Angularの重要性と人気が高まっている理由は多岐に渡ります。 [caption id="attachment_29083" align="alignnone" width="1024"] http://出典: https://2018.stateofjs.com/front-end-frameworks/angular/[/caption] TypeScriptへの厳格な準拠、（特にシングルページアプリケーションでの）パフォーマンス重視、オブジェクト指向プログラミングの強力な規範、Googleによる支援等、フロントエンドフレームワークにおいて、Angularが首位のReactに次ぐ人気を維持しているのは当然のことです。インターフェースに広く普及している「モデル・ビュー・コントローラー」（MVC）パターンを採用しているため、開発者は比較的容易にPHPや.NETからAngularへ移行できます。そのため、法人や企業向けの開発でAngularが採用される事例が増えています。 Angularのチームで開発広報担当を務めるスティーブン・フライン氏は、次のように述べています。 「Angularは、ネットワーク接続性、状態管理、言語選択、ビルドツール等において、開発者に業界標準を提供することを目指しています。Angularの開発を安定した信頼性の高いペースで続けられるように、これらの標準は継続的に相互検証されています。」 エンタープライズ向けアプリケーションの開発者は、標準搭載ですぐに利用でき、ほぼ動作検証が完了している業界標準の恩恵を享受することができます。 SenchaのUIコンポーネントは、Angularの世界でも確実に役立ちます。Senchaが提供するExtAngularは、Angularアプリケーションで容易に利用できるビルド済みUIコンポーネントを115個以上含んでいます。ExtAngularはExt JS Enterpriseエディションでご利用いただけます。 新しいホワイトペーパー「When to Choose ExtAngular」を用意しています。プログラマーがJavaScriptやAngularを好む理由や、高性能で多機能なユーザーインターフェース及びフロントエンドの開発時に生じる問題をExtAngularで解決する方法について、それらの分析を掲載しています。無料のホワイトペーパーをダウンロードして、意思決定のプロセスに役立ててください。 「When to Choose ExtAngular」をダウンロードする。

この記事は Alan Weiss による The Hidden Value of Ext JS Enterprise: A Look at What’s Inside の抄訳です。 ソフトウェア企業がライセンスを複数の価格帯に分けるのは、もっともな理由があります。誰もが全ての機能を必要としているわけではないということです。開発者は、不要なソフトウェアの費用を負担したくありませんし、そうすべきでもありませんよね。ソフトウェアはインストールされているだけで、ファイルシステムの領域を占有しますから。 しかし、コストをかけて実際に得るものと得られるかもしれないものを再検討してみることが、最も生産的な時間のひとつになる場合があります。納期と競争力を常に求められている開発者がSenchaの提供するExt JS Enterpriseエディションに付属しているツールの機能をよく知ることで、大量のデータを取り扱うエンタープライズ型アプリケーションを構築、テスト、そして配備する時間の節約につながるかもしれません。 概要: それぞれのエディションに付属するツール Ext JSは特出したフレームワーク及びグラフィックスライブラリというだけにはとどまりません。開発者の設計、構築、デバッグ、テストから、データ分析までも支援するツールのセットなのです。いくつかのツールはExt JSPro エディションにも付属していますが、Ext JS Enterpriseエディションでは、より多くのツールがご利用可能となっています。 Pro Enterprise Ext JS HTML5/JavaScript（フレームワーク及びUIコンポーネントライブラリ） ✓ ✓ Sencha Cmd(ビルド最適化ツール) ✓ ✓ Ext JS…

この記事は Sendeep Adwankar による Announcing Ext JS 6.7 Visual Tooling Updates の抄訳です。 見栄えの良いExt JSアプリを開発するための迅速な方法を提供する、ビジュアルツールのExt JS 6.7対応バージョンをリリースしました。Architect 4.2.5 はアプリの画面開発を見たままに行うことをサポートし、Themer 1.3.5は色やフォントなどをプレビューしながらのテーマ作成をサポートし、Inspector 6.0.3 は Ext JS 6.7 アプリの挙動を調査確認するためのビジュアルなUIを提供します。 Architect, Themer, Inspector のダウンロード ExtReact または Ext JS Enterprise のお客様: Architect、Themer、Inspector は Ext JS 6.7の 30日間無料トライアルに含まれます。 ExtReact 6.7…