#sendaigeek

1. Webアプリ開発のトレンド
とUIライブラリ開発事情
1
仙台Geek★Night #1

2. 業務の紹介
 名前：瀬川正和
 会社：グレープシティ
 職種：プロダクトマネージャー
– 「Wijmo（ウィジモ）」の開発
– Web業務アプリ用UIライブラリ
2

3. グレープシティ全景
3

4. グレープシティ開発拠点
4

5. 製品の例
 FlexGrid（フレックスグリッド）
– Excelのような入力操作
– コピー＆ペースト
– Excelの入出力
– PDFの出力
– etc
5

6. UIコンポーネントの役割
 便利で高機能なUIを提供する
 様々な開発手法に対応する
6

7. Wijmoの歩み
 2011年 最初のバージョンをリリース
 jQueryでコーディング
– メソッドを実行してウィジェットを生成
– メソッドの引数にプロパティ名と値を指定してプロ
パティを設定
– コーディングミスを誘発しやすい
// ウィジェットを生成
$('#grid').wijgrid();
// プロパティを設定
$('#grid').wijgrid(‘option', ‘allowEditing', true);
7

8. Wijmoの歩み
 2014年 Wijmo 5をリリース
 ECMAScript 5でコーディング
– newでコンポーネントを生成
– 単純にプロパティを設定（自動的にgetter／setterが
実行される）
– インテリセンスを利用可能
// コンポーネントを生成
var grid = new wijmo.grid.FlexGrid('#grid');
// プロパティを設定
grid.isReadOnly = false;
8

9. Wijmoの歩み
 2016年11月 Angular 2に対応
 HTMLコードでUIを定義
 UIとビジネスロジックを分離
<wj-flex-grid [isReadOnly]="false"></wj-flex-grid>
9

10. なぜAngular？
 Webアプリ開発の「選択肢を減らす」
– Angularと周辺技術をまず使ってみる
 標準仕様をベース
 Googleブランドの安心感
– Googleが開発して自身で使っている
10

11. Wijmo＆Angularアプリのデモ
Angularのチュートリアルも一通り読むことを推奨します
https://angular.io/docs/ts/latest/tutorial/
11

12. おまけ
12

13. VSCode拡張機能: Excel Viewer
13