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

1. 無償版Visual Studioで
いろいろWeb開発
第29回＠サイボウズ株式会社
松山オフィス
2014/06/14
(by きよくら ならみ)

2. 自己紹介
• きよくら ならみ
–@kiyokura
–kiyokura.hateblo.jp
• 岡山生まれ岡山育ちのプログラマー
• NET系の開発やWebアプリ開発
–Microsoft MVP for ASP.NET/IIS

3. 諸注意と免責事項
• 私個人による調査と見解であり所属す
る組織を代表するものではありません
• 万が一、本セッションの内容の誤りに
起因する何らかの損害が発生した場合
においても、私は一切の責任を負うこ
とができません
ご了承ください お約束！

4. 本セッションの目的とゴール
• 目的
–Visual Studioが.NET開発以外でも使え
ることを知ってもらう
–無償版でも比類なき強力さであることを
知ってもらう
• ゴール
–VS2013 Express for Webの可能性の一
端を知っていただく

5. 本日扱う環境
• Visual Studio 2013 Express for Web
–Update 2適用済み
–拡張機能「Web Essentials」適用済み
無料です！

6. アジェンダ
• Visual Studio と Express Edition
• VS組み込みのWeb開発機能たち
• Web Essentialsによる拡張
• まとめ

7. Visual Studio と Express Edition
前提知識として

8. Visual Studioとは
• Microsoft製の統合開発環境
–統合開発環境＝IDE
• 様々な言語・プラットホームの開発
• 現在の最新版はVisual Studio 2013
以降、本資料では、スペースの都合上
Visual StudioをVSと省略する場合があります

9. 無償版『Express エディション』
• Visual Studioの無償版
–Professional以上のエディションは有償
• 『機能限定版』という位置づけ
–「お試し版」ではない
–どう限定されているかはバージョンで違う

10. VS2013 Expressの種類
• VS2013 Expressファミリの構成
–for Windows
• Windowストアアプリの開発環境
–for Windows Desktop
• Windowsのデスクトップアプリの開発環境
–for Web
• Webアプリの開発環境

11. VS2013 Express for Web
• Webアプリケーション開発
–ASP.NET
–Webクライアントサイド開発
• HTML
• JavaScript
• CSS
• TypeScript , etc…
.NETじゃ
なくても
“使える”!

12. VS2013 Express for Webの導入
• 幾つかあり、その一例：
–Webからダウンロード＆インストール
• http://www.microsoft.com/ja-
jp/download/details.aspx?id=40747
• ISO or WEBインストーラを選択

13. VS2013 Express for Webの
基本機能
まずはジャブ気味に

14. VS2013 Express for Webの基本機能
• HTMLエディタ
• CSS関連機能
• JavaScript関連機能
• ブラウザーリンク
• TypeScript関連機能
• その他ファイルのSyntax Highlight

15. ※初めて使うとき
• 「標準」ツールバーを表示しておく
–インストール直後は出てないかも
–［表示］－［ツールバー］－［標準］

16. HTMLエディタ

17. HTMLエディタ
• Syntax Highlight
• リソースの貼り付け
• IntelliSense
• コードスニペット
• その他

18. Syntax Highlight
• タグ・属性・スクリプト等を色分け表示

19. IntelliSense
• 各種コード補完
–閉じタグ自動補完
–属性/属性値
–外部リソース

20. リソースの貼り付け
• 外部リソースをD&Dで挿入
–画像/スクリプト/CSS

21. インテリセンス - AngularJS
• AngularJSのng-*属性の補完
–標準で対応

22. コードスニペット
• よく使うフレーズを簡易入力
–キータイプ＋tabキー
–コンテキストメニュー

23. その他
• オートフォーマット
–インデント等を自動整形
• 画像の簡易プレビュー
–マウスオーバーでプレビュー

24. CSS関連の機能

25. CSS関連の機能
• Syntax Highlight
• IntelliSense
• カラーピッカー
• セレクタの補完

26. コード補完
• いろんな場所でコード補完
–CSSファイル / style要素 / style属性

27. カラーピッカー
• カラーパレットから色を選択
–「#」をタイプするとパレットを表示

28. セレクタの補完
• CSSで定義されているセレクタが
HTML側で補完候補に

29. JavaScript関連機能

30. JavaScript関連機能
• Syntax Highlight
• IntelliSense
–組み込みオブジェクト
–自作オブジェクト
–動的な（？）コード補完
• スニペット
• デバッグ実行

31. 詳細はこちらで！
• 『ゆとりJavaScriptコーディング』
–http://goo.gl/TiKFLa
–以前に書きました
• 正直、気味悪いくらいの強力さ

32. ブラウザーリンク

33. ブラウザーリンク
• VS2013からの目玉機能の一つ
–様々なブラウザーでのデバッグ・テストに
便利な機能
• 複数のブラウザで一斉にデバッグ実行
• 同時に再読み込み

34. ブラウザーリンク

35. ブラウザーリンク

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. TypeScript関連機能

38. TypeScript関連機能
• 機能多すぎなので説明割愛
• ほぼほぼ最強のTypeScript開発環境
• 色々情報あると思うので
『続きはWEBで』
–手前味噌だと…
• Visual Studioで始めるTypeScript開発入門
• http://goo.gl/cmyC8L

39. その他ファイルのSyntax Highlight

40. その他ファイルのSyntax Highlight
• 標準で対応しているファイル形式
–CoffeeScript
–LESS
• コード補完も対応
–SASS/SCSS
• コード補完も対応

41. Web Essentialsによる拡張
ここからが本番！

42. Web Essentialsとは
• Web開発関連の便利機能アドオン
–http://vswebessentials.com/

43. Web Essentialsとは
• 無償＆オープンソース
–https://github.com/madskristensen/
WebEssentials2013
–MSの中の人がコントリビュータ

44. Web Essentialsとは
• Visual Studioのバージョンごとに存在
–VS2010 ～ VS2013
• 以前はPro以上のみだったが、
Web Essentials 2013 for Update 2
がExpressでも利用可能に！

45. Web Essentialsのインストール
• 拡張機能マネージャから検索
→ ダウンロード
• インストーラーを実行

46. Web Essentialsの機能一覧
• Browser Link
• Stylesheets
• JavaScript
• HTML
• TypeScript
• LESS
• CoffeeScript
• Markdown
• Custom editors

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. 正直、機能多すぎ
• 全部紹介するのは無理
• デモベースで、特によさそうな部分を
紹介
–ブラウザリンク拡張
–ブラウザ対応状況
–CSS Sprite

49. まとめ

50. VSのWebフロントエンド機能は豊富
• 無償版でもかなり強力
• Web Essentialsも無償で使える
–もはやWeb Essentials 導入は当たり前

51. 余談：ASP.NET開発って恵まれてる
• フロントエンド開発機能も充実
• サーバーサイド開発機能も
もちろん素晴らしい
• Webアプリ開発や学習の際には、
ASP.NETのことも検討してもらえると
うれしいなー（と思います）

52. ご清聴ありがとうございました
おしまい

53. OITEC 第19回勉強会
• 7/19(土) 13:30 –
• 岡山国際交流センター
• アジェンダ
– チームでの開発フローに合わせたTFS運用
– ユニバーサルでXamarinなアプリを開発（仮）
– （ASP.NET関連の何か）
– （Python Tools for Visual Studioネタ ）
– （その他調整中）
• http://oitec.doorkeeper.jp/events/11086