© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
Angular でもっとAPIファースト・もっとモダンデザイン
なWebアプリケーションを作ろう！
インフラジスティックス・ジャパン株式会社 桐生 達嗣
CData Software Japan 合同会社 桑島 義行

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
本日のアジェンダ
Agenda
• 自己紹介
• APIファースト・モダンデザインなWebアプリケーションとは
• 多様化するAPIの現状とAPIエコシステム、APIの在り方
• APIを3ステップでDBから自動生成できる CData API Server
• Ignite UI CLI を使ったAngular アプリ構築
• CData API Server + Ignite UI for Angular “Budget App”

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
登壇者自己紹介
Self Introduction
桐生達嗣 (tkiryu@Infragistics.com / @TatsushiKiryu )
・インフラジスティックス・ジャパン株式会社
テクニカル コンサルティング エンジニア
・専門分野: Web アプリ / フロントエンド開発
桑島義行 (kuwajima@cdata.com / @kuwazzy )
・CData Software Japan合同会社 テクニカル ディレクター
・専門分野: DB / BI / WebAPI

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
About CData Software
Bi-directional Access to Live App, Database, & Web API Data Through Standard Drivers
・CData Software, Inc. / Started: 1994 (/nsoftware)
・Location: Chapel Hill, NC a spin-off of /n software
・CData Japan: 2016/6 (JV with Infoteria)
・20年以上にわたりデータ関連コンポーネントを提供
・100を超えるデータソースへのデータ接続を標準化
・APIエコシステムの構築をサポート

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
RDB(SQL) ⇔ Web API 変換のエキスパート
Enable real-time data integration with hundreds of applications, databases, and Web APIs
Data Drivers
API を仮想RDB 化することで使
いやすく
API Server
APIをノンプログラミングで開発

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
業界最多級100+のデータソース
Drivers for NoSQL, Big Data, & SaaS Connectivity
CRMおよびマーケティング自動化
会計システム
コラボレーションおよびERP
オンプレミスおよびクラウドDB
ドキュメントおよびファイル形式
ソーシャルネットワーキングネットワーキングおよび認証
電子商取引
その他

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
About INFRAGISTICS
ｚ
1989年
創立、米国
本社オフィス
開設
2000年
Windows
Forms &
ASP.NET
対応製品
販売開始
2006 年
東京オフィス開
設
WPF 対応製品
販売開始
2008年
UX サービス
部門設立
2010年
HTML5/
Javascript
対応製品
販売開始
2012年
iOS 対応製品
販売開始Indigo
Studio 販売開
始
2014年
Xamarin &
Android 対応
製品
販売開始
2018 年
継続する
イノベー
ション
2016年
ReportPlus
Embedded
提供開始
2017年
プロダクティビティ
パック、Angular
コンポーネントを
提供開始
・UI コンポーネント専業で約 30 年間
・日本法人を設立して 13 年目
・近年、Angular をはじめとした Web アプリ開発支援ツールに注力

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
Angular, Flutter, React,
Vue.js, Electron, Node.js,
Ionic, Xamarin, UWP, .NET,
近年、乱立するクライアント テクノロジー、フレームワーク
テクノロジー、フレームワークの
選択が重要に
さらに、開発の前の
「学習」にもコストがかかる

開発支援ツール Infragistics Ultimate
Web、モバイル、デスクトップに対応する UI コントロールと
生産性を向上させる プロダクティビティ ツールを提供
モバイル向け
• Ultimate UI
for Xamarin
• Ultimate UI
for iOS
• Ultimate UI
for Android
Web 向け
• Ignite UI for
Angular
• Ignite UI for
JavaScript
• Ultimate UI for
ASP.NET
デスクトップ向け
• Ultimate UI
for Windows
Forms
• Ultimate UI
for WPF
デザイン
• Indigo Studio
• ICONS

1. UI コントロール
2. プロダクティビティ
ツール
3. エンタープライズ
サポート
コントロール「だけ」ではなく、UI 開発全体を支援
1. 高機能 UI コントロール
 グリッド、チャート、スケジュール、ピボット
2. 学習コスト、作業コストを低減する
プロダクティビティ ツール
 CLI ツール、コンフィギュレーター
3. エンタープライズに対応したサポート、
サービス
 製品サポート + 各種開発コンサルティング

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
モダンWebアプリケーションとは？

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
Mobile
PC
クライアントサイド
モダン Web アプリとは？
データソースサイド
RDB
ファイル
クラウド
サービス
サーバーサイド
これまで:
HTML のやり取り
モダン:
データ(API)
でのやり取り
コードの再利用性を高めるためバックエンドとクライアントサイドは、疎結合

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
Mobile
PC
クライアントサイド
モダン Web アプリとは？
データソースサイド
RDB
ファイル
クラウド
サービス
サーバーサイド
これまで:
HTML のやり取り
モダン:
データ(API)
でのやり取り
コードの再利用性を高めるためバックエンドとクライアントサイドは、疎結合

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
#APIあるある
実録
APIの現実・・・

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
API を使うのに紙文書で申請が必要！
#APIあるある
・NDAや申請書、パートナー契約などなど紙文書でのやり取りが必要
・時には恐ろしい数のヒアリング項目
・APIを利用するまでに2週間以上時間がかかることも・・・
・（参考）Salesforce は、開発アカウントはOnline 申請、即API
利用開始

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
仕様書がPDFやExcel
・Word ベース や 神エクセル
・いったいどうやって管理・アップデートする？
・実装とドキュメントは当然乖離
・中にはドキュメントがCD-ROMで送られてくるところも・・・。
・コピー＆ペーストできない
#APIあるある

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
Limit が厳しすぎる
#APIあるある
・1分間にXX回リクエストまで、等
・ちょっと連携開発でテストしたら、ロック
・BIするのに全データを取得したいが制限にひっかかってしまい、取得できない
（Twitterなどもちろん仕方がないものもある）

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
リソース指向と関数指向がまざってる
#APIあるある
・例えばURLが
https://XXX.com/getXXX
https://XXX.com/findXXX
https://XXX.com/users
・詳細検索するときだけ、FindやSearchといったURL

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
リソース名が省略語だらけ
#APIあるある
例えば・・・
・営業案件 Opportunity がOPP
日本語ローマ字略称は覚えづらく、つらい・・・
・勘定科目マスタ が KKM とか

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
ページングの指定方法が違いすぎる
Qiita MoneyForward
ページ指定方法
URLパラメータで指定
Page=1
URLパラメータで指定
Page=1
ページ数最大値表示
レスポンスヘッダに記載
Total-Count: 6
レスポンスボディに記載
total_count : 6
1ページあたりの表示件数表記
URLパラメータで指定
per_page=20
URLパラメータで指定
Limit=100
次ページリンク
レスポンスボディに記載
Link:
<http://qiita.com/api/v2/users?pa
ge=1>; rel="first",
なし
#APIあるある
・同じ会社のAPIでも微妙に違う
・ヘッダに記載していたり、ボディに記載していたり

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
通貨フィールドが「￥」マーク付き
#APIあるある
・昔、データ型ってあったのを忘れたのか？
・通貨フィールドが数値型ではなく、円マーク付きで返ってくるので文字列になってしまう
例：var x = “1,000,000”;
・クライアントサイドで通貨マークの調整処理が必要
・BIツールに取り入れる時には数値変換が必要

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
データを取得したいのにPOST
#APIあるある
・例：Bodyで検索条件を指定するから、POSTメソッドでGETする
・基本的にすべてのエンドポイントがPOST仕様だったり

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
エンドポイント一覧がAPIで取得できない
#APIあるある
・どのくらいリソースがあるのかわからない
・クライアントサイドで動的な処理ができない
・APIの変更に動的に対応することができない

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
リソースが存在しないのにステータスコード200(正常)
#APIあるある
• 成功なのに失敗？
• リソース名が間違っていたはずなのに200番。404(Not Found)では？

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
サマリデータのみで、明細が取れない
#APIあるある
• 見積の合計金額は取れるのに、明細が取れない
• APIから取得できるデータがそもそもサマリした後のデータで、使用者側でサマリの観点
を変えることができない
• ヘッダと明細を一括のリクエストで作成しないといけないAPIもあったり

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
まだまだありそうな予感
皆さまの
を募集中！
SNS で発信しよう！
#APIあるある

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
原因：
「REST はプロトコルではない」から

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
OData
• Microsoftが主導となり推進しているプロトコル
• HTTPメソッド（GET/POST/PUT/DELETE）でデータの参照更新ができる仕様
• RESTfulな設計パターンを実装
Open API Specification
• 略してOAS、旧Swagger
• REST APIの記述に関する仕様とAPIをコールするためのコードとドキュメントを自動生成するツール群
• Apache 2.0 License
• 2015年に推進団体「Open API Initiative」が設立
• The Linux Foundationの協力のもと、Microsoft/Google/IBM/Paypal/3Scale(Redhat) / Apigee(Google) などにより
結成
REST APIの規格・標準
Standards-based Interfaces

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
モダンWebアプリケーションに求められるAPI
1. メタデータ・スキーマの提供
2. メタデータ・スキーマから自動生成されたドキュメント
3. 規格（リクエスト・レスポンスルール）の統一

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
『たのむ
メタデータ・スキーマをくれ。
できれば、動的に』

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
クライアントサイドデータソースサイド
API
PC
Mobile
モダンなAPI＝クライアントサイドに優しい
RDB
ファイル
クラウド
サービス
API仕様書から
自動生成

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
モダンAPIを3ステップでDBから自動生成できる
CData API Server

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
ノンコーディング、3ステップでAPI 実装
公開するデータソースに接続1
ユーザーの設定とアクセス権限を指定
2
3
公開するデータを選択

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
クライアントサイドデータソースサイド
API
PC
Mobile
Demo
API Server
• バックエンドAPI＋Webフロント構成アプリケーション
• マルチデバイスアプリケーション

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
API を活用したモダン Web アプリの構築

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
クライアントサイドデータソースサイド
API
PC
Mobile
データはつながった、次はクライアントアプリ（画面）だ！
API Server
• データを「活かす」アプリケーションを「すばやく」実装

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
モダン Web 向け: Ignite UI for Angular
• 約 50 種類のAngular 専用コンポーネント
• マテリアルデザイン サポート
• 軽量、高速、高機能
• OSS
• デュアル ライセンス
Angular ロゴ: https://angular.io/presskit

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
• 利用するフレームワークの選択
(Angular, jQuery, React)
• 各種コントロールの利用に必要な
スクリプト、CSS、HTML の
ひな型をプロジェクトに追加
• 独自のカスタムテンプレートを
作成可能
コマンド “2行” でモダン Web アプリ開発を開始
$ npm install igniteui-cli -g
$ ig

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
Demo
Ignite UI CLI を使ったAngular アプリ構築と
API サーバーへの接続

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
予実管理 株取引 人事管理 不動産取引
Ignite UI for Angular で作成できる Web アプリ例
• レスポンシブ、マルチデバイス対応モダン Web アプリ
• 「見栄えの良さ」を実現

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
Demo
API サーバー + Ignite UI for Angular
“Budget App”

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
更なる進化: Indigo Design to Code (D2C) Studio
• まとめスライド
• https://youtu.be/1I9Rl8f07gc

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
まとめ

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
まとめ
• モダン API: 統一された規格、メタデータ、ドキュメントの提供
• API Server ですばやく実現
• モダン Web アプリ: プリミティブなデータのやりとり、クライアントを動的に生成
• Ignite UI for Angular ですばやく実現
開発ツールを有効活用しましょう！

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
お願い
• ブースにおいでください!
• 製品説明、デモを実施しています！
• ノベルティもあるよ！
• 「#decode大喜利」 やってます！
• 豪華賞品をご提供します

© 2018 CData Software Japan, LLC | © Infragistics Japan Co., Ltd.
Thank You!