詰碁印刷3 碁盤と碁石と手順の描画、javascriptで配列の簡単なシャローコピーの作り方 – 六帖のかたすみ
の続きです。
ようやく公開できるレベルになったのでwebサイトにアップロードします。
今日一番苦労したのは、zipファイル内のファイル名が文字化けしてしまったことです。firebug内でも化けて表示されていました。
javascriptで扱う文字列はそのスクリプトやHTMLを保存した文字コードに依存します。UNICODEでないと中国語やフランス語のセディーユ・アクサン記号やドイツ語のウムラウトが文字化けするし、Apacheサーバーも全てUNICODEで動作しているので、作業はすべてUNICODEで行っています。基本的にはサイト上の文字が全てUNICODEで書かれていれば問題は起きません。
zipファイルの中身のファイル名をデバッガ上で見るとファイル名をゲットしたその場で文字化けしています。どうも、Windowsのファイルシステム自体がSJISでできているようです。ちょっと時代遅れじゃありませんか。
javascriptオンリーで作成していたのでPHPのようなラクラク文字コード変換システム(mb_convert_encodingで一発です)はありません。探していると
JavaScriptで文字コード変換ライブラリ作ってみた | 圧縮電子どうのこうの
無償でライブラリを作っている人がいらっしゃいました！！！ありがたやありがたや。
var fileStr = fileList[i];
var fileArr = Encoding.stringToCode(fileList[i]);
if(Encoding.detect(fileArr, ‘SJIS’))
{
var utf8Arr = Encoding.convert(fileArr, ‘UNICODE’, ‘SJIS’);
fileStr = Encoding.codeToString(utf8Arr);
}
こんな感じでたった数行でSJIS→UNICODEへの変換が可能になり、おかげさまで「TOM死活初級001」などの文字列が無事表示できるようになりました。JavaScriptでファイル名を扱うプログラムを書いている方はくれぐれも文字コードに気を付けてください。
詰碁の二段組表示はごく最近に読んだこの本が役に立ちました。罫線の引き方を始めとするレイアウト作成もこの本で習ったことにアレンジを加えるだけでできました。
また、DOMの動的生成も最近読んだjQuery公式マニュアルのおかげで楽々です。canvasだってどんどん配置できます。勉強したことは欠片も無駄にならないものなのですね。
//ボックス要素を作成 divの中に碁盤とコメントを配置
var $newBox = $(“<div/>”);
$newBox.addClass(“box”);
//タイトル
var $name = $(“<p/>”);
$name.addClass(“name”);
var nameText = element.fileName.split(“.”)[0];
if(eIndex == -1){
nameText += ” 問題”;
}else{
var no = eIndex+1;
nameText += ” ” + no.toString() + “図”;
}
$name.text(nameText)
$newBox.append($name);
なお、jQueryが便利だからといって直接CSSプロパティを .css() で設定して見た目をいじってははいけません。昨日書いた理由によるものです。上のコードのように、addClassでクラスをつけ、後のことはCSSファイルに任せましょう。
CSSでは印刷特有の設定を行うことができます。印刷時に表示したくないアイテムには @media print を使って display: none; と設定してやれば、印刷時だけそのアイテムが表示されなくなります。
@media print{
.no-print{
display: none; /*印刷時非表示*/
}
}
これで class=”no-print” と指定したアイテムは印刷時のみ消えます。便利ですね。
@media printとは、印刷時だけ適用する設定ということです。他にも例えばmobileと指定すればスマホや携帯電話のときだけ適用する設定を作ることができます。
最後に改ページです。これは page-break-after: always; を使います。
.subBox{
height: 1140px;
margin: 0px 0px 20px 0px;
padding: 0px;
page-break-after: always; /* 改ページさせる */
}
私は詰碁6個を1単位として <div class=”subBox> で囲み、6個ごとに改ページさせることに成功しました。
今日でほぼ目的の機能を実装し終えることができました。明日にでもセブンイレブンにPDFファイルを持っていって印刷できそうです。SGFファイルは中国のものが多いので解説が中国語なのは仕方がないのですが、これでは不便なのでいずれは翻訳することも考えています。囲碁用語を全然知らないので苦しいですが。。
