logical　error :アーカイブ

Google

<< 2011年07月 | TOP | 2011年09月 >>

2011年08月21日

JavaScript : zIndex の最大値と思われる 0x7FFFFFFF を各ブラウザでテストしました

CSS で書く場合は、2147483647 ですが、CSS では固定で定義するものなので、最初からこの値を使う事はとても考えにくいですが、後から動的に設定する JavaScript として考える場合、0x7FFFFFFF という値は暗記できますし、都合がいいです。( 10進数が欲しい場合は、開発者ツールで console.log(0x7fffffff) を実行 )

実際に IE、Firefox、Chrome、Opera、Safari で、zIndex が 998 で定義されている場所へ、ブックマークレットで新しいエレメントを追加して以下のコードで一番手前に来るかどうかを試しましたが、正しく動作しています。

parent.document.getElementById("if").style.position='absolute';
parent.document.getElementById("if").style.width='650px';
parent.document.getElementById("if").style.height='100px';
parent.document.getElementById("if").style.left='0px';
parent.document.getElementById("if").style.top='0px';
parent.document.getElementById("if").style.zIndex=0x7FFFFFFF;
parent.document.getElementById("if").style.borderColor='#000000';
parent.document.getElementById("if").style.borderWidth='1px';
parent.document.getElementById("if").style.borderStyle='solid';

関連する記事

ブックマークレット : Googleのドメイン内検索を任意のページで実行

posted by lightbox at 2011-08-21 14:29 | JavaScript DOM |

2011年08月20日

IFRAME で埋め込んだ外部コンテンツから情報を取得する事ができる postMessage インターフェイス

カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。
で紹介したカラーピッカーを http://toolbox.winofsql.jp/color_picker.htm としてホステ
ィングしました。通常ならば、この中で決定した色コードを取得する事はできませんが、
postMessage で親ウインドウに色コードを post するようにしたので、利用する場合は、
その受け取りコードを書くだけで利用可能です。

<script type="text/javascript">
function get_post_message(e) {
	var result = eval(e.data);
	alert(result.rgb + "," + result.hsv.h + "," + result.hsv.s + "," + result.hsv.v );
}
if ( window.addEventListener ) {
	window.addEventListener('message',get_post_message, false);
}
else {
	window.attachEvent('onmessage',get_post_message);
}

</script>
<iframe
	src="http://toolbox.winofsql.jp/color_picker.htm"
	name="myframe"
	frameborder="1"
	scrolling="no"
	width="340"
	height="390"
></iframe>

関連する記事

JS : クロスドメインの IFRAME からデータを JSON 形式で引き渡す

タグ：postMessage クロスドメイン

posted by lightbox at 2011-08-20 20:16 | JavaScript コンテンツ |

2011年08月19日

Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する

list-style-image を使用すると、LI 要素の前に付くマークに任意の画像を指定できますが、フォントのサイズが変わっても、画像はそのままですからバランスが悪い場合があります。

Picasa は、URL にサイズ指定できるので、以下のような運用が可能になります。

あああああああああああああああ
あああああああああああああああ
あああああああああああああああ
あああああああああああああああ
あああああああああああああああ

あああああああああああああああ
あああああああああああああああ
あああああああああああああああ
あああああああああああああああ
あああああああああああああああ

こちらは、元の画像です



ここをクリックすると、以下のコードを編集しながらテストする事ができます

<style type="text/css">
.my_li li {
	font-size: 16px;
	list-style-image:url(http://lh4.googleusercontent.com/-K5VtJ3GdFXM/Tk2_0St9H3I/AAAAAAAADSI/Cbp0frLPgyU/s12/li_img.gif)
}
.my_li2 li {
	font-size: 26px;
	list-style-image:url(http://lh4.googleusercontent.com/-K5VtJ3GdFXM/Tk2_0St9H3I/AAAAAAAADSI/Cbp0frLPgyU/s18/li_img.gif)
}
</style>
<ul class="my_li">
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
</ul>
<ul class="my_li2">
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
</ul>

posted by lightbox at 2011-08-19 10:55 | HTML / CSS |

2011年08月18日

JS : クロスドメインの IFRAME からデータを JSON 形式で引き渡す

以下には、lightbox.on.coocan.jp/message_cd.htm をIFRAME で埋め込んでいます。
当然このブログはドメインが違うので、本来ならばアクセスできませんが、postMessage
の第二引数に "*" を渡す事によって(本来は個別指定)、 どんなドメインへもメッセージ
を送る事ができます。
( 開発者ツールを開いて実行して下さい : IE8 でも動きます )

ただ、送れるメッセージは文字列で一つだけなので、送り出すほうで JSON の文字列を
用意しておいて、こちら側ではそれを eval して利用しています。お互いのドメインの
管理者か同じまたは信頼し合えるならば、この方法で多くのデータを一度にやりとりで
きるはずです。

または、IFRAME 側を、埋め込むだけでどこでも使えるような一つの完全なユニットと
して設計する為に必要です。

データを受け取る為の定義(get_post_message)
※ 実際は、js ライブラリ化して、script 要素で読み込めば使えるようにします

<script type="text/javascript">
function get_post_message(e) {
	var prop;
	var result = eval(e.data);
	try {
		if ( console.dir ) {
			console.dir(result);
		}
		else {
			for( prop in result ) {
				console.log(prop+":"+result[prop]);
			}
		}
	}
	catch(e){}
}
if ( window.addEventListener ) {
	window.addEventListener('message',get_post_message, false);
}
else {
	window.attachEvent('onmessage',get_post_message);
}

</script>
<iframe
	src="http://lightbox.on.coocan.jp/message_cd.htm"
	name="myframe"
	frameborder="1"
	scrolling="yes"
	width="300"
	height="100"
></iframe>


ユニット側

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
<script type="text/javascript">
function t_message() {
	var value1 = document.getElementById("message1").value;
	var value2 = document.getElementById("message2").value;
	var objString = '({ "message1": "'+value1+'", "message2": "'+value2+'" })';
	parent.postMessage( objString, "*" );
}
</script>
</head>
<body>

<input
	type="text"
	id="message1"
	style='width:200px;'
	value="日本語表示1"
/>
<br />
<input
	type="text"
	id="message2"
	style='width:200px;'
	value="日本語表示2"
/>
<br />
<input
	type="button"
	value="post"
	onclick='t_message();'
/>

</body>
</html>

タグ：クロスドメイン postMessage

posted by lightbox at 2011-08-18 22:39 | JavaScript オブジェクト |

2011年08月16日

「フリーフォントではんこ画像作成」が大幅にバージョンアップしました

★ フリーフォントではんこ画像作成


最初は本当に「はんこ画像」を作ろうと思って作ったのですが、その為に文字列セットを4つ用意して、それぞれ座標や効果を付加していました。

そして、その中で「フォント」と「色」を全て同じにしていたのですが、今回それを別々に指定できるようにしたので、結果的に４つのフォントを合成して画像作成ができるようになりました。

○という文字を使ってはんこの枠を表現していましたが、それはそれで色を変えれるようにして、必要ならば「吹き出しフォント」に変更できるようにもしました。

以下はデフォルトのはんこ画像を少し変更して作ったデザインです。

田島屋


文字を入力するエリアは元々テキストエリアでしたが、サイズ変更をできないようにしていたのを解除して、Firefox や Google Chrome でサイズ変更を可能にしています。

改行を入れて縦書きもできるのでいろいろなバリエーションが可能です

タグ：フリーフォントはんこ画像

posted by lightbox at 2011-08-16 16:52 | 記録 |

2011年08月14日

カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。

位置移動もできるし、1アクションで色が決定できるし軽いのですが、ダウンロードしたパッケージは表示されているものより古い内容だったり、リサイズ機能もあったのですが、バグがあったので必要無いので削除しました。

FFFFFF

さらに必要な初期処理や色コード取得処理の説明も何も無く、名前空間も適当な作りで、プロパティ作っておいて使わずに、グローバル変数使ってたり、ID 決め打ちだったりしますが、そのぶん改造のしやすいコードです。

※ 初期化メソッドは追加しました

ここをクリックすると、以下のコードを編集しながらテストできます

<link href="http://toolbox.winofsql.jp/js/cp/plugin.css" rel="stylesheet" type="text/css" />
<div id="plugID" style='width:300px;height:70px;border:solid 1px #000'></div>
<div id="getColor" style='width:100px;height:20px;border:solid 1px #888;margin:15px 0 15px 0;'></div>
<input type="text" id="code">
<input
	type="button"
	value="色取得"
	onclick='_GLB("code").value=color.HSV_HEX(hsv);_GLBS("getColor").backgroundColor="#"+color.HSV_HEX(hsv)'
>

<div style='position:relative'>
<div id="mini" onmousedown="Picker.core('mini',event)">
   <div class="north">
      <span id="mHEX">FFFFFF</span>
      <div
          onmousedown="_GLBS('mini').display='none';"
      >x</div>
   </div>
   <div
      class="south"
      id="mSpec"
      style="height:128px;width:128px;"
      onmousedown="Picker.core('mCur',event); return false;" onselectstart="return false;"
   >
      <div
         id="mCur"
         style="top:86px;left:68px;"
      ></div>
      <img
         src="http://toolbox.winofsql.jp/js/cp/media/circle.png"
         onmousedown="return false;"
         ondrag="return false;"
         onselectstart="return false;"
      />
   </div>
</div>
</div>


<script type="text/Javascript" src="http://toolbox.winofsql.jp/js/cp/plugin.js"></script>
<script type="text/Javascript">
Picker.init(0,20);	// 位置指定
Picker.resize(300);	// 幅指定
</script>

オリジナル

Color Theory @ ColorJack

かなり前から、「フリーフォントで簡単ロゴ作成」で使っていたカラーピッカーの姉妹品なんですが、作者の興味は Canvas に移行していったようで、どちらもダウンロードできる内容はそのまま使えるようなものではありません。

Color Theory @ ColorJack の カラッピッカーの改造後のコード

posted by lightbox at 2011-08-14 22:31 | JavaScript ライブラリ |

<< 1 2 3 4 >>

Seesaa の各ページの表示について

Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>

この記述は、以下の場所で使用します

Seesaa ブログ

	SQLServer の BCP で INT IDENTITY 列に csv からリストアする
	MySQL に PIPES_AS_CONCAT を設定して、CSV を出力する SQL
	Chrome ポリシー : レジストリ : ( ChatGPT 解説 )
	PL/SQL : 最も簡単な CSV 出力の記述
	VBScript を『管理者として実行する』には、Shell の runas ( 右クリックメニューの実行と同等 ) で実現します / Jscript も追加
	fake sendmail for windows を使って、PHP でごく普通に( mb_send_mail で )メール送信
	TCPDF をダウンロードして、Windows の任意のフォルダで TCPDF 同梱のサンプルを実行する為の設定
	JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する
	TCPDF をダウンロードして、フリーフォントを埋め込み型で使用する方法
	汎用型 : JSON データより履歴書のフォームを出力するサンプル
	ChatGPT でトップまでスクロールするブックマークレット
	Replit : cs-list
	Replit : js-web-speech
	Replit : js-csv-read-utf8
	Replit : text-editor
	指定した位置でレジストリエディタを開く為の VBScript をダウンロードします
	JScript / VBScript : 指定したフォルダ内のフォルダ毎の使用済みサイズを読める範囲でレポートする
	デスクトップを部分キャプチャした時に切り取り&スケッチを起動してキャプチャ画像に枠線を付加させる。
	#Zoom の必殺技 : 相手に自分の Zoom 関連のウインドウを見せる
	GAS でユーザ作成 : 組織は "orgUnitPath": "/組織名A/組織名B"

	一部のファイル形式がブロックされる(GMail)
	Creating Shortcut Menu Handlers
	Microsoft Word のキーボードショートカット
	Excel のショートカットキーとファンクションキー
	サイトへの不自然なリンクを否認する新しいツールの提供を開始しました

logical error