Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

API Gateway and Automatic UI Generator

146 views

Published on

Dropal Expo 2017 in Japan

Published in: Business
  • Be the first to comment

  • Be the first to like this

API Gateway and Automatic UI Generator

  1. 1. Transform your business, transcend expectations with our technologically advanced solutions. Copyright © NTT Communications Corporation.All rights reserved. NTT Comが考える"API First"とは 〜API-GWからサービス・ダッシュボード自動生成まで〜 NTT Communications
  2. 2. Copyright © NTT Communications Corporation.All rights reserved. • Corporate Planning Division NTT Communications • 2016-: NTT Com API Gateway Platform Dev./Plan • 2011-2016:NTT Com Customer Portal Plan • 2002-2011: Network/Cloud Operating System Dev. Who? Junichi Tanaka
  3. 3. Copyright © NTT Communications Corporation.All rights reserved. API First
  4. 4. Copyright © NTT Communications Corporation.All rights reserved. API First APIファーストな開発モデル
  5. 5. Copyright © NTT Communications Corporation.All rights reserved. NTT Com APIs-  SAP x NTT hitoe IoT(Connected Health care)  ECL2.0(OpenStack base Private Cloud)  SDN(UNO[MPLS/Ethernet] Bandwidth/Routing)  MVNO Reseller  GM2M  GMOne​  ​SD-NS ​etc.... Mainly focus on B2B2X Market… API First
  6. 6. Copyright © NTT Communications Corporation.All rights reserved. NTT Communications API Gateway  NTTCom APIsの統合管理ゲートウェイとして2015年4月より提供開始  市中製品 +NTTCom 独自機能  サービス毎のAPIの接続形式/データ書式を統一して提供  API利用ログの一元管理が可能  VPN接続が可能 API First
  7. 7. Copyright © NTT Communications Corporation.All rights reserved. Developer Portal https://developer.ntt.com API First
  8. 8. Copyright © NTT Communications Corporation.All rights reserved. Developer Portal
  9. 9. Copyright © NTT Communications Corporation.All rights reserved. コンテンツ編集の権限機能  NTTCom独自機能を開発  部署単位でAPIドキュメントの編集権限を制御する仕組みをスクラッチで開発 Developer Portal
  10. 10. Copyright © NTT Communications Corporation.All rights reserved. 2段階認証  Drupalのモジュールを活用して二段階認証設定を行うQRコードを払い出し Developer Portal
  11. 11. Copyright © NTT Communications Corporation.All rights reserved. メガドロップダウン  APIの拡充で既存のメニュー表示では見ずらくなり、メガドロップダウンへ  モジュールをプラグイン Developer Portal
  12. 12. Copyright © NTT Communications Corporation.All rights reserved. Developer Portal レスポンシブル  閲覧端末(スマホ、タブレット、PC)の表示の大きさに合わせて画面構成を 自動変換  blogがスマホでも見やすい画面 PCブラウザ スマホブラウザ
  13. 13. Copyright © NTT Communications Corporation.All rights reserved. Drupal + Swagger Spec -API仕様からUI自動生成-
  14. 14. Copyright © NTT Communications Corporation.All rights reserved. UIをSwagger SpecとDrupalで自動生成・変更 Drupal + Swagger Spec
  15. 15. Copyright © NTT Communications Corporation.All rights reserved. UI自動生成による効果 • 簡単:開発不要、設定変更のみでGUI変更が可能 • 早い:記述のみですぐに新たな価値を提供 • わかりやすい:サービス横断で統一的なデザイン Drupal + Swagger Spec 画面設計 API仕様書 作成 画面開発 (コーディング) Before After 情報取得機能 開発 (コーディング) 情報取得 ロジック設計 API仕様書 作成 UIの設計、開発、変更の稼働時間の変化
  16. 16. Copyright © NTT Communications Corporation.All rights reserved. SWAGGER OpenAPI Initiativeで推進されているAPIフレームワーク DESIGN SWAGGER EDIOTR BUILD SWAGGER CODEGEN DOCUMENT SWAGGER UI Swagger Spec: Open API Initiativeで規程するREST API記述に関する仕様 Drupal + Swagger Spec
  17. 17. Copyright © NTT Communications Corporation.All rights reserved. Swagger Specの記述 Drupal + Swagger Spec
  18. 18. Copyright © NTT Communications Corporation.All rights reserved. GUI定義部分の例 Drupal + Swagger Spec
  19. 19. Copyright © NTT Communications Corporation.All rights reserved. Drupal + Swagger Spec  参照・編集画面を自動生成  サービス横断で共通表現 Case1 サービスの設定画面
  20. 20. Copyright © NTT Communications Corporation.All rights reserved. Drupal + Swagger Spec • APIGWがもつIAM機能を使ってアクセス権限を制御 • ページのSTEP表示、プレビュー表示画面 Case2 オーダリング画面
  21. 21. Copyright © NTT Communications Corporation.All rights reserved. 認証と権限 Drupal + Swagger Spec
  22. 22. Copyright © NTT Communications Corporation.All rights reserved. Next Challenges are... • Dashboard White-label for Customers • 既存OSS適用 Drupal + Swagger Spec
  23. 23. Copyright © NTT Communications Corporation.All rights reserved. NTT Com’s Next API Businesses are ... API Gateway as a Service NTT Comサービス Nexcenter Enterprise Cloud パートナーのSaaS 金融業 運輸業 SaaS事業者 お客さま お客さまのビジネスの価値向上 課金 SaaS ワークフロー SaaS AI SaaS ログ管理 SaaS
  24. 24. Copyright © NTT Communications Corporation.All rights reserved. Thank You

×