SQLの窓

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