UML図を作成する練習ができるサービス
https://plantuml-server.aki158-website.blog
このサービスは、ソフトウェアエンジニアの学習をサポートするために作成したサービスです。
ソフトウェアエンジニアは、ソフトウェア製品を作成する場合、プログラミングをする前に設計という工程を実施します。
設計では、UML図(シーケンス図やクラス図など)という視覚的にソフトウェア製品の構造がわかる資料を作成することがあります。
このサービスでは、UML図に関するいくつかの問題を提供し、ユーザーが1からUML図を作成できるようになる手助けをすることができます。
PlantUMLのサイトでUML図の作成方法を学んだ後にアウトプットとして練習問題を解きたい場合に、役に立ちます。
基本的な機能として、問題集と問題の表示/UML図の作成/作成したUML図のダウンロードができます。
UML図の作成時には、わからなくなった時のためのチートシートとして、Answer UML と Answer Codeを用意しています。
作成したUML図は、下記ファイル形式のいづれかから選択してダウンロードすることができます。
- png
- svg
- txt(ASCII)
説明で登場する用語について補足します。
用語の意味がわからない時は、下記表を確認してください。
| 用語 | 意味 |
|---|---|
| UML図 | ソフトウェア開発の過程でシステムの設計や構造を視覚化するために使用される標準的なモデリング言語です。 |
| ソフトウェア開発 | ユーザーが求めているソフトウェア製品を作成するための一連の工程です。 |
| エディタ | テキストやコードなどを作成、編集、表示するためのソフトウェアのことです。 このサービスでは、問題ページの左側にある「' ここから記述してください」と記載してある入力欄のことです。 |
- URLにアクセスする
- 問題集の中から練習したい問題を選びクリックする
- エディタにコードを入力して、UML図を作成する
- Answer UML と Answer Code を見て答え合わせする
- 画像として出力したい場合は、ダウンロードする
一通りの手順のイメージはデモを参考にしてください。
- URLにアクセスする
- 問題集の中から練習したい問題を選びクリックする。
今回は、シーケンス図を練習したいので、「ID:3 矢印の見た目を変える」をクリックします。 - エディタにコードを入力して、UML図を作成する。
初めて解くので、Answer Code を見ながら進めます。
UML図の作成に慣れてきたら、Answer UMLのみを見て解いてみましょう! - Answer UML と Answer Code を見て答え合わせする
- 画像として出力したいので、3つのファイル形式から「png」を選びクリックする
| カテゴリ | 技術スタック |
|---|---|
| フロントエンド | HTML |
| CSS | |
| JavaScript | |
| フレームワーク : Bootstrap | |
| ライブラリ(コードエディタ) : Monaco Editor | |
| バックエンド | PHP |
| インフラ | Amazon EC2 |
| Nginx | |
| Ubuntu | |
| VirtualBox | |
| その他 | Git |
| Github | |
| SSL/TLS証明書取得、更新、暗号化 : Certbot |
| 機能 | 内容 |
|---|---|
| 問題集の表示 | 1ページにつき5問を表示させています。 問題の情報として、ID/Title/Themeを表示させています。 |
| 問題ページへの遷移 | 問題集から練習したい問題をクリックすると、IDの問題ページに遷移します。 |
| Pageボタン | クリックしたページへ切り替えができます。 |
| 機能 | 内容 |
|---|---|
| 問題の表示 | 問題集ページでクリックされた問題の情報をもとに問題が表示されます。 |
| エディタ | PlantUMLの構文を記述することができます。 |
| Download | 作成したUML図は、下記ファイル形式のいづれかから選択してダウンロードすることができます。 Previewが「No image.」の時にクリックした場合は、ダウンロードできません。 また、注記「※Preview が No image. の場合は、出力できません！」が赤で強調されます。 ・png ・svg ・txt(ASCII) |
| Preview | エディタのコードが変更されると、リアルタイムでUML図に変換して表示されます。 UML図に変換できない間は、「No image.」と表示されます。 |
| Answer UML | 答えのUML図が表示されます。 Answer Code ボタンと切り替えることができます。 |
| Answer Code | 答えのコードが表示されます。 Answer UML ボタンと切り替えることができます。 |
| 戻る | 問題集のページへ遷移します。 |
⭐️後で記載する!!!
作成した理由を記載する。
⭐️後で記載する!!!
【使えるかもしれない素材】
動的ウェブアプリケーションの開発および本番環境へのリリースを理解するためのプロジェクトです。
このプロジェクトでは、下記のような実装を可能にする技術への理解が必要になります。
- UML問題集
- JSONファイルを読み込み動的にPageボタンとTableを作成し表示させる
- Pageボタンをクリックすることで動的にTableの表示を切り替える
- TableをクリックすることでIDのPageへ遷移させる
- UML問題
- JSONファイルを読み込んだデータを元にUML問題のPageを動的に作成する
- Previewに表示された画像をファイル形式を選択してDownloadさせる
また、誰でもウェブを通じてアクセスできるようにウェブアプリケーションとして本番環境にリリースさせる必要があります。
テキストや参考にした記事などを再度読み返して技術の理解を深めてから書く。
ここがエンジニアに一番読んでもらいたい箇所なのでできるだけ詳細に書く。
- ログイン機能
- ログインしたユーザーが解いた問題がわかるようにする
- 問題が正解したかテストできるようにする
- 練習できる問題の追加
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent