SQLの窓

2015年08月19日


IFRAME を ブラウザのサイズ変更時のイベントでコントロールして、HTML5で廃止された FRAME と同様に使うサンプル

デモページ

※ 下の灰色の部分は全て IFRAME で、ブラウザのサイズ変更と同期します

結論から言いますと、IFRAME と FRAME の大きな違いは、上の画像のように jQuery の DatePicker のカレンダーが、IFRAME の上に展開されるというところです。FRAME の場合ですと、ブラウザが用意するコンボボックス等は FRAME の境界を越えて表示されますが、HTML で作成されるコンテンツは FRAME の境界の下に潜り込んでしまいます。

しかし、FRAME の便利な点は、WEB ページのデータ送信の結果を一方通行で別の FRAME に表示できるので、WEB アプリが元のページの内容を書き換える必要が無いところです。当然その特性は IFRAME も持っていますが、IFRAME は固定のウインドウとして表示されるものなので、ブラウザの大きさに同期して表示部分いっぱいいっぱいで利用するには( FRAME のように )、JavaScript でリアルタイムでサイズを変更する必要があります。

にもかかわらず、実際実装しようとすると、ページの縦のサイズを取得しようとすると、IFRAME が表示されているとうまく取得できない仕様になっていて、たいていは失敗する事になります。これを避けるには、IFRAME のサイズ変更は、IFRAME を非表示にして行う事で解決できました。
古い IE のシステムを想定して、IE8 で動作させる為に、header 関数で『x-ua-compatible: IE=8』 を送っています。

IE8 前提なので、jQuery のバージョンは低く設定しています
IE8 では、IFRAME の境界を CSS で消せませんので frameborder を使用しています

IE、Firefox、Google Chronme で正しく動作する為に、縦の補正値を使用しています

shift_jis を使用しているのは、SQLServer を ODBC 関数でアクセスする予定だからです

FORM の送り先は、accept-charset="utf-8" を使用して utf-8 を利用しています( 但しこの機能は IE8 コンパチブルでは動作しないので、受け取り側で対処する必要があります )

デモページのコード
<?php
header( "Content-Type: text/html; Charset=shift_jis" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "x-ua-compatible: IE=8" );

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=shift_jis">

<!-- jQuery のバージョンが 1.9 なのは、IE 用 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<style>
body {
	margin: 0;
}
#wrapper {
	background-color: #ffffff;
}
#head_unit {
	height: 50px;
	padding: 15px 0 10px 15px;
}
#target {
	/* IFRAME の横調整は、ブラウザに任せます */
	width: 100%;
}
</style>
<script>
// IFRAME フィット
function control_page_iframe(iframe_id) {
	var height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
	var head_height = document.getElementById("head_unit").clientHeight;

	// -6 は、IE と Firefox 用。Google Chrome は 0 で正しくフィットするが、
	// IE と Firefox では、BODY のスクロールバーが表示されてしまう( バグレベルの動作 )
	document.getElementById(iframe_id).style.height = (height - parseInt(head_height)-6) + "px"
}

// 日付フォーマット用の文字列処理3つ
String.prototype.right = function(n){
	var str = this.valueOf();
	str = str.substr(str.length-n,n);
	return str;
}
String.prototype.zero = function(n){
	var strzero = "0000000000000000000";
	var str = this.valueOf();
	str = strzero + str;
	return str.right(n);
}
Date.prototype.datestr = function(sep){
	str = this.getFullYear() + sep + (this.getMonth()+1).toString().zero(2) + sep + (this.getDate()).toString().zero(2);
	return str;
}

// jQuery DatePicker 用設定データ
var datepicker_option = {
	dateFormat: 'yy/mm/dd',
	dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
	monthNames:  ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
	showMonthAfterYear: true,
	yearSuffix: '年',
	changeYear: true,
	showAnim: 'fadeIn'
}
var datepicker;

// jQuery 初期処理
$(function() {
	// jQuery DatePicker プラグイン 
	// ※ 通常フィールド
	datepicker = $("#datepicker")
		.datepicker(datepicker_option)
		.val( (new Date()).datestr("/") )
		.css( "width", "100px" );

	// この処理は、IE のみで動作します
	$("#target").on("focus",function(){
		datepicker.datepicker( "hide" );
	});

	// jQuery DatePicker プラグイン 
	// ※ ダイアログ表示
	$("#datetDialog").click(
		function() {
			$( "#datepicker" ).datepicker(
				"dialog",
				$("#datepicker").val(),
				function(sdate) {
					$("#datepicker").val( sdate );
				},
				datepicker_option
			);
		}
	);

	// Google Chrome 用
	$("#targetDate").val((new Date()).datestr("-"));

	// IFRAME フィット用
	$(window).on("resize", function(){

		var iframe_id = "target";

		document.getElementById(iframe_id).style.display = "none";
		control_page_iframe(iframe_id);
		document.getElementById(iframe_id).style.display = "";

	});

	// 初期 IFRAME フィット
	control_page_iframe("target");

});
</script>
</head>
<body>
<div id="wrapper">
	<div id="head_unit">
		<form target="target_iframe" action="iframe_test.php" accept-charset="utf-8">
			<input id="targetDate" name="date" type="date">
			<input type="submit" name="send" value="送信">
			<input type="submit" name="send" value="リセット">
			jQuery DatePicker: <input name="date2" type="text" id="datepicker">
			<input
				id="datetDialog"
				type="button"
				value="dialog">
		</form>
	</div>
	<!-- frameborder はサイズ調整させるので境界は無しで設定 -->
	<!-- ここでは IE8 コンパチブルなので CSS では消せません -->
	<iframe
		id="target"
		name="target_iframe"
		frameborder="0"
		src="iframe_test2.php"
	></iframe>
</div>

</body>
</html>

▼ IFRAME 内のコード
<?php
header( "Content-Type: text/html; Charset=shift_jis" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
// IE 用
header( "x-ua-compatible: IE=8" );

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=shift_jis">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script>
$(function() {

	// この処理は、一般的なブラウザと最新の IE( IE11で確認 )で動作します
	$(window).on("focus",function(){
		parent.datepicker.datepicker( "hide" );
	});

});
</script>
<style>
body {
	background-color: #c0c0c0;
}
</style>
</head>
<body>

<img src="https://lh6.googleusercontent.com/-ShzpKMxTsDU/VJ6mrePilbI/AAAAAAAAYA8/YNag5FGr5Qg/s402/freefont_logo_kana003.png" style="border: solid 0px #000000">

<br><br>
あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと

</body>
</html>

このページのコードは、INPUT 要素の type="date" の利用のテストも兼ねています。jQuery を使ってしまったほうが簡単ではありますが、既存の FRAME 仕様のページでカレンダーを使うとなると、現在 Google Chrome と Opera でしか動作しません。この二つのブラウザはほぼ同じ仕様でカレンダーが表示されますが、FRAME の境界を越える事ができるので、IE の ActiveX の DatePicker の代替えとして利用可能です。

ですが一つ問題があって・・・

このデモページでは対応済ですが、初期値のセット方法として日付フォーマットが -(ハイフン) 区切りである必要がある上に、月と日は2ケタの前ゼロでなければダメです。さらに、表示は /(スラッシュ)区切りで、かつサーバーに送信されると -(ハイフン)区切り になります。



サーバーサイドはそちらで対応すれば良いですが、もともと JavaScript で日付文字列の操作が面倒なので、String オブジェクトと Date オブジェクトに メソッドを追加して使っています。
String.prototype.right = function(n){
	var str = this.valueOf();
	str = str.substr(str.length-n,n);
	return str;
}
String.prototype.zero = function(n){
	var strzero = "0000000000000000000";
	var str = this.valueOf();
	str = strzero + str;
	return str.right(n);
}
Date.prototype.datestr = function(sep){
	str = this.getFullYear() + sep + (this.getMonth()+1).toString().zero(2) + sep + (this.getDate()).toString().zero(2);
	return str;
}

jQuery もチューニングしています

blur イベントを処理しないと、カレンダーを表示した後、IFRAME 内に移動した時にカレンダーが閉じませんでした。
blur イベントを処理してしまうと、カレンダー内部のコントロールをクリックすると閉じてしまったので、IFRAME 側のイベントで対応しました。しかし、IE8 では、IFRAME 側(内部から window)の focus イベントで動作しなかったので、IFRAME を表示しているほうからの focus イベントで対処しています

関連する記事

Google Chrome 専用 jQuery プラグイン : DatePicker( type=date ) の個別機能の設定を行います / 当日セット、キーイベントキャンセル、専用ボタン非表示




posted by lightbox at 2015-08-19 11:29 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2014年11月03日


bitly.com へ URL を渡してページを開く方法

2011年に記事を書いた時より、URL が変わっていましたので修正します

やってみたら「できた」というレベルなので、仕様とかを調べたわけではありません

( あまりに長い URL はエラーになるかもしれません / 2011年当時の事なので )
function jumpBitly(strUrl) {

	strUrl = encodeURIComponent( strUrl );
	strUrl = strUrl.replace("%20", "+");
	window.open( "http://bitly.com/shorten/?url="+strUrl );

}






posted by lightbox at 2014-11-03 13:57 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2014年09月25日


Picasa を使った、一枚の画像でサムネイルも兼ねる画像ウインドウの表示コード

Google+ の画像も利用できます。( w958-h766-no を w958 でもいいし、s900 でも動作します )

Picasa では、URL 内のフォルダ名でサイズを決定できるので、クリックするまでは実際に小さい画像を使いながら、その URL をそのまま使って大きい画像をウインドウで表示できます。
( 中央表示 )

元々、s150 の画像を s900 に変更しています。s の場合は、長いほうのサイズなので、この場合は横長の画像用になります。( 縦長の画像の場合は、s900 が縦のサイズです )

w=900 では、実際の大きい画像サイズです。画像のオリジナルサイズ以下(この場合横のサイズ)である必要があります。縦のサイズは、横のサイズが 900 の場合の 縦のサイズをセットしています。

表示位置は、計算して中央に表示するようにしています。
<img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/S7p-TD-MTcI/AAAAAAAAASc/S9yjZQj2u1s/s150/b17geoff_vane028.jpg"
	onclick='var w=900,h=680;window.open(this.src.replace(/s150/,"s"+w),"","width="+w+",height="+h+",resizable=1,left="+(screen.width-w)/2+",top="+(screen.height-(h+100))/2)'
	style='cursor:pointer'
>

関連する記事

Picasa のサムネイルの使い方


posted by lightbox at 2014-09-25 14:54 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2014年09月14日


JavaScript : DIV 内に時間範囲のボックスを表示する処理

個人別の出勤時間の表示です。

start と end は、最大の出勤時間幅を定義します。ここでは、6:00 〜 28:00( 次の日の 4時まで )
base_width は、その範囲を表示する幅です。
最小ブロックは 10 分にしています。
氏名 時間 ( 6:00 〜 28:00 ) 開始 終了
浦岡 友也1
6:00 7:00
浦岡 友也2
8:00 10:00
浦岡 友也3
11:00 14:00
浦岡 友也4
15:00 19:00
高田 冬美1
20:00 25:00
高田 冬美2
20:00 27:00

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var start = 6 * 60;				// 開始時間(分)
var end = 28 * 60;				// 終了時間(分)
var base_range = end - start;			// 範囲時間
var base_width = 300;				// 表示幅
var block = base_width / (base_range/10);	// 10分単位の幅
// ***********************************************
// 時間範囲表示関数
// ***********************************************
function setRange(id,strTime1,strTime2) {

	var parts = strTime1.split(":");
	var h = parseInt( parts[0] );	// 時間部分
	var m = parseInt( parts[1] );	// 分部分
	m = (h*60 - start + m)/10;	// start からの位置
	start_pos = m * block;		// 指定時間の開始位置

	parts = strTime2.split(":");
	h = parseInt( parts[0] );	// 時間部分
	m = parseInt( parts[1] );	// 分部分
	m = (h*60 - start + m)/10;
	end_pos = m * block;
	// 二つ目は幅に変換
	block_width = end_pos - start_pos;

	// 幅を表現する BOX の開始と幅を設定( jQuery である必要はありません )
	$("#" + id).css({ "left": start_pos+"px", "width": block_width + "px" });

}

$(function() {

	setRange("timebar0001","6:00", "7:00");
	setRange("timebar0002","8:00", "10:00");
	setRange("timebar0003","11:00", "14:00");
	setRange("timebar0004","15:00", "19:00");
	setRange("timebar0005","20:00", "25:00");
	setRange("timebar0006","20:00", "27:00");

});
</script>
<style type="text/css">
.rangebox {
	width:100%;
	height: 35px;
	background-color:#e0e0e0;
	position: relative;
}
.rangebox div {
	position: absolute;
	background-color:#ff0000;
	height: 35px;
}

#lboxtable * {
	font-family: "メイリオ", Meiryo, "MS Pゴシック";
	font-size: 16px;
}
#lboxtable table {
	table-layout: fixed;
	width:600px;
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#lboxtable td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	/* white-space: nowrap; */
}
</style>
<div id="lboxtable">
	<table>
		<tbody>
			<tr>
				<td style='width:100px;'>氏名</td>
				<td style='width:300px;'>時間 ( 6:00 〜 28:00 )</td>
				<td>開始</td>
				<td>終了</td>
			</tr>
			<tr>
				<td>浦岡 友也1</td>
				<td>
					<div class="rangebox">
						<div id="timebar0001"></div>
					</div>
				</td>
				<td>6:00</td>
				<td>7:00</td>
			</tr>
			<tr>
				<td>浦岡 友也2</td>
				<td>
					<div class="rangebox">
						<div id="timebar0002"></div>
					</div>
				</td>
				<td>8:00</td>
				<td>10:00</td>
			</tr>
			<tr>
				<td>浦岡 友也3</td>
				<td>
					<div class="rangebox">
						<div id="timebar0003"></div>
					</div>
				</td>
				<td>11:00</td>
				<td>14:00</td>
			</tr>
			<tr>
				<td>浦岡 友也4</td>
				<td>
					<div class="rangebox">
						<div id="timebar0004"></div>
					</div>
				</td>
				<td>15:00</td>
				<td>19:00</td>
			</tr>
			<tr>
				<td>高田 冬美1</td>
				<td>
					<div class="rangebox">
						<div id="timebar0005"></div>
					</div>
				</td>
				<td>20:00</td>
				<td>25:00</td>
			</tr>
			<tr>
				<td>高田 冬美2</td>
				<td>
					<div class="rangebox">
						<div id="timebar0006"></div>
					</div>
				</td>
				<td>20:00</td>
				<td>27:00</td>
			</tr>
		</tbody>
	</table>
</div>



posted by lightbox at 2014-09-14 01:13 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2014年06月26日


jQuery/JavaScript : 存在しない可能性のある画像の代替表示

すべての画像をチェックして visibility が hidden のものでサイズが50より小さい場合( 画像がない場合なので適当な数値です )にのみ別の画像に入れ替えます。最初に hidden にしておくのは、ロード時に画像が無いと見栄えが悪いからです。visibility を使うのは、見えないけれどもサイズが確保されるからです

jQueryバージョン
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<img src="http://winofsql.jp/image/ok.png" style='visibility:hidden'>
<img src="http://winofsql.jp/image/_ok.png" style='visibility:hidden'>

<script type="text/javascript">
$(function(){

	$("IMG").each(function(){
		if ( $(this).css("visibility") == "hidden" ) {
			if ( $(this).prop("width") < 50 ) {
				$(this).prop("src","http://winofsql.jp/image/winofsql.png");
			}
			$(this).css("visibility", "visible");
		}
	});

});
</script>
ノーマルバージョン
<img src="http://winofsql.jp/image/ok.png" style='visibility:hidden'>
<img src="http://winofsql.jp/image/_ok.png" style='visibility:hidden'>

<script type="text/javascript">
function noimage () {

	var cnt = document.getElementsByTagName("IMG").length;
	var i,target;
	for( i = 0; i < cnt; i++ ) {
		target = document.getElementsByTagName("IMG")[i];
		if ( target.style.visibility == 'hidden' ) {
			if ( target.width < 50 ) {
				target.src = "http://winofsql.jp/image/winofsql.png";
			}
			target.style.visibility = "visible";
		}
	}

}
if (window.attachEvent){
	window.attachEvent('onload', noimage);
}
else {
	window.addEventListener('load', noimage, false);
}
</script>



タグ:javascript
posted by lightbox at 2014-06-26 07:49 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2014年06月16日


JavaScript による、時間範囲の表現( 出退勤等 )

サーバー側のデータを JavaScript 側で表現するという事を想定しています

css の設定に、jQuery を使っていますが、jQuery は特に必要ではありません。jQuery のプラグインにするより、この状態のほうがカスタマイズが容易だと思います。

※ rangebox の背景を画像にして目盛を付加するともっと表現力がアップすると思います
氏名 時間 ( 6:00 〜 28:00 ) 開始 終了
浦岡 友也1
6:00 7:00
浦岡 友也2
8:00 10:00
浦岡 友也3
11:00 14:00
浦岡 友也4
15:00 19:00
高田 冬美1
20:00 25:00
高田 冬美2
20:00 27:00

ソースコード
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var start = 6 * 60;							// 開始時間(分)
var end = 28 * 60;							// 終了時間(分)
var base_range = end - start;				// 範囲時間
var base_width = 300;						// 表示幅
var block = base_width / (base_range/10);	// 10分単位の幅
// ***********************************************
// 時間範囲表示関数
// ***********************************************
function setRange(id,strTime1,strTime2) {

	var parts = strTime1.split(":");
	var h = parseInt( parts[0] );	// 時間部分
	var m = parseInt( parts[1] );	// 分部分
	m = (h*60 - start + m)/10;		// start からの位置
	start_pos = m * block;			// 指定時間の開始位置

	parts = strTime2.split(":");
	h = parseInt( parts[0] );	// 時間部分
	m = parseInt( parts[1] );	// 分部分
	m = (h*60 - start + m)/10;
	end_pos = m * block;
	// 二つ目は幅に変換
	block_width = end_pos - start_pos;

	// 幅を表現する BOX の開始と幅を設定( jQuery である必要はありません )
	$("#" + id).css({ "left": start_pos+"px", "width": block_width + "px" });

}

$(function() {

	setRange("timebar0001","6:00", "7:00");
	setRange("timebar0002","8:00", "10:00");
	setRange("timebar0003","11:00", "14:00");
	setRange("timebar0004","15:00", "19:00");
	setRange("timebar0005","20:00", "25:00");
	setRange("timebar0006","20:00", "27:00");

});
</script>

<style type="text/css">
.rangebox {
	width:100%;
	height: 35px;
	background-color:#e0e0e0;
	position: relative;
}
.rangebox div {
	position: absolute;
	background-color:#ff0000;
	height: 35px;
}

#lboxtable * {
	font-family: "メイリオ", Meiryo, "MS Pゴシック";
	font-size: 16px;
}
#lboxtable table {
	table-layout: fixed;
	width:600px;
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#lboxtable td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	/* white-space: nowrap; */
}
</style>

<div id="lboxtable">
<table>
	<tbody>
		<tr>
			<td style='width:100px;'>氏名</td>
			<td style='width:300px;'>時間 ( 6:00 〜 28:00 )</td>
			<td>開始</td>
			<td>終了</td>
		</tr>
		<tr>
			<td>浦岡 友也1</td>
			<td><div class="rangebox"><div id="timebar0001"></div></div></td>
			<td>6:00</td>
			<td>7:00</td>
		</tr>
		<tr>
			<td>浦岡 友也2</td>
			<td><div class="rangebox"><div id="timebar0002"></div></div></td>
			<td>8:00</td>
			<td>10:00</td>
		</tr>
		<tr>
			<td>浦岡 友也3</td>
			<td><div class="rangebox"><div id="timebar0003"></div></div></td>
			<td>11:00</td>
			<td>14:00</td>
		</tr>
		<tr>
			<td>浦岡 友也4</td>
			<td><div class="rangebox"><div id="timebar0004"></div></div></td>
			<td>15:00</td>
			<td>19:00</td>
		</tr>
		<tr>
			<td>高田 冬美1</td>
			<td><div class="rangebox"><div id="timebar0005"></div></div></td>
			<td>20:00</td>
			<td>25:00</td>
		</tr>
		<tr>
			<td>高田 冬美2</td>
			<td><div class="rangebox"><div id="timebar0006"></div></div></td>
			<td>20:00</td>
			<td>27:00</td>
		</tr>
	</tbody>
</table>
</div>




タグ:javascript
posted by lightbox at 2014-06-16 14:40 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2014年04月03日


JavaScript : HTML 特殊文字を書き出すコード( ツール )

2014/4/3
先頭を指定して表示できるようにしましたので、通常の漢字エリアも表示できます。また、その位置から320文字を実際に取得するウインドウを開くようにしました。

さらに、文字の下には以下の3つのデータを付加しました
1) HTMLエンティティ
2) その16進表現
3) 実際の UTF-8 のコードの 16進表現


フリーフォントのオリジナル文字を割り当てている場所を拾い出す作業の為に最適化しました。『はらませにゃんこ』というフリーフォントが GIGAZINE で紹介されていたので、『フリーフォントで簡単ロゴ作成』に登録したのですが、武蔵システムの TTEdit で内部を確認すると、説明されていない文字も結構あったので、全て拾い出すのに、16進数の表現が必要になるのと、実際の文字を取得する都合があったので、このような最適化になりました。

▼ 『はらませにゃんこ』



<style>
.cbtn {
	width: 104px;
}
</style>
<script type="text/javascript">
function getCode(n) {
	n = parseInt(n);
	var __a = "";
	for( i = n; i <= n+319; i++ ) {
		__a += "&#"+i+";";
	}
	window.open("about:blank", "", "width=600,height=350").document.write("<textarea  style=\"width:500px;height:300px;\">" + __a + "</textarea>");

}
function writeCode(n) {
	n = parseInt(n);
	document.getElementById("target_no").value = n;
	var doc = document.getElementById("areaCode").contentWindow.document;
	doc.open();
	var str="";
	str+="<style type=\"text/css\"> \n";
	str+=".sphtml td { \n";
	str+="	font-size:36px; \n";
	str+="	font-family: \"ヒラギノ角ゴPro W3\",\"メイリオ\"; \n";
	str+="} \n";
	str+=".spc { \n";
	str+="	font-size:9px; \n";
	str+="} \n";
	str+=".sphtml table { \n";
	str+="	border-collapse: collapse; \n";
	str+="	border-style: solid; \n";
	str+="	border-color: #000000; \n";
	str+="	border-width: 1px; \n";
	str+="	background-color: #FFFFFF; \n";
	str+="} \n";
	str+=".sphtml td { \n";
	str+="	padding: 5px; \n";
	str+="	border-style: solid; \n";
	str+="	border-color: #000000; \n";
	str+="	border-width: 1px; \n";
	str+="	white-space: nowrap; \n";
	str+="} \n";
	str+=" \n";
	str+="</style> \n";
	doc.write(str);
	doc.write("<div class=sphtml>");
	doc.write("<table>");
	doc.write("<tr>");
	var cnt = 1;
	var _x;
	for( i = n; i <= n+999; i++ ) {
		_x = String.fromCharCode(i);
		_x = encodeURIComponent(_x)
		_x = _x.replace(/%/g,"")
		doc.write("<td>&#"+i+";<br><span class='spc'>&amp;#"+i+";</span><br><span class='spc'>"+i.toString(16).toUpperCase()+"</span><br><span class='spc'>"+_x+"</span></td>")
		if ( cnt % 10 == 0 ) {
			doc.write("</tr><tr>");
		}

		cnt++;
	}
	doc.write("</table>");
	doc.write("</div>");
	doc.close();
	document.getElementById("areaCode").style.height = Math.max(doc.documentElement.scrollHeight,doc.body.scrollHeight)+'px';
}
</script>
<input class="cbtn" type="button" value="1〜1000" onclick='writeCode(1)'>
<input class="cbtn" type="button" value="1001(3E9)〜" onclick='writeCode(1001)'>
<input class="cbtn" type="button" value="2001(7D1)〜" onclick='writeCode(2001)'>
<input class="cbtn" type="button" value="3001(BB9)〜" onclick='writeCode(3001)'>
<input class="cbtn" type="button" value="4001(FA1)〜" onclick='writeCode(4001)'>
<input class="cbtn" type="button" value="5001(1389)〜" onclick='writeCode(5001)'>
<br>
<input class="cbtn" type="button" value="6001(1771)〜" onclick='writeCode(6001)'>
<input class="cbtn" type="button" value="7001(1B59)〜" onclick='writeCode(7001)'>
<input class="cbtn" type="button" value="8001(1F41)〜" onclick='writeCode(8001)'>
<input class="cbtn" type="button" value="9001(2329)〜" onclick='writeCode(9001)'>
<input class="cbtn" type="button" value="10001(2711)〜" onclick='writeCode(10001)'>
<input class="cbtn" type="button" value="11001(2AF9)〜" onclick='writeCode(11001)'>
<br>
<input class="cbtn" type="button" value="12001(2EE1)〜" onclick='writeCode(12001)'>
<input class="cbtn" type="button" value="13001(32C9)〜" onclick='writeCode(13001)'>
先頭番号 <input id="target_no" class="cbtn" type="text"> <input class="cbtn" type="button" value="この番号から" onclick='writeCode(document.getElementById("target_no").value)'> <input  type="button" value="文字一覧取得(320)" onclick='getCode(document.getElementById("target_no").value)'>
<br>番号指定は、16進数を入力できます( 例: 0x1234 )
<br>
<iframe
	id="areaCode"
	frameborder="0"
	scrolling="yes"
	width="650"
	height="1"
></iframe>
<script>
writeCode(12832);
</script>

▼ 実行


先頭番号
番号指定は、16進数を入力できます( 例: 0x1234 )


関連する記事

posted by lightbox at 2014-04-03 03:00 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2013年12月25日


Twitter 縦書き intent

使ってみると効果は一目瞭然ですが、そんなにいいものでもありません。句点で次の行とかにしたほうが、よさそうです。

※ Twitter は文字数に限りがあるので、右側サイドの空白除去処理を行っています。

いろいろやりながら、いくらかオプションが増えました。

(クリックしてもすぐに投稿されずに縦書きがセットされた投稿画面が開きます)
1行目は横書きにする
改行は自分で入れる
URL(省略可)
Web Intents なんで、ボタンをクリックすると正規の投稿ウインドウに移動します。そして、その際に縦書きとして文字がセットされています。


▼ ブラウザのフォントを固定ピッチにすると綺麗に縦書きになります( Chrome なら 2番目の Seirf )

Google Chrome の フォント設定の3番目の Sans Serif フォントを固定ピッチにすると綺麗に縦書きを見る事ができます。



関連する記事

簡易縦書き変換

選択文字列を Twitter の投稿画面に遷移させるブックマークレットの内容の解説

▼ JavaScript のみで書けるので、誰でも設置してカスタマイズできます
<script type="text/javascript">
function tweet_tate() {
	var enc = encodeURIComponent;
	var url = "https://twitter.com/intent/tweet?text=";
	var url2 = document.getElementById("url").value;
	var text = document.getElementById("tweet_tate").value;
	var top = 0;
	if ( document.getElementById("h1").checked ) {
		top = text.split("\n")[0];
		text = text.substr(top.length);
	}
	text = to_zen(text);
	text = text.replace(/ /g, " ");
	text = text.replace(/[”“]/g, "=");
	text = text.replace(/[W]/g, "=");
	text = text.replace(/[(【[{『《≪]/g, "▼");
	text = text.replace(/[)】]}』》≫]/g, "▲");
	text = text.replace(/「/g, "▼");
	text = text.replace(/」/g, "▲");
	text = text.replace(/…/g, ":");
	text = text.replace(/[ー〜−]/g, "|");
	if ( !document.getElementById("nocr").checked ) {
		text = cr_set(text,parseInt(document.getElementById("rnum").value));
	}
	text = tate(text);
	text = text.replace(/[ ]+\n/g, "\n");
	text = text.replace(/[ ]+$/g, "");
	if ( !document.getElementById("h1").checked ) {
		url += enc(text);
	}
	else {
		url += enc(top+"\n\n"+text);
	}

	var width = 550;
	var height = 420;
	var option = "scrollbars=yes,resizable=yes,toolbar=no,location=yes";
	var left = Math.round((screen.width / 2) - (width / 2));
	var top = Math.round((screen.height / 2) - (height / 2));
	option += ',width='+width+',height='+height+',left='+left+',top='+top;
	if ( url2 != '' ) {
		window.open(url+enc("\n\n")+'&url='+enc(url2),'intent',option);
	}
	else {
		window.open(url,'intent',option);
	}
}
function tate(text) {
	var i = 0;
	var j = 0;
	var wk = text;

	var bk = wk.split("\n");

	var len = 0;
	for( i = 0; i < bk.length; i++ ) {
		if ( bk[i].length > len ) {
			len = bk[i].length;
		}
	}

	var sp = "";
	for( i = 0; i < len; i++ ) {
		sp += " ";
	}

	for( i = 0; i < bk.length; i++ ) {
		bk[i] += sp;
		bk[i] = bk[i].substr(0, len);
	}

	var str = ""
	
	for( i = 0; i < len; i++ ) {
		if ( i != 0 ) {
			str += "\n";
		}
		for( j = bk.length-1; j >= 0; j-- ) {
			if ( j == 0 && bk[j].substr(i,1) == ' ' ) {
			}
			else {
				str += bk[j].substr(i,1);
			}
		}
	}
	return str;
}
function to_zen(str) {
	return str.replace(/[\!-\~]/g, function(s) {
		return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
	});
}
function cr_set(text,ccnt) {
	var str = text;
	str = str.replace(/[\n]/g,"");
	var num = str.length;
	var i,ch,work,cr_cnt;
	var cr_num = ccnt;

	if ( cr_num > 0 ) {
		work = "";
		cr_cnt = 0;
		for( i = 0; i < num; i++ ) {
			ch = str.substr(i,1);
			if ( ((cr_cnt+1) % cr_num) == 0 ) {
				work += ch + "\n";
				cr_cnt = 0;
			}
			else {
				work += ch;
				cr_cnt++;
			}
		}
		if ( work.substr( 0, 1 ) == "\n" ) {
			work = work.replace(/[\n]/,"");
		}
		return work;
	}
}
</script>
<textarea id="tweet_tate" style='width:500px;height:200px;'></textarea>
<br>
<input type="button" value="Twitter 縦書き発言" onclick='tweet_tate();'>(クリックしてもすぐに投稿されずに縦書きがセットされた投稿画面が開きます)
<br>
1行目は横書きにする <input type="checkbox" id="h1" checked>
<br>
一行の文字数 <input type="text" id="rnum" value="10" style='width:40px'>
<br>
改行は自分で入れる <input type="checkbox" id="nocr">
<br>
URL(省略可) <input type="text" id="url" style='width:420px;'>


posted by lightbox at 2013-12-25 00:12 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2012年08月05日


スマホでYouTubeの埋め込みの表示サイズをJavaScriptでコントロールする

最近まで、YouTube で埋め込みコードを取得すると、OBJECT タグで埋め込まれていたようなのですが、今は IFRAME で取得できるようなので、この処理が可能です。

通常のブログですと、幅640で埋め込んでも特に問題無いですが、スマホで表示するとはみ出てしまいます。その対応処理です。

.text iframe とありますが、Seesaa のブログでは本文の class が text なので、その中の iframe に対して処理を行っています
<script type="text/javascript">
(function(){
	var str = "";
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
		str+="<style type=\"text/css\"> \n";
		str+=".text iframe { \n";
		str+="	width:290px!important; \n";
		str+="	height:auto!important; \n";
		str+="} \n";
		str+="</style> ";
		document.write(str);
	}
})();
</script>
<iframe width="640" height="480" src="http://www.youtube.com/embed/uxBFiU2N65c" frameborder="0" allowfullscreen></iframe>

iPhone



Android





posted by lightbox at 2012-08-05 01:18 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

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 形式で引き渡す


posted by lightbox at 2011-08-20 20:16 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2011年07月03日


p.tl(pixiv) へ URL を渡してページを開く方法

やってみたら「できた」というレベルなので、
仕様とかを調べたわけではありません

URL の内容によっては、ひょっとしてまだ変換が必要かもしれません
( あまりに長い URL は無視されます )
function jumpPtl(strUrl) {

	strUrl = strUrl.replace(/%/g,'%2525');
	strUrl = strUrl.replace(/&/g,'%26');
	strUrl = strUrl.replace(/#/g,'%23');
	window.open( "http://p.tl/?q="+strUrl );

}




posted by lightbox at 2011-07-03 13:48 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2011年04月29日


WEB フォントを使った「フェードイン、フェードアウト」

IE8 以前で filter を使用すると、アンチエイリアスが無効になるバグがあったので
二つのエリアの切り替え方法を変更した IE8 以前専用の関数を追加しました。IE9 で
は必要無いと思いますが、ここでは IE の場合常にそちらを使用しています。

結果的に、IE8 以前用のコードのほうが使いやすくなっていますが、このような書き方
を CSS3 的に書こうとすると、コードが多くなってしまいますので、利用する時に考え
てどちらの方式を選ぶかどうか良く考えたほうがいいと思います。

a
A
いろいろ準備は必要ですが、いろいろな場面で使える可能性があります

WEB フォントの記述方法の考察
WEB フォントをクロスドメインで利用する
CSS3 + JavaScript(IEはFilter) : 「フェードイン、フェードアウト」制御
フリーフォント(WEBフォント)のダウンロード


<style media="screen" type="text/css">
@font-face {
	font-family:"tattooli";
	src: url("http://lightbox.on.coocan.jp/r205/font/tattooli.ttf") format("truetype");
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
@font-face {
	font-family:"tattooli";
	src: url("http://lightbox.on.coocan.jp/r205/font/tattooli.eot");
}
</style>
<![endif]-->
<script type="text/javascript">
var a_counter = 3;
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
	a_counter = 2;
}
var font_chars = Array("",
"A","a","B","b","C","c","D","d","E","e",
"F","f","G","g","H","h","I","i","J","j",
"K","k","L","l","M","m","N","n","O","o",
"P","p","Q","q","R","r","S","s","T","t",
"U","u","V","v","W","w","X","x","Y","y",
"Z","z"
);
function a_start() {

	if (userAgent.indexOf("msie") > -1) {

		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "hidden";
			document.getElementById("a2").filters.blendTrans.Play();
		}
		else {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "visible";
			document.getElementById("a2").filters.blendTrans.Play();
		}

	}
	else {
		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").style.opacity = 0;
		}
		else {
			document.getElementById("a2").style.opacity = 100;
		}
	}

	setTimeout("a_next();", 7000 );
}
function a_next() {

	if ( a_counter % 2 == 1 ) {
		document.getElementById("a2").innerHTML = font_chars[a_counter];
	}
	else {
		document.getElementById("a1").innerHTML = font_chars[a_counter];
	}

	a_counter++;
	if ( a_counter > 52 ) {
		a_counter = 1;
	}

	a_start();
}

function a_start_ie8() {

	document.getElementById("a2").style.visibility = "visible";
	document.getElementById("a1").innerHTML = font_chars[a_counter];
	document.getElementById("a2").filters.blendTrans.Apply();
	document.getElementById("a2").style.visibility = "hidden";
	document.getElementById("a2").filters.blendTrans.Play();

	setTimeout("a_next_ie8();", 7000 );
}
function a_next_ie8() {

	document.getElementById("a2").innerHTML = font_chars[a_counter];

	a_counter++;
	if ( a_counter > 52 ) {
		a_counter = 1;
	}

	a_start_ie8();
}

</script>
<style type="text/css">
#base {
	position:relative;
	width:500px;
	height:300px;
}
#a1,#a2 {
	font-family: tattooli;
	width:100%;
	height:100%;
	background-color:#fff;
	font-size:300px;
	position:absolute;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
	filter:blendTrans(duration=3);
}
</style>
<div id="base">
	<div id="a1" style='padding-left:80px'>a</div>
	<div id="a2" style='padding-left:100px'>A</div>
</div>
<script type="text/javascript">
if (userAgent.indexOf("msie") > -1) {
	setTimeout("a_start_ie8();", 7000 );
}
else {
	setTimeout("a_start();", 7000 );
}
</script>




posted by lightbox at 2011-04-29 00:27 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2009年12月31日


JS : テキストエリア内の選択文字列の置き換え

最近、セキュリティ制限やらで prompt が使え無い場合があって、
自分でセキュリティ設定が必要になりますが、それはとりあえず置いておいて、
テキストエリア内の選択文字列をタイトルにしたリンクの作成方法です
<script type="text/javascript">

function createURLLink() {

	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var txt = "";
	var strUrl = "";
	if (userAgent.indexOf("msie") > -1) {

		var objSelectedText = document.selection
		var objTextRange = objSelectedText.createRange( )

		if (objTextRange.text.length == 0 ) {
			return;
		}
		try {
			strUrl = prompt("URLリンク作成","http://");
			if ( strUrl != "" && strUrl != "http://" && strUrl+"" != "null" ) {
				txt = objTextRange.text
				txt = "<a href=\""+strUrl+"\" target=\"_blank\">"+txt+"</a>"
				objTextRange.text = txt;
			}
		}catch( e ){}
	}
	else {
		var obj = document.getElementById("txt091231d")
		var ns = obj.selectionStart;
		var ne = obj.selectionEnd;
		var nl;

		if ( ns != ne ) {
			strUrl = prompt("URLリンク作成","http://");
			if ( strUrl != "" && strUrl != "http://" && strUrl+"" != "null" ) {
				txt = obj.value.substring(ns, ne);
				txt = "<a href=\""+strUrl+"\" target=\"_blank\">"+txt+"</a>"
				nl = txt.length
				txt = obj.value.substring(0, ns)
					+ txt + obj.value.substring(ne,obj.value.length);
				obj.value = txt;
				obj.setSelectionRange(ns,ns+nl);
			}
		}

	}

}

</script>

<TEXTAREA id=txt091231d rows=5 wrap=off cols=50></TEXTAREA>
<input type=button value="リンク作成" onClick='createURLLink()'>




タグ:javascript
posted by lightbox at 2009-12-31 16:14 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2009年09月21日


IE限定、ローカルファイル参照フィールドを使ったトリック

INPUT 要素を、type="file" で使用した場合、セキュリティの問題で、
初期値を表示する事ができませんが、その代替方法です。IE でしか使用
できないので、HTA で利用すると良いでしょう。

click メソッドで参照ダイアログが表示されますが、ダイアログが閉じられるまで、
実行が停止するので、入力値が変わらずに onChange が起動しなくても
表示側のデータも変更されます。
<input
   id="ref_file"
   type="file"
   style='display:none'
   onChange='
      document.getElementById("ref_file_front").value = this.value
   '
>
<input
   id="ref_file_front"
   type='text'
   style='width:300px;'
>
<input
   type="button"
   value="参照"
   onClick='
      document.getElementById("ref_file").click();
      if ( document.getElementById("ref_file").value != document.getElementById("ref_file_front").value ) {
         document.getElementById("ref_file_front").value = document.getElementById("ref_file").value;
      }
   '
>



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