June 2009 - 投稿

前回予告したように、DevDays5で使用したBINGO用デジタルスロットの作成手順を数回に分けてご紹介していきます。

 ビンゴを試してみる・・・Silverlight3 betaが必要です

 

まず前提として必要条件を。

部分的にPerspective3Dを使っていたりするのでSilverlight3betaで作っていますが、その部分を抜けばSilverlight2でも問題ないかもしれません。

また、DataVisualizationについては製品をお持ちでない方はトライアル版でお試しください。→コチラよりダウンロード可能です。

 

ゲージコントロール xamWebGauge

まず、BINGOアプリの肝となるゲージコントロールについて簡単に。

xamWebGaugeは、NetAdvantage Silverlight DataVisualizationに含まれるコントロールで、数値指標値を視覚的にわかりやすく表現することを目的としています。

大きく分けて3種類のゲージスタイルが用意されています。

一つ目は リニア ゲージと呼ばれる、線形のスケール内で指標を示すもので、シンプルな温度計やボリュームメーターなどの表現に使われます。これは xamWebLinearGauge コントロールが担当します。

リニア ゲージ

二つ目はラジアル ゲージという円形スケールの中にマーカーを配置するもので、自動車のスピードメーターでおなじみの表現方法です。これは xamWebRadialGauge コントロールが担当します。

ラジアル ゲージ

最後に、今回使うのがデジタル ゲージで、LEDなどで数字や文字したイメージを再現します。パチンコ屋でもよく見かけるやつです。これはxamWebSegmentedDisplay コントロールが担当します。

デジタル ゲージ

 

ゲージの配置とセグメントの種類

BINGOでも使っている、このデジタル ゲージの使い方をご紹介します。すごく簡単です。

まずVisual Studio で Silverlight アプリケーションを作成し、必要な参照設定を追加します。

ゲージに必要なアセンブリは、下の図の2つです。

ゲージの参照設定追加

つぎに、XAMLに名前空間の定義を追加します。

<UserControl x:Class="DigitalGauge.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:igGauge="clr-namespace:Infragistics.Silverlight.Gauge;assembly=Infragistics.Silverlight.DataVisualization.Gauge.v9.1"        
    Width="400" Height="300">

 

では、画面内にxamWebSegmentedDisplayコントロールを追加してみましょう。

まずは基本的な使い方です。下のようにすると、3ケタの枠で777と表示できます。

<igGauge:XamWebSegmentedDisplay x:Name="seg" SegmentMode="SevenSegment" Digits="3" Text="777" />

777

SegmentModeというプロパティがありますが、数値のみを表示するときはSevenSegment(7セグ)がシンプルで良いです。

SegmentModeにはもうひとつ、ForteenSegment(14セグ)も指定でき、こちらはアルファベットも表示することができます。

<igGauge:XamWebSegmentedDisplay x:Name="seg" SegmentMode="FourteenSegment" Digits="5" Text="START" />

START

もしこのセグメントのデザインをもっとオリジナルなものにしたい場合は、テンプレートを使ってStyleを変更することができます。

よりLEDなスタイル

このStyleのソース

 

簡単なサンプル

では、デジタル ゲージを使ったサンプルにしてみましょう。

ボタンクリック時に0~999のランダムな数字を表示する簡単なスロットマシーンです。

(実行にはSilverlight3 beta プラグインが必要です)

シンプルスロット(Silverlight3 betaが必要)

 

このコードは以下のとおり。

とくに難しいところはないですが、xamWebSegmentDisplayの表示値を受け取るプロパティはTextなので、文字列として設定する必要がある点に注意してください。

 

XAMLコード

<UserControl x:Class="DigitalGauge.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:igGauge="clr-namespace:Infragistics.Silverlight.Gauge;assembly=Infragistics.Silverlight.DataVisualization.Gauge.v9.1"        
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="250"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <igGauge:XamWebSegmentedDisplay x:Name="seg" SegmentMode="SevenSegment"  Digits="3" Text="000" Grid.Row="0" Margin="10"/> 
        <Button x:Name="slot" Content="SLOT!" FontSize="20" Grid.Row="1" Click="slot_Click" Margin="10"/>
    </Grid>
</UserControl>
コードビハインド
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace DigitalGauge
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private void slot_Click(object sender, RoutedEventArgs e)
        {
            var r = new Random();
            var num = r.Next(0, 999);
            this.seg.Text = string.Format("{0,3}", num);
        }
    }
}
  

このようにゲージコントロール自体はとても簡単に使えますので、ぜひお試しあれ!

次回は、BINGOアプリの仕組みをもう少し掘り下げてみたいと思います。

先週のDevDaysでは、実に多くの皆様にご来場いただきありがとうございました!!

ゴージャスな会場 マイクロソフト市橋様の基調講演

私はSilverlightのBIとLOBでの活用にスポットを当てたセッションを担当し、前半はBIでの事例紹介ということでTDKラムダ株式会社の片寄様にご紹介をいただき、また後半は今夏発売予定のNetAdvantage Silverlight LOB の機能紹介という構成にしてみました。

片寄様には「ながらBI」のキーワードのもと、活きたBI実現のために必要な要素をお話いただきました。とくに、「対話」の実現の重要性と、結果として得ることのできる「UX」というお話はとても印象に残っています。また、FSDAシステムの中でのNetAdvantageのチャートコントロールの活用もご紹介いただきました。

LOBの部分ではグリッドコントロールの機能とパフォーマンスのデモ、そしてタイル・ビューやOutlookバーなどのコントロールを組み合わせたアプリケーション例をお見せしましたが、(セッション中にも言いましたが)時間の関係上、技術的な内容まで十分フォローができなかったとは思います。その辺は今後のアカデミアやBlogにてフォローアップしていきたいと思っています。

ちなみに次回アカデミアは7/8(水)、大阪で開催します。現在登録受付中ですので関西エリアの方はぜひご参加ください!!

 

xamWebGridコントロールの機能デモはこんなイメージ

xamWebGrid機能デモ 

xamWebTileViewコントロールを使った業務アプリ画面の例

業務アプリ画面

 

いただいたアンケートの中でもっとも反響が大きかったのが、最後の余興で使ったBINGOアプリケーションについてでした(笑)

NetAdvantage for Silverlight Data Visualizationのゲージコントロールと、Silverlight3の機能を使って数時間で作った簡単な例だったのですが、結構盛り上がってよかったです(BGMのスパルタンXのおかげでしょうか:D)。

↓ こんな感じ。Silverlight3betaのプラグインが入っていればクリックすると実行できます。BGMは外してあるので職場でもご安心を(笑)

ビンゴアプリを起動! 

 

せっかくのゲージコントロールの活用例ということで、今後連載的に実装解説をしてみたいと思います。。。お楽しみに!

いよいよ、あと1週間となりました、来週水曜開催のインフラジスティックス Developer Days 5。 もうご登録いただけましたでしょうか?

今回は恵比寿のウェスティンホテルが会場になります。ゴージャスですね~

IMG_1246 IMG_1237

 

既にかなりの席が埋まっていますが、まだもう少し余裕があるとのことですので、早めのご登録をお願いいたします~

(イベント詳細&登録サイト) http://jp.infragistics.com/events/igdeveloperdays/2009june.aspx

 

今回のDevDaysでは「コスト削減!」をテーマに、盛りだくさんの5セッションを予定しています。このブログでは簡単に各セッションの見どころをご紹介したいと思います。

 

13:00~13:35 Save Money! ~ソフトウェア開発におけるコスト削減のためのキーワード~

マイクロソフト株式会社 デベロッパービジネス本部 業務執行役員本部長 市橋 暢哉様

今回はオープニングセッションとして、いつもアカデミアでお世話になっているマイクロソフトの市橋様にお話を頂けることになりました!いつもありがとうございます!! ソフトウェアのROIを高めるために何が必要なのかを熱くご紹介いただきます。

13:40~14:25 SilverlightによるBI/LOB成功のヒント ~経営ダッシュボードからLOBアプリケーションまで~

インフラジスティックスジャパン 山田達也

続きまして2番目のセッションは私が担当するSilverlightのお話です。まだまだSilverlight開発といってもピンと来ない方もいらっしゃると思いますが、ここではTDKラムダ様における活用事例のご紹介もさせていただき、「もう始まってる!」感を共有できたらと思います。具体的には今夏発売予定のNetAdvantage for Silverlight LOB でのSilverlight3への取り組みや機能デモをお見せしたいと思っています。

14:30~15:10 あなたのアプリケーションは使いやすいですか? ~Windowsクライアント UX再考~

インフラジスティックスジャパン 池原大然

まだまだつづくDevDays 5、今回はひとコマあたりの時間が短めなのでテンポよく聴いていただけるかと思います。続いて、弊社WPFトレーナーとしても活躍のデベロッパーエバンジェリスト 池原より、リッチクライアントでのUXの在り方についてお話いたします。この中では本邦初公開?のインフラジスティックス発のWPFプロジェクトのご紹介もあると思いますのでお楽しみに!!

15:10~15:50 企業と開発者のツールボックス。その中身は? ~What’s new in NetAdvantage for ASP.NET 2009 Vol.1 ~

インフラジスティックスジャパン 鈴木誠

4つめのセッションはデベロッパーエバンジェリスト 鈴木より、近日発売?のNetAdvantage for ASP.NET  2009 Vol.1 の最新情報をご紹介します。プログラマーだけにとどまらず、ソフトウェア開発に携わるより多くの人々にメリットを与えるツールボックスとしてのNetAdvantageの中身ををご紹介します。

16:00~16:30 あなたの開発をストップ高まで上昇させる! ~インフラジスティックス利用マニュアル~

インフラジスティックスジャパン 塚越正寛

最後はセールス&マーケティングの塚越がDevDaysに初登場いたします。NetAdvantageのみならず、インフラジスティックスのサービスを最大限に活用するための勘どころをトップ10形式で発表していきます。マイクロソフトの技術者向けイベントTech Fieldersにおけるライトニングトークで優勝2回!と活躍歴のある塚越の勝負プレゼンにも大いにご期待ください :)

 

セッションのあとにはDevDays恒例のプレゼント抽選大会もあります。かなり良い景品があるというウワサですので、ぜひ最後までお付き合いください。

なお、今回は各セッション資料を事前ダウンロード可能といたします。当日紙ベースでの配布はいたしませんので、必要でしたら各自事前ダウンロードおよびプリントアウトのご協力をお願いいたします(ダウンロードリンクは参加登録いただいた方々に明日以降ご連絡します)。