無償版Visual StudioでいろいろWeb開発

9,289 views

Published on

プログラミング生放送勉強会 第29回@サイボウズ株式会社 松山オフィスで行われた同名のタイトルのセッション資料です。

Published in: Technology
  • Be the first to comment

無償版Visual StudioでいろいろWeb開発

  1. 1. 無償版Visual Studioで いろいろWeb開発 第29回@サイボウズ株式会社 松山オフィス 2014/06/14 (by きよくら ならみ)
  2. 2. 自己紹介 • きよくら ならみ –@kiyokura –kiyokura.hateblo.jp • 岡山生まれ岡山育ちのプログラマー • NET系の開発やWebアプリ開発 –Microsoft MVP for ASP.NET/IIS
  3. 3. 諸注意と免責事項 • 私個人による調査と見解であり所属す る組織を代表するものではありません • 万が一、本セッションの内容の誤りに 起因する何らかの損害が発生した場合 においても、私は一切の責任を負うこ とができません ご了承ください お約束!
  4. 4. 本セッションの目的とゴール • 目的 –Visual Studioが.NET開発以外でも使え ることを知ってもらう –無償版でも比類なき強力さであることを 知ってもらう • ゴール –VS2013 Express for Webの可能性の一 端を知っていただく
  5. 5. 本日扱う環境 • Visual Studio 2013 Express for Web –Update 2適用済み –拡張機能「Web Essentials」適用済み 無料です!
  6. 6. アジェンダ • Visual Studio と Express Edition • VS組み込みのWeb開発機能たち • Web Essentialsによる拡張 • まとめ
  7. 7. Visual Studio と Express Edition 前提知識として
  8. 8. Visual Studioとは • Microsoft製の統合開発環境 –統合開発環境=IDE • 様々な言語・プラットホームの開発 • 現在の最新版はVisual Studio 2013 以降、本資料では、スペースの都合上 Visual StudioをVSと省略する場合があります
  9. 9. 無償版『Express エディション』 • Visual Studioの無償版 –Professional以上のエディションは有償 • 『機能限定版』という位置づけ –「お試し版」ではない –どう限定されているかはバージョンで違う
  10. 10. VS2013 Expressの種類 • VS2013 Expressファミリの構成 –for Windows • Windowストアアプリの開発環境 –for Windows Desktop • Windowsのデスクトップアプリの開発環境 –for Web • Webアプリの開発環境
  11. 11. VS2013 Express for Web • Webアプリケーション開発 –ASP.NET –Webクライアントサイド開発 • HTML • JavaScript • CSS • TypeScript , etc… .NETじゃ なくても “使える”!
  12. 12. VS2013 Express for Webの導入 • 幾つかあり、その一例: –Webからダウンロード&インストール • http://www.microsoft.com/ja- jp/download/details.aspx?id=40747 • ISO or WEBインストーラを選択
  13. 13. VS2013 Express for Webの 基本機能 まずはジャブ気味に
  14. 14. VS2013 Express for Webの基本機能 • HTMLエディタ • CSS関連機能 • JavaScript関連機能 • ブラウザーリンク • TypeScript関連機能 • その他ファイルのSyntax Highlight
  15. 15. ※初めて使うとき • 「標準」ツールバーを表示しておく –インストール直後は出てないかも –[表示]-[ツールバー]-[標準]
  16. 16. HTMLエディタ
  17. 17. HTMLエディタ • Syntax Highlight • リソースの貼り付け • IntelliSense • コードスニペット • その他
  18. 18. Syntax Highlight • タグ・属性・スクリプト等を色分け表示
  19. 19. IntelliSense • 各種コード補完 –閉じタグ自動補完 –属性/属性値 –外部リソース
  20. 20. リソースの貼り付け • 外部リソースをD&Dで挿入 –画像/スクリプト/CSS
  21. 21. インテリセンス - AngularJS • AngularJSのng-*属性の補完 –標準で対応
  22. 22. コードスニペット • よく使うフレーズを簡易入力 –キータイプ+tabキー –コンテキストメニュー
  23. 23. その他 • オートフォーマット –インデント等を自動整形 • 画像の簡易プレビュー –マウスオーバーでプレビュー
  24. 24. CSS関連の機能
  25. 25. CSS関連の機能 • Syntax Highlight • IntelliSense • カラーピッカー • セレクタの補完
  26. 26. コード補完 • いろんな場所でコード補完 –CSSファイル / style要素 / style属性
  27. 27. カラーピッカー • カラーパレットから色を選択 –「#」をタイプするとパレットを表示
  28. 28. セレクタの補完 • CSSで定義されているセレクタが HTML側で補完候補に
  29. 29. JavaScript関連機能
  30. 30. JavaScript関連機能 • Syntax Highlight • IntelliSense –組み込みオブジェクト –自作オブジェクト –動的な(?)コード補完 • スニペット • デバッグ実行
  31. 31. 詳細はこちらで! • 『ゆとりJavaScriptコーディング』 –http://goo.gl/TiKFLa –以前に書きました • 正直、気味悪いくらいの強力さ
  32. 32. ブラウザーリンク
  33. 33. ブラウザーリンク • VS2013からの目玉機能の一つ –様々なブラウザーでのデバッグ・テストに 便利な機能 • 複数のブラウザで一斉にデバッグ実行 • 同時に再読み込み
  34. 34. ブラウザーリンク
  35. 35. ブラウザーリンク
  36. 36. ブラウザーリンク • 静的ファイルでブラウザリンクを有効にする には設定が必要 – Web.Configのconfiguration配下に以下の記述 – 詳細はこちら参照 • http://www.asp.net/visual- studio/overview/2013/using-browser-link <system.webServer> <handlers> <add name="Browser Link for HTM " path="*.html" verb="*" type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" resourceType="File" preCondition="integratedMode" /> </handlers> </system.webServer>
  37. 37. TypeScript関連機能
  38. 38. TypeScript関連機能 • 機能多すぎなので説明割愛 • ほぼほぼ最強のTypeScript開発環境 • 色々情報あると思うので 『続きはWEBで』 –手前味噌だと… • Visual Studioで始めるTypeScript開発入門 • http://goo.gl/cmyC8L
  39. 39. その他ファイルのSyntax Highlight
  40. 40. その他ファイルのSyntax Highlight • 標準で対応しているファイル形式 –CoffeeScript –LESS • コード補完も対応 –SASS/SCSS • コード補完も対応
  41. 41. Web Essentialsによる拡張 ここからが本番!
  42. 42. Web Essentialsとは • Web開発関連の便利機能アドオン –http://vswebessentials.com/
  43. 43. Web Essentialsとは • 無償&オープンソース –https://github.com/madskristensen/ WebEssentials2013 –MSの中の人がコントリビュータ
  44. 44. Web Essentialsとは • Visual Studioのバージョンごとに存在 –VS2010 ~ VS2013 • 以前はPro以上のみだったが、 Web Essentials 2013 for Update 2 がExpressでも利用可能に!
  45. 45. Web Essentialsのインストール • 拡張機能マネージャから検索 → ダウンロード • インストーラーを実行
  46. 46. Web Essentialsの機能一覧 • Browser Link • Stylesheets • JavaScript • HTML • TypeScript • LESS • CoffeeScript • Markdown • Custom editors
  47. 47. Web Essentialsの機能一覧 • Stylesheets – Intellisense • Generate vendor specifics • Add missing standard property • Keep vendor specifics in sync • HTML elements, classes and IDs • Hacks • !important • Modernizr • Add regions • Custom fonts • iOS scrollbars • Animation names • Inline URL picker • Gradients • Hide unsupported properties • Hide inherit/initial • Media Query expressions • Media Query snippets – Visual cues • Browser matrix tooltip • Color swatches • Selector specificity tooltip • Font and image preview – Validation • Browser selector • Best practices & Browser compatibility • Helpful error messages • Removes warnings for ¥9 • Color values • Display inline • Duplicate properties • Duplicate selectors • Pseudo class/element ordering • Unknown vendor specifics • IE10 prefixes • Missing vendor specifics • Vendor specific ordering • Unknown HTML tag in selectors • Disallow universal selector • Zero-length units • Media Query syntax – Web standards • Auto-update standards • Variables module • Vendor specific updates – Converters • Darken/lighten colors • Convert color formats • Sort properties • DataURIs and background images • Minification • JavaScript – Features • JSHint • .jshintrc and .jshintignore • Regions • Outlining/code folding • Minification • Source Maps • Auto-complete braces • Smarter indent • Find All References • Go To Definition – Intellisense • getElementById • getElementsByTagName • getElementsByClassName • "use strict" • NodeJS modules • HTML – Features • Minify Selection • Minify HTML file • Bundle HTML • Image hover preview – ZenCoding • ZenCoding syntax • Lorem Ipsum generator • Lorem Pixel generator • PlaceHold.it generator – Commands • Surround with tag • #Region support • Expand selection • Format on ENTER • Find all references • Go To Definition • Meta tags • Dynamic Intellisense – Smart Tags • Base64 decoding • Extract JavaScript to file • Remove parent tags • Extract Stylesheets to file • AngularJS controller generation • Minify CSS and JavaScript – Validation • Missing Angular attribute • OpenGraph prefix • Foundation column validations • Missing Bootstrap class • Microdata • TypeScript – Features • Preview Window • Custom regions • Drag 'n drop • LESS – Features • Preview window • Compiler settings • NodeJS compilation • Source Maps • Compile to custom folder • Extract to variable • Extract to Mixin • Minification • CoffeeScript – Features • Preview Window • Compiler settings • Iced CoffeeScript support • NodeJS compilation • Source Maps • Compile to custom folder – Minification • Comment/Uncomment • Smart Indent • Markdown – Features • Syntax highlighting • Intellisense for embedded languages • Preview window • Compile to HTML • Custom Stylesheet • Custom editors – Robots.txt – HTML5 App Cache (.appcache) – WebVTT - HTML5 subtitles 流石に 多すぎる…
  48. 48. 正直、機能多すぎ • 全部紹介するのは無理 • デモベースで、特によさそうな部分を 紹介 –ブラウザリンク拡張 –ブラウザ対応状況 –CSS Sprite
  49. 49. まとめ
  50. 50. VSのWebフロントエンド機能は豊富 • 無償版でもかなり強力 • Web Essentialsも無償で使える –もはやWeb Essentials 導入は当たり前
  51. 51. 余談:ASP.NET開発って恵まれてる • フロントエンド開発機能も充実 • サーバーサイド開発機能も もちろん素晴らしい • Webアプリ開発や学習の際には、 ASP.NETのことも検討してもらえると うれしいなー(と思います)
  52. 52. ご清聴ありがとうございました おしまい
  53. 53. OITEC 第19回勉強会 • 7/19(土) 13:30 – • 岡山国際交流センター • アジェンダ – チームでの開発フローに合わせたTFS運用 – ユニバーサルでXamarinなアプリを開発(仮) – (ASP.NET関連の何か) – (Python Tools for Visual Studioネタ ) – (その他調整中) • http://oitec.doorkeeper.jp/events/11086

×