HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣)

提供: IT勉強会・セミナーまとめWiki
移動: 案内検索
開催日 2014/6/9
開催情報
タグ YEOMAN, Visual Studio, WebStorm, Dreamweaver
登壇者 佐川夫美雄さん, 物江修さん, 山本裕介さん, 仲尾毅さん
セッション資料
セッション動画
ブログなど


YEOMAN

最初のセッションは、株式会社ゼノフィ佐川夫美雄さんの「YEOMAN」でした。

Web開発のスキャフォールディング

  • 「型」を提供する
    • 環境構築、バージョンも合わせてくれる
    • テストツール、JSフレームワークも入れてくれる

テンプレートのカスタマイズ

  • テンプレートを自分のプロジェクト用にカスタマイズして、チームに展開すると効率がいい
    • 共通部分を作成してしまう
      • ヘッダーなど

デモ

bootstrapのジェネレータ

  • Yeomanのコマンドを実行しただけで、bootstrapが最初から適用された状態のサイトを一から構築し、ブラウザで表示された

emberのジェネレータ

  • ember.jsが適用された状態のサイトを一から構築
  • ユニットテストのフレームワークも入っている

three.jsのジェネレータ

  • Yeomanのコマンドを実行しただけで、サイトが一から構築され、ブラウザで3Dの立方体が動いた!


HTML5 IDE としての Visual Studio 2013

2つ目のセッションは、日本マイクロソフト株式会社 物江修さんの「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ですべてできる