SQLの窓

2018年02月12日


自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボードにコピー )

関連する記事

自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )



SyntaxHighlighter でソースコードをクリップボードへコピーしていたのは、元々は Flash でした。現在はHTML のボタンに差し替えていますが、昔は object 要素が埋め込まれていました。なので、差し替え方法としては object のあった場所に button を作成する事になります。

元々、innerHTML の中に文字列をセットしていただけなので、特別な問題無く差し替える事ができています。問題は、クリップボードの処理をどのように実装するかというところが重要ですが、これは clipboard.js というライブラリを使用する事によって、IE11 という面倒なブラウザの対応も容易になっています。

以下のサンプルでは、innerHTML 以外の方法として、jQuery と document.write による実装を行っています。パターンが4つあるのは、JavaScript 内で日本語記述をしないようにコード化を行っています。HTMLエンティティのほうは、ブラウザに表示される時に日本語表現となります。unicode 文字列は、JavaScript が文字列として読み込んだ瞬間に日本語表現になります。
( ※ SyntaxHighlighter 内の既存ソース内へ追加する為、日本語を使用しないようにしています。 )

この場合どちらも結果は同じですが、JavaScript では 後者が重要です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.js"></script>
<script>
$(function () {

	// jQuery でボタン作成
	$(html1).appendTo(document.body);
	$(html2).appendTo(document.body);

	// クリップボード用のトリガーとなる要素が持つクラスを決定する
	// ( ボタンにこのクラスをセットしておく )
	var clipboard = new Clipboard('.my_clipboard');

	// ボタンのイベントで、クリップボード転送用のエリアへデータを送る
	// ( ボタンに data-clipboard-target で、エリアの id をセットしておく )
	$(".my_clipboard").on("click", function(){
		var time = (new Date()).getTime();
		console.log(time);
		$("#target_clipboard").text(time);
	});

	// それに対するクリップボードへコピー後の処理( 無くてもいい )
	clipboard.on('success', function(e) {
		e.clearSelection();
		alert("クリップボードにコピーしました");
	});

});

var html1 = "<button style='vertical-align:top;border-radius:4px;height:16px;line-height:8px;' class=\"my_clipboard\" data-clipboard-target=\"#target_clipboard\" title=\"&#12463;&#12522;&#12483;&#12503;&#12508;&#12540;&#12489;&#12408;&#12467;&#12500;&#12540;&#12375;&#12414;&#12377;\">copy1</button>"

var html2 = "<button style='vertical-align:top;border-radius:4px;height:16px;line-height:8px;' class=\"my_clipboard\" data-clipboard-target=\"#target_clipboard\" title=\"\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u3078\u30b3\u30d4\u30fc\u3057\u307e\u3059\">copy2</button>"

var html3 = "<button style='vertical-align:top;border-radius:4px;height:16px;line-height:8px;' class=\"my_clipboard\" data-clipboard-target=\"#target_clipboard\" title=\"&#12463;&#12522;&#12483;&#12503;&#12508;&#12540;&#12489;&#12408;&#12467;&#12500;&#12540;&#12375;&#12414;&#12377;\">copy3</button>"

var html4 = "<button style='vertical-align:top;border-radius:4px;height:16px;line-height:8px;' class=\"my_clipboard\" data-clipboard-target=\"#target_clipboard\" title=\"\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u3078\u30b3\u30d4\u30fc\u3057\u307e\u3059\">copy4</button>"

// ボタンを文字列として出力して作成
document.write(html3);
document.write(html4);

</script>

<div id="target_clipboard" style='position:absolute;left:-1000px;width:900px;white-space:pre-wrap;word-wrap:break-word;'></div>
※ ボタンは、copy3 copy4 copy1 copy2 という順序で作成されます。

jQuery の $(function(){}) は、ページがロードされた後に実行されるので、まず copy3 と copy4 が作成されます。その後、$(function(){}) の最初にある記述で、copy1 と copy2 が作成されます。そして、それぞれに対してクリップボードのオブジェクトと、クリックイベントを関係付けています。



posted by lightbox at 2018-02-12 19:41 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2018年02月02日


自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )

2018/02 : 更新
1) 行番号部分をクリックするとソースを選択するようにしました。
2) 表示時にテキストエリアにフォーカスを移すようにしました。
3) コピー操作をしやすいように、テキストエリア内に padding-left を入れました。
4) ツールバーの不透明度を 0.5 => 0.8 に変更しました。
5) ツールバーに対する border の CSS を変更して見えやすくしました。
そもそも、SyntaxHighlighter を配布していたサイトが GitHub に移った上、バージョン4 になってるけれど、いろいろ一般的には面倒な事になってるので、古いバージョンを一生懸命使って来た... というのが現実でした。 しかし、ここに来て行単位を取り出す『ソースの表示』がしょぼい事や、クリップボードへコピーするのが Flash だったとか、印刷表示ができていない(理由は解ったので対応済み)とか、about のリンク先が終わってるとか、ロクでも無い現状を打破しました。 これらは、オリジナルの処理を書き換えるという方法で行ってます。マイナーバージョンが上がった際にあった shLegacy.js というスクリプトで実装できます。解る人はこのサイトのソースを見てもらってコピーすれば使えます。但し、ウチのバージョンは 2.0.296 なんで、世の中的には難しいでしょうけれど。
ありがたいことに、WEB アーカイブからダウンロードできました。

※ 他のバージョンも可能です。
※ ライセンスは GNU Lesser General Public License
ソースの表示 行番号対応しました。これは、JQuery Lined TextArea plugin というプラグイン使ってます。行番号だけあれば十分なので、既に開発も終わってる古いソフトですが、 MIT License だしソースは短いし、自分でどうにでもアップグレードできそうなので使う事にしました。 ▼ ウインドウを最大化した時に行番号を表示するという処理を、jquery-linedtextarea.js の中に追加しています( ソースはこれです )

			$(window).resize( function(){
				var domTextArea	= textarea[0];
				var scrollTop 		= domTextArea.scrollTop;
				var clientHeight 	= domTextArea.clientHeight;
				codeLinesDiv.css( {'margin-top': (-1*scrollTop) + "px"} );
				lineNo = fillOutLines( codeLinesDiv, scrollTop + clientHeight, lineNo );
			});
ただ、textarea を使うので、ウインドウを最大化した時の幅や高さの調整は自分で外から追加する必要がありました。



▼ 組み込んだ内容
SyntaxHighlighter.toolbar.items.viewSource = function(highlighter)
{
	this.create = function()
	{
		return "\u884c\u756a\u53f7\u4ed8\u304d\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u3067\u30bd\u30fc\u30b9\u3092\u8868\u793a\u3057\u307e\u3059";
	};
	
	this.execute = function(sender, event, args)
	{
		var wnd = SyntaxHighlighter.utils.popup('', '_blank', 750, 400, 'location=0, resizable=1, menubar=0, scrollbars=1')
			;
		
		var code = SyntaxHighlighter.utils.unindent(
			SyntaxHighlighter.utils.fixForBlogger(highlighter.originalCode)
				.replace(/&lt;/g, '<')
				.replace(/&gt;/g, '>')
				.replace(/&amp;/g, '&')
				.replace(/\n/g, '\n')
			);
		code = SyntaxHighlighter.utils.unindent(code);
		
var str="";
str+="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> ";
str+="<"+"script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js\"></"+"script> \n";
str+="<"+"script src=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.js\"></"+"script> \n";
str+="<link id=\"link\" rel=\"stylesheet\" href=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.css\"> \n";
		wnd.document.write(str);

		wnd.document.write('<t'+ 'extarea readonly style="width:100%;height:350px">' + code + '</' + 'textarea>');

str="";
str+="<"+"script> \n";
str+="$(function() { \n";
str+="	$(\"textarea\").linedtextarea(); \n";
str+="	$(\".linedwrap\").css({\"width\":\"calc(100% - 20px\"}); \n";
str+="	$(\".lines\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+="	$(\"textarea\").css({\"width\":\"calc(100% - 80px)\", \"padding-left\":\"10px\"}); \n";
str+="	$(\"textarea\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+="	$(\"head\").append($(\"<title>\").text(\"\u30bd\u30fc\u30b9\u306e\u8868\u793a\")); \n";
str+="	$(\".codelines\").on(\"click\", function(){ $(\"textarea\").select() } ); \n";
str+="	$(\"textarea\").focus(); \n";
str+="}); \n";
str+="</"+"script> ";
		wnd.document.write(str);
		wnd.document.close();
	};
};

何も無いところに動的にいろいろやる必要があるので、document.write は仕方無いので使っています。
 document.write だけに関して言えば、将来性はそのへん疑問はありますが、当面しばらく大丈夫だと思ってます。

内容としては、動的に jQuery を書き出して、さらに jQuery のコードも書き出す事になってます。

高さと幅の調整は jQuery の部分の、本体とその親要素に対して calc を使って 100% から補正するというテクニックでやっています。

▼ 補正部分のみ取り出すとこうなります
<script> 
$(function() { 
	$("textarea").linedtextarea(); 
	$(".linedwrap").css({"width":"calc(100% - 20px"}); 
	$(".lines").css({"height":"calc(100% - 20px)"}); 
	$("textarea").css({"width":"calc(100% - 80px)"}); 
	$("textarea").css({"height":"calc(100% - 20px)"}); 
	$("head").append($("<title>").text("ソースの表示")); 
	$(".codelines").on("click", function(){ $("textarea").select() } ); 
	$("textarea").focus(); 
}); 
</script>

次は、クリップボードのお話です

自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボードにコピー )


以下は、一般的なコードサンプルになります
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

$(function(){

	$("#open_window").on("click", function(){

		code = $("#code").val();

		var wnd = win_open("","_blank",750, 400, "location=0,resizable=1,menubar=0,scrollbars=1");

var str="";
str+="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> ";
str+="<"+"script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js\"></"+"script> \n";
str+="<"+"script src=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.js\"></"+"script> \n";
str+="<link id=\"link\" rel=\"stylesheet\" href=\"https://lightbox.sakura.ne.jp/homepage/jquery/plugins/jquery-linedtextarea.css\"> \n";
		wnd.document.write(str);

		wnd.document.write('<t'+ 'extarea readonly style="width:100%;height:350px">' + code + '</' + 'textarea>');

str="";
str+="<"+"script> \n";
str+="$(function() { \n";
str+="	$(\"textarea\").linedtextarea(); \n";
str+="	$(\".linedwrap\").css({\"width\":\"calc(100% - 20px\"}); \n";
str+="	$(\".lines\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+="	$(\"textarea\").css({\"width\":\"calc(100% - 80px)\", \"padding-left\":\"10px\"}); \n";
str+="	$(\"textarea\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+="	$(\"head\").append($(\"<title>\").text(\"\u30bd\u30fc\u30b9\u306e\u8868\u793a\")); \n";
str+="	$(\".codelines\").on(\"click\", function(){ $(\"textarea\").select() } ); \n";
str+="	$(\"textarea\").focus(); \n";
str+="	$(\"body\").css({\"overflow-y\":\"y:hidden\"}); \n";
str+="}); \n";
str+="</"+"script> ";
		wnd.document.write(str);
		wnd.document.close();

	});

});

function win_open(url, name, width, height, options)	{
	var x = (screen.width - width) / 2;
	var y = (screen.height - height) / 2;
	options +=
		', left=' + x + 
		', top=' + y +
		', width=' + width +
		', height=' + height
	;
	// 先頭のカンマを取り除く
	options = options.replace(/^,/, '');

	var win = window.open(url, name, options);
	win.focus();
	return win;
}
</script>
<input id="open_window" type="button" value="window を開く">
<br>
<textarea id="code" style='width:400px;height:300px'></textarea>




posted by lightbox at 2018-02-02 14:31 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2018年01月29日


JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法

SyntaxHighlighter カスタマイズ

SyntaxHighlighter のツールバーの右端のアイコンでファイルをダウンロードさせると、テキストのキャラクタセットは UTF-8 になります。通常はそれでもいいのですが、VBScript をダウンロードしてもらう場合は SHIFT_JIS である必要があるので、なんとかならないかと調べてみてすぐ見つけたのが

javascriptで文字コード変換

という Qiita の記事でした。その中で紹介されている ecl.js は、自分も以前使った事があったのですが、バイナリデータとして変換する目的では無いと記憶していました。ですが、一応記事の冒頭にあるコードでテストしてみましたがうまく行かず、Encoding.js のほうを使用して目的を達成しました。

Encoding.js

元々、バイナリの配列にデータを格納して変換しているので、文字列からの変換処理さえあればすぐ使えます。その関数は、Qiita の記事に既に紹介されていたのでとても簡単に実装する事ができました。

実装では、改行コードの扱いに留意して下さい。

サンプルコード
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="https://lightbox.sakura.ne.jp/homepage/js/encoding.js"></script>

<script>
var str2array = function(str) {
    var array = [],i,il=str.length;
    for(i=0;i<il;i++) array.push(str.charCodeAt(i));
    return array;
};
var str   = "あいうえお";
var array = str2array( str );
var sjis_array = Encoding.convert(array, "SJIS", "UNICODE");
var sjis_data = new Uint8Array(sjis_array);

saveAs(
	new Blob(
		[sjis_data]
		, {type: "text/csv;charset=shift_jis"}
	)
	, "shift_jis.txt"
);

</script>
※ テストはこちらから行えます(ここで copy してリンク先で貼り付けて実行して下さい)

関連する記事

ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存

ファイルを JavaScript から保存する FileSaver.js

FileSaver.js は saveAs メソッドを提供します。ダウンロードする必要は無く、cdnjs でホスティング されています。

Uint8Array


posted by lightbox at 2018-01-29 14:10 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
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 終わり