「プログラミング」カテゴリーアーカイブ

if文から卒業！Java 8のPredicateで条件分岐をスマートに書く方法

2025年10月20日管理者コメントする

Javaで複雑な条件分岐が増えてくると、if文がネストして読みにくくなる…という悩みを抱えたことはありませんか？
Java 8で追加された**Predicateインターフェース**を使えば、条件式をオブジェクトとして扱えるため、よりスマートで再利用可能な形にできます。

本記事では、Predicateの基本から複数条件の組み合わせ、実用的な活用例まで分かりやすく解説します。

✅ Predicateとは？

Predicate<T> はJava 8で導入された関数型インターフェースで、**「引数を1つ受け取り、booleanを返す関数」**を表します。

test()メソッドに条件式を実装することで、条件判定を行うことができます。

✅ 基本的な使い方

✔ Lambda式で判定条件を定義

ここで、age -> age >= 20 という条件式がPredicateとして表現されています。

✅ 条件を組み合わせる（and/or/negate）

Predicateは以下のような便利なメソッドを持っています。

メソッド	説明	使用例
and()	両方trueでtrue	AND条件
or()	どちらかtrueでtrue	OR条件
negate()	条件を反転	NOT条件

✔ 使用例

Predicate<Integer> isAdult = age -> age >= 20;
Predicate<Integer> isSenior = age -> age >= 65;

Predicate<Integer> isWorkingAdult = isAdult.and(isSenior.negate());

System.out.println(isWorkingAdult.test(30)); // true
System.out.println(isWorkingAdult.test(70)); // false

Predicate<Integer> isAdult = age -> age >= 20;

Predicate<Integer> isSenior = age -> age >= 65;

Predicate<Integer> isWorkingAdult = isAdult.and(isSenior.negate());

System.out.println(isWorkingAdult.test(30)); // true

System.out.println(isWorkingAdult.test(70)); // false

✅ 実用例①：従来のif文から置き換えてスマートに

❌ 従来のif文

✅ Predicateを使った場合

→ 条件式をPredicateとして切り出すことで、再利用しやすくなります。

✅ 実用例②：Listのフィルタリングに活用

stream().filter() と組み合わせるとさらに強力です。

List<Integer> ages = Arrays.asList(15, 22, 38, 67);

Predicate<Integer> isAdult = age -> age >= 20;

List<Integer> filtered = ages.stream()
                             .filter(isAdult)
                             .toList();

System.out.println(filtered); // [22, 38]

List<Integer> ages = Arrays.asList(15, 22, 38, 67);

Predicate<Integer> isAdult = age -> age >= 20;

List<Integer> filtered = ages.stream()

.filter(isAdult)

.toList();

System.out.println(filtered); // [22, 38]

→ 条件式が外部に切り出されることで、読みやすく拡張しやすいコードになります。

🎯 Predicateを使うメリット

項目	従来のif文	Predicate
可読性	ネストしやすい	条件名で意図が明確
再利用性	条件をコピペ	使い回し可能
拡張性	if追加が必要	and/orで柔軟に拡張

⚠ 濫用しすぎには注意！

Predicateは便利ですが、小規模な処理に無理に使うと逆に複雑化することがあります。
「条件が複数箇所で使い回せる場合」や「複雑なAND/OR条件を定義したい場合」に効果を発揮します。

✅ まとめ

項目	内容
Predicateとは	booleanを返す関数型インターフェース
基本	test() で条件判定
条件組み合わせ	and/or/negateでスマートに
実用例	if文の代替・Streamのfilterで活躍
メリット	可読性・再利用性UP

👉 if文が増えて可読性が下がってきたと感じたら、まずは小さな条件式からPredicate化してみましょう！

Java, ブログ, プログラミング

Java：Stream APIのparallelStream()で並列処理を簡単に実現する方法

2025年10月17日管理者コメントする

🔷 はじめに

JavaのStream APIは、コレクション操作を簡潔に記述できる便利な仕組みですが、
parallelStream()を使うことで マルチスレッド処理（並列処理） を手軽に実現できます。

この記事では、parallelStream()の基本的な使い方から、注意点・パフォーマンスの最適化方法までをわかりやすく解説します。

🔷 StreamとparallelStreamの違い

種類	説明	特徴
stream()	通常の逐次処理	1スレッドで順次実行される
parallelStream()	並列処理	ForkJoinPoolを使って複数スレッドで分割実行される

List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);

// 通常のストリーム
numbers.stream()
       .forEach(System.out::println);

// 並列ストリーム
numbers.parallelStream()
       .forEach(System.out::println);

List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);

// 通常のストリーム

numbers.stream()

.forEach(System.out::println);

// 並列ストリーム

numbers.parallelStream()

.forEach(System.out::println);

上記のparallelStream()では、スレッドごとに要素を分割して処理するため、
出力順が異なる（順不同になる）点に注意が必要です。

🔷 並列処理の仕組み（ForkJoinPool）

parallelStream()は内部的に ForkJoinPool（フォーク・ジョイン・プール）を使用します。
デフォルトでは、Runtime.getRuntime().availableProcessors() の値（CPUコア数）に応じてスレッド数が自動決定されます。

例えば、4コアCPUの場合は最大4スレッドで同時実行されます。

🔷 実行例：リストの重い処理を並列化する

以下の例では、重い計算を伴う処理を並列実行して速度を比較します。

import java.util.*;
import java.util.stream.*;

public class ParallelExample {
    public static void main(String[] args) {
        List<Integer> numbers = IntStream.rangeClosed(1, 10).boxed().toList();

        long startSequential = System.currentTimeMillis();
        numbers.stream().forEach(ParallelExample::heavyTask);
        long timeSequential = System.currentTimeMillis() - startSequential;

        long startParallel = System.currentTimeMillis();
        numbers.parallelStream().forEach(ParallelExample::heavyTask);
        long timeParallel = System.currentTimeMillis() - startParallel;

        System.out.println("逐次処理時間：" + timeSequential + "ms");
        System.out.println("並列処理時間：" + timeParallel + "ms");
    }

    private static void heavyTask(int n) {
        try { Thread.sleep(500); } catch (InterruptedException e) {}
        System.out.println("完了：" + n + " [" + Thread.currentThread().getName() + "]");
    }
}

import java.util.*;

import java.util.stream.*;

public class ParallelExample {

public static void main(String[] args) {

List<Integer> numbers = IntStream.rangeClosed(1, 10).boxed().toList();

long startSequential = System.currentTimeMillis();

numbers.stream().forEach(ParallelExample::heavyTask);

long timeSequential = System.currentTimeMillis() - startSequential;

long startParallel = System.currentTimeMillis();

numbers.parallelStream().forEach(ParallelExample::heavyTask);

long timeParallel = System.currentTimeMillis() - startParallel;

System.out.println("逐次処理時間：" + timeSequential + "ms");

System.out.println("並列処理時間：" + timeParallel + "ms");

}

private static void heavyTask(int n) {

try { Thread.sleep(500); } catch (InterruptedException e) {}

System.out.println("完了：" + n + " [" + Thread.currentThread().getName() + "]");

}

結果例：

CPUコア数にもよりますが、並列処理では約3倍の高速化が期待できます。

🔷 並列処理時の注意点

注意点	内容
スレッド安全性	共有リソースを操作すると競合が発生する可能性あり
出力順	forEach()は順序が保証されない（順序を保つにはforEachOrdered()を使用）
外部API呼び出し	同時実行でAPI制限に抵触する可能性があるため注意

🔷 並列処理の最適化テクニック

処理が軽い場合は使わない
- 並列化のオーバーヘッドが大きく、逆に遅くなる場合があります。
データ量が多い処理に限定する
- 数千件以上の要素を扱う場合に効果的。
カスタムスレッド数を指定

Java

numbers.parallelStream() .forEachOrdered(System.out::println); // 並列でも順序維持

1
2

numbers.parallelStream()
.forEachOrdered(System.out::println); // 並列でも順序維持
- これで並列スレッド数を8に固定できます。

🔷 parallelStream()を使うべきケース

✅ CPUバウンド処理（計算中心）
✅ データが多い場合
✅ スレッド安全な処理のみを行う場合

❌ I/Oバウンド処理（ファイル操作・DBアクセス）は非推奨です。
並列化よりも非同期I/O（CompletableFutureなど）を使うほうが効率的です。

🔷 まとめ

項目	内容
メリット	複雑なスレッド処理を書かずに並列化できる
デメリット	順序保証がない・スレッド安全性に注意
向いている処理	CPU負荷の高いループ・数値計算・マッピング処理
非推奨の処理	I/O、同期が必要な共有データ操作

parallelStream()は数行で並列化を実現できる強力なツールですが、
適切な場面で使うことが重要です。
CPUをフル活用して処理時間を短縮したい場面で、ぜひ活用してみてください。

Java, ブログ, プログラミング

Java Stream API入門：リスト操作を効率化する実用サンプル集

2025年10月13日管理者コメントする

■ 導入：Stream APIでコードを劇的に簡潔化

Java 8以降で導入された Stream API は、リストや配列の操作を「宣言的」「関数型スタイル」で記述できる強力な仕組みです。
従来の for ループを使った処理に比べて、コード量を大幅に削減し、バグを防止 できます。

本記事では、List 操作を中心に、Stream APIの実践サンプルを多数紹介します。

■ 基本構文：Streamの流れを理解する

Streamの基本構成は以下の3ステップです。

イメージ：

■ サンプル①：条件でフィルタリングする

例えば「偶数だけを抽出する」処理は、以下のように書けます。

処理内容	コード例	説明
偶数のみ抽出	filter(n -> n % 2 == 0)	条件に一致する要素だけを残す

■ サンプル②：要素を変換する（map）

全ての要素を2倍にする変換も簡単です。

処理内容	コード例	出力例
2倍変換	map(n -> n * 2)	[2, 4, 6, 8]

■ サンプル③：ソート・並び替え

文字列リストをアルファベット順にソートする例です。

降順にする場合は：

処理内容	メソッド	説明
昇順ソート	sorted()	自然順序（A→Z, 1→9）
降順ソート	sorted(Comparator.reverseOrder())	逆順に並び替え

■ サンプル④：重複を除去する（distinct）

処理内容	メソッド	効果
重複削除	distinct()	同一要素を1つにまとめる

■ サンプル⑤：合計・平均・最大値を求める

数値リストの集計処理も簡単です。

処理	メソッド	結果型
合計	sum()	int
平均	average()	OptionalDouble
最大	max()	OptionalInt

■ サンプル⑥：複数条件の処理（filter + map）

処理順序	内容
①	Aで始まる要素のみ抽出
②	すべて大文字に変換
③	新しいリストに収集

■ サンプル⑦：グルーピング（groupingBy）

Stream APIでは、SQLのように「グループ化」も可能です。

処理内容	メソッド	結果
長さごとにグループ化	groupingBy(String::length)	{3=[Tom, Ken], 4=[John]}

■ サンプル⑧：並列処理で高速化（parallelStream）

大量データを高速処理したい場合は parallelStream() を使います。

ただし、順序が保証されない ため、結果の順序が重要な場合は通常の stream() を使用しましょう。

■ Stream APIを使うメリットまとめ

メリット	内容
コードの簡潔化	for文やif文のネストを削減
可読性向上	処理の流れが直感的に理解できる
パフォーマンス	並列処理で大量データにも対応
安全性	NullPointerExceptionを防ぎやすい

■ まとめ：Stream APIを使いこなして効率化

Stream APIは一度慣れてしまえば、リスト処理を格段に楽にしてくれます。
特にJava 11以降では、ラムダ式やメソッド参照との相性も良く、業務アプリのコード品質を底上げできます。

Java, ブログ, プログラミング

Java初心者必見！Optionalでnullチェックを安全に行う方法【サンプル付き】

2025年10月11日管理者コメントする

Javaで避けて通れないのが「nullチェック」。
しかし、if文を多用するとコードが読みにくくなり、思わぬNullPointerExceptionが発生することもあります。
そんな悩みを解消してくれるのが Optionalクラス です。

本記事では、Optionalを使った安全でスマートなnullチェックの方法を、サンプルコード付きで分かりやすく解説します。

💡 Optionalとは？

Optionalは、Java 8で追加されたクラスで、
「nullの代わりに値の有無を明示的に扱う」ためのラッパーです。

Optionalは「値がある」か「空（empty）」かを明確に区別できるため、
if (obj != null) のような古い書き方を減らせます。

✅ よくあるnullチェックの問題例

この書き方は一見安全ですが、
複数のフィールドをネストすると次のようにネスト地獄に陥ります。

→ これをスマートに書けるのがOptionalです。

🧩 Optionalを使った安全な書き方

これだけで「nullがあれば自動的にスキップ」されます。
つまり、nullチェックをネストせずに安全に値を取り出せるのです。

🔍 Optionalの主なメソッド一覧

メソッド	説明	使用例
of()	null禁止でOptionalを作成	Optional.of("Hello")
ofNullable()	null許可でOptionalを作成	Optional.ofNullable(obj)
isPresent()	値が存在するか判定	if(opt.isPresent())
ifPresent()	値がある場合に処理を実行	opt.ifPresent(System.out::println)
orElse()	値がない場合のデフォルト値を設定	opt.orElse("default")
orElseGet()	遅延生成のデフォルト値	opt.orElseGet(() -> "default")
orElseThrow()	値がない場合に例外を投げる	opt.orElseThrow()

🧠 orElseとorElseGetの違い

比較項目	orElse()	orElseGet()
評価タイミング	常に評価	値が空のときのみ評価
パフォーマンス	無駄な生成が起こる場合あり	必要なときだけ生成
例	opt.orElse(createDefault())	opt.orElseGet(() -> createDefault())

💬 ポイント：
createDefault() のような重い処理を含む場合は、orElseGet()を使う方が効率的です。

🧾 サンプルコード全体

import java.util.Optional;

public class OptionalExample {
    public static void main(String[] args) {
        String name = null;

        // Optionalを使用したnullチェック
        Optional<String> optName = Optional.ofNullable(name);

        // 値があれば大文字に変換して表示
        optName
            .map(String::toUpperCase)
            .ifPresentOrElse(
                System.out::println,
                () -> System.out.println("名前が未設定です。")
            );
    }
}

import java.util.Optional;

public class OptionalExample {

public static void main(String[] args) {

String name = null;

// Optionalを使用したnullチェック

Optional<String> optName = Optional.ofNullable(name);

// 値があれば大文字に変換して表示

optName

.map(String::toUpperCase)

.ifPresentOrElse(

System.out::println,

() -> System.out.println("名前が未設定です。")

);

}

✅ 出力結果：

🚀 Optionalを使うメリットまとめ

メリット	内容
可読性向上	if文のネストを削減できる
安全性向上	NullPointerExceptionのリスクを軽減
関数型スタイル	map, filter, flatMapなどと組み合わせ可能
メソッドチェーン	処理の流れを1行で表現できる

⚠️ 注意点：Optionalは「すべてに使う」ものではない

フィールド変数に使うと逆に可読性が下がる
シリアライズ対象（例：エンティティクラス）には不向き
「戻り値専用」として使うのが基本スタイルです。

🧭 まとめ

Optionalは「nullチェックを明示的に表現する」ための便利な仕組みです。
使い方を覚えることで、より安全で読みやすいJavaコードが書けるようになります。

Python, ブログ, プログラミング

🧠 Pythonで学ぶ画像認識入門：TensorFlowとKerasで手書き数字を判定する方法(5) ～複数の自作画像を一括で認識～

2025年10月11日管理者コメントする

前回

「🧠 Pythonで学ぶ画像認識入門：TensorFlowとKerasで手書き数字を判定する方法(4) ～学習済みモデルで自作画像を認識～」

の記事では、学習済みモデルを使って「1枚の手書き数字画像」を判定しました。
今回はさらに発展して、フォルダ内にある複数の画像を一括で認識してみましょう。

これにより、手書きで作成した「0〜9」の数字画像をまとめてテストできるようになります。

🧩 動作環境（共通）

項目	バージョン / ツール
OS	Windows 11 Pro 24H2
Python	3.12.6
pip	24.2
エディタ	PowerShell / VS Code
ライブラリ	pandas 2.x / matplotlib 3.x / openpyxl 3.x

📁 ステップ①：フォルダ構成を準備

まず、テスト用フォルダを作成します。

C:\python_env\
├─ mnist_cnn_model.h5        ← 前回の学習済みモデル
├─ test_images\
│   ├─ 0.png
│   ├─ 1.png
│   ├─ 2.png
│   ├─ 3.png
│   └─ 4.png
│   └─ 5.png
│   └─ 6.png
│   └─ 7.png
│   └─ 8.png
│   └─ 9.png
└─ predict_batch.py          ← 今回のスクリプト

C:\python_env\

├─ mnist_cnn_model.h5 ← 前回の学習済みモデル

├─ test_images\

│ ├─ 0.png

│ ├─ 1.png

│ ├─ 2.png

│ ├─ 3.png

│ └─ 4.png

│ └─ 5.png

│ └─ 6.png

│ └─ 7.png

│ └─ 8.png

│ └─ 9.png

└─ predict_batch.py ← 今回のスクリプト

各画像は 白背景 × 黒または青文字、中央寄せ、28×28ピクセル推奨です。

🧠 ステップ②：複数画像を一括認識するスクリプト

ファイル名：predict_batch.py

内容：

# =========================================
# 複数の自作画像を学習済みモデルで一括認識
# =========================================

import os
import numpy as np
import matplotlib.pyplot as plt
from tensorflow.keras.models import load_model
from tensorflow.keras.preprocessing import image

# ---------- フォント設定 ----------
plt.rcParams['font.family'] = ['Meiryo', 'Yu Gothic', 'MS Gothic']
plt.rcParams['axes.unicode_minus'] = False

# ---------- モデル読み込み ----------
model = load_model("mnist_cnn_model.h5")
print("✅ 学習済みモデルを読み込みました。")

# ---------- 画像フォルダ ----------
folder_path = "test_images"
files = sorted([f for f in os.listdir(folder_path) if f.endswith(('.png', '.jpg', '.jpeg'))])

# ---------- 一括推論 ----------
results = []
for file in files:
    img_path = os.path.join(folder_path, file)
    img = image.load_img(img_path, target_size=(28, 28), color_mode="grayscale")
    img_array = image.img_to_array(img)
    img_array = 255 - img_array   # 白背景×黒文字の反転補正
    img_array = img_array / 255.0
    img_array = np.expand_dims(img_array, axis=0)

    pred = model.predict(img_array)
    label = np.argmax(pred)
    results.append((file, label))
    print(f"{file} → 予測結果: {label}")

# ---------- 一覧表示 ----------
plt.figure(figsize=(10, 2))
for i, (fname, label) in enumerate(results):
    img_path = os.path.join(folder_path, fname)
    img = image.load_img(img_path, target_size=(28, 28), color_mode="grayscale")
    plt.subplot(1, len(results), i + 1)
    plt.imshow(img, cmap='gray')
    plt.title(f"{label}", fontsize=12)
    plt.axis("off")
plt.suptitle("一括予測結果", fontsize=14)
plt.show()

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

# 複数の自作画像を学習済みモデルで一括認識

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

import os

import numpy as np

import matplotlib.pyplot as plt

from tensorflow.keras.models import load_model

from tensorflow.keras.preprocessing import image

# ---------- フォント設定 ----------

plt.rcParams['font.family'] = ['Meiryo', 'Yu Gothic', 'MS Gothic']

plt.rcParams['axes.unicode_minus'] = False

# ---------- モデル読み込み ----------

model = load_model("mnist_cnn_model.h5")

print("✅ 学習済みモデルを読み込みました。")

# ---------- 画像フォルダ ----------

folder_path = "test_images"

files = sorted([f for f in os.listdir(folder_path) if f.endswith(('.png', '.jpg', '.jpeg'))])

# ---------- 一括推論 ----------

results = []

for file in files:

img_path = os.path.join(folder_path, file)

img = image.load_img(img_path, target_size=(28, 28), color_mode="grayscale")

img_array = image.img_to_array(img)

img_array = 255 - img_array # 白背景×黒文字の反転補正

img_array = img_array / 255.0

img_array = np.expand_dims(img_array, axis=0)

pred = model.predict(img_array)

label = np.argmax(pred)

results.append((file, label))

print(f"{file} → 予測結果: {label}")

# ---------- 一覧表示 ----------

plt.figure(figsize=(10, 2))

for i, (fname, label) in enumerate(results):

img_path = os.path.join(folder_path, fname)

img = image.load_img(img_path, target_size=(28, 28), color_mode="grayscale")

plt.subplot(1, len(results), i + 1)

plt.imshow(img, cmap='gray')

plt.title(f"{label}", fontsize=12)

plt.axis("off")

plt.suptitle("一括予測結果", fontsize=14)

plt.show()

⚙️ ステップ③：実行方法

仮想環境を有効化して、次を実行します：

🧾 ステップ④：出力結果（例）

コンソール出力例：

✅ 学習済みモデルを読み込みました。
0.png → 予測結果: 0
1.png → 予測結果: 1
2.png → 予測結果: 2
3.png → 予測結果: 3
4.png → 予測結果: 4
5.png → 予測結果: 5
6.png → 予測結果: 6
7.png → 予測結果: 7
8.png → 予測結果: 8
9.png → 予測結果: 9

✅ 学習済みモデルを読み込みました。

0.png → 予測結果: 0

1.png → 予測結果: 1

2.png → 予測結果: 2

3.png → 予測結果: 3

4.png → 予測結果: 4

5.png → 予測結果: 5

6.png → 予測結果: 6

7.png → 予測結果: 7

8.png → 予測結果: 8

9.png → 予測結果: 9

グラフ表示：

横一列に数字画像が並び、各画像の下にAIの判定結果が表示されます
一目でどの画像をどの数字と認識したか分かります

📊 ステップ⑤：結果と考察





	項目 内容




	処理対象 フォルダ内の全画像（png/jpg）を自動スキャン


	推論処理 load_modelでCNNモデルを再利用し、一括predictを実施


	表示形式 コンソール出力＋matplotlibで可視化


	精度 1枚ずつ推論と同等（約99%）を維持


	応用例 書類や帳票の一括認識、データセットの一括評価など


	考察 単一推論を拡張してバッチ処理化。フォルダ単位で実行できるため自動化が容易

項目	内容
処理対象	フォルダ内の全画像（png/jpg）を自動スキャン
推論処理	load_modelでCNNモデルを再利用し、一括predictを実施
表示形式	コンソール出力＋matplotlibで可視化
精度	1枚ずつ推論と同等（約99%）を維持
応用例	書類や帳票の一括認識、データセットの一括評価など
考察	単一推論を拡張してバッチ処理化。フォルダ単位で実行できるため自動化が容易

💡 発展ポイント

テーマ	内容
結果をCSV出力	pandas.DataFrame(results).to_csv('result.csv', index=False)
サブフォルダ対応	os.walk() を使えば階層フォルダも処理可能
推論速度UP	GPU環境なら処理時間が大幅短縮
異常画像の検出	サイズやフォーマットが不正な画像をスキップ処理可能

✅ まとめ

本記事では、学習済みモデルを使って複数の手書き数字画像をまとめて判定しました。
フォルダ単位で一括処理できるため、データテストやAIモデルの精度検証にも最適です。

次回は、

🧠 (6) 判定結果をCSV出力し、正解データと比較して精度を分析
として、「自作データセットの評価編」に進みます。

Java, ブログ, プログラミング

Java：安全な乱数生成に役立つ！SecureRandomの使いどころ

2025年10月10日管理者コメントする

1. SecureRandomとは

SecureRandomは、**暗号論的に安全な乱数（CSPRNG：Cryptographically Secure Pseudo-Random Number Generator）**を生成するためのJavaクラスです。
java.securityパッケージに含まれ、セキュリティトークン、APIキー、暗号鍵などの生成に利用されます。

通常のRandomクラスは予測可能な乱数を生成するため、攻撃者にシードを特定される危険性があります。
対してSecureRandomはOSの暗号エンジンを利用して予測不能な乱数を生成します。

2. Randomとの違い

項目	Random	SecureRandom
主な用途	ゲーム・抽選・シミュレーション	暗号・セキュリティ関連
再現性	シード指定で再現可能	予測困難・安全性重視
エントロピー源	疑似乱数（数列）	OSの乱数エンジン
パフォーマンス	高速	やや低速（安全性優先）
実装場所	java.util	java.security

3. Javaバージョン別の対応ポイント

バージョン	特徴・変更点
Java 8	最も広く使われる環境。SecureRandomはデフォルトで十分安全。getInstanceStrong()も使用可能（JDK実装依存）。
Java 11	Base64.getUrlEncoder()などの標準エンコーダが安定。マルチスレッド環境でのSecureRandom利用も改善。
Java 17 (LTS)	デフォルトの乱数アルゴリズムが強化（DRBGが推奨）。新しいSecureRandom実装が追加。
Java 21 (LTS)	SecureRandomのアルゴリズム選択がより細かく制御可能に。DRBGがデフォルトで推奨パス。

💡 DRBGとは？
Java 17以降では、NIST標準（SP800-90A）に準拠したDRBG（Deterministic Random Bit Generator）が使用可能です。
これは暗号学的により強固な乱数生成手法で、今後の推奨実装となります。

4. サンプルコード：安全なトークン生成

import java.security.SecureRandom;
import java.util.Base64;

public class SecureRandomExample {
    public static void main(String[] args) {
        // 安全なSecureRandomインスタンスを取得
        SecureRandom secureRandom = new SecureRandom();

        // 16バイト（128bit）の乱数トークン生成
        byte[] token = new byte[16];
        secureRandom.nextBytes(token);

        // URLセーフなBase64文字列に変換
        String encoded = Base64.getUrlEncoder().withoutPadding().encodeToString(token);

        System.out.println("安全なトークン: " + encoded);
    }
}

import java.security.SecureRandom;

import java.util.Base64;

public class SecureRandomExample {

public static void main(String[] args) {

// 安全なSecureRandomインスタンスを取得

SecureRandom secureRandom = new SecureRandom();

// 16バイト（128bit）の乱数トークン生成

byte[] token = new byte[16];

secureRandom.nextBytes(token);

// URLセーフなBase64文字列に変換

String encoded = Base64.getUrlEncoder().withoutPadding().encodeToString(token);

System.out.println("安全なトークン: " + encoded);

}

🧩 出力例：

5. 高度な使い方（Java 17以降対応）

✅ 強力なDRBGインスタンスを明示的に取得

import java.security.SecureRandom;

public class DRBGExample {
    public static void main(String[] args) throws Exception {
        SecureRandom drbg = SecureRandom.getInstance("DRBG");
        byte[] randomBytes = new byte[16];
        drbg.nextBytes(randomBytes);
        System.out.println("DRBGで生成した乱数: " + java.util.HexFormat.of().formatHex(randomBytes));
    }
}

import java.security.SecureRandom;

public class DRBGExample {

public static void main(String[] args) throws Exception {

SecureRandom drbg = SecureRandom.getInstance("DRBG");

byte[] randomBytes = new byte[16];

drbg.nextBytes(randomBytes);

System.out.println("DRBGで生成した乱数: " + java.util.HexFormat.of().formatHex(randomBytes));

}

💡 HexFormatはJava 17で追加された便利クラスです。
Base64よりも短い表現でログ出力に適しています。

6. よくある利用シーン

シーン	使用目的	推奨API
認証トークン生成	セッションIDやAPIキー	SecureRandom + Base64
CSRFトークン	Webフォームの保護	SecureRandom + HexFormat
パスワードリセットURL	予測困難な一時リンク生成	getInstanceStrong()
暗号鍵生成	AESなどの鍵素材	SecureRandom
UUID代替	高強度ランダムID	SecureRandomで独自生成

7. ベストプラクティス

推奨事項	理由
SecureRandomの使い回し	毎回生成するとコストが高い
OS依存のソースを活用	/dev/urandomなどで高品質な乱数
getInstanceStrong()を必要時のみ使用	起動が遅くなるため常用は非推奨
Base64やHexFormatで可読化	ログやトークンで扱いやすい
シード指定は避ける	セキュリティが低下するため

8. パフォーマンス比較（目安）

操作	平均速度	安全性
Random.nextInt()	非常に高速	低
SecureRandom.nextInt()	中程度	高
SecureRandom.getInstanceStrong()	やや遅い	最高
SecureRandom (DRBG)	中〜高	最高（推奨）

9. まとめ

ポイント	内容
用途	暗号・認証・トークン生成に最適
バージョン対応	Java 8〜21全対応
推奨実装	SecureRandom または DRBG（Java 17+）
注意点	シード指定・再生成の多用を避ける
一言	安全性を重視する場面では必ずSecureRandomを！

🧠 コラム：SecureRandomを使うべき「具体例」

OAuth 2.0 認可コードの生成
JWTの署名鍵生成
Cookieのsession_id生成
APIトークン・CSRFトークン・暗号鍵など

→ 「ユーザーや外部に漏れたら困る値」には必ずSecureRandom！

Java, ブログ, プログラミング

Java：SQL接続でつまずかないためのtry-with-resources活用法

2025年10月7日管理者コメントする

JavaでSQL接続を扱うとき、多くの初心者が陥るのが「リソースの解放忘れ」や「例外処理の煩雑さ」です。
特に Connection, PreparedStatement, ResultSet の3つは明示的に close() しないと、メモリリークや接続枯渇の原因になります。

この記事では、そんな問題をtry-with-resources構文でスマートに解決する方法を紹介します。

🧱 try-with-resourcesとは？

Java 7以降で導入された構文で、AutoCloseable インターフェースを実装したオブジェクトを
自動的にクローズしてくれる仕組みです。

✅ 従来のコード例（Java 6以前）

Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;

try {
    conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/testdb", "user", "pass");
    pstmt = conn.prepareStatement("SELECT * FROM users");
    rs = pstmt.executeQuery();

    while (rs.next()) {
        System.out.println(rs.getString("name"));
    }
} catch (SQLException e) {
    e.printStackTrace();
} finally {
    try { if (rs != null) rs.close(); } catch (SQLException e) {}
    try { if (pstmt != null) pstmt.close(); } catch (SQLException e) {}
    try { if (conn != null) conn.close(); } catch (SQLException e) {}
}

Connection conn = null;

PreparedStatement pstmt = null;

ResultSet rs = null;

try {

conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/testdb", "user", "pass");

pstmt = conn.prepareStatement("SELECT * FROM users");

rs = pstmt.executeQuery();

while (rs.next()) {

System.out.println(rs.getString("name"));

}

} catch (SQLException e) {

e.printStackTrace();

} finally {

try { if (rs != null) rs.close(); } catch (SQLException e) {}

try { if (pstmt != null) pstmt.close(); } catch (SQLException e) {}

try { if (conn != null) conn.close(); } catch (SQLException e) {}

}

👉 冗長で、finally ブロックがネストしやすく、例外の見落としが発生しやすいのが難点です。

🚀 try-with-resourcesを使った改良版

String url = "jdbc:mysql://localhost:3306/testdb";
String user = "user";
String password = "pass";

String sql = "SELECT * FROM users";

try (
    Connection conn = DriverManager.getConnection(url, user, password);
    PreparedStatement pstmt = conn.prepareStatement(sql);
    ResultSet rs = pstmt.executeQuery()
) {
    while (rs.next()) {
        System.out.println(rs.getString("name"));
    }
} catch (SQLException e) {
    e.printStackTrace();
}

String url = "jdbc:mysql://localhost:3306/testdb";

String user = "user";

String password = "pass";

String sql = "SELECT * FROM users";

try (

Connection conn = DriverManager.getConnection(url, user, password);

PreparedStatement pstmt = conn.prepareStatement(sql);

ResultSet rs = pstmt.executeQuery()

) {

while (rs.next()) {

System.out.println(rs.getString("name"));

}

} catch (SQLException e) {

e.printStackTrace();

}

✨ メリットまとめ

項目	従来の書き方	try-with-resources
リソース解放	明示的にclose()が必要	自動でcloseされる
コード量	冗長	スッキリ
例外の安全性	finallyで記述ミスの恐れ	例外を安全に補足
可読性	低い	高い

🧠 複数リソースを扱うときのポイント

try(...) の中で複数のリソースを「セミコロン ;」で区切って宣言できます。

try (
    Connection conn = getConnection();
    PreparedStatement pstmt = conn.prepareStatement("SELECT * FROM orders");
    ResultSet rs = pstmt.executeQuery()
) {
    // 結果を処理
}

try (

Connection conn = getConnection();

PreparedStatement pstmt = conn.prepareStatement("SELECT * FROM orders");

ResultSet rs = pstmt.executeQuery()

) {

// 結果を処理

}

順序は重要：

最後に開いたリソース (ResultSet) から順に自動クローズされます（LIFO順）。

⚙️ try-with-resourcesとカスタムクラス

自作クラスでも AutoCloseable を実装すれば、
try-with-resources構文で安全に自動クローズが可能です。

⚠️ 注意点：例外の隠蔽に注意

もし try 内と close() 内の両方で例外が発生した場合、
try 内の例外が優先され、close() の例外は「抑制された例外」として記録されます。

🔍 まとめ

ポイント	内容
構文	try(リソース宣言){ ... }
バージョン	Java 7以降
対応型	AutoCloseableを実装する全クラス
主な利点	コード簡略化・例外安全性・リソースリーク防止

💬 おわりに

try-with-resources は見た目以上に強力です。
「リソース管理を明示的に書かない」だけで、コードの信頼性と保守性が大幅に向上します。

特にSQL接続まわりでは、この構文を使わない理由がないほどの必須テクニックです。
今後のJava開発では「標準の書き方」として身につけておきましょう。

HTML, ブログ, プログラミング

CSSとHTMLだけで作る立体的カードUI（Shadow DOM対応）

2025年10月6日管理者コメントする

JavaScriptなしで、transform / perspective / layered shadows と CSSカスタムプロパティ だけで

“パッ”と目を引く3Dカードを作成してみましょう。

さらに Shadow DOM 内でも同じ見た目を再現できるよう、::part() と変数で拡張可能にします。

ゴール（できあがりイメージ）

マウスホバーでわずかに傾く3D表現
斜めに流れるハイライト（きらめき）
ライト／ダークどちらでも映える配色
prefers-reduced-motion でアニメ控えめ
Shadow DOM対応：::part() と CSS変数で外部からのテーマ変更OK

デモ：CSSとHTMLだけで作る3DカードUI

💡 マウスを乗せるとカードがわずかに傾き、立体的な効果が確認できます。

最小HTML（ライトDOM版）

<link rel="preload" href="https://picsum.photos/600/400?random=13" as="image">

<div class="card-3d">
  <img class="card-3d__media" src="https://picsum.photos/600/400?random=13" alt="Sample cover">
  <div class="card-3d__body">
    <h3 class="card-3d__title">CSS Only 3D Card</h3>
    <p class="card-3d__text">
      transform と layered shadow で立体感を作るミニマル実装。Shadow DOMでも同じテーマが使えます。
    </p>
    <a class="card-3d__cta" href="#">詳しく見る</a>
  </div>
</div>

transform と layered shadow で立体感を作るミニマル実装。Shadow DOMでも同じテーマが使えます。

</p>

<a class="card-3d__cta" href="#">詳しく見る</a>

</div>

コアCSS（ライトDOM版）

:root {
  --card-bg: color-mix(in oklab, canvas, white 6%);
  --card-fg: canvastext;
  --card-accent: oklch(0.70 0.12 250);
  --card-radius: 16px;
  --card-shadow-1: 0 1px 2px color-mix(in oklab, black, transparent 80%);
  --card-shadow-2: 0 8px 24px color-mix(in oklab, black, transparent 88%);
  --card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 92%);
  --card-gloss: linear-gradient(120deg, transparent 30%, color-mix(in oklab, white, transparent 60%) 45%, transparent 60%) no-repeat;
  --card-gloss-size: 200% 200%;
  --card-tilt: rotateX(5deg) rotateY(-6deg);
  --card-tilt-hover: rotateX(6.5deg) rotateY(-10deg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --card-bg: color-mix(in oklab, canvas, black 6%);
    --card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 86%);
  }
}

.card-3d {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  padding: 14px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--card-fg);
  border: var(--card-border);
  box-shadow: var(--card-shadow-1), var(--card-shadow-2);
  transform: perspective(900px) var(--card-tilt);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
  overflow: clip;
  isolation: isolate;
}

.card-3d::before {
  /* 斜めに流れるハイライト */
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--card-gloss);
  background-size: var(--card-gloss-size);
  mix-blend-mode: soft-light;
  pointer-events: none;
  transform: translateZ(30px);
  transition: background-position .8s ease;
}

.card-3d:hover {
  transform: perspective(900px) var(--card-tilt-hover) translateZ(0.001px);
  box-shadow: 0 4px 10px color-mix(in oklab, black, transparent 80%), 0 24px 48px color-mix(in oklab, black, transparent 85%);
}
.card-3d:hover::before { background-position: 120% 40%; }

.card-3d__media {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: calc(var(--card-radius) - 6px);
  transform: translateZ(20px);
  box-shadow: 0 10px 24px color-mix(in oklab, black, transparent 80%);
}

.card-3d__body { display: grid; gap: 8px; transform: translateZ(24px); }

.card-3d__title {
  font-size: clamp(1.05rem, 1.2rem + .25vw, 1.35rem);
  line-height: 1.25;
}

.card-3d__text { opacity: .9; }

.card-3d__cta {
  justify-self: start;
  display: inline-grid;
  place-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card-accent), white 5%);
  color: white;
  text-decoration: none;
  font-weight: 600;
  transform: translateZ(26px);
  box-shadow: 0 6px 16px color-mix(in oklab, var(--card-accent), black 25% / 22%);
  transition: transform .25s, filter .25s, box-shadow .35s;
}
.card-3d__cta:hover  { filter: brightness(1.05); transform: translateZ(28px); }
.card-3d__cta:active { transform: translateZ(22px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .card-3d, .card-3d * { transition: none !important; }
  .card-3d { transform: none; }
  .card-3d::before { display: none; }
}

:root {

--card-bg: color-mix(in oklab, canvas, white 6%);

--card-fg: canvastext;

--card-accent: oklch(0.70 0.12 250);

--card-radius: 16px;

--card-shadow-1: 0 1px 2px color-mix(in oklab, black, transparent 80%);

--card-shadow-2: 0 8px 24px color-mix(in oklab, black, transparent 88%);

--card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 92%);

--card-gloss: linear-gradient(120deg, transparent 30%, color-mix(in oklab, white, transparent 60%) 45%, transparent 60%) no-repeat;

--card-gloss-size: 200% 200%;

--card-tilt: rotateX(5deg) rotateY(-6deg);

--card-tilt-hover: rotateX(6.5deg) rotateY(-10deg);

}

@media (prefers-color-scheme: dark) {

:root {

--card-bg: color-mix(in oklab, canvas, black 6%);

--card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 86%);

}

.card-3d {

position: relative;

display: grid;

gap: 12px;

width: min(100%, 420px);

padding: 14px;

border-radius: var(--card-radius);

background: var(--card-bg);

color: var(--card-fg);

border: var(--card-border);

box-shadow: var(--card-shadow-1), var(--card-shadow-2);

transform: perspective(900px) var(--card-tilt);

transform-style: preserve-3d;

transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;

overflow: clip;

isolation: isolate;

}

.card-3d::before {

/* 斜めに流れるハイライト */

content: "";

position: absolute;

inset: -10%;

background: var(--card-gloss);

background-size: var(--card-gloss-size);

mix-blend-mode: soft-light;

pointer-events: none;

transform: translateZ(30px);

transition: background-position .8s ease;

}

.card-3d:hover {

transform: perspective(900px) var(--card-tilt-hover) translateZ(0.001px);

box-shadow: 0 4px 10px color-mix(in oklab, black, transparent 80%), 0 24px 48px color-mix(in oklab, black, transparent 85%);

}

.card-3d:hover::before { background-position: 120% 40%; }

.card-3d__media {

width: 100%;

aspect-ratio: 3/2;

object-fit: cover;

border-radius: calc(var(--card-radius) - 6px);

transform: translateZ(20px);

box-shadow: 0 10px 24px color-mix(in oklab, black, transparent 80%);

}

.card-3d__body { display: grid; gap: 8px; transform: translateZ(24px); }

.card-3d__title {

font-size: clamp(1.05rem, 1.2rem + .25vw, 1.35rem);

line-height: 1.25;

}

.card-3d__text { opacity: .9; }

.card-3d__cta {

justify-self: start;

display: inline-grid;

place-items: center;

padding: 10px 14px;

border-radius: 999px;

background: color-mix(in oklab, var(--card-accent), white 5%);

color: white;

text-decoration: none;

font-weight: 600;

transform: translateZ(26px);

box-shadow: 0 6px 16px color-mix(in oklab, var(--card-accent), black 25% / 22%);

transition: transform .25s, filter .25s, box-shadow .35s;

}

.card-3d__cta:hover { filter: brightness(1.05); transform: translateZ(28px); }

.card-3d__cta:active { transform: translateZ(22px) scale(.98); }

@media (prefers-reduced-motion: reduce) {

.card-3d, .card-3d * { transition: none !important; }

.card-3d { transform: none; }

.card-3d::before { display: none; }

}

Shadow DOM に対応させる考え方

ポイントは 「パーツを切り出す」 と 「CSS変数でテーマ化」。
外側（ライトDOM）から Shadow DOM 内を直接スタイルできないため、コンポーネント作者が part を付与し、利用者は ::part() で装飾、色や半径は CSS変数で調整します。

Web Component 側（作者向け：影DOM内のテンプレ）

※ここでは概念を示すための HTMLスケッチ です。実際の ShadowRoot 作成は JS が必要ですが、スタイル設計の指針としてご覧ください。

<!-- shadow root 内部イメージ（概念） -->
<style>
  :host {
    --card-bg: var(--card-bg, color-mix(in oklab, canvas, white 6%));
    --card-fg: var(--card-fg, canvastext);
    --card-accent: var(--card-accent, oklch(0.70 0.12 250));
    --card-radius: var(--card-radius, 16px);
    /* …上記ライトDOM版と同等の宣言… */
  }
  .card { /* = .card-3d と同様 */ }
  .card::before { /* gloss */ }
  .media::part(img) { /* メディア要素が更にshadowならここで委譲 */ }
</style>

<div class="card">
  <img part="media" class="media" alt="">
  <div class="body" part="body">
    <h3 part="title" class="title"></h3>
    <p part="text" class="text"></p>
    <a part="cta" class="cta" href="#"></a>
  </div>
</div>

<style>

:host {

--card-bg: var(--card-bg, color-mix(in oklab, canvas, white 6%));

--card-fg: var(--card-fg, canvastext);

--card-accent: var(--card-accent, oklch(0.70 0.12 250));

--card-radius: var(--card-radius, 16px);

/* …上記ライトDOM版と同等の宣言… */

}

.card { /* = .card-3d と同様 */ }

.card::before { /* gloss */ }

.media::part(img) { /* メディア要素が更にshadowならここで委譲 */ }

</style>

</div>

利用者側（外部）からのテーマ上書き例

/* Shadow host にぶら下がる要素（custom-element）へ変数を供給 */
custom-3d-card {
  --card-accent: oklch(0.78 0.17 30);     /* 暖色寄りに */
  --card-radius: 20px;
}

/* コンポーネントが part を公開していれば装飾できる */
custom-3d-card::part(title) { letter-spacing: .3px; }
custom-3d-card::part(cta)   { text-transform: uppercase; }

/* Shadow host にぶら下がる要素（custom-element）へ変数を供給 */

custom-3d-card {

--card-accent: oklch(0.78 0.17 30); /* 暖色寄りに */

--card-radius: 20px;

}

/* コンポーネントが part を公開していれば装飾できる */

custom-3d-card::part(title) { letter-spacing: .3px; }

custom-3d-card::part(cta) { text-transform: uppercase; }

まとめ：

作者は Shadow DOM 内で CSS変数とpart名を定義

利用者は ホストへ変数指定し、必要なら ::part() でピンポイント調整

デザインバリエーション（クラス追加だけ）

/* さらに“浮かせる” */
.card-3d.is-elevated {
  --card-tilt: rotateX(6deg) rotateY(-8deg);
  --card-tilt-hover: rotateX(9deg) rotateY(-12deg);
}

/* ガラス風 */
.card-3d.is-glass {
  background: color-mix(in oklab, var(--card-bg), transparent 30%);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid color-mix(in oklab, white, transparent 80%);
}

/* 枠線強調・フラット */
.card-3d.is-outline {
  box-shadow: 0 1px 0 color-mix(in oklab, black, transparent 86%);
  --card-gloss: linear-gradient(120deg, transparent, transparent); /* きらめき無効 */
}

/* さらに“浮かせる” */

.card-3d.is-elevated {

--card-tilt: rotateX(6deg) rotateY(-8deg);

--card-tilt-hover: rotateX(9deg) rotateY(-12deg);

}

/* ガラス風 */

.card-3d.is-glass {

background: color-mix(in oklab, var(--card-bg), transparent 30%);

backdrop-filter: blur(8px) saturate(1.2);

border: 1px solid color-mix(in oklab, white, transparent 80%);

}

/* 枠線強調・フラット */

.card-3d.is-outline {

box-shadow: 0 1px 0 color-mix(in oklab, black, transparent 86%);

--card-gloss: linear-gradient(120deg, transparent, transparent); /* きらめき無効 */

}

アクセシビリティと実用Tips

ボタン／リンクのヒット領域は最低44×44pxを意識（paddingで確保）
prefers-reduced-motion に配慮（すでに対応）
コントラスト：oklchやcolor-mix()で暗所・明所どちらも読みやすく
画像のalt を適切に
フォールバック：古い環境では oklch が未対応 → 代替色を上書き可能に

よく使うCSSカスタムプロパティ（外から上書きOK）

変数名	役割	例
--card-bg	背景色	#fff / #111
--card-fg	文字色	#111 / #eee
--card-accent	CTAなどの強調色	oklch(0.78 0.17 30)
--card-radius	角丸	12px / 20px
--card-shadow-1	影レイヤ(近)	0 1px 2px rgba(0,0,0,.2)
--card-shadow-2	影レイヤ(遠)	0 8px 24px rgba(0,0,0,.12)
--card-border	境界線	1px solid rgba(0,0,0,.06)
--card-tilt	傾き(通常)	rotateX(5deg) rotateY(-6deg)
--card-tilt-hover	傾き(ホバー)	rotateX(6.5deg) rotateY(-10deg)
--card-gloss	ハイライト	linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%)
--card-gloss-size	ハイライトサイズ	200% 200%

トラブルシュート

立体感が弱い → --card-tilt と影（--card-shadow-2）を強める
グロスが強すぎる → --card-gloss の不透明度を上げる（=白を薄く）
画面酔い → prefers-reduced-motion 環境で確認、もしくはカードに .is-outline を付与
Shadow DOM で色が変わらない → 変数は ホスト（custom element）側に定義しているか確認

まとめ

項目	ポイント
3D表現	transformとperspectiveで奥行きを演出
輝き	::beforeのグラデとbackground-positionで流し込み
配色	oklchとcolor-mixでライト/ダーク両対応
アクセシビリティ	prefers-reduced-motionと十分なヒット領域
Shadow DOM	作者はpart公開&変数化/利用者は::part()と変数上書き
拡張	クラス追加でelevated/glass/outlineを切替

HTML, ブログ, プログラミング

JSいらず！HTMLだけでポップアップを出せる「popover」属性がすごい

2025年10月5日管理者コメントする

これまで「ポップアップ」や「モーダルウィンドウ」を作るには、
JavaScriptやCSSトリックを駆使するのが当たり前でした。

ところが最近、**HTMLだけでポップアップを表示できる新属性「popover」**が登場！
これが想像以上にシンプルで、しかも見た目も自然なんです。

この記事では、「popover」属性の基本的な使い方から応用例までまとめています。

🚀 popover属性とは？

popover属性は、HTMLの要素に「ちょっとした吹き出し」や「軽いモーダル」を表示するための新仕様です。
JavaScriptなしで開閉制御でき、ボタンやリンクに紐づけて簡単に使えます。

対応ブラウザ

✅ Chrome 114以降
✅ Edge 114以降
✅ Safari 17以降
⚠️ Firefox（現時点では開発中）

※2025年現在、多くのモダンブラウザでサポートが進んでいます。

🧱 基本の使い方

✅ 最小構成の例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>popover属性の最小構成サンプル</title>
</head>
<body>
  <button popovertarget="info">ポップアップを表示</button>
  <div id="info" popover>
    <p>こんにちは！これはHTMLだけで出せるポップアップです。</p>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>popover属性の最小構成サンプル</title>

</head>

<body>

<button popovertarget="info">ポップアップを表示</button>

<p>こんにちは！これはHTMLだけで出せるポップアップです。</p>

</div>

</body>

</html>

＜表示例＞

💬 ポイント解説

popover 属性を付与した要素が、ポップアップ対象になります。
popovertarget 属性で、どの要素を表示するか指定します。
ボタンをクリックするだけで自動的に開閉制御してくれます。

🎨 スタイルを整える

デフォルトのままだと少し味気ないので、CSSで整えましょう。

<style>
  [popover] {
    padding: 1em;
    background: #f9f9ff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
</style>

<style>

[popover] {

padding: 1em;

background: #f9f9ff;

border: 1px solid #ccc;

border-radius: 10px;

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}

</style>

これで、軽いツールチップやメニュー風の見た目にできます。

背景を白系にすれば、Webアプリ風のモーダルにも。

⚙️ 応用：自動で閉じる・メニュー風表示

<button popovertarget="menu" popovertargetaction="toggle">メニュー</button>

<div id="menu" popover>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">設定</a></li>
    <li><a href="#">ログアウト</a></li>
  </ul>
</div>

<ul>

<li><a href="#">ログアウト</a></li>

</ul>

</div>

popovertargetaction="toggle" を使うと、クリックごとに開閉を切り替えられます。
ナビゲーションメニューやヘルプボックスなどにも応用可能です。

＜表示例＞

🧠 裏側の仕組み

HTMLの「popover」属性は、ブラウザ側で開閉制御を自動的に処理します。
内部的には :popover-open という擬似クラスが追加され、
CSSで開閉状態を検知することもできます。

**「開いたときだけアニメーション」**などを実現できます。

💻 実用例：通知メッセージ

<button popovertarget="notice" popovertargetaction="show">お知らせ</button>
<div id="notice" popover>
  <p>サイトの更新情報があります！</p>
</div>

<p>サイトの更新情報があります！</p>

</div>

JavaScript不要で、ユーザーに小さなメッセージを伝えることが可能です。

フォーム送信後の完了メッセージなどにもぴったり。

⚠️ 注意点

古いブラウザでは未対応なので、必要に応じて<dialog>タグやJSフォールバックを検討。
開く方向は自動制御されるため、細かい位置調整が難しい場合があります。
長文や複雑なレイアウトには不向き（軽量ポップアップ用途がベスト）。

🌟 まとめ

特徴	内容
JavaScript不要	HTMLだけで完結
見た目自由	CSSで簡単カスタマイズ
軽量	ページ読み込みが早い
一部ブラウザ注意	Firefoxは実装中

🔮 今後の展望

「popover」属性はまだ新しい技術ですが、
“JavaScriptレスなUI” を目指すHTML進化の象徴です。

今後は、ツールチップ・通知・設定メニューなど、
より多くのシーンで採用が進むと期待されます。

Python, ブログ, プログラミング

🧠 Pythonで学ぶ画像認識入門：TensorFlowとKerasで手書き数字を判定する方法(4) ～学習済みモデルで自作画像を認識～

2025年10月5日管理者コメントする

前回の

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

までで、MNISTデータセットを使い高精度なCNNモデルを作成しました。
今回はその学習済みモデルを再利用し、自分で描いた手書き数字画像を実際に判定してみましょう。

ステップ①：学習済みモデルの保存

前回での学習コードに以下を追加して、モデルを保存しておきます。

ステップ②：自作画像を準備する

1️⃣ 白背景に黒文字で「0〜9」の数字を描いた画像を用意
2️⃣ 画像サイズを 28×28ピクセル にリサイズ
3️⃣ ファイル形式は .png または .jpg でOK

（例）

※手書きペイントツールで描いてもOK。
できるだけ文字を中央に配置し、背景は白が理想です。

ステップ③：推論スクリプトを作成

ファイル名：

内容：

# =========================================
# 学習済みモデルを使って手書き画像を判定
# =========================================

import numpy as np
import matplotlib.pyplot as plt
from tensorflow.keras.models import load_model
from tensorflow.keras.preprocessing import image

# ---------- フォント設定 ----------
plt.rcParams['font.family'] = ['Meiryo', 'Yu Gothic', 'MS Gothic']
plt.rcParams['axes.unicode_minus'] = False

# ---------- モデルを読み込み ----------
model = load_model("mnist_cnn_model.h5")
print("✅ 学習済みモデルを読み込みました。")

# ---------- 画像を読み込み ----------
img_path = "my_digit.png"   # ← 自分の画像ファイル名
img = image.load_img(img_path, target_size=(28, 28), color_mode="grayscale")

# ---------- 前処理 ----------
img_array = image.img_to_array(img)
img_array = 255 - img_array        # 白黒反転（白背景×黒文字対応）
img_array = img_array / 255.0
img_array = np.expand_dims(img_array, axis=0)

# ---------- 予測 ----------
pred = model.predict(img_array)
predicted_label = np.argmax(pred)

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

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

# 学習済みモデルを使って手書き画像を判定

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

import numpy as np

import matplotlib.pyplot as plt

from tensorflow.keras.models import load_model

from tensorflow.keras.preprocessing import image

# ---------- フォント設定 ----------

plt.rcParams['font.family'] = ['Meiryo', 'Yu Gothic', 'MS Gothic']

plt.rcParams['axes.unicode_minus'] = False

# ---------- モデルを読み込み ----------

model = load_model("mnist_cnn_model.h5")

print("✅ 学習済みモデルを読み込みました。")

# ---------- 画像を読み込み ----------

img_path = "my_digit.png" # ← 自分の画像ファイル名

img = image.load_img(img_path, target_size=(28, 28), color_mode="grayscale")

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

img_array = image.img_to_array(img)

img_array = 255 - img_array # 白黒反転（白背景×黒文字対応）

img_array = img_array / 255.0

img_array = np.expand_dims(img_array, axis=0)

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

pred = model.predict(img_array)

predicted_label = np.argmax(pred)

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

plt.imshow(img_array[0].reshape(28, 28), cmap='gray')

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

plt.show()

ステップ④：実行

仮想環境を有効化して、次のコマンドを実行：

ステップ⑤：結果と考察

項目	内容
予測結果	AIが自作の手書き数字を正しく認識し、予測結果が画面に表示される
処理時間	数百ミリ秒程度で即時に判定が完了
注意点	白背景×黒文字の前提で学習しているため、背景と文字が逆の場合は反転処理を削除
応用例	手書き書類の数字抽出、郵便番号や伝票番号の自動読み取りなどに応用可能
考察	CNNモデルにより自作データでも高い精度を維持。前処理（反転・正規化）が認識精度に大きく影響

💡 ワンポイント

もし背景が黒で文字が白の場合は、
次の行を削除してください：

✅ まとめ

これで「自分の描いた手書き数字」をAIが正しく認識できるようになりました。
この流れを応用すれば、より複雑な画像分類（例えば「猫と犬」や「手書き文字分類」）にも発展できます。

✅ Predicateとは？

✅ 基本的な使い方

✔ Lambda式で判定条件を定義

✅ 条件を組み合わせる（and/or/negate）

✔ 使用例

✅ 実用例①：従来のif文から置き換えてスマートに

❌ 従来のif文

✅ Predicateを使った場合

✅ 実用例②：Listのフィルタリングに活用

🎯 Predicateを使うメリット

⚠ 濫用しすぎには注意！

✅ まとめ

関連記事

🔷 はじめに

🔷 StreamとparallelStreamの違い

🔷 並列処理の仕組み（ForkJoinPool）

🔷 実行例：リストの重い処理を並列化する

🔷 並列処理時の注意点

🔷 並列処理の最適化テクニック

🔷 parallelStream()を使うべきケース

🔷 まとめ

関連記事

■ 導入：Stream APIでコードを劇的に簡潔化

■ 基本構文：Streamの流れを理解する

■ サンプル①：条件でフィルタリングする

■ サンプル②：要素を変換する（map）

■ サンプル③：ソート・並び替え

■ サンプル④：重複を除去する（distinct）

■ サンプル⑤：合計・平均・最大値を求める

■ サンプル⑥：複数条件の処理（filter + map）

■ サンプル⑦：グルーピング（groupingBy）

■ サンプル⑧：並列処理で高速化（parallelStream）

■ Stream APIを使うメリットまとめ

■ まとめ：Stream APIを使いこなして効率化

関連記事

💡 Optionalとは？

✅ よくあるnullチェックの問題例

🧩 Optionalを使った安全な書き方

🔍 Optionalの主なメソッド一覧

🧠 orElseとorElseGetの違い

🧾 サンプルコード全体

🚀 Optionalを使うメリットまとめ

⚠️ 注意点：Optionalは「すべてに使う」ものではない

🧭 まとめ

関連記事

🧩 動作環境（共通）

📁 ステップ①：フォルダ構成を準備

🧠 ステップ②：複数画像を一括認識するスクリプト

⚙️ ステップ③：実行方法

🧾 ステップ④：出力結果（例）

📊 ステップ⑤：結果と考察

💡 発展ポイント

✅ まとめ

関連記事

1. SecureRandomとは

2. Randomとの違い

3. Javaバージョン別の対応ポイント

4. サンプルコード：安全なトークン生成

5. 高度な使い方（Java 17以降対応）

✅ 強力なDRBGインスタンスを明示的に取得

6. よくある利用シーン

7. ベストプラクティス

8. パフォーマンス比較（目安）

9. まとめ

🧠 コラム：SecureRandomを使うべき「具体例」

関連記事

🧱 try-with-resourcesとは？

✅ 従来のコード例（Java 6以前）

🚀 try-with-resourcesを使った改良版

🧠 複数リソースを扱うときのポイント

⚙️ try-with-resourcesとカスタムクラス

⚠️ 注意点：例外の隠蔽に注意

🔍 まとめ

💬 おわりに

関連記事

ゴール（できあがりイメージ）

デモ：CSSとHTMLだけで作る3DカードUI

最小HTML（ライトDOM版）

コアCSS（ライトDOM版）

Shadow DOM に対応させる考え方

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事