ASP.NET で Bootstrap を使った思い出

これは One ASP.NET Advent Calendar 18 日目の記事となります。

ぶっちゃけクラサバサイドに属している自分として、ASP.NET についてテクニカルな話を出すのはなかなか難しいのもあって、今回は実際に ASP.NET を利用して開発した実例の紹介を。

今の会社に転職するまでは、.NET Framework 3.5 での ASP.NET WebForms でパッケージソフト的な何かを作っていたりしていました。その会社の中では .NET を使ってどうこうできるのが、自分と自分と一緒に仕事してくれたメンバーだけだったというのもあり、VB6 が最大勢力という社内の中ではちょっと異色なポジションでのお仕事でした。

そして今の会社に転職して最初に手掛けたのが、ASP.NET MVC3 を利用したとあるシステムの管理サイト的な何かの作成でした。その時はまだこの会社の空気を理解しておらず、プロジェクトの方々に聞いても特に制限はないとのことだったので、

VB で ASP.NET MVC3 を

サクサクっとやってしまったのですね。実際に動くものが出来上がるまでの時間は、それまでのこの社内では考えられないくらいだったと言われて嬉しかったのですが、後々

「VB を案件で利用したことほとんどないんだよねー、それに VB 書きにくいし」

という実態を聞いてしまい非常にごめんなさいごめんなさいという気持ちになったことを覚えています。Model や Controler はまだしも View は VB 使いから見ても見づらいですよねごめんなさいごめんなさい。

またこの時は、UI デザインも任されていたのですがもともとその方面の実力がなかったのもあり、Bootstrap（当時は Twitter Bootstrap）を使って作成したのも非常にごめんなさいごめんなさいでした。

ですが Bootstrap はやはり非常に楽にさせてもらうありがたいツールで、

   1: <th class="th-width2"> 担当者の氏名 </th>

こんな感じの属性をつけるだけで、レイアウトをしっかり整えてくれるのは大変便利でした。

その後色々あって再度 ASP.NET を利用した開発を行うことになったのですが、この時は「実行環境が客先保有でどういう環境になるか全然情報もらえてないから…」という理由で、

VB で ASP.NET WebForms（かろうじて .NET Framework 3.5）

を用いて、これまた管理サイト的な何かを作ることになりました。最終的に判明した実機環境は .NET Framework 4.0 まではインストールされていたのですが、そのころにはほとんど組み上がっていたのもあり MVC の利用はできなかったのです。なお、この時は管理サイトと Web サービスの構築が案件上必要で、私が管理サイトを作成し他の方がサービスを作成したのですが、私は VB で他の方は C# と、「仕事としてこれでいいのか」的な状態にしてしまったという・・・。一つのソリューションで VB と C# が同居しているのは、この会社では多分この案件だけです（ｗ）

そしてこの時もデザイン能力の不足を訴え Bootstrap を利用。おかげで UI レイアウトを固めるのだけはサクサクできました。

WebForms でも次のような感じで利用できます。

   1: <div class="row">

   2:  

   3:     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" >

   4:         <p>

   5:         <asp:Label ID="lblUploadTitle" runat="server" Text="マスタのUpload" CssClass="control-label"></asp:Label>

   6:         </p>

   7:     </div>

   8:  

   9:     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" >

  10:         <div class="input-group">

  11:             <asp:FileUpload ID="updFile" runat="server" CssClass="btn btn-default"/>

  12:         </div>

  13:     </div>

  14:  

  15:     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">

  16:         <asp:Button ID="btnUpload" runat="server" Text="アップロード" CssClass="btn btn-default" />

  17:     </div>

  18:  

  19: </div>

WebForms であっても CssClass 属性に Bootstrap のクラスを記載するだけで利用できますので、非常に簡単です。これだけで解像度の違いを殆ど気にすることなくデザインを統一することができるのは大きなメリットでした。

実際に案件として Bootstrap を利用したのはこの会社では私が最初らしいというのを後で聞いたのですが、利用してみた感想としては

「プログラマが UI 画面をデザインするなら、レイアウトをある程度取りやすいツールの導入」

は非常に効果が高かったと思います。本職の方や、デザイン能力の高い方がいるのであれば迷うことなくお願いするのですが、案件の規模やその時に加わってもらえる要員の都合によっては設計者や開発者がそのままデザインも担当することになるケースは多々あるかと思います。

そのような場合、頑張って UI を考えたとしてもかなりの確率で

いかにも開発者が考えました感が満載の UI

を生み出してしまい、使いやすいシステムを構築するのが難しくなってしまいます。ですが Bootstrap に代表されるレイアウトツールを導入することで、デザインルールが簡単に統一でき見栄えからも使い心地からも安定した UI を素早く提供することができるのだと思います。
（難しい事を言われたとしても、今回利用しているコイツだとそういうレイアウト取れないんですよーアハハハハー、と逃げる手段にもなりますし（！））

ASP.NET MVC と ASP.NET WebForms 両方で Bootstrap を利用したのですが、ASP.NET からこのようなツールを利用するのは非常に簡単に行えるように出来上がっているというのを強く感じてます。時間のない時、予算のない時はこういったツールをできるだけ導入するのが、無事に案件をこなすためには有効なのではないでしょうか。

他の方とはかなり毛色の違う内容となりましたが、たまにはこういう内容もいいですかね？