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>




タグ:IE jquery VBScript
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月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 | このブログの読者になる | 更新情報をチェックする
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 終わり