WebFormっぽいコントロールベスト3

0.前置き

この記事はOne ASP.NET Advent Calendar 2012の10日目のエントリーです。
9日目は、@miso_soup3さんの『ASP.NET MVC コア拡張部』でした。

ASP.NETならなんでもOKということで、WebFormの内容で書いてみます。
年末ですし(?)、個人的にWebFormといったらこのコントロールでしょベスト3をお送りしたいと思います。
別に基準はないのですが、自分が感心したとか、いかにもWebFormっぽいなというものを集めて発表します。

1. ランキング発表

第3位! 「Chart」

まずは第3位からです。

第3位は…Chartコントロールです!
Chartコントロールは、比較的新参者で、3.5から入ってきたものだと思います。
このコントロールを利用すれば、30種類以上のグラフを描画することができます。
サンプルではObjectDataSourceを利用して、データを取得し、折れ線グラフを書いてみました。
この程度のものであれば、コードなしでプロパティの設定のみで完成します。

chart

aspx側のコードはこんな感じです。

<asp:Chart 
    ID="SampleChart" 
    runat="server" 
    BorderlineWidth="3" 
    DataSourceID="ChartObjectDataSource">
    <Series>
        <asp:Series 
            Name="Series1" 
            ChartType="Line" 
            IsValueShownAsLabel="True" 
            MarkerStyle="Diamond" 
            XValueMember="Year" 
            YValueMembers="Income">
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
        </asp:ChartArea>
    </ChartAreas>
    <Titles>
        <asp:Title Name="Income" Text="年収">
        </asp:Title>
    </Titles>
</asp:Chart>

第2位!! 「ReportViewer」

では、続いて、第2位の発表。

ちょっとずるいですが第2位は…ReportViewerコントロールです!!
このコントロールは、SQL Serverの簡易BIツールSQL Server Reporting Services(以降、SSRS)のビューワー機能として提供されています。
Webアプリ上に、帳票やグラフを作りたい、エンドユーザーにも作れる環境(ReportBuilderというツールがある)を提供したいなどの要件にマッチします。
なおSSRSにはWebサーバが付属していますが、ちょっと使いにくいです。(たぶんFull IISじゃないです。)
そこで自分が作ったWebアプリとシームレスに接続するために、このReportViewerコントロールが活躍します。
SSRSについては、ここで語ると趣旨がずれてしまうので、自習書などをご参考にして下さい。
いつかこのブログでもちゃんと解説を書こうと思います。

SSRSとReportViewerコントロールを利用すると以下のようにSSRSのレポートが表示されます。
サンプルとして地図上に人口を表現したバブルチャートを書いてみました。

reportviewersample

aspxは以下の通りです。
ScriptManagerが必要になるのでお忘れなく。

<asp:scriptmanager ID="Scriptmanager" runat="server"></asp:scriptmanager>
<rsweb:ReportViewer 
    ID="SampleReportViewer" 
    runat="server" 
    ProcessingMode="Remote" 
    Height="600px" Width="750px">
    <ServerReport ReportPath="/全社/関東地方の人口" ReportServerUrl="http://{SSRSサーバー名称}/reportserver" />
</rsweb:ReportViewer>

第1位!! 「GridView」

そして…第1位の発表です!

第1位は



GridViewコントロール!!!

やはりWebFormっぽいコントロールといったら、GridViewコントロールですね。
なんか便利そうだけど、癖のある感じとかWebFormっぽいです。
このコントロールは、データを表形式で表現するときに利用します。
GridViewコントロールを利用すれば、データに対する編集・削除、ページング、デザインの適用などをほとんど
プロパティベースでできます。作成した感じは下記の通りです。

gridview

aspxのコードは下のようになります。

<asp:GridView 
    ID="SampleGridView" 
    runat="server" 
    DataSourceID="GridviewObjectDataSource" 
    AllowPaging="True" 
    AutoGenerateColumns="False" 
    BackColor="#DEBA84" 
    BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" 
    CellPadding="3"  CellSpacing="2" 
    PageSize="3">
    <Columns>
        <asp:BoundField DataField="Year" HeaderText="年" SortExpression="Year" />
        <asp:BoundField DataField="Money" HeaderText="年収" SortExpression="Money" />
        <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowSelectButton="True" ButtonType="Button" />
    </Columns>
    <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
    <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
    <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
    <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#FFF1D4" />
    <SortedAscendingHeaderStyle BackColor="#B95C30" />
    <SortedDescendingCellStyle BackColor="#F1E5CE" />
    <SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>

2.最後に

というわけで、WebFormっぽいコントロールベスト3を発表してみました。
ざっと見てみましたが、豊富ですね。
もちろん使いどころには十分注意する必要がありますが、
特性などを把握すればとても効率的に開発が行えると思います。
このシーンでは、GridView。こういった使い方の時には、ListView。柔軟にしたいからSSRSと連携などなど。
もう少し視野を広げて、こういった特性のアプリケーションでは、WebForm。
こうゆう場合は、MVCみたいな使い分けができるとさらに良いですよね。

明日12月11日は、@neueccさんです~。

広告

ASP.NET FriendlyUrlsを使ったみた

0.前置き

ASP.NETのロードマップがつい最近でました。
Roadmap for ASP.NET Fall 2012 Update
その中に、ASP.NET WebFormの更新もあります。これ↓
Web Form Friendly URLs
どうやら、このモジュールを適用したプロジェクトテンプレートも用意されるようです。
今回の記事ではこのASP.NET Friendly URLsを触ってみようと思います。

なお、今回の記事は、ハンセルマンさんのエントリーを大いに参考にさせて頂きました。
Introducing ASP.NET FriendlyUrls

1.ASP.NET FriendlyUrlsの紹介

ASP.NET FriendlyUrlsを利用すれば、きれいなURLを容易に組み立てることができます。
たとえばASP.NET WebFormで、とあるページにアクセスする場合、一般的にURLは以下のようになります。

http://84zume.con/hoge.aspx

また、商品Noが10の商品を表示する場合、URLは以下のようになったりします。

http://84zume.con/product.aspx  ←セッションで商品番号を渡している。
http://84zume.con/hoge.aspx?ProductNo=10  ←クエリーストリングで商品番号を渡している。

上記の構成のURLをFriendlyUrlsを利用すれば、

http://84zume.con/hoge  ←URLの意味上、不要な拡張子を消すことができる。
http://84zume.con/product/10  ←Productの10番を取得する

このように表現できるわけです。

2.インストール

インストールはnugetで行います。

PM> Install-Package Microsoft.AspNet.FriendlyUrls -Pre

※注意:ASP.NET Fall 2012 Updateがリリースされた場合は、プロジェクトテンプレートにこのモジュールが最初から入っていると思います。

nugetでモジュールを取得した後に、ReadMeが表示されるので、それに従い、少し設定をします。
Global.asaxのApplication_Startに、

RouteConfig.RegisterRoutes(RouteTable.Routes);

を記載します。

3.実際に使ってみる

サンプルとして、2つのページを作成しました。
ASP.NET Friendly URLsを機能を利用してWebアプリケーションを起動すると、List.aspxで作成したページは、~/Listでアクセスできるようになりました。
もう少し詳しく見ていきます。

◆ List.aspx
こちらは商品一覧を表示するページです。
ObjectDataSource経由で、ListViewにて商品の一覧を表示しています。
一覧の各商品の名称には、商品詳細へのリンクを貼っています。
aspxのフロントページは以下の通りです。

<%@ Import Namespace="Microsoft.AspNet.FriendlyUrls" %>
...
<asp:ListView runat="server" ID="ProductList" DataSourceID="ProductDataSource">
...
    <ItemTemplate>
        <li>
            <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />:
            <a href="<%# FriendlyUrl.Href("~/Item", Eval("Id")) %>">
                <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
            </a>
        </li>
    </ItemTemplate>
</asp:ListView>
...

FriendlyUtls.Hrefによって、きれいなHTMLを生成しているわけです。
たとえば、商品Noが1の場合は、以下の感じです。

<li>
  <span id="ProductList_IdLabel_0">1</span>:
  <a href="/Item/1">
    <span id="ProductList_NameLabel_0">洗濯機</span>
  </a>
</li>

FriendlyUtls.Hrefは2つめの引数に可変長パラメータを渡すことができます。
(パラメータの内容がセグメントに分割されて、URLが生成されます。)

◆ Item.aspx
こちらは商品の詳細を表示するページです。
Page_Loadにて、Request.GetFriendlyUrlSegments()[0]にて、URLの各セグメントから値を取得します。
上の場合は、「~/List/1」の「1」が取得できます。

コードビハインドは以下の通りです。

public partial class Item : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var id = Request.GetFriendlyUrlSegments()[0];
        var dao = new ProductDao();
        var product = dao.GetProductById(Convert.ToInt32(id));
        Id.Text = product.Id.ToString();
        Name.Text = product.Name;
        Description.Text = product.Description;
    }
}

apsxのフロントページは以下の通りです。

<div>
    <p>
        商品ID:<asp:Label ID="Id" runat="server" /><br />
        商品名:<asp:Label ID="Name" runat="server" /><br />
        商品説明:<asp:Label ID="Description" runat="server" />
    </p>
</div>

4.サンプルを書いてみての補足

簡単に使えます。
ルーティング情報の管理から解放されるのはいいですね!!

5.サンプルコード

サンプルコードはgithubにホスティングしてあります。
FriendlyUrlのサンプル

6.最後に

もと記事ではモバイルの内容も含まれていますので、ぜひ読んでみてください!

ASP.NET開発における開発環境の一例

0.前置き

いったい世の中では、どんな開発環境の中で開発しているんだろうってっことが気になります。
個々のプロダクトや技術の話は耳にしますが、それをどう組み合わせているかっていうものはなかなか目にしません。
しかもいまや、継続的ペケペケがはやっているし、分散SCMもはやり始めている。
まもなく世の中の開発環境は初心者にとって、混沌なものに見えてしまうのではと懸念します。
というわけで、今の時点で、自分の中でもしっかり整理し、将来に活かしたいわけです。

1.私の場合

私が何を開発しているかというと、ASP.NET Webフォームを用いたイントラ用のWebアプリケーションです。
さっそくですが開発環境はこんな感じです。
(画像が大きいので、サムネイルにしています。大きくするにはクリックしてください。)

簡単な解説を加えます。

構成管理ツール
Subversionを使っています。
Gitとかまだ良く分かりません…。

CIサーバー
Jenkinsです。定期的にSVNをポーリングしています。
変更があった際には、svn updateを行い、ビルド、コンポーネントテスト、テストカバレッジ計測を行います。

ITS用サーバー
ITSにはRedmineを使っています。
タスクレベルの詳細なスケジュール管理、バグの管理、コードレビューの管理、プロダクトバージョンの管理を行っています。
重要なプラグインとして、コードレビュー用のプラグインを利用しています。
タスクを管理しているため、PM上、とても大切です。

テスト管理用サーバー
TestLinkを利用。
テストケースの管理、実施履歴の管理、テストケースから算出できるメトリクスの管理はこちら。
残念ながら、バグ起票をRedmineと連携できていません。

テスト用サーバー
開発中のアプリのデプロイ先です。
ここで統合テストを実施します。
特筆すべきは、Web Deploy Agentをインストールしていることです。
このツールのおかげで、Visual Studioの「発行」機能を使えば、ボタン一発で、
DBの初期化からWebアプリのデプロイまで行えます。
すごく手軽で、デプロイの障壁がなくなりました。
MSの物江さんのブログ:Visual Studio 2010 [発行]機能で配置可能とするためのサーバー設定

開発者端末
Visual Studio 2010 Proに、開発生産性をあげるために多くのアドオンを入れています。
あと自動UIテストを実施するためのSeleniumもここにいます。
残念ながら、これはIDE。つまりFirefoxのアドオンです。早くサーバー側にもって行きたいですね。
Source Monitorで簡易的なコードメトリクスをとっています。

2.改善点

改善点はたくさんあります。代表的なものを列挙します。

  • TestLinkとRedmineをつなげる。Redmineでバグの起票をシームレスにTestLinkから実施したい。
  • Jenkinsからテスト用サーバーに対して、継続的デプロイを提供したい。
  • JenkinsのCIにSeleniumを利用した自動UIテストを取り入れたい。

などなど。
第一の仕事がアプリ作りだから、いまや、開発環境の改善に手間をかけられないのは、少し惜しいです。

3.最後に

私が考える理想形はこうだ!っていうのを、おいおい別のポストでまとめてみたいです。
それをTFSなりのMS系プロダクトで固めたらどうなるか、比較してみたいですね。

ASP.NETの標準機能でフォーム認証を実装する

今回はASP.NETのフォーム認証の話です。
標準機能だけを使って、ほぼコードを書かずにフォーム認証を実装してみようと思います。
対象の環境は、Visual Studio 2010、ASP.NET4(WebForm)、SQL Sever 2008 R2 Expressです。


1.プロジェクトの作成

ASP.NET Webアプリケーションを新規で作成します。
※「ASP.NET 空のWebアプリケーション」は本当に空なので今回は使いません。
新規作成した時点で、アカウント管理関連のページが自動的に作成されます。
こんな感じ。

Web.configも以下のように初期設定が自動で行われます。関連するところを抜き出します。

//フォーム認証をするという設定
<authentication mode="Forms">
  //認証ページの場所
  <forms loginUrl="~/Account/Login.aspx" timeout="2880" />
</authentication>

//利用するメンバーシッププロバイダーの登録
<membership>
  <providers>
    <clear/>
    //標準の「SqlMembershipProvider」を利用。その他、アカウント情報を取り扱う際の設定をここで行っている。
    <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" 
             connectionStringName="ApplicationServices" enablePasswordRetrieval="false" 
             enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false" 
             maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" 
             minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10" applicationName="/" />
  </providers>
</membership>


2.早速、実行

このまま実行すれば、簡易的なアカウント管理機能が利用できます。
アカウント情報を格納するデータベース(aspnetdb)も実行時に自動生成されます。
※SQL Sever ExpressのattachDBっていう機能(?)で作られるみたいだけど、どのタイミングで生成されるかがいまいち分からないです…


ログイン画面は以下のとおり。



ユーザー情報作登録画面は以下のとおり。


3.認可処理の実装

ユーザーの認証処理部分を作り終わったので、次はリソース(ここではページ)の認可処理部分を実装します。
※認可の別名は、アクセス制御、承認、authorizationなどと言われています。
今回は、「(自動生成されている)About.aspxは認証済みユーザーしか利用できない」というシナリオにします。
ルート直下のweb.configに以下の記述を追加。location pathを使って、特定のページのみの設定を行います。

<location path="About.aspx">
  <system.web>
    <authorization>
      <deny users="?"/>
    </authorization>
  </system.web>
</location>

これで、About.aspxページを表示しようとすると、ログインページにリダイレクトされます。
(認証完了後は、自動的にAbout.aspxページに遷移します。)
裏側でこっそり認証用クッキーが作成されているため、こんな動作をするわけです。

00.SQL Severの有償エディションを利用する場合

Express以外だと、attachDBという機能が使えないです。
ですので、StandardとかEnterpriseなどのエディションでは、前もって、「aspnetdb」を作成しておく必要があります。
Web.configの接続文字列も、正しく修正する必要があります。
「aspnetdb」を作成するには、aspnet_regsqlコマンドを利用します。
実行方法は、Visual Studio コマンドプロンプトを利用すれば良いです。
もしくは、C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet_regsql.exe にあります。

aspnetdbにはこんなテーブルが入っています。

この中で認証に関係するのは…

  • Membership
  • Roles
  • Users
  • UsersInRoles

かな?これはちょっと自信がないです。


おわりに

途中で簡易なログインページが…って書いた気がしますが、簡易ではないですね。
しっかりとしたログインページができます。
MSがしっかりテストして作っているものだから、下手に自分で作るよりかセキュリティ面でも安心・安全のはずです。
ただ、アカウントのデータストアには柔軟性がほしい!ってのは要件的にあると思います。
これについては、次回以降。