SQLの窓

2018年02月03日


VBScriptで、ビットをスイッチとして使う記述

C言語と同じです。
| に相当する or を使用したり、& に相当する and を使用してビット演算が可能です

Or 演算子は、2 つの数式内の対応するビットに対するビット単位の比較も行います。
And 演算子は、2 つの数式内の対応するビットに対するビット単位の比較も行います
Xor 演算子は、2 つの数式内の対応するビットに対するビット単位の比較も行います。
Not 演算子は、変数に対してビット単位の反転も行います。

' 00000001	スイッチA
' &H1
' 00000010	スイッチB
' &H2
' 00000100	スイッチC
' &H4
' 00001000	スイッチD
' &H8

' スイッチA と スイッチ C をオンにする

flag = &H1 or &H4 ' ( つまり、&H5 )

' それぞれのスイッチがオンの時にメッセージを表示

if ( flag and &H1 ) = &H1 then
	Wscript.Echo "スイッチA"
end if
if ( flag and &H2 ) = &H2 then
	Wscript.Echo "スイッチB"
end if
if ( flag and &H4 ) = &H4 then
	Wscript.Echo "スイッチC"
end if
if ( flag and &H8 ) = &H8 then
	Wscript.Echo "スイッチD"
end if


※ 初期投稿 : 2009-07-03


【VBScript ベーシックの最新記事】
posted by lightbox at 2018-02-03 17:49 | VBScript ベーシック | このブログの読者になる | 更新情報をチェックする

2018年02月02日


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

重要

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

記事最後にこの記事内のみで舞うボタンがあります。
配布元は、Github ですがもう 2年くらい更新はされていないようですが、元々短いコードでとてもうまく動作します。 また、ダウンロードせずとも、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.2.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 2018-02-02 14:44 | Comment(0) | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )

2018/02 : 更新
1) 行番号部分をクリックするとソースを選択するようにしました。
2) 表示時にテキストエリアにフォーカスを移すようにしました。
3) コピー操作をしやすいように、テキストエリア内に padding-left を入れました。
4) ツールバーの不透明度を 0.5 => 0.8 に変更しました。
5) ツールバーに対する border の CSS を変更して見えやすくしました。
そもそも、SyntaxHighlighter を配布していたサイトが GitHub に移った上、バージョン4 になってるけれど、いろいろ一般的には面倒な事になってるので、古いバージョンを一生懸命使って来た... というのが現実でした。 しかし、ここに来て行単位を取り出す『ソースの表示』がしょぼい事や、クリップボードへコピーするのが Flash だったとか、印刷表示ができていない(理由は解ったので対応済み)とか、about のリンク先が終わってるとか、ロクでも無い現状を打破しました。 これらは、オリジナルの処理を書き換えるという方法で行ってます。マイナーバージョンが上がった際にあった shLegacy.js というスクリプトで実装できます。解る人はこのサイトのソースを見てもらってコピーすれば使えます。但し、ウチのバージョンは 2.0.296 なんで、世の中的には難しいでしょうけれど。
ありがたいことに、WEB アーカイブからダウンロードできました。

※ 他のバージョンも可能です。
※ ライセンスは GNU Lesser General Public License
ソースの表示 行番号対応しました。これは、JQuery Lined TextArea plugin というプラグイン使ってます。行番号だけあれば十分なので、既に開発も終わってる古いソフトですが、 MIT License だしソースは短いし、自分でどうにでもアップグレードできそうなので使う事にしました。 ▼ ウインドウを最大化した時に行番号を表示するという処理を、jquery-linedtextarea.js の中に追加しています( ソースはこれです )

			$(window).resize( function(){
				var domTextArea	= textarea[0];
				var scrollTop 		= domTextArea.scrollTop;
				var clientHeight 	= domTextArea.clientHeight;
				codeLinesDiv.css( {'margin-top': (-1*scrollTop) + "px"} );
				lineNo = fillOutLines( codeLinesDiv, scrollTop + clientHeight, lineNo );
			});
ただ、textarea を使うので、ウインドウを最大化した時の幅や高さの調整は自分で外から追加する必要がありました。



▼ 組み込んだ内容
SyntaxHighlighter.toolbar.items.viewSource = function(highlighter)
{
	this.create = function()
	{
		return "\u884c\u756a\u53f7\u4ed8\u304d\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u3067\u30bd\u30fc\u30b9\u3092\u8868\u793a\u3057\u307e\u3059";
	};
	
	this.execute = function(sender, event, args)
	{
		var wnd = SyntaxHighlighter.utils.popup('', '_blank', 750, 400, 'location=0, resizable=1, menubar=0, scrollbars=1')
			;
		
		var code = SyntaxHighlighter.utils.unindent(
			SyntaxHighlighter.utils.fixForBlogger(highlighter.originalCode)
				.replace(/&lt;/g, '<')
				.replace(/&gt;/g, '>')
				.replace(/&amp;/g, '&')
				.replace(/\n/g, '\n')
			);
		code = SyntaxHighlighter.utils.unindent(code);
		
var str="";
str+="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> ";
str+="<"+"script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js\"></"+"script> \n";
str+="<"+"script src=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.js\"></"+"script> \n";
str+="<link id=\"link\" rel=\"stylesheet\" href=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.css\"> \n";
		wnd.document.write(str);

		wnd.document.write('<t'+ 'extarea readonly style="width:100%;height:350px">' + code + '</' + 'textarea>');

str="";
str+="<"+"script> \n";
str+="$(function() { \n";
str+="	$(\"textarea\").linedtextarea(); \n";
str+="	$(\".linedwrap\").css({\"width\":\"calc(100% - 20px\"}); \n";
str+="	$(\".lines\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+="	$(\"textarea\").css({\"width\":\"calc(100% - 80px)\", \"padding-left\":\"10px\"}); \n";
str+="	$(\"textarea\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+="	$(\"head\").append($(\"<title>\").text(\"\u30bd\u30fc\u30b9\u306e\u8868\u793a\")); \n";
str+="	$(\".codelines\").on(\"click\", function(){ $(\"textarea\").select() } ); \n";
str+="	$(\"textarea\").focus(); \n";
str+="}); \n";
str+="</"+"script> ";
		wnd.document.write(str);
		wnd.document.close();
	};
};

何も無いところに動的にいろいろやる必要があるので、document.write は仕方無いので使っています。
 document.write だけに関して言えば、将来性はそのへん疑問はありますが、当面しばらく大丈夫だと思ってます。

内容としては、動的に jQuery を書き出して、さらに jQuery のコードも書き出す事になってます。

高さと幅の調整は jQuery の部分の、本体とその親要素に対して calc を使って 100% から補正するというテクニックでやっています。

▼ 補正部分のみ取り出すとこうなります
<script> 
$(function() { 
	$("textarea").linedtextarea(); 
	$(".linedwrap").css({"width":"calc(100% - 20px"}); 
	$(".lines").css({"height":"calc(100% - 20px)"}); 
	$("textarea").css({"width":"calc(100% - 80px)"}); 
	$("textarea").css({"height":"calc(100% - 20px)"}); 
	$("head").append($("<title>").text("ソースの表示")); 
	$(".codelines").on("click", function(){ $("textarea").select() } ); 
	$("textarea").focus(); 
}); 
</script>

次は、クリップボードのお話です

自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボードにコピー )


以下は、一般的なコードサンプルになります
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

$(function(){

	$("#open_window").on("click", function(){

		code = $("#code").val();

		var wnd = win_open("","_blank",750, 400, "location=0,resizable=1,menubar=0,scrollbars=1");

var str="";
str+="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> ";
str+="<"+"script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js\"></"+"script> \n";
str+="<"+"script src=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.js\"></"+"script> \n";
str+="<link id=\"link\" rel=\"stylesheet\" href=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.css\"> \n";
		wnd.document.write(str);

		wnd.document.write('<t'+ 'extarea readonly style="width:100%;height:350px">' + code + '</' + 'textarea>');

str="";
str+="<"+"script> \n";
str+="$(function() { \n";
str+="	$(\"textarea\").linedtextarea(); \n";
str+="	$(\".linedwrap\").css({\"width\":\"calc(100% - 20px\"}); \n";
str+="	$(\".lines\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+="	$(\"textarea\").css({\"width\":\"calc(100% - 80px)\", \"padding-left\":\"10px\"}); \n";
str+="	$(\"textarea\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+="	$(\"head\").append($(\"<title>\").text(\"\u30bd\u30fc\u30b9\u306e\u8868\u793a\")); \n";
str+="	$(\".codelines\").on(\"click\", function(){ $(\"textarea\").select() } ); \n";
str+="	$(\"textarea\").focus(); \n";
str+="	$(\"body\").css({\"overflow-y\":\"y:hidden\"}); \n";
str+="}); \n";
str+="</"+"script> ";
		wnd.document.write(str);
		wnd.document.close();

	});

});

function win_open(url, name, width, height, options)	{
	var x = (screen.width - width) / 2;
	var y = (screen.height - height) / 2;
	options +=
		', left=' + x + 
		', top=' + y +
		', width=' + width +
		', height=' + height
	;
	// 先頭のカンマを取り除く
	options = options.replace(/^,/, '');

	var win = window.open(url, name, options);
	win.focus();
	return win;
}
</script>
<input id="open_window" type="button" value="window を開く">
<br>
<textarea id="code" style='width:400px;height:300px'></textarea>




posted by lightbox at 2018-02-02 14:31 | Comment(0) | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2018年02月01日


jQuery UI の Autocomplete Combobox をさらにカスタマイズして、『Form の送信で使用する入力可能なコンボボックス』にする



jQuery UI のデモでは、入力した内容がリストに無ければエラーになりますが、そのチェック部分を省いて、さらに内部で作成される INPUT 要素に id 属性と name 属性をセットするインターフェイスを追加しました。

FORM で送信すると、リストに無い内容(例:VB)だと ?basecombo=&combo_input=VB となり、存在するものだと basecombo と combo_input は同じになります
id と name には、data メソッドで引き渡した内容(key:input_name)をセットします ※ 現時点(2018/02/01)で jQuery UI は、1.12.1 である必要があります
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<style>
.custom-combobox {
	position: relative;
	display: inline-block;
}
.custom-combobox-toggle {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: -1px;
	padding: 0;
}
.custom-combobox-input {
	margin: 0;
	padding: 5px 10px;
}
</style>

<script>
$( function() {
	$.widget( "custom.combobox", {
		_create: function() {
			this.wrapper = $( "<span>" )
				.addClass( "custom-combobox" )
				.insertAfter( this.element );

			this.element.hide();
			this._createAutocomplete();
			this._createShowAllButton();
		},

		_createAutocomplete: function() {
			var selected = this.element.children( ":selected" ),
				value = selected.val() ? selected.text() : "";

			var name = $(this.element).data("input_name");
			this.input = $( "<input id=\""+name+"\" name=\""+name+"\">" )
				.appendTo( this.wrapper )
				.val( value )
				.attr( "title", "" )
				.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
				.autocomplete({
					delay: 0,
					minLength: 0,
					source: $.proxy( this, "_source" )
				})
				.tooltip({
					classes: {
						"ui-tooltip": "ui-state-highlight"
					}
				});

			this._on( this.input, {
				autocompleteselect: function( event, ui ) {
					ui.item.option.selected = true;
					this._trigger( "select", event, {
						item: ui.item.option
					});
				},

				autocompletechange: "_removeIfInvalid"
			});
		},

		_createShowAllButton: function() {
			var input = this.input,
				wasOpen = false;

			$( "<a>" )
				.attr( "tabIndex", -1 )
				.attr( "title", "リストを開く" )
				.tooltip()
				.appendTo( this.wrapper )
				.button({
					icons: {
						primary: "ui-icon-triangle-1-s"
					},
					text: false
				})
				.removeClass( "ui-corner-all" )
				.addClass( "custom-combobox-toggle ui-corner-right" )
				.on( "mousedown", function() {
					wasOpen = input.autocomplete( "widget" ).is( ":visible" );
				})
				.on( "click", function() {
					input.trigger( "focus" );

					// Close if already visible
					if ( wasOpen ) {
						return;
					}

					// Pass empty string as value to search for, displaying all results
					input.autocomplete( "search", "" );
				});
		},

		_source: function( request, response ) {
			var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
			response( this.element.children( "option" ).map(function() {
				var text = $( this ).text();
				if ( this.value && ( !request.term || matcher.test(text) ) )
					return {
						label: text,
						value: text,
						option: this
					};
			}) );
		},

		_removeIfInvalid: function( event, ui ) {

			// Selected an item, nothing to do
			if ( ui.item ) {
				return;
			}

			// Search for a match (case-insensitive)
			var value = this.input.val(),
				valueLowerCase = value.toLowerCase(),
				valid = false;
			this.element.children( "option" ).each(function() {
				if ( $( this ).text().toLowerCase() === valueLowerCase ) {
					this.selected = valid = true;
					return false;
				}
			});

			// Found a match, nothing to do
			if ( valid ) {
				return;
			}

			// Remove invalid value

		},

		_destroy: function() {
			this.wrapper.remove();
			this.element.show();
		}
	});

	$( "#combobox" )
		.data("input_name", "combo_input")
		.combobox();

} );
</script>

<form>
<div class="ui-widget">
	<select id="combobox" name="basecombo">
		<option value=""></option>
		<option value="C">C</option>
		<option value="C++">C++</option>
		<option value="Java">Java</option>
		<option value="JavaScript">JavaScript</option>
		<option value="Perl">Perl</option>
		<option value="PHP">PHP</option>
		<option value="Python">Python</option>
		<option value="Ruby">Ruby</option>
	</select>
</div>
<input type="submit">
</form>

関連する記事

使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。


posted by lightbox at 2018-02-01 14:06 | Comment(0) | jQuery UI | このブログの読者になる | 更新情報をチェックする

2018年01月29日


JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法

SyntaxHighlighter カスタマイズ

SyntaxHighlighter のツールバーの右端のアイコンでファイルをダウンロードさせると、テキストのキャラクタセットは UTF-8 になります。通常はそれでもいいのですが、VBScript をダウンロードしてもらう場合は SHIFT_JIS である必要があるので、なんとかならないかと調べてみてすぐ見つけたのが

javascriptで文字コード変換

という Qiita の記事でした。その中で紹介されている ecl.js は、自分も以前使った事があったのですが、バイナリデータとして変換する目的では無いと記憶していました。ですが、一応記事の冒頭にあるコードでテストしてみましたがうまく行かず、Encoding.js のほうを使用して目的を達成しました。

Encoding.js

元々、バイナリの配列にデータを格納して変換しているので、文字列からの変換処理さえあればすぐ使えます。その関数は、Qiita の記事に既に紹介されていたのでとても簡単に実装する事ができました。

実装では、改行コードの扱いに留意して下さい。

サンプルコード
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="https://lightbox.sakura.ne.jp/homepage/js/encoding.js"></script>

<script>
var str2array = function(str) {
    var array = [],i,il=str.length;
    for(i=0;i<il;i++) array.push(str.charCodeAt(i));
    return array;
};
var str   = "あいうえお";
var array = str2array( str );
var sjis_array = Encoding.convert(array, "SJIS", "UNICODE");
var sjis_data = new Uint8Array(sjis_array);

saveAs(
	new Blob(
		[sjis_data]
		, {type: "text/csv;charset=shift_jis"}
	)
	, "shift_jis.txt"
);

</script>
※ テストはこちらから行えます(ここで copy してリンク先で貼り付けて実行して下さい)

関連する記事

ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存

ファイルを JavaScript から保存する FileSaver.js

FileSaver.js は saveAs メソッドを提供します。ダウンロードする必要は無く、cdnjs でホスティング されています。

Uint8Array


posted by lightbox at 2018-01-29 14:10 | Comment(0) | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
container 終わり

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

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