UMLモデリングを通して、一歩一歩作ってみる 「UMLモデリング練習帳アプリ」#2 Flask適用

8804 ワード
plantuml Flask uml Flask テキストリンク

はじめに

UMLモデリングを通して、一歩一歩作ってみる 「UMLモデリング練習帳アプリ」第二回目です。
今回は、前回作ったものをWebアプリとして実装すること考えてみたいと思います。

前回はこちら
(https://qiita.com/tomohiro_odan/items/48a96141a2a96916f3b2)

作るものを考える

では、ざっくり作るものを考えましょう
前回は、CUIベースでplantUMLを利用した作成UMLモデルと解答UMLモデルを比較するプログラムを作成しました。
「でもなぁ…サービスなんだから、UMLモデル作成も含めて、Webブラウザ上でやりたいよねー。」
そんな要望きたということにします。
…ということで、今回はWebブラウザ上でできる仕組みを考えていきます。

概念

今回も、UMLモデル学習者がUMLモデルを作成し、与えられた問題に対して、作り切れたかを確認することを考えます。(詳細は前回...)

ユースケース

それでは、そういった概念の中でどこをUMLモデリング練習帳アプリの範囲として開発していくか考えます。
ユースケースを考えてみると、「UC1.UMLモデルを作成する」、「UC2.UMLモデルを確認する」の二つを考えていました。
今回は、考えたユースケースは、ブラウザ上で実施したいので、「UC1.UMLモデルを作成する」を新たに含め、どちらも「UMLモデリング練習帳アプリの範囲」としました。

ユースケースのシナリオ(シーケンス)

続いて、ユースケースのシナリオ（シーケンス）を検討していきます。

前回からの変更点は、「UMLモデルを作成する()」を「UMLモデリング練習帳アプリ」で行うことです。
また、それに伴い、ユースケースのシナリオとして、UMLモデリング練習帳アプリは、下記の二つの機能を追加で開発することになりそうです。

  • 今回追加で開発するUMLモデリング練習帳アプリ機能
    • UMLモデリング問題表示
    • UMLモデル記述

ユースケースと機能

先ほどの分析結果からユースケースとアプリの機能の対応は以下となりました。

作るものを決めよう

さて、作るべき機能が明確になったので作るものを決めていきましょう。
Pythonを開発言語としていますが、今回はWebブラウザ上のアプリを想定しています。
そのため、配置や実装に加えて、画面について考える必要がありそうです。
今回は、簡素で使いやすいflaskを利用することにしました。

画面

遷移

今回は単純な1つの画面(index.html)だけで実現することを考えることにしました。

イメージ

画面では、UMLモデル記述用の一つのテキストフィールドとモデル確認用のボタンを持つものを考えました。
結果を受けて、最初は何も表示されていませんが、解答結果表示を行う想定です。
(問題文表示を書き忘れてますが、上部に表示する想定です…)

配置

前回は、main.pyというファイルに全て作成していましたが、今回は、server.pyというファイルに機能を実装することにしました。
UMLモデリング学習者は、Google ChromeなどのウェブブラウザでそのURLにアクセスします。そのため、server.pyは、'localhost:8000'にアクセスできるようにします。
モデル確認ボタンを押すと、画面からUMLモデル記述が書かれたテキストエリアの内容を読み取り、解答UMLモデルスクリプトの記述と比較し、UMLモデルの画像ファイルを出力し画面上に表示します。
また、今回から構築が容易なCentos7上で動作を想定としました。


※→は、「参照や呼び出し元→参照や呼び出し先」

[フォルダ構成]
server.py(「UMLモデリング練習帳アプリ」サーバースクリプト)
|_static（画像、CSS、Javascriptなどの静的ファイル置き場）
|    |_plantuml.png(ダミーUMLモデル画像)
|    |_forminput.png(出力UMLモデル画像)
|
|_templates（HTMLのテンプレート置き場）
|    |_index.html（トップページhtml）
|
|_answers(解答UMLモデルスクリプト置き場)
|    |_usecase001a.pu(解答UMLモデルスクリプト)
|
|_run_plantuml.sh(UMLモデル画像の出力用shellファイル)
|_forminut.pu(出力UMLモデルスクリプト)

実装

それでは実装していきます。
今回もかなりべた書き…。

[server.py]
#! /usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask, render_template, request
import subprocess
import sys
import difflib as diff

app = Flask(__name__)

# キャッシュをなくす（入れないと画像が古いままになる）
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0

# 最初のページ
@app.route('/', methods=['GET'])
def index():
    return render_template('index.html', \
      image_pass = "/static/plantumlimage.png" )

# UC2.UMLモデルを確認する
# モデル確認を実行する
@app.route('/', methods=['POST'])
def model_conform():

    # UMLモデル解析
    # plantumlファイル作成
    file = "forminput.pu"
    fileobj = open(file, "w", encoding = "utf_8")
    fileobj.write("@startuml{static/forminput.png}\n") 
    fileobj.write(str(request.form['modelingform'])+"\n")
    fileobj.write("@enduml\n")   
    fileobj.close()

    # 差分出力
    with open("./forminput.pu","r") as f:
        submit = f.readlines()

    with open("./answers/usecase0001a.pu","r") as f:
        answer = f.readlines()

    # 差分をunified形式で取得
    difflist = list(diff.unified_diff(submit, answer, fromfile=str("submit model"), tofile=str("answer model")))

    # 確認結果を表示
    if len(difflist) == 0 :
        result = "確認結果:OK"
    else :
        result = "確認結果:NG"

    # png画像出力
    subprocess.Popen(["pwd"], shell=True)
    completed_process = subprocess.run(["./run_plantuml.sh"], shell=True)

    # 解答結果表示   
    return render_template('index.html', \
      image_pass = "/static/forminput.png", \
      check_result = result, \
      diffs= difflist)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8000)

[index.html]
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>
  <body>

    <h1>UMLモデリング練習帳アプリfrom index.html</h1>

    <label for="title">問題①</label><br>
    <p>下記の文章からユースケース図を作成しなさい。</p>
    <p>UMLモデル学習者は、UMLモデルを作成する。</p>

    <form action="/" method="POST">
      <textarea name="modelingform" id="modelingform">{{ request.form['modelingform'] }}</textarea><br>
      <input type="submit" value="モデル確認"><br>
    </form>

    <p><img src={{ image_pass }} ></p>

    <p>{{ check_result }}</p>

    {% for diff in diffs %}
      <p>{{ diff }}</p>
    {% endfor %} 

  </body>
</html>

[usecase0001a.pu]
@startuml{static/forminput.png}
usecase UC1.UMLモデルを作成する
UMLモデリング学習者 --> (UC1.UMLモデルを作成する)
@enduml

[run_plantuml.sh]
前回と同様のため省略。

[forminput.pu]
初期は、何も記載されていないので省略。

動きをみてみよう

実装し終えたので、今度は動作を確認しましょう。

実行結果

plantuml,Graphvizは利用できるように環境変数を登録しておきます。
アプリを起動し、動作を確認してみましょう。

$ export FLASK_APP=server.py
$ flask run --host=0.0.0.0 --port=8000

出力結果

確認結果がOKの場合

画像が古いやつですが、イメージ的に下記のような内容になります。差がない場合は、「確認結果：OK」のみが表示されます。

確認結果がNGの場合

「確認結果：NG」と提出したUMLモデルスクリプトと解答UMLモデルスクリプトとの差分が表示されます。
ちなみに、前回は補足できていませんでしたが、差分はunified形式で行の差分が出力されます。

以上で、確認結果が出力できることを確認できました。

次回に向けて

今回はwebブラウザで実現できるようにしてみました。なんとなくアプリらしくなってきました。
しかし…

「これだと1問しかできないじゃん。出題者が問題を登録したりできるようにしたいよ。」

と言われてしましました。

ということで次回は、UMLモデリング出題者というアクターが新たに登場し、問題を登録・削除・編集できるようにすることに取り組んでいきます。

参考文献

以上。