LightSwitchでWebアプリ開発
2 likes4,237 views
2013年5月11日(土) 開催、Community Open Day 2013 のセッション資料 http://cod.ms/
LightSwitchでWebアプリ開発
- 1. 瀬尾佳隆 (@seosoft) / 技術ひろば.net Microsoft MVP for Visual C# Community Open Day 2013 LightSwitch で Web アプリ開発
- 2. 自己紹介 / コミュニティー紹介 瀬尾 佳隆 （せお よしたか） MVP for Visual C# (Jan 2009 – Dec 2013) ブログ・・・http://yseosoft.wordpress.com/ 劇団四季と AKB48 とディズニーリゾートが好き 技術ひろば.net (http://hiroba-tech.net/) テーマを限定せずにユルく勉強会を開催 技術を楽しむ、技術でつながる 次回は 6月15日 (土) に開催
- 3. アジェンダ LightSwitch の進化 • そもそも LightSwitch とは？ • バージョンアップで汎用性向上 開発手順 • テーブル定義 • 画面定義 • コーディング • デザイン変更 デモ中心で 具体的な手順を 紹介します
- 4. アジェンダ LightSwitch の進化 • そもそも LightSwitch とは？ • バージョンアップで汎用性向上 開発手順 • テーブル定義 • 画面定義 • コーディング • デザイン変更 デモ中心で 具体的な手順を 紹介します 今日のポイント
- 7. バージョンアップで汎用性向上 • 生産性が高い業務アプリ開発ツール • クライアントは Silverlight v1 LightSwitch 2011 • OData 対応 • 他の技術との組み合わせが容易に v2 Visual Studio 2012 • HTML Client 対応 • スマホ／タブレットを意識した画面 v3 VS 2012 Update 2
- 8. バージョンアップで汎用性向上 • 生産性が高い業務アプリ開発ツール • クライアントは Silverlight v1 LightSwitch 2011 • OData 対応 • 他の技術との組み合わせが容易に v2 Visual Studio 2012 • HTML Client 対応 • スマホ／タブレットを意識した画面 v3 VS 2012 Update 2
- 9. 開発手順の概要 テーブル 定義 画面 定義 （コード） (デザイン 変更) 配置 「テーブルを書いて 画面をデザインする」 の 反復が開発の基本 コードはできるだけ書かない 画面デザインもできるだけ 自動化
- 10. 開発手順 ～テーブル定義～
- 12. テーブル定義
- 13. リレーション作成
- 14. クエリ追加
- 15. 開発手順 ～画面定義～
- 17. スクリーン作成
- 18. ボタン追加
- 19. タップ操作追加
- 20. クエリ変更
- 21. 開発手順 ～コーディング～
- 22. コーディング箇所 • カスタムバリデーション バリデーション ルール • 新規作成時に規定値を表示 • DB 更新時に規定値を保存 データ更新時の 値の指定 • DOM に HTML 要素を挿入 • jQueryUI の Widget などを利用可能 カスタム コントロール • 色、サイズなどを細かく指定 • 非同期でデータ読み込み 属性 / CSS の 動的変更
- 23. 開発手順 ～デザイン変更～
- 24. デザイン変更の方法 • コーディングで実現 属性 / CSS の 動的変更 • 白背景／黒背景のテーマを自動生成 • 必要に応じてカスタマイズも可能 デフォルト CSS の交換 • 標準だけでは不足するスタイルを追加 ユーザー定義 CSS の編集 • 実際の画面を見ながらスタイル編集 • LightSwitch でそのまま取り込める jQuery Mobile ThemeRoller
- 25. デザインに関するファイル
- 26. CSS の切り替え
- 27. jQuery Mobile
- 28. jQuery Mobile Theme Roller
- 29. まとめ
- 30. LightSwitch HTML Client で Web 開発 • 一貫した開発手順 • テーブルも画面もできるだけ自動化 生産性 • スマホ／タブレットを強く意識 • プラグイン不要 汎用性 • コードが少ない＝バグが少ない • 統一感のある UX を自動生成 安定性
- 31. 参考） 次のステップ • 柔軟なバリデーションをコードで実現 カスタム バリデーション • jQueryUI やサードパーティーの Widget • HTML Client の範囲で視覚効果を向上 カスタム コントロール • 業務アプリでもクラウドでも必要 認証 アクセス制御 • OData 対応＝他のクライアントと連携 • 集計、分析、印刷には Office を使う、など ブラウザー以外 との連携
- 32. 参考） Runtime Update 1 今週発表されました jQueryMobile 1.3 対応 詳しくは LightSwitch Team Blog で http://blogs.msdn.com/b/lightswitch/archive/2013/05/07/ announcing-runtime-update-1-supporting-jquerymobile-1-3.aspx
- 33. ご清聴ありがとうございました