Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

「HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) 」に行ってきた(その2「HTML5 IDE としての Visual Studio 2013」by 日本マイクロソフト株式会社 Webエバンジェリスト物江修さん)

f:id:JHashimoto:20140409044240j:plain

6/9に「HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) 」に行ってきました。途中で帰らなければならなかったので、2つのセッションしか聞けなかったのですが、2回に分けて勉強会の内容を紹介します。

HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) : ATND
第二回 html5j Webプラットフォーム部ナイトセミナー

 

今回は2回目です。2つ目のセッションは、日本マイクロソフト株式会社 Webエバンジェリスト物江修さんの「HTML5 IDE としての Visual Studio 2013」でした。

セッション内容

JavaScriptでネイティブアプリが書ける

  • JavaScriptがコンパイルされて動くので、4倍くらい速い

Visual Studio 2013のデモ

以下のソースコードにも対応
  • SASS
  • LESS
  • CoffeeScript
コードスニペット
  • "nav"と入力するだけで<nav>のタグに展開
  • "html5"と入力するだけで、html5文書の雛形に展開
インテリセンス
  • JavaScriptの型を認識する
  • [x = "1";]と入力すると、xに続く入力候補にはString型のメンバーが出てくる
  • [x = 1;]と入力すると、xに続く入力候補にはNumber型のメンバーが出てくる
Zen-Codingもできる
IE以外のブラウザでも動作確認できる
brower link
  • ブラウザ再起動せずに、表示が更新されソースの変更が反映される
brownser link ダッシュボード
  • ブラウザで修正でき、ソースに反映される
StyleSheet編集
  • box-shadow:カラーピッカーから色を選べる
jQuery
  • NuGetでプロジェクトに組み込める
  • HTMLにjQueryのjsファイルをドラッグアンドドロップすると、linkタグが生成される
  • コードスニペット
    • "jq"や"jqclick"と入力すると、jQueryを扱うための雛形のソースコードが展開される
  • インテリセンス
    • cdnから読み込んだ、jQuery UIでもインテリセンスが効く
画像
  • imageタグをマウスオーバーすると、その画像が表示され確認できる
  • base64エンコード可能
  • 画像の圧縮も可能
  • 画像を複数選んで、[create image sprite]でスプライト画像も作成できる
CoffeeScriptのソースコード
  • CoffeeScriptを書いて、保存するだけでJavaScriptのファイルができる
  • JavaScriptのソースコードをステップ実行可能
  • mapファイルを使えば、CoffeeScriptのソースコードでステップ実行もできる
デモの内容は、無償のExpress Editionですべてできる

セッション資料

HTML5 IDE としての Visual Studio 2013
HTML5 IDE としての Visual Studio 2013 ...

セッション動画

関連エントリー

「HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) 」に行ってきた(その1「YEOMAN」by 株式会社ゼノフィ佐川夫美雄さん) - プログラマーな日々

レポート記事

最も使えるWebアプリケーション開発ツールは?HTML5開発ツール天下一武道会 #html5jplat|CodeIQ MAGAZINE
日本マイクロソフトのセミナールームで開催された「HTML5 開発ツール天下一武道会(IDE+α編:初夏の陣)。Webアプリケーション開発に最も優れた天下一の開発ツールとは何か。今回紹介されたのは話題の「YEOMAN」「Visual Studio」「WebStorm」「Dreamweaver」。いずれの開発ツールが最強なのか、デモを交えたセッションが行われた。 ...