レンタルビデオで行こう！アニメ編

新作アニメ配信情報ブログパーツの話も忘れないうち書いておきます。
今回はブログパーツに関する詳細な説明や使い方ページも作ったので
ブログパーツ自身に興味があったらそちらを見てください。
実はブログパーツの説明ページはここ1ヶ月ほど頻繁に更新してたり。
(ブログパーツもずっと改良・更新してました)


説明ページは別に作ったのでここには苦労話！？でも書こうかなと。
いつものように無駄に長いので興味がない人は読み飛ばしてください。

最初のバージョンのリリースが前回の更新日の半月後だったので
当初はそんなに時間をかけなくてもできるという目算だったはず。
前に作った人気ランキングのやり方を踏襲すればいいだけなので。
実際にそんなに苦労してないから半月後にリリースしてるわけで。
(最初の頃は他のことも平行してやってたし)

ところが2つの要因によって当初の目算が大幅に狂ってしまうはめに。
1つ目は今回からFC2以外のブログサービスにも広く対応するために
カッチリとしたデザイン(フルデザインモード)を導入したこと。
※上に貼ってあるのがフルデザインモード
2つ目はFC2の共有プラグインの申請に(なぜか)落ちてしまったこと。
結果として他のブログサービスへの対応が不可欠になってしまった。

人気ランキングのブログパーツはタグ構造がFC2ブログ用になってて
他のブログサービスに持っていくと期待通りの表示にならないのです。
サイドバーにリストとして並ぶタグはサービス毎にまちまちなので。
なのでタグ構造に依存しないフルデザインモードを用意したわけです。
用意したというのは簡単だけど完成までには遠い道のりだったよ……


まずリスト要素に表示スタイルを自己設定するのは今回が初めてで、
そのへんに絡んで幾多のハマり要素が有ったのでした。

要素自身にスタイルを設定すると美しくない(サイズも肥大する)からと
スタイルシートに追記していったら優先度の関係で反映されなかったり。
だから要素にスタイル設定→スタイルシート追記→要素にスタイル設定と
作業内容が無駄になるような試行錯誤をやってたわけです。
ちなみに現在は!importantを付けたスタイルシート追記になってます。

正規の方法でスタイルシートに追記するとセキュリティエラーが出たり。
テンプレートなどが読み込んでるスタイルシートは別のドメインなので
そこにブログパーツのスタイルを追記するとエラーしてしまうのです。
最初のスタイルシート→最後のスタイルシートに書き換えてみたりして
最終的にstyleタグを(なければ)作成してそれを探して追記してます。
※html内のstyleタグなら追記の問題は発生しない

スタイルシートに追記するaddRule(IE用)に{}つけてスタイルを書くと
IE8以降の標準モードでスタイルの中身が空になるのにもハマった。
これネットにあるサンプルだと{}がついてるのが結構有ったりする。
最初に見たのがそれで真似して書いてあったからハマってしまった。
ちなみにIE8/9でもIE7以前の互換モードだと{}つきで動いちゃうのです。
IE8(標準)はダメでなぜかIE9(標準)では正常に動いてるので調べたら
IE9にはなんとinsertRuleが追加されててそちらで動いてたりとか。
※insertRuleはIE以外のスタイル追記メソッド

今回は従来型のデザイン(シームレスモード)でもボタンなどがあって
一部のスタイルを設定してるので同様の問題にハマったわけでした。
ボタンで番組を切り替えれば便利！と安易に考えた自分を呪いたいよ。
いや、実際ただランダムに表示してるよりもこの方が便利なわけです。
実は人気ランキングでも切り替えをつけるアイデアは有ったのです。
面倒だったからそのうちとか思ったまま放置プレイになってるけど。

ちなみに多くのブログパーツは自身の中にstyleタグを作成して
そこに文字でスタイルを書いていく方法が多かったりするみたい。
bodyの中にstyleタグを入れるのは文法的には間違いなんだけど
とりあえず動くから良いんじゃね？ってことで使われてるみたい。
IEとそれ以外の違いを考えなくていいし古いブラウザでも動くしね。
この方法ならOpera 8でも動くんじゃないかな。
(今さらOpera 8も無いかと思って対応しないで放置してます)


次にハマったのはフルデザインの角丸と枠の影です。
これは比較的新しいブラウザには実装されてるスタイル表現なのです。
しかしIEはついこの前出たIE9以外には実装されてません……
この手の問題が起きるたびに多くのWeb制作者はまたIEか！と言ったとか。

デザイン志向のフルデザインモードでIEだけ見た目が違うのはアレなので
これだけはIEでもそれっぽく表示しないとダメだと考えて対処したのです。
これ何も考えずにイメージで作ってればきっとずっと楽だっただろうね。
あ、でも下地の色があるからイメージでやるのも結構難しいかも……

IE(8以前)では角の丸い枠も枠の影もスタイルとしては表現できないけど
図形要素(VML)としてそれっぽい見た目にすることは可能なのです。
JavaScriptでスタイルを再現するライブラリもいくつか有るのです。
なのでその中でFirefoxに見た感じが近かったie-css3.htcを使ってみる。
一部の問題があるものの何とかなりそうだなと思ったら問題が発生。
当初はスタイルを要素に記述してたのでhtc方式では使えなかったし。
スタイルシートに追記してもセキュリティの関係で動かなかった……

自分のサイトなら良くてもブログパーツではそのままでは使えないなと
仕方なくie-css3.htcのソースを改造してパーツ側から適用できるように。
で一応は動いたんだけどテンプレートによって不具合が出るのであった。
※これは元のソースの仕様がそうなってる
どうせソースを変えてるんだしとついでに不具合も修正しちゃったよ。
書き換えたie-css3もちゃんと公開しといたほうがいいのかな？
(パーツの貼り付けソースにあるURLを直に叩けば中身は見れますが)

ちなみに新統一デザインの角丸はie-css3.htcではなくてはイメージです。
JavaScriptを無効にされたら角が丸くならないのはどうかと思ったので。
(ブログパーツはJavaScriptを無効にしたら動かないから問題ない)
角が丸くないと見た目が微妙なところ以外そもそもイメージ化してないし。
つまりIE(8以前)で見ると角が丸くないところが結構あったりします。


3つ目は各ブログサービスに対応する作業でのスタイル複製でした。
それぞれのブログサービス毎にサイド用のタグ構造が違うのです。
それぞれに合わせたタグを生成するのが一番いいのだろうけど、
それをやると一部のブラウザ(IE6や7)でやばいぐらい遅くなるので。
(文字列を繋いだりする処理が多いほど恐ろしく遅くなるみたい)
スタイル情報をコピーしてそれっぽく見せるという手法で実装してみた。
既存のタグのスタイル情報をコピーして見た目だけ同じにしたのです。
と説明するのは簡単だけどそれを実現するのは結構大変だったですよ。

まず最初にやったのはスタイルシートの値を読み取るという手法。
しかしこの方法もまたしてもセキュリティの壁に阻まれてしまう。
(テンプレートのドメインとパーツのドメインが違うので読めない)

仕方ないので要素に適用されてるスタイル情報を全て取得して、
親要素のスタイル情報と比較して違う内容をコピーするという
力技としか言いようがない無茶なアプローチで実装をしてみたり。
しかしこの方法だとブラウザによって変な情報が入って使えなかった。
なので要素のスタイルで必要そうな分を全部コピーすることにしてみた。
穴のあるやり方だけどこれが一番問題なく動いたのが悲しいことに現実。
何でもかんでもクソ真面目にやるのがいいとは限らない例というか……


それ以外にも細かいデザインの調整をする作業だとか
いくつものブログサービスに(確認用で)入会して設定する作業だとか
テンプレートを切り替えながら表示が崩れないか確認する作業だとか
使い方やらパーツの貼り方やらを丁寧に書き記していく作業だとか
一つ一つは大した時間ではなくても塵も積もって結構時間がかかってる。
たかがブログパーツ如きにこんなに時間がかかったのはそんな理由です。
次は今回の経験を生かしてもっと時間が掛からないようにしたいなと。