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

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

デモページ



ダウンロードは必要ありません。cdnjs でホスティングされています。ただ、使い方がイマイチ解りにくいのが難点でした。GitHub の demo.js を読んで初めて使い方が解ります。

FileSaver.js は saveAs メソッドを提供します

テキストデータをダウンロードするには、ブラウザが一般的に提供する Blob クラスを使う必要があります。そのインスタンスを saveAs メソッドに引き渡して目的が達成されます。( canvas を使って画像も保存できますが、話がややこしくなるのでここでは触れていません / ※ canvas-toBlob.js が必要です )


ソースコード
$(function() {

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

		var csv = "";

		$("table").find("th").each(function( index ){
			if ( index != 0 ) {
				csv += ",";
			}
			csv += '"' + $(this).text() + '"';
		});
		csv += "\n";

		var cnt = 0;
		$("table").find("tr").each( function(){

			// TH の最初の一行は処理しない )
			if ( cnt > 0 ) {

				$(this).find("td").each(function( col_cnt ){
					if ( col_cnt != 0 ) {
						csv += ",";
					}

					if ( col_cnt == 0 ) {
					// Excel で文字列をそのまま取り込めるように( 例. 0001 を文字列として扱う )
						csv += "=\"" + $(this).text() + "\"";
					}
					else {
						csv += "\"" + $(this).text() + "\"";
					}
				});
				csv += "\n";
			}

			cnt++;

		} );

		// UTF-8 の CSV を化けずに Excel で開く為
		var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
		saveAs(
			new Blob(
				[bom,csv]
				, {type: "text/csv;charset=" + document.characterSet}
			)
			, "syain.csv"
		);

	} );

});

Excel で正しく表示する為に

ブラウザ上のデータは UTF-8 を想定しています。なのでそのまま単純に保存してしまうと、Excel が SHIFT_JIS を想定して読み込むので化けてしまいます。そこで、テキストの先頭に BOM をセットして、UTF-8 である事を Excel に知らせてやる必要があります。
2014-11-29 バージョンでは、自分で BOM を設定する必要がありましたが、2016-06-16 バージョンでは内部に auto_bom という処理があり、XML か text のタイプで キャラクタセットが utf-8 の場合は自動で BOM を追加してくれます。

BOM が必要ない場合は、第三引数(ファイル名の次)に true を指定するといいようになっています。
その他、"0001" という文字列をそのまま使えるように、="0001" という形で CSV のフィールドにセットしています。こうした状態で Excel に読み込むと、式の値が文字列であるようになります。Excel としてはかなり特殊な扱いのデータになりますが、Excel として保存してからあらためて .CSV として保存するとフィールドの値は単純な 0001 となります。 Uint8Array 関連する記事 FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
posted by lightbox at 2018-01-29 14:08 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library

オリジナルはVector からダウンロードできる事を確認しました。しかし、実際は ecl.js と Sleipnir の相性が悪い件について という記事があり、そちらで新しいものが配布されています。

とりあえずこちらにも用意しました。
ecl_new.txt

内容は単純に変換関数がグローバルに追加されます。
EscapeSJIS
UnescapeSJIS
EscapeEUCJP
UnescapeEUCJP
EscapeJIS7
UnescapeJIS7
EscapeJIS8
UnescapeJIS8
EscapeUnicode
UnescapeUnicode
EscapeUTF7
UnescapeUTF7
EscapeUTF8
UnescapeUTF8
EscapeUTF16LE
UnescapeUTF16LE

一つだけタイプを取得する関数が以下です。
GetEscapeCodeType
戻される文字列の種類

SJIS
EUCJP
JIS7
JIS8
Unicode
UTF8
UTF16LE

※ ソースコードを見た限りでは、UTF7はありませんでした

UrlEncode にするには、これをさらに、
1) * から %24 に変換
2) + から %2B に変換
3) / から %2F に変換
してやる必要があります
※ 正確には、%20 を + に戻す必要がありますが、このままでもサーバでは正しく変換されます

関連する記事

javascriptで文字コード変換
( ここの情報は有益ですが、バイナリデータとしての変換は、ecl.js では出来ず、Encoding.js を使用します )



<script type="text/javascript" src="http://lightbox.on.coocan.jp/ecl_new.js" ></script>
<script type="text/javascript">
var str = EscapeUTF8(" !\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~")
str = str.replace(/\//g,'%2F');
str = str.replace(/\*/g,'%24');
str = str.replace(/\+/g,'%2B');
str = str.replace(/%20/g,'+');
alert(str)
</script>

※ テストはこちらから行えます



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

2018年01月26日


JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項

世の中の一般的な使用方法は、オリジナルサイトの概要と大差無いようですが、実際本当に使いたい環境を持っている人にとっては説明不十分です。

バージョン 1.5.4 までと 1.5.5 からでは仕様がすこし違う

問題は、element.focus(); ですが、これですと環境によってはコピー対象となるエレメントの位置までスクロールしてしまうので(実際このブログではしてしまった)ので、良く解らずに 1.5.4 以前を使用している場合は、バージョンアップしないほうがいいです。また、以下のソースコードからも解るように、focus() が実行されるのは、INPUT か TEXTAREA か その他の要素で contenteditable 属性を持っている場合だけなので、普通に DIV ならば focus() が実行される事はありません。
/*!
 * clipboard.js v1.5.12
 * https://zenorocha.github.io/clipboard.js
 *
 * Licensed MIT c Zeno Rocha
 */
    if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
        element.focus();
        element.setSelectionRange(0, element.value.length);

        selectedText = element.value;
    }
    else {
        if (element.hasAttribute('contenteditable')) {
            element.focus();
        }

        var selection = window.getSelection();
        var range = document.createRange();

        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);

        selectedText = selection.toString();
    }

    return selectedText;
この SyntaxHighlighter の右上のツールバーにある copy ボタンは、Clipboard.js を組み込んで実装しました。

実装

このような事をふまえて一般的な実装は以下のようになります
<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.min.js"></script>
<script>
$(function(){
	var clipboard = new Clipboard('.clipboard_element');
	clipboard.on('success', function(e) {
	    alert("クリップボードにコピーしました");
	});
	$(".action_btn").on("click", function(){
		var work = prompt("入力値をクリップボードにセット")
		$("#clipboard").text( work );
	})
});
</script>
<div class="clipboard_element" data-clipboard-target="#clipboard">
	<button type="button" class="action_btn">実行</button>
</div>

<div id="clipboard" style='position:absolute;left:-1000px;width:900px;white-space:pre-wrap;word-wrap:break-word;'></div>
new Clipboard で作成されるオブジェクトは、クリック対象の clipboard_element クラスを持つ要素を対象として作成されます。ここでは、clipboard_element は、DIV に対して設定されており、その DIV の中にアクションのトリガとなるボタンを配置しています。ボタンがクリックされると、まずそのイベントで必要なデータが画面外の要素に転送され、クリップボードにそのデータが送られます。要素間の関連性は、ボタンの親要素である DIV に data-clipboard-target="#clipboard" で設定されています
このソースコードには、いくつか重要な部分が存在します。 注意事項 1) ページにひとつだけ、クリップボード転送用の要素を DIV で作成する (body 要素直下でいいと思います) 2) DIV 内に改行やスペースを反映させる為に white-space:pre を設定する 3) ページ上から隠す為に、position:absolute;left:-1000px を設定する (クリップボートへコピーする為に選択する必要があるので、非表示では動作しません) 転送したテキストがこちら側へ表示しないように width:900px と word-wrap:break-word を指定する 4) クリックイベントは、ボタンである必要は無く、どのような要素でも良い 5) ボタンをクリックした時に必要な文字列を DIV に転送した後、DIV のクリックイベントが発生 実際の Clipboard.js のイベントは、ページ上のクリックイベントが全て終了してから発生するので、この順序である必要は無いのですが、仕様変更等あった場合にそなえてこの順序が良いと思います。 追記 ここで行っているような転送用のエリアを作成した処理を半自動でやるのがどうやら Advanced Options のあたりのようなのですが、ソース読むといろいろ scroll とかやってるので、環境によってはやはり問題がでるかもしれません。 Google、ChromeでのFlashブロックをさらに推進、12月にHTML5をデフォルトに 関連する記事 clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。
posted by lightbox at 2018-01-26 18:57 | 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 終わり