スマートフォンの解約について

現在ワイモバイル(旧イーモバイル)のスマートフォンを所持しておりますが、2015年3月をもって更新は行わず解約を予定しております。

東北大震災時には、マイナーであるがために繋がる回線として根強い人気があり、阪神淡路大震災では関西にいたこともあり、保険のためにと所持しておりました。
しかしながら現在は、ソフトバンク回線と乗合になり接続率が非常に悪くなりました。

これまで問題なく接続できていた地域でも、アンテナが無くなったのか強制的にソフトバンク回線になり、電波は掴むけど繋がらないという状況でほとんど役に立ちません。
電話ネット共にこの状況です。

また、現在は居宅内に印刷機器などを設置しほぼ外出をする必要がなくなりました。
寝巻のまま印刷業務をこなす日々となっております。
このため、無駄な支出を抑えるべくスマートフォンを解約し、auの携帯1回線に戻ります。
変更については請求書やメールの署名に記載を行い伝達は行っておりますので、アドレス帳の更新をお願いいたします。

きりっ子 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」で逃げたりしても、後で文章の長さがかわってまた同じ悩みにはまるのはいい加減もううんざりだ。
うん、やはりデザインの問題なのだろうけど、どうしようもない。