「WEB開発」タグアーカイブ

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進化の象徴です。

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

PC関連, Web開発, ネットワーク, ブログ, リモートデスクトップ接続

リモートデスクトップ接続での接続を簡単にするリモートデスクトップファイル「*.rdp」ファイルの作成方法

2022年6月17日管理者コメントする

テレワーク（リモートワーク）などでシンクラ環境を使用する場合などはリモートデスクトップでの接続を経由してアクセスしていると思いますが、毎回リモートデスクトップを起動して接続先を選択して～とかしなくてもリモートデスクトップでの接続情報を保存した「.rdp」ファイルを実行することでリモートデスクトップでの接続が楽になるのでメモしておきます。

リモートデスクトップファイル「.rdp」ファイルの作成方法

リモートデスクトップ接続を起動して左下の「オプション」を選択します。
接続先のコンピューターやユーザー名を入力後、「名前を付けて保存」を選択します。
保存するrdpのファイルを指定して「保存」ボタンを選択すればリモートデスクトップファイル「*.rdp」ファイルが作成完了です。
作成した「*.rdp」ファイルを実行するとリモートデスクトップ接続を起動して接続ボタンを選択した時と同様に動作するので接続作業が楽になります。

Eclipse, Web開発, ソフトウェア, ブログ

Javaのバージョンアップ手順

2022年5月27日管理者コメントする

しばらくJavaのバージョンアップを実施してなかったのでバージョンアップ時の手順をメモしておきます。
今回はJava 1.6.0_45 ⇒1.8.0_331へバージョンアップしてみます。
※2022年5月時点でJavaの最新バージョンは18ですが開発で使用してるのは8なので今回最新版にはしてません。

jdkのダウンロード

Oracleの「Javaアーカイブ」ページからダウンロードする事が可能です。
ダウンロードする場合Oracleアカウントが必要となります。
⇒Oracle Java Archiveページ

jdkのインストール手順

インストールする前にまずは現在適用されているJavaのバージョンを確認します。コマンドプロンプトの画面で「javac -version」と入力すれば現在適用されているJavaのバージョンを確認できます。
OracleのアーカイブページでJavaのバージョンを選択します。今回は「Java SE 8(8u211 and later)」を選択します。
次にjdkのインストーラーを選択します。今回は64ビット版の「jdk-8u331-windows-x64.exe」を選択します。
ダウンロードした「jdk-8u331-windows-x64.exe」を実行してセットアップ画面の「次」ボタンを選択します。
インストール先を変更したい場合は変更ボタンから指定してから「次へ」ボタンを選択します。
インストールが終了するの以下の画面が表示されるので「閉じる」ボタンを選択します。
コントロールパネル ⇒ システム ⇒ システムの詳細設定から環境変更を設定します。
システム環境変数の「JAVA_HOME」を選択しjdkをインストールしたフォルダを指定します。
次にシステム環境変数の「Path」を選択肢jdkのフォルダが指定されている箇所を変更します。
環境変数の設定が完了したら再度コマンドプロンプト画面でJavaのバージョンを確認して値が変更されていればバージョンアップ作業完了です。

Eclipse, JBoss, Web開発, ブログ

EclipseからのJBoss起動手順

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

Eclipse経由でのJBoss起動手順をメモしておきます。

環境

Windows7 Home Premium 32bit版
Eclipse Pleiades All in One 4.2.2a.v20130303 32bit版
Java：jdk1.8.0_73
jboss-4.2.3.GA

EclipseでのJBoss設定手順

以下は事前にJBoss 4.2がインストールされている事が前提となります。
⇒JBossのインストール手順

Eclipseメニューから「ウィンドウ」⇒「設定」⇒「サーバー」⇒「ランタイム環境」⇒「追加」⇒「JBoss v4.2を選択」⇒「次へ」ボタンを選択します。
JREには「インストール済みのJRE」で選択されているjdkを選択し、アプリケーション・サーバー・ディレクトリにはJBossをインストールしたディレクトリを指定します。
Eclipseメニューから「ウィンドウ」⇒「ビューの表示」⇒「その他」⇒「サーバー」を選択して「OK」ボタンを選択します。
サーバータグが追加されたらサーバータグ画面で右クリック⇒「新規」⇒「サーバー」を選択します。（「新規サーバー・ウィザード」のリンクを選択でもOKです）
新規サーバー画面の「サーバー・ランタイム環境」へ上記で追加したJBossを選択し、「次へ」ボタンを選択します。
アドレスやポート番号を指定します。特にこだわないのであればデフォルトのままで「完了」ボタンを選択すればEclipseでの設定は完了です。
サーバーにJBossが追加されたらサーバータブを選択して右上にある「サーバーを始動」ボタンを選択してJBossを起動してみます。
JBossが正常に起動されるとコンソールの最後に「Started in ・・ms」という様に表示されます。

サーバータブでは以下の様に「始動済み」と表示されています。
ブラウザを起動し「http://localhost:8080」へアクセスして以下の画面が表示されればJBossが正常に起動されています。

Struts, Web開発, フレームワーク, ブログ

Struts：バージョン1.x系と2.x系の違い

2016年2月24日管理者コメントする

Strutsのバージョン「1.x」系と「2.x」系の違いについてメモしておきます。

Struts「1.x」の特徴

一般的に「Struts」と言えば「1.x」系を指します。
2008年12月リリースの1.3.10以降はバージョンアップは停止しています。
バージョンアップにより安定して利用出来るので多くの開発で利用されています。
Strutsの構成に「struts-config.xml」ファイルを使用しています。
ActionForwardオブジェクトを使用しています。
inputを返すActionについて検証（validateメソッド）の呼び出しが行われるため、検証が不要な場合にこれを抑制するコードを作成する必要があります。

Struts「2.x」の特徴

元々「WebWork2」というフレームワークが名称変更されて「Struts 2」となりました。
元は設計思想の異なる別物のフレームワークなので「Struts 1.x」系とは根本的に異なる物です。
2016年2月現在でバージョン 2.3.24.1までリリースされています。
Struts 1.xでいう「struts-config.xml」は「struts.xml」に変更されています。
Struts 1.xでいう「ActionForwardオブジェクト」は「Resultオブジェクト」に置き換わりました。
inputを返すActionについて検証の呼び出しが行われないため、検証が不要な場合にこれを抑制するコードを作成する必要はありません。

Eclipse, Web開発, ブログ

Eclipse：getter／setterメソッドの自動生成方法

2016年2月21日管理者 1件のコメント

Eclipseでgetter／setterメソッドを自動生成する方法をメモしておきます。
事前にコードテンプレートでgetter／setter用のjavadocを設定しておくとさらに便利です。

環境

Eclipse 4.2
Windows7 professional 64bit版

getter／setterメソッドの自動生成手順

getter／setterを設定したいBeanやDTOなどのクラスを作成しフィールドだけ記述してgetter／setterを挿入したい行へカーソルを合わせます。
挿入位置へカーソルを合わせたら右クリックし、「ソース」⇒「getterおよびsetterの生成」を選択します。
getterおよびsetterの生成画面が表示されたら、生成対象とするフィールドを選択し、「メソッド・コメントの生成」へチェックし「OK」ボタンを選択します。

上記手順で以下の様にgetter／setterメソッドが自動生成されて挿入されます。事前にコードテンプレートでgetter／setter用のjavadocを設定しておけばお好みのjavadocへ変更する事も可能です。

package Bean;

import java.util.Date;

/**
 * <p>[概 要] SampleBean4。</p>
 * <p>[詳 細] </p>
 * <p>[備 考] </p>
 * <p>[環 境] </p>
 */
public class SampleBean4 {

	/**
     * 日付
     */
    private Date date;

    /**
     * 文字列
     */
    private String str;

	/**
	 * <p>[概 要] dateを取得する。</p>
	 * <p>[詳 細] </p>
	 * <p>[備 考] </p>
	 * @return date
	 */
	public Date getDate() {
		return date;
	}

	/**
	 * <p>[概 要] dateを設定する。</p>
	 * <p>[詳 細] </p>
	 * <p>[備 考] </p>
	 * @param date
	 */
	public void setDate(Date date) {
		this.date = date;
	}

	/**
	 * <p>[概 要] strを取得する。</p>
	 * <p>[詳 細] </p>
	 * <p>[備 考] </p>
	 * @return str
	 */
	public String getStr() {
		return str;
	}

	/**
	 * <p>[概 要] strを設定する。</p>
	 * <p>[詳 細] </p>
	 * <p>[備 考] </p>
	 * @param str
	 */
	public void setStr(String str) {
		this.str = str;
	}
}

package Bean;

import java.util.Date;

/**

* <p>[概要] SampleBean4。</p>

* <p>[詳細] </p>

* <p>[備考] </p>

* <p>[環境] </p>

public class SampleBean4 {

/**

* 日付

private Date date;

/**

* 文字列

private String str;

/**

* <p>[概要] dateを取得する。</p>

* <p>[詳細] </p>

* <p>[備考] </p>

* @return date

public Date getDate() {

return date;

}

/**

* <p>[概要] dateを設定する。</p>

* <p>[詳細] </p>

* <p>[備考] </p>

* @param date

public void setDate(Date date) {

this.date = date;

}

/**

* <p>[概要] strを取得する。</p>

* <p>[詳細] </p>

* <p>[備考] </p>

* @return str

public String getStr() {

return str;

}

/**

* <p>[概要] strを設定する。</p>

* <p>[詳細] </p>

* <p>[備考] </p>

* @param str

public void setStr(String str) {

this.str = str;

}

セキュリティ関連, ブログ

httpとhttpsの違い

2016年2月8日管理者コメントする

ここではhttpとhttpsの違いについてメモしておきます。
この2つを理解しやすくするには「http」と「https」の正式名称を思い浮かべるとイメージし易いでしょう。

http ：Hyper Text Transfer Protocol
https：Hyper Text Transfer Protocol Secure

httpsの「s」とは「セキュア」つまり「安全なhttp」という事です。
httpのホームページでは住所、氏名といった個人情報をそのままサーバへ送信してしまいます。一方httpsでは情報を暗号化してサーバへ送信します。
ブログなどのように相手に読ませるためだけのページであればhttpでも大きな問題にはなりにくいですが、ログイン画面や決済時にクレジットカードなどの個人情報を入力するような画面では「https」になっている事が大前提と言えます。逆に個人情報を入力するのに「http://～」となっているようなサイトであれば、セキュリティに対する認識が甘い企業と見られてしまうでしょう。

httpを使用する場合

広告やブログなど不特定多数の人に閲覧されても問題ない場合

httpsを使用する場合

ログイン情報、住所、氏名、クレジットカード番号などを入力する場合

djUnit, Eclipse, JUnit, Web開発, トラブル対応, ブログ

Eclipse：デフォルトのVM引数を設定する方法

2016年2月3日管理者コメントする

EclipseでJUnitやDjUnitを実行すると「junit java.lang.OutOfMemoryError: Java heap space」とメモリエラーが表示された場合は「デフォルトのVM引数」を設定する事でこの事象を回避する事が出来るのでその設定方法をご紹介します。

環境

Eclipse 4.2
Windows7 professional 64bit版

対処方法

Eclipseメニューの「ウィンドウ」⇒「設定」を選択します。
設定画面で「Java」⇒「インストール済みのJRE」⇒使用しているjdkを選択して「編集」ボタンを選択します。
JREの編集画面で「デフォルトのVM引数」へ以下の様に設定します。

INI

-Xms=1024m -Xmx=1024m -XX:PermSize=128m -XX:MaxPermSize=128m -XX:NewSize=320m -XX:MaxNewSize=320m -XX:SurvivorRatio=2 -XX:TargetSurvivorRatio=80

1

-Xms=1024m -Xmx=1024m -XX:PermSize=128m -XX:MaxPermSize=128m -XX:NewSize=320m -XX:MaxNewSize=320m -XX:SurvivorRatio=2 -XX:TargetSurvivorRatio=80

JUnit, Web開発, ブログ

JUnit：テスト・スイートクラスの作成方法

2016年1月31日管理者コメントする

通常JUnitでは1クラスに対して1クラス分のテストケースクラスを作成してテストを実施します。何らかの業務でプロジェクト全体での規模になってくるとその数は何十、何百、時には何千となる事も珍しいことではありません。
こういったプロジェクトでソースに何らかの修正が入り、テストを実施するという場合に1つずつJUnitで確認していたのでは実行するだけで無駄に時間が掛かってしまいます。
こういう場合には「テスト・スイートクラス」を作成して、まとめて実行して確認するのが一般的な手法となります。

環境

テスト・スイートクラスの作成手順

テストケースクラスが保存されているパッケージで右クリックし、「新規」⇒「その他」を選択します。
ウィザード画面で「JUnit」⇒「JUnitテスト・スイート」を選択し「次へ」ボタンを選択します。
テストスイートクラスのファイル名（デフォルトではAllTestsとなります）、保存先のフォルダ、テストしたいクラスを設定し、「完了」ボタンを選択します。

上記手順で以下の様なテスト・スイートクラスが作成されます。

import org.junit.runner.RunWith;
import org.junit.runners.Suite;
import org.junit.runners.Suite.SuiteClasses;

@RunWith(Suite.class)
@SuiteClasses({
	OverLoadSampleTest.class,
	OverRideSampleTest.class,
	SampleClass1Test.class,
	UtilClassDjUnitTest.class,
	UtilSample1Test.class,
	UtilSample1TestDjunit.class
})

/**
 * <p>[概 要] コンストラクタ</p>
 * <p>[詳 細] テスト・スイートクラスのコンストラクタ。</p>
 * <p>[備 考] </p>
 */
public class AllTests {
}

import org.junit.runner.RunWith;

import org.junit.runners.Suite;

import org.junit.runners.Suite.SuiteClasses;

@RunWith(Suite.class)

@SuiteClasses({

OverLoadSampleTest.class,

OverRideSampleTest.class,

SampleClass1Test.class,

UtilClassDjUnitTest.class,

UtilSample1Test.class,

UtilSample1TestDjunit.class

})

/**

* <p>[概要] コンストラクタ</p>

* <p>[詳細] テスト・スイートクラスのコンストラクタ。</p>

* <p>[備考] </p>

public class AllTests {

}

djUnit, Web開発, ブログ

djUnitで強制的にExceptionを発生させる方法

2016年1月28日管理者コメントする

djUnitではメソッドが呼び出された際、強制的に特定のExceptionを発生させる事も可能です。強制的にExceptionを発生させる場合には「addReturnValue」を使用します。
1点注意しておきたいのは「addReturnValue」を使用してExceptionを発生させた時はjunitで「@Test(expected = RuntimeException.class)」の様にアノテーションでは確認出来ないのでTry～catchで確認する必要があります。

Javaソース

    /**
     * <p>[概 要] URLエンコード処理</p>
     * <p>[詳 細] </p>
     * <p>[備 考] </p>
     * @param  str 文字列
     * @param  enc - 文字コード
     * @return URLエンコード後の文字列
     */
	public static String urlEncode(String str, String enc){
		String urlEncode = "";
		StringBuffer result = new StringBuffer();

		try {
			urlEncode = URLEncoder.encode(str, enc);
		} catch (UnsupportedEncodingException e) {
			throw new RuntimeException(e.toString());
		}

		// 半角スペースは「%20」へ置換する
		for(char c : urlEncode.toCharArray()) {
			switch (c) {
			case '+' :
				result.append("%20");
				break;
			default :
				result.append(c);
				break;
			}
		}

		return result.toString();
	}

/**

* <p>[概要] URLエンコード処理</p>

* <p>[詳細] </p>

* <p>[備考] </p>

* @param str 文字列

* @param enc - 文字コード

* @return URLエンコード後の文字列

public static String urlEncode(String str, String enc){

String urlEncode = "";

StringBuffer result = new StringBuffer();

try {

urlEncode = URLEncoder.encode(str, enc);

} catch (UnsupportedEncodingException e) {

throw new RuntimeException(e.toString());

}

// 半角スペースは「%20」へ置換する

for(char c : urlEncode.toCharArray()) {

switch (c) {

case '+' :

result.append("%20");

break;

default :

result.append(c);

break;

}

return result.toString();

}

djUnitサンプル

	@Test
	public void testUrlEncode_exception() {
		// 準備
		String str = "/&<>\"\' abc123";
		String enc = "utf-8";

		// 「URLEncoder.encode()」を実行した際、UnsupportedEncodingExceptionを発生させます。
		addReturnValue(URLEncoder.class, "encode", new UnsupportedEncodingException("MESSAGE001"));

		try {
			// 実行
			UtilSample1.urlEncode(str, enc);
			fail("この行は、実行されないはず");
		} catch (Throwable t) {
			assertTrue(t instanceof RuntimeException);
			assertEquals("java.io.UnsupportedEncodingException: MESSAGE001", t.getMessage());
		}
	}

@Test

public void testUrlEncode_exception() {

// 準備

String str = "/&<>\"\' abc123";

String enc = "utf-8";

// 「URLEncoder.encode()」を実行した際、UnsupportedEncodingExceptionを発生させます。

addReturnValue(URLEncoder.class, "encode", new UnsupportedEncodingException("MESSAGE001"));

try {

// 実行

UtilSample1.urlEncode(str, enc);

fail("この行は、実行されないはず");

} catch (Throwable t) {

assertTrue(t instanceof RuntimeException);

assertEquals("java.io.UnsupportedEncodingException: MESSAGE001", t.getMessage());

}

🚀 popover属性とは？

対応ブラウザ

🧱 基本の使い方

✅ 最小構成の例

🎨 スタイルを整える

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

🧠 裏側の仕組み

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

⚠️ 注意点

🌟 まとめ

🔮 今後の展望

関連記事

リモートデスクトップファイル「.rdp」ファイルの作成方法

関連記事

jdkのダウンロード

jdkのインストール手順

関連記事

環境

EclipseでのJBoss設定手順

関連記事

Struts「1.x」の特徴

Struts「2.x」の特徴

関連記事

環境

getter／setterメソッドの自動生成手順

関連記事

httpを使用する場合

httpsを使用する場合

関連記事

環境

対処方法

関連記事

環境

テスト・スイートクラスの作成手順

関連記事

Javaソース

djUnitサンプル

関連記事

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

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事