Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう！

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

本日のアジェンダ
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”

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

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エコシステムの構築をサポート

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

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

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 アプリ開発支援ツールに注力

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. エンタープライズに対応したサポート、
サービス
 製品サポート + 各種開発コンサルティング

モダンWebアプリケーションとは？

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

#APIあるある
実録
APIの現実・・・

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

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

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

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

リソース名が省略語だらけ
#APIあるある
例えば・・・
・営業案件 Opportunity がOPP
日本語ローマ字略称は覚えづらく、つらい・・・
・勘定科目マスタが KKM とか

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

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

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

エンドポイント一覧がAPIで取得できない
#APIあるある
・どのくらいリソースがあるのかわからない
・クライアントサイドで動的な処理ができない
・APIの変更に動的に対応することができない

リソースが存在しないのにステータスコード200(正常)
#APIあるある
• 成功なのに失敗？
• リソース名が間違っていたはずなのに200番。404(Not Found)では？

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

まだまだありそうな予感
皆さまの
を募集中！
SNS で発信しよう！
#APIあるある

原因：
「REST はプロトコルではない」から

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

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

『たのむ
メタデータ・スキーマをくれ。
できれば、動的に』

クライアントサイドデータソースサイド
API
PC
Mobile
モダンなAPI＝クライアントサイドに優しい
RDB
ファイル
クラウド
サービス
API仕様書から
自動生成

モダンAPIを3ステップでDBから自動生成できる
CData API Server

ノンコーディング、3ステップでAPI 実装
公開するデータソースに接続1
ユーザーの設定とアクセス権限を指定
2
3
公開するデータを選択

API
PC
Mobile
Demo
API Server
• バックエンドAPI＋Webフロント構成アプリケーション
• マルチデバイスアプリケーション

API を活用したモダン Web アプリの構築

API
PC
Mobile
データはつながった、次はクライアントアプリ（画面）だ！
API Server
• データを「活かす」アプリケーションを「すばやく」実装

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

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

Demo
Ignite UI CLI を使ったAngular アプリ構築と
API サーバーへの接続

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

Demo
API サーバー + Ignite UI for Angular
“Budget App”

更なる進化: Indigo Design to Code (D2C) Studio
• まとめスライド
• https://youtu.be/1I9Rl8f07gc

まとめ

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

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

Thank You!

Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう！

More Related Content

What's hot

Similar to Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう！

More from CData Software Japan

Recently uploaded

Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう！

Editor's Notes