SQLの窓

2014年12月24日


IE11 でドキュメントモードを変更して IE8 として VBscript から jQuery にアクセスする

結論から言うと、VBScript から直接 jQuery のオブジェクトを操作できました。言語仕様の違いから、$ は使えませんし、無名ファンクションも無いので事前に Callback 関数を作っておけば VBScript 内でもイベント操作はできますが、関数の引数の仕様が全く違うので、複雑な処理は JavaScript 側で実行するのが吉です。

ただ、JavaScript のオブジェクトは VBScript から参照した時点で VBScript から普通にプロパティやメソッドを参照できる事には少し驚いています。ですが、これならば、Excel 等を使った既存の IE 専用のページで jQuery を使って画面制御やデータ取得が簡単にできそうです。

関連する記事

IE11 で VBScript を使う場合の注意事項 ( 古い社内アプリ移行時必見 )

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// JavaScript オブジェクト用プロパティ名
var jsKey = ["name", "age", "tel"];

// *************************************
// テーブル要素内より JSON を作成して
// VBScript 側に返す
// *************************************
function jsGetTableData() {

	var jsData = {}

	jQuery("#tdata tr").each( function( idx, el ) {
		jsData[jsKey[idx]] = $( el ).find("td").eq(1).text()
	} );

	return jsData;
}
</script>

<script language="VBScript">
' *************************************
' VBScript から JavaScript を呼び出して
' 必要なデータをオブジェクトして取得
' *************************************
Function vbsAction()

	' オブジェクトなので Set が必要です
	Set vbData = jsGetTableData()

	' jQuery を直接呼出しています
	jQuery("#p1").val( vbData.name )
	jQuery("#p2").val( vbData.age )
	jQuery("#p3").val( vbData.tel )

End Function

</script>

</head>
<body>
<input id="bt" type="button" value="実行" onclick="Call vbsAction()" language="VBScript">
<br>
<input id="p1" type="text"><br>
<input id="p2" type="text"><br>
<input id="p3" type="text"><br>

<table id="tdata">
<tr>
	<td>氏名</td><td>山田 太郎</td>
</tr>
<tr>
	<td>年齢</td><td>20</td>
</tr>
<tr>
	<td>電話番号</td><td>01-2345-6789</td>
</tr>
</table>
</body>
</html>




タグ:VBScript IE jquery
posted by lightbox at 2014-12-24 16:38 | IE | このブログの読者になる | 更新情報をチェックする

2014年12月22日


GIMP : 吹き出しスクリプトで作った画像の利用

日本語で配布されていたスクリプトがサイト閉鎖でダウンロードできないので、WEBアーカイブでダウンロードしたら、GIMP 2.8 で動かなかったのでオリジナルを探してみました。そうすると、バージョンアップ版を見つけたので日本語化して、変な効果が付いてしたのをコメントにしています。( 必要ならコメント外すかオリジナルを使ってみて下さい )(オプションにしました)

※ 動かなかったのは、他のスクリプトとの関数名の衝突でした。
※ ですから、バージョンアップ版は -3 と付加されています。また、バージョンアップ版のほうが色を指定できるので優れています。

バージョンアップ版をテストしていると、四角形の吹き出し処理がバグっている事が解ったので修正しました。また、ぼかし処理はオプションで実行可能にしました。

▼ オリジナルはバグがあります。
オリジナル





▼ 日本語化版


▼ ソースを直接エディタで保存する場合は UTF-8N で保存する必要があります
; balloon 
; creates a balloon like in comics
; it sucks a bit ;-)
; (C) Copyright 2000 by Michael Spunt <t0mcat@gmx.de>
; Gopal.V hacked it in 2002 to make it suck less (Aqua'ish)
; but cut a few corners (literally)
;
; ramok hacked it in 2006 to make colors

(define (round-balloon-3 img drawable bw bh lw rect np orientation revert fill border gauss)
  (let* ((x 0))
    (if (= np FALSE) 
      (begin
        (set! x (- (* bw 0.5) (* bw 0.2)))
        (gimp-ellipse-select img x (* bh 0.5) (* bw 0.4) (* bh 0.4) REPLACE TRUE FALSE 0)
        (set! x (- (* bw 0.5) (* bw 0.2) (* bw orientation -0.1)))
        (gimp-ellipse-select img x (* bh 0.5) (* bw 0.4) (* bh 0.4) SUB TRUE FALSE 0)))
    (if (= revert FALSE) 
      (gimp-selection-translate img (* bw orientation 0.3) 0))
    (if (= rect FALSE) 
      (gimp-ellipse-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.65) ADD TRUE FALSE 0))
    (if (= rect TRUE) 
      (gimp-rect-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.65) ADD FALSE 0))
    (gimp-palette-set-background fill)
    (gimp-palette-set-foreground border) 
    (gimp-edit-fill drawable 0)
    (gimp-selection-shrink img lw)
    (gimp-edit-fill drawable 1)
    (if (= gauss TRUE) 
      (begin
        (gimp-selection-none img)
        (plug-in-gauss-rle2 1 img drawable 5.0 5.0)
        (plug-in-bump-map 1 img drawable drawable 135 14 4 0 0 74 182 1 0 1)
      )
    )
))

(define (round-think-balloon-3 img drawable bw bh lw rect np orientation revert fill border gauss)
  (let* ((x 0))
    (if (= np FALSE) 
      (begin
        (set! x (+ (* bw 0.5) (* bw -0.025) (* bw orientation 0.3)))
        (gimp-ellipse-select img x (* bh 0.85) (* bw 0.05) (* bh 0.05) REPLACE TRUE FALSE 0)
        (set! x (+ (* bw 0.5) (* bw -0.05) (* bw orientation 0.2)))
        (gimp-ellipse-select img x (* bh 0.75) (* bw 0.1) (* bh 0.1) ADD TRUE FALSE 0)))
    (if (= revert TRUE) 
      (gimp-selection-translate img (* orientation bw -0.3) 0))
    (if (= rect FALSE) 
      (gimp-ellipse-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.65) ADD TRUE FALSE 0))
    (if (= rect TRUE) 
      (gimp-rect-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.625) ADD FALSE 0))
    (gimp-palette-set-background fill)
    (gimp-palette-set-foreground border) 
    (gimp-edit-fill drawable 0)
    (gimp-selection-shrink img lw)
    (gimp-edit-fill drawable 1)
    (if (= gauss TRUE) 
      (begin
        (gimp-selection-none img)
        (plug-in-gauss-rle2 1 img drawable 5.0 5.0)
        (plug-in-bump-map 1 img drawable drawable 135 14 4 0 0 74 182 1 0 1)
      )
    )
))

(define (script-fu-balloon-3 bw bh lw rect np think right revert fill border gauss)
  (let* (
         (orientation 1)
         (side 1)
         (img (car (gimp-image-new bw bh RGB)))
         (balloon (car (gimp-layer-new img bw bh RGBA-IMAGE "Balloon3" 100 NORMAL))))
    (if (= right FALSE) (set! orientation -1))
    (gimp-image-add-layer img balloon 1)
    (gimp-display-new img)
    (gimp-edit-clear balloon)
    (if (= think FALSE) 
      (round-balloon-3 img balloon bw bh lw rect np orientation revert fill border gauss))
    (if (= think TRUE) 
      (round-think-balloon-3 img balloon bw bh lw rect np orientation revert fill border gauss))
    (gimp-selection-none img)
    (gimp-displays-flush)))

(script-fu-register "script-fu-balloon-3"
     "Balloon3..."
     "Creates a balloon like used in comics."
     "Michael Spunt"
     "Copyright 2000, Michael Spunt"
     "May 20, 2000"
     ""
     SF-ADJUSTMENT _"Image width"  '(240 10 2000 1 10 0 1)
     SF-ADJUSTMENT _"Image height" '(160 10 1000 1 10 0 1)
     SF-ADJUSTMENT "Line width"	   '(2 0 10 1 10 0 1)
     SF-TOGGLE "四角形"            FALSE
     SF-TOGGLE "吹き出しなし"	   FALSE
     SF-TOGGLE "妄想"              FALSE
     SF-TOGGLE "クチの向き(右)"  FALSE
     SF-TOGGLE "位置の反転"        FALSE
     SF-COLOR  "Fill"	            '(255 255 255)
     SF-COLOR  "Border"	            '(22 22 22)
     SF-TOGGLE "ぼかしあり"        FALSE)

(script-fu-menu-register "script-fu-balloon-3"
     "<Toolbox>/Xtns/Script-Fu/Text"
)


▼ ぼかし効果は枠線がぼやけてうっすら影が付いたようになって以下のようになります

( このバルーンはかなり大きいので目立たないですが、小さいと、もわっとした吹き出しになります )


GIMP : 漫画の吹き出しを作成するスクリプトを利用する


タグ:GIMP Script-Fu
posted by lightbox at 2014-12-22 20:22 | GIMP | このブログの読者になる | 更新情報をチェックする

GIMP : 超簡単にロゴ作成


GIMP : ロゴ作成用単色グラーデーションと「光沢」による簡単ロゴ作成
そもそも、GIMP には元々ロゴを作成する為のスクリプトがたくさん用意されているのですが、いろいろ作ってもそうそういいものはできません。いろいろやった結果、ずっとこれです。( ここのロゴも GIMP【光沢】です。 ) 特殊な燃えているロゴ凍っているロゴとかもスクリプトをダウンロードしてコピーすれば作れますが、あまり実用的では無いですね。 ▼ 最初はびっくりするんですが、使う場所無いです Gimp_logo4 Reflex Logo はちょっとかっこいいかもしれません ▼ reflex-logo.scm ( UTF-8Nで保存 )
;; Script-Fu Reflex

(define (apply-reflex-logo image drawable gradient displace merge)
 
	(let* (
		(old-bg (car (gimp-context-get-background)))
		(old-fg (car (gimp-context-get-foreground)))
		(old-gradient (car (gimp-context-get-gradient)))

		(image-width (car (gimp-drawable-width drawable)))
		(image-height (car (gimp-drawable-height drawable)))
		(area (+ image-width image-height))

		(c-x (car (gimp-drawable-offsets drawable)))
		(c-y (cadr (gimp-drawable-offsets drawable)))

		(white-layer (car (gimp-layer-new image image-width image-height RGBA-IMAGE "Blur" 100 NORMAL-MODE)))
		(text-layer (car (gimp-layer-new-from-drawable drawable image)))
		(fond-layer (car (gimp-layer-new image image-width image-height RGBA-IMAGE (string-append gradient) 100 NORMAL-MODE)))
		(horizon-layer (car (gimp-layer-new-from-drawable fond-layer image)))
		(bump-layer (car (gimp-layer-new image image-width image-height RGBA-IMAGE "Edge" 100 OVERLAY-MODE)))
		(blur-layer 0)
		(layer 0)
		(adjust 0) )


	(gimp-image-add-layer image white-layer -1)
	(gimp-image-add-layer image text-layer -1)
	(gimp-image-add-layer image fond-layer -1)
	(gimp-image-add-layer image horizon-layer -1)
	(gimp-image-add-layer image bump-layer -1)

	(gimp-edit-clear fond-layer) 
	(gimp-edit-clear horizon-layer)

	(gimp-layer-set-offsets white-layer c-x c-y)
	(gimp-layer-set-offsets text-layer c-x c-y)
	(gimp-layer-set-offsets fond-layer c-x c-y)
	(gimp-layer-set-offsets horizon-layer c-x c-y)
	(gimp-layer-set-offsets bump-layer c-x c-y)

(gimp-context-set-background '(255 255 255))
(gimp-edit-fill white-layer 1)
(set! blur-layer (car (gimp-image-merge-down image text-layer 0)))
(plug-in-gauss-rle2 1 image blur-layer (/ area 70) (/ area 70))

(gimp-context-set-gradient gradient)
(gimp-edit-blend fond-layer 3 0 0 100 0 0 FALSE FALSE 0 0 FALSE 0 0 0 (+ image-height displace))
(gimp-drawable-set-visible fond-layer FALSE)
(gimp-edit-blend horizon-layer 3 0 0 100 0 0 FALSE FALSE 0 0 FALSE 0 0 0 image-height)
(gimp-drawable-set-name horizon-layer "Reflex")
(set! adjust (* displace 2))
(plug-in-displace 1 image horizon-layer (/ area (- 70 adjust)) (/ area (- 70 adjust)) TRUE TRUE blur-layer blur-layer 1)

(gimp-context-set-foreground '(152 152 152))
(gimp-edit-fill bump-layer 0)
(plug-in-bump-map 1 image bump-layer blur-layer 135 27 7 0 0 0 0 TRUE TRUE 2)
(plug-in-gauss-rle2 1 image bump-layer 1 1)
(gimp-image-remove-layer image blur-layer)
(gimp-context-set-gradient "Three bars sin")
(plug-in-gradmap 1 image bump-layer)

(gimp-selection-layer-alpha drawable)
(if (> area 200)
    (gimp-selection-grow image (/ area 160))
    (gimp-selection-grow image 1))
(gimp-selection-invert image)
(gimp-edit-clear horizon-layer)
(gimp-edit-clear bump-layer)
(gimp-selection-none image)

(if (= merge TRUE)
	(begin
		(gimp-image-remove-layer image fond-layer)
		(gimp-image-merge-down image horizon-layer 0)
		(set! layer (car (gimp-image-merge-down image bump-layer 0)))
		(gimp-drawable-set-name layer "Script-fu reflex")
	)
)

(gimp-context-set-background old-bg)
(gimp-context-set-foreground old-fg)
(gimp-context-set-gradient old-gradient)

	)
)



;; ------------------------
;; script pour <image> 
;; ------------------------

(define (script-fu-reflex-logo-alpha image drawable gradient displace merge)

	(let* (
		(drawable (car (gimp-image-get-active-drawable image)))
		(var-select 0)
		(canal 0)
		(old-fg 0) )

  		(gimp-image-undo-group-start image)
    		
		(set! var-select (car (gimp-selection-is-empty image)))
		(if (= var-select TRUE) 
			(begin 
			)
			(begin 
				(set! canal (car (gimp-selection-save image)))
			)
		)
		(gimp-selection-none image)

		(set! old-fg (car (gimp-context-get-foreground)))
		(gimp-context-set-foreground '(0 0 0))

		(set! drawable (car (gimp-layer-copy drawable TRUE)))
		(gimp-layer-set-mode drawable NORMAL-MODE)
		(gimp-image-add-layer image drawable -1)
		(gimp-layer-set-preserve-trans drawable TRUE)
		(gimp-edit-fill drawable FOREGROUND-FILL)
		(gimp-layer-set-preserve-trans drawable FALSE)

		(apply-reflex-logo image drawable gradient displace merge)
    		
		(if (= var-select TRUE) 
			(begin 
			)
			(begin 
				(gimp-selection-load canal)
				(gimp-image-remove-channel image canal)
			)
		)

		(if (= merge TRUE)
			(gimp-image-merge-down image (car (gimp-image-get-active-drawable image)) 0)
			(gimp-image-remove-layer image drawable))

        (gimp-context-set-foreground old-fg)
		(gimp-image-undo-group-end image)
		(gimp-displays-flush)
  )
)

(script-fu-register "script-fu-reflex-logo-alpha"
       _"反射..."
        "反射"
        "Expression"
        "Free"
        "2006"
        "RGBA"
        SF-IMAGE      "Image"        0
        SF-DRAWABLE   "Drawable"     0
        SF-GRADIENT   "Gradient"     "Horizon 2"
        SF-ADJUSTMENT "ずらし量"     '(10 1 20 1 10 0 0)
        SF-TOGGLE     "レイヤー統合" TRUE
)

(script-fu-menu-register "script-fu-reflex-logo-alpha"
		_"<Image>/Filters/Alpha to Logo"
)



;; ------------------------
;; script pour <toolbox> 
;; ------------------------

(define (script-fu-reflex-logo text size font gradient displace merge)

  (let* (
	(image (car (gimp-image-new 256 256 RGB)))
	(bg-layer (car (gimp-layer-new image 256 256 RGBA-IMAGE "Background" 100 NORMAL-MODE)))
	(text-layer (car (gimp-text-fontname image -1 0 0 text 10 TRUE size PIXELS font))))

	(gimp-image-undo-disable image)

    (gimp-drawable-set-name text-layer "Text")
	(gimp-image-resize image (car (gimp-drawable-width text-layer)) (car (gimp-drawable-height text-layer)) 0 0)    	
	(apply-reflex-logo image text-layer gradient displace merge)

	(if (= merge FALSE)
		(begin 
	      (gimp-edit-fill text-layer WHITE-FILL)
	      (gimp-drawable-set-name text-layer "Background")
		)
	)

	(gimp-image-undo-enable image)
	(gimp-display-new image)
  )
)

(script-fu-register "script-fu-reflex-logo"
       _"反射..."
        "反射ロゴ"
        "Expression"
        "Free"
        "2006"
        ""
        SF-STRING     _"Text"               "Reflex"
        SF-ADJUSTMENT _"Font size (pixels)" '(200 2 1000 1 10 0 1)
        SF-FONT       _"Font"               "Cooper Heavy"
        SF-GRADIENT    "Gradient"           "Horizon 2"
        SF-ADJUSTMENT  "ずらし量"           '(10 1 20 1 10 0 0)
        SF-TOGGLE      "レイヤー統合"        FALSE
)

(script-fu-menu-register "script-fu-reflex-logo"
		_"<Image>/File/Create/Logos/追加ロゴ"
)
参考

WEB アーカイブ


タグ:GIMP
posted by lightbox at 2014-12-22 15:40 | GIMP | このブログの読者になる | 更新情報をチェックする

2014年12月21日


VB.net : GetSchema メソッドでデータベース内のテーブル一覧と指定したテーブルの列名一覧を取得する

▼ これは、ODBC ドライバを列挙するスクリプトです


この仕様は元々 ADO のものです。Framework のドキュメントからはとても解りづらくなっていますが、古いドキュメントで容易に確認できます。

SchemaEnum

C# のコードはこちら

VB.net から C# へのオンライン変換ツールを久しぶりに使ってみましたが、後から手作業で変更したのは、ControlChars.CrLf を "\r\n" にしただけでした。
Imports System.Data
Imports System.Data.Odbc

Module Module1

	Sub Main()

		' 新しい OdbcConnectionStringBuilder オブジェクトを作成
		Dim builder As New OdbcConnectionStringBuilder()

		' ドライバ文字列をセット ( 波型括弧{} は必要ありません ) 
		' 文字列を正確に取得するには、レジストリ : HKEY_LOCAL_MACHINE\SOFTWARE\ODBC\ODBCINST.INI
		builder.Driver = "MySQL ODBC 5.3 Unicode Driver"

		' 接続用のパラメータを追加
		builder.Add("SERVER", "localhost")
		builder.Add("DATABASE", "lightbox")
		builder.Add("UID", "root")
		builder.Add("PWD", "password")

		' 内容を確認
		Console.WriteLine(builder.ConnectionString)

		' 新しい OdbcConnection オブジェクトを作成
		Dim myCon As New OdbcConnection()

		' 接続文字列を設定
		myCon.ConnectionString = builder.ConnectionString

		' 接続を開く
		Try
			myCon.Open()
		Catch ex As OdbcException
			Console.WriteLine("接続エラーです")
			' Console.WriteLine( ex.Message )
			Call ErrorAction( ex )
			Exit Sub
		End Try

		' データベースのテーブル一覧のメタデータを取得
		' TABLE_CATALOG
		' TABLE_SCHEMA
		' TABLE_NAME
		' TABLE_TYPE
		Dim dataTable As DataTable = myCon.GetSchema(OdbcMetaDataCollectionNames.Tables)

		' 一覧表示
		Dim row As DataRow
		For Each row In  dataTable.Rows
			Dim column As DataColumn = dataTable.Columns.item("TABLE_NAME")
			Console.WriteLine( row.item(column) )
		Next

		' データベースの列名一覧のメタデータを取得
		' TABLE_CATALOG
		' TABLE_SCHEMA
		' TABLE_NAME
		' COLUMN_NAME
		' 配列で、対象データを絞る
		Dim restrictionValues As String() = {Nothing,Nothing,"社員マスタ"}

		' 社員マスタの列のメタデータ
		dataTable = myCon.GetSchema(OdbcMetaDataCollectionNames.Columns,restrictionValues)

		' 列名の一覧を表示
		For Each row In  dataTable.Rows
			Dim column As DataColumn = dataTable.Columns.item("COLUMN_NAME")
			Console.WriteLine(row.item(column))
		Next

		' 接続を閉じる
		myCon.Close()

		' OdbcConnection オブジェクトに使用されているすべてのリソースを解放
		myCon.Dispose()

		' 処理終了
		Console.WriteLine("処理が終了しました")

		' 一時停止
		Console.Write("Enterキーを押して下さい : ")
		Console.ReadLine()

	End Sub

	' **********************
	' エラー処理
	' **********************
	Sub ErrorAction( ex As OdbcException )

		Dim CrLf As String = ControlChars.CrLf
		Dim errorMessages As String = ""
		Dim i As Integer

		For i = 0 To ex.Errors.Count - 1
			errorMessages &= _
				"Index #" & i.ToString() & CrLf _
				& "Message: " & ex.Errors(i).Message & CrLf _
				& "NativeError: " & ex.Errors(i).NativeError.ToString() & CrLf _
				& "Source: " & ex.Errors(i).Source & CrLf _
				& "SQL: " & ex.Errors(i).SQLState & CrLf
		Next i

		Console.WriteLine(errorMessages)

	End Sub

End Module

関連する記事

ODBC ドライバの列挙 / VBScript

WMIのレジストリアクセスで、レジストリエントリの一覧を取得する VBScript クラス


タグ:ODBC
posted by lightbox at 2014-12-21 20:52 | VB.NET : データベース | このブログの読者になる | 更新情報をチェックする

2014年12月18日


jQuery の簡単なコードで並べた写真に枠を付けて影をつけてギャラリーっぽくする

対象の画像にクラスを設定して、それぞれの画像の下に DIV を挿入してその DIV の中に画像を移動して、DIV に CSS を設定するという単純な jQuery のコードです。

※ 画像の下に DIV を挿入は insertAfter
※ 挿入しても、DIV を参照中なので、each で同一数の DIV と 画像を対応させて親子関係に変更
※ 最後は CSS を設定
( CSS は、大外の $("<div></div>") に対して設定しても同じ )
▼ 加工あり



▼ 加工なし



<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("<div></div>")
		.insertAfter(".my_img")
		.each(function(index,el){
			$(el)
				.append( $(".my_img").eq(index) )
				.css({
					display: "inline-block",
					border: "solid 1px #909090",
					padding: "15px",
					"border-radius": "6px",
					"margin": "10px 10px 10px 10px",
					"box-shadow": "0px 25px 10px -15px rgba(0, 0, 0, 0.5)"
				})
		})
});
</script>
<pre>
▼ 加工あり
<img class="my_img" src="https://lh3.googleusercontent.com/-4ZqZUw6-1HE/S7p-TD-MTcI/AAAAAAAAWlI/eWK9s3GOQ9g/s200/b17geoff_vane028.jpg"><img class="my_img" src="https://lh3.googleusercontent.com/-XTFOpiEYp3M/TLftP9U802I/AAAAAAAABAo/awMVjyVyuqg/s200/b5architecture_interiors003.jpg">
<img class="my_img" src="https://lh3.googleusercontent.com/-M9YcIUraRf4/S1j75KHGTZI/AAAAAAAAWFc/PLkDRK9qC_Y/s200/b17diederik015.jpg">

</pre>

<pre>
▼ 加工なし
<img src="https://lh3.googleusercontent.com/-4ZqZUw6-1HE/S7p-TD-MTcI/AAAAAAAAWlI/eWK9s3GOQ9g/s200/b17geoff_vane028.jpg"><img src="https://lh3.googleusercontent.com/-XTFOpiEYp3M/TLftP9U802I/AAAAAAAABAo/awMVjyVyuqg/s200/b5architecture_interiors003.jpg">
<img src="https://lh3.googleusercontent.com/-M9YcIUraRf4/S1j75KHGTZI/AAAAAAAAWFc/PLkDRK9qC_Y/s200/b17diederik015.jpg">

</pre>




タグ:jquery
posted by lightbox at 2014-12-18 23:29 | jQuery | このブログの読者になる | 更新情報をチェックする

2014年12月16日


IE11 で、ソースマップを使用して圧縮された JavaScript のコードを圧縮する前の状態でデバッグする

Using the F12 developer tools

ソースマップは、圧縮されたスクリプトを圧縮前のスクリプトに同期させてユーザがオリジナルのスクリプトを参照しながらデバッグする機能です。

以下のサンプルは jQuery ですが、jQuery のバージョン毎にマップファイルとオリジナルスクリプトが必要になります。最新のバージョンのスクリプトの場合はダウンロードすれば済みますが、古いバージョンのスクリプトのマップファイルとオリジナルスクリプトが必要な場合は Google のホスティングより入手できますhttp://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.map
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js



IE では、ローカルのフォルダに両方置く

Google Chrome ですと、WEB を直接参照するようですが、IE ではローカル参照用のダイアログが開きます



ソースマップを使用するかしないかの切り替えは、右端のアイコンで実行できます






posted by lightbox at 2014-12-16 15:37 | IE | このブログの読者になる | 更新情報をチェックする

2014年12月12日


Twitter 上のつぶやきの中で表示されている短縮リンクや一部が省略されたURLをクリップボードへコピーする IE 拡張

▼ インストール(zip書庫)


Twitter 上のつぶやきの中で表示されている短縮リンクや一部が省略されたURLは、属性として展開した URL を持っています( data-expanded-url )。マウスカーソルを置くと、表示されますがそのままでは使え無いのでクリップボードにコピーします。

ie_twitter_expanded_link.wsf をエクスプローラからダブルクリックして下さい。

インストールは AppData\Roaming\laylaClass に行われます。

アンインストールは以下のコマンドをコマンドプロンプトで実行するか、同梱の
uninstall.bat をエクスプローラからダブルクリックして下さい

reg delete "HKCU\Software\Microsoft\Internet Explorer\MenuExt\Twitter 用 URL取得"
▼ 実行用 expanded_link.htm の内容
<meta http-equiv="content-type" content="text/html; charset=SHIFT_JIS">
<SCRIPT language="VBScript">

	Dim WshShell,RegName,strLocation,obj,doc

	Set WshShell = CreateObject("WScript.Shell")
	RegName = "Twitter 用 URL取得"

	' *************************************************
	' ウインドウサイズ
	' *************************************************
'	window.dialogWidth = "900px"
'	window.dialogHeight = "610px"

'	window.dialogTop = "100px"
'	window.dialogLeft = (window.screen.width/2)&"px"

	on error resume next
	ExecuteGlobal "function dummy(): end function"
	on error goto 0

	' SHIFTとCTRL用変数
	Dim keyflg1,keyflg2
	keyflg1 = False
	keyflg2 = False

Function setObj( src )
	Set obj = src
End Function
</SCRIPT>

<SCRIPT language="JavaScript">
setObj(external.menuArguments.event.srcElement);
</SCRIPT>
<html>
<head>
<title>Twitter 用 URL取得</title>
<meta http-equiv="content-type" content="text/html; charset=SHIFT_JIS">
<base target="_self">
</head>
<BODY>
<!--SHIFTとCTRLがおされているかどうかを取得するボタン-->
<INPUT id="btn" type=button onClick='keyflg1=window.event.shiftKey:keyflg2=window.event.ctrlKey'>
</BODY>
</html>
<SCRIPT language="VBScript">

	' ボタンの呼び出し
	document.getElementById("btn").click()

	on error resume next
	' *************************************************
	' アンカーの処理( レジストリ 0x20 )
	' obj は、カーソル下のオブジェクト
	' *************************************************
	tag = obj.tagName
	if Err.Number <> 0 then
		str = "カーソル下のオブジェクトを取得できませんでした"
	else

		tag = Ucase( tag )
		' *************************************************
		' リンクの場合
		' *************************************************
		if tag = "A" then

			stra = obj.getAttribute("data-expanded-url")
			if not IsNull(stra) then

				if Right(stra,1) = "/" then
					stra = Left(stra,Len(stra)-1)
				end if
				stra = Replace(stra,"/?", "?")
				alert(stra)
				Call window.clipboardData.setData("Text", stra )
			end if

		end if

	end if
	on error goto 0

</SCRIPT>




タグ:IE IE拡張
posted by lightbox at 2014-12-12 14:23 | IE拡張メニュー | このブログの読者になる | 更新情報をチェックする

2014年12月10日


jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル

JavaScript で要素を作成するとなると、createElement で作成する事になりますが、jQuery では直観的に HTML の文字列として作成するサンプルが jQuery の正式ドキュメントのいたるところで見る事ができます。

その際、大きく分けて二種類に分ける事ができますが、その差は親要素に対して実行するか、隣の要素に対して実行するかの違いになります。

.append と .prepend

append は、親要素の子要素として最後に挿入され、prepend は、先頭に挿入されます。さらに、appendToprependTo という、最初に挿入する要素を $("要素記述") で確定しておいて、appendTo( または prependTo )  でセレクタを指定して実行する二通りがあります。

後者のほうが、ソースコード上で作成される内容が最初に来るので意味が解りやすくなると思いますが、処理としては前者のほうが自然に記述できると思います。

.after と .before

afterbefore にも、insertAfterinsertBefore と言う、ペアとなるメソッドがありますが、append 等と違うのは、最初に指定する要素が隣の要素であるところです。しかし、親要素から、find メソッドで子孫全部から取り出したり、children メソッドで子要素だけを対象にする事もできるので、出来上がったコードが解りやすいかどうかの違いでしか現れません。どちらを使ってもいいと思います。

移動について

既存の jQuery のオブジェクト同士で実行すると移動になるので、この場合は一行で書かずに変数を使用して移動の対象と移動先を明確にしたほうが良いでしょう

置き換えについて

使い方のペアとして replaceWithreplaceAll というメソッドがあり、現在の要素の種類そのものを置き換える事ができます。ここでは、TD を TH に置き換えて、TH に対するスタイル設定が有効になるサンプルになっています。
一行目 タイトル

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#tbl {
	border: solid 2px #000000;
	border-collapse: collapse;
	margin-top:10px;
}
#tbl td {
	border: solid 1px #0000ff;
	padding:10px;
}
#tbl th{
	border: solid 1px #0000ff;
	padding:10px;
	background-color: #c0c0c0;
}
</style>
<input type="button" value="処理開始" id="test_start">
<table id="tbl" stryle=''>
<tr>
	<td>一行目</td>
	<td>タイトル</td>
</tr>
</table>

<script>
$("#test_start").click(function(){
	// テーブル内の td の背景色が全て 白 になります
	$( "#tbl" ).find("td").css( "background-color", "#ffffff" );

	// tbody のみが背景色赤になります
	$( "#tbl" ).children().css( "background-color", "red" );

	alert("一番外側の要素(table)の子要素(tr)を追加");
	$( "#tbl" ).append("<tr><td>10</td><td>20</td></tr>");

	alert("一番外側の要素(table)の子要素(tr)を先頭に挿入");
	$( "#tbl" ).prepend("<tr><td>11</td><td>21</td></tr>");

	alert("一行目/タイトルの次に行を挿入");
	$( "#tbl tr" ).eq(1).after("<tr><td>12</td><td>22</td></tr>");

	alert("一行目/タイトルを先頭に移動");
	var target = $( "#tbl tr" ).eq(1);	// タイトル部分
	$( "#tbl tr" ).eq(0).before(target);

	alert("一行目/タイトルを TD から TH に変更");
	$( "#tbl tr" ).eq(0).find("td").each(function(){
		var txt = $(this).text();
		$(this).replaceWith("<th>" + txt + "</th>");
	});
});

</script>


タグ:jquery
posted by lightbox at 2014-12-10 16:22 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

バッチ処理サンプル : Java sun.jdbc.odbc.JdbcOdbcDriver 用 各種 RDBMS 接続文字列

関連する記事

Java 8 で、sun.jdbc.odbc.JdbcOdbcDriver を使う手順



このサンプルは、Java をバッチでビルドして実行するサンプルです( SDK さえあれば実行できます )
ソースコードは SHIFT_JIS です。UTF-8 でビルドしたい場合は、UTF-8N で保存しなおして javac のパラメータに -encoding utf-8 を追加して下さい。ソースコード内のJDBC-ODBC ブリッジでの日本語設定用プロパティが必要がどうかは環境によって異なると思いますが、一応設定して動作しています。同様の機能が、RDBMS 側で用意されている場合(MySQL等)もあるので注意して下さい。
import java.util.*;
import java.sql.*;

public class Main {

	// ***************************
	// エントリポイント
	// ***************************
	public static void main(String[] args) {
		Main thisClass = new Main();
	}

	// ***************************
	// コンストラクタ
	// ***************************
	public Main() {
		super();
		my_acton();
	}

	// ***************************
	// 初期処理
	// ***************************
	private void my_acton() {

		// 接続用
		Connection con = null;
		// クエリー(SQL)用
		Statement stmt = null;
		// 結果セット用
		ResultSet rset = null;

		// 表示ツール
		MyTool out = new MyTool(">>>");
		out.println("処理開始");

		// 接続文字列
		String connectionString = "";

		// ***************************
		// ODBC 接続文字列
		// ***************************
		connectionString =
			"Provider=MSDASQL" +
			";Driver={Microsoft Access Driver (*.mdb, *.accdb)}" +
			";Dbq=" + System.getProperty("user.dir") + "\\販売管理B.accdb"+
			";";

		// 日本語設定用プロパティ
		Properties prop = new Properties();
		prop.put("charSet", "MS932");
		out.println(connectionString);

		try {
			// 接続
			con = DriverManager.getConnection("jdbc:odbc:"+connectionString, prop);
			// ステートメント作成
			stmt = con.createStatement();
			// SQL より レコードセット取得
			rset = stmt.executeQuery ( "select * from 社員マスタ" );

			// 一覧表示
			while( rset.next() ) {
				out.println( rset.getString( "氏名" ) );
			}

			// 後処理
			rset.close();
			stmt.close();
			con.close();

		}
		catch (Exception ex) {
			ex.printStackTrace();
			return;
		}

		out.println("処理終了");

	}

	// ***************************
	// 内部用クラス
	// ***************************
	private class MyTool {

		private String mark = null;

		MyTool(String pm) {
			mark = pm;
		}

		public void println(String str) {
			System.out.println( this.mark + str );
		}

	}

}

以下は接続文字列のサンプルです。Oracle は 純正ドライバを使用したほうが無難です。
// *********************************************
// Java sun.jdbc.odbc.JdbcOdbcDriver 用
// 各種 RDBMS 接続文字列
// *********************************************
String connectionString = "";

// *********************************************
// MDB
// *********************************************
connectionString =
	"Provider=MSDASQL" +
	";Driver={Microsoft Access Driver (*.mdb, *.accdb)}" +
	";Dbq=" + System.getProperty("user.dir") + "\\販売管理B.mdb"+
	";";

// *********************************************
// MySQL
// *********************************************
connectionString =
	"Provider=MSDASQL" +
	";Driver={MySQL ODBC 5.3 Unicode Driver}" +
	";SERVER=localhost" + 
	";DATABASE=lightbox" +
	";UID=root" +
	";PWD=password" +
	";Charset=sjis" +
	";";

// *********************************************
// Oracle( 純正 )
// *********************************************
connectionString =
	"Provider=MSDASQL" +
	";Driver={Oracle in OraClient11g_home1}" +
	";DBQ=vpc-019/ORCL" + 
	";UID=LIGHTBOX" +
	";PWD=LIGHTBOX" +
	";";

// *********************************************
// SQLServer
// SERVER は別名
// *********************************************
connectionString =
	"Provider=MSDASQL" +
	";Driver={SQL Native Client}" +
	";SERVER=lightbox" +
	";DATABASE=lightbox" +
	";UID=sa" +
	";PWD=password" +
	";";

connectionString =
	"Provider=MSDASQL" +
	";Driver={SQL Server}" +
	";SERVER=lightbox" +
	";DATABASE=lightbox" +
	";UID=sa" +
	";PWD=password" +
	";";



関連する記事

ODBC ドライバの列挙

Eclipse + WindowBuilder : JDBC と ODBC を使った、オールマイティなデータベース接続サンプル( MySQL / SQLServer / Oracle / Postgres / MS Access)

javamail でメール送信と、付属のバッチビルド用のスクリプトの解説



posted by lightbox at 2014-12-10 11:00 | java : データベース | このブログの読者になる | 更新情報をチェックする

2014年12月04日


テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました



概要

オリジナルはもう2年くらい処理の更新が無いのですが、問題点がいくつかあるので改造しました。問題点は、付属の css が中途半端なのと、上限と下限を設定できないので、一番大きい値がグラフの上限になり見にくいです。その上、Y軸のラベルの数字の間が自動なので100区切りとかになりません。そのあたりをオプションに追加しました。

enhance.js について

IE7 のエミュレーションでもグラフそのものは動作したので削除しています。

追加オプションと仕様変更



1) tableDisplay : デフォルトは true で、false にすると、データ元のテーブルを表示しない
2) top: グラフの上限
3) bottom : グラフの下限
※ yLabelInterval のデフォルトを 100 にして、Y軸の区切りの単位として変更
12月 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月
2013 712 1144 938 972 714 771 515 641 1051 1018 658 681
2014 857 1219 927 947 709 674 495 537 900 758 536 550
▼ 棒グラフ( dark 色 )


colors は、オプションで指定する場合は、データの数ぶん色を設定する必要があります。
タイトルは、th で指定する必要があります。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> 
if ( window[window.location.hostname+'.visualize'] !== true ) { 
	window[window.location.hostname+'.visualize'] = true; 
	(function(){
		var str="";
		str+="<link href=\"http://winofsql.jp/jquery/plugins/visualize/visualize-light.css\" type=\"text/css\" rel=\"stylesheet\"> \n";
		str+="<"+"script type=\"text/javascript\" src=\"http://winofsql.jp/jquery/plugins/visualize/excanvas.js\"></"+"script> \n";
		str+="<"+"script type=\"text/javascript\" src=\"http://winofsql.jp/jquery/plugins/visualize/visualize.jQuery.js\"></"+"script> \n";
		document.write(str);
	})();
} 
</script> 
<script type="text/javascript">
$(function(){
	$("#target_table").visualize({
		tableDisplay: true,
		type: "line",
		width: "400px",
		height: "200px",
		title: "電気使用量の推移",
		colors: ['#F5CE0A','#0AB2F5'],
		lineWeight: 2,
		top: 1300,
		bottom: 400,
		yLabelInterval: 100
	});
});
</script>
<style>
.visualize * {
	font-size: 12px!important;
	font-family: Arial,"メイリオ","MS Pゴシック";
}
.visualize .visualize-title {
	font-size: 24px!important;
	font-family: Arial,"メイリオ","MS Pゴシック";
}
.visualize { 
	margin: 20px 0 0 15px;
}
#target_table {
	border-collapse: collapse;
}
#target_table td, #target_table th {
	text-align: center;
	border: 1px solid #ddd;
	padding:2px 5px;
}
</style>
<table id="target_table">
<thead>
<tr>
	<td></td>
	<th>12月</th>
	<th>1月</th>
	<th>2月</th>
	<th>3月</th>
	<th>4月</th>
	<th>5月</th>
	<th>6月</th>
	<th>7月</th>
	<th>8月</th>
	<th>9月</th>
	<th>10月</th>
	<th>11月</th>
</tr>
</thead>
<tbody>
<tr>
	<th>2013</th>
	<td>712</td>
	<td>1144</td>
	<td>938</td>
	<td>972</td>
	<td>714</td>
	<td>771</td>
	<td>515</td>
	<td>641</td>
	<td>1051</td>
	<td>1018</td>
	<td>658</td>
	<td>681</td>
</tr>
<tr>
	<th>2014</th>
	<td>857</td>
	<td>1219</td>
	<td>927</td>
	<td>947</td>
	<td>709</td>
	<td>674</td>
	<td>495</td>
	<td>537</td>
	<td>900</td>
	<td>758</td>
	<td>536</td>
	<td>550</td>
</tr>
</tbody>
</table>


タグ:jquery
posted by lightbox at 2014-12-04 00:42 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり