フローチャートとは

フローチャートは処理の順序を絵にしたものです。
単純にアプリ(プログラム)を作成するときに処理の順序を絵にしておくと後が楽、よりまとまったものが作れる。ということです。
とりあえず下のようなものです。じゃんけんゲームのフローチャートも作ってみました。

フローチャートの描画ソフト

StarUMLというソフトを使用しています。説明書は英語ですので、日本語訳で見ていけば何とかなります。
ちなみに、UMLというのは、クラス図などの決まったルールがあるドキュメントの書き方です。
BlueJというIDE(開発ツール)ではクラス図を見ながらプログラムを作成することができます。下のような感じです。

作成したフローチャート

＜テキストRPGのメイン処理フロー＞

使用する部品

プログラムの開始と終了の部品
下のような形の図形を使用してプログラムの開始、もしくは終了を示します。
処理の内容を示す
矢印は省略します
条件分岐
事前準備された処理
セットアップ操作などの準備プロセスフロー
セットアップ処理などの準備プロセスフロー
別のフローチャート、ドキュメントなどへのリンク
処理が長くなってしまう場合は、この図形を用いてリンクしていることを図示します。
データ
保存
帳票、CSVファイルなどを処理の中で保管する場合に使用します。
手動操作
ドキュメントや帳票など
データベース

とりあえず主要なものは以上です。今後は、使用が増えたりしていくと思いますが、土台になるものはあまり変更されませんので、フローチャートの作成時に使用するものを随時調べながらやるのが一番効率的だと思います。

一つ作ってみる

単純なフローチャートです。処理フロー(箇条書き)は以下の通りです。

サンプル１

例えば以下のような処理フローを作成したとします。

プログラムを起動する(上の箇条書きでは省略していました)
コンソールに「Hello World」を表示する
プログラムを終了する

これは単純なのですぐにイメージがわくと思いますが、下のような図になります。
Sample1

これを実装してみる

皆さんご存じ、ハローワールドです。

public staic void main(String[] args) {
    System.out.println("Hello World!");
}

練習問題１

プログラムを起動する
int型の変数を宣言する
11 かける 22の計算結果を変数「i」に代入する
コンソールに変数「i」を表示する
プログラムを終了する

Sample2

これを実装するとどうなるでしょうか？

練習問題２

下のようなIF文の処理をフローチャートにすると土曜な図になるでしょうか？

＜IF文の書き方＞

if (論理式) {
  // trueの場合
} else {
  // falseの場合
}

＜フローチャートにするコード＞

boolean isOne = 0;

if (isOne) {
  System.out.println("isOneは1です");
} else {
  System.out.println("isOneは2です");
}

でわでわ。。。

JavaFX関連ページ

ステップアップ関連ページ一覧

JavaFX + ND4Jで機械学習準備

オブジェクト指向関連ページ

[オブジェクト指向の概念1〜OracleDocのチュートリアル１〜](https://zenryokuservice.com/wp/2019/10/301. /%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91%e3%81%ae%e6%a6%82%e5%bf%b5-%e3%80%9coracledoc%e3%81%ae%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%ef%bc%91/)
オブジェクト指向の概念2〜クラスとは〜

UML 世界を作る〜RPGでの世界を作る場合〜

現在(2020-03-15)自分で作成しているものになりますが、テキストRPGを作成しようとしています。Java言語を使用しています。

プログラム作成(アプリ作成)である程度の規模になった場合は、設計をしてからでないと収集がつかなくなります。
違う見方をすると「面白いもの」を作ろうとしたら「設計」が必要になるということです。

RPGの世界を作る

「RPGの世界」と言ってもいろんな意味があるので具体的に、小説や脚本を作るレベルでの「世界」を作ろうということです。

世界の定義

世界、小説を作る側からすると「プロット」というらしいです。漫画や、脚本でも同様らしいです。この情報は人から聞いたものなのでこのように記載しています。

どんな世界を描くか？

自分は「プログラマ」ではないので、人(作家など)がプロットを作ることを考えて、それをプログラマ的にアプローチしていきます。

どんな風に？

ズバリ、プロットを作る工程をシステム化します。これができたらかなりすごいことになると思いますが、理想通りにいかない想定です。
理由は、どうしても、「予測」する部分が発生するので、いわゆる人工知能(AI)処理が必要になるためです。

では、どうやるか？いわゆるフレームワークを作成する想定です。つまり、１つの(RPGで使用する)ストーリーを作成するための手順を作り、必要な情報(作成するストーリーのオリジナルな部分)を入力(作成)すれば、ストーリーとして使用できるレベルにまとめるツールとして作成するという意味です。手順としては以下の通りです。

物語を構成する項目を設定していきます。(キャラクター、世界(観)、文書のストーリー)
物語の世界を描くために、世界の始まり(創世神話)を作成する、必要なければこれを入力しない(NULL)に設定する
物語の世界に存在する世界を一覧します。(書き出します)
文書によるストーリー、キャラクターを作成します。

上記の内容を作成すると、自然と物語が作成できるというものです。
ぶっちゃけた話、フレームワークまで行きませんが、執筆する作品を部分的に作成していても、１つにまとめることが可能であろうと思っています。

できるかどうかはわかりません

しかし

文章作成のシロート目線からして、骨組みだけでもある程度の形になるのであれば、十二分に作品として作成することが可能になるはずです。
つまり、より多くの人のイメージや、想像した世界観を伝えやすい形にできるのではなかろうか？と考えています。

UMLを作る

結果から記載します。

上記の図が、クラス図になります。
ここの図には、クラス名とそれに対するプロパティ(世界には国がある)を表しています。世界のクラス図です。

具体的に、上のクラス図は文章に置き換えると下のようになります。

1. 世界には神話がある
2. 世界には国がある
3. 世界には自然がある

実際に世界にはもっとたくさんのものがあり、存在しています。しかし、これらを全部クラス図に落とし込むのは至難の技です、なので階層的に表現して行きます。

・世界→国→町
・自然→気候→地形(山、川など)

クラスで表現するもの(事)は上のように階層的に表現して行くと、１つの場所に描く内容が少なくて済みます。そして、それぞれ階層化、カプセル化するので一部を変更しても、他に影響がないように修正することができます。
これが「オブジェクト指向の良いところ」になります。

UMLの書き方(読み方)〜概要とクラス図〜

最近、UMLを使用することが多いので大急ぎでここに読み方、書き方をまとめておきます。

UMLとは

早い話が、プログラムを組み上げるのにどのように組み上げてやれば良いか？を図示する為の書き方のルールをまとめたものです。

参考サイトによると以下の通りです。

UMLとは、オブジェクト指向のソフトウェア開発において、データ構造や処理の流れなどソフトウェアに関連する様々な設計や仕様を図示するための記法を定めたもの。ソフトウェアのモデリング言語の標準としてとして最も広く普及している。

まとめると、

UMLには複数の図の書き方がありますがここでは、クラス図に関してまとめると

クラスで管理するデータや振る舞い(メソッド)の関連を図で示したものです。

全世界共通言語なので、サンスクリット語圏の人とでもUMLであれば共通の認識を持つことが可能ということです。
メモとか、が微妙ですが。。。

UMLの種類

分類レベル１

構造図（structure diagram）、振る舞い図（behavior diagram）の2種類に分類される。

構造図にはクラス図（class diagram）がある

オブジェクト図（object diagram）
コンポーネント図（component diagram）
パッケージ図（package diagram）
配置図（deployment diagram）
複合構造図（composite structure diagram）
クラス図(上の参考サイトにはなかった(笑))

振る舞い図(behavior diagram)

A. アクティビティ図（activity diagram）
B. ユースケース図（use case diagram）
C. ステートマシン図（state machine diagram）
D. 相互作用図（interaction diagram）
E.シーケンス図（sequence diagram）
F. コミュニケーション図（communication diagram)
G. 相互作用概要図（interaction overview diagram）

上のGに関してはあまり見かけません。。。

とりあえずは、

クラス図

主に使いたいのは「クラス図」です。クラスとクラスの関係、相互にどんな処理を行うか？
詳細設計レベルでの記述を行いたいのでこのUMLを中心に記載します。

クラス図は、オブジェクト図を細かくしたようなイメージです。

例えば

じゃんけんゲーム(標準出力使用)を作る場合は下の様なクラスを用意してやると拡張したり仕様変更に強い形で実装出来ます。

メインメソッドを動かすクラス
細かい処理を行うロジッククラス
標準出力に出力するクラス
入力などのチェックを行うクラス

これらのクラスに、どの様なデータを持たせ、どの様な処理(振る舞い)を行うのか？を図に書き込みます。

すると、全体的にクラス間の関係がよく見える。というわけです。

クラス図の書き方

人間をサンプルに記載します。
人間には、以下のプロパティ(要素)があります。(部分的に抜粋)

年齢
名前
体重

もちろんその他にもたくさんあり、数えきることができないくらいです。

そして、もう１つ行動(振る舞い)があります。上記と同様に。。。

挨拶(greet())
道具を使う(useTooles())

というようにメソッドを定義しています。振る舞い=メソッドというわけです

これがクラスの書き方になります。
ちなみにJavaで実装すると下のようになります。

public class 人間クラス {    private int 年齢;    private String 名前;    private int 体重;     public void greet() {        System.out.println("Hello!");    }    public void useTools() {       // 実装内容が決まっていないので空実装    } }

UMLの矢印

矢印の種類には何個かありますが、とりあえず以下の２つを理解します。

継承(extends)

クラスの継承を示す矢印です。

実装(implements)

インターフェースの実装を示す矢印です。

「インターフェース」という言葉はたくさんの場面で全く違う意味で使用されることが多いので注意が必要です。
ここでいう「インターフェース」はインターフェース・クラスのことで、特定の機能(メソッド)を実現(実装)するもののことを指します。

他にもネットワーク越しでの通信じに使用するデータ・オブジェクトを指すこともあります。(わりかしこの意味が多いような。。。)

とりあえずは、これらを理解しておけば、大体のUMLは読めると思います。
わからないことは「調べれば良い」のです(笑)

UMLツール Star UML〜ユースケース図を書いて見た〜

ユースケース

ユースケース図は、大雑把に、ユーザーとシステムの関連、及び「どのように使用するか？」を絵にします。
これを作っておくと「もともと何をしようとしてたっけ？」となった時に便利です。
【余談】
プログラムを作成していると、PCの内部的なところに集中してしまうため、現実での流れが見えなくなってしまうことが多々あります。なので、いつでも「どうだったっけ？」を引き出せるようにしておくと便利なのです。

書き方

UMLの書き方を参照してください。ここには現在作成中のウェブアプリのユースケースを記載しています。
GoogleMapを使用した札幌のライブハウス紹介サイトです。

ユースケース図の書き方

Start UMLでの書き方を記載します。
とりあえずは、アプリケーションを起動します。

そして、上部にある「Model」をクリックします。メニューが出てくるので、「Use Case Diagram」を選択します。現在青くなっているところは「アクティビティ図」なのでちょっと違います。

するとしたのようなメニューが出てくるのでこれらを選択して画面に追加していきます。

最終的には(現時点で)以下のような図ができました。

細かい部分は、アクターなどのダイヤグラムを選択した時に右下にプロパティを設定する部分が表示されるので、これらに値を入れます。

こんな感じで作成していけると思います。

でわでわ。。。

UMLツール〜Star UMLを使う〜

イントロダクション

突然ですが、自分はMacのノートパソコンを使用しています。
なので、WindowsでのUMLツールが使えません。というかWindowsはデスクトップなので持ち歩きができない。。。が故にMacをメインに使用しています。
何が言いたいかというとMacでのUMLツールはWindowsと違うということが言いたかったのです。

UMLツール

WindowsでのUMLツールは有名なものが沢山ありますが、Macはイマイチ(だと思っているだけかも？)ですが、Start UMLというのを見つけたのでそれを使用しています。(使用し始めました)。

設計図

ここ数日Java Mid Basicという記事を記載しています。そして「コンソールゲームを作成しながらJavaの基本を理解しよう」をコンセプトにしているので、ゲームを作成しながらになります。
そして、ついに頭の中だけではまとまりきらなくなってきたのでUMLを使用して設計しつつ基本をやりつつ。。。となった次第です。

インストール

MacなのでAppStoreから「start uml」で検索すれば一発です。インストール後に使い方など、すべて英語なので一苦労です。「じゃ他のを使えば？」と声が聞こえてきそうですが、UMLのユースケース図、クラス図、アクティビティ図などいろんな種類を作成するのに探してみるとこのツールが一番無難だったので使用しています。、、

クラス図を作る

UMLの書き方に関してはこちらを参照してきただきたいのですが、今回はStart UMLでの書き方に注目して記載します。
まずは初期表示画面です。バージョン情報なども表示しました。(ヘルプから表示できます)

この画面で、兎にも角にもクラス図を作成します。

左のツールボックス(Tool Box)のすぐ下に「Class」とあるのでそれをクリックして作成します。
「Class」と青い色がついている部分にクラス名を入力してクラスを作成します。

画面の両端に上のような領域があります、ここで細かい部分を確認、使用することができるようです。
現在の画面は下のようになっています。

単純にクラスが１つあるだけになっています。
ここに、必要なフィールドを追加します。一応、現在作成しようとしているのは「テキストRPGのプログラム設計」です。
最終的にどのような形にするか？を考えるための設計です。
正直のところは、どのような設計にするか考えていないので設計はできない状態ですが、その前にStar UMLの使い方を理解する必要があるので。。。
作成したクラスを右クリックします。

「Attrubute」を選択すると、フィールド(メンバ変数)を定義できるようです。

同様に「Operation」でメソッドを定義。

画面の右下にある「Properties」の部分でステレオタイプを入力できます。

ループ処理

そして、シーケンス図でのループ処理は「Combined Fragment」を使用して作成できます。

細かい部分は今後記載していきます。
でわでわ。。。