Web開発のscaffrolding（足場）ツール「YEOMAN」

最初に登壇したのは、ゼノフィの佐川夫美雄氏。
ゼノフィは「Sencha」というWebアプリケーション開発製品郡を用意しているが、今回佐川氏が紹介したのは「YEOMAN」。その理由は「YOEOMANを使えば開発環境の整備が容易になる」からだ。

YEOMANの良さは、テンプレートが揃っていること。たとえばWeb開発に必要なHTML圧縮ができたり、カスケードスタイルシートなどの豊富なツール、lint、hint、ビルド、テストが行えるなどがある。

しかもエディタはSublime Text、Vimなど何でも使えるし、livereloadもついてくる。つまり「YEOMANはWeb開発のscaffrolding（建築現場の足場や足場材料など）」、Webアプリケーションを開発するために必要な基本的な一連のものを用意してくれるツールというわけだ。

扱いも簡単だ。MACユーザーならほかに何かを用意することなく、すぐ使えるという。Windowsユーザーの場合は「msysgitを入れて使って欲しい」と佐川氏。

YEOMANは「yo」「bower」「grunt」で成り立っている。「yo」は雛形作成ツール。yoはコミュニティジェネレータを含めて800のジェネレータを用意しているのが特長だ。

BowerはTwitter社が開発したフロントエンドパッケージマネージャ。bouer.jsonで設定管理をする。jQueryのパッケージが1万3000もある。検索ができるので、目的のモノを容易に取得できる。

GruntはJavaScriptのタスクランナ。package.jsonで使っているツールの種類やバージョンなど設定管理する。タスク定義はGruntfile.jsで行う。Gruntが用意しているプラグイン数は約3000。

「いくつかお勧めがある」と前置きし、佐川氏は次のようなプラグインを紹介した。

• grunt-contrib-yuidoc：JavaScriptのドキュメント化
• grunt-codo：CoffeeScriptのドキュメント化
• grunt-styleguide：SASSのドキュメント化
• grunt-text-replace：ファイルの内容を変える
• grunt-easymock：モックAPIサーバ
• grunt-stubby：モックAPIサーバ
• grunt-connect-proxy：プロキシサーバ

中でも「一番上のプラグインは重要」だと佐川氏。
ここまで解説したところで、佐川氏はwebappとemberのデモを実施。しかし会場の盛り上がりは今ひとつ。そこで「もっと盛り上がるモノを」と、佐川氏が披露したのはThree.jsのデモ。3D図形をブラウザ上に再現したところで参加者から大きな拍手が起こった。

最後に佐川氏は、「YEOMANは環境構築の煩わしさから解放するツールで、開発が楽になるわけじゃない。ただ、YEOMANを触っていることが面白くなってしまい、開発がおろそかになるかもしれない。それだけは注意してください。もちろん、Sencha Architectもよろしく」と語り、セッションを終えた。

• 佐川氏のセッション資料はこちらからご覧ください

クロスデバイス/クロスプラットフォームを実現したVisual Studio 2013

次に登壇したのは、日本マイクロソフトの物江修氏。
物江氏が紹介したのは「Visual Studio2013」。Visual Studioとはマイクロソフトが開発した、複数の開発ツールが集まった開発製品“Suite”。Professional、Ultimate、Premium、Expressというエディションがあり、Expressは無償版でホビーユーザー向けとなっている。

VisulStudioでは、Webアプリケーションをはじめ、Windowsストアアプリ、WindowsPhoneアプリ、XBOXアプリが開発できる。ストアアプリ、WindowsPhoneアプリ、XBOXアプリはネイティブアプリで、「ブラウザで動くアプリよりも4倍速い速度で動く」と物江氏は語る。

ProfessionalエディションにMulti-Device Hybrid Appsを追加し、CORDOVAを使うとiPhoneアプリも開発できる。最新バージョンのVisual Studio 2013 Update 2ではクロスデバイス、クロスプラットフォーム、すべてのブラウザに対応できる全方位的なHTML5が作れるようになる。

Visual Studio 2013はHTML5エディタしても、強力な入力支援機能とデバッガ機能を搭載していると、実際にデモで入力やデバッグの容易性を披露する物江氏。

次に紹介したのがWebコンテンツ用アドイン、「Web Essentials 2013 for Update 2」である。「このアドインを使うとより高機能になる」という。デモではtableやsvgの記述、CSS、画像の追加などがいかに簡単にできるかを披露した。またブラウザ上でも編集ができるというデモも実施した。

例えば複数の画像をつなげて表示したい場合は、Web Essentialsで「Create Image stripe」を選び、stripepngをドラッグする。それだけで簡単に目的の画像が表示できる。そのほかにもCoffeeScriptを追加するデモなどを実施したが、「今日、披露していた機能はほんの一部だ」と物江氏は言う。

Visual Studioはパフォーマンステストの機能も用意している。
「Visual Studio 2013はHTML5でいろいろなモノが作れるように注力して開発している製品。アップデート2ではHTML5向けの機能がさらに強化されている。HTML5を書くときはぜひ、Visual Studioを使ってほしい」（物江氏）

• 物江氏のセッション資料はこちらからご覧ください。

Gitとの連携も可能。IDEの編集しながらブラウザ側も更新「WebStorm」

3番目に登壇したのは、サムライズムの山本裕介氏。
山本氏が紹介するのは、JetBrainsが開発した「WebStorm」だ。「JetBrainsはすばらしいツールをたくさん開発しているチェコのソフトウェアベンダ。山本氏は同社の製品を広めたくて、サムライズムを起業した」という。相当の惚れ込みようだ。

JetBrainsでは「WebStorm」「RubyMine」「PhpStorm」などJavaScript、Ruby、PHP、Python、Objective-C、.net関連、Visual Studioを強化するツール、さらにはコラボレーションツールなどさまざまな製品を提供している。その中で今回紹介された「WebStorm」はHTML、JavaScript、Node.jsなどを開発するためのIDEである。またJetBrainsではRubyMine、PhpStorm、PyCharm、WebStorm相当を含んだ「IntelliJ IDEA」も用意しており、山本氏はそれを愛用しているとのこと。

WebStormの特長の一つが「HTML、JavaScript、CSSのコードハイライト、補完ができることだ。また「本日の最初に紹介されたYEOMANやnpm、Bowerもサポートしている」という。

• HTML / JS / CSSのコードハイライト、補完
• Node.JS開発
• npm、Bower、Yeomanのサポート
• AngularJS等のフロントエンドフレームワークサポート
• SpyJSの組み込み
• GitHub対応

新しい技術に対応するのが早いという特長もある。「例えばマイクロソフトが開発したTypeScripは、発表の翌月にはサポートしていた」と山本氏の言葉には、参加者も驚きの声が…。
「IDEというと起動が遅いと懸念する人がいるが、WebStormは3秒ぐらいで起動。気になるほどではない」と話しながら、山本氏はWebStormの画面を起動。WebStormの最大の特長は、タイプするそばからブラウザ側も更新されるところ。

Sassファイルにも対応しており、Sassファイルを書いているそばからコンパイルしてくれるという。「マルチカーソルも簡単に使えるほか、Time Scriptはネイティブで対応。Source Mapsにも対応している」と山本氏。WebStormではNode.jsアプリのデバッグも簡単にできる。その際、使うのはapp.jsだ。さらに山本氏は「spy-js」や「LiveEdit」を紹介。

spy-jsはJavaScriptアプリケーションのトレースやデバッグ、プロファイリングのためのツールだ。一方のLiveEditはブラウザをリロードすることなく、編集内容を即座に更新してくれる機能。しかも「リモートでも動く。これもすごいところ」と山本氏は誇らしげに言う。現在はChromeでしか動かないという。「他のブラウザを使う場合はVisual Studioで（笑）」と山本氏は会場の笑いを誘った。

「WebStormはリファクタリングも強力だ」という。Gitと連携しており、コミットやプッシュなどはIDE上からできるという。「Gitに慣れている人はコマンドラインの方が好きだと思うので、その場合はターミナルが内蔵されているので、そちらを使ってください（笑）」（山本氏）

法人で使う場合の価格は約1万円（コマーシャルライセンス）。個人向けには約5000円のパーソナルライセンスも用意。個人向けとはいえ、業務利用も可能だという。ただし経費計上は不可となっている。
「30日は無料で使用できるので、興味のある方はぜひ、試して欲しい」（山本氏）

• 「WebStorm」についての詳細はこちらからご覧ください。

グラフィックツール感覚でWebアプリが編集できる「Dreamweaver」

最後に登壇したのはアドビシステムズの中尾毅氏。
アドビが提供しているのはPhotoshopやIllustratorをはじめとするクリエイティブ・デジタルツール。そのラインナップにはWeb開発ツールもある。

今回紹介するDreamweaverをはじめ、Fireworks、Flash、さらにはEdgeというツール群など、アドビでは「HTML5、モダンWeb に対応した新しいツール群を続々提供している」と中尾氏は言う。これらすべてのアドビ製品はパッケージではなく、Creative Cloudという月額サービスとして提供している。「単体プランは割高なので、コンプリートプランがお勧め。まずは30日間無償体験に登録して使ってみて」と中尾氏。

Dreamweaverは、Webアプリケーション開発におけるすべてのフロー（情報設計・画面設計～実装、テストまで）をカバーする。最新バージョンDreamweaverCCは2013年5月に発表、6月から提供開始した。「CSSデザイナー」「可変グリッドレイアウト」「設定の同期」「WebKitプレビュー」という新機能を搭載している。

「今日は最新バージョン13.2の概要およびこれらの新機能についてデモを交えて説明したい」
最初に紹介したのは可変グリッドレイアウト。これはデスクトップやスマートフォン、タブレットなど、さまざまな画面サイズに適したレイアウトを実現するための機能だ。「それぞれの画面を簡単に切り替えて見ることができる」と語り、それぞれの画面の見え方を披露した。

次はCSSデザイナー。これはCSSファイル、ルール、設定済みプロパティ、メディアクエリーを作成するツールで、ソース、@Media、セレクター、プロパティという4枚のパネルで構成される。例えばグラフィックを選択して直接、CSSデザイナーのプロパティで編集していくなど、「グラフィックツールのような感覚で編集していけるのが、このツールの特長だ」と語る。

次に中尾氏が取り上げたのは、Edge Reflow CCやEdge Inspect CCなどのEdgeツール群だ。Edge Reflow CCはデザインを行うためのツールで、メディアクエリーによるレスポンシブデザインを直感的な操作で定義できるというもの。実際、デスクトップ用とスマートフォン用のレイアウトを容易に作り分ける様を披露した。

Edgeツールの中で最もユニークなのがEdge Inspect CC。これはモバイルデバイスでのWebデザインのプレビューと動作検証ためのツール。インストールしたパソコンから、リモートインスペクションの対象に設定したデバイスに編集した結果を瞬時に反映できるというもの。「リモートインスペクションを使って作業すると、開発効率が上がる」という。

その他にもアニメーションやインタラクティブコンテンツが作成できるEdge Animate CC、コーディングツールEdge Code CCなどを紹介。
「これらEdgeツールはCreative Cloudの体験版メンバーでも、無償でずっと使うことができる。興味のある人はぜひ試して欲しい。アドビの製品について詳しく知りたい方は、Adobe Pinch InやCreative Cloud道場ブログを見てください」

• 仲尾氏のセッション資料はこちらからご覧ください。

「天下一」の称号を手に入れたのは誰？

そして天下一を決めるアンケートが始まった。
いずれの開発ツールが「天下一」の称号を手に入れたのか。
最も票を集めたのはこの人！

今回のセッションは動画でも公開されている。デモの様子も見ることができるので、ぜひこちらからご覧いただきたい。

CodeIQコード銀行にあなたのコードを預けてみませんか？

• CodeIQコード銀行ではあなたのコードを財産と考えます。
• お預かりいただいたコードは、CodeIQコード銀行がしっかり評価し、フィードバックいたします。
• 当コード銀行にお預けいただいたコードは、企業がみてスカウトをかける可能性があります。
• 転職したい方や将来転職することを考えている方で、今の自分のスキルレベルを知りたい方はぜひ挑戦してみてください。
• 企業からスカウトがきたら困る人は挑戦しないでください。

興味を持った方はこちらからチャレンジを！