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がらみの更新は保留ということでよさそうです。

Yahoo!ストアでテスト注文のキャンセル方法が分からなかった

Yahoo!ストアにもお店を持っています。
商品情報も弄ったし、新しくなってから注文処理をしていない(売り上げがない)ので、
テスト注文をしてみたのですが、取り消し方法が分からなくなってヘルプデスクに問い合わせました。

注文はまずステータスを処理中にしなければならないようで、
そのとおりにするとキャンセルが表示されました。
めでたしめでたし。

価格バリエーションのオプション設定機能を廃止

ネット印刷通販システムですが、
機能として実装はされていたものの使用されていない、
また、今後の機能拡張に支障がある為、価格バリエーションに対してのオプション設定機能を廃止します。
必要な場合は別の商品として新たに追加していただくことになります。

現在は価格を選んでからオプションを指定していましたが、
価格表示画面でオプションを変更し、さらに価格もリアルタイムに確認できるようにする予定です。

これでアクションが1手順減ることになります。

WindowsのInkscapeでメニューのフォントがダサいのを直す

WindowsのInkscapeでメニューのフォントがダサくなっています。
バージョンが0.48になってからでしょうか、結構前からこのままですね。
気にはしてなかったのですが、Inkscapeというワードでそれなりに調べている人がいたようなので、記事に残しておきます。
試したInkscapeのバージョンは0.48.2です。
0.48.3以降には数値を入力できなくなる致命的なバグがあるので使っていません。

これが標準の状態
Inkscapeウィンドウ初期フォント

フォント参照設定ファイルがあるので
「Inkscape\etc\pango\pango.aliases」
を開いて、おそらく4行目にある「sans」に「meiryo,」を追加
再起動するとフォントが変更されています。
sans = "meiryo,arial,browallia new,mingliu,simhei,gulimche,ms gothic,kartika,latha,mangal,raavi"

Inkscapeウィンドウ変更フォント
これで完了。

他の設定方法もあるみたいですが、この方法でダメなら探して試してみてください。
自分の環境では、1つのファイルの変更のみで対応できました。