電卓アプリを作る¶


難易度	入門	時間	30 分～

1. 背景色を設定する¶

Scene::SetBackground(色); を使って背景色を設定します。

コード

# include <Siv3D.hpp>

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	while (System::Update())
	{

	}
}

2. ボタンの情報を用意する¶

ボタンの領域を表す Rect と、ボタンに書かれるテキストを表す String を持つクラス Button を作成します。
「1」ボタンの情報を Button クラスの変数 button の初期値として設定します。

コード

# include <Siv3D.hpp>

/// @brief ボタンクラス
struct Button
{
	/// @brief ボタンの長方形
	Rect rect;

	/// @brief ボタンのテキスト
	String text;
};

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// ボタンの情報
	Button button{ Rect{ 100, 200, 90, 90 }, U"1" };

	while (System::Update())
	{

	}
}

3. ボタンの背景を描く¶

Button クラスのメンバ変数 .rect にアクセスし、ボタンの背景を描画します。

コード

# include <Siv3D.hpp>

/// @brief ボタンクラス
struct Button
{
	/// @brief ボタンの長方形
	Rect rect;

	/// @brief ボタンのテキスト
	String text;
};

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// ボタンの情報
	Button button{ Rect{ 100, 200, 90, 90 }, U"1" };

	while (System::Update())
	{
		// ボタンの背景を描画する
		button.rect.draw();
	}
}

4. ボタンの角を丸くする¶

Rect のメンバ関数 .rounded(角の半径) を使って、ボタンの角を丸くします。

コード

# include <Siv3D.hpp>

/// @brief ボタンクラス
struct Button
{
	/// @brief ボタンの長方形
	Rect rect;

	/// @brief ボタンのテキスト
	String text;
};

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// ボタンの情報
	Button button{ Rect{ 100, 200, 90, 90 }, U"1" };

	while (System::Update())
	{
		// ボタンの背景を描画する
		button.rect.rounded(8).draw();
	}
}

5. ボタンに文字を表示する¶

テキストを表示するための Font を用意します。
Button のメンバ変数 .text にアクセスし、ボタンのテキストを描画します。

新しい機能

font(テキスト).drawAt(フォントサイズ, 位置, 色);` は、指定した位置が中心となるようにテキストを描画します。
Rect の .center() メンバ関数は、長方形の中心の座標を返します。

コード

# include <Siv3D.hpp>

/// @brief ボタンクラス
struct Button
{
	/// @brief ボタンの長方形
	Rect rect;

	/// @brief ボタンのテキスト
	String text;
};

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// ボタン用のフォント
	const Font font{ FontMethod::MSDF, 40, Typeface::Bold };

	// ボタンの情報
	Button button{ Rect{ 100, 200, 90, 90 }, U"1" };

	while (System::Update())
	{
		// ボタンの背景を描画する
		button.rect.rounded(8).draw();

		// ボタンのテキストを描画する
		font(button.text).drawAt(32, button.rect.center(), ColorF{ 0.1 });
	}
}

6. ボタンの上でマウスカーソルを手の形にする¶

Rect のメンバ関数 .mouseOver() で、マウスカーソルがボタンの上にあるかを判定します。
Cursor::RequestStyle(CursorStyle::Hand); で、現在のマウスカーソルのスタイルを手の形に変更します。

コード

# include <Siv3D.hpp>

/// @brief ボタンクラス
struct Button
{
	/// @brief ボタンの長方形
	Rect rect;

	/// @brief ボタンのテキスト
	String text;
};

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// ボタン用のフォント
	const Font font{ FontMethod::MSDF, 40, Typeface::Bold };

	// ボタンの情報
	Button button{ Rect{ 100, 200, 90, 90 }, U"1" };

	while (System::Update())
	{
		// ボタンの背景を描画する
		button.rect.rounded(8).draw();

		// ボタンのテキストを描画する
		font(button.text).drawAt(32, button.rect.center(), ColorF{ 0.1 });

		// マウスがボタンの上にあるとき
		if (button.rect.mouseOver())
		{
			// マウスカーソルを手の形にする
			Cursor::RequestStyle(CursorStyle::Hand);
		}
	}
}

7. ボタンで数式を入力する¶

電卓への入力式を文字列で管理する String 型の変数 expression を用意します。
ボタンがクリックされたときに、ボタンのテキスト「U"1"」を expression に追加します。
Print を使って、入力式の内容を簡易表示します。

コード

# include <Siv3D.hpp>

/// @brief ボタンクラス
struct Button
{
	/// @brief ボタンの長方形
	Rect rect;

	/// @brief ボタンのテキスト
	String text;
};

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// ボタン用のフォント
	const Font font{ FontMethod::MSDF, 40, Typeface::Bold };

	// ボタンの情報
	Button button{ Rect{ 100, 200, 90, 90 }, U"1" };

	// 入力式
	String expression;

	while (System::Update())
	{
		// ボタンの背景を描画する
		button.rect.rounded(8).draw();

		// ボタンのテキストを描画する
		font(button.text).drawAt(32, button.rect.center(), ColorF{ 0.1 });

		// マウスがボタンの上にあるとき
		if (button.rect.mouseOver())
		{
			// マウスカーソルを手の形にする
			Cursor::RequestStyle(CursorStyle::Hand);
		}

		// ボタンがクリックされたとき
		if (button.rect.leftClicked())
		{
			// 数式にボタンのテキストを追加する
			expression += button.text;
		}

		ClearPrint();
		Print << expression; // 数式を簡易表示する
	}
}

8. ボタンを増やす¶

配列 Array<Button> を使って、より多くのボタンを管理します。
for (const auto& button : buttons) { } 内に、各ボタンに対する処理を記述します。
ボタンがクリックされた場合は、そのボタンのテキストに応じて、入力式 expression を更新します。

コード

# include <Siv3D.hpp>

/// @brief ボタンクラス
struct Button
{
	/// @brief ボタンの長方形
	Rect rect;

	/// @brief ボタンのテキスト
	String text;
};

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// ボタン用のフォント
	const Font font{ FontMethod::MSDF, 40, Typeface::Bold };

	// ボタンの情報の配列
	Array<Button> buttons;
	buttons << Button{ Rect{ 100, 200, 90, 90 }, U"1" };
	buttons << Button{ Rect{ 200, 200, 90, 90 }, U"2" };
	buttons << Button{ Rect{ 300, 200, 90, 90 }, U"3" };
	buttons << Button{ Rect{ 400, 200, 90, 90 }, U"+" };
	buttons << Button{ Rect{ 400, 300, 90, 90 }, U"=" };
	buttons << Button{ Rect{ 400, 400, 90, 90 }, U"C" };

	// 入力式
	String expression;

	while (System::Update())
	{
		// 各ボタンについて
		for (const auto& button : buttons)
		{
			// ボタンの背景を描画する
			button.rect.rounded(8).draw(); 

			// ボタンのテキストを描画する
			font(button.text).drawAt(32, button.rect.center(), ColorF{ 0.1 });

			// マウスがボタンの上にあるとき
			if (button.rect.mouseOver())
			{
				// マウスカーソルを手の形にする
				Cursor::RequestStyle(CursorStyle::Hand);
			}

			// ボタンがクリックされたとき
			if (button.rect.leftClicked())
			{
				if (button.text == U"=")
				{
					// ToDo
				}
				else if (button.text == U"+")
				{
					expression += button.text;
				}
				else if (button.text == U"C")
				{
					// 数式を消去する
					expression.clear();
				}
				else
				{
					// 数式にボタンのテキストを追加する
					expression += button.text;
				}
			}
		}

		ClearPrint();
		Print << expression; // 数式を簡易表示する
	}
}

9. 数式の表示エリアを追加する¶

電卓に数式を表示するエリアを追加します。
表示エリアから 10 ピクセル左にずらして、数式を右寄せで表示します。

新しい機能

font(テキスト).draw(フォントサイズ, Arg::rightCenter = 位置, 色); は、指定した位置がテキストの右辺の中心となるよう、右寄せしてテキストを描画します。
Rect の .rightCenter() メンバ関数は、長方形の右辺の中心の座標を返します。

コード

# include <Siv3D.hpp>

/// @brief ボタンクラス
struct Button
{
	/// @brief ボタンの長方形
	Rect rect;

	/// @brief ボタンのテキスト
	String text;
};

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// ボタン用のフォント
	const Font font{ FontMethod::MSDF, 40, Typeface::Bold };

	// 結果表示エリアの色
	const ColorF displayColor{ 0.8, 0.9, 0.8 };

	// 結果表示エリアのテキストの色
	const ColorF displayTextColor{ 0.1 };

	// 結果表示エリアの長方形
	const Rect displayRect{ 100, 100, 390, 90 };

	// ボタンの情報の配列
	Array<Button> buttons;
	buttons << Button{ Rect{ 100, 200, 90, 90 }, U"1" };
	buttons << Button{ Rect{ 200, 200, 90, 90 }, U"2" };
	buttons << Button{ Rect{ 300, 200, 90, 90 }, U"3" };
	buttons << Button{ Rect{ 400, 200, 90, 90 }, U"+" };
	buttons << Button{ Rect{ 400, 300, 90, 90 }, U"=" };
	buttons << Button{ Rect{ 400, 400, 90, 90 }, U"C" };

	// 入力式
	String expression;

	while (System::Update())
	{
		// 各ボタンについて
		for (const auto& button : buttons)
		{
			// ボタンの背景を描画する
			button.rect.rounded(8).draw(); 

			// ボタンのテキストを描画する
			font(button.text).drawAt(32, button.rect.center(), ColorF{ 0.1 });

			// マウスがボタンの上にあるとき
			if (button.rect.mouseOver())
			{
				// マウスカーソルを手の形にする
				Cursor::RequestStyle(CursorStyle::Hand);
			}

			// ボタンがクリックされたとき
			if (button.rect.leftClicked())
			{
				if (button.text == U"=")
				{
					// ToDo
				}
				else if (button.text == U"+")
				{
					expression += button.text;
				}
				else if (button.text == U"C")
				{
					// 数式を消去する
					expression.clear();
				}
				else
				{
					// 数式にボタンのテキストを追加する
					expression += button.text;
				}
			}
		}

		// 結果表示エリアを描画する
		displayRect.draw(displayColor);

		// 結果表示エリアに数式を描画する
		font(expression).draw(36, Arg::rightCenter = (displayRect.rightCenter() + Vec2{ -10, 0 }), displayTextColor);
	}
}

10. 計算処理を追加する¶

「=」ボタンを押したときに入力式を計算して、その結果を新しい入力式とするための関数 PushEqual を実装します。
「+」ボタンを押したときに入力式に「+」を追加するための関数 PushPlus を実装します。

新しい機能

!（ノット）は bool 型の値を反転します。
String 型の変数の .isEmpty() メンバ関数は、文字列が空かどうかを判定します。
String 型の変数の .back() メンバ関数は、文字列の末尾の文字を返します。空の場合はエラーになります。
IsDigit(char32 ch) 関数は、引数の文字 ch が数字であるかを判定します。
Eval(String expression) 関数は、数式 expression を評価した結果を double 型で返します。数式が不正な場合は NaN を返します。
- NaN であるかは IsNaN(double x) 関数で判定できます。
Format(double x) 関数は、double 型の値 x を String に変換して返します。

コード

# include <Siv3D.hpp>

/// @brief ボタンクラス
struct Button
{
	/// @brief ボタンの長方形
	Rect rect;

	/// @brief ボタンのテキスト
	String text;
};

/// @brief 数式が数字で終わるかを返します。
/// @param expression 数式
/// @return 数字で終わる場合 true, それ以外の場合 false
bool EndsWithDigit(String expression)
{
	if (expression.isEmpty())
	{
		return false;
	}

	return IsDigit(expression.back());
}

/// @brief = ボタンが押されたときの処理を行います。
/// @param expression 現在の数式
/// @return 新しい数式
String PushEqual(String expression)
{
	// 数字で終わっていない場合は何もしない
	if (!EndsWithDigit(expression))
	{
		return expression;
	}

	// 数式パーサで数式を評価する
	double result = Eval(expression);

	// 評価結果を文字列に変換して返す
	return Format(result);
}

/// @brief + ボタンが押されたときの処理を行います。
/// @param expression 現在の数式
/// @return 新しい数式
String PushPlus(String expression)
{
	// 数字で終わっていない場合は何もしない
	if (!EndsWithDigit(expression))
	{
		return expression;
	}

	// 数式の末尾に + を追加して返す
	return (expression + U"+");
}

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// ボタン用のフォント
	const Font font{ FontMethod::MSDF, 40, Typeface::Bold };

	// 結果表示エリアの色
	const ColorF displayColor{ 0.8, 0.9, 0.8 };

	// 結果表示エリアのテキストの色
	const ColorF displayTextColor{ 0.1 };

	// 結果表示エリアの長方形
	const Rect displayRect{ 100, 100, 390, 90 };

	// ボタンの情報の配列
	Array<Button> buttons;
	buttons << Button{ Rect{ 100, 200, 90, 90 }, U"1" };
	buttons << Button{ Rect{ 200, 200, 90, 90 }, U"2" };
	buttons << Button{ Rect{ 300, 200, 90, 90 }, U"3" };
	buttons << Button{ Rect{ 400, 200, 90, 90 }, U"+" };
	buttons << Button{ Rect{ 400, 300, 90, 90 }, U"=" };
	buttons << Button{ Rect{ 400, 400, 90, 90 }, U"C" };

	// 入力式
	String expression;

	while (System::Update())
	{
		// 各ボタンについて
		for (const auto& button : buttons)
		{
			// ボタンの背景を描画する
			button.rect.rounded(8).draw(); 

			// ボタンのテキストを描画する
			font(button.text).drawAt(32, button.rect.center(), ColorF{ 0.1 });

			// マウスがボタンの上にあるとき
			if (button.rect.mouseOver())
			{
				// マウスカーソルを手の形にする
				Cursor::RequestStyle(CursorStyle::Hand);
			}

			// ボタンがクリックされたとき
			if (button.rect.leftClicked())
			{
				if (button.text == U"=")
				{
					expression = PushEqual(expression);
				}
				else if (button.text == U"+")
				{
					expression = PushPlus(expression);
				}
				else if (button.text == U"C")
				{
					// 数式を消去する
					expression.clear();
				}
				else
				{
					// 数式にボタンのテキストを追加する
					expression += button.text;
				}
			}
		}

		// 結果表示エリアを描画する
		displayRect.draw(displayColor);

		// 結果表示エリアに数式を描画する
		font(expression).draw(36, Arg::rightCenter = (displayRect.rightCenter() + Vec2{ -10, 0 }), displayTextColor);
	}
}

11. ボタンのスタイルをカスタマイズする¶

Button クラスに、ボタンの背景色とテキストの色を表す ColorF 型のメンバ変数を追加します。

コード

# include <Siv3D.hpp>

/// @brief ボタンクラス
struct Button
{
	/// @brief ボタンの長方形
	Rect rect;

	/// @brief ボタンのテキスト
	String text;

	/// @brief ボタンの色
	ColorF backgroundColor;

	/// @brief テキストの色
	ColorF textColor;
};

/// @brief 数式が数字で終わるかを返します。
/// @param expression 数式
/// @return 数字で終わる場合 true, それ以外の場合 false
bool EndsWithDigit(String expression)
{
	if (expression.isEmpty())
	{
		return false;
	}

	return IsDigit(expression.back());
}

/// @brief = ボタンが押されたときの処理を行います。
/// @param expression 現在の数式
/// @return 新しい数式
String PushEqual(String expression)
{
	// 数字で終わっていない場合は何もしない
	if (!EndsWithDigit(expression))
	{
		return expression;
	}

	// 数式パーサで数式を評価する
	double result = Eval(expression);

	// 評価結果を文字列に変換して返す
	return Format(result);
}

/// @brief + ボタンが押されたときの処理を行います。
/// @param expression 現在の数式
/// @return 新しい数式
String PushPlus(String expression)
{
	// 数字で終わっていない場合は何もしない
	if (!EndsWithDigit(expression))
	{
		return expression;
	}

	// 数式の末尾に + を追加して返す
	return (expression + U"+");
}

void Main()
{
	// 背景の色を設定する
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// ボタン用のフォント
	const Font font{ FontMethod::MSDF, 40, Typeface::Bold };

	// 数字ボタンの色
	const ColorF numberButtonColor{ 0.9, 0.95, 1.0 };

	// クリアボタンの色
	const ColorF clearButtonColor{ 1.0, 0.8, 0.8 };

	// ボタンのテキストの色
	const ColorF buttonTextColor{ 0.1 };

	// 結果表示エリアの色
	const ColorF displayColor{ 0.8, 0.9, 0.8 };

	// 結果表示エリアのテキストの色
	const ColorF displayTextColor{ 0.1 };

	// 結果表示エリアの長方形
	const Rect displayRect{ 100, 100, 390, 90 };

	// ボタンの情報の配列
	Array<Button> buttons;
	buttons << Button{ Rect{ 100, 200, 90, 90 }, U"1", numberButtonColor, buttonTextColor };
	buttons << Button{ Rect{ 200, 200, 90, 90 }, U"2", numberButtonColor, buttonTextColor };
	buttons << Button{ Rect{ 300, 200, 90, 90 }, U"3", numberButtonColor, buttonTextColor };
	buttons << Button{ Rect{ 400, 200, 90, 90 }, U"+", numberButtonColor, buttonTextColor };
	buttons << Button{ Rect{ 400, 300, 90, 90 }, U"=", numberButtonColor, buttonTextColor };
	buttons << Button{ Rect{ 400, 400, 90, 90 }, U"C", clearButtonColor, buttonTextColor };

	// 入力式
	String expression;

	while (System::Update())
	{
		// 各ボタンについて
		for (const auto& button : buttons)
		{
			// ボタンの背景を描画する
			button.rect.rounded(8).draw(button.backgroundColor);

			// ボタンのテキストを描画する
			font(button.text).drawAt(32, button.rect.center(), button.textColor);

			// マウスがボタンの上にあるとき
			if (button.rect.mouseOver())
			{
				// マウスカーソルを手の形にする
				Cursor::RequestStyle(CursorStyle::Hand);
			}

			// ボタンがクリックされたとき
			if (button.rect.leftClicked())
			{
				if (button.text == U"=")
				{
					expression = PushEqual(expression);
				}
				else if (button.text == U"+")
				{
					expression = PushPlus(expression);
				}
				else if (button.text == U"C")
				{
					// 数式を消去する
					expression.clear();
				}
				else
				{
					// 数式にボタンのテキストを追加する
					expression += button.text;
				}
			}
		}

		// 結果表示エリアを描画する
		displayRect.draw(displayColor);

		// 結果表示エリアに数式を描画する
		font(expression).draw(36, Arg::rightCenter = (displayRect.rightCenter() + Vec2{ -10, 0 }), displayTextColor);
	}
}

発展¶

ここから先は、自分で考えてプログラムを改良してみましょう。

機能のアイデア¶

残りの数字を追加する
引き算、掛け算、割り算を追加する
- Eval() は - や *, / にも対応しています。
括弧を入力できるようにする
バックスペース（1 文字削除）ボタンを追加する
- String のメンバ関数 .pop_back() は、文字列の末尾の文字を削除します。文字列が空の場合はエラーになります。
小数を含む数を入力できるようにする
キーボードで数字を入力できるようにする
平方根を計算できるようにする
- Eval() は sqrt(25) のような数式にも対応しています。
以前の計算結果を記録して再利用できるようにする
表示エリアをクリックすると、その数式をクリップボードにコピーする
- Clipboard::SetText(s); は、文字列 s をクリップボードにコピーします。

デザインのアイデア¶

ボタンのサイズや配置をアレンジする
マウスオーバーでボタンの色を変える