6/9に「HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) 」に行ってきました。途中で帰らなければならなかったので、２つのセッションしか聞けなかったのですが、２回に分けて勉強会の内容を紹介します。
HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) : ATND
第二回 html5j Webプラットフォーム部ナイトセミナー
今回は２回目です。２つ目のセッションは、日本マイクロソフト株式会社 Webエバンジェリスト物江修さんの「HTML5 IDE としての Visual Studio 2013」でした。
セッション内容
JavaScriptでネイティブアプリが書ける
- JavaScriptがコンパイルされて動くので、４倍くらい速い
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+α編 : 初夏の陣) 」に行ってきた（その１「YEOMAN」by 株式会社ゼノフィ佐川夫美雄さん） - プログラマーな日々
レポート記事
最も使えるWebアプリケーション開発ツールは？HTML5開発ツール天下一武道会 #html5jplat｜CodeIQ MAGAZINE
日本マイクロソフトのセミナールームで開催された「HTML5 開発ツール天下一武道会（IDE+α編:初夏の陣）。Webアプリケーション開発に最も優れた天下一の開発ツールとは何か。今回紹介されたのは話題の「YEOMAN」「Visual Studio」「WebStorm」「Dreamweaver」。いずれの開発ツールが最強なのか、デモを交えたセッションが行われた。 ...
