引き続きHTML5開発を目的としたIDEを紹介していきます。これまでに紹介してきたIDEは以下の通りです。
今回は、先日8.0がリリースされたEclipse Foundationが開発しているクラウドIDE、Orionを紹介します。まだ機能不足感はぬぐえませんが、今後は開発環境のクラウド化もどんどん進んでいくと思われますので要注目の存在と言えるのではないでしょうか。
エディタはESLintに対応
JavaScriptの文法チェッカーが入っており、JavaScriptファイルを開くと自動的にチェックが行われます。コードとして動作はしますが、注意と警告が表示されます。
注意のアイコンなどにマウスを当てると、その内容が表示されます。
チェックする内容は設定画面で変更可能です。基本的にはそのままで良いかと思いますが、JSDocがない場合はIgnoreとなっているのは好み、プロジェクトの規模などによって選択が分かれる所でしょう。
また、右側にはコード全体が縮小されて表示されています。これを見ることで全体の長さや、自分が今どこを修正しているのかが俯瞰的に見られるようになります。
入力補完機能
HTMLは問題なく入力補完が可能です。
JavaScriptの入力補完は開いているファイル内に留まるようです。
HTMLやJavaScriptファイルはアウトライン化もできます。全体の構造が分かりやすくなるでしょう。
プラグインによる拡張
オープンソース・ソフトウェアらしく、プラグインによる拡張に対応しています。まだ数は多くありませんが、今後プラグインによってどんどん便利になっていくと思われます。
デプロイ機能
Orionをサーバとしてデプロイする機能があります。自分のローカルでは設定が必要と思われますが、クラウド版のOrion Hubでは自動的にサーバが立ち上がってアクセスできるようになります。
Gitサポート
バージョン管理システムとしてはGitをサポートしています。プロジェクトをはじめるに当たって、GitHubなどのリポジトリを指定してcloneしてはじめることも可能です。Gitはリポジトリビューワーとしても使える他、コミットやプッシュといった処理も可能です。
Orionはダウンロード版を使って自分でサーバを立てる方法と、クラウド版のOrion Hubを使う2種類が用意されています。Orion Hubで使われているのは安定版になると思われますので、新しい機能を使っていく際にはダウンロード版をお勧めします。
現状で言うとWebブラウザ上で開発できるという以上の大きなメリットはないかも知れません。デバッグ機能やブレークポイントの設定といった機能はありませんので、ブラウザのものを頼ることになります。
ただし、Orion Editorを自分のサイトに組み込めたり、開発環境の整備が不要、コードのシェアが容易などクラウドならではの開発スタイルも実現できます。開発はとても盛んで、既に9.0の開発に着手しています。それだけに今後の発展に目が離せない存在と言えそうです。
企業のWebシステムにおいて重要なチャートの一つにガントチャートがあります。プロジェクト管理で使うことが多いですが、その他普段の業務の中で使うこともできるでしょう。
そこで今回からガントチャートの各種ライブラリをレビューしていきたいと思います。hifiveで使える（組み合わせやすい）もの、使えないものがありますのでご注意を。
Angular Gantt
Angular Ganttはその名の通り、AngularJSで使うガントチャートライブラリです。AngularJS自体がMVCフレームワークなので、hifiveとの組み合わせは想定していません。
インストール方法としては、bowerを使うのが簡単なようです。
bower install angular-gantt --save
またはCDNで配信されているものを使うこともできます。
<head> <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/> </head> <body> : <script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.js"></script> </body>
さらにプラグインを使う場合は、次のようにします。
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt-plugins.min.css"/>
</head>
<body>
:
<script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt-plugins.min.js"></script>
</body>
使い方
使い方は、まずAngular Appを生成する際に指定します。
// 基本はこちら
var myApp = angular.module('myApp', ['gantt']);
// プラグインを使う場合
var myApp = angular.module('myApp', ['gantt', 'gantt.table', 'gantt.movable', 'gantt.tooltips']);
そしてガントチャートを表示したい部分にgantt要素を指定します。
<!-- 基本はこちら -->
<div gantt data=data></div>
<!-- プラグインを使う場合 -->
<div gantt data=data>
<gantt-table></gantt-table>
<gantt-movable></gantt-movable>
<gantt-tooltips></gantt-tooltips>
</div>
後はデータをJSONオブジェクトで渡します。ここはAjaxを使って取得しても良いでしょう。
$scope.data = [
{name: 'row1', tasks: [
{name: 'task1', from: <date>, to: <date>},
{name: 'task2', from: <date>, to: <date>}
]
},
{name: 'row2', tasks: [
{name: 'task3', from: <date>, to: <date>},
{name: 'task4', from: <date>, to: <date>}
]
},
...
]
デモ
実際に表示した例は次のようになります。
表示方法など、多くのカスタマイズ項目があります。
タスクはドラッグ&ドロップで移動できます。
表示を週ごとにした場合。日付は非表示になります。
デモはAngular Gantt – Gantt chart component for AngularJS (Demo)にて試せます。
データフォーマット
データは基本的に行と呼ぶ配列に入ります。その中にタスクが複数入って管理されます。
行は次のようなJSONです。
{
name: "...", // 各行の左に出る名前
id: "...", // ユニークなID（オプション）
height: "..." // 高さ（オプション）
color: "..." , // 色（オプション）
classes: <Array|String>, // クラス。配列または文字列（オプション）
content: "...", // ラベルに使う文字（オプション）
tasks: [] // タスクを入れる配列
}
そしてタスクは次のようになります。
{
name: "...", // タスク名
from: <Date>, // 開始日。文字列、Dateオブジェクト、タイムスタンプなどが使えます
to: <Date>, // タスク終了日
id: "...", // ユニークなID（オプション）
color: "..." , // 色（オプション）
classes: <Array|String> // クラス。配列または文字列（オプション）
priority: <Number> // プライオリティ（オプション）
data: <Any> // 独自のカスタムデータを適用する場合（オプション）
content: "...", // ラベルに使う文字（オプション）
}
この内容で分かる通り、行とタスク名、日付以外はオプションばかりです。
プラグイン
執筆時点で用意されているプラグインは次の通りです。
Table
左側の固定表示列に任意のカラムを表示できるようになります。
Tree
タスクをグループごとに折りたたみできるツリー表示にします。テーブルと同時には使えないようです。
Groups
タスクを行の中に折りたたんだ時の表示をサポートします。Treeと一緒に使います。
Sortable
ソート機能を提供します。
Movable
タスクの移動、日付の変更をサポートします。
Draw Task
マウスで新しいタスクを作成します。
Tooltips
ツールチップ表示用です。
Bounds
タスクを移動した時に赤い枠表示を出すかどうか。
Progress
タスクの下にプログレスバーを出すかどうか。
Resize Sensor
レスポンシブWebデザイン用。
API
タスクを移動したり、削除したり、ラベルをクリックしたりした時にイベントがとれます。また、タスクの追加やフィルタも可能です。
スクロール
タスクが横、縦に長い場合はヘッダーや左側のタスクを残したままスクロールができるようになっています。
AngularJSを使ってWebシステムを構築しているのであればAngular Ganttを選択すると良さそうです。データフォーマットは分かりやすいですし、イベントも多いのでカスタマイズしやすいかと思います。
引き続きHTML5開発を目的としたIDEを紹介していきます。これまでに紹介してきたIDEは以下の通りです。
今回はIntelが提供しているHTML5開発用のIDE、Intel XDKを紹介します。Cordovaの開発やIntel Edisonの開発にも利用できる多用途なIDEとなっています。
UIは独特
Intel XDKはマルチプラットフォーム対応されていて、若干特殊なUIに感じられるかも知れません。またネイティブに比べると若干速度が落ちるようです。
新規プロジェクトを作成する際には、WebアプリケーションかCordovaを使ったハイブリッドアプリの開発かを選択できるようになっています。
Webアプリケーションを選択した場合、以下のフレームワークがデフォルトに組み込めるようになっています。
- App Framework
- Ratchet
- Twitter Bootstrap 3
- jQuery Mobile
- Topcoat
いずれもWebアプリケーションを開発するためのフレームワークになります。
ビジュアルデザイナーが付属
Intel XDKの便利なところとして、ビジュアルデザイナーがあります。通常、オーサリングツールで提供される機能ですが、Intel XDKではコンポーネントごとにドラッグ&ドロップでUIを組み立てられるようになっています。
細かな修正はプロパティを編集して行いますが、Webサイトを作れるレベルでのカスタマイズは求めない方が良いでしょう。ただしWebベースの業務システムを構築するには十分な機能となっています。
もちろんソースコードを自分で修正することもできます。
補完入力対応
補完入力はもちろん提供されています。
HTMLの場合はsrc要素に対してファイルのパスから補完入力が可能です。
hifiveのようなライブラリを読み込んだ場合も補完入力が可能ですが、すべてのメソッドが出る訳ではないようです。
一部、下の画像のように関数の内容まで補完してくれます。これは便利な機能です。
デフォルトでJSLint対応
JavaScriptのファイルに対しては自動的にJSLintの結果が表示されます。
プラグインによる拡張
プラグインが用意されています。CSSLintであったり、LESSの補完機能などが手軽にインストールできます。コミュニティベースのZipからのインストールも可能です。
高機能なスマートフォンシミュレータが付属
Intel XDKのシミュレータは高機能で、スマートフォンの枠を使ってそれらしく表示します。デバイスも多彩なAndroidデバイスに加え、
iPhone 6 Plusも提供されています。
ダミーで位置情報を与えることができたり、ネットワーク設定を変更することもできます。
デバイスの傾きや加速度をシミュレーションすることができます。HTML5のAPIを活用したWebアプリ開発に役立つでしょう。
外部APIをサポート
ちょっと変わった機能として、多くの外部Webサービスで提供されているAPIを実行する機能が備わっています。例えば以下はiTunesのAPIをコールする機能で、カテゴリや国などを入力補助してくれます。
そして設定ができると、そのWeb APIを利用するためのダミーコードを生成してくれます。
デバッグはChromeをサポート
Intel XDKではブレークポイントは提供されていません。その代わりにGoogle Chromeを立ち上げてデバッグできるようになっています。JavaScriptのデバッグについてはGoogle Chromeを利用する形になります。
ただしDOMについてはIntel XDK上で立ち上げたDev ToolsからGoogle ChromeのDOMをハイライトさせられます。
非常に面白いのはBracketのようにリアルタイム編集機能に対応していることで、Intel XDK上で修正したHTML内容をその場で（リロードなしで）Google Chromeの表示結果に反映できるようになっています。リロードなしでHTMLの修正がどんどんできるのは面白い感覚です。
代替記法のサポート、テスト機能はなし
プラグインには今のところQUnitを動かしたり、CoffeeScriptを使うような機能はなさそうです。この辺りは既存の仕組みを使う必要があるでしょう。
Intel XDKは想像しているよりもIDEとして優れています。デバッグはGoogle Chromeを頼るのが良さそうですが、スマートフォンを含めてシミュレート環境についてはIntel XDK上だけで完結できます。またビジュアルデザイナーがあるのは大きな利点です。
Webアプリケーションの他、CordovaやIntel Edisonの開発環境としてもIntel XDKは活用できます。業務系Webシステムを構築したり、開発者がプロトタイプを作成していくのにはぴったりではないでしょうか。
引き続きHTML5開発を目的としたIDEを紹介していきます。これまでに紹介してきたIDEは以下の通りです。
今回はAdobe社が開発するモダンなWebサイトを開発するためのエディタ、Bracketsを紹介します。元々テキストエディタという位置づけですが、補完入力やサーバ機能など、IDEと遜色ない機能を提供しています。
HTML5に対応
BracketsはHTML5に標準対応しています。HTMLタグもsectionやarticleなどHTML5から追加された名称についても入力補完が行えます。
新規ファイル作成またはフォルダを開いて、そこからファイルの作成、編集を行うようになっています。既存のフォルダがそのままプロジェクトルートとして使える形です。
入力補完
HTMLのタグ入力や、スタイルシートの要素は問題なく入力補完できます。JavaScriptでは他のファイルにあるオブジェクトは入力補完できませんが、同じファイル内であれば問題なく可能です。
ライブプレビュー
Bracketsのすごい機能の一つがこのライブプレビューです。HTMLやスタイルシートの編集がその場でリアルタイムに反映されます。ライブリロードとは異なり、再読込することなくデザインの修正が反映されます。Google ChromeのDevToolsで編集しているとの同じような感覚ですが、入力補完や編集のしやすさはテキストエディタならではで、かつファイルの保存も行えますのでDevTools上で編集するよりも便利です。
ブラウザはGoogle Chromeが対応しています。Brackets独自のHTTPサーバが立ち上がり、そのサーバを介してデザインの修正が反映されます。エディタでキャレットが当たっている部分のDOMがハイライトされるのでどこを編集すればいいかが一目で分かります。
定義ジャンプ
同一ファイル内で宣言された変数であればジャンプできます。他のファイルで定義されている変数はジャンプできませんでした。
ブレークポイントはありません
ブレークポイントを入れる機能はありません。ライブプレビューで立ち上がったChromeのDevToolsでデバッグする形になります。ただし、Theseusという強力なデバッガーが使えます。Theseusは関数のコールを追跡して、コール回数をビジュアル化してくれます。
この回数はJavaScriptを実行する度に更新されます。さらにその回数部分をクリックすると、変数の内容まで確認できます。つまりconsole.logのような差し込みが不要になります。コールバックの内容までとれるのが便利です。
多数の拡張機能
Bracketsはオープンソースということもあって、多くの拡張機能が開発されています。JSLint/JSHintやCoffeeScript/LESS/Sassもあります。Minimap生成であったり、Git対応拡張、各種テンプレート生成、Vagrant連携機能など多数の機能拡張がBrackets上で検索して、そのままインストールが可能です。
例えばJSLint拡張機能を入れた場合、JavaScriptファイルを開くと自動的にチェックが走るようになります。
他にもCoffeeScript拡張機能を入れると、保存したタイミングで自動生成してくれます。
QUnitが使えます
拡張機能の中にはQunit、Jasmineも用意されています。こちらもJavaScriptファイルを開くだけで自動テストを行ってくれます。
インラインエディタ
Brackets独自の機能で便利なのがインラインエディタです。HTMLファイルを開いて、タグのところでコマンド + Eを押すと、そのタグ/クラス/IDに対応するスタイルシート設定が開きます（なければ空で表示されます）。そしてそのままスタイルシートの設定が編集できます。
これはかなり便利で、ファイルを2つ開く必要がなかったり、該当部分のスタイルシートだけを表示できるので編集が容易というメリットがあります。
PSDファイルとの連携
Adobeと言えばPhotoshopですが、BracketsではそのPSDファイルをとても簡単に扱えるようにする機能がプレビューで追加されています。任意のPSDファイルを選び、スタイルシートやHTMLの中でPSDファイルの一レイヤーを指定して画像として取り出せるようになっています。わざわざ素材を切り出すことなく、Brackets上だけで作業が完了します。これはデザイナーとプログラマの連携を考える上でも便利でしょう。
Bracketsは基本的な機能は抑えつつ、さらに先進的なWeb開発の試みが多数行われています。拡張機能も豊富で、使いこなせば生産性が大きく向上するのではないでしょうか。日本語ローカライズも行われていますのですぐに使いこなすことができるでしょう。
2ヶ月に一回くらいの割合でバージョンアップしており、開発も盛んです。Bracketsを使いこなし、モダンなWeb開発に積極的に取り組んでください！
業務システムにHTML5を上手に取り入れるためには？
セミナーの後半は、「業務システムにHTML5を上手に取り入れるためには？」と題してhifive開発班からお話させていただきました。カヤックさんの発表ではキャンペーンやBtoC向けの取り組みなど華やかなHTML5の利用例を紹介いただきました。hifive側のデモとしては、例えば棚割（自販機の中身の配置を決めること）業務の例をお見せしました。パッと見の見た目が地味なものが多く（「使い勝手」といった面では、業務的な観点でいろいろやっていますよ！）、すごくコントラストがありました…。
初めにお見せしたのは、タブレット上での利用を想定した「棚割」のアプリです。従来、この手の業務では紙ベースでオーナーさんと話し合ってきましたが、こちらのデモではタブレットベースでドラッグ&ドロップで配置を変更したり、商品の傾向をグラフで確認することもできるようになっています。グラフはCanvasを使って描いており、HTML5を使ったシステムとなっています。
2つ目にお見せしたのはcanvasを使ったお絵かきの例です。
たとえば、タブレットなどで製品の写真を撮影し、その画像の上に手書きで問題箇所のマークをつける、という業務をイメージした機能デモです。
また、別なデモとして大量のデータをグリッドに描画するものもあります。（※注：データグリッドは現在開発中です。）こちらは、10万件のデータを描画しています。業務システムの要件で大量のデータ表示はよくありますが、単純にデータをすべてクライアントにロード・表示してしまうとメモリーを逼迫してしまったり動作が重たくなってしまいます。そこで画面の表示領域外のデータは表示しない（DOM要素を削除）ようにして大量データをスムーズにスクロール・表示できるようにしています。
また、SVGを利用してノードとエッジからなる「グラフ」を描画する例もお見せしました。こちらは、機器の構成（NW機器、サーバー筐体、VM、OS、などなどの組み合わせ）の依存関係をグラフ構造として可視化したものです。
元々Webサーバ上でコードを動かし、HTMLを描画するだけだったWebシステムですが、最近ではJavaScriptによってクライアントサイドで動作するシステムが増えています。それは単純にコードの量が増えるというだけでなく、JavaScriptがすべき役割の増大でもあります。その結果として、業務システムなどの場合、多人数での開発時において効率化する仕組みや各人員の開発部分による影響範囲の最小化が必要になってきます。
ことJavaScriptにおける問題点としては、スコープを意識しない記述が可能であるために関数や変数のコンフリクトや上書きを招いてしまったり、コードの複雑化によって通信処理と画面描画処理など異なる種類のロジックが同じコード内に入り込んでしまって再利用性の低下を招くことが多々あります。
そうした背景があり、hifiveというフレームワーク（プラットフォーム）を開発しています。hifiveはHTML5を活用した企業Webシステム開発のためのプラットフォームになります。ライセンスはApache License 2.0であり、商用システムにも適用できます。コンセプトとしては「使い始めるための敷居を低く」「Webの標準的な仕組みから逸脱しない」「開発サイクルをトータルサポート」といった点が挙げられます。
いわゆる業務システムの一般的な特徴としては以下が挙げられます。
企業のIT戦略と課題
一般的に保守管理、運用にお金がかかるという問題があります。本来戦略に投資すべきであるのに、なかなかそれがうまくいっていない現実があります。
開発は多人数
業務システムはオフショアも含めて多人数で分散して開発を行います。さらに既にある既存システムを含め、外部システムとの連携も多くなっています。そして一般的に業務システムはウォーターフォール型開発が多いと思われがちですが、最近ではスモールスタートでアジャイル型な開発も多くなっています。
運用・保守
業務システムは数年から場合によっては10年以上も使われます。これはOSのライフサイクルを超えて運用されます。開発メンバーも運用を続けていく中で変わっていくのも当たり前です。
こういった前提がある中、HTML5のような新しい技術を取り入れていくメリット（期待）は何でしょうか。大きいのはHTML5の高い表現力を使いたいというニーズがあります。また、ブラウザ間の動作誤差がなくなり、HTML5に対応したブラウザであればどれも同じ結果が得られるのを期待されます。さらにスマートデバイスを使った営業、販売業務の強化という視点も期待されているポイントです。
期待とは逆に懸念という点も挙がってきています。まずスケジュールされた技術ロードマップがなく、将来の見通し、方向性を予測しづらいという問題があります。また、現時点ではまだ大規模システムの実例が少なく、開発ノウハウが多くありません。そしてHTML5を実装しているブラウザ間においても実装具合の誤差があり、未成熟な部分が残っています。
ブラウザの進化は加速しています。例えばMicrosoftは来年（2016年）1月からIEの最新版だけをサポートするという方針を決めました。また、Windows 10からはIEとSpartanの2つのブラウザを搭載予定となっています。スマートフォンにおいてもAndroid 5.0ではWebViewをOSから切り離すようになりました。これによりAndroidの進化より早く、WebView単体でバージョンアップできるようになります。
IEはバージョン6の時代から5年以上も使われており、2007年にようやくIE7がリリースされています。その後Google Chromeが登場した後、FirefoxやOperaなどは開発スピードを速めており、6週間ごとのバージョンアップというポリシーになっています。これはWindows 10のSpartanにおいては継続的なバージョンアップを行えるようにしていく方針となっています。
この流れが一般化していく中で考えなければならないのは、業務システムにおいてこれまで一般的だった動作保証ブラウザを固定するといった考えや、10年以上も運用されるシステムに対してバージョンアップしていくブラウザをどう対応させていくかという考えです。
これを可能にする方法としては、テストの自動化があげられます。ブラウザがバージョンアップした時に動作に不具合がでないかテストしたり、もし不具合が出た時にも気づける仕組みを用意しなければなりません。QUnitやJasmine、Selenium、Appiumといったテストをサポートする仕組みも揃ってきています。
もう一つ、業務システムにおいて大事なキーワードがセキュリティです。HTML5で追加された機能を使った攻撃が既に知られています。例えばvideoタグのonerrorハンドラを使った攻撃です。また、通信は常時SSL化の流れになっています。そしてオリジンを理解する必要があります。元々Webブラウザは同じサイト内のファイルに対して自由に読み書きできるという概念があります。しかし最近では別なサーバとの通信も当たり前になっています。そうした中、外部サーバにアクセスするとデータが取り出せなかったり、同サイト内の動作と異なってくる場合があります。そのためオリジンを正しく理解し、開発する必要が出てきています。
最後に以下のような質問が挙がっていました。
Q. 業務システムは一般的に社内LANの中に構築されるのでセキュリティにおいて常時SSL化というのが違和感がある？
A. 最近ではスマートデバイスを使って外出先から業務システムへアクセスする要件も増えています。また、プロキシサーバを使ってアクセス制限を行うなど複数の技術を組み合わせてセキュリティを担保する動きは既にあります。
Q. 今後クライアントでの処理が増えていく中でエラーのハンドリングが難しくなっていかないだろうか？
A. 開発者ツールが高品質になってきたこともあり、エラーの監視がしやすくなっています。そのためエラーをきちんと監視し、サーバに飛ばすなどの仕組みが作りやすくなっています。
資料は下記にて公開しています。エンタープライズにおけるHTML5開発の注意点などをぜひチェックしてください。
引き続きHTML5開発を目的としたIDEを紹介していきます。これまでに紹介してきたIDEは以下の通りです。
今回はEclipseをベースにWeb開発に特化したIDE、Aptana Studioを紹介します。なお、Aptana社は2011年、Appceleratorに買収されており今後も継続的にリリースが行われるかが不透明ではあります（最新版であるAptana Studio 3.5.0は2013年12月リリース）。
なお、EclipseのJavaEEパッケージなどにはJSDTというJavaScriptの開発支援機能が含まれていますが、機能やIDEとしての統合度合いで見ると、他のIDEと比べて劣る（カバー範囲が狭い）という印象です。
HTML5に標準対応
Aptanaで新規プロジェクトを立ち上げると、HTML5 Boilerplateをベースにプロジェクトを立ち上げられます。ネットワーク必須で最新版を使う版と、オフラインのキャッシュ版（2011年08月版らしいです…）が選択できます。
プロジェクト構造はHTML5 Boilerplateに依存しているので最近のよくある形でのWeb開発ができるようになっていますが、gulpfile.jsも配置はされていても特に連携できる訳ではないようです。
入力補完
入力補完に対応したライブラリは一部になります。任意のライブラリでは入力補完は行えません。Bundle Development > Install Bundleからライブラリを選択できますが、Web開発においてはjQuery/Zen Codingくらいしか使えないかと思います。そのjQueryもかなり古いコードベースなので使い勝手は良くないかも知れません。
HTMLなどはタグ、要素の補完ができます。src要素の場合、ファイル名をプロジェクトツリーから読み取ってくれます。
ブレークポイントはFirefoxが対応
JavaScriptのブレークポイントを使ったデバッグはFirefoxが対応しています。Firebugと専用のデバッガーを機能拡張としてインストールすることで仕込んだブレークポイントでストップ、変数のウォッチができるようになります。初回実行時に確認されるのでインストールは簡単です。
HTML5への準拠という意味ではFirefoxは十分にレベルが高く、独自の実装も少ないのでFirefoxで動けば他のブラウザでも適切に動作してくれるのではないでしょうか。
コードチェックはJSLintが使えます
JSLintはEclipseプラグインとして用意されています。インストールするとエディタの下部で問題タブの中にJSLintの結果が表示されるようになります。また、セミコロンがないなどの一般的なJavaScriptコードの問題は標準で対応しています。
CoffeeScriptやLESS/Sassはプラグインまたはビルダーで対応
JavaScript/CSS代替記法を使う場合、プラグインがあればそれを、なければビルダーを作って対応する形になるようです。各コマンドをインストールするのが若干手間ですが、プラグインよりカスタマイズが容易かも知れません。
定義ジャンプは別ファイルでも可
定義元にジャンプする機能は外部ファイルでも飛べるようになっています。これは意外ですが便利です。
コード、HTMLのアウトライン表示
コードは折りたたみや関数名の一覧などのアウトライン表示に対応しています。コメントはあらかじめ折りたたんでおく設定もあるのでJSDocなどで長いコメントがあってもコードを確認しやすいのではないでしょうか。
JSDocの生成
標準では用意されていないようですが、08.ドキュメント記述・生成(JSDoc) – hifiveを参考に追加することはできそうです。
テストはプラグインで
テストはQUnitやJasmineが使えると思いますが、どちらもプラグインで対応する形になります。JasclipseというEclipse向けのJasmineプラグインがあります。JasclipseをインストールするためにはまずJDTプラグインのインストールが必要で、その後Jasclipseをインストールします。
少し触ってみた感想としては、Eclipse（JSDT）だけではHTML5開発向けの機能は他と比べ見劣りするという印象です。プラグインなどで補助するとしても、情報も少なく手探りで集める必要があります。Aptana Studioは一つの完成形ですが、買収後に開発が停滞してしまっている（現在の最新版Eclipseは4.4ですが、Aptana Studioは4.3ベースです）のが残念です。
Webの進化はとても速く、ここ数年はJavaScript/スタイルシートフレームワークも多数出ていたり技術的な進化もどんどん行われています。静的サイトジェネレータの種類も増え、技術の選択肢が幅広くなっています。
そういった中で最新技術に追従していないのは問題かも知れません。Javaでのサーバサイドの開発を考慮するとEclipseを採用したくなりますが、フロントエンド開発は別なIDEを使った方が効率的かも知れません。
2月18日（水）、横浜みなとみらいにてhifive主催のセミナーが行われました。今回はカヤックの中農さんをお招きしてHTML5がどのように実際の開発現場で使われているかを話していただきました。
こちらはそのお話の中から気になるトピックを紹介します。
中農さんの最近のお仕事
プライベートではハードウェアを扱うのにハマっているとのことで、お仕事の中でもOculus RiftやLeapMotionを使ったサービスを作られているとのことです。
例えばOculus Rift × Leapmotionによるライブステージ演出を行うシステムであったり、
声で重機を操作する音声認識サイネージを開発されています。ガジラという重機用アームを知らしめるために作られた体験コンテンツになります。
どちらもWebが関係ないように見えるのですが、実際にはHTML5/Flash/Unity/Node.jsで作られています。Flashにおいてもまだまだ現役で、HTML5に比べてメディアファイルの取り扱いが上手とのことです。Unityにおいては次期バージョンからWebGL書き出しがサポートされるということもあり、今後Web開発を行う方でUnityを利用する人は増えるのではないでしょうか。
中農さん曰く、HTML5/JavaScript/CSSを使うフロントエンドエンジニアは体験を作るのがお仕事であり、HTML5はその表現における最上位レイヤーであるとのことです。カヤックさんにおいてはB2C/B2B、自社サービスのいずれににおいてもHTML5を採用されています。
今回のお話では広義のHTML5（API含め）を取り上げていますが、数多くのAPIがある中、実際に使えるAPIはまだまだ多くないのが実情です。下の白文字のAPIが実際に使われているAPIです。
カヤックさんではHTML5専門部署（HTMLファイ部）があります。専門部署設立前はマークアップ（意匠部）とJavaScript（技術部）に分かれていましたが、昨今の技術はどんどんデザインとプログラミングの敷居がなくなってきており、効率が悪くなってきました。そこで部署を統合し、HTMLファイ部になったとのことです。
カヤックさんの取り扱うプロジェクトはどれも先進的でエッジの効いたものが数多いです。デモはいずれも興味深く、面白いものばかりです。
日経新聞さんの事例
あなた vs 田中電子版というテーマのサービスです。フルFlashライクですが、実際にはHTML/CSSで作られています。
三井住友VISAカードさんの事例
HTML5のCanvasだけで作られています。一昔前であればFlashで行っていたような描画をフルCanvasで行っています。
三井住友VISAカードより、EVA style VISA CARD登場。
リクナビさんの事例
GoProのカメラを6台合わせて全天球カメラとしています。それを一つの動画や写真にすることでマウスドラッグ可能なコンテンツを実現しています。
カヤックさんの事例
自社サイトもチャレンジングな試みが行われています。一番下までスクロールすると、次のページを読み込むようになっています。すべてのページをWeb API化することでスクロールだけでサイトのコンテンツをすべて見られるようになっています。
株式会社キューさんの事例
ペンが持てるようになっていて、図形を描くとその中に動画コンテンツが表示されるようになっています。さらに星形が認識されると背景が星空に変化するというアニメーションが入ります。
Mutations Studioさんの事例
ゲーム会社ということもあり、通常は面白くないフォーム入力をゲーミフィケーション的に面白くした作品です。ぜひ動画をご覧ください。
これまでの事例などで分かる通り、HTML5では表現力が高まっています。カヤックさんにおいてキャンペーン系の仕事は多いので、表現力を高めてインパクトある作品作りが求められているとのこと。かつてはFlashが担っていた分野ですが、今はHTML5/JavaScript/CSS3に移り変わってきているものになります。とはいえ今の現場ではFlashと同等の表現力が求められることが多いとのことです。
表現力において大事なのはCanvas、WebGLになります。Canvasとはビットマップデータを扱う技術で、メリットとしてはインストールがいらない、そしてHTMLとの親和性が高いという点が挙げられます。逆にデメリットとしては実行環境（スマートフォン含め）によって実装が違ったり、クリックイベントがないというのが問題になります。
そこでカヤックさんではCreateJSを採用して開発しています。
CreateJSは優秀なライブラリですが、スマートフォン環境などではパフォーマンスが足りないと感じることも多く、WebGLへの期待が大きくなっています。WebGLは3D表現で有名ですが、2Dも行うことができます。カヤックさんでは早い段階からWebGLに注目し、デモサイトを立ち上げています。
WebGLのサイト（iPhone対応の3Dコンテンツ）つくりませんか？ 面白法人カヤック
多くのWebGLデモを公開したり、メールマガジンなどを通じてWebGLを啓蒙していった中で実現できたプロジェクトがNHK 御嶽山「噴火の証言」という事例です。
このサイトについてこのサイトは、御嶽山災害の生還者が記録した「証言」をアーカイブしたものです。 証言は、右に表示されるタイムラインやマップから見る事ができます。
こちらの御嶽山の描画にWebGLを使っています。国土地理院の山脈標高データを使い、WebGL上に3Dの御嶽山を描画しています。その上にインタビューのデータをマッピングし、時間軸に沿って閲覧できるようになっています。
WebGLは今後のWebにおける表現力を格段に高める可能性があります。ただし問題としてはちょっとした（三角形など）を描画しようと思ってもコード量が多くなります。使おうと思ってすぐに使える代物ではありません。そこでThree.jsのようなライブラリを使って行うのが基本になるとのことです。
Unity5でもWebGL書き出しがサポートされる予定で、これによりプラグイン不要でUnityコンテンツが楽しめるようになります。Mozillaと提携して開発が進められているとのことで、Firefox上でのパフォーマンスは高くなっています。現状のベータ版を試すこともできますが、既存のUnityプロジェクトがすべて対応できるという訳ではないようです。しかし今後に大いに期待がかかるところでしょう。
最後に質疑応答では次のような質問が出ていました。
Q. 大手との仕事の獲得はどうやっているのですか？
A. カヤックには営業はありませんので宣伝はやっていません。なので人づてで仕事を獲得しています。後は実績含め、作品を見てご連絡いただくケースが多くなっています。
Q. 音声認識に使ったライブラリは何でしょうか？
A. Juliusです。Juliusはローカルでしか動かないのでUnityでマイクからの入力を拾ってローカルのサーバに対してWebSocketでデータを送信しています。
Q. メールマガジンは社内だけなのでしょうか？
クライアントさん向けに実案件を紹介していくメールマガジン、その他の方も購読してもらえるメールマガジンを用意しています。
Q. HTML5とFlashを併用した機会があったという話だったが理由はなんでしょうか？
音声の自動ロードができないなど、HTML5では難しい部分をFlashでサポートしています。HTML5だとオーディオスプライトを使った解決法がよく使われます。
カヤック中農さんの資料は下記にて公開されています。カヤックさんのHTML5利用は特に先進的な試みが多数行われていますのでぜひチェックしてください。
一人でシステム開発している場合は概ね全体像が把握できているでしょう。しかし人数が増えてきてモジュールに分割して開発などを行っていると、それぞれどういった処理目的で作られているのか分からなくなってきてしまいます。そこでJavaの開発で多く利用されてきたJavaDocのJavaScript版、JSDocを使ってみましょう。
JSDocはhifiveの中でも実際に使われています。記述した内容はHTMLファイルへの出力も可能です。JSDoc: Namespace: h5のようにWebブラウザでシステム全体が分かるようになっています。
その他、以下のようなメリットもあります。
IDEの中でコーディング補助に使える
EclipseなどのIDEではJSDocの内容を読み取って補完処理を行う際に内容を表示してくれるようになります。これによりコーディングミスが防止できるようになります。
よく使うタグについて
実際、JSDocを記述する上で使われるタグは多くありません。以下の8種類だけ覚えてしまえばすぐに書けるようになります。
| タグ | 形式 | |
|---|---|---|
| @memberOf | 名前空間名 or クラス名 | どのプロパティに所属しているか定義する。 |
| @name | プロパティ名 | プロパティ名を定義する。未指定の場合はコードで定義された名前がプロパティ名となる。また、@memberOfが指定されているとそのメンバに紐付く。 |
| @namespace | 名前空間を定義する。未指定の場合はメンバとして処理される。 | |
| @param | {型名} 引数名 | 引数の名前と型が定義する。 |
| @type | 型名 | 変数の型を定義する。 |
| @returns | {型名} コメント | 戻り値の詳細を定義する。 |
| @class | クラスとして定義する。 | |
| @instance | インスタンスメンバとして定義する。記述しない場合はstaticメンバになる(@staticで明示的に指定することも可)。 |
JSDocの書き方
サンプルは次のようになります。
/**
* サンプルコントローラ
*
* @class
* @name SampleController
* @memberOf sample.controller
*/
var sampleController = {
/**
* コントローラ名(必須)
*
* @instance
* @memberOf sample.controller.SampleController
* @type String
*/
__name: 'sample.controller.SampleController'
};
HTML出力
HTML出力を行う場合には jsdoc3/jsdoc を使って出力が可能です。
$ jsdoc yourJavaScriptFile.js
いかがでしょうか。開発ドキュメントはソースコードと共にある方がメンテナンスしやすく、参照も容易になります。また、補完入力に使えるなど開発効率の向上にもつながるでしょう。
また、例えばGoogleのClosure CompilerはJSDocに記述された型情報などに基づいて非常に高度なコード圧縮処理を行う機能を持っています（注：いくつかはClosure Compiler独自のタグを記述する必要があります）。先に述べたIDEとの連携を含め、様々なツールがJSDocの形式に対応しています。
今後ますます大型化するWebアプリケーション開発において、JavaScriptでもドキュメント整備が品質向上の鍵になるはずです。ぜひJSDocをお試しください。
また、さらに詳しくは08.ドキュメント記述・生成(JSDoc) – hifiveをご覧ください。
なお、実際の記述例は例えばGitHubのリポジトリ（hifiveのソースコードの一部）などでご覧いただけます。
引き続きHTML5開発を目的としたIDEを紹介していきます。これまでに紹介してきたIDEは以下の通りです。
今回は元々サン・マイクロシステムズ社が開発し、現在はOracle社が中心になって開発を行っているオープンソースのIDE、NetBeansです。Javaがメインだと思いますが、PHPやC/C++、Groovyなどにも対応しています。そしてHTML5もターゲットの一つに入っています。
NetBeansの特徴
NetBeansはほぼ100%Javaで書かれたIDEになります。そのためWindows/Mac OSX/Linuxとマルチプラットフォームで動作します。速度面においては殆ど不都合を感じることはないのですが、UIにおいてはネイティブに完全にマッチしている訳ではないようです。
オープンソース・ソフトウェアとあって先進的な機能への取り組みが行われていたり、コミュニティが開発したプラグインによる機能拡張など自分たちで自由に機能を組み合わせられるようになっています。
今回はMac OSX版で試用しました。
起動画面
インストール後、最初に起動した画面がこちらです。
見て分かる通り、チュートリアルの中にHTML5アプリケーションが含まれています。クリックするとPHPおよびHTML5の学習 – NetBeans IDEチュートリアル、ガイド、および記事に飛びます。こちらのページは日本語ですが、リンク先からはすべて英語のチュートリアルになっています。
デモプロジェクトにもHTML5アプリケーションが登録されています。AngularJS、Backbone.js、EMber.js、Knockout.jsを使ったデモに加えてCordovaのサンプルアプリも用意されています。
IDEエディタ画面
既存のhifiveプロジェクトを取り込んで表示した画面がこちらです。
左上がファイルやフォルダの一覧、左下はナビゲータ、右側はエディタになっています。
ナビゲータは例えばJavaScriptの場合は次のようにメソッドが一覧表示されます。ここからジャンプも可能です。
CSSの場合はID、クラスが一覧になります。
HTMLはタグの入力補完機能があります。さらに要素の説明をヘルプ表示してくれます。
HTML/JavaScript/CSSなどはコードテンプレートが用意されていますので、一部だけ入力して展開してくれる機能があります。
テーマやキーバインドの変更はもちろんサポートされています。
代替言語の利用
スタイルシートについてはデフォルトでプリプロセッサに対応しています。実行ファイルのインストールは必要ですが、Sass/LESSが利用できます。
CoffeeScriptについてはデフォルトでは対応していませんが、コミュニティベースのプラグインをインストールすることで利用できるようになります。
プラグインをインストールするとcoffeeコマンドのインストールは不要でコンテクストメニューからコンパイルしたり、自動コンパイルの設定ができるようになります。
バージョン管理
バージョン管理に対応していますので、NetBeans上から差分の確認ができます。
デバッグ
開発している途中のデバッグですが、Google Chromeが使えます。別途機能拡張をインストールすることでNetBeans上でブレークポイントを使って処理を停止させることが可能です。初回実行時にアラートが出ますので簡単にインストールできます。
インストールするとこのようにGoogle Chrome上で通知が表示されます。
なお、このデバッグ時にはライブリロードに対応していますので修正すればすぐに再読込されて開発が続けられます。
NetBeansではJavaScriptのUnit Test環境としてKarma、JS Test Driverに対応しています。こちらを使った場合、テスト結果がNetBeans上で確認できたり、ファイルの更新を検知して自動テストを行ってくれる仕組みが便利です。
ブレークポイントで停止させていると変数の内容も確認が容易です。
入力補完
入力補完は他のJavaScriptファイルからのメソッドも補完してくれますので優秀です。ただし定義ジャンプは同じファイル内に限定されるようです。
エラー表示
JavaScriptのエラーは入力中からエラー表示してくれます。エラーも分かりやすいので開発効率が上がりそうです。
NetBeansはマルチプラットフォームで動作しますのでOSが混在するプロジェクトでも共通して使えるメリットがあります。またオープンソースであることから無償で利用できるのも大きいでしょう。日本語ローカライズもデフォルトでされているのも利用していく上で大きなメリットと言えます。
JavaベースとあってUIが完全にネイティブではない点が気になるくらいで、機能面は文句の付け所がないくらい優秀なIDEとなっています。HTML5アプリケーション開発が効率的になりそうです。
Visual Studio、WebStormに引き続き、今回もHTML5/CSS3/JavaScriptによるWebシステム開発をサポートしたIDEを紹介します。今回は開発に特化したという訳ではありませんが、Webシステム開発を十分にこなせる存在になってきたGoogle Chrome Workspacesを紹介します。単体ではまだ物足りない機能がありますが、機能拡張を組み合わせることでIDEとして十分な性能になってきています。
セットアップ
Google Chrome Workspacesでは、DevToolsを使ってローカルフォルダを登録するところから開始します。まずはDevToolsを開いて、SourcesタブにてAdd Folder to Workspaceを選択します。
そしてローカルのフォルダを登録すると、フルアクセスを求める通知が出ますので許可します。
許可するとこのようにSourcesにフォルダが登録されます。
Webサーバを立てる
まずWeb開発をはじめるに当たって必要なのがWebサーバです。そこで使えるのがGoogle ChromeアプリとしてリリースされているWeb Server for Chromeです。このChromeアプリをインストールするとローカルのフォルダを指定してWebサーバを立てることができます。または後述するGruntタスクを実行するChrome機能拡張を使っても良さそうです。
インストールが終わってWebサーバを立てると、このように8887番ポートでサーバが立ち上がります。
Webサーバ上のファイルとローカルファイルをマッピングする
このままですとローカルのファイルを編集して、それをWebサーバを経由して確認するだけですが、さらにWebサーバ上のファイルをローカルのファイルとマッピングさせることで、オートリロードのような機能も使えるようになります。
そのためにはWeb上のファイルをSourcesタブで右クリックして、Map to File System Resourcesを選択します。
そしてファイルをマッピングさせることで、ローカルのファイルを編集するとWebサーバ経由の表示をリロードしてくれるようになります。相対パスのJavaScriptファイルも編集すると自動リロードが行われます。
ただしこの編集はWorkspace上で行われないといけないので、CoffeeScriptからJavaScript生成といったようなGoogle Chrome外での編集の場合はうまく動かないようです。
高度なデバッグ機能
Google ChromeのDevToolsは言うに及ばず高機能です。ブレークポイント、ウォッチなど機能も多彩です。Workspace経由でのファイル編集に慣れてしまえば後はブレークポイントを仕込んでどんどん開発が進められます。
Gruntを使いこなす
Gruntを使ってライブラリやファイル生成を行っている場合、Grunt Devtoolsを使うことでGoogle ChromeからGruntのタスクを実行できるようになります。
ただし予めnpmで grunt-devtools をインストールし、gruntfile のふぁいるディレクトリで grunt-devtools を実行しておく必要があります。タスクは一回実行の他、watchのようなバックグラウンド実行にも対応しています。
gruntfileが編集できる訳ではないので（編集してもgrunt-devtoolsを再実行しないといけないので）、コンソールは手放せませんが、普段の開発時にはとても便利なツールです。
JSHintを使う
JSHintについては JSHint for Chrome Dev Tools という機能拡張があります。別途フラグの設定が必要なのでChromeストアでは配布されていません。
表示したタイミングでJavaScriptのチェックを行ってくれるようになります。ただし出力される行数がDevToolsの該当行にジャンプできないのが難点かも知れません。
スマートフォン向けの開発も簡単
DevToolsではスマートフォンの画面サイズにシミュレーションしたり、タッチ操作を起こせるようになっています。傾きや位置情報をダミーで与えることもできます。スマートフォンやタブレット向けの開発も簡単にできるのは大きな利点です。
テーマ変更
DevToolsにはカラーテーマも多数公開されています。白黒だけでなく、可読性を高めるためのテーマがありますのでChromeストアで探してみると良いでしょう。
ネットワーク、DOM構築の監視
通常のIDEでは難しい各リソースの読み込みタイミングやJavaScriptやDOM処理にかかった時間も簡単に計測ができます。よりパフォーマンスの高いWebアプリケーション開発には欠かせない機能と言えます。
検索
Ctrl + Shift + Fまたはコマンド + Alt + Fを押すとワークスペース以下でのファイル検索ができます。正規表現も利用可能で、検索結果をクリックすると該当行にジャンプできます。
その他
定義ジャンプのような機能はありませんでした。大型化するとどこで定義されているのか分からないのは不利かも知れません。また、サーバサイドの仕組みがある訳ではないので、サーバサイドの仕組みを想定した作りには向いていません。CORSやJSONPを使うことになるかと思います。
HTML5のWebアプリケーションを開発する上でGoogle Chromeをデバッグ環境に利用している方は多いと思います。Workspacesを使うことでそれをさらに一歩進めて開発自体行えるようになります。
Google Chrome Workspaces単体では他のIDEと比べて見劣りするかと思いますが、さらにそこに機能拡張を合わせることで十分な機能を備えるようになります。Google Chrome Workspacesを使うことで強力なデバッグ環境と開発環境を統一してみるのは面白そうです。
Workspaces – Persistent authoring in the DevTools – Google Chrome
hifive開発者ブログ 