View
5.818
Download
1
Category
Preview:
DESCRIPTION
プログラミング生放送勉強会 第29回@サイボウズ株式会社 松山オフィスで行われた同名のタイトルのセッション資料です。
Citation preview
無償版Visual StudioでいろいろWeb開発
第29回@サイボウズ株式会社松山オフィス
2014/06/14
(by きよくら ならみ)
自己紹介
• きよくら ならみ–@kiyokura
–kiyokura.hateblo.jp
• 岡山生まれ岡山育ちのプログラマー
• NET系の開発やWebアプリ開発–Microsoft MVP for ASP.NET/IIS
諸注意と免責事項
• 私個人による調査と見解であり所属する組織を代表するものではありません
• 万が一、本セッションの内容の誤りに起因する何らかの損害が発生した場合においても、私は一切の責任を負うことができませんご了承ください お約束!
本セッションの目的とゴール
• 目的–Visual Studioが.NET開発以外でも使え
ることを知ってもらう
–無償版でも比類なき強力さであることを知ってもらう
• ゴール–VS2013 Express for Webの可能性の一
端を知っていただく
本日扱う環境
• Visual Studio 2013 Express for Web
–Update 2適用済み
–拡張機能「Web Essentials」適用済み
無料です!
アジェンダ
• Visual Studio と Express Edition
• VS組み込みのWeb開発機能たち
• Web Essentialsによる拡張
• まとめ
Visual Studio と Express Edition前提知識として
Visual Studioとは
• Microsoft製の統合開発環境
–統合開発環境=IDE
• 様々な言語・プラットホームの開発
• 現在の最新版はVisual Studio 2013
以降、本資料では、スペースの都合上Visual StudioをVSと省略する場合があります
無償版『Express エディション』
• Visual Studioの無償版
–Professional以上のエディションは有償
• 『機能限定版』という位置づけ
–「お試し版」ではない
–どう限定されているかはバージョンで違う
VS2013 Expressの種類
• VS2013 Expressファミリの構成
–for Windows
• Windowストアアプリの開発環境
–for Windows Desktop
• Windowsのデスクトップアプリの開発環境
–for Web
• Webアプリの開発環境
VS2013 Express for Web
• Webアプリケーション開発
–ASP.NET
–Webクライアントサイド開発
• HTML
• JavaScript
• CSS
• TypeScript , etc….NETじゃなくても“使える”!
VS2013 Express for Webの導入
• 幾つかあり、その一例:
–Webからダウンロード&インストール
• http://www.microsoft.com/ja-jp/download/details.aspx?id=40747
• ISO or WEBインストーラを選択
VS2013 Express for Webの基本機能
まずはジャブ気味に
VS2013 Express for Webの基本機能
• HTMLエディタ
• CSS関連機能
• JavaScript関連機能
• ブラウザーリンク
• TypeScript関連機能
• その他ファイルのSyntax Highlight
※初めて使うとき
• 「標準」ツールバーを表示しておく
–インストール直後は出てないかも
–[表示]-[ツールバー]-[標準]
HTMLエディタ
HTMLエディタ
• Syntax Highlight
• リソースの貼り付け
• IntelliSense
• コードスニペット
• その他
Syntax Highlight
• タグ・属性・スクリプト等を色分け表示
IntelliSense
• 各種コード補完
–閉じタグ自動補完
–属性/属性値
–外部リソース
リソースの貼り付け
• 外部リソースをD&Dで挿入
–画像/スクリプト/CSS
インテリセンス - AngularJS
• AngularJSのng-*属性の補完
–標準で対応
コードスニペット
• よく使うフレーズを簡易入力
–キータイプ+tabキー
–コンテキストメニュー
その他
• オートフォーマット
–インデント等を自動整形
• 画像の簡易プレビュー
–マウスオーバーでプレビュー
CSS関連の機能
CSS関連の機能
• Syntax Highlight
• IntelliSense
• カラーピッカー
• セレクタの補完
コード補完
• いろんな場所でコード補完
–CSSファイル / style要素 / style属性
カラーピッカー
• カラーパレットから色を選択
–「#」をタイプするとパレットを表示
セレクタの補完
• CSSで定義されているセレクタがHTML側で補完候補に
JavaScript関連機能
JavaScript関連機能
• Syntax Highlight
• IntelliSense
–組み込みオブジェクト
–自作オブジェクト
–動的な(?)コード補完
• スニペット
• デバッグ実行
詳細はこちらで!
• 『ゆとりJavaScriptコーディング』
–http://goo.gl/TiKFLa
–以前に書きました
• 正直、気味悪いくらいの強力さ
ブラウザーリンク
ブラウザーリンク
• VS2013からの目玉機能の一つ
–様々なブラウザーでのデバッグ・テストに便利な機能
• 複数のブラウザで一斉にデバッグ実行
• 同時に再読み込み
ブラウザーリンク
ブラウザーリンク
ブラウザーリンク
• 静的ファイルでブラウザリンクを有効にするには設定が必要– 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>
TypeScript関連機能
TypeScript関連機能
• 機能多すぎなので説明割愛
• ほぼほぼ最強のTypeScript開発環境
• 色々情報あると思うので『続きはWEBで』
–手前味噌だと…
• Visual Studioで始めるTypeScript開発入門
• http://goo.gl/cmyC8L
その他ファイルのSyntax Highlight
その他ファイルのSyntax Highlight
• 標準で対応しているファイル形式
–CoffeeScript
–LESS
• コード補完も対応
–SASS/SCSS
• コード補完も対応
Web Essentialsによる拡張
ここからが本番!
Web Essentialsとは
• 無償&オープンソース
–https://github.com/madskristensen/WebEssentials2013
–MSの中の人がコントリビュータ
Web Essentialsとは
• Visual Studioのバージョンごとに存在
–VS2010 ~ VS2013
• 以前はPro以上のみだったが、Web Essentials 2013 for Update 2がExpressでも利用可能に!
Web Essentialsのインストール
• 拡張機能マネージャから検索→ ダウンロード
• インストーラーを実行
Web Essentialsの機能一覧
• Browser Link• Stylesheets• JavaScript• HTML• TypeScript• LESS• CoffeeScript• Markdown• Custom editors
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
流石に多すぎる…
正直、機能多すぎ
• 全部紹介するのは無理
• デモベースで、特によさそうな部分を紹介
–ブラウザリンク拡張
–ブラウザ対応状況
–CSS Sprite
まとめ
VSのWebフロントエンド機能は豊富
• 無償版でもかなり強力
• Web Essentialsも無償で使える
–もはやWeb Essentials 導入は当たり前
余談:ASP.NET開発って恵まれてる
• フロントエンド開発機能も充実
• サーバーサイド開発機能ももちろん素晴らしい
• Webアプリ開発や学習の際には、ASP.NETのことも検討してもらえるとうれしいなー(と思います)
ご清聴ありがとうございました
おしまい
OITEC 第19回勉強会
• 7/19(土) 13:30 –
• 岡山国際交流センター
• アジェンダ– チームでの開発フローに合わせたTFS運用
– ユニバーサルでXamarinなアプリを開発(仮)
– (ASP.NET関連の何か)
– (Python Tools for Visual Studioネタ )
– (その他調整中)
• http://oitec.doorkeeper.jp/events/11086
Recommended