Daizen Ikehara

インフラジスティックス・ジャパン株式会社でデベロッパー エバンジェリストとして活動しています。
Infragistics Developer Tools 2014 Volume1 – WPF, Silverlight その 2

今回も Infragistics WPFInfragistics Silverlight の 2014 Volume 1 における機能拡張をご紹介します。

参考元の記事:  Brian Lagunas - What’s New in Infragistics WPF and Silverlight 14.1

ブランディング & スタイリング サポートの拡充とコントロールの機能拡張

前回は Office ライクなコントロールをご紹介しましたが、この 2014 Volume 1 リリースにおいて Offie 2013 テーマ を提供します。また、リボンコントロールやリボン ウィンドウも Office 2013 らしい表現ができるようになりました。

Office 2013 テーマ

WPF プラットフォームにおいて下記のような Office 2013 テーマを提供します。各コントロールが Office ライクな外観に一変していることをご確認いただけます。

Office 2013 Theme 

xamRibbon and xamRibbonWindow

Office 2013 テーマを提供したことに併せて xamRibbon や xamRibbonWindow も Office 2013 に沿うようにスタイリングを行いました。Office 2013 では以前までのバックステージと外観が異なりますが、我々のコンポーネントで 2010 バックステージを実現されていた場合は Office 2013 テーマを適用することでコードを変更することなく、2013 スタイルへと変更することが可能となりました。

更に、xamRibbon のタブ領域の右側にカスタム コンテンツを配置できる、TabItemAreaToolbar を追加しました。Office 2013 ではアカウント情報を下記のように右上に表示しており、同様の表現を行うためのサポートとしてこの新機能を提供します。

xamRibbon Office 2013 backstage

xamRibbonWindow では、まさに Excel, PowerPoint, Word, Outlook といった各 Office アプリケーションのウィンドウを実現することができます。同じことを WPF のデフォルト ウィンドウで実現することをご想像いただければどれだけの開発生産性の向上につながるかをご理解いただけるかと思います。また、この xamRibbonWindow はリボン使用を前提とはしているものの、状況に沿ってリボンを使用せず、外観(クロームやステータスバー)のみを再現するために利用することもできるようになっています。

xamRibbonWindow accent color

新しいデフォルト スタイル - xamDataChart, xamFunnelChart, and xamPieChart

最後に多くのお客様よりデフォルトテーマが暗い、細かいというご意見を頂戴していました。今回のリリースではより明るく、不要な補助線などを削除したデフォルトスタイルを提供します。もちろん、以前のような外観にも設定することはできますが、コントロールをツールボックスからドロップした際の表示や、そのままの設定でお使いいただく場合のスタイルが向上した形となります。

xamDataChart:

xamDataChart - default style

xamFunnelChart:

xamFunnelChart - default style

xamPieChart:

xamPieChart - default style

いかがでしょうか。デスクトップでタッチ対応を行い、かつ Office のようなスタイルを持ったアプリケーションを実現されたいという場合、WPF は非常に魅力的なプラットフォームとなったと考えています。

今回ご紹介したコントロールは WPF、Silverlight 共に共通のインストーラーが用意されています。下記よりダウンロードをお願いします。(サイトへの登録が必要となります。)

Platform(Web)インストーラーをダウンロード フルインストーラーをダウンロード

2014 Volume1 関連エントリ:

WPF

Windows Forms

Ignite UI

Infragistics Developer Tools 2014 Volume1 – WPF, Silverlight その 1

今回からしばらく Infragistics WPF、Infragistics Silverlight の 2014 Volume 1 における機能拡張をご紹介します。

参考元の記事: Brian Lagunas - What’s New in Infragistics WPF and Silverlight 14.1

この 2014 Volume 1 リリースではたくさんの機能の拡張が行われ、新コントロールのプレビュー版や MVVM サポートの拡充、更にはスタイリング サポートなどが追加されています。

そして、他のプラットフォーム同様に一貫して我々は下記の点について改善を図っています。

  1. タッチ対応、Office ライクな アプリケーションの実現
  2. ブランディング & スタイリング サポートの拡充
  3. 開発生産性の向上

タッチ対応、Office ライクな アプリケーションの実現

通常、CTP (Community Technology Preview) 版のコントロールはエントリの最後でご紹介していますが、今回のコントロールは非常に有用なため、最初のトピックとしました。CTP とは開発初期段階にあるビルドを提供することで、我々が今後製品化を行うための有益なフィードバックを集めることを目的としています。この後に紹介するコントロールについて機能的なご要望が出てきた際には Product Ideas でご登録いただけます。もちろん、日本語でのリクエストにも対応していますのでご活用ください!

xamDiagram – CTP

xamDiagram は Microsoft Visio の機能を実現したコントロールです。この WPF xamDiagram コントロールを利用することで、フローチャートや組織図、クラス図などのデザイン、編集機能をユーザーに提供する。

xamDiagram - activity diagram

この CTP 版には Circle, Square, Rhombus, and Triangle などの主要なシェープを 10 種類用意しています。もちろん、このシェープは今後追加され、それぞれを接続することが可能となります。この接続線についても 28 種類の始端と終端が存在し、7 種類の線種が用意されています。

また、定義されているシェープだけではなく、カスタム シェープを利用することができるため、「オブジェクトを配置し、接続する」という要件にマッチする様々な図表を実現することができます。

xamDiagram - LinqToSql Object Model

更に xamDiagram のキャンバスは上記の図のようにナビゲーション ウィンドウを表示させたり、マウス ホイールでのズームイン/ズームアウトをサポートしており、MVVM のサポートも念頭において開発を行っています。その他、コピー、ペースト、切り取り、削除、編集、元に戻す、やり直し、全て選択などのコマンド群も用意されているので、このコントロールを使ったデザイン画面を作成しやすくなっています。

最後に我々のモットーである、パフォーマンス第一主義に基づき、CTP の段階においても最速のダイアグラム コントロールを目指しています。ぜひ、お試しください。

xamSpreadsheet – CTP

先ほどの Visio ライクなコントロールに続き、CTP 第 2 弾としてご紹介するのは Microsoft Excel ライクなスプレッドシート コントロールです。我々は様々なプラットフォームで「データ グリッド」を提供していますが、多くのお客様より「Excel の挙動を実現するには?」というお問い合わせをいただきます。グリッドには Excel ライクな機能を多く実装していますが、この 2 つの UI パターンは必要とされた背景や機能に大きな隔たりがあるため、開発者に多くのコーディングを強いるものでした。また、それだけの労力をかけたにも関わらず、再現性の問題点からグリッドを利用しないという結果も少なからず生まれていました。そこで、我々は「Excel を再現する」コントロールの開発に着手しました。

xamSpreadsheet

この xamSpreadSheet コントロールは我々が長年提供してきた Excel ライブラリーの上に成り立っています。これの意味すぐことは、RTM 版においてこのコントロールを利用することで、Excel ドキュメントの作成、ロード、編集、保存をシームレスに行えるという点です。今までのグリッドでの運用は一旦ドキュメントのデータを DataTable や他のデータ ストア クラスに落とし込み、データバインドを行っていました。xamSpreadSheet では、Excel ドキュメントそのものを「そのまま」コントロール上に再現することができるようになるのです。

残念ながら 2014 Volume 1 のリリース段階では開発初期段階ということもあり、機能はあまり多くはありませんが、セルの結合や背景イメージの設定、セルのフォーマットなどを再現できます。

現在のターゲットは 2014 Volume 2 のリリースですが、この大きな可能性を持つコントロールをぜひお試しいただき、Product Ideas にも様々なご意見をお寄せください!

xamRadialMenu

Ignite UI や Windows Forms でも提供しているラジアルメニューを WPF および Silverlight にも正式版として提供します。タッチを念頭においただけではなく、マウスやキーボードの入力にも対応している UI パターンをご活用ください。

xamRadialMenu

このコントロールでは項目数や回転角度、大きさなどの設定やラジオ の他にタッチ サポート、マウス & キーボード サポート、MVVM サポートなどが含まれており、タッチ ベースのアプリケーションにおいてユーザー 体験を向上させることになるでしょう。

 

さて、今回ご紹介したコントロールは WPF、Silverlight 共に共通のインストーラーが用意されています。下記よりダウンロードをお願いします。(サイトへの登録が必要となります。)

Platform(Web)インストーラーをダウンロード フルインストーラーをダウンロード

2014 Volume1 関連エントリ:

Windows Forms

Ignite UI

Infragistics Developer Tools 2014 Volume1 – Windows Forms その 3

最終回の今回は開発生産性の向上についてお届けします。

元の記事: Jason Beres - What's New in Windows Forms in 14.1

開発生産性の向上

こちらのエントリ同様 Windows Forms においても必要な情報を早く取得し、すばやく開発を行えるように様々な取り組みを行いました。

テンプレート ギャラリーでのプロジェクトテンプレートの提供

Windows Forms 用にプロジェクトテンプレートには次の 3 つのテンプレートが追加されており、Infragistics Windows Forms コントロールを利用した完全なアプリケーションのサンプルのコードを解析できるようになっています。このアプリケーションでは一部の機能とスタイリングが施されているため、我々のツールセットを利用してここまでできる! という指針となるでしょう。

  • Inventory Management
  • Outlook Inspired Template
  • Project Manager

 image

 image

新しいサンプル ブラウザー

2014 Volume 1 ではサンプル ブラウザーが一新されました。ショーケース サンプルの一覧や新機能などを素早く探しだし、更にコードをコピーすることができるようになっています。

image

image

このサンプルには 13.2 以前のサンプルも提供されており、今後のリリースではこれらのサンプルからもコードのコピーを行えるように継続的に刷新を行っていく予定です。

いかがでしたでしょうか、歴史ある Infragistics Windows Forms ツールセットもまだまだ現役です!

最新版は下記よりダウンロードいただけます。(サイトへの登録が必要となります。)

Platform(Web)インストーラーをダウンロード フルインストーラーをダウンロード

2014 Volume1 関連エントリ:

Windows Forms

Ignite UI

Infragistics Developer Tools 2014 Volume1 – Windows Forms その 2

前回に引き続き、今回も Windows Forms 2014 Volume 1 の新機能をお届けします。

元の記事: Jason Beres - What's New in Windows Forms in 14.1

ブランディング & スタイリング サポートの拡充とコントロールの機能拡張

機能的に優れたアプリケーションを提供することは必須ですが、それよりもアプリケーションの第一印象がそのもののに対する評価を決めてしまう場合があります。我々は Windows Forms において他のプラットフォームに負けないようなルック アンド フィールを提供できる機能を提供してきました。2014 Volume 1 ではテンプレート ギャラリー(その 3 で紹介予定)で提供されているテンプレートに予めデザインを施し、また新たなテーマの追加を行いました。

新コントロール - Windows Forms ピボット グリッド

jQuery、WPF、Silverlight などで提供してきたピボット グリッドがいよいよ Windows Forms に登場しました。このコントロールは Excel のピボット テーブルを模したコントロールであり、データのクロス集計をサポートします。

機能拡張 - 右から左方向へのサポート

日本語だけではなく、複数の言語にアプリケーションを対応させる場合、アラビア語やヘブライ語など特定の言語では右から左への表示が必須となります。2014 Volume 1 ではエディター コントロールに対してこのサポートを行いました。対応しているコントロールは下記の通りです。

  • WinButton, WinCalculatorDropDown, WinCalendarCombo, WinCheckEditor, WinColorPicker, WinCombo, WinComboEditor, WinCurrencyEditor, WinDateTimeEditor, WinDropDownButton, WinFontNameEditor, WinFormattedLinkLabel, WinFormattedTextEditor, WinLabel, WinMaskedEdit, WinNumericEditor, WinOptionSet, WinProgressBar, WinScrollbar, WinTextEditor, WinTimeSpanEditor, WinTimeZoneEditor, WinTrackBar

機能拡張 – スピン ボタンの加速

上下、左右の矢印をクリックすることで値を増減させるスピンボタンですが、値の幅が大きい場合、一定の速度ではエンド ユーザーにストレスを与えてしまいます。今回の機能拡張では一定以上連続して増減が行われた場合に自動的に値の変化速度を増加させます。対応コントロールは下記の通りとなります。

  • WinCalculatorDropDown, WinCalendarCombo, WinColorPicker, WinCombo, WinComboEditor, WinCurrencyEditor, WinDateTimeEditor, WinFontNameEditr, WinFormattedTextEditor, WinMaskedEdit, WinNumericEditor, WinTextEditor, WinCalculatorDropDown, WinTimeSpanEditor, WinTimeZoneEditor

機能拡張 - タブの追加ボタンの設置

最近の Web ブラウザーのようにタブの一覧のすぐそばに新しいタブを追加するボタンを配置できるようになりました。

機能拡張 - リボン タブの表示非表示制御

スペースの節約のため、リボン タブの表示・非表示を制御できるようになりました。

機能拡張 – ツリー コントロール ノード デザイナーの変更

これまでのデザイナーをより使いやすくし、ノードの設定をより簡単に行えるようになっています。

その他の拡張

  • ツールの表示優先度機能
    ツールバー利用時にすべてを表示する領域がない場合、よく使われているツールを優先的に表示する機能をが追加されました。

  • WinCombo & WinComboEditor オート コンプリート利用時の分音記号の除外設定
    オート コンプリート機能を利用した際、ドイツ語などで用いられている分音記号を結果から除外できるようになりました。

  • WinGrid 行削除時の確認ダイアログの制御
    これまでは WinGrid で行をユーザーが削除する場合デフォルトで確認ダイアログを表示させていましたが、プロパティが追加され表示・非表示を制御できるようになりました。

  • WinGrid 初回ソートの順序の設定
    通常、初回ソート時は昇順でソートされていましたが、これを初回に降順に設定できるようになりました。

  • WinSpellChecker 下線のオフセット制御
    スペルミスを表示する下線のオフセットを設定できるようになりました。

  • WinTree ノードチェックボックスの同期
    WinTree コントロールで親のチェック状態と子供のチェック状態を同期させることができるようになりました。この設定によりトップノードをチェックすると配下のノード全てがチェックされるというシナリオをプロパティ設定のみで実現可能となりました。

 

いかがでしたでしょうか。Windows Forms におけるブランディング サポートは弊社がどこよりも自信をもってご提供できる価値です。まだまだ Windows Forms プラットフォームを活用される皆様、ぜひご利用ください。

最新版は下記よりダウンロードいただけます。(サイトへの登録が必要となります。)

Platform(Web)インストーラーをダウンロード フルインストーラーをダウンロード

2014 Volume1 関連エントリ:

Windows Forms

Ignite UI

Infragistics Developer Tools 2014 Volume1 – Windows Forms その 1

今回から Infragistics Windows Forms の新機能についてご紹介します。

元の記事: Jason Beres - What's New in Windows Forms in 14.1

ほかのプラットフォーム同様、2014 Volume 1 では次の領域に対して拡張が行われています。

  1. タッチ対応、Office ライクな アプリケーションの実現
  2. ブランディング & スタイリング サポートの拡充
  3. 開発生産性の向上

その 1 は タッチ対応やOffice ライクなアプリケーションについてご紹介します。

タッチ対応、Office ライクな アプリケーションの実現

今日のアプリケーションではハードウェアの進化に伴い、「タッチ」に対してどう対応していくのかという課題を抱えています。我々は過去 3 リリースにわたって Windows Forms におけるタッチ サポートを進めてきました。2014 Volume 1 においてもこれまで同様にタッチ サポートを拡充していきます。このリリースから提供されている Office 2013 リボンにおいてもこのタッチ サポートを行っています。

各 UI パーツがタッチ対応となるようにサイズを自動的に変更

Office 2013 リボンでのタッチサポート

Office テーマの拡充

Tile Panel - タッチサポートの追加

WinTilePanel コントロールが タッチ & ジェスチャー コントロールの仲間入りをしました。次の各 UI 要素でタッチ ジェスチャーがサポートされています。

  • タイル ヘッダー (Tile header area) - タッチでのドラッグ & ドロップ
  • 状態ボタン (State button) – タッチによる最小化、最大化
  • クローズ ボタン (Close button) – タッチによるタイルのクローズ

このようにタッチ、Office ライクな UI を Windows Forms で! という要件がある場合、この Infragistics Ultimate の Windows Forms コントロールが最適です。ぜひ、お試しください。

最新版は下記よりダウンロードいただけます。(サイトへの登録が必要となります)

Platform(Web)インストーラーをダウンロード フルインストーラーをダウンロード

2014 Volume1 関連エントリ:

Ignite UI

Infragistics Developer Tools 2014 Volume1 – Ignite UI, ASP.NET その 4

We added 3 really important (and highly requested) features in the jQuery grids.

前回に引き続き Ignite UI, ASP.NET 2014 Volume1 の新機能をご紹介します。最終回の今回は各コントロールの機能の拡張部分についてご紹介します。

元のエントリ:

Jason Beres - What's New in Ignite UI, ASP.NET in 14.1

 

jQuery グリッド・階層グリッドの機能拡張

今回、多くのご要望を頂いた 3 つの重要な機能を拡張しています。

  1. 非表示列の固定列機能の有効化(見えないが固定されている)
  2. ツールチップ のサポート
  3. 再バインディング時における状態の保持 - フィルタリング、グループ化、行選択、セル・列選択、ソートなど
  4. ロードオンデマンド字のデータロードオプション:
    • Automatic - スクロールバーが表示行の後半に差し掛かった際に自動的にロード
    • Button - ユーザーが “更に読み込む” といったようなボタンをクリックし、任意のタイミングで続きの行をロード

jQuery HTML エディターの機能拡張

モダン UI に合うようにデフォルト スタイルを更新しました。

jQuery ピボット グリッドの機能拡張

jQuery XMLA データソースがキューブで定義された KPI (Key Performance Indicator) をビルトインでサポートします。下記の例のようにデータの視覚化に寄与します。

さらに、XMLA データ ソースがリモート ADOMD.NET データ プロバイダーをサポートしました。

jQuery アップロード コントロールの機能拡張

igUpload コントロールが Web ファーム / Web Garden Internet Information Services (IIS) の構成をサポートするようになりました。

新コントロール -  カラー ピッカー

カラー ピッカー コントロールが新たに提供され、エンドユーザーに色を選択する方法を提供できるようになりました。

新コントロール – ポップオーバー

igPopover が RTM となり、ツールチップライクな情報の提示方法を提供します。

新コントロール – ツールバー (CTP)

カスタム ツールバーをアプリケーションに追加できるようになりました。

新コントロール – 分割ボタン(CTP)

このコントロールは 分割されたドロップダウン部分が用意され、最初のドロップダウンで選択された項目に応じて 2 番目の項目が変更されるという類のオペレーションをサポートします。

既存のコントロールへの機能拡張や新しいコントロールが盛りだくさんでお届けしました。

 

さて、今回も含めて 4 回に渡り ASP.NET / ASP.NET MVC / jQuery 製品の新機能をご紹介してきました。2014 Volume 1 は様々な拡張が行われていますのでぜひ、ご活用ください。

zip パッケージをダウンロード フルインストーラーをダウンロード

さて、次回は最終回です。各コントロールの機能の拡張部分をご紹介します。

2014 Volume1 関連エントリ:

Infragistics Developer Tools 2014 Volume1 – Ignite UI, ASP.NET その 3

前回に引き続き Ignite UI, ASP.NET 2014 Volume1 の新機能をご紹介します。今回は開発生産性向上の取り組みについてです。

元のエントリ:

Jason Beres - What's New in Ignite UI, ASP.NET in 14.1

全てのデバイス、全てのプラットフォームでの開発生産性の向上

われわれは開発者が記述すべきコード量を削減したいと常々考えており、2014 Volume 1 ではこの問題を一つの大きなテーマとして取り組みました。「どこ」に「なに」を記述すればよいかということを判断する時間を削減することで市場へのリリース時間が結果として短縮されると考えています。

Infragistics Template ギャラリー in Visual Studio

Infragistics Developer Tool をインストールすると、Visual Studio にテンプレート ギャラリーが組み込まれます。「ファイル」- 「新しいプロジェクト」でプロジェクト一覧を表示させると、下記のようなプロジェクトテンプレートを選択することができるようになります。ここから我々が作成したサンプル アプリケーションをビルド可能な状態で再現することができます。

image

リリース段階では次のプロジェクトが用意されています。

  • ASP.NET Energy Dashboard
  • Ignite UI Healthcare PhoneGap App
  • MVC 3, 4 & 5 ASPX & Razor Starter Kits

image

WYSIWYG HTML5 / jQuery ページ デザイナー

Visual Studio を利用した HTML5 / jQuery アプリケーションの作成でおそらく 1,2 に入る課題は Windows Forms や ASP.NET、WPF のような WYSIWYG デザイナーが用意されていないことでしょう。多くの .NET 開発者が UI デザイナーになれている昨今、時代を逆行するような開発手法は開発生産性を落としてしまうことにもつながります。我々は以前から Control Tuner のようにコントロール単位でのデザイナーを提供してきましたが、今回のリリースではページ全体をデザインできる WYSIWYG デザイナーをご利用いただけるように開発を進めています。画面はこのような感じになります。

日本の皆様へのアクセスのご提供については後日ご案内させていただきます。

jQuery チャート コントロール用の新しいデフォルト テーマ

開発生産性を高めるという点において、チャートのデフォルト テーマも更新されました。これは様々なお客様の声から不必要な軸線や色設定をより多くの方にマッチするように変更し、デフォルトからのカスタマイズ量を低減させる試みがなされています。

新しいテーマは以前のテーマに比べて下記の点を変更しています:

  • 全ての軸線に関して線の描画を行うかどうかを自動的に決定するように変更されました。これは不必要な部分でのレンダリングを行わないことによってチャートのパフォーマンスを向上させています。
  • 全ての軸線は補助線を除いて最初から表示されています。
  • カテゴリー シリーズ(Line, Columns, Area) において水平方向の主目盛り線のみ描画されます。
  • Bar シリーズのみ、垂直方向の主目盛り線が描画されます。Scatter, Polar, Radial シリーズは全て描画されます。
  • カテゴリ軸の目盛り幅は 5 ピクセルに設定されます。
  • 水平および垂直主補助線はピクセル単位の近しい値に丸められます。(例 2.213 は 2 として描画)
  • ラベルの初期マージンが 5 ピクセルに設定されます。
  • エリア シリーズ(Area, Spline Area, Polar Area, etc.) はエリア領域を半透明色で塗りつぶします。
  • 軸線やラベルのフォント、カラーパレットを変更しました。

全ては以前のテーマよりも見た目をより良いものとすることが目標です。

.

いかがでしょうか?開発生産性向上を実現するために、機能だけではなく、すぐに使えるようになる仕組みをこれからも追加していきます。ぜひ、お試しください。

zip パッケージをダウンロード フルインストーラーをダウンロード

さて、次回は最終回です。各コントロールの機能の拡張部分をご紹介します。

2014 Volume1 関連エントリ:

Infragistics Developer Tools 2014 Volume1 – Ignite UI, ASP.NET その 2

その 1 に引き続き Ignite UI, ASP.NET 2014 Volume1 の新機能をご紹介します。今回はブランディング & スタイリング サポートの拡充についてです。

元のエントリ:

Jason Beres - What's New in Ignite UI, ASP.NET in 14.1

ブランディング & スタイリング サポートの拡充

素晴らしいアプリケーションは正しく動作することだけではなく、外観の統一がとれていることも要件の一つです。Ignite UI では jQuery UI / jQuery Mobile のテーマ ローラーに対応していますが、今回 ASP.NET も含めさらにスタイリング サポートを拡充いたしました。

jQuery & HTML5 テーマ

今回、iOS 7 のルック アンド フィールを実現できるテーマを新たに追加しました!

ASP.NET デフォルト テーマの更新

ASP.NET コントロールでは Ignite UI と外観を合わせるようにデフォルト テーマを更新しました。

ASP.NET 製品の Bootstrap スタイル サポート

さらに ASP.NET コントロールにおいて Twitter Bootstrap のテーマをサポートすることが決定しました。この取り組みによって世界に公開されている何千何百ものテーマを適用できるようになります。ASP.NET 製品に Twitter Bootstrap のテーマを適用できるツールを提供していく予定です。

こちらでプレビューをご確認いただけます。(英語記事)

http://www.infragistics.com/community/blogs/alex_kartavov/archive/2014/04/21/asp-net-controls-and-bootstrap-styling.aspx

このツールを ASP.NET / jQuery 製品で利用できるように完成させることが本年 2014 年の大きなロードマップとなります。結果、Bootstrap スタイリング、テーマ ローラースタイリング、AppStylist スタイリングなど Web アプリケーションにおいて様々な外観設定を行うためのフレームワークをご提供します。

いかがでしょうか?ただ機能を有しているだけではなく、外観を統一することによってエンドユーザーの反応は全く違うものになると考えています。ぜひ、お試しください。

zip パッケージをダウンロード フルインストーラーをダウンロード

次回は機能の拡張だけではなく、開発者にとっての生産性向上の取り組みをお伝えします。お楽しみに!

2014 Volume1 関連エントリ:

Infragistics Developer Tools 2014 Volume1 – Ignite UI, ASP.NET その 1

いよいよ Infragistics Developer Tools の最新版リリースの季節となりました。今回は Ignite UI、ASP.NET 2014 Volume1 の最新機能を複数回に分け、ご紹介します。

元のエントリ:

Jason Beres - What's New in Ignite UI, ASP.NET in 14.1

このリリースでは主に 3 つの領域に注力し機能拡張を行いました。

  1. タッチ対応、Office ライクな アプリケーションの実現
  2. ブランディング & スタイリング サポートの拡充
  3. 開発生産性の向上

この 3 つの領域は 主要なデスクトップ、Web、モバイル(ネイティブ/ハイブリッド) 各プラットフォームで拡張されています。また、いくつかのプラットフォームではコードの共有による共通機能としても実現されています。

タッチ対応、Office ライクな アプリケーション

Web アプリケーションにとって、ブラウザー ベース、ハイブリッドにかかわらず、タブレットやスマートフォンでのタッチ インタラクションに対応していることはもはや必須となりました。タッチを前提としたコントロール、あるいはタッチ対応機能を実装したコントロールを提供することで最高のタッチ体験をご提供します。

OneNote MX ライクな新 jQuery Radial Menu コントロール

jQuery Radial Menu コントロールは下記のように円形で表示されるコンテキスト メニューです。もともとの出自は Windows 8/8.1 において Windows ストア アプリケーションとして公開されている OneNote MX で提供されているタッチ操作を考えた新しい UI と言えるでしょう。中心点から等距離に各項目が配置されているため、それぞれの項目を選択する場合の指の動作や時間に差が生まれません。この UI パターンを利用し、数値設定、色の選択や個別の動作を実装することが可能となります。

jQuery Ignite UI igGrid、igHierarchicalGrid へのタッチ機能の追加

行削除がよりタッチ フレンドリーとなりました。

  • セル編集モード時に左または右にスワイプすることで行削除ボタンを表示
  • 行編集モード時に行削除ボタンを完了、キャンセルボタンと共に表示

ASP.NET WebDataGrid、WebHierarchicalGrid の行編集 UI の更新

行編集時の表示が利用者がより使いやすくなるように変更されました。行編集時に現在編集中の行がはっきりとわかるようにすべてのエディターがより強調され、利用者が見失わないようになっています。更に、編集「完了」と「キャンセル」が常に編集されている行に表示されるようになったため、編集を容易に終了することができます。また、削除ボタンの一つのオプションとして、該当する行にポップオーバーするように出すこともできるようになりました。これらは全て人がタッチ操作で我々のグリッドを扱う際の助けとなるでしょう。

さて、初回ということで今回はタッチ対応、Office UI を Web 製品で実現した新機能・コントロールをご覧いただきました。下記よりトライアル版をダウンロードいただけますので、ぜひ、お試しください。(サイトへの登録が必要となります。)

zip パッケージをダウンロード フルインストーラーをダウンロード

次回は 2014 Volume1 で新たに追加されたブランディング & スタイリング サポートについてご紹介します。お楽しみに!

[Win] WinGrid – KeyActionMapping 一覧を表示 [Tips]

WinGrid をはじめとした Windows Forms コントロールではコンポーネントに対してあらかじめキーのマッピングが行われています。たとえば

  • Enter キーで確定
  • Escape キーで編集キャンセル

といったよくあるようなキー設定が行われています。

グリッド自体のキーマッピングは下記のヘルプドキュメントに記載されていますが、実際にコントロールから抜き出すことも可能です。

ヘルプ – WinGrid KeyActionMappings

今回のコードはこんな感じに

DataTable dt = new DataTable();

private void Form1_Load(object sender, EventArgs e)
{
            
    dt.Columns.Add("KeyCode");
    dt.Columns.Add("ActionCode");
    dt.Columns.Add("StateRequired");
    dt.Columns.Add("StateDisallowed");
    dt.Columns.Add("SpecialKeysRequired");
    dt.Columns.Add("SpecialKeysDisallowed");

    foreach (var action in this.ultraGrid1.KeyActionMappings)
    {
        dt.Rows.Add(new object[] { 
            action.KeyCode,
            action.ActionCode,
            action.StateRequired,
            action.StateDisallowed,
            action.SpecialKeysRequired,
            action.SpecialKeysDisallowed
        });
    }

    this.ultraGrid1.DataSource = dt;
    this.ultraGrid1.DataBind();
}

実行結果はこちら。

image

エクスポート可能なようにもしました。

サンプル プロジェクト

上記を実行させる場合はトライアル版が必要になります。

ダウンロード

[SharePoint] iOS 用の Office と SharePlus - 雑感

もうすでに様々なところで話題になっていますが、Microsoft さんが iPad 向けの Office (Word / Excel / PowerPoint) の公開や、Office Mobile for iPhone の無料提供を開始されました。

Office for iPad については日本国内への展開は今後ということですが、今回無料で使えるようになった Office Mobile for iPhone を試してみました。

AppStore – Microsoft Office Mobile

利用には Microsoft アカウントが必要ですが、OneDrive への接続も可能で個人利用を行う場合は十分なのではないでしょうか。

一方、ビジネス利用に関しては Office 365 サブスクリプションが必要とのことです。

    •Office 365 Small Business Premium
    •Office 365 Midsize Business
    •Office 365 Enterprise E3、E4 (エンタープライズおよび公共機関)
    •Office 365 Education A3、A4
    •Office 365 ProPlus

    MSDN サブスクリプションで提供されている Office 365 のアカウントを利用して SharePoint サイトのドキュメントの一覧を表示させてみました。

    もとのサイトはこちら

    image

     

    ドキュメント ライブラリはこちら

    image

    Office for iPhone で見てみると…

    20140402_055824000_iOS 20140402_055828000_iOS

    もちろん、Office ということで、閲覧と簡単な編集ができるようになっています。

    表示:

    20140402_061150000_iOS

    編集:

    20140402_061157000_iOS

    Office for iPad は iPad 専用というだけあってさらに完成度が高く、Microsoft さんの本気度を感じます。

    これで弊社の SharePlus のようなツールは不要… となってしまうわけにはいかないので、ここではエンタープライズ利用といった観点の機能を一つご紹介します。

    次の画像は Office for iPhone でのリスト一覧ですが、明らかにモバイル利用しないだろう、あるいはさせたくないようなフォルダまで表示されてしまいます。

     

    image

     

    SharePlus にはエンタープライズ利用を年頭においていくつかの管理機能を備えていますが、その一つに SharePlus 利用時における表示制御機能があります。SharePoint の権限ベースではなく、アプリケーション全体を通してモバイルでは利用させたくないサブサイトやリストをあらかじめ SharePoint 側のリストで定義することができます。

    これは MobileNavigation という名前のカスタムリストを利用して制御をおこないます。実際のリスト例はこちら

    image

     

    SharePlus はこのリストで指定されたリストのタイトルと Hidden フィールドの値に合わせて、表示・非表示を切り替えます。

    SharePlus で同じサイトのリスト一覧を表示させた場合はこちら。「アプリ パッケージ」や「スタイル ライブラリ」などモバイル利用では不要となったリストが非表示になり、そもそもアクセスもできなくなっています。

    20140402_055943000_iOS

    この MobileNavigation ではリスト単位でのオフライン利用の可否や、SharePlus でのアクセス時に利用されるデフォルトのビュー指定など、表示制御以外の項目を用意されています。

    簡単な例ですが、管理機能は企業導入の際に検討すべき項目です。SharePlus エンタープライズ版では様々な管理機能を提供しています。

    両方のアプリケーションの連携ということで、項目の一覧表示を SharePlus で行い、Office for iPhone / iPad で閲覧することも可能です。残念ながら編集機能の連携ができないため、閲覧のみにとどまってしまいますが、競合関係というよりはシーンに合わせて使い分けていくようになるのではないでしょうか。(個人的には編集機能の連携ができると弊社としてはうれしいのですが…)

     

    さて、この SharePlus ですが、近いうちにバージョンアップを予定しています。様々な新機能でさらなる価値を提供させていただく予定です。お楽しみに!

    2014 年 4 月期 Microsoft MVP 再受賞のご報告

    MVP_FullColor_ForScreen

    本年も昨年に引き続き Microsoft MVP を受賞させていただきました。

    Microsoft アワードプログラムとは

    昨年までは Client App Dev というカテゴリーでしたが、本年より Client Development MVP となり、さまざまなクライアント テクノロジに引き続き触れていきたいと考えています。

     

    今後ともよろしくお願いいたします。

     

    池原 大然
    デベロッパー エバンジェリスト
    インフラジスティックス・ジャパン(株)
    Microsoft MVP for Development Platforms – Client App Dev 2010/04 – 2014/03
    Microsofr MVP for Client Development 2014/04 – 2015/03

    [KnockoutJS] MVP Community Camp 2014 で登壇しました! [jQuery]

    2014 年 03 月 22 日に開催された MVP Community Camp 2014 において「Knockout.js を利用したインタラクティブ Web アプリケーション開発」というトピックでセッションに登壇させていただきました。

    当日のスライドはこちらで公開させていただきました。

    以前からいくつかのエントリでご紹介もしていますが、Knockout.js を利用することで、データの変更を UI に通知し、自動的に更新を行うことができます。弊社の jQuery 対応製品である、Ignite UI においてもいくつかのコントロールでサポートしています。

    Infragistics download

    似たようなトピックで 2014 年 04 月 05 日にわんくま同盟東京勉強会でも登壇させていただきます。こちらもよろしくお願いします。

    Knockout.js 関連エントリ

    [HTML] クライアント側データ コンポーネント – igDataSource [jQuery]

    2014 年 02 月 28 日に開催されたEnterprise × HTML5 Web Application Conference 2014 において「Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現」というセッションを行わせていただきました。

    当日のセッション紹介させていただいた Ignite UI にはクライアント側でデータの操作を行う igDataSource が提供されています。このコンポーネントを利用するとクライアント側でソートやページングなどの処理が行えるようになります。

    まずはデータのロードからですが、単体のサンプルのため、ロード対象の JSON は予め読み込んでいます。もちろん igDataSource では Web サービスからロードさせることも可能です。

    JSON

    var customers = [{"CustomerID":"A1",
    	"CompanyName":"喫茶たいむましん",
    	"CompanyNameKana":"きっさたいむましん",
    	"ContactName":"林  千春"
    	,"ContactNameKana":"はやし ちはる",
    	"ContactTitle":"店長",
    	"Address":"佐賀市長瀬町 23-XX",
    	"City":"佐賀市",
    	"Region":null,
    	"PostalCode":"840-0853",
    	"Country":"佐賀県",
    	"Phone":"(0952)26-64XX",
    	"Fax":null},
    	 //省略

    ロードし、テンプレートに結果を流し込んだのちに HTML テーブルに出力させます。結果セットは igDataSource.dataView() メソッドで呼び出します。

    // テンプレート
    var template = "<tr>" +
        "<td>${CustomerID}</td><td>${CompanyName}</td>" +
        "<td>${ContactName}</td><td>${Country}</td>" +
        "<td>${City}</td><td>${Address}</td>" +
    "</tr>";
    
    ds = new $.ig.DataSource({
        type: "json",
        dataSource: customers,
        callback: function (success, error) {
            if (success) {
                // テンプレートに結果セットを流し込む。
                var rows = $.ig.tmpl(template, ds.dataView());
    
                $("#igTable").empty();
                $("#igTable").html(rows);
            }
            else {
                alert(error);
            }
        }
    });

    image

    今回、HTML テーブルを結果セット表示 UI として利用していますが、配列をデータソースとして取り扱う UI ウィジットであればどんなものにも利用することが可能です。

    次にこの情報をソートさせます。この場合は HTML テーブルへの働きかけを行うのではなく、データ コンポーネントに対してソート api を呼び出します。

    // 都道府県名、および 顧客番号をキーとしてソートする
    ds.sort([{ fieldName: "Country" }, { fieldName: "CustomerID" }], "asc", true);
    
    // 結果セットをテンプレートに流し込む
    var rows = $.ig.tmpl(template, ds.dataView());
    
    $("#igTable tbody").empty();
    $("#igTable").html(rows);

    ページングについても同様です。

        // ページング
        $("#igPagingEnable").click(function () {
    
            var myPagingSettings = {
                enabled: true,
                pageSize: 10,
                pageIndex: 0,
                type: "local"
            };
    
            // ページングを有効化
            ds.pagingSettings(myPagingSettings);
            ds.pageIndex(pageIndex);
    
            var rows = $.ig.tmpl(template, ds.dataView());
    
            $("#igTable tbody").empty();
            $("#igTable").html(rows);
        });
    
        $("#next").click(function () {
    
            // 次のページ分のデータを読み込む。
            ds.nextPage();
            var rows = $.ig.tmpl(template, ds.dataView());
    
            $("#igTable tbody").empty();
            $("#igTable").html(rows);
        });
    
        $("#prev").click(function () {
                    
            // 前のページ分のデータを読み込む。
            ds.prevPage();
            var rows = $.ig.tmpl(template, ds.dataView());
                   
            $("#igTable tbody").empty();
            $("#igTable").html(rows);
        });
    });

    実行結果はこちら

     

    サンプル

    Ignite UI のダウンロードはこちら

    トライアル版はこちらよりダウンロードいただけます。

    download-button

    Ignite UI 2013 Volume2 新機能エントリ

    Knockout.js 関連エントリ

    [XAML] xamDataChart - Marker のデータ コンテキスト その2 [Tips]

    前回は XamDataChart のマーカーをカスタマイズする際に有用なオブジェクトをご紹介しましたが、今回は更に一歩進んで下記の要件を満たします。

    • 特定のデータ点のみマーカーを表示したい。

    上記の用件を満たす実装例としてはチャートにバインドするデータにこの表示、非表示を制御するプロパティを追加し、その情報をマーカー側で取得するというものになります。

    チャートにバインドされるデータ点のクラス

    public class ChartData : INotifyPropertyChanged
    {
        private string label;
        public string Label
        {
            get { return this.label; }
            set
            {
                if (this.label != value)
                {
                    this.label = value;
                    NotifyPropertyChanged();
                }
            }
        }
    
        private int value;
        public int Value
        {
            get { return this.value; }
            set
            {
                if (this.value != value)
                {
                    this.value = value;
                    NotifyPropertyChanged();
                }
            }
        }
    
        // データポイントマーカーの表示・非表示状態を保持
        private bool isVisible;
        public bool IsVisible
        {
            get { return isVisible; }
            set
            {
                if (this.isVisible != value)
                {
                    this.isVisible = value;
                    NotifyPropertyChanged();
                }
            }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

    そして、サンプルデータクラスでは、閾値を保存しておきます。

    public class ChartSampleData : List<ChartData>, INotifyPropertyChanged
    {
        // 基準値
        private int threshold;
        public int Threshold
        {
            get { return threshold; }
            set
            {
                if (this.threshold != value)
                {
                    this.threshold = value;
                    NotifyPropertyChanged();
                }
            }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    
        public ChartSampleData() { }
    
        public ChartSampleData(bool isGeneratingSample)
        {
            if (isGeneratingSample)
            {
                Random rand = new Random(DateTime.Now.Millisecond);
    
                // 基準値を設定
                this.Threshold = rand.Next(30);
    
                // チャート項目の初期化
                this.AddRange(Enumerable.Range(1, 20)
                    .Select(i => new ChartData
                    {
                        Label = i.ToString(),
                        Value = rand.Next(30),
                        IsVisible = true
                    }));
    
                // しきい値の判定
                this.Where(p => p.Value < this.Threshold)
                    .ToList().ForEach(i => i.IsVisible = false);
            }
        }
    }

    次に XAML 側ですが、前回のマーカーテンプレートで使用していた Grid の Visiblity プロパティに先ほどの IsVisible をバインドさせます。また、フレームワークから提供されている BooleanToVisibilityConverter を利用します。

    <ig:LineSeries.MarkerTemplate>
        <DataTemplate>
            <!-- マーカーの表示非表示を制御 -->
            <Grid Visibility="{Binding Path=Item.IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
                <Ellipse Width="20" Fill="LightBlue" Height="20"></Ellipse>
                <!-- こちらに固有のマーカーを設定 -->
                <TextBlock HorizontalAlignment="Center" 
                            VerticalAlignment="Center"
                            Text="{Binding Path=Item.Value}" />
            </Grid>
        </DataTemplate>
    </ig:LineSeries.MarkerTemplate>

    ここまでの実行結果

    image

    閾値(この場合は 15)よりも小さいデータ点についてはマーカーそのものの表示を行いません。

     

    さて、今のままでは閾値が数値で表示されているだけなのでわかり辛い表現になってしまします。そこで、基準線を表現できる、ValueOverlay を使用します。

    <ig:ValueOverlay Axis="{Binding ElementName=axisY}"
                    Value="{Binding Path=Threshold}"
                    Thickness="5"
                    Brush="Red"
                    DashArray="1" />

    実行結果を見るとよりわかりやすくなっています。

    image

    完全な XAML

    <Window
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:sys="clr-namespace:System;assembly=mscorlib"
            xmlns:local="clr-namespace:XamDataChart_MarkerTemplate"
            xmlns:ig="http://schemas.infragistics.com/xaml"
            x:Class="XamDataChart_MarkerTemplate.MainWindow"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <BooleanToVisibilityConverter 
                x:Key="BooleanToVisibilityConverter"/>
            <ObjectDataProvider x:Key="ChartData" 
                                ObjectType="{x:Type local:ChartSampleData}">
                <ObjectDataProvider.ConstructorParameters>
                    <sys:Boolean>True</sys:Boolean>
                </ObjectDataProvider.ConstructorParameters>
            </ObjectDataProvider>
        </Window.Resources>
        <Grid DataContext="{Binding Source={StaticResource ChartData}}">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <ig:XamDataChart  Grid.Row="1">
                <ig:XamDataChart.Axes>
                    <ig:CategoryXAxis 
                                      x:Name="axisX" ItemsSource="{Binding}"
                                      Label="{}{Label}" />
                    <ig:NumericYAxis x:Name="axisY" />
                </ig:XamDataChart.Axes>
                <ig:XamDataChart.Series>
                    
                    <ig:LineSeries 
                                    Title="出荷数量"
                                    ItemsSource="{Binding}"
                                    ValueMemberPath="Value"
                                    XAxis="{Binding ElementName=axisX}"
                                    YAxis="{Binding ElementName=axisY}" 
                                    >
                        <ig:LineSeries.MarkerTemplate>
                            <DataTemplate>
                                <!-- マーカーの表示非表示を制御 -->
                                <Grid Visibility="{Binding Path=Item.IsVisible, 
            Converter={StaticResource BooleanToVisibilityConverter}}">
                                    <Ellipse Width="20" Fill="LightBlue" Height="20" />
                                     <!-- こちらに固有のマーカーを設定 -->
                                    <TextBlock HorizontalAlignment="Center" 
                                                VerticalAlignment="Center"
                                                Text="{Binding Path=Item.Value}" />
                                </Grid>
                            </DataTemplate>
                        </ig:LineSeries.MarkerTemplate>
                    </ig:LineSeries>
                    <!-- オーバーレイ -->
                    <ig:ValueOverlay Axis="{Binding ElementName=axisY}"
                                Value="{Binding Path=Threshold}"
                                Thickness="5"
                                Brush="Red"
                                DashArray="1" />
                </ig:XamDataChart.Series>
            </ig:XamDataChart>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="閾値:" VerticalAlignment="Center" />
                <TextBlock Text="{Binding Path=Threshold}" 
    			VerticalAlignment="Center"  />
            </StackPanel>
        </Grid>
    </Window>

    さらにこの閾値を実行時に変更し情報を反映させることも可能です。詳細は下記のサンプル ソリューションを参照してください。

    サンプル ソリューション

    上記サンプルを動作させる場合は Infragistics Ultimate トライアル版をダウンロードいただき、Infragistics WPF をインストールいただく必要があります。

    download-button

    関連エントリ