SQLの窓

2014年02月28日


VBScript : Windows標準のオブジェクト(CDO.Message)とGMail(Yahoo!メール) を使ってメール送信

Windows8(64ビット) で動作しました。

メールサービスとしては、Gmail と Yahoo メールが使用可能でした。有料メールでは nifty メールで動作を確認しています。( Hotmail は CDO では使用できず、一般的に TLS の 587 で使用できます )

コマンドプロンプトから、以下のようにしてテストしています

cscript mail.vbs

最近 では、ssl を使わないとメール送信できませんので、smtpusessl が true になっています。
mail.vbs
' ***********************************************************
' 使用するパラメータ
' ***********************************************************
strFrom = "わたしです <ユーザ名@gmail.com>"
'strFrom = "わたしです <ユーザ名@yahoo.co.jp>"

strTo = "あなたです <宛先>"

strServer = "smtp.gmail.com"
'strServer = "smtp.mail.yahoo.co.jp"

nPort = 465
strUser = "ユーザ名"
strPass = "パスワード"

' ***********************************************************
' オブジェクト
' ***********************************************************
Set Cdo = WScript.CreateObject("CDO.Message")

' ***********************************************************
' 自分のアドレスと宛先
' ***********************************************************
Cdo.From = strFrom
Cdo.To = strTo

' ***********************************************************
' 件名と本文
' ***********************************************************
Cdo.Subject	= "件名の文字列 / " & Now()
Cdo.Textbody = "テキスト本文" & vbCrLf & "改行は vbCrLf"

' ***********************************************************
' CC BCC HTMLメール( CC BCC はどちらか片方  )
' ※ 両方指定すると CC
' ***********************************************************
Cdo.Cc = "ユーザ名@yahoo.co.jp,ユーザ名@hotmail.co.jp"
'Cdo.Bcc = "ユーザ名@yahoo.co.jp,ユーザ名@hotmail.co.jp"
Cdo.Htmlbody = "<img src=""http://winofsql.jp/image/winofsql.png"">"

' ***********************************************************
' ファイル添付あり
' ***********************************************************
Cdo.AddAttachment( "C:\Users\lightbox\Desktop\画像\_img.jpg" )
Cdo.AddAttachment( "C:\Users\lightbox\Downloads\del.gif" )

' ***********************************************************
' 設定
' ***********************************************************
Cdo.Configuration.Fields.Item _
 ("http://schemas.microsoft.com/cdo/configuration/sendusing") = 2
Cdo.Configuration.Fields.Item _
 ("http://schemas.microsoft.com/cdo/configuration/smtpserver") = strServer
Cdo.Configuration.Fields.Item _
 ("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = nPort
Cdo.Configuration.Fields.Item _
 ("http://schemas.microsoft.com/cdo/configuration/smtpusessl") = true

Cdo.Configuration.Fields.Item _
 ("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate") = 1
Cdo.Configuration.Fields.Item _
 ("http://schemas.microsoft.com/cdo/configuration/sendusername") = strUser
Cdo.Configuration.Fields.Item _ 
 ("http://schemas.microsoft.com/cdo/configuration/sendpassword") = strPass

' ***********************************************************
' 設定の反映
' ***********************************************************
Cdo.Configuration.Fields.Update

' ***********************************************************
' 送信
' ***********************************************************
on error resume next
Cdo.Send
if Err.Number <> 0 then
	strMessage = Err.Description
else
	strMessage = "送信が完了しました"
end if
on error goto 0

Wscript.Echo strMessage

関連する記事

Windows 標準の CDO.Message で簡単にバッチ処理からメールを送る
Basp21 を使ってバッチ処理からメールを送る

変更履歴
2013-01-09 : 初回投稿
2013-07-27 : Yahoo メールと Nifty メールでテスト
2014-02-28 : 添付ファイル、cc、bcc、HTML メール を追加


posted by lightbox at 2014-02-28 16:29 | VBS + インターネット | このブログの読者になる | 更新情報をチェックする

2014年02月27日


JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する

ブログシステム側で作成される HTML 要素には name や id が付いていないものもたくさんあり、class が付く事は良くありますが、何も無い要素もたくさんあります。

そのような要素はその要素の親から getElementsByTagName で取得するのが一般的です。child のつながりで取得すると、不要なテキストノードとかが混じって、ブラウザによって結果も違うからです。

class で取得する場合は、IE に関してだけバージョン制限があり、IE9 以上で getElementsByClassName が使用できます。

しかし、結局のところこういう IE の事情により jQuery を使う事が最も簡単な解決方法となります。

3) は目的の要素にクラスがあるので使用していますが、もし無ければ順序番号で参照する事になります。jQuery のままで順序番号を使用するには、4) のように .eq(n) を使います。ただ、この程度の参照であれば、5) のように jQuery から DOM に変更して .value プロパティを使うのもいいと思います。、
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src='" + window[window.location.hostname+'.loadjQuery'] + "'></"+"script>");
}
</script>
<table>
<tr>
<td>
	<input
		class="message"
		type="text"
		name="jtext"
		value="こんにちは"
	>
	<br>
	1) <input
		type="button"
		value="getElementsByTagName"
		onClick='
			alert( this.parentNode.getElementsByTagName("input")[0].value );
		'
	>
	<br>
	2) <input
		type="button"
		value="getElementsByClassName"
		onClick='
			alert( this.parentNode.getElementsByClassName("message")[0].value );
		'
	>( IE は 9以上 ) 
	<br>
	3) <input
		type="button"
		value="jQuery parent and children 1"
		onClick='
			alert( $(this).parent().children(".message").val() )
		'
	>
	<br>
	4) <input
		type="button"
		value="jQuery parent and children 2"
		onClick='
			alert( $(this).parent().children().eq(0).val() )
		'
	>
	<br>
	5) <input
		type="button"
		value="jQuery parent and children 3"
		onClick='
			alert( $(this).parent().children()[0].value )
		'
	>
</td>
</tr>
</table>




1)
2) ( IE は 9以上 )
3)
4)
5)
この例では、name 属性で getElementsByName で取得できますが、name はページ内で複数存在する可能性も無いわけでは無いので、コードが見えている範囲だけで言えば、このほうが確実となります

関連する記事

JavaScript と jQuery : 位置関係から id の無い要素の参照を取得


タグ:javascript
posted by lightbox at 2014-02-27 18:38 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

JavaScript DOM と jQuery : エレメントの参照

いくつかの一般的な参照方法と、最近知った id をそのまま使う方法(IE以外)と、jQuery を使った参照です


▼ jQuery

<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<form name="frm">
<input type="text" id="fld_id" name="fld_name" value="ABC">
</form>

<input type="button" value="FORM参照" onclick='alert(frm.fld_name.value)'>
<input type="button" value="IE以外で簡易id参照" onclick='alert(fld_id.value)'>
<input type="button" value="id参照" onclick='alert(document.getElementById("fld_id").value)'>
<input type="button" value="name参照" onclick='alert(document.getElementsByName("fld_name")[0].value)'>
<input type="button" value="tag参照" onclick='alert(document.getElementsByTagName("input")[0].value)'>
<br>
<br>▼ jQuery<br>
<input type="button" value="jQuery参照" onclick='alert($("#fld_id").val())'>
<input type="button" value="jQueryのDOM参照1" onclick='alert($("#fld_id").get(0).value)'>
<input type="button" value="jQueryのDOM参照2" onclick='alert($("#fld_id")[0].value)'>

tag 参照は、同じ要素が複数あるページでは先頭以外でうまくいきません。このページでは実際には以下のように記述しています
alert(document.getElementsByName("frm")[0].getElementsByTagName("input")[0].value)
目的の要素を含む要素で確定させておいて、その中の同じ要素の何番目かという選択をします


posted by lightbox at 2014-02-27 02:49 | JavaScript DOM | このブログの読者になる | 更新情報をチェックする

2014年02月25日


JavaScript : リンクのテキストの取得( Chrome、Firefox、IE / textContent、innerText、text、replace、jQuery )

標準でクロスブラウジング無しなら、replace なんですが、&lt; や &gt; に変換されている場合は、 innerHTML で < と > に戻るので、他は < と > を保持するのに対して、replace のみ 取り去ってしまいます。

となると、jQuery にまかせたほうが良いという事になります。

こうして並べてみると、Google Chrome の text が特異に見えます。元々は、IE の innerText が特異ではあったと思うのですが、Google Chrome が innerText を実装している流れで、text を改行ありにしたんだろうとは思います。改行無しなら textContent でいいわけですし。
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<a id="target" href="http://winofsql.jp"><b>あああ</b><br/><b>いいい</b><br/></a>
<script type="text/javascript">

var obj = document.getElementById("target");

if ( obj.textContent ) {
	alert("textContent:" + obj.textContent );
}

if ( obj.innerText) {
	alert("innerText:" + obj.innerText);
}

if ( obj.text ) {
	alert("text:" + obj.text);
}

var htmlString = document.getElementById("target").innerHTML;
var htmlString = htmlString.replace(/<[^>]+>/g, ""); 
alert("replace:"+htmlString );

alert( "jQuery:" + $("#target").text());

</script>


textContent innerText text replace jQuery
Chrome 改行なし 改行あり 改行あり 改行なし 改行なし
Firefox 改行なし × 改行なし 改行なし 改行なし
IE10・IE11 改行なし 改行あり 改行なし 改行なし 改行なし
IE9 改行なし 改行あり × 改行なし 改行なし
IE8 × 改行あり × 改行なし 改行なし



posted by lightbox at 2014-02-25 20:50 | JavaScript DOM | このブログの読者になる | 更新情報をチェックする

2014年02月22日


Googleのフレーズ検索 と いろいろな検索

>すべてのキーワードに指定した順序で一致する結果を得るには、
>フレーズ検索を使います。

>検索語句を二重引用符で囲む方法です。
語句を二重引用符("")で囲むと、その語句をまったく変更せずに、そのままの語順で完全に一致する語句が検索されます

トラブルやその回避方法や最適化

"トラブルやその回避方法や最適化"

完全に一致する語句を検索するには、それらの検索キーワードを引用符で囲みます。このオプションは、歌詞や書籍の一節を検索する場合に便利です。

関連する記事

Google 検索++ - NAVER まとめ

1) フレーズ検索("")
2) 特定のウェブサイト内を検索(site:)
3) 特定のキーワードを除外(-)
4) ワイルドカード検索(*)
5) OR 検索

グラフ検索例 

電卓




タグ:google
posted by lightbox at 2014-02-22 00:00 | Google | このブログの読者になる | 更新情報をチェックする

2014年02月19日


コマンドプロンプト(実質はVBScript)で、クリップボードの内容をファイルに出力する

もう、正式なドキュメントを見つけるのは困難ですが、以下のように、mshta.exe を使って、引数に URL の変わりに認識される vbscript: によって、VBScript を実行してクリップボードにアクセスしています。

コマンドプロンプト上の & はそのままではコマンドプロンプトの特殊記号なので ^ でエスケープしていますが、cmd.exe /c 以降で使う場合は、 /c 以降の内容を "(ダブルクォート) で囲う必要があるので注意して下さい。

str と "" を連結しているのは、str が null 等のエラーとなる可能性の値を無条件に文字列と変換する為です。( %temp% はテンポラリフォルダという認識で使用しています )
mshta.exe "vbscript:Execute("str=window.clipboardData.getData(""text""):CreateObject(""Scripting.FileSystemObject"").GetStandardStream(1).Write(str^&""""):close")" > %temp%\clip.txt
Windows7 では、クリップボードへの書き込みは clip.exe で容易に可能ですが、読込みは他のアプリケーションの力を借りないと実現しません。例えば、VBScript 内で実行するのであれば、InternetExplorer.Application を使った以下のような方法も存在します。

※ clipboardData オブジェクトには、getData と setData メソッドがあります

これは、Hey, Scripting Guy! でも紹介されている結構確実な方法で、これ以前より IE を利用したアプリケーションを作成しているプログラマにとっては常識のような内容でした。ただ、昔は IE の性能や PC の性能も悪かったので必ず成功していたかどうかはちょっと疑問が残ります( たぶん今は大丈夫だと思います )
※ Busy プロパティを使用した記述

ただ、セキュリティ上の理由により、デフォルトのインターネット設定では以下のようなダイアログが出てしまうのでそのままではバッチ処理には使えませんので注意が必要です。


Set objIE = CreateObject("InternetExplorer.Application")
objIE.Navigate("about:blank")
strText = objIE.document.parentWindow.clipboardData.GetData( "Text" ) & ""
objIE.Quit

Wscript.Echo strText

さらに、正式なドキュメントを見つける事はできませんでしたが、レジストリ情報からすると、どうやら Office 関連の COM らしい htmlfile というものが存在します。( 一応知識として知っておくといいと思います。/ セキュリティの問題はありません )
' Get clipboard text
Set objHTML = CreateObject("htmlfile")
text = objHTML.ParentWindow.ClipboardData.GetData("text")
VBScript を中心に考えると、最初のコマンドラインを実行した後に、パイプで cscript.exe をつなげて、VBScript 内で標準入力を読み込むという方法もあります。
mshta.exe "vbscript:Execute("str=clipboardData.getData(""text""):CreateObject(""Scripting.FileSystemObject"").GetStandardStream(1).Write(str^&""""):close")"|cscript //nologo g.vbs

g.vbs
Dim Input:Input=""
Do While Not WScript.StdIn.AtEndOfStream
	Input=Input&WScript.StdIn.ReadAll
Loop
WScript.Echo Input
Visual Studio が使える場合は、以下のリンク先の手順で自作 COM を作成して利用可能です

VB.net(VS2010) で COM へ公開して、WSH(VBScript) で利用する( C# でも同様 )

▼ C# によるテストコード
namespace ClassCom
{
    public class Class1
    {
        Microsoft.VisualBasic.Devices.Computer pc = new Microsoft.VisualBasic.Devices.Computer();
        public string Clipboard
        {
            get {
                return pc.Clipboard.GetText();
            }
            set {
                pc.Clipboard.SetText( value );
            }
        }
    }
}

▼ 実行
Set obj = Wscript.CreateObject("ClassCom.Class1")

Wscript.Echo obj.Clipboard
posted by lightbox at 2014-02-19 00:00 | コマンド : コマンド | このブログの読者になる | 更新情報をチェックする

2014年02月15日


jQuery UI の slider と Google のホスティング

jQuery や jQuery UI のライブラリは、Google がホスティングしているものを使ってまずテストしてからそれをダウンロードして使うのが間違い無いと思います。Google は、API でホスティングしているので、その立場上動作確認は相当されていると思います。

ただ、実際問題として、jquery-ui.css は、API では出力されないので(あるバージョンまではカタログはされているようですが)バグのような気もします。いずれにしても、jquery.min.js が前提で、jquery-ui.css と jquery-ui.min.js が必要になります。

Google でホスティングされている最新バージョンは、Google Hosted Libraries で確認します。
指定率 :
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
if ( window[window.location.hostname+'.loadjQueryUI'] !== true ) {
	window[window.location.hostname+'.loadjQueryUI'] = true;
	if ( typeof window[window.location.hostname+'.loadjQueryUIcode'] === 'undefined' ) {
		window[window.location.hostname+'.loadjQueryUIcode'] = '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js';
		window[window.location.hostname+'.loadjQueryUIcss'] = '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css';
	}
	document.write("<"+"link rel=\"stylesheet\" href=\""+ window[window.location.hostname+'.loadjQueryUIcss'] + "\">");
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQueryUIcode'] + "\"></"+"script>");
}
</script>

<div style='margin: 0 0 5px 0;'>指定率 :
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</div>
<div style='height:50px;'>
<div id="slider-range-min" style='width:200px;'></div>
</div>
<script type="text/javascript">
$( "#slider-range-min" ).slider({
	range: "min",
	value: 60,
	min: 0,
	max: 100,
	slide: function( event, ui ) {
		$( "#amount" ).val( ui.value + "%" );
	}
});
// 初回の値
$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) + "%" );
</script>

このコードは、ブログの記事で単独で貼り付けて動作する事を想定しており、複数記事が表示されるページでも、先頭の記事のものしか実行されません。また、ページのヘッダに jQuery の定義を固定ですれば記事中のロードはされません。

さらに、変数を事前に変更する事によって、バージョンを意図的に変更する事も想定しています。IE の古いバージョンは、jQuery の新しいバージョンで動作しないので一応対処はしています。

※ 実運用は、「ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js」をヘッダに一つだけ書くのがおすすめです。

ただ、UI は常に使用するとは限らないので記事内指定でもいいかもしれません。UIも常にヘッダに定義する場合は、window[window.location.hostname+'.loadjQueryUI'] = true; をヘッダ部分で同時に実行しておけば、記事内ではロードされません。



posted by lightbox at 2014-02-15 14:52 | jQuery UI | このブログの読者になる | 更新情報をチェックする

2014年02月14日


別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション

実行ページ
( IE は IE11 以上でないと動作しません )


画像を THREE.ImageUtils.loadTexture で読み込んで、3D オブジェクトにテクスチャとして使用します。公式の説明は発見していませんが、Google+ と Picasa(実質 Google+と同じ) の画像データは、access-control-allow-origin: * を返すので、このような処理に適しています。

ここでは、一つの画像を繰り返し貼り付ける事を想定しています。単純に一枚の画像を面にフィットさせる場合は縦・横のサイズは自由ですが、繰り返して貼りつける場合には、64、128、256、512といったサイズである必要があります( 縦と横が同じサイズの正方形である必要はありませんが、正方形以外のサイズはあまり意味がありません )

サイズが自由である事の確認は、リンク先のページで任意の画像( Google+ のどなたの画像でも OK )のURL をセットして、x、y方向の繰り返しを 1 と 1 にして送信ボタンをクリックすると処理されますのでご確認下さい。また、そのサイズで複数繰り返しを行うとうまく処理されないのも確認できます。 







access-control-allow-origin ヘッダ が返されていますが、Three.js の機能として、THREE.ImageUtils.crossOrigin = "*"; を実行する必要があります。

この処理は、ここ最近のバージョンでやっときちんと実装されたものだと思います。いつ変更されたかは確認していませんが、少なくとも r57 のバージョンで実行すると、設定しなくても動作してしまいます。しかし、r65 では設定が必要になっていますので、実装する場合はバージョンに注意する必要があります。( Three.js は仕様変更が頻繁なので、現実的にはバージョンアップで常に確認する必要があります )
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/three.min65.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/user_play1.js"></script>

<div id="three_area" style='width:600px;height:600px;'></div>

<script type="text/javascript"> 
 
var camera, scene, renderer; 
var user_play; 
 
// 処理開始 
build_3d_world(); 
 
function build_3d_world() { 
 
	// カメラ 
	camera = new THREE.PerspectiveCamera( 70, 1, 1, 10000 ); 
 
	// シーン 
	scene = new THREE.Scene(); 

	// MeshBasicMaterial( 影を使わない ) を使用しているのでライトは必要ありませんが、実行してもかまいません
//	scene.add( new THREE.AmbientLight( 0xffffff ) );

	// 別ドメインの場合必要です( access-control-allow-origin: * の例 )
	THREE.ImageUtils.crossOrigin = "*";

	// 画像は、repeat.set で繰り返しで貼り付ける事ができますが、
	// その為には、64、128、256、512といったサイズである必要があります 
	// 別ドメインの場合は、access-control-allow-origin: ヘッダを返す必要がありますが、
	// Google+ や Picasa の画像は全てかえすようです
	var map = THREE.ImageUtils.loadTexture( "https://lh5.googleusercontent.com/-Xgh7ru0xoXs/UvujW9la76I/AAAAAAAASd4/IFWELp7fpA8/s512/st.png" );
	map.wrapS = map.wrapT = THREE.RepeatWrapping = 1000;
	map.repeat.set( 2, 2 );

	object = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), new THREE.MeshBasicMaterial( { map: map } ) );

	object.position.set( 0, 0, 0 );
	scene.add( object );
 
	// レンダラー 
	renderer = new THREE.WebGLRenderer();
	// 以前は、div の背景色で設定していましたが、クリアカラーを指定するようになっています
	renderer.setClearColor( 0x444444 );
	renderer.setSize( 600, 600 ); 
 
	// 実装 
	document.getElementById("three_area").appendChild( renderer.domElement ); 
 
	// アニメーション 
	// 150 は回転効果の半径です
	user_play = new THREE.UserPlay1( scene, camera, renderer, animate, 150 ); 
	user_play.start(); 
 
} 
// ループ処理 
function animate() { 
 
	// アニメーションを行う為の次のフレームの呼び出し処理です
	requestAnimationFrame( animate ); 
	// この中で回転効果を処理しています
	user_play.render(); 
 
} 
 
</script>
THREE.ImageUtils.loadTexture で返されるのは THREE.Texture オブジェクトです。ここで最も重要な THREE.Texture の機能は、wrapSwrapT プロパティです。これは、平面における繰り返し方向に対するオプションをセットするプロパティで、それぞれ x 方向と y方向と考えて下さい。( S: 水平, T: 深さ, H: 高さ / 内部で、Vector2 に対応しているので、x と y )

オプションの値は 3つ 用意されていて、以下のようになっています
THREE.RepeatWrapping = 1000;
THREE.ClampToEdgeWrapping = 1001;
THREE.MirroredRepeatWrapping = 1002;
デフォルトは THREE.ClampToEdgeWrapping で、テクスチャを面に対して伸縮してセットする事を意味します。THREE.RepeatWrappingTHREE.MirroredRepeatWrapping は、それぞれテクスチャを繰り返してマッピングするもので、前者は境界毎に同じものが繰り返され、後者は境界毎に反転されたものが使用されます。 ただ、繰り返し処理を使っていても、繰り返す回数を 1 回だけにすると THREE.ClampToEdgeWrapping と同じ結果になります。 ※ map.repeat.set( 1, 1 ); 以下の処理は、Three.js の構築部分のみを明確にするためにアニメーション部分を外に出しています。 user_play1.js
THREE.UserPlay1 = function ( scene, camera, renderer, animate, radius ) {

	this.scene = scene;
	this.camera = camera;
	this.renderer = renderer;
	this.radius = ( radius !== undefined ) ? radius : 600;

	this.theta = 0
	this.animate = animate;


};
THREE.UserPlay1.prototype = {
	constructor: THREE.UserPlay1,
	start: function() {
		this.animate();
	},
	render: function() {
		this.theta += 0.1;

		this.camera.position.x = this.radius * Math.sin( THREE.Math.degToRad( this.theta ) );
		this.camera.position.y = this.radius * Math.sin( THREE.Math.degToRad( this.theta ) );
		this.camera.position.z = this.radius * Math.cos( THREE.Math.degToRad( this.theta ) );

		this.camera.lookAt( this.scene.position );
		this.renderer.render( this.scene, this.camera );
	}

};
これらのコードは、THREE.CanvasRenderer でも動作します。但しその場合はセグメントの境界が表示されてしまうので、THREE.MeshBasicMaterial のオプションとして overdraw: true を追加します。また、キューブのセグメント数( 4, 4, 4 ) は、THREE.CanvasRenderer での処理時に効力を発揮します( セグメント単位の画像のゆがみ表現となるので、セグメント数が少ないと全体としての歪みが大きくなります )

3D の原理の専門的な部分はよく解らないのですが、WebGL では平面のセグメント数が少なくても良いように感じています。『 object = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshBasicMaterial( { map: map } ) );』

関連する資料

ポリゴンメッシュ



posted by lightbox at 2014-02-14 17:43 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2014年02月11日


jQuery の .val() と .val('値') と一括変更用の .val(関数)

.val() はとても解りやすい便利なメソッドです。ちなにみに alert( $('#a1').val ) とすると .val メソッドのソースの内容が表示されます。

.val('値') もその逆ですから普通に使えてしまいますが、.val( 関数 ) はちょっと解りづらいです。関数が返した値で、オブジェクトの値を書き換えるのですが、その関数内では対象となったオブジェクトのインデックスと値が順次渡される仕様となっています。jQuery のドキュメントでは、無名関数で書かれていますが、以下のサンプルでは checkVal 関数として独立して定義して使用しています。関数内ではその時対象となるオブジェクトも参照できるので、使い方としては対象となるオブジェクトの値をキー(id)に対して明細を全て表示するような処理で使えます。( 明細は、XMLHttpRequest 等で取得 )
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<input class="action1" type="text" id="a1" value="lightbox" />
<input class="action1" type="text" id="a2" value="lightbox" />
<script type="text/javascript">

// val の引数として与える関数のサンプル
// もちろん無名関数でも良い
function checkVal( index, value ) {
	console.log(this.id);
	alert( index + "|" + value + " : これは入力フィールドのインデックスと現在の値です" );
	return( '変更' );
}

function action1() {

	// 現在の値の取得
	var x = $('#a1').val();

	// 表示
	alert("この値は、id=a1 の入力フィールドの現在の値です => "+x);

	// 現在の値を変更
	$('#a1').val('123');

	// 内容を変更する関数を呼び出す
	// input を両方変更するように、
	// index が変化しながら全て呼び出される
	$('input.action1').val(checkVal);

}

</script>
<input type="button" value="実行" onclick='action1();'>


もう少し具体的なサンプル

jQuery の .val(関数) を使用した、社員コードに対する明細データの表示サンプル


posted by lightbox at 2014-02-11 05:30 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2014年02月05日


Win8.1 ストアアプリ(JS) : Visual Studio 2013 で Three.js(v65) の WebGLRenderer の動作を確認しました

Visual Studio 2013 Professional の 90 日間の無償評価版をダウンロードしてインストールし、動作確認しました。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>App1</title>

    <!-- WinJS 参照 -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- App1 参照 -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/three.min65.js"></script>
    <script src="/js/OrbitControls.js"></script>
    <script src="/js/user_three.js"></script>

    <style>
        #three_area {
            margin: 20px 0px 0px 190px;
            width: 850px;
            height: 400px;
            border: solid #ffffff 1px;
        }

        #title_area {
            margin: 150px 0px 0px 190px;
            width: 820px;
            height: 60px;
            border: solid #ffffff 1px;
            font-size: 25px;
            padding: 15px;
        }

    </style>
</head>
<body>

    <div id="title_area">Windows 8.1 + Visual Studio 2013 + WebGL + Three.js v65</div>

    <div id="three_area"></div>

    <script>

        var cameraCube, sceneCube;

        var w = 850;
        var h = 400;

        // カメラ作成
        USER.camera = new THREE.PerspectiveCamera(70, w / h, 1, 10000);
        USER.camera.position.set(0, 0, 1);

        USER.camera2 = new THREE.PerspectiveCamera(50, w / h, 1, 500);
        USER.camera2.position.z = 0;

        // シーン作成
        USER.scene = new THREE.Scene();
        USER.scene2 = new THREE.Scene();

        // テクスチャの準備
        var path = "/images/";
        var format = '.jpg';
        var urls = [
                path + 'px' + format, path + 'nx' + format,
                path + 'py' + format, path + 'ny' + format,
                path + 'pz' + format, path + 'nz' + format
        ];

        // テクスチャの実装
        mesh = USER.meshPanorama(urls);
        USER.scene2.add(mesh);

        // レンダラー作成
        USER.renderer = new THREE.WebGLRenderer();
        USER.renderer.setSize(w, h);

        // 表示エリア設定
        document.getElementById("three_area").appendChild(USER.renderer.domElement);

        // コントロール作成
        USER.orbit();
        USER.controls.autoRotate = true;
        USER.controls.autoRotateSpeed = 0.5; //default 2.0

        // アニメーション開始
        USER.animate();

        // オーバーライド
        USER.animate = function () {

            requestAnimationFrame(USER.animate);

            USER.camera2.rotation.copy(USER.camera.rotation);
            USER.camera2.position.copy(USER.camera.position);
            USER.controls.update();
            USER.renderer.render(USER.scene2, USER.camera2);

        }


    </script>

</body>
</html>

▼ このコードは、実際 WEB 上で動作しているものです。

Three.js : WebGL限定の Cube テクスチャによる『パノラマ背景』

この時の Three.js は v57 で、Windows8.1 で動作確認するにあたり、最新版は v65 でした。しかし、v65 のほうでは OrbitControls.js の内部処理がかなり変更された結果、Windows8.1 上では画面がちらつくので元のコードに近い状態に変更して動作させました。( 373 行目の scope.update(); をコメントにしました )

以下は、メインコードを簡潔にする為のユーザコードです( user_three.js )
USER = {};
USER.camera = null;
USER.scene = null;
USER.camera2 = null;
USER.scene2 = null;
USER.renderer = null;
USER.controls = null;

USER.animate = function () {
	requestAnimationFrame( USER.animate );
	USER.controls.update();
}

USER.render = function() {
	USER.renderer.render( USER.scene, USER.camera );
}

USER.orbit = function() {

	USER.controls = new THREE.OrbitControls( USER.camera );
	USER.controls.addEventListener( 'change', USER.render );

}

USER.meshPanorama = function(urls) {

	var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
	reflectionCube.format = THREE.RGBFormat;

	// Skybox
	var shader = THREE.ShaderLib[ "cube" ];
	shader.uniforms[ "tCube" ].value = reflectionCube;

	var material = new THREE.ShaderMaterial( {

		fragmentShader: shader.fragmentShader,
		vertexShader: shader.vertexShader,
		uniforms: shader.uniforms,
		depthWrite: false,
		side: THREE.BackSide

	} );

	return new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), material );

}




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

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

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