Kanasansoft Web Lab.

私的Web研究所

Web Lab. > JavaScript > Bookmarklet > Bookmarkletを作成するツールを自作

Bookmarkletを作成するツールを自作

Bookmarklet

Bookmarkletを作成するツールを自作しました。
ついでにHTMLのエンコードも行えます。
このサイトのようにコードをそのまま埋め込んだり、エンコードして表示させたりする場合に便利です。
例えば、codeタグ内に表示する場合、HTMLエンコードを行いますが、tabがtabのまま残っているとレイアウトが崩れます。
かといって、半角スペースでインデントを行うとcodeタグ内ではきれいに表示されますが、見やすいBookmarkletの記述で書いたように、そのままBookmarkletとして使用するには問題があります。
では、どうするのかというと、Bookmarkletはエンコードせずにそのまま管理し、サイト更新の時に個別に処理をしたほうが楽です。
このツールなかなか使えると自負しているのですがどうでしょうか。
使い方はそのうち解説します(要望があれば...)。

<!--
================================================================================
	Name		:	knsn_ConvertSourceAndBookmarklet Ver1.0
	In			:	[none]		
	Out			:	[none]		
	Note		:	SourceとBookmarkletをコンバートする
--------------------------------------------------------------------------------
	Version		:	Ver1.0		|	2005/06/22	|	新規作成
--------------------------------------------------------------------------------
	Copyright	:	2005 Kanasansoft
	URL			:	www.kanasansoft.com
================================================================================
-->
<html>
<head>
<title>Kanasansoft Convert Source And Bookmarklet</title>
<style>
<!--
body
{
	margin:0px;
	padding:0px;
	overflow:hidden;
}
*
{
	font-size:12px;
	font-family:monospace;
}
#idSource,
#idHTML
{
	width:100%;
	height:40%;
}
td.clsFrame
{
	border:2px double #666666;
}
td.clsFrame,
td.clsFrame input,
td.clsFrame select
{
	font-weight:bold;
}
#idCount
{
width:40px;
}
-->
</style>
<script>
<!--
var TAB_NUMBER_NONE						=	"-";
var TAB_NUMBER_0						=	"0";
var TAB_NUMBER_2						=	"2";
var TAB_NUMBER_4						=	"4";
var TAB_NUMBER_8						=	"8";
var BOOKMARKLET_NO						=	"no";
var BOOKMARKLET_YES						=	"yes";
var BOOKMARKLET_YES_LINK				=	"yes(link)";
var CONVERT_TYPE_NONE					=	"-";
var CONVERT_TYPE_ENCODE					=	"encode";
var CONVERT_TYPE_ENCODE_PRE_CODE		=	"encode(pre,span,code)";
var CONVERT_TYPE_ENCODE_TEXTAREA		=	"encode(textarea)";
var CONVERT_TYPE_DECODE					=	"decode";
var TEMPLATE_BOOKMARKLET_FOR_SIMPLE		=	"BookmarkletForSimple";
var TEMPLATE_BOOKMARKLET_FOR_FRAMES		=	"BookmarkletForFrames";

var aryTabNumbers						=	new Array();
var aryBookmarklets						=	new Array();
var aryConvertTypes						=	new Array();
var aryTemplates						=	new Array();

aryTabNumbers[aryTabNumbers.length]		=	TAB_NUMBER_NONE;
aryTabNumbers[aryTabNumbers.length]		=	TAB_NUMBER_0;
aryTabNumbers[aryTabNumbers.length]		=	TAB_NUMBER_2;
aryTabNumbers[aryTabNumbers.length]		=	TAB_NUMBER_4;
aryTabNumbers[aryTabNumbers.length]		=	TAB_NUMBER_8;

aryBookmarklets[aryBookmarklets.length]	=	BOOKMARKLET_NO;
aryBookmarklets[aryBookmarklets.length]	=	BOOKMARKLET_YES;
aryBookmarklets[aryBookmarklets.length]	=	BOOKMARKLET_YES_LINK;

aryConvertTypes[aryConvertTypes.length]	=	CONVERT_TYPE_NONE;
aryConvertTypes[aryConvertTypes.length]	=	CONVERT_TYPE_ENCODE;
aryConvertTypes[aryConvertTypes.length]	=	CONVERT_TYPE_ENCODE_PRE_CODE;
aryConvertTypes[aryConvertTypes.length]	=	CONVERT_TYPE_ENCODE_TEXTAREA;
aryConvertTypes[aryConvertTypes.length]	=	CONVERT_TYPE_DECODE;

aryTemplates[aryTemplates.length]		=	TEMPLATE_BOOKMARKLET_FOR_SIMPLE;
aryTemplates[aryTemplates.length]		=	TEMPLATE_BOOKMARKLET_FOR_FRAMES;

function fncEncode()
{

	var strSourceForHTML				=	document.getElementById("idSource").value;
	var strSourceForLink				=	document.getElementById("idSource").value;
	var strDummy						=	document.getElementById("idDummy").value;
	var strCount						=	"";

	var objTabNumberOptions				=	document.getElementById("idTabNumber").options;
	var objBookmarkletOptions			=	document.getElementById("idBookmarklet").options;
	var objConvertTypeOptions			=	document.getElementById("idConvertType").options;

	var objHTMLTextArea					=	document.getElementById("idHTML");
	var objLinkBookmark					=	document.getElementById("idLink");
	var objCountTextBox					=	document.getElementById("idCount");


	if(		objTabNumberOptions.selectedIndex	>=	0						&&
			objTabNumberOptions.selectedIndex	<	aryTabNumbers.length	)
	{
		switch(objTabNumberOptions[objTabNumberOptions.selectedIndex].value)
		{
			case TAB_NUMBER_0:
				strSourceForHTML		=	strSourceForHTML.replace(/\t/ig,"");
				break;
			case TAB_NUMBER_2:
				strSourceForHTML		=	fncConvertFromTabToSpace(strSourceForHTML,TAB_NUMBER_2);
				break;
			case TAB_NUMBER_4:
				strSourceForHTML		=	fncConvertFromTabToSpace(strSourceForHTML,TAB_NUMBER_4);
				break;
			case TAB_NUMBER_8:
				strSourceForHTML		=	fncConvertFromTabToSpace(strSourceForHTML,TAB_NUMBER_8);
				break;
			case TAB_NUMBER_NONE:
			default:
				strSourceForHTML		=	strSourceForHTML;
				break;
		}
	}

	if(		objBookmarkletOptions.selectedIndex	>=	0						&&
			objBookmarkletOptions.selectedIndex	<	aryBookmarklets.length	)
	{
		switch(objBookmarkletOptions[objBookmarkletOptions.selectedIndex].value)
		{
			case BOOKMARKLET_YES:
				strSourceForHTML		=	fncEncodeBookmartlet(strSourceForHTML);
				strSourceForLink		=	strSourceForLink;
				strCount				=	String(fncCountByteForBookmartlet(strSourceForLink));
				break;
			case BOOKMARKLET_YES_LINK:
				strSourceForHTML		=	"<a href=\"\r\n"							+
											fncEncodeBookmartlet(strSourceForHTML)		+
											"\">Bookmarklet</a>\r\n"					;
				strSourceForLink		=	strSourceForLink;
				strCount				=	String(fncCountByteForBookmartlet(strSourceForLink));
				break;
			case BOOKMARKLET_NO:
			default:
				strSourceForHTML		=	strSourceForHTML;
				strSourceForLink		=	strDummy;
				strCount				=	"";
				break;
		}
	}

	if(		objConvertTypeOptions.selectedIndex	>=	0						&&
			objConvertTypeOptions.selectedIndex	<	aryConvertTypes.length	)
	{
		switch(objConvertTypeOptions[objConvertTypeOptions.selectedIndex].value)
		{
			case CONVERT_TYPE_ENCODE:
				strSourceForHTML		=	fncEncodeHTML(strSourceForHTML);
				break;
			case CONVERT_TYPE_ENCODE_PRE_CODE:
				strSourceForHTML		=	"<pre class=\"source-group\">\r\n"			+
											"<span class=\"source-head\"></span>\r\n"	+
											"<code class=\"source-code\">\r\n"			+
											fncEncodeHTML(strSourceForHTML)				+
											"</code>\r\n</pre>\r\n"						;
				break;
			case CONVERT_TYPE_ENCODE_TEXTAREA:
				strSourceForHTML		=	"<textarea"									+
												" class=\"source-copy\""				+
												" wrap=\"off\""							+
												" readonly"								+
											">\r\n"										+
											fncEncodeHTML(strSourceForHTML)				+
											"</textarea>\r\n"							;
				break;
			case CONVERT_TYPE_DECODE:
				strSourceForHTML		=	fncDecodeHTML(strSourceForHTML);
				break;
			case CONVERT_TYPE_NONE:
			default:
				strSourceForHTML		=	strSourceForHTML;
				break;
		}
	}

	objHTMLTextArea.value	=	strSourceForHTML;
	objLinkBookmark.href	=	strSourceForLink;
	objCountTextBox.value	=	strCount;

}

function fncConvertFromTabToSpace(strSource,strTabNumber)
{

	var numTabNumber;

	var arySourceLines;
	var numLine;
	var arySourceWords;
	var numWord;
	var strSourceChar;
	var numChar;
	var numCount;

	numTabNumber					=	Number(strTabNumber);

	strSource						=	strSource.replace(/\r\n/ig,"\r");
	strSource						=	strSource.replace(/\r/ig,"\n");

	arySourceLines					=	strSource.split("\n");

	for(numLine=0;numLine<arySourceLines.length;numLine++)
	{

		arySourceWords				=	arySourceLines[numLine].split("\t");

		for(numWord=0;numWord<arySourceWords.length-1;numWord++)
		{

			strSourceChar			=	arySourceWords[numWord];
			numCount				=	0;

			for(numChar=0;numChar<strSourceChar.length;numChar++)
			{
				numCount			=	numCount+((strSourceChar.charCodeAt(numChar)&0xff00)==0?1:2);
			}

			numSpace				=	numTabNumber-(numCount%numTabNumber);

			for(numCount=0;numCount<numSpace;numCount++)
			{
				strSourceChar		=	strSourceChar+" ";
			}

			arySourceWords[numWord]	=	strSourceChar;

		}

		arySourceLines[numLine]		=	arySourceWords.join("");

	}

	return arySourceLines.join("\n");

}

function fncEncodeHTML(str)
{
	return			str											.
					replace(	/&/ig	,	"&amp;"		)		.
					replace(	/</ig	,	"&lt;"		)		.
					replace(	/>/ig	,	"&gt;"		)		.
					replace(	/"/ig	,	"&quot;"	)		.
					replace(	/ /ig	,	"&nbsp;"	)		;
}

function fncDecodeHTML(str)
{
	return			str											.
					replace(	/&lt;/ig	,	"<"		)		.
					replace(	/&gt;/ig	,	">"		)		.
					replace(	/&quot;/ig	,	"\""	)		.
					replace(	/&nbsp;/ig	,	" "		)		.
					replace(	/&amp;/ig	,	"&"		)		;
}

function fncEncodeBookmartlet(str)
{
	return			str											.
					replace(/&/ig,"&amp;")						.
					replace(/</ig,"&lt;")						.
					replace(/>/ig,"&gt;")						.
					replace(/"/ig,"&quot;")						;
}

function fncCountByteForBookmartlet(str)
{
	str		=	str.replace(/\r/ig,"").replace(/\n/ig,"").replace(/\t/ig,"")
	return	(	str.match(/[\x20]/ig)			==	null	?	0	:	str.match(/[\x20]/ig).length			)	*	3	+
			(	str.match(/[\x21-\x7e]/ig)		==	null	?	0	:	str.match(/[\x21-\x7e]/ig).length		)	*	1	+
			(	str.match(/[｡-ﾟ]/ig)			==	null	?	0	:	str.match(/[｡-ﾟ]/ig).length				)	*	2	+
			(	str.match(/[^\x20-\x7e｡-ﾟ]/ig)	==	null	?	0	:	str.match(/[^\x20-\x7e｡-ﾟ]/ig).length	)	*	2	;

}

function fncSelectTemplate()
{

	var objTemplateOptions				=	document.getElementById("idTemplate").options;

	if(		objTemplateOptions.selectedIndex	>=	0						&&
			objTemplateOptions.selectedIndex	<	aryTemplates.length		)
	{
		switch(objTemplateOptions[objTemplateOptions.selectedIndex].value)
		{
			case TEMPLATE_BOOKMARKLET_FOR_SIMPLE:
				fncOpenTemplateWindow(	TEMPLATE_BOOKMARKLET_FOR_SIMPLE									,
										"javascript:("										+	"\n"	+
										"\tfunction(){"										+	"\n"	+
										"\t}"												+	"\n"	+
										")"													+	"\n"	+
										"()"												+	"\n"	);
				break;
			case TEMPLATE_BOOKMARKLET_FOR_FRAMES:
				fncOpenTemplateWindow(	TEMPLATE_BOOKMARKLET_FOR_FRAMES									,
										"javascript:("										+	"\n"	+
										"\tfunction(){"										+	"\n"	+
										"\t\tvar"											+	"\n"	+
										"\t\t F=function(w){"								+	"\n"	+
										"\t\t\ttry{"										+	"\n"	+
										"\t\t\t}catch(e){"									+	"\n"	+
										"\t\t\t}"											+	"\n"	+
										"\t\t\tfor(var i=0;i&lt;w.frames.length;i++){"		+	"\n"	+
										"\t\t\t\tF(w.frames[i])"							+	"\n"	+
										"\t\t\t}"											+	"\n"	+
										"\t\t}"												+	"\n"	+
										"\t\t;"												+	"\n"	+
										"\t\tF(top)"										+	"\n"	+
										"\t}"												+	"\n"	+
										")"													+	"\n"	+
										"()"												+	"\n"	);
				break;
			default:
				break;
		}
	}

}

function fncOpenTemplateWindow(strTitle,strTemplate)
{
	var s=window.open("","Template");
	with(s.document)
	{
	open();
	write	(
				"<html>"																	+	"\n"	+
					"<head>"																+	"\n"	+
						"<title>"	+	strTitle	+	"</title>"							+	"\n"	+
						"<style>"															+	"\n"	+
						"<!--"																+	"\n"	+
							"body{"															+	"\n"	+
								"margin:0px;"												+	"\n"	+
								"padding:0px;"												+	"\n"	+
								"overflow:hidden;"											+	"\n"	+
							"}"																+	"\n"	+
							"*{"															+	"\n"	+
								"font-size:12px;"											+	"\n"	+
								"font-family:monospace;"									+	"\n"	+
							"}"																+	"\n"	+
							"textarea{"														+	"\n"	+
								"width:100%;"												+	"\n"	+
								"height:90%;"												+	"\n"	+
							"}"																+	"\n"	+
						"-->"																+	"\n"	+
						"</style>"															+	"\n"	+
					"</head>"																+	"\n"	+
					"<body>"																+	"\n"	+
						strTitle															+	"\n"	+
						"<textarea"															+	"\n"	+
							" wrap=\"off\""													+	"\n"	+
							" onclick=\"this.select();\""									+	"\n"	+
							" onkeyup=\"this.select();\""									+	"\n"	+
							" onfocus=\"this.select();\""									+	"\n"	+
							" readonly"														+	"\n"	+
						">"																	+	"\n"	+
							strTemplate														+	"\n"	+
						"</textarea>"														+	"\n"	+
					"</body>"																+	"\n"	+
					"</html>"
			);
	close()
	}
	s.focus();
}
//-->
</script>
</head>
<body>

<table border="0px" cellspacing="4px" cellpadding="4px">
<tr>

<td class="clsFrame" nowrap>
TabNumber:
<select id="idTabNumber" onchange="fncEncode();">
<script>
<!--
for(var key in aryTabNumbers){
	document.write("<option value=\""+aryTabNumbers[key]+"\">"+aryTabNumbers[key]+"</option>");
}
//-->
</script>
</select>
</td>

<td class="clsFrame" nowrap>
Bookmarklet:
<select id="idBookmarklet" onchange="fncEncode();">
<script>
<!--
for(var key in aryBookmarklets){
	document.write("<option value=\""+aryBookmarklets[key]+"\">"+aryBookmarklets[key]+"</option>");
}
//-->
</script>
</select>
</td>

<td class="clsFrame" nowrap>
Convert:
<select id="idConvertType" onchange="fncEncode();">
<script>
<!--
for(var key in aryConvertTypes){
	document.write("<option value=\""+aryConvertTypes[key]+"\">"+aryConvertTypes[key]+"</option>");
}
//-->
</script>
</select>
</td>

</tr>
<tr>

<td class="clsFrame" nowrap>
Count:
<input type="text" id="idCount" readonly>byte
</td>

<td class="clsFrame" nowrap>
Link:
<a id="idLink">Bookmarklet</span>
</td>

<td class="clsFrame" nowrap>
Template:
<select id="idTemplate">
<script>
<!--
for(var key in aryTemplates){
	document.write("<option value=\""+aryTemplates[key]+"\">"+aryTemplates[key]+"</option>");
}
//-->
</script>
</select>
<input type="button" value="open" onclick="fncSelectTemplate();">
</td>

</tr>
</table>

<textarea id="idSource" wrap="off" onclick="fncEncode();" onkeyup="fncEncode();" onchange="fncEncode();"></textarea>
<textarea id="idHTML" wrap="off" onclick="this.select();" onkeyup="this.select();" onfocus="this.select();" readonly></textarea>
<input type="hidden" id="idDummy">
</body>
</html>

投稿者 Kanasansoft : 2005/06/21

このエントリーのトラックバックURL

http://www.kanasansoft.com/cgi/mt/mt-tb.cgi/26

トラックバック一覧

Bookmarkletを作成するツールを自作

任意のコードを実行するBookmarklet Ver1.1 私が一番多用してい...

任意のコードを実行するBookmarklet Ver1.1 from Kanasansoft Web Lab. : 2005/06/27

Bookmarkletを作成するツール[Kanasansoft Convert...

Bookmarkletを作成するツールのバージョンアップ from Kanasansoft Web Lab. : 2005/07/18

コメント一覧

このエントリーに対するトラックバックはありません。

コメント投稿

<<見やすいBookmarkletの記述

MovableType用秀丸強調表示定義ファイル Ver1.0>>