きりっ子 MC-01導入

名刺などのカード用裁断機、きりっ子の現行機を導入しました。
といっても中古ですが。

これまで使用していた前モデルSK-21Mはいろいろとガタが来ており、ヒヤヒヤしながら裁断していました。
中古とはいえ現行機のため、かなり気持ちが楽になりました。

SK-21Mでは排出ローラーの位置が微妙で、スリッタを外して使おうにも使えませんでしたが、
MC-01はスリッタから直接排出のためローラーがないのでかなり使い勝手がよさそうです。
セット検出スイッチを殺しておけば、横のみの裁断機として使えますね。

結局はテーブルに戻る?

HTML5のタグのお話です。
ちょっと前にも書きましたが、「表ではない」ものにtableを使わないように調整しているわけです。
しかし「表ではない」ものが何かという定義もあいまいなままですね。
表(table)の1行(row)を抜き出して、同じ構図のまま表示する場合は表とする。
表(table)の1行(row)を抜き出して、構造を変えて表示する場合はすでに表ではないとします。
つまり、横に長いrowを詳細表示するために縦方向に書きなおす場合は、表としての構造を成さなくなりtableは使えなくなります。
rowは結果的にcolumn(cell)の箇条書きになるので、ulタグ一択になると考えます。
ただし、九九表のように縦も横も同じ内容の場合は表だと仮定できます。
とまぁ、ややこしいのでタイミングによっては微妙に解釈を変えるかもしれませんが。

試行錯誤したのですが、結局はdisplayプロパティのtable、table-row、table-cellに回帰せざるを得ませんでした。


ul.table {
display: table;
}
ul.table li {
display: table-row;
}
ul.table li>* {
display: table-cell;
}

表ではないのにrowspan、colspanを必要なら、構造を再検討するということにしています。
これで落ち着くのかな?

HTMLにおけるテーブルレイアウトの苦悶

HTMLにおいて、テーブルレイアウトは使用すべきではない。
はいそうですかと、表ではないコンテンツをtableからulに変更するものの、
スタイルシートでは結局display:tableを使用することになる。
float:leftdisplay:inline-blockを駆使しても、
縦方向のデザインに問題が生じる。
tableタグへいかに似せるかに労力を割くこの現状は果たして是か非か。

TCPDFで縦書きテキストをフォント埋め込みに対応させる

TCPDFで縦書きを実現するには、フォント設定ファイルの書き換えで実現するのが一般的です。
※ IPA明朝の場合

$type = 'cidfont0';
$dw = 1000;
$enc = 'UniJIS-UFT16-V';
$diff='';
//$file='ipam.z';
//$ctg='ipam.ctg.z';
$cidinfo=array('Registry'=>'Adobe', 'Ordering'=>'Japan1','Supplement'=>5);
include(dirname(__FILE__).'/uni2cid_aj16.php');

この方法ではAdobe ReaderまたはAdobe Acrobatでは、PostScriptで印刷ができません。
「文章を印刷できません。」
「印刷するページが選択されていません。」
と表示されて出力できません。
画像として印刷することはできますが、今一つな感じです。
Illustratorに読み込ませればアウトライン化されるので印刷に使用できるようになりますが、
ページが複数ある場合は現実的ではありません。

ちなみに、「Foxit」ではPostScriptのままで出力できるので、こちらを使用するのも手です。

要は、TCPDFで縦書きテキストを生成する際に指定するCIDフォントは非埋め込みであり、
これがPostScriptで印刷する場合に問題となるというわけです。
では、埋め込んで縦書きを実現してみる方法を探してみましょう。

まず、TCPDFの標準エンコードは「Identity-H」です。
この形式でないとフォントを埋め込めないというか、フォント埋め込み用の独自エンコードかもしれません。
PostScriptを弄っている人なら、末尾の「-H」が気になりますね。
これを変更するには、本体の「tcpdf.php」ファイルを書き換える必要があります。
メソッド「AddFont」に

} elseif ($type == 'TrueTypeUnicode') {
$enc = 'Identity-H';

というコードがあるので、「’Identity-V’」に書き換えてみましょう。
すると、なんということでしょう。
テキストが縦書きになりました。
もちろん、フォント設定ファイルは何も弄りません。
ただし、フォントは埋め込みの状態にしておきます。
非埋め込みでは化けます。

しかしよく見ると括弧やハイフンなどが横書き用のままです。
CIDフォントでは「uni2cid_aj16.php」をincludeすることでマッピングを変更しているのですが、
Identityでマッピングをしているところがまだよくわかりません。
おそらく、これを調整でいれば完全な縦書きを実現できるはずです。

もし参考頂き、対応方法を見つけられましたらご一報いただければ幸いです。
また、余裕があれば調査します。

AmazonアソシエイトリンクがHTML5のValidationに引っかかる

ポケットリファレンスの「HTML5&CSS3ポケットリファレンス」を例にします。

「テキストとイメージ」では次のタグになります。
<iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=penlabo-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4774164984" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>

「テキストのみ」では次のタグになります。
<a href="http://www.amazon.co.jp/gp/product/4774164984/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4774164984&linkCode=as2&tag=penlabo-22">HTML5&CSS3ポケットリファレンス</a><img src="http://ir-jp.amazon-adsystem.com/e/ir?t=penlabo-22&l=as2&o=9&a=4774164984" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

「画像のみ」では次のタグになります。
<a href="http://www.amazon.co.jp/gp/product/4774164984/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=4774164984&linkCode=as2&tag=penlabo-22"><img border="0" src="http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4774164984&Format=_SL110_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=penlabo-22" ></a><img src="http://ir-jp.amazon-adsystem.com/e/ir?t=penlabo-22&l=as2&o=9&a=4774164984" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

ざっと見ただけでも気になるところがありますね。
「&」がそのままになっていることと、タグがXHTMLの終了タグになっていることです。

W3CのValidationに掛けてみましょう。

& did not start a character reference. (& probably should have been escaped as &amp;.)

The scrolling attribute on the iframe element is obsolete. Use CSS instead.

The marginwidth attribute on the iframe element is obsolete. Use CSS instead.

The marginheight attribute on the iframe element is obsolete. Use CSS instead.

The frameborder attribute on the iframe element is obsolete. Use CSS instead.

The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.

要は「&」は「&amp;」と書きましょう、iframeの要素はCSSを使いましょう、imgタグのborderはCSSを使いましょう、ということです。

これらのエラーを修正するスクリプトをやっつけで書きました。
商品によって生成されるコードが違うようなので、対応しきれないものもあるかもしれませんが、とりあえず動いているので公開します。

AmazonアソシエイトリンクHTML5クリーンアップ

本来はコードを完全に書き換えたほうがいいのですが、それはまた別の機会に。

簡単にGoogleマップを表示する

久しぶりにお助けツールのサイトを更新しました。
住所の入力でGoogleマップを表示できるタグを生成します。
Googleマップ表示
他に、サイトのHTML5化を行いました。

Googleマップに限らず、地図を弄るのはいろいろと面白そうなのですが、
地図を見ても道に迷う方向音痴には向かないのかもしれません。

使い方は簡単です。
次のような画像タグを用意するだけです。
<img src="http://maps.google.co.jp/maps?q=住所">

パラメータ

次のようなパラメータが用意されています。

住所

住所を設定します。
例:q=横浜市緑区中山町323-12

ズーム(縮尺)

地図のズーム(縮尺)を設定します。
例:z=16
0~23で設定します。数値が大きいほど拡大します。

表示モード

地図の表示モードを設定します。
例:t=m

  • m:地図
  • k:航空写真
  • h:地図+航空写真
  • p:地形図

この方法は変更される可能性もありますので、ご利用の際にはご注意ください。

スタイルシートのfloatが使いこなせない

回り込みを指定するfloatですが、いまいち使いこなせない。
「float:left」がいいのか、「display:inline」または「display:inline-block」なのか判断しかねる場面が多い。
何故回り込みをさせるのか意味を考えればどれかは特定できるのだけれど、実際のレンダリングを考えるそうもいかないこともある。
これはおそらくデザインの問題なのかもしれないけれど。

ブロックの中で「float」させておいて、次のブロックがくいこまないようにするためには「overflow:hidden」をかませるのだけれど、「float」させたブロックの中で折り畳みメニュー的なものを入れたい場合、ブロックの領域をはみ出るものは隠れてしまう。
これが大問題。

結局は大きさ固定するために「min-height」で逃げたりしても、後で文章の長さがかわってまた同じ悩みにはまるのはいい加減もううんざりだ。
うん、やはりデザインの問題なのだろうけど、どうしようもない。

ハリナックスプレス入手

針が要らないホッチキス、ハリナックスの後継版です。
前のはごっつい穴が開くのと、あまりしっかり留まらないらしいということで見送っていました。

今回は紙を噛みこませて固定するということで期待大。
ネットでは発売直後のためか在庫がないということで、東急ハンズに行ってみました。
店に行くと在庫はあるもののお試しが出来ない。
前はあった、前作ハリナックスのお試しコーナーも消えている。

店員を捕まえて聞いたら、ストックから見本を出してきました。
一緒に包装紙を持ってきたので、試しにやってみると全然ダメ。
「これコピー用紙用なんですけど、ありますか?」
怪訝な顔をされつつ、プリンターのトレイから持ってきてくれました。
するとどうでしょう、今度はばっちりくっつきました。

見本を隠していたのはおそらくこれが原因でしょう、
「これコピー用紙用なので、硬い包装紙ではダメだと思います」
と、知恵を入れておきましたが、またストックに戻していました。
あまり売る気はないようです…

だけど、こいつはかなり使えます。
バリバリ稼働してくれています。
ということで、騙されたつもりで手に入れてみてはどうでしょう。
コピー用紙限定で、3枚が限界です。5枚までいけるって書いてますが。

Yahoo!!プレミアム解除

先月は、アニメの資料集とレーザープリンタをヤフオクで売りとばしました。
これで手放す予定のものがなくなったので、一旦プレミアムを解除することにしました。

解除までに何度も引き止め工作が行われますが、どのコンテンツにも興味がないので華麗にスルー。
やっと解除が完了しました。

プリンタと言えば、レンタル料金のみで印刷し放題のサービスが増えてきましたね。



FileZillaを3.9.0.6にアップデートすると使い物にならなくなる

FTPクライアントソフトFileZillaが3.9.0.6にアップデートしました。
起動時に通知されるので更新したのですが、その直後からFTPサーバから蹴られるようになってしまいました。
どうもSSL3.0がらみの更新が原因のようですが、対応方法がよくわかりません。

仕方がないので、3.9.0.5に戻して元に戻りましたが、本当にこれでいいのかよくわかりません。
いずれにしても、SFTPを利用していないので、SSLがらみの更新は保留ということでよさそうです。