SQLの窓

2020年05月17日


jQuery プラグイン : multiselect.js の使用方法とカスタマイズ

multiselect.js のダウンロードページ

( 以下では cdnjs より利用しています )


設置が簡単な multiselect.js ですが、( select 要素を選択するだけで標準的なリストを左右二つ作成してくれます )実際使うとなると、横幅や高さやパディングの調整は必要です。

さらに、デフォルトでは選択するリストが左側と決まっていますが、これは float で作成されているので、左右を入れ替えるだけで右側を選択できるようにできます
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" />
<script type="text/javascript">
$(function(){
	$('#select_item').multiSelect({
		keepOrder: true,
		selectableHeader: "<div class='header_item'>商品候補</div>",
		selectionHeader: "<div class='header_item'>対象商品</div>",
		afterSelect: function(values){
			console.log( values[0] )
			console.log( $( "#select_item").children( "option[value='"+values+"']" ).text() )
		},
		afterDeselect: function(values){
			console.log( values[0] )
			console.log( $( "#select_item").children( "option[value='"+values+"']" ).text() )
		}
})
});
</script>
<style>
.header_item {
	padding: 5px;
	text-align: center;
	border: solid 1px #ccc;
	margin-bottom:2px;
	background-color: #eee;
}
.ms-container {
	width: 600px;
}
.ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection {
	padding: 10px;;
}
.ms-container ul.ms-list{
  height: 300px;
}
/* 
	以下は、左右入れ替える為の CSS
	以下を設定しなければ、デフォルト仕様として左が選択可能になります   
*/
.ms-container .ms-selectable {
	float: right;
}
.ms-container .ms-selection {
	float: left;
}

</style>
<form
	method="get"
	id="target_form"
	target="my_ferame"
	action="https://winofsql.jp/php_get.php"
	accept-charset="utf-8">

	<input
		type="submit"
		name="send"
		id="send_check"
		value="送信">

	<select 
		multiple
		id="select_item"
		name="select_item[]">

		<option value='0001'>りんご</option>
		<option value='0002'>トマト</option>
		<option value='0003'>いくら</option>
		<option value='0004'>醤油</option>
		<option value='0005'>鳥唐揚</option>
		<option value='0006'>みりん</option>
		<option value='0007'>さんま</option>
		<option value='0008'>海苔</option>
		<option value='0009'>おにぎり</option>
		<option value='0010'>コロッケ</option>

	</select>
</form>
<br>
<iframe
	name="my_ferame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="200"></iframe>
キーも割り当てられていて、左右の矢印キーでリスト間移動ができ、上下矢印キーでリスト内を移動できます。
選択はスペースキーです。

イベント内(afterSelect と afterDeselect)では、values が引数となっていますが、上のソースでは、jQuery の セレクタで再度 SELECT 要素内の選択された OPTION のテキストも取得しています。
values は配列で定義されているので、values[0] として値を取得していますが、文字列と連結する場合はオリジナルサンプルでも直接使っていました
真ん中の矢印は画像なので、自作のものと置き換え可能です。 cssClass オプションの使い方 このオプションは、個別にクラスを実際定義するのでは無くコンテナにクラスを追加して個別にスタイル設定を可能にできるという意味があります。デフォルトでは、スタイルは全て ms-container というクラス名を先頭にしてセレクタが作成されているので、コンテナにクラスを追加すると、以下のような設定で cssClass に設定したクラス名を使用して個別に見栄えを変更できます。 このページでは、ms-container でクラス設定するように記述しているので、全ての multiSelect コンテンツが対象になりますが、デモ先では cssClass オプションを設定した multiSelect コンテンツ のみが設定されるようにしています。 cssClassselect_item を設定
<style>
.select_item {
	width: 600px;
}
.select_item .ms-selectable li.ms-elem-selectable, .select_item .ms-selection li.ms-elem-selection {
	padding: 10px;;
}
.select_item ul.ms-list{
  height: 300px;
}
/* 左右入れ替え */
.select_item .ms-selectable {
	float: right;
}
.select_item .ms-selection {
	float: left;
}
</style>

refresh メソッドの使い方

オリジナルページの説明には無い、refresh メソッドの意味なのですが、ソースコードを読んでみると最初に設定したオプションの状態でコンテンツを再構築していました。但し、SELECT 要素の現在の状態で再構築するので、見た目は変化ありません。

本来、最初に設定したオプションを変更してから実行すべきメソッドなのですが、オプション内容を変更する為のメソッドが用意されていません。ですが、内部で保持されているオプションの参照として、jQuery の data() メソッドで参照できる内容を使用できました。

これを使用すると、後から動的にスタイル設定やその他の設定を変更する事ができます。デモ先では、見栄えのスタイル設定を交互に変更しています( ソースもページ下部にあります )


	// ************************
	// CSS の切り替え
	// ************************
	$('#change_css').click(function(){
		var item1 = $("#select_item").data().multiselect.options.cssClass;
		if ( item1 == "target_item" ) {
			$("#select_item").data().multiselect.options.cssClass = "";	
			$("#select_item2").data().multiselect.options.cssClass = "target_item";
		}
		else {
			$("#select_item").data().multiselect.options.cssClass = "target_item";	
			$("#select_item2").data().multiselect.options.cssClass = "";
		}
		$('#select_item').multiSelect("refresh");
		$('#select_item2').multiSelect("refresh");
	});


ライセンスについて

WTFPL は、とても下品なライセンスですが、とても自由に使えるライセンスなのであまり気にしないでいいと思います。



posted by lightbox at 2020-05-17 15:32 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2020年05月15日


JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする

重要

特定の要素内のみで処理するには、その要素の中で position:absolute が作成されるので、position:relative を指定されたエリア内で行って下さい。

記事最後にこの記事内のみで舞うボタンがあります。
配布元は、Github ですがもう更新はされていないようですが、元々短いコードでとてもうまく動作します。 また、ダウンロードせずとも、cdnjs でホスティングされているのですぐ使えます。 使い方もシンプルですがオリジナルのデモページのソースを見れば、コードの読める方ならすぐ理解できると思います。ただ、deviceorientation に関しては、ソースのコメントにしか意味が書いて無かったようですが(On newer Macbooks Snowflakes will fall based on deviceorientation)、Macbook 専用の機能なのか、スマホ用なのか、ディスプレイが縦と横が変化する場合の対処モードのようです(未確認)。 以下が、一般的なWEBページ用の実装サンプルです(対象を document として、ページ全体に効果を反映させる) 元々は Snowfall なので画像なしで使えるのですが(そのほうがバリエーションも作成しやすい)、画像次第でいろいろなシチュエーションに使えると思います。 ここでは『花びら』ですが、画像の場合は2枚以上用意してそれぞれに対して snowfall を実行するといいです。また、場面によっては最初から実行したい場合もあるので、clear オプションで一旦無かった事にします。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
<script>
$(function(){

	$(document).snowfall('clear');

	$(document).snowfall({
		image: "https://lightbox.sakura.ne.jp/image/h1.png",
		flakeCount:10,
		minSize: 15,
		maxSize: 22,
		minSpeed:0.5,
		maxSpeed:1.5
	});

	$(document).snowfall({
		image: "https://lightbox.sakura.ne.jp/image/h2.png",
		flakeCount:10,
		minSize: 15,
		maxSize: 22,
		minSpeed:0.5,
		maxSpeed:1.5
	});

});
</script>


このコードをリアルタイムでコードを変更しながら試して見たい場合は、右上ツールバーのコピーボタンでクリップボードへコピーして、こちら(Run Page : リアルタイム html)のテキストエリアに貼り付けて『ページ作成』ボタンをクリックして下さい

▼ 実行イメージ


▼ このボタンでこの記事に花びらを



posted by lightbox at 2020-05-15 14:44 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2020年05月14日


HTML Application : JavaScript で Windows のいろいろなフォルダを開く

もともと、VBScript( WMI ) を使用して shell: で使用される文字列を全て取得して、動作するものを選択して JavaScript で動くようにしたものです。なので、拡張子が html のものを ActiveX を利用可能にした IE11 で WEB 上で表示しても実行できます。

アプリケーションの実行は、どういうわけか WScript.Shell ではなく Shell.Application を使用したほうが正しく動作しました。






<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">

<title>Windiows のフォルダを開く</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
<style>
body {
	padding: 10px;
	
}
.btn {
	text-align:left;
	width: 300px;
}
.desc {
	margin-left: 20px;
}
</style>
<script language='jscript'>
var WshShell = new ActiveXObject("WScript.Shell");
var Shell = new ActiveXObject("Shell.Application");
</script>
</head>
<body>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:MyComputerFolder' onclick='Shell.Explore("shell:MyComputerFolder")' language='jscript'><span class='desc'>PC</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:ControlPanelFolder' onclick='Shell.Explore("shell:ControlPanelFolder")' language='jscript'><span class='desc'>コントロール パネル\すべてのコントロール パネル項目</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Local Documents' onclick='Shell.Explore("shell:Local Documents")' language='jscript'><span class='desc'>ドキュメント</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:SendTo' onclick='Shell.Explore("shell:SendTo")' language='jscript'><span class='desc'></span>C:\Users\ユーザ名\AppData\Roaming\Microsoft\Windows\SendTo</div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Startup' onclick='Shell.Explore("shell:Startup")' language='jscript'><span class='desc'>C:\Users\ユーザ名\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Common Startup' onclick='Shell.Explore("shell:Common Startup")' language='jscript'><span class='desc'>C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Downloads' onclick='Shell.Explore("shell:Downloads")' language='jscript'><span class='desc'>ダウンロード</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Desktop' onclick='Shell.Explore("shell:Desktop")' language='jscript'><span class='desc'>デスクトップ</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:My Pictures' onclick='Shell.Explore("shell:My Pictures")' language='jscript'><span class='desc'>ピクチャ</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:AppData' onclick='Shell.Explore("shell:AppData")' language='jscript'><span class='desc'>C:\Users\ユーザ名\AppData\Roaming</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Common AppData' onclick='Shell.Explore("shell:Common AppData")' language='jscript'><span class='desc'>C:\ProgramData</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:AppsFolder' onclick='Shell.Explore("shell:AppsFolder")' language='jscript'><span class='desc'>Applications</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:PrintersFolder' onclick='Shell.Explore("shell:PrintersFolder")' language='jscript'><span class='desc'>すべてのコントロール パネル項目\プリンター</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Start Menu' onclick='Shell.Explore("shell:Start Menu")' language='jscript'><span class='desc'>C:\Users\ユーザ名\AppData\Roaming\Microsoft\Windows\Start Menu</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Recent' onclick='Shell.Explore("shell:Recent")' language='jscript'><span class='desc'>C:\Users\ユーザ名\AppData\Roaming\Microsoft\Windows\Recent</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:System' onclick='Shell.Explore("shell:System")' language='jscript'><span class='desc'>C:\Windows\System32</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:SystemX86' onclick='Shell.Explore("shell:SystemX86")' language='jscript'><span class='desc'>C:\Windows\SysWOW64</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Windows' onclick='Shell.Explore("shell:Windows")' language='jscript'><span class='desc'>C:\Windows</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:ProgramFiles' onclick='Shell.Explore("shell:ProgramFiles")' language='jscript'><span class='desc'>C:\Program Files (x86)</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Common Documents' onclick='Shell.Explore("shell:Common Documents")' language='jscript'><span class='desc'>C:\Users\Public\Documents</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Quick Launch' onclick='Shell.Explore("shell:Quick Launch")' language='jscript'><span class='desc'>C:\Users\ユーザ名\AppData\Roaming\Microsoft\Internet Explorer\Quick Launch</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Templates' onclick='Shell.Explore("shell:Templates")' language='jscript'><span class='desc'>C:\Users\ユーザ名\AppData\Roaming\Microsoft\Windows\Templates</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:RecycleBinFolder' onclick='Shell.Explore("shell:RecycleBinFolder")' language='jscript'><span class='desc'>ごみ箱</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Common Administrative Tools' onclick='Shell.Explore("shell:Common Administrative Tools")' language='jscript'><span class='desc'>C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Administrative Tools</span></div>
<br><br>

<div><input type='button' class='btn btn-outline-primary mb-2' value='C:\Program Files' onclick='Shell.Explore("C:\\Program Files")' language='jscript'><span class='desc'>C:\Program File</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='%TEMP%' onclick='Shell.Explore(WshShell.ExpandEnvironmentStrings("%TEMP%"))' language='jscript'><span class='desc'>C:\Users\ユーザ名\AppData\Local\Temp</span></div>
<div><input type='button' class='btn btn-outline-primary mb-2' value='hosts のあるフォルダ' onclick='Shell.Explore("C:\\Windows\\System32\\drivers\\etc")' language='jscript'><span class='desc'>C:\Windows\System32\drivers\etc</span></div>

<br><br>
<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:3D Objects' onclick='Shell.Explore("shell:3D Objects")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:AccountPictures' onclick='Shell.Explore("shell:AccountPictures")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:AddNewProgramsFolder' onclick='Shell.Explore("shell:AddNewProgramsFolder")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Administrative Tools' onclick='Shell.Explore("shell:Administrative Tools")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Application Shortcuts' onclick='Shell.Explore("shell:Application Shortcuts")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Cache' onclick='Shell.Explore("shell:Cache")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Camera Roll' onclick='Shell.Explore("shell:Camera Roll")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:CD Burning' onclick='Shell.Explore("shell:CD Burning")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Common Desktop' onclick='Shell.Explore("shell:Common Desktop")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Common Programs' onclick='Shell.Explore("shell:Common Programs")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Common Start Menu' onclick='Shell.Explore("shell:Common Start Menu")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Common Templates' onclick='Shell.Explore("shell:Common Templates")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:CommonDownloads' onclick='Shell.Explore("shell:CommonDownloads")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:CommonMusic' onclick='Shell.Explore("shell:CommonMusic")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:CommonPictures' onclick='Shell.Explore("shell:CommonPictures")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:CommonRingtones' onclick='Shell.Explore("shell:CommonRingtones")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:CommonVideo' onclick='Shell.Explore("shell:CommonVideo")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:ConnectionsFolder' onclick='Shell.Explore("shell:ConnectionsFolder")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Contacts' onclick='Shell.Explore("shell:Contacts")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Cookies' onclick='Shell.Explore("shell:Cookies")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:CredentialManager' onclick='Shell.Explore("shell:CredentialManager")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:CryptoKeys' onclick='Shell.Explore("shell:CryptoKeys")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Device Metadata Store' onclick='Shell.Explore("shell:Device Metadata Store")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:DocumentsLibrary' onclick='Shell.Explore("shell:DocumentsLibrary")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:DpapiKeys' onclick='Shell.Explore("shell:DpapiKeys")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Favorites' onclick='Shell.Explore("shell:Favorites")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Fonts' onclick='Shell.Explore("shell:Fonts")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:GameTasks' onclick='Shell.Explore("shell:GameTasks")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:History' onclick='Shell.Explore("shell:History")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:HomeGroupFolder' onclick='Shell.Explore("shell:HomeGroupFolder")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:ImplicitAppShortcuts' onclick='Shell.Explore("shell:ImplicitAppShortcuts")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Libraries' onclick='Shell.Explore("shell:Libraries")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Links' onclick='Shell.Explore("shell:Links")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Local AppData' onclick='Shell.Explore("shell:Local AppData")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Local Downloads' onclick='Shell.Explore("shell:Local Downloads")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:UsersLibrariesFolder' onclick='Shell.Explore("shell:UsersLibrariesFolder")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Local Music' onclick='Shell.Explore("shell:Local Music")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Local Pictures' onclick='Shell.Explore("shell:Local Pictures")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Local Videos' onclick='Shell.Explore("shell:Local Videos")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:LocalAppDataLow' onclick='Shell.Explore("shell:LocalAppDataLow")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:MusicLibrary' onclick='Shell.Explore("shell:MusicLibrary")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:My Music' onclick='Shell.Explore("shell:My Music")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:My Video' onclick='Shell.Explore("shell:My Video")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:NetHood' onclick='Shell.Explore("shell:NetHood")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:NetworkPlacesFolder' onclick='Shell.Explore("shell:NetworkPlacesFolder")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:OneDrive' onclick='Shell.Explore("shell:OneDrive")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:OneDriveCameraRoll' onclick='Shell.Explore("shell:OneDriveCameraRoll")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:OneDriveDocuments' onclick='Shell.Explore("shell:OneDriveDocuments")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:OneDriveMusic' onclick='Shell.Explore("shell:OneDriveMusic")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:OneDrivePictures' onclick='Shell.Explore("shell:OneDrivePictures")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:PicturesLibrary' onclick='Shell.Explore("shell:PicturesLibrary")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:PrintHood' onclick='Shell.Explore("shell:PrintHood")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Profile' onclick='Shell.Explore("shell:Profile")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:ProgramFilesX86' onclick='Shell.Explore("shell:ProgramFilesX86")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:ProgramFilesCommon' onclick='Shell.Explore("shell:ProgramFilesCommon")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:ProgramFilesCommonX86' onclick='Shell.Explore("shell:ProgramFilesCommonX86")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Programs' onclick='Shell.Explore("shell:Programs")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Public' onclick='Shell.Explore("shell:Public")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:PublicAccountPictures' onclick='Shell.Explore("shell:PublicAccountPictures")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:PublicGameTasks' onclick='Shell.Explore("shell:PublicGameTasks")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:PublicLibraries' onclick='Shell.Explore("shell:PublicLibraries")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:ResourceDir' onclick='Shell.Explore("shell:ResourceDir")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Roaming Tiles' onclick='Shell.Explore("shell:Roaming Tiles")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:Ringtones' onclick='Shell.Explore("shell:Ringtones")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:SavedGames' onclick='Shell.Explore("shell:SavedGames")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:SavedPictures' onclick='Shell.Explore("shell:SavedPictures")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:SavedPicturesLibrary' onclick='Shell.Explore("shell:SavedPicturesLibrary")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Screenshots' onclick='Shell.Explore("shell:Screenshots")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:Searches' onclick='Shell.Explore("shell:Searches")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:SearchHomeFolder' onclick='Shell.Explore("shell:SearchHomeFolder")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:SystemCertificates' onclick='Shell.Explore("shell:SystemCertificates")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:ThisDeviceFolder' onclick='Shell.Explore("shell:ThisDeviceFolder")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:ThisPCDesktopFolder' onclick='Shell.Explore("shell:ThisPCDesktopFolder")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:User Pinned' onclick='Shell.Explore("shell:User Pinned")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:UserProfiles' onclick='Shell.Explore("shell:UserProfiles")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:UserProgramFiles' onclick='Shell.Explore("shell:UserProgramFiles")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:UserProgramFilesCommon' onclick='Shell.Explore("shell:UserProgramFilesCommon")' language='jscript'><span class='desc'></span>
<input type='button' class='btn btn-outline-primary mb-2' value='shell:UsersFilesFolder' onclick='Shell.Explore("shell:UsersFilesFolder")' language='jscript'><span class='desc'></span></div>

<div><input type='button' class='btn btn-outline-primary mb-2' value='shell:VideosLibrary' onclick='Shell.Explore("shell:VideosLibrary")' language='jscript'><span class='desc'></span></div>
</body>
</html>



IE11 の設定






このページの PDF



posted by lightbox at 2020-05-14 19:26 | HTA ( HTMLアプリケーション ) | このブログの読者になる | 更新情報をチェックする

Windows Update 画面を表示するコマンド

▼ Windows10 


ファイル名を指定して実行より
ms-settings:windowsupdate
( Windowsキ− + R で ファイル名を指定して実行 )

コマンドプロンプトから実行する場合
start ms-settings:windowsupdate

これは、ms-settings: URI スキーム による設定アプリの起動方法です。その他の URI スキーム一覧はこちら( Windows 設定アプリの起動 )にあります

Windows のショートカット一覧はこちらにあります

▼ control.exe を使用する
ファイル名を指定して実行より
control.exe /name Microsoft.WindowsUpdate



posted by lightbox at 2020-05-14 01:35 | Windows | このブログの読者になる | 更新情報をチェックする

2020年05月11日


IE11 : 実行済みのページのソースをクリップボードにコピーする

F12 で開発者ツールを表示し、コンソールを開いて以下のコマンドを実行します。
window.clipboardData.setData("Text",document.getElementsByTagName("HTML")[0].outerHTML)
実行すると、通常はクリップボードを使ってもいいか確認ダイアログが出るので『アクセスを許可』して下さい。



▼ 設定部分



Google Chrome の場合
copy(document.getElementsByTagName("HTML")[0].outerHTML)




posted by lightbox at 2020-05-11 23:03 | IE | このブログの読者になる | 更新情報をチェックする

MySQL : DB のデータを簡単に沢山作る方法は inner join

ページ処理のテストを行う為に、元を 7 件として、56 件のデータに増やす方法です。それぞれの SQL は、RDBMS 毎に動作するように書き換えれば実行可能です。

元のテーブル

既に 7 件のテストデータがあり、phpMyAdmin でエクスポートしています。phpMyAdmin はたいていのレンタルサーバで用意されていると思いますし、XAMPP をインストールして Windows のローカルでも利用可能です。
CREATE TABLE IF NOT EXISTS `board` (
  `row_no` serial,
  `body` varchar(1000),
  `subject` varchar(200),
  `from` varchar(20),
  `pdate` datetime,
  `cdate` datetime,
  primary key(`row_no`)
)

※ row_no は自動採番列です

データ

以下はエクスポートしたデータです。
-- phpMyAdmin SQL Dump
-- version 4.9.2
-- https://www.phpmyadmin.net/
--
-- ホスト: 127.0.0.1
-- 生成日時: 
-- サーバのバージョン: 10.4.10-MariaDB
-- PHP のバージョン: 7.3.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- データベース: `lightbox`
--

-- --------------------------------------------------------

--
-- テーブルの構造 `board`
--

CREATE TABLE `board` (
  `row_no` bigint(20) UNSIGNED NOT NULL,
  `body` varchar(1000) DEFAULT NULL,
  `subject` varchar(200) DEFAULT NULL,
  `from` varchar(20) DEFAULT NULL,
  `pdate` datetime DEFAULT NULL,
  `cdate` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- テーブルのデータのダンプ `board`
--

INSERT INTO `board` (`row_no`, `body`, `subject`, `from`, `pdate`, `cdate`) VALUES
(1, 'ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。\r\n', '蜘蛛の糸-1', '芥川龍之介-1', '2016-05-28 13:15:04', '2016-05-09 11:52:51'),
(2, 'やがて御釈迦様はその池のふちに御佇みになって、水の面を蔽っている蓮の葉の間から、ふと下の容子を御覧になりました。この極楽の蓮池の下は、丁度地獄の底に当って居りますから、水晶のような水を透き徹して、三途の河や針の山の景色が、丁度覗き眼鏡を見るように、はっきりと見えるのでございます。', '蜘蛛の糸-2', '芥川龍之介-2', '2016-05-28 13:22:37', '2016-05-14 20:07:14'),
(3, 'するとその地獄の底に、陀多と云う男が一人、ほかの罪人と一しょに蠢いている姿が、御眼に止まりました。この陀多と云う男は、人を殺したり家に火をつけたり、いろいろ悪事を働いた大泥坊でございますが、それでもたった一つ、善い事を致した覚えがございます。と申しますのは、ある時この男が深い林の中を通りますと、小さな蜘蛛が一匹、路ばたを這って行くのが見えました。そこで陀多は早速足を挙げて、踏み殺そうと致しましたが、「いや、いや、これも小さいながら、命のあるものに違いない。その命を無暗にとると云う事は、いくら何でも可哀そうだ。」と、こう急に思い返して、とうとうその蜘蛛を殺さずに助けてやったからでございます。', '蜘蛛の糸-3', '芥川龍之介-3', '2016-05-28 13:18:36', '2016-05-14 20:08:07'),
(4, '御釈迦様は地獄の容子を御覧になりながら、この陀多には蜘蛛を助けた事があるのを御思い出しになりました。そうしてそれだけの善い事をした報には、出来るなら、この男を地獄から救い出してやろうと御考えになりました。幸い、側を見ますと、翡翠のような色をした蓮の葉の上に、極楽の蜘蛛が一匹、美しい銀色の糸をかけて居ります。御釈迦様はその蜘蛛の糸をそっと御手に御取りになって、玉のような白蓮の間から、遥か下にある地獄の底へ、まっすぐにそれを御下しなさいました。', '蜘蛛の糸-4', '芥川龍之介-4', '2016-05-28 13:17:26', '2016-05-14 20:08:11'),
(5, 'こちらは地獄の底の血の池で、ほかの罪人と一しょに、浮いたり沈んだりしていた陀多でございます。何しろどちらを見ても、まっ暗で、たまにそのくら暗からぼんやり浮き上っているものがあると思いますと、それは恐しい針の山の針が光るのでございますから、その心細さと云ったらございません。その上あたりは墓の中のようにしんと静まり返って、たまに聞えるものと云っては、ただ罪人がつく微な嘆息ばかりでございます。これはここへ落ちて来るほどの人間は、もうさまざまな地獄の責苦に疲れはてて、泣声を出す力さえなくなっているのでございましょう。ですからさすが大泥坊の陀多も、やはり血の池の血に咽びながら、まるで死にかかった蛙のように、ただもがいてばかり居りました。', '蜘蛛の糸-5', '芥川龍之介-5', '2016-05-28 13:16:09', '2016-05-09 11:52:51'),
(6, 'ところがある時の事でございます。何気なく陀多が頭を挙げて、血の池の空を眺めますと、そのひっそりとした暗の中を、遠い遠い天上から、銀色の蜘蛛の糸が、まるで人目にかかるのを恐れるように、一すじ細く光りながら、するすると自分の上へ垂れて参るのではございませんか。陀多はこれを見ると、思わず手を拍って喜びました。この糸に縋りついて、どこまでものぼって行けば、きっと地獄からぬけ出せるのに相違ございません。いや、うまく行くと、極楽へはいる事さえも出来ましょう。そうすれば、もう針の山へ追い上げられる事もなくなれば、血の池に沈められる事もある筈はございません。', '蜘蛛の糸-6', '芥川龍之介-6', '2016-05-28 13:19:27', '2016-05-14 20:08:07'),
(7, 'こう思いましたから陀多は、早速その蜘蛛の糸を両手でしっかりとつかみながら、一生懸命に上へ上へとたぐりのぼり始めました。元より大泥坊の事でございますから、こう云う事には昔から、慣れ切っているのでございます。', '蜘蛛の糸-7', '芥川龍之介-7', '2016-05-28 13:20:24', '2016-05-28 13:20:24');

--
-- ダンプしたテーブルのインデックス
--

--
-- テーブルのインデックス `board`
--
ALTER TABLE `board`
  ADD PRIMARY KEY (`row_no`),
  ADD UNIQUE KEY `row_no` (`row_no`);

--
-- ダンプしたテーブルのAUTO_INCREMENT
--

--
-- テーブルのAUTO_INCREMENT `board`
--
ALTER TABLE `board`
  MODIFY `row_no` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


inner join で増殖して追加

inner join で条件を書かなければ、n 行あれば、n x n 行の結果を返します。その際、同じ表を a と b で別名定義して自己結合させます。

結果の行は、board の 定義に合わせて a 表のみから取得して、row_no は 自動採番なので null as row_no として先頭に作成します。

その結果をさらに board に insert する事によって、row_no は、新しく自動採番された行として挿入されます。その結果 a( 最初の行数 ) + n( 元の行数 ) * n( 元の行数 ) の行を登録する事になります。
insert into board
select
	null as row_no,a.body,a.subject,a.from,a.pdate,a.cdate
	from board a
inner join `board` b
※ もう一回すると 3192 件になるので、これ以上は注意して実行する必要があります。

乱数関数で日付データのみ、ばらつかせる

ここではさほど厳密にバラつかせる必要は無かったので、時間部分に適用しています。
※ PIPES_AS_CONCAT は、文字列結合に Oracle と同じ || を使用可能にする設定です。
SET sql_mode='PIPES_AS_CONCAT';

update board set pdate = cast('2016/05/28 0' || truncate(Rand()*10,0) || ':00' as datetime)



posted by lightbox at 2020-05-11 19:36 | MySQL | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり