SQLの窓

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