まわるフリフリのフリ
FLFL
放談ラジオ ― 連載第21回

『まわる放談ラジオHEADLINE』代替案、引き続き悩みチュウ

2012年11月3日

 そんなワケで新しいタイムラインの埋め込みはどういう感じになったのだろうと、公式ウィジェット作成法を紹介しているページに飛んでざっくりと内容を眺めてみると、どことなく残念な感じが漂っています。twitter標準の他者との交流を促す仕様は良いのですが、如何にも「ウィジェットっぽい」ルックスをしていたからです(見た目重要)。僕のこのサイトでは初期からずっと、ウィジェットらしいウィジェットというものを使ってこなかったのだけれど、それはウィジェットをペタペタ貼ってまるで近所のスーパーのチラシ状態になっているサイト等の見た目に残念な感じが大嫌いというのが理由の一つ(見た目重要)。そしてこぢんまりとしたウィジットをちょこんとサイドに置くのにページのレイアウトを2カラム以上にするのが一般的だと思うのですが、僕のサイトは2008年からずっと1カラム、太いの真ん中にドンと1本立てて置く!というスタイルを続けているので今後もそれを継承してゆきたい、これが理由の二つ目(見た目重要)。…なんだけれど、しかしウィジットの横幅が最大520ピクセルまでって一体どういう制限なんでしょうか。

いろいろ見た目を修正してみた…けれど

 まあ、そんな不満がアレコレありつつもやはり代替手段が思いつきません。ひとまずは「自分のプロフィール等設定するページにウィジェットを作成する機能があるからそこで設定してね」と誘導されたので、細かいところは置いて適当に設定してページに埋め込んでみました。しかしやはり何か見た目がサイズといい装飾といいアレな感じ。
 まず何よりも、現状の設定ページで設定可能な事の範囲が少な過ぎます。サイズはもとより表示する件数も指定できなければ、「Tweet」というタイトルさえ変更することが出来ません。とにかく520に制限されているウィジットの横幅を変更したいと思い、タグを調べるのにSafariの開発メニューから「Webインスペクタを表示」を選んで各スタイル要素を確認(FirefoxだとFirebugというアドオンが持ってる機能に同等。便利ですよね)、このサイトの外部CSSファイルで指定してみることにしました。また、このウィジットはインフレーム(iframe)としてページに挿入されるので、通常の外部CSSからは操作できません。なのでjQueryを使ってiframeの親ページから子ページのCSSを変更し、タイトルを変えたり、アバターやアイコンの有無をどうするか悩んだり、枠線の色を変えたり、そんな事を色々試してみた結果がこんな感じです(↓:画像にしてます)。

でもやっぱり不採用で

 基本的に僕は「見た目スッキリ」が好みなので、極力省略出来るパーツは省いてみたのですが、やはり何かアレで残念な感じは雰囲気の中にどことなく残留しています。表示件数を1件のみに出来ればその他は目をつぶってもOKなんだけれど、インフレームゆえの悪しき「ページ内スクロール」がもうダメです。よく遭遇しませんか?記事を上からスクロールして閲覧中、途中に埋め込まれたインフレームでマウスのホイールが「ホイールスピン」してしまい、親ページは止まったままその場でクルクルとインフレーム内がスクロールしている恥ずかしい状況。そして末端まで行き着いた途端、親ページが勢いよくスクロールを始めちゃう例のアレです。普段毛嫌いしているそんな状況(まあ、真ん中に置くのが悪いんですけどネ)を自分のサイトを閲覧してくれている読者に体験させてしまってはなりません。

 仮設置して1週間様子を見てみましたが、その他に印象を悪くしているのがページの再読み込み時に表示される「フォームを再送信してもいいかい?」というアラート。iPadは大丈夫だけど、僕のMacだとSafari起動時に前回開いていたページを読み込んでいる際に表示されてしまいます。特に動作には支障ありませんが手間が増えるうえに「印象が悪い」というのはやはりダメ。プログラマーさんならもっと細部を詰めたカスタマイズも出来るのでしょうけれど、あいにく僕は適当なところで早々に手を打つ程度のショボいCSS知識くらいしかありません。悩んだ揚げ句、上述の件も合わせて今回埋め込んだウィジットは不採用の方向で検討することにしました。で、引き続きこの空きスペースはどうしよう?ということなのです。つづく。