設計書の書き方講座

設計書を自動生成できるAIサービスとは(vol.31)

  • 2017.11.16
  • 株式会社システムインテグレータ
設計書を自動生成できるAIサービスとは(vol.31)

本連載は、設計書ジェネレータ「SI Object Browser Designer(以下、OBDZ)」を使ってソフトウェアの設計書(仕様書、基本設計書、詳細設計書)を作る講座です。今回は「OBDZの勘所」として、設計を行うにあたり、つまずきやすい箇所とその対策についてご紹介します。

OBDZにご興味があればぜひ評価版をお申込みください。以下のURLよりお申込みいただくと、製品のダウンロードURLおよびログインに必要なアカウントを取得いただけます。

https://www.sint.co.jp/products/obdz/trial/trial.html

設計書を自動生成サービス『Design Recognition AIサービス』とは

先日プレスリリースでも発表しましたが、20183月に『Design Recognition AIサービス(仮)』という新サービスを開発中です。当AIは簡潔でいえば「開発エンジニア向けにアプリケーション画面などの2次元画像から内部のコントロール情報を解析するサービス」です。OBDZと連携できるサービスですので、ぜひ当コラムで詳しくご紹介したいと思います。

設計書を自動生成したい背景

AIサービスは、既存の設計書をOBDZに取り込む「リバース機能』を実現するために企画されました。OBDZはこれまでのご紹介した通り、設計情報をデータベース管理し、標準化、変更管理を図る設計専用のシステムです。ExcelWordで設計するのに比べ、多くのメリットがありますが、いざ既存システムをOBDZ化しようとすると、既存設計書の情報を手作業でデータ入力する必要があります。そのため、大規模な既存システムでは導入が難しいという課題がありました。

弊社でも、OBDZ開発当初より既存の設計書から自動生成する構想はありましたが、項目定義書などの設計書を取り込むことはできても、画面レイアウト定義書の取り込みが難しいという課題がありました。というのも、OBDZではテキストボックスなどのコントロール単位で設計データ管理しているため、システムの画像レイアウト情報を受け取るだけでは足りず、レイアウト内のコントロール単位に分解が必要だからです。「ソースコード内のレイアウト情報」をインプットとして自動生成する案も考えましたが、このアイデアはお蔵入りとなりました。確かにASP.NET等、一部の言語においてはHTMLを拡張したタグ内にレイアウト情報が埋め込まれていますので、コントロールの種類や位置情報を取り出すことが可能ですが、スタイルシートやJavascriptでレイアウトを制御しているケースでは解読は非常に難易度が高くなります。

また、デスクトップアプリやモバイルアプリなどの開発するアプリの種類により、ソース内のレイアウト情報の箇所もバラバラであることからすべての言語、すべてのアプリケーションに対応するのが困難でした。

そのような理由から現在に至るまで実現できなかったのですが、昨今、IT業界で大きな技術革新がありました。そう、AIです。アプリケーションの画像からAIの技術を使えばコントロール検出できるのではないか?という発想から考えられたのが今回のAIサービスです。現在開発中のβ版の画面もお見せしながらご紹介したいと思います。

いかがでしたでしょうか。今回は筆者が導入ユーザー様の声をお伺いする中で、感じたことを書いてみました。これまでの設計文化を変える必要も出てきますので、容易なことではないと思いますが、OBDZで導入効果を出すためには重要なポイントだと思いますので、ぜひ導入時に一度、見直していただきたいと思います。

Design Recognition AI の仕組み

Design Recognition AIの構成は図1の通りです。

ai1.png

1.Design Recognitin AIのシステム構成 

Design Recognition AIはクラウド型のサービスとなりますので、OBDZと連携する際は、まずOBDZからインターネット経由でアプリケーションの画像を送信(POST)します。AIサービスでは、受け取った画像を以下のステップで解析します。

①位置認識

アプリケーション画像を「囲まれている箇所」「文字と思われる個所」などに分解します。このロジック自体はAIではなく、弊社独自のアルゴリズムで実施しています。画面1が位置認識の結果です。青枠が分解した単位となっています。

ai2.png

画面1.位置認識

②部品認識

位置認識した時点ではそれがボタンなのか、テキストボックスなどかはわかりません。ここからはAIの画像分類アルゴリズム(CNN)を使って解析します。Googleの機械学習フレームワーク『Tensor Flow』を利用して、コントロール種別を判定しています。画面2が部品認識の結果です。例えば赤はテキストボックス、緑はボタンですが、高い精度で解析できています。

ai3.png

画面2.部品認識

③文字認識

テキストボックスやボタンの中にある文字を解析します。これにはグーグルの『Google Cloud Vision API』サービス(OCR)を利用しています。

ai4.png

そのあとはコントロールの位置(座標)や大きさ、種別や文字列などの解析結果をOBDZ側に返します。

解析結果はJSON形式の文字列になっていますので、OBDZ側ではさらに加工してビジュアル的に表示します。画面4はOBDZ側のリバース実行後の画面です。

ai5.png

画面4.プレビュー画面 ※画面は開発中のもの

この画面は、ユーザーが最終確認するためのプレビュー画面です。アプリケーション画像のデザインによってはテキストをボタンと誤って解析する場合等がありますが、もし誤っていてもユーザーが訂正することができます。また、ユーザーが解析結果を訂正した際はAI側で自動的に学習され、次回の解析精度が上がる仕組みとなっています。ユーザーが確認後、ボタンを押せばリバース完了です。リバース後は、OBDZの機能を使って効率の良い設計データの修正や、クロスリファレンスなどの高度な検索、テスト仕様書モックアップなどの生成などを行うことができ、従来よりも設計品質や生産性が向上できます。

設計書自動生成以外の目的でも使える

OBDZと連携するために開発中の当AIですが、サービス単体でも発売する予定です。AIの解析結果はJSON形式で返しますので、自前でHTMLに変換するロジックを組めば、紙やホワイトボードにスケッチした画面の絵からHTMLにするシステムをつくることも可能です。また、IT業界以外にも役立てられると考えています。例えば、紙の間取り図から、窓やドアに分解すればCADデータ変換などに役立てることができます。そこで将来的には、ユーザーがカテゴリ分類などを自由にカスタマイズできるようにして様々な用途で使えるような拡充を予定しています。

いかがでしょうか。当AI2018年の3月に向けて開発中しております。価格体系などは未定となっておりますが、決まり次第アナウンスする予定です。ぜひご期待ください!

Object Browser 事業部 後迫

SI Object Browser Designer カタログ

SI Object Browser Designer カタログ
SI Object Browser Designer カタログ

本資料は、OBDZの概要をまとめた資料です。ぜひこの機会に新発想の設計ツール「SI Object Browser Designer」をご検討ください。

無料Eブックをダウンロード