DE-251 Webアプリのリフォーム~モバイルとクラウド活用に向けた技術選択~ – The Microsoft Conference 2014

第2日目(2014年10月24日)の 井上 章さんのセッション「Webアプリのリフォーム~モバイルとクラウド活用に向けた技術選択~」のメモを共有します。

 

一つ前の時間の 田中 達彦さんのセッション セッションが概要で、その Web側の詳細のセッションですね。(※クライアント側は別の同僚が聞きに行ったので私は別のを聞いて、聞いていません)

 

気づかないうちに ASP.net とその兄弟はとても増えていました。

 

アプリケーションの技術 トレンドと近未来

Productivity Future Vision

  • デバイスの多様化
    • マルチデバイス
    • クロスプラットフォーム
    • IoT (Internet of Things)
  • 不可欠なWeb技術
  • クラウド環境の普及と活用

MOBILE-FIRST + CLOUD-FIRST

 

ASP.net でどのような形で?

モバイルファースト

リッチエクスペリエンス マルチデバイス

ASP.NET 4.5

  • レスポンシブ Web
  • ディスプレイモード
  • クロスブラウザ

レスポンシブ Web デザイン

  • CSS3 メディアクエリによるスタイルとレイアウト変更

Twitter Bootstrap の採用

  • Twitter Bootstrap with ASP.NET
  • フロントエンド CSS フレームワーク
  • シンプル・モダン・レスポンシブで統一されたデザインが容易

デバイス判別とビューの切り替え

  • マルチデバイスへの対応
  • ASP.NET の Display Modes 機能によるデバイスの判断
  • モバイル向けビュー (*.mobile.*) への自動切り替え

DEMO – Visual Studio

  • Chrome や iPhone Simulator が起動できる 二つ同時も
  • ツールボックスにテキストを登録しておける
  • CSS mediaクエリ
  • Default.aspx , Default.Mobile.aspx これで差し替えられる URLは同じ
    • ASP.net のディスプレイモード

既存の ASP.net サイトを対応していく

 

Webアプリのマルチデバイス対応手法

  • レスポンシブWeb
  • jQuery Mobile
    • モバイルに特化した Webサイトの提供
    • タッチ操作重視
  • デバイス判定とビューの切り替え

クラウドファースト

 

クラウドの利用目的と形態

  • 社外公開向け Webサイト
  • 社内向けアプリ、インフラ基盤
  • 開発、テスト環境
  • 外部向けアプリ基盤

Azure のサービスを活用 たくさんある

 

Visual Studio + Azure

  • サーバーエクスプローラーから Azure のサービスが利用可能
  • Visual Studio からWebサイト・仮想マシンの作成が可能
  • Visual Studio Online(Azure上) も TFS同等に利用可能

 

DEMO – アプリケーションの負荷パターン

  • 最小限で利用して始められる Azure
  • スケールアウトして遅くならないアプリケーション、ユーザーが減ったら減らしてコストを抑える

 

Webアプリケーションの最新化 ASP.net

  • Scott Hanselman
  • One ASP.NET Vision
  • Web Forms
  • Web Pages
  • Single Page Apps
  • MVC
  • Web API
  • Signal R
  • Others
  • NuGet で選択できる

 

Webフォームと ASP.NET MVC

  • どちらを選択するか?
  • Webフォーム
    • 豊富なサーバーコントロール
    • イベント駆動型プログラミング サーバーとクライアントが密に連携
  • ASP.NET MVC
    • HTMLベースのUI
    • Model-View-Controllerパターン サーバーとクライアントが疎結合化される

 

シングルページアプリケーション構成

  • Ajax をベースに、Web API でデータを表示して蔵案との View に表示
  • ASP.NET Single Page Application (SPA)
  • 単一ページ構成の Ajax アプリケーション テンプレートがある

 

ASP.NET Web API

  • Framework of HTTP Services
  • RESTfull HTPP サービス構築のためのフレームワーク

 

ASP.NET SignalR

  • リアルタイム・非同期・双方向通信ライブラリ
  • NuGetパッケージとして提供

 

DEMO

  • Webアプリ、Store アプリから連携できる WebAPI

 

モダンWebと ASP.NET の今後

  • モジュール化
  • クラウドへのシームレスな移行
  • オープンソースへの貢献
  • 迅速な開発サイクル
  • エディタや開発ツールの選択
  • クロスプラットフォーム
  • 開発ツールの向上

 

Visual Studio “14” & ASP.NET vNext

  • CTPリリース
  • RTMは2015年

 

DEMO – vNext

  • VS14 CTP
  • 設定ファイルが JSON
  • Mac Mono ASP.net で vNext の Visual Studio のプロジェクトをそのまま動かせる
  • クラウドに移行したとき IIS 以外でも動作できる可能性

.NET vNext

  • デバイス最適化
  • クラウド最適化
  • コンパイラの変化
  • オープンソース化
  • さらに plugable に

 

SHIN-ICHI の感想

正直、ASP.net MVC にレスポンシブ Webデザイン(CSSメディアクエリ自作)、自分はだいぶついて行っているつもりでしたが、なかなか。

しかし、マネージャしていようがアーキテクトしていようが、実際に書かないとある程度以上の「わかった」感がないのは確かなんですよね。頭ではわかっているつもりなんですが、書けるのとはだいぶ違う。私もあぐらをかいていた・・・かな。「Web Camps Training Kit」を、私もやってみます。勉強しよう。

最近は、概念がわかっているだけじゃ、マネージメントは出来ない。現代的な実装方法とちゃんとした見積もり根拠を持てないと、と思います。こういう、概念は変わらないのに新しいテクノロジー、Visual Studio のサポートが得られることは、正確にトレースしていきたい。