More Related Content
Similar to 無償版Visual StudioでいろいろWeb開発 (20)
More from Narami Kiyokura (9)
無償版Visual StudioでいろいろWeb開発
- 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インストーラを選択
- 14. VS2013 Express for Webの基本機能
• HTMLエディタ
• CSS関連機能
• JavaScript関連機能
• ブラウザーリンク
• TypeScript関連機能
• その他ファイルのSyntax Highlight
- 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>
- 44. Web Essentialsとは
• Visual Studioのバージョンごとに存在
–VS2010 ~ VS2013
• 以前はPro以上のみだったが、
Web Essentials 2013 for Update 2
がExpressでも利用可能に!
- 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
流石に
多すぎる…
- 53. OITEC 第19回勉強会
• 7/19(土) 13:30 –
• 岡山国際交流センター
• アジェンダ
– チームでの開発フローに合わせたTFS運用
– ユニバーサルでXamarinなアプリを開発(仮)
– (ASP.NET関連の何か)
– (Python Tools for Visual Studioネタ )
– (その他調整中)
• http://oitec.doorkeeper.jp/events/11086