ChromebookでシフトJISテキストファイルを保存するChrome拡張を作る: こばこのひみつ

2015/03/17

ChromebookでシフトJISテキストファイルを保存するChrome拡張を作る

Chromebookでは、ローカルのテキストファイルを作成・編集するアプリも色々あるようです。
CaretやTextといったアプリを使わせて頂いています。

Chromeウェブストアを見れば、たくさんこの手のアプリが並んでいます。

ただ、作成されるテキストファイルがUTF-8になるのがちょっと困っていました。確かに標準的な形式ですけれど、ぼくはHP200LXのLEで読みたいときがあるので、いわゆるシフトJISがいいのです。
HP200LXのSDにChromebookでコピーしてから、HP200LX側で、nkfやhtoxを利用して変換すれば済みます。でもmaxdos経由や生DOSでないとメモリも足らないし、時間も少しかかるので、使い勝手がよくありません。
少し検索しても、簡単にシフトJISでテキストを保存してくれそうなアプリを見つけられませんでした。

ブラウザをテキストエディタにできるURIもshift-JISにして試してみました。
ブラウザが簡易エディタに
これだとシフトJISで保存できたけれど、余計なタグがたくさん付いてしまい、除去するのが面倒でした。

なければ作ってしまえばいい、というわけで、初めてChrome拡張とやらを作ってみることにします。なにしろJavaScriptなんて一度も書いたことがありません。ググって参考になりそうなアプリの吐き出し部分のcharsetでもいじればいいのかと思っていたので、気軽に作り方を調べます。
公式サイトにサンプルとかあるみたいです。あとはテキストをシフトJISで保存できればいいじゃん、などと思ったものの、JavaScriptからシフトJISテキストを出力するサンプルとか見つけられませんでした。どうやら、JavaScriptの文字列は内部的にはUTF-16で、UTF-8に変換するのは標準で簡単にできるもののようです。

文字コード変換ライブラリを見つけました。素晴らしい！
ぽりごんさんのJavaScriptで文字コード変換ライブラリ作ってみた | 圧縮電子どうのこうの
 polygonplanet/encoding.js · GitHub
このencoding.jsを使わせてもらうことに決めます。MITライセンスのようです。

なんかわからないけど、簡単に使えそうです。

// string to array 文字列を配列に変換
var unicodeArray = Encoding.stringToCode(memo);
// encode shift-JIS encoding.jsでシフトJISに変換
var sjisArray = Encoding.convert(unicodeArray, 'SJIS', 'UNICODE');

これで、シフトJISに変換してくれます。簡単！
これでいけるはず、と試すと、どうやら配列で返ってきます。stringにもできるようです。でもそれを出力しようとしても、なかなかうまくいかずに苦戦します。へえ、JavaScriptって、昔はローカルファイルを扱えなかったけど、今はできるんだ。

// Create a FileWriter object
if (memo.length) {
window.URL = window.URL || window.webkitURL;
var blob = new Blob([outBuffer], {type: 'application/octet-stream'});
var lnk = $id("download");
lnk.download = filename;
lnk.href = window.URL.createObjectURL(blob);
}

全くわけもわからず試行錯誤の結果、とりあえず動くものが出来ました。

せっかくシフトJISに変換しても、stringに入れてしまってはだめで、バイナリで扱ってやるのか。

// make file
var len = sjisArray.length;
var outBuffer = new ArrayBuffer(len);
var outView = new Uint8Array(outBuffer);
for(i=0 ; i <len ; ++i) {
outView[i] = sjisArray[i];
}

拡張機能にするのは、Chromeブラウザ上でフォルダを指定するだけです。簡単だー。

Chromeのバーにアイコンが常駐し、アイコンクリックするとメモを打ち込めます。
ここにUTF-8で作っておいたテキストからコピペして、saveボタンをクリックすると、ダウンロードリンクが生成されるというものです。