SQLの窓

2018年01月20日


コマンドプロンプトの省略ディレクトリ変更

例えば、C:\Program Files\Java へ移動したい場合、他に一致するディレクトリがなければ、以下のタイプで移動可能です。

cd \prog*\j*

環境変数にディレクトリがセットされている場合は、

cd %TEMP%

のように使用してそのディレクトリへ移動出来ます。

通常、コマンドプロンプトを実行すると、最初のディレクトリはユーザディレクトリになります。その下には、デスクトップやピクチャなど特別なものがたくさんあるので、以下のように移動可能です。

C:\Users\lightbox>cd d*
C:\Users\lightbox\Desktop>cd ..\p*
C:\Users\lightbox\Pictures>




posted by lightbox at 2018-01-20 01:04 | コマンドプロンプト | このブログの読者になる | 更新情報をチェックする

コマンド リダイレクト演算子を使用する : 直前の出力にエラー出力をリダイレクト

コマンド リダイレクト演算子を使用する

単純な リダイレクト は > でファイルに書き込むものです。>> を使うと、追加書き込みになります。このような記号は、リダイレクト演算子と呼ばれます。

昔(XP) のころは、Windows の ヘルプとサポートセンターから「コマンドプロンプト」で検索して、コマンド リダイレクト演算子を使用する を参照するとそこにあったのですが、今はインターネットより参照します。

dir の出力を file.txt に送り、エラーの出力を file.txt に送るには、次のように入力します。

dir > c:\temp\file.txt 2>&1
この記述もとても解り難いですが、標準出力とエラー出力を両方とも一つのファイルに書き込む方法だそうです。 解りやすいテストは、エラーだけに着目して、以下のように実行すると、x が存在しないのでメッセージが出ます。 dir x: > c:\temp\file.txt 指定されたパスが見つかりません。 このメッセージをファイルに書き込む為に以下のようにします dir x: > c:\temp\file.txt 2>&1 これで、c:\temp\file.txt に 指定されたパスが見つかりません。 と書き込まれます。
posted by lightbox at 2018-01-20 00:39 | コマンドプロンプト | このブログの読者になる | 更新情報をチェックする

2018年01月18日


jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )

jQuery の animate メソッドに渡せるのは、数値表現のプロパティのみなので、既存の要素では使えるものはほとんどありません。例えば、回転処理なんかもそのうちの一つですが、この方法を使えばどんなものでもアニメーション化できます。

この方法を解説していたのは、stackoverflow( CSS rotation cross browser with jquery.animate() ) でした

このソースでちょっと解りにくいのが、$({kakudo: 0}) の部分ですが、なんの事は無く {kakudo: 0} という超シンプルなオブジェクトに対してアニメーション処理をしようというわけで、このオブジェクトは当然 kakudo プロパティ を持っているので、step イベントが 0 度から 指定角度までの間呼ばれ続けるわけです。

それを利用した単純な繰り返し処理です。

その結果、いとも簡単にページ全体の回転処理を作成する事ができました。





<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({ 
	rotateAction: function(deg, duration, easing){
		var target = this;
		// ページ全体の回転の中心を作成する処理。(画像の場合は必要ありません)
		$(document.body).css({'transform-origin':'center '+($('html').scrollTop()+300) + 'px'});
		$({kakudo: 0}).animate(
			{kakudo: deg},
			{
				duration: duration,
				easing: easing,
				step: function(now) {
					target.css({
						transform: 'rotate(' + now + 'deg)'
					});
				}
			}
		);
	}  
});

</script>

<input type="button" value="画像回転" onclick='$("#target").rotateAction(360,1000,"swing");'>
<br>
<input type="button" value="全て回転" onclick='$(document.body).rotateAction(360,2000,"swing");'>
<br><br><br>

<img id="target" src="https://lh5.googleusercontent.com/-kCYTSmTrJXs/URvMQy9ClqI/AAAAAAAARuw/5BTKTk2c_sw/s128/_img.png" style="border: solid 0px #000000" />

関連する記事


posted by lightbox at 2018-01-18 15:49 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

jQuery でページを 50% に縮小するブックマークレット(2回目の実行は80%)


( Chrome と Firefox と IE で動作確認しました )
IE は、関数のデフォルト記述をできないので、scale_start の呼び出しに必ず引数が必要です。もし省略による値設定が必要な場合は、arguments.length と arguments[0] が必要になると思います

拡大する場合は、 transformOrigin を実行しておかないと、ページの中央にで拡大されてしまって左端が見えなくなります( デフォルトが 50% 50% なので )
縮小だけならばブラウザの縮小で対応できますが、ブラウザの場合元に戻すのが少し面倒なので、リロードで100% に戻せます。 1回目は外部 JavaScript の中のデフォルトとして 50% で縮小し、2回目は 80% で縮小するようにしました。 80% の指定は、ブックマークレットのコードの最後にある 0.8 を変更すると自由にカスタマイズできます。 リンクの href に埋め込まれたコード
javascript:if(!window['_bIScale']){window._bIScale={};(function(w,h,b,l,t,z,v){var wnd=document.createElement('iframe');with(wnd){id='myScale';frameBorder=b;width=w;height=h;with(style){position='absolute';left=l;top=t;zIndex=z;display=v;border='solid 1px #000';borderRadius='10px';}}document.body.appendChild(wnd);window._bIScale.wnd=wnd;var%20url;url='https://lightbox.sakura.ne.jp/toolbox/jquery_scale.js';wnd.contentWindow.document.write('<'+'script src=\''+url+'\' charset=\'utf-8\'></'+'script>');})(0,600,1,'0px','0px',1000,'');}else{document.getElementById('myScale').contentWindow.scale_start(0.8);}

整形したコード
javascript: if (!window['_bIScale']) {
    window._bIScale = {}; (function(w, h, b, l, t, z, v) {
        var wnd = document.createElement('iframe');
        with(wnd) {
            id = 'myScale';
            frameBorder = b;
            width = w;
            height = h;
            with(style) {
                position = 'absolute';
                left = l;
                top = t;
                zIndex = z;
                display = v;
                border = 'solid 1px #000';
                borderRadius = '10px';
            }
        }
        document.body.appendChild(wnd);
        window._bIScale.wnd = wnd;
        var % 20url;
        url = 'https://lightbox.sakura.ne.jp/toolbox/jquery_scale.js';
        wnd.contentWindow.document.write('&lt;' + 'script src=''+url+'' charset='utf - 8 '&gt;&lt;/' + 'script&gt;');
    })(0, 600, 1, '0px', '0px', 1000, '');
} else {
    document.getElementById('myScale').contentWindow.scale_start(0.8);
}



ブックマークレットに関する記事
関連する記事

▼ ブックマークレットから呼び出している js ファイルの内容
str="";
str+="<"+"script> \n";
str+="if ( window.addEventListener ) { \n";
str+="	window[window.location.hostname+'.loadjQuery'] = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; \n";
str+="} \n";
str+="else { \n";
str+="	window[window.location.hostname+'.loadjQuery'] = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; \n";
str+="} \n";
str+="document.write(\"<\"+\"script src=\\\"\" + window[window.location.hostname+'.loadjQuery'] + \"\\\"></\"+\"script>\"); \n";
str+="</"+"script> \n";
document.write(str);
function scale_start(scale) {
	$(parent.document.body).css({ transformOrigin: '50% 0' });
	$({"scale": 1}).animate(
		{"scale": scale},
		{
			duration: 1000,
			easing: "swing",
			step: function(now) {
				$(parent.document.body).css({
					transform: 'scale(' + now + ')'
				});
			}
		}
	);
}
str="";
str+="<"+"script> \n";
str+="scale_start(0.5); \n";
str+="</"+"script> \n";
document.write(str);
document.close();

※ transformOrigin を実行しておかないと、ページの中央に向かって縮小されてしまいます( デフォルトが 50% 50% なので )


posted by lightbox at 2018-01-18 14:38 | ブックマークレット | このブログの読者になる | 更新情報をチェックする

2018年01月14日


Google Chrome のみ動作する Data URLs を使用した『HTML/テキスト』変換アプリ

あれです。data:text/html,文字列 という形式でアプリケーションを書いてみようと思ったんですが、結局 Google Chroem でしか動かなかったという残念なアプリです。ですが、将来何かする時の参考データにはなるだろうと思って記録します。

使用する場合は、コピーしてアドレスバーに貼り付けるだけです。
data:text/html,<label for="check">div/textarea toggle</label> <input id="check" type="checkbox" onchange="if(this.checked){document.getElementById('edit').style.display='block';document.getElementById('div').style.display='none';document.getElementById('edit').value=document.getElementById('div').innerHTML;}else{document.getElementById('edit').style.display='none';document.getElementById('div').style.display='block';document.getElementById('div').innerHTML=document.getElementById('edit').value;}"><div id="div" contenteditable style="border:1px solid #ccc;height:calc(100% - 50px)"></div><textarea id="edit" style="display:none;width:100%;height:calc(100% - 50px);background-color:#f0f0f0"></textarea>

常に使用したい場合は、ブークマークバーにドラッグして名称を変更すれば良いです。

contenteditable 属性を div に適用しているので、他でコピーした HTML がそのままリアルに再現され、toggle すると、textarea に切り替わって転送されます。textarea で記述した内容はそのまま DIV 側にも反映されます。整形はできないので、オンラインツール等を使用するといいと思います。

サイズを calc 使って常に画面に収まるようにしているので、プロジェクタとかで Chrome 内のページとして拡大するといろんな使い方があると思います

▼ DIV に貼り付けて


▼ 切り替えると HTML




タグ:CHROME
posted by lightbox at 2018-01-14 00:49 | Comment(0) | Google Chrome | このブログの読者になる | 更新情報をチェックする
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり