サンプルコード - 覚え書き.com

前回の記事
「🧠Pythonで学ぶ画像認識入門：TensorFlowとKerasで手書き数字を判定する方法(1) ～環境構築編～」

では、

「Python公式版＋仮想環境を使ったTensorFlow開発環境構築」
を行い、AI開発の準備が整いました。

今回はその続編として、
実際にTensorFlowとKerasを使って手書き数字を判定するAIモデルを作る実践編 を解説します。
データの読み込みからモデルの学習・評価・予測までを、
最小限のシンプルなコードで体験してみましょう。

🧩 動作環境（前回と同じ構成）





	項目 バージョン・設定内容




	OS Windows 11 Pro（64bit）


	Python 3.13.7（公式版インストーラ）


	pip 25.2


	仮想環境 venv（C:\python_env\env）


	TensorFlow 2.20.0


	matplotlib 3.10.6

項目	バージョン・設定内容
OS	Windows 11 Pro（64bit）
Python	3.13.7（公式版インストーラ）
pip	25.2
仮想環境	venv（C:\python_env\env）
TensorFlow	2.20.0
matplotlib	3.10.6

🧠 ステップ①：MNISTデータセットを読み込む

TensorFlowには「手書き数字データ（MNIST）」が標準で付属しています👇

from tensorflow.keras.datasets import mnist
import matplotlib.pyplot as plt

# データ読み込み（訓練用6万枚、テスト用1万枚）
(x_train, y_train), (x_test, y_test) = mnist.load_data()

# 画像を確認
plt.imshow(x_train[0], cmap='gray')
plt.title(f"Label: {y_train[0]}")
plt.show()

from tensorflow.keras.datasets import mnist

import matplotlib.pyplot as plt

# データ読み込み（訓練用6万枚、テスト用1万枚）

(x_train, y_train), (x_test, y_test) = mnist.load_data()

# 画像を確認

plt.imshow(x_train[0], cmap='gray')

plt.title(f"Label: {y_train[0]}")

plt.show()

🧩 ステップ②：データの前処理

🧩 ステップ③：モデル構築（Keras Sequential）

from tensorflow.keras.models import Sequential
from tensorflow.keras.layers import Dense, Flatten

model = Sequential([
    Flatten(input_shape=(28, 28)),  # 28x28ピクセル → 1次元ベクトル
    Dense(128, activation='relu'),  # 隠れ層
    Dense(10, activation='softmax') # 出力層（0〜9）
])

model.compile(optimizer='adam',
              loss='sparse_categorical_crossentropy',
              metrics=['accuracy'])

from tensorflow.keras.models import Sequential

from tensorflow.keras.layers import Dense, Flatten

model = Sequential([

Flatten(input_shape=(28, 28)), # 28x28ピクセル → 1次元ベクトル

Dense(128, activation='relu'), # 隠れ層

Dense(10, activation='softmax') # 出力層（0〜9）

])

model.compile(optimizer='adam',

loss='sparse_categorical_crossentropy',

metrics=['accuracy'])

🧩 ステップ④：学習を実行

🧩 ステップ⑤：テストデータで評価

🧩 ステップ⑥：実際に予測してみる

import numpy as np

predictions = model.predict(x_test)
index = 0

plt.imshow(x_test[index], cmap='gray')
plt.title(f"予測結果: {np.argmax(predictions[index])}")
plt.show()

import numpy as np

predictions = model.predict(x_test)

index = 0

plt.imshow(x_test[index], cmap='gray')

plt.title(f"予測結果: {np.argmax(predictions[index])}")

plt.show()

AIが画像を認識して、数字を正しく判定してくれます👀✨

ステップ①～⑥のコードについて

各ステップは、順番に実行される処理の流れを分けて説明しているだけで、
実際のプログラムとしては 連続して動く1つのコード になります。

つまり、実際に実行する場合は次のようにすべてまとめて書いて問題ありません👇

✅ 例：`mnist_sample.py` として保存する内容

# =========================================
# Pythonで学ぶ画像認識入門
# TensorFlow + Keras 実践サンプル（MNIST判定）
# 文字化け対策版
# =========================================

import numpy as np
import matplotlib.pyplot as plt
from tensorflow.keras.datasets import mnist
from tensorflow.keras.models import Sequential
from tensorflow.keras.layers import Dense, Flatten

# ---------- 日本語フォント設定 ----------
plt.rcParams['font.family'] = ['Meiryo', 'Yu Gothic', 'MS Gothic']  # Windows向け
plt.rcParams['axes.unicode_minus'] = False  # マイナス記号の文字化け防止

# ---------- データ読み込み ----------
(x_train, y_train), (x_test, y_test) = mnist.load_data()

# ---------- 前処理 ----------
x_train = x_train / 255.0
x_test = x_test / 255.0

# ---------- モデル構築 ----------
model = Sequential([
    Flatten(input_shape=(28, 28)),      # 画像を1次元に変換
    Dense(128, activation='relu'),      # 中間層
    Dense(10, activation='softmax')     # 出力層（0～9）
])

# ---------- モデルのコンパイル ----------
model.compile(optimizer='adam',
              loss='sparse_categorical_crossentropy',
              metrics=['accuracy'])

# ---------- 学習 ----------
print("🔹 モデル学習開始中...")
model.fit(x_train, y_train, epochs=5)

# ---------- 評価 ----------
print("\n🔹 テストデータで評価中...")
test_loss, test_acc = model.evaluate(x_test, y_test)
print(f"✅ Test accuracy: {test_acc:.4f}")

# ---------- 予測 ----------
predictions = model.predict(x_test)
index = 0
predicted_label = np.argmax(predictions[index])

# ---------- 結果表示 ----------
plt.imshow(x_test[index], cmap='gray')
plt.title(f"予測結果: {predicted_label}")
plt.show()

# =========================================

# Pythonで学ぶ画像認識入門

# TensorFlow + Keras 実践サンプル（MNIST判定）

# 文字化け対策版

# =========================================

import numpy as np

import matplotlib.pyplot as plt

from tensorflow.keras.datasets import mnist

from tensorflow.keras.models import Sequential

from tensorflow.keras.layers import Dense, Flatten

# ---------- 日本語フォント設定 ----------

plt.rcParams['font.family'] = ['Meiryo', 'Yu Gothic', 'MS Gothic'] # Windows向け

plt.rcParams['axes.unicode_minus'] = False # マイナス記号の文字化け防止

# ---------- データ読み込み ----------

(x_train, y_train), (x_test, y_test) = mnist.load_data()

# ---------- 前処理 ----------

x_train = x_train / 255.0

x_test = x_test / 255.0

# ---------- モデル構築 ----------

model = Sequential([

Flatten(input_shape=(28, 28)), # 画像を1次元に変換

Dense(128, activation='relu'), # 中間層

Dense(10, activation='softmax') # 出力層（0～9）

])

# ---------- モデルのコンパイル ----------

model.compile(optimizer='adam',

loss='sparse_categorical_crossentropy',

metrics=['accuracy'])

# ---------- 学習 ----------

print("🔹 モデル学習開始中...")

model.fit(x_train, y_train, epochs=5)

# ---------- 評価 ----------

print("\n🔹 テストデータで評価中...")

test_loss, test_acc = model.evaluate(x_test, y_test)

print(f"✅ Test accuracy: {test_acc:.4f}")

# ---------- 予測 ----------

predictions = model.predict(x_test)

index = 0

predicted_label = np.argmax(predictions[index])

# ---------- 結果表示 ----------

plt.imshow(x_test[index], cmap='gray')

plt.title(f"予測結果: {predicted_label}")

plt.show()

💾 保存と実行

C:\python_env などに上記を mnist_sample.py として保存
仮想環境を有効化：

MS DOS

cd C:\python_env env\Scripts\activate

1

cd C:\python_env env\Scripts\activate
実行：

MS DOS

python mnist_sample.py

1

python mnist_sample.py
実行例

📊 補足：精度向上のヒント

CNN（畳み込みニューラルネットワーク） を導入する
Dropout で過学習を防止
エポック数や学習率 の調整

これらを追加すると、より実践的なモデルになります。

🚀 まとめ

本記事では、
TensorFlowとKerasを用いて「手書き数字判定AI」を実装しました。

これで、

データの前処理
モデル構築
学習・評価・予測
というAIの基本的な流れを一通り理解できたはずです。

次回

「🧠 Pythonで学ぶ画像認識入門：TensorFlowとKerasで手書き数字を判定する方法(3) ～CNNによる高精度モデル編～」

は、CNNを用いた高精度モデル化（第3回） に挑戦します🔥

「ホームページをかっこよく見せたい」「シンプルに3D演出を加えてみたい」──そんなときに役立つのが Three.js です。
JavaScriptだけで3Dオブジェクトを動かせる便利なライブラリで、近年のWebサイトでも多く使われています。

この記事では 最新版 Three.js (r180) を使って、実際に「回転する立方体」を表示するサンプルを紹介します。

1. Three.jsとは？

Three.js は WebGL をラップしたライブラリで、難しい低レベルコードを書かなくても以下のような処理が可能です。

3Dオブジェクトの作成（立方体・球体・モデルの読み込み）
カメラの制御
ライトの設置
マテリアルやシェーダーの設定
アニメーション処理

2. サンプルコード（最新版 Three.js r180 対応）

以下は 最小構成のサンプル です。
HTMLファイルを作成して保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Three.js r180 Sample</title>
  <style>
    body { margin:0; }
    canvas { display:block; }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js";

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
    camera.position.z = 5;

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    const cube = new THREE.Mesh(
      new THREE.BoxGeometry(),
      new THREE.MeshBasicMaterial({ color: 0x00aaff })
    );
    scene.add(cube);

    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();

    addEventListener("resize", () => {
      renderer.setSize(innerWidth, innerHeight);
      camera.aspect = innerWidth / innerHeight;
      camera.updateProjectionMatrix();
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Three.js r180 Sample</title>

<style>

body { margin:0; }

canvas { display:block; }

</style>

</head>

<body>

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);

camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();

renderer.setSize(innerWidth, innerHeight);

document.body.appendChild(renderer.domElement);

const cube = new THREE.Mesh(

new THREE.BoxGeometry(),

new THREE.MeshBasicMaterial({ color: 0x00aaff })

);

scene.add(cube);

function animate() {

requestAnimationFrame(animate);

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render(scene, camera);

}

animate();

addEventListener("resize", () => {

renderer.setSize(innerWidth, innerHeight);

camera.aspect = innerWidth / innerHeight;

camera.updateProjectionMatrix();

});

</script>

</body>

</html>

3. デモ（実際に動くサンプル）

このブログ記事では、外部ファイルとして用意したサンプルhtmlを iframe で埋め込んで表示してます。

デモ1：基本の回転する立方体

👇 実際に回転する立方体が表示されます。

デモ2：ライトを使った立方体

光源を加えることで、立方体に陰影がつき、立体感が増します。

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5).normalize();
scene.add(light);

const light = new THREE.DirectionalLight(0xffffff, 1);

light.position.set(5, 5, 5).normalize();

scene.add(light);

デモ3：マテリアル変更

単色ではなく、ワイヤーフレームや透過マテリアルを適用できます。

const material = new THREE.MeshNormalMaterial({ wireframe: true });

1	const material = new THREE.MeshNormalMaterial({ wireframe: true });

デモ4：カメラ操作

OrbitControlsを使うと、マウスで回転・拡大縮小できるインタラクティブなデモが可能です。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);

1 2	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; const controls = new OrbitControls(camera, renderer.domElement);

4. ローカルで動かすには？

上記のコードをコピーして test.html などの名前で保存 → ブラウザで開いても、真っ白になる場合があります。
これは ES Modules を使う Three.js の最新版では、file:/// での読み込みがセキュリティ上ブロックされるためです。

✅ 解決方法

ローカルで動かすには 簡易Webサーバ を立ち上げる必要があります。

例:

Python がある場合
python -m http.server 8000
Node.js がある場合
npx http-server -p 8000

その後、ブラウザで
http://localhost:8000/test.html
を開くと正しく表示されます。

5. まとめ

Three.jsを使えば簡単に3D演出を加えられる
最新版 (r180) は ES Modules形式 → file:/// では動作しない
実際の環境では Webサーバ経由で実行する必要がある
WordPress記事に埋め込む場合は iframe で外部HTMLを呼び出すのが安全

これをベースに、さらにライト・カメラ操作・外部モデル読み込みを試していけば、よりリッチな演出を作れます！

覚え書き.com

「サンプルコード」タグアーカイブ

🧠 Pythonで学ぶ画像認識入門：TensorFlowとKerasで手書き数字を判定する方法(2) ～実践サンプルコード編～

🧩 動作環境（前回と同じ構成）

🧠 ステップ①：MNISTデータセットを読み込む

🧩 ステップ②：データの前処理

🧩 ステップ③：モデル構築（Keras Sequential）

🧩 ステップ④：学習を実行

🧩 ステップ⑤：テストデータで評価

🧩 ステップ⑥：実際に予測してみる

ステップ①～⑥のコードについて

✅ 例：`mnist_sample.py` として保存する内容

💾 保存と実行

📊 補足：精度向上のヒント

🚀 まとめ

Three.jsで簡単3D演出！初心者でもホームページをかっこよくする方法

1. Three.jsとは？

2. サンプルコード（最新版 Three.js r180 対応）

3. デモ（実際に動くサンプル）

デモ1：基本の回転する立方体

デモ2：ライトを使った立方体

デモ3：マテリアル変更

デモ4：カメラ操作

4. ローカルで動かすには？

✅ 解決方法

5. まとめ

「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。

🧩 動作環境（前回と同じ構成）

🧠 ステップ①：MNISTデータセットを読み込む

🧩 ステップ②：データの前処理

🧩 ステップ③：モデル構築（Keras Sequential）

🧩 ステップ④：学習を実行

🧩 ステップ⑤：テストデータで評価

🧩 ステップ⑥：実際に予測してみる

ステップ①～⑥のコードについて

✅ 例：mnist_sample.py として保存する内容

💾 保存と実行

📊 補足：精度向上のヒント

🚀 まとめ

関連記事

1. Three.jsとは？

2. サンプルコード（最新版 Three.js r180 対応）

3. デモ（実際に動くサンプル）

デモ1：基本の回転する立方体

デモ2：ライトを使った立方体

デモ3：マテリアル変更

デモ4：カメラ操作

4. ローカルで動かすには？

✅ 解決方法

5. まとめ

関連記事

「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。

✅ 例：`mnist_sample.py` として保存する内容

　関連記事

　関連記事