WinJS 4.0プレビューバージョンの発表：ユニバーサルUX、AngularJSとの統合、更新されたListView

JavaScript 4.0（WinJS 4.0）用のWindowsライブラリのプレビューバージョンをご紹介します。 以前のリリース（WinJS 3.0）では、ブラウザ間の互換性に焦点を当てていました。 WinJS 4.0では、ライブラリがWindowsベースのアプリケーションとWebベースのアプリケーションの両方を開発するための優れたフレームワークであり続けるように、新しい機能を追加し始めました。







このリリースの準備では、コミュニティのフィードバックとアドオンに焦点を当て、いくつかの重要な領域に焦点を当てるのに役立ちました。

• インタラクションの普遍的な体験 -人々は、電話、タブレット、コンピューター、さらには部屋のテレビでさえ、自分のアプリケーションが同じ場所で動作することを望みます。 デバイスのフォームファクターは、人のニーズによりよく応えるために常に進化しています。仕事の生産性を高めるためにタブレットに接続されたキーボード、ソファに寄りかかって探索できるように電話をテレビに接続する場所コンテンツなど。 WinJSコントロールを使用すると、さまざまなサイズの画面で動作するだけでなく、さまざまな入力メソッドを使用できるレスポンシブアプリケーションを簡単に作成できます。 各デバイスおよびフォームファクターのインタラクションの体験を研ぎ澄まして、アプリケーション自体の作成に集中できるようにお手伝いします。
• 他者との優れた相互作用 -WinJSは互換性を考慮して設計されています。 WinJSとお気に入りのJSフレームワークを一緒に簡単に使用できるはずです。 たとえば、AngularJSのWinJSラッパーを使用すると、AngularJSプロジェクトでWinJSを透過的に使用できます。
• 強力なリストビュー-WinJSは、より優れたコントロールを提供することにより、アプリケーション開発をサポートする必要があります。 ListViewの実装は、パフォーマンスの点で大幅に最適化されており、幅広いシナリオをサポートしています。 スタイルの変更、リストの見出しとフッターのサポート、要素の選択の改善などの新機能を追加しました。

この予備バージョンを喜んで共有します。 問題が発生した場合は 、GitHubを通じて問題を報告するか報告してください。



お気に入りのパッケージマネージャー（Bower、npm、またはNuGet）、CDNへのリンク、またはWebサイトからZipアーカイブをダウンロードするか、リポジトリを複製してGitHubに独自のコピーを作成することにより、 今日WinJS 4.0プレビューの使用を開始できます。



さらに記事では、上記の焦点領域について詳しく説明します。 WinJS 4.0の新機能もお楽しみください。

ユニバーサルエクスペリエンス

コンピューティングデバイスのフォームファクターは進化し続けています。 最新のエコシステム内で成功するアプリケーションエクスペリエンスには、とりわけ以下が含まれます。

1. どの画面サイズでも良い仕事
2. すべての入力方法（キーボード、マウス、タッチスクリーンなど）のサポート

従来、レスポンシブWebデザインの実装は、最初のタスクに焦点を合わせていました。 優れたレスポンシブデザインでも2番目のポイントに対処する必要があると確信しています。 WinJSコントロールのユニバーサルデザインは、この2番目のステップを示唆しています。 WinJS 4.0では、現在のフォームファクターを考慮した新しいコントロールを追加し、既存のコントロールをより適応的にしました。 WinJSは、キーボード、マウス、タッチ入力、さらにはゲームパッド（新しいXYFocus機能を使用）で完全に動作し、すべての入力方法と互換性を維持しています。

新しいユニバーサルコントロール

通常、画面サイズとフォームファクターに適応するアプリケーションの開発は簡単な作業ではありません。 画面サイズとアスペクト比が変わると、アプリケーションは全体的な構成と個々のコントロールの両方で多くの変更を受けます。 これにはすべて特別なコードが必要です。 WinJS 4.0では、このような普遍的なエクスペリエンスを実装するために必要な作業量を削減する多くの重要なコントロールを追加しました。

WinJS SplitView

スプリットビューは、要素の適応的な構成であり、少し業界標準になりました。 以下のスクリーンショットに示すように、複合ビューを備えたアプリケーションを、左側にナビゲーションバー、右側にメインコンテンツを備えたアプリケーションとして説明します。 原則として、このナビゲーションパネルは、左上のボタンをクリックして開くか最小化できます。





SplitView、Toolbar、およびListViewを使用した汎用アプリケーションの標準構成



新しいWinJS SplitViewコントロールを使用すると、この動作をアプリケーションにすばやく実装できます。 この要素の柔軟性と機能により、アプリケーションは現在の画面サイズに簡単に適応できるため、携帯電話、タブレット、コンピューターなどのすべてをサポートできます。 以下のスクリーンショットでは、SplitViewがさまざまなモードで動作し、3つの異なる範囲の画面サイズをサポートしていることがわかります。





固定モードのSplitView





SplitViewオーバーレイ





「モバイル」構成のSplitView



SplitViewコントロールは、アプリケーションに汎用性を追加するための強力で効率的な方法です。 try.buildwinjs.comおよびSplitViewの例のメニューとコンテンツのアクションで試してみることができます。

Winjsツールバー

ユニバーサルアプリケーションを作成する別の複雑な側面は、コマンドインターフェイスです。 WinJS 4.0では、ToolBarというレスポンシブコマンドサーフェスを追加しました。 ToolBarには多数の優れた機能が含まれており、さまざまなフォームファクターのアプリケーション開発に合わせて独自に調整されています。 これらの機能はすべて、サンプルページで試すことができます 。

チームのスケーリングとオーバーラップ

WinJS ToolBarは、現在の画面サイズに対応する正しい数のコマンドを自動的に表示します。 これは、コマンドの非表示の優先順位付けを使用して行われます（デフォルトまたは選択）。 これにより、少ない労力で印象的な柔軟性が得られます。 サンプルToolBarを使用して、 サイトで自分で評価できます 。





新しいWinJS ToolBarコントロールの例

コンテンツダイアログ

ユーザーがダイアログのタブをクリックして、アプリケーションのランダムな要素に到達した時代は終わりました。 新しいWinJSコンテンツダイアログコントロールでは、タブを押すだけで、使用可能なオプションを切り替えることができます。 さらに、コントロールはそれ自体を調整し、画面のサイズに応じてコンテンツを配置します。 また、内部に任意のコンテンツを配置することもできます。これは素敵な小さなパンです。







新しいコンテンツダイアログで遊んでみてください。

XYFocus

新しいXYFocus機能により、特定のHTML要素グループ間を4方向に簡単に移動できます。 これは、ゲームパッドに典型的な入力モデルをサポートするという点で特に便利です。 この機能は、キーボードの矢印やw、a、s、dキーなどの適切なキーの組み合わせに簡単に投影できます。 ご想像のとおり、これにより、ゲームパッドのサポートの追加が簡単になり、最小限の労力でWinJS 4.0プレビューで利用できます。 XYFocusサンプルページのデモに従ってください 。

ピボットのタッチコントロールの機能強化

当初から、WinJSのPivotコントロールは、アプリケーションのナビゲーションを整理するための効果的なパラダイムを実装していますが、高度なジェスチャーコントロールはWindowsアプリケーションとInternet Explorerでのみ利用可能でした。 リリース4.0では、要素は視覚スタイルの更新、特にアダプティブヘッダー、および異なるブラウザーの同等の機能の両方を受け取ります。 Pivotの例を使用して 、 ページで自分で試すことができます。

他の人との素晴らしい交流

WinJSは、他のフレームワークと透過的にドッキングするように設計されています。 過去には、これは、 ReactJSやKnockoutJSなどの一般的なフレームワークとのコミュニティ製の相互運用性レイヤーを通じて追跡できました。 相互運用性を実証するために、AngularJSの新しいWinJSバインディングも開発しました。 多くのAngularユーザーがWnJSライブラリの機能について学ぶにつれて、このシナリオが非常に人気になることを願っています。



WinJS 4.0を使用すると、Angularプロジェクトは新しい機能の大きなリストを簡単に取得できます。 ストラップでできることをもう少し詳しく見てみましょう。

角度ディレクティブとしてのWinJSコントロール

Angularは、ディレクティブを使用してカスタムDOM要素を作成することにより、HTMLを拡張する強力な方法を提供します。 Angular-WinJSバインディングは、ディレクティブを介してWinJSフレームワークコントロールを公開し、開発者がAngularのようにそれらを使用できるようにします。

<win-rating max-rating=”5”></win-rating>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

角度ディレクティブとしてのWinJSレーティングコントロール

角度データバインディング統合

Angularは、強力な双方向データバインディングメカニズムを提供します。 バインディングに含まれる新しいWinJSコントロールディレクティブにより、使い慣れたバインディング機能を使用できます。 つまり、新しいWinJSディレクティブは、Angularからバインディングシステムに透過的に統合されます。 Angularを使用している場合、WinJSから新しいコントロールと機能のセットを取得したと言えます。

 <div ng-app="sample" ng-controller="sampleController"> <win-rating user-rating="rating"></win-rating> <p>Rating: {{rating}}</p> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 angular.module('sample', ['winjs']).controller("sampleController", function ($scope) { $scope.rating = 3; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

強力なリストビュー

ListViewはWinJSのアイコンコントロールです。 組み込みのキーボードサポート、優れたパフォーマンス、柔軟なスタイリング、優れたインタラクション設定により、コンテンツの仮想化されたプレゼンテーションを提供できることを常に誇りに思っています。 バージョン4.0では、使用可能な対話オプションを使用して作業を簡素化し、開発者から要求された機能も追加しました。

リストビューの更新

選択モデルの簡素化

WinJSが作成されて以来、マウスとタッチコントロールの両方の最適化はListViewの重要な部分でした。 多くの指のジェスチャが業界で標準化されたため、ListViewインタラクションモデルにいくつかの変更を加えました。 これらの変更の1つは、WinJS 2.0でアイテムをドラッグアンドドロップ（ドラッグアンドドロップ）するための長押しへの移行でした。



WinJS 4.0では、ListViewの相互作用モデルを再び単純化および改善します。 新しいモードのセットを以下に説明します。これらは概念的に簡単で、新しい選択マッピングのセットが含まれています。

選択シナリオ

読み取り専用：

選択を完全にオフにする



シングルチョイス（シングル）：

ユーザーは相互に排他的なオプションのグループから選択します



多肢選択（マルチ）：

ユーザーは、オプションのグループから1つ以上のアイテムを選択します。



拡張選択（拡張）：

キーボードを操作する際に上級ユーザーに馴染みのある方法。 指のみ、または修飾キーなしのマウスのみの操作モードでは、上記の単一の選択肢として動作します。 ShiftキーとCtrlキーを使用すると、矢印キーまたはマウスを使用して複数選択できます。



この設計を実現するために、swipeBehaviorプロパティを削除しました。 これは、「選択してスワイプ」ジェスチャと「選択して右クリック」ジェスチャが、ListViewでサポートされなくなったことを意味します。 これにより、ListView選択モードでの作業が大幅に簡素化されます。

ListViewで選択を表示する新しいオプション

ListViewの例で試すことができます。

交替

要素の偶数または奇数に応じて、ListView要素に目的のスタイルを簡単に追加する方法があるかどうかをよく尋ねられました。 これにより、要素の可読性が向上し、一般的に美観上の理由で使用できます。 これは、win-container-everおよびwin-container-addクラスを使用して簡単に実行できます。 これらのクラスを使用すると、この重要なタスクの実装がはるかに簡単になります。

新しいListViewフッターによるプログレッシブロード

コンテンツの仮想化で発生する一般的なパラダイムは、ユーザーがリストの最後に近づいたときに、アイテムのリストの追加コンテンツを自動的にリストする機能です。 これにより、使用時の負荷が削減され、大量のデータのロード時間が短縮されます。 多くの場合、このアプローチは、ニュースフィード、関連性で並べ替えられたリスト、検索結果などを操作するときに使用されます。



WinJSの登場以来、このテンプレートの最適な実装について内部的に議論してきました。 ヘッダーとフッターの追加により、実装がさらに簡単になりました。



プログレッシブダウンロードの例は、当社のWebサイトで入手できます 。

進む

WinJSプロジェクトチームのメンバーは、GitHubコミュニティを通じて受け取ったサポートとフィードバックに心から感謝しています。



WinJS 4.0の完全リリースは、今年後半に利用可能になります。 私たちは、WinJSをあらゆる場所のWeb開発者のニーズを満たす優れたオープンソースJavaScriptライブラリとして開発するというアイデアで、将来を見据えています。 登録リクエストを送信し、GitHub経由で問題を報告し てください 。 一緒に4.0を改善しましょう。