無償版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とは

• Web開発関連の便利機能アドオン

–http://vswebessentials.com/

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