画像の重ね方メイキング ~ HTML5validなOGPとかTwitterCardsとかjQueryUIとかTwitterBootstrapとかgoogle-code-prettifyとか

HTML/CSS/JavaScriptを駆使した画像の重ね方 | DevAchieveで制作した
サンプルページ「Way to cover an image with another image」で
色々普段使わないものを使ったので忘れないようにメモしておく。

HTML5validなOGP設定

後述の Twitter Cards が HTML5invalid だよーというのを聞いて
バリデーションにかけてみたら見事にエラーが出てきた。
xmlns 属性による指定ではなく、 prefix 属性で指定しなさいということらしい。

<html lang="ja" prefix="og: http://ogp.me/ns#">

Twitter Cards

Twitter Cards を指定すれば Web でツイートを開いた時にサイトの情報を表示できるので指定してみた。
Way to cover an image with another imageの指定で言えば以下のような感じ。

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://wada811.github.com/sample/imageCover/index.html">
<meta name="twitter:title" content="Way to cover an image with another image">
<meta name="twitter:description" content="HTML/CSS/JavaScriptを駆使した画像を重ねる方法のまとめ。HTML5(Canvas)/CSS3もあるよ！画像は@kazoo04氏のアイコン素材を使わせて頂きました！ありがとうございます！">
<meta name="twitter:image" content="http://wada811.github.com/sample/imageCover/img/kazoo04-background.png">
<meta name="twitter:site" content="@wada811">
<meta name="twitter:creator" content="@wada811">

しかし、これは HTML5invalid である。name 属性に知らない値が設定されているのでエラーになる。
Twitter Cards meta - HTML5 Validation issue | Twitter Developersのコメントには
name を property に変えれば良いと書かれている。
試しに以下のプレビューツールで確認すると問題なく表示されることがわかる。
Preview your Twitter Card | Twitter Developers
ちなみにキャッシュがあるようで適当な指定でツイートしてしまうと
その後、指定を変えてもしばらくは反映されないので注意。
無用なトラブルを避けるために確認はプレビューツールでしよう。
関連
Twitter Cards | Twitter Developers

jQueryUI でリッチなタブ UI を作る

適当にソースコードを載せたらコレ以上に縦長になってしまうし、jsdo.itみたいな表示がしたかったので
探したらjQuery UIのタブが良さそうだった。
実装も簡単だし、他の UI も便利そうだったから色々使っていきたい。
関連
Tabs | jQuery UI

Twitter Bootstrap

Twitter Bootstrap は前にも使ったことあるけど一応。
Canvas で合成した画像を作成するときのボタン用に。
あとソースコード表示にも使った。
関連
Buttons | Base CSS | Bootstrap

google-code-prettify

Twitter Bootstrap のソースコード表示に使われている google-code-prettify を今回は使った。
Twitter Bootstrap と組み合わさった時の表示がいまいちだったのでスタイルをいじった。

.prettyprint {
    margin: 0 !important; /* Twitter Bootstrap が pre.prettyprint に margin-bottom をつけるため */
    overflow-x: scroll;
}

Canvas で複数枚の画像を描画、合成する

先人のおかげでほとんど苦労せずに描画することができた。
Canvas ってサイズ指定を CSS でできない？気のせいか効かなかったので JavaScript で指定した。
参考
Canvasに画像を複数枚重ねて描画するには » RIAxDNP
sinatra + html5_canvas + jquery 画像ドラッグドロップでファイル保存 - 麺処　まつば

DevAchieve

ページ