(第8回)がアドビシステムズ(東京)で40人の定員規模で開催されました。勉強会のフォローアップとして、発表資料「CreateJSのための高速なトライアル&エラー開発環境の作り方」のスライドを一部抜粋し記事という形で公開します。リッチなコンテンツを効率的に作るための開発環境づくり今回のCreateJS勉強会では、スペシャルサイトやゲームなどのリッチなコンテンツを作るためにCreateJSを使用している方が多くいらっしゃいました。CreateJSではリッチなコンテンツ表現を作成できますが、その表現を高めるためにはトライアル&エラーを繰り返すことが必要になります。本記事では効率よく開発するための開発環境の作り方を紹介します。勉強会でも共有した開発環境の動画です。CCとのスムーズな連携が確認できます。CCとコードを組み合わせたワークフローについてリッチなコンテンツを作る場合は、複数人での開発が欠かせません。そのため、開発中にいかに作業待ちが発生しないワークフローを作る必要があります。CCでデザインや演出を作成しCreateJSファイルへと書き出し、フロントエンジニアはそのファイルとは別ファイルへソースコードを書いていきます。デザイナーとエンジニアが出力したファイルはGulpやnpm-scriptsなどでまとめて、最終的な成果物を出力します。CCではデザインや演出を独立したJavaScriptファイルへと出力でき、出力したJSをエンジニアが修正する必要がないことです。デザイナーはフロントエンドエンジニアの実装を待つことなくデザインを作ったり修正でき、フロントエンドエンジニアはデザイナーのデザインや演出を待つことなく実装に集中できます。並行して作業ができるため、効率よく開発ができます。開発手法(TypeScriptのすすめ)TypeScriptはJavaScriptに型を付けた言語で、コンパイルすることでJavaScriptに出力できます。TypeScriptを採用することで得られるCreateJSの開発効率について、「プログラムの入力補完」、「アセットの入力補完」、「コンパイルエラーでエラーが事前にわかる」という点から紹介します。プログラムの入力補完についてTypeScriptには型があるため、変数名やクラス名などの入力候補がエディター上で表示されます。詳細なAPI名を覚えなくて済むため、APIリファレンスを探しに行く手間がありません。キータイプ時間が短くなり、入力ミスによるバグの回避などにもつながります。既存のJavaScriptとTypeScriptを合わせて使うには型定義ファイルが必要になります。--save型定義ファイルが公開されていない場合は自分で作る必要がありますが、npmパッケージで公開されているライブラリーであればマイクロソフト社が公開している「dts-gen」という型定義ファイルを作るツールを使用すると良いでしょう。Qiita」を参照ください。WebStorm(エディター)でTypeScriptの型定義による入力補完が効いているため、具体的なAPIを覚えていなくても入力できます。CCから出力されたアセットはJavaScriptのクラスとして定義されているので、プログラムからインスタンスとして生成できます。これらのアセットをTypeScriptから扱うときには、「createjs-def」というツールを使うと良いでしょう。CCから生成されたJavaScriptファイルアセット専用の型定義ファイルを作れます。アセットのクラス名やインスタンス名の型定義ファイルがあることで、入力補完で素早く入力できますし、インスタンス名の指定ミスにもすぐに気づけるでしょう。CCから生成されたJavaScriptファイルからアセット専用の型定義ファイルを作れます。CC上で配置したインスタンス名がWebStormのエディター上で補完されています。コンパイルエラーでエラーが事前にわかるTypeScriptはコンパイルしてJavaScriptになるため、コンパイル時にコードの構文チェックがされます。そのため、ブラウザーなどで実行する前にエラーとなる箇所がわかります。コンパイルをすることで、変数名や関数名の記入ミスで発生するコンテンツの停止を事前に防ぎやすくなります。ブラッシュアップ手法についてブラウザーの自動更新を行うコードやアセットの修正時に自動でブラウザーが更新されるツールを導入すると、手作業でのブラウザー更新の手間がへり、コンテンツをブラッシュアップする際の効率化につながります。BrowserSync(※)やWebStormのローカルサーバー機能(※)を使用すると良いでしょう。Grunt・Gulpと始めるBrowserSync入門」を参考ください。使いこなせば操作が爆速になる機能のまとめ」を参考ください。エディター上のデバッガーを使うプログラムのデバッグであればブラウザー付属の開発者ツールではなく、デバッガーが搭載されているエディターを使用すると効率よく開発できます。Codeにはデバッガーが付属しています。bracketsという拡張機能をインストールするとプログラムのデバッグが可能です。開発者ツールのコードとエディターのコードは同じものですが、デバッグ中に開発者ツールで気になる箇所を見つけてもエディターのコードとは別のソフトウェアのため行き来が必要になります。エディターにデバッガーが搭載されていれば行き来がなくなり、より効率よく開発できるでしょう。タスクランナーで自動化を行う何度も行うようなクリエイティブではない作業はタスクランナーにまかせて、クリエイティブの為のブラッシュアップを行いましょう。具体的には次の作業を自動化すると良いでしょう。詳しくは記事「CreateJSとToolkitで納品レベルまで最適化・高速化する方法」を参考ください。クリエイティブな作業に集中しようウェブ技術の進化やスマホなどデバイスの多様化により、リッチコンテンツ制作に求められるものが高度化しています。そのため、従来の開発方法では対応しきれないことも増えてきました。開発環境を見直し、クリエイティブな作業に集中できる効率的な開発環境の構築を目指してはいかがでしょうか。本記事で紹介した開発環境はGitHubにて公開しています。興味のある方はぜひご覧ください。平成29年1月16日に内容をメンテナンスしています。のぞみインタラクティブデベロッパー。好きな生き物はハムスター、好きな食べ物は豚汁です。ツールは使うより作りたい派。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。