GrapeCity Echo Tokyo 2015 参加レポート
クロスワープの大鷲です。
遅ればせながら、7/31 にマイクロソフト品川本社のセミナールームで開催された GrapeCity Echo Tokyo 2015 に参加してきましたので、そのレポートをお届けします。
セッション一覧は以下の通りです。
| 内容 | スピーカー |
|---|---|
| Microsoft Edge について | 日本マイクロソフト 物江修さん |
| AngularJS について | GrapeCity USA バーナード・カスティーリョさん |
| Wijmo5 について | GrapeCity USA クリス・バノンさん |
| Wijmo5 採用事例について | 株式会社インテリジェンス 清田 馨一郎さん |
Microsoft Edge
セッション資料はこちらで公開されています。
www.slideshare.net7/29 に公開された Windows 10、もうインストールされましたでしょうか？ 私はまだしてません。
周知の通り、Windows 10 からは新しいブラウザーである Edge（以前はコードネーム Spartan と呼ばれていました）が搭載され、デフォルト ブラウザーになっています。
Internet Explorer は…
これまで通り IE11 もインストールされますが、こちらは Windows 7 / 8.1 に搭載されていたものから進化していません。
今後は、セキュリティの問題が発見された場合はアップデートされますが、メジャーバージョンアップや新機能の追加はありません。
IE11 は基本的に企業内等で、これまでに IE 向けに開発されてきたアプリケーションを動作させるためにあるもので、過去との互換性のためだけに存在しています。
なお、来年１月から、IE は「その OS で動く最新版のみ」がサポートされることになります。
具体的には、Windows Vista なら IE9、7 以降なら IE11 が最新版となります。
Windows Vista は既にメインストリーム サポート期間が終了していますので、IE 向けのアプリケーションは IE11 向けにアップグレードすべきであると言えます。
IE はこれ以上、互換性を壊すような更新は行われませんので、IE11 対応を済ませてしまえば、それ以上、IE の都合による更新は必要ありません。
Edge の互換性
Edge では IE との互換性を捨て、代わりに、Chrome をはじめとする他のモダン ブラウザーとの相互運用性を重視しています。
レンダリング エンジンは IE と同じ Trident から派生したものですが、IE の独自機能はすべて削除されています。
UserAgent は
Mozilla/5.0 (Windows NT 6.4; WOW64) AppleWebkit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 Edge/12.0
のようなものになります。
WebKit 用、Chrome 用、Safari 用といったコンテンツでもどんと来いという意気込みを感じます。
従来の IE の UserAgent に含まれていた Trident とか MSIE といった文字列はありませんので、UserAgent で IE 判別をしていたアプリケーションは正常に動作しません。
基本的には UserAgent でブラウザー判別を行うというのは推奨されない方法となりつつありますが、どうしても Edge かどうかを検出したい場合は Edge という文字列で判定できます。
ところで、以前、WebKit と動作が違う場合はバグとして修正するという発表がありました。it.srad.jp
この件について、発表当時から
WebKit がバグっていたら、WebKit との互換性と仕様への準拠のどちらを取るのだろう
と疑問に思っていたので、質問してみました。
答えは、あくまで仕様に準拠するのは前提とのことだったので、一安心しました。
Windows10 から、UWP（Universal Windows Platform）という統一アプリ基盤が搭載され、UWP アプリは PC 用から IoT 用まで、すべてのエディションで同一アプリが動くようになりました*1。
Edge は UWP アプリとして実装されているため、すべての Windows10 エディションで動作します。
逆に言うと、このような Windows10 の新機能に強く依存しているため、Windows 8.1 以前の UWP がない OS 向けには Edge は提供されません。
機能比較
IE にあって Edge でサポートされない機能には、以下のようなものが挙げられます。
- ActiveX
- VBScript
- Browser Helper Object
- Vector Markup Language (VML)
- DirectX Filters and Transitions
- ドキュメントモード
- 条件付きコメント
プラグインがサポートされないので、Silverlight も動きません。
Flash はプラグインとしてではなくブラウザー本体でサポートされているので動きます。PDF も表示できます。
Microsoft は Flash や PDF のサポート以外にも、CSS の実装などでも Adobe と協力して作業しているとのことでした。
IE にはない新機能としては、以下のようなものがあります。
- Web ノート
- Web ページに書き込みを行ったものを保存して共有したり、オフラインで閲覧したりできる。
- 読み取りビュー
- 広告やサイドバーを排除し、コンテンツに集中した読みやすいビューで表示できる。
- Cortana
- 音声認識機能。MS 版 Siri*2。
こういった独自機能はどれも、Web のコンテンツの表示に対してではなく、その外側の便利機能として実装されています。
そのため、こうした機能が他のブラウザーとの互換性を壊すことはありません。
Edge では Chrome や Firefox の拡張機能がそのまま使えるようになる予定ですが、現時点ではまだ実装されていません。
Edge は Chrome 等と同様に、今後も頻繁にバージョンアップされ、機能が追加されていきます。
現時点でサポートされている機能や実装予定の機能は以下のサイトで見ることができます。dev.modern.ie
Under Consideration（実装するかどうか考え中）というステータスの項目には Vote（投票）ボタンが付いています。
ユーザーからの要望が多い機能は優先して実装されるそうなので、気になる項目は積極的にプッシュしていきましょう。
開発者としては見逃せない機能として ES6（EcmaScript 6、JavaScript の最新バージョン）への対応が挙げられます。
これも現時点ですべてサポートされているわけではなく、段階的に実装中です。
新機能を利用するには、アドレスバーに
about:flags
と入力して設定画面を開き、設定を有効にする必要があります。
その他、開発者向けのガイドが公開されていますので、一読してみてください。
F12 開発者ツール
F12 開発者ツールも、IE 用と Edge 用では（見た目はよく似ていますが）異なるものが搭載されています。
Edge 版ではローカルストレージの表示などの新機能があります。
IE 版では、従来（Win 8.1 以前）は、ドキュメント モードの「最新版」のことを「Edge」と呼んでいたのですが、さすがにこれはなくなっています。
紛らわしいのと、IE11 が最後のバージョンなので、「最新版」という意味の言葉は必要なくなったためですね。
AngularJS
スピーカーは GrapeCity USA で CTO をしているバーナード・カスティーリョさん。
FlexGrid の開発者で、Mr. Flex と呼ばれているそうです。
もちろん英語なので、同時通訳付きセッションでした。
AngularJS は Google が開発している、JavaScript によるフロントエンド MVVM（Model-View-ViewModel）フレームワークです*3。
MVVM というのは MVC の派生形態の一つで、もともとは Microsoft の WPF で使われ始めましたが、最近では JavaScript でもよく採用されています。
ViewModel とは、View に表示する内容を保持し制御する役割を持ちます。
特徴はデータ バインディングによってビューを表示することで、ViewModel を更新すると、自動的にビューが更新されます。
この仕組みによって、従来 jQuery で行っていたような、表示更新のために DOM を操作するコードはなくなり、開発者はアプリケーション ロジックの開発に集中できます。
AngularJS では、再利用可能なサービスとコンポーネントを組み立てることでアプリケーションを構築していきます。
次期バージョンである Angular 2.0 はさらにコンポーネント指向を推し進めています。
拡張モジュールも多数提供されており、AngularJS だけでフロントエンド アプリケーションを構築することができる、フルスタックなフレームワークです。
また、多くのベスト プラクティスに基づいて構築されており、Google と、その他多くの人たちによってサポートされているそうです。
AngularJS によるアプリケーションの作り方
v1.0 のリリースから活発に開発が続いており、現在は v1.4.3 に達しています。
年内には v2.0 のリリースが期待されていますが、v2.0 は一から作り直されており、アプリケーションの作り方の作法が大きく変わります。
そのため、今から v1.x をやるのはちょっと…と敬遠してしまう人もいると思います。
が、昨今のバージョンアップでは、v1.x でもかなり v2.0 を意識した書き方ができるようになっており、移行の手間をできるだけ減らせるようになっています。
そのため、今から v1.x を始めることは決して無駄にはなりません。
v2.0 の最大の特徴は、先ほども言ったコンポーネント指向であり、これはディレクティブという機構によって実現されます。
というわけで、現在の主流である AngularJS の作法は「ディレクティブ中心主義」とでも言えます。
これは、ちょっと書き方は違いますが、v1.4.3 でもかなりの部分が実現できます。
ディレクティブ
AngularJS においてディレクティブとは、HTML 上に書かれた、カスタムの要素および属性です。
AngularJS のスクリプトがロードされると、HTML 上のディレクティブが読み込まれます。
ディレクティブにはコントローラーが関連付けられています（コントローラーという名前ですが、これが ViewModel にあたります）。
そして、コントローラーのプロパティが View にバインドされます。
簡単なサンプルを作ってみました（セッション中で行われたデモとは別のものです）。jsfiddle.net
サンプルではディレクティブを 1 つしか作っていませんが、実際にはたくさん作ります。
ディレクティブというのは UI テンプレートと ViewModel の組み合わせなので、これで UI のパーツを作り、それを組み立ててアプリケーションを作るわけです。
また、テンプレートは外部 HTML ファイルを読み込むこともできますので、JavaScript を書くエンジニアと、HTML を書くデザイナーの分業が可能です。
Angular に対する異議
よく寄せられる異議として以下のようなものがあるそうです。
遅い
MVVM を正しく実装してないと遅くなりますが、正しく作ればすばらしいパフォーマンスを発揮します
Minification と Dependency Injection の相性が悪い
Minification とは、JavaScript や CSS を最適化してサイズを小さくすることです。
空白や改行を取り除いたり、変数名を短いものに置き換えたりします。
一方、AngularJS では、動作に必要なサービスを Dependency Injection で注入するのですが、この時、サービス名と引数名が一致している必要があります。
そのため、Minification で引数名が短縮されてしまうと、正しく注入することができず、動かなくなってしまいます。
これには対策として、注入すべきサービスを引数名だけでなく文字列でも与える方法があり、大きな問題ではありません。
デバッグが難しい
MVVM では ViewModel をテストすればよく、View をテストする必要がありません。
これは、従来の jQuery 等を使った動的 View より、ずっとデバッグが簡単です。
ディレクティブが難しい
ディレクティブはシンプルなものから複雑なものまでさまざまあります。
シンプルなものは易しく、複雑なものは難解です。これは当たり前のことでしょう。
まずは簡単なものから理解していきましょう。
ドキュメントが良くない
確かに、Google によるオフィシャルなドキュメントはあまり良くありません。
幸い、有志のコミュニティによって多数の文書が書かれていますので、それらを参考にすると良いでしょう。
Angular 2.0
現在開発中の次期バージョンがあります（リリース時期は明言されていません）。
TypeScript によって全面的に書き直されており、ES6（EcmaScript 6）の機能も活用しています。
また、現在よりもさらにシンプルで、一貫性があり、動作が速く、よりクリーンです（jQuery に依存しなくなりました）。
中心概念であるディレクティブはより簡単に作れるようになります。
Angular 2.0 に備えるために、今から以下のような取り組みをすべきとのことでした。
- Angular 1.x と TypeScript を使う
- ES6 について学ぶ
- Angular 2.0 について学ぶ
Wijmo 5
3 番目のセッションは、GrapeCity が提供を開始した JavaScript コントロールである Wijmo 5 についてです。
特徴
Wijmo 5 の特徴はこんな感じだそうです。
- タッチファースト
- ファイルサイズが小さい
- Wijmo 5 は 400kB 程度。jQuery UI は 2MB、某競合他社ライブラリはなんと 6MB。
- モジュール化されている。また、拡張性のある設計になっている。
- タイプセーフ
- TypeScript を採用
- これまでの経験を活用できる
- GrapeCity は .NET/XAML 用のコントロールも出しているので、共通の使い勝手を実現している
- Web ページではなく Web アプリケーションのためのライブラリ
- jQuery 非依存
- AngularJS を強力にサポート
- ただし依存はしていない
デモ
Wijmo 5 を使った簡単なアプリケーションのデモがありました。
Step 1 データの件数を表示
OData でサーバーからデータを取得し、その件数を表示します。jsfiddle.net
Step 2 コントロール
ComboBox、FlexGrid（グリッド）、FlexChart（グラフ）でデータを表示するサンプルです。jsfiddle.net
Step 3 カスタマイズ
グリッドのカラム幅の指定はスターサイジングで行えます。
スターサイジングとは WPF で採用されている方法で、例えば、3 つのカラム幅をそれぞれ 2*、2*、* と指定すると、グリッド全体の幅を 5 分割した上で、2:2:1 の割合で表示するという意味になります。
グラフの縦軸は通貨形式で表示する、横軸はラベルを非表示にするといった指定も、スクリプトではなく HTML 側で指定できるので、デザイナーにもわかりやすくなっています。
また、グリッドとグラフが連動しています（グラフを選択するとグリッドの選択行が変わる、グリッドを並べ替えるとグラフの並び順も変わるなど）。jsfiddle.net
Step 4 レイアウト
Bootstrap を使ってレスポンシブ レイアウトにしています。
HTML 表示エリアの幅を広げると、グリッドとグラフが横並びになります。jsfiddle.net
Step 5 スタイリング
CSS で見た目を整えています。
カスタムタグにも通常と同じようにスタイルを当てることができます。jsfiddle.net
今後の予定
- さらなるコントロール、サンプル、ホワイトペーパーの充実
- Angular Material のサポート
- Angular 2.0 のサポート
などが予定されています。
ロードマップは User-Driven なので、要望を寄せてほしいとのことでした。
Wijmo 5 採用事例
最後のセッションは、インテリジェンスによる Wijmo 5 の採用事例についてでした。
これについてはグレープシティのサイトで公開されていますので、併せてご覧ください。
Wijmo を選定したポイントはいくつか挙げられています。
- 集計処理等のバックエンドに工数を割くために、フロントエンド側は手間をかけずに作れるようにする
- 保守性を高める
- 各開発者の PC にインストールを必要としない
- AngularJS を利用し、宣言的な記述という型にはめることで、属人的な書き方をできなくする
- 社内に JavaScript 職人がいないので、JS スキルの高くない人でも保守できるようにする
- AngularJS、TypeScript との親和性が高い
- Wijmo は最初から AngularJS や TypeScript との連携を考えて設計されている
- AngularJS や TypeScript の学習コストは低くないが、その後の生産性で十分にペイできる
- リッチな UI にする
- 業務システムでは軽視されがちだが、使い勝手が悪いシステムは、逆に業務の効率を下げてしまう
- オールインワンで様々なグラフやグリッドが作れるので、それぞれに JS ライブラリを拾ってきて、統一性を下げる心配がない
リリースまでの期間は3カ月程度ですが、これはバックエンドの集計システム等も含めた機関だそうです。
グラフ描画に関して言えば、全く経験のない人が2週間で実現できたとのこと。
サイトの方に書かれていますが
『新規開発なのでリスクを恐れず、新しいシステムを新しい技術で開発していこう』という姿勢で新技術の採用に抵抗がなかった。
http://wijmo.c1.grapecity.com/casestudy_intelligence/
というのには好感が持てます。
また、Wijmo の Optional Pack という位置づけではありますが、SpreadJS という Excel ライクなコンポーネントもあります。
こちらでは Excel ファイルの入出力機能もあるそうで、既存システムとの連携も簡単にできそうですね。
この機能には食指が動いています。
感想
最近、個人的に AngularJS に興味を持っているので、申し込んだ時点では AngularJS のセッションに最も期待していました。
もう少し深い内容を期待していたのですが、導入のような内容に留まっていたのは残念です。
あと、同時通訳が非常に聞きづらかったです。
やはり英語は重要ですね…。
