Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

9,823 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

×