リキッドレイアウトの練習

[技術メモ] 2009年4月8日(水曜日) 22:25

単純なリキッドレイアウトは画面が狭かった時代の遺物だと思っています。
もちろん、リキッドを全否定する意味ではございません。

アマゾン風リキッドを知る

jQueryで作るAmazon流リキッドレイアウトを読んで、始めて最近のアマゾンのリキッドレイアウトを知りました(ノ∀`) ブラウザの横幅に応じて、表示点数を変える(ずらすのではなく)レイアウト。
なるほど。これはある。あるぞぉーーー
記事はどうやら、jQueryを使うことに主眼があるようで、jQueryを使わない実装には触れられていませんでした。

とりあえず作ってみる

さらっと作れるじゃんね。一応プロだし(ノ∀`)
ん。。。むむ……案外手強いwwww
アマゾンどうのこうのの部分は問題ないのですが、それ以前のリキッドレイアウトが手強いぞーー
というか、リキッドの案件なんてほとんど縁が無かったな俺(・ω・)ダメじゃん

練習じゃぁ!

危機感を感じ、とりあえず練習に。
目指すは、本文部のみがリキッドの3カラムレイアウト。

1つ目。まずは、ネガティブマージン(とやら)でを作る。

  1. IE6でウィンドウ幅を縮めると左サイドが散歩に出かける
  2. ウィンドウリサイズ時等々、挙動がおかしい((((;゚Д゚))))(IE,Opera)

なんじゃこりゃ。・゚・(ノ∀`)・゚・。
IE6がどうのこうの以前にIE7でどうにもならん((((;゚Д゚))))
ふぅおちつけ。良くある事じゃないか。
どうせ、ブロックモデルの解釈がおかしいに違いないさ……

2つ目。リキッド部を無駄タグで入れ子にしてみた

なーんだ、あっさり動いたじゃん……IE6のアレ以外は。
アレ
ちょっとネガティブマージンから離れてみましょうか……

3つ目。左カラムをアブソリュートしてみた

お!IE6でも大丈夫じゃん!
って、フッタを突き抜けてます。当然です。それがアブソリュートです。

4つ目。もっと大胆にアブソリュートしてみた

本文部と、サイド部を別レイヤーにして、サイド部を丸ごとアブソリュート。
フッタを突き抜けないように、JavaScriptで高さをリアルタイムで調整(゚Д゚)食らえっ!
やけくそだったのに、リサイズ時の値取得が上手くいかず放心。
まて、リアルタイムにサイズを変えるなら、リキッド部の横幅を弄ればいいじゃないか……

5つ目。JavaScriptでリキッドさせるタイプ

もうね、素直にリキッド部の幅をJSで弄っちゃいますよ。ええ。
ええ、普通に動きます。柔軟性も結構ありますよ。ええ。
なのになんでしょう。この敗北感は(´-`)
そうだ!jQueryで作るAmazon流リキッドレイアウトを読んで、いやCSSでいいじゃん?と思ったのが発端だったのです。
まぁ、該当箇所こそあっさりCSSで動いてますが、ソレより基本とも言える部分でjQueryを必須にしてしまう訳には参りません。

6つ目。ネガティブマージンのものを基本に、IE6だけJS補正してみた

挙動のおかしなIE6だけをJavaScriptでねじ伏せれば良いのです(゚Д゚)
世に出回ってるサンプルも結構眺めました。
上手く動いている物は、大抵、サイドも可変となるパーセンテイジ指定でして、本文部のみリキッドというタイプは、どれも、IE6のこの挙動に関しては放置しているようでした。
テーブルよりはJSかな(´・ω・`)IE6(正確には7未満)だけに適用もできるし。

と言う訳で、今回の修行はここまで(゚Д゚)今日のところは勘弁したらぁ

コメントは受け付けていません。

ページトップへ

背景伸縮

[技術メモ] 2009年4月7日(火曜日) 23:45

女子美術大学みたいなことできる?と聞かれサンプルを製作。

実は、その昔に挑戦してクロスブラウザの面で失敗したことがあり(ノ∀`)
いやぁ、jQueryは便利ですね(・ω・)表示すべき「幅」の取得も楽にできてしまいました……
スクロールバーの幅とかは考えずに、windth:100% のブロック要素の幅を取るのが吉なのかもしれません。
CSSだけで動くのはIE位でしたが、背景ストレッチくらいは標準機能であっても良さそうなものです。

追記

flash背景のが軽いっぽい(・ω・) flash背景サンプル
ランダム背景やら伸縮の微妙な具合やらも調整の幅が広そうだし、縦幅を固定しようとすると、jQuery+私の技術では厳しかった(ノ∀`)overflow:hiddenも効かず。
なにより、flashのが軽い((((;゚Д゚))))

コメントは受け付けていません。

ページトップへ

メディアの重心

[自分ルール] 2009年3月11日(水曜日) 22:53

メディアがもつ意志の重心

「コンテンツが利用者に支持される事で、スポンサーの利益を上げる」というスタイルにあるメディアのほとんどはおそらく、

  • スポンサー
  • 利用者
  • 制作者
  • 社会

の意図、意志によって構成され、またこれらの重心は、成り立ちや経済によって媒体毎に異なります。

利用者至上主義は簡単ではない

利用者の利便性を追求する行為は、それが的を射ていれば、利用者の増加に直結します。
視聴率、アクセス数、そしてコンバージョン。
スポンサーの利益が優先されて利用者が不利益を被る事もあるでしょうが、NHKの様な広告スポンサーを持たない有料モデルであっても「不満」が消えない現状をみられる様、「利用者の利便性を追求する」行為そのものが、とても難しい事だと言えるでしょう。

何故難しいか

  1. 利用者の望みがバラバラだったり、そもそも望みがなかったりする事
  2. 機械的に大多数の望みを把握する仕組構築の難しさ
  3. 望まれている提案を生み出す難しさ
  4. 望みを叶える事が、利用者の不利益に直結する可能性
  5. 望まれていない啓蒙の難しさ

1、2、3、はマーケティングやマーチャンダイジング的手法を用いるのが王道でしょうが、データを中心にフィルタリングやパーソナライズを自動化できるのはネットの強みでしょうか。

4、は「欲しい物しか見ない」事で成極化的な凝り固まりを起こしてしまう可能性です。視野を極めて狭くするものであったり、大量な時間を浪費させるものであったりします。

5、は4を緩和する為にも望まれる要素ですが、啓蒙自体の難しさはもちろん、広告・実益との境界が曖昧になりがちな問題もあります。特にマスメディアによる啓蒙は弊害も反発も多く、マスメディア自体が嫌われる原因の一つにもなっています。技術的には、やはりネット向きでしょうか。「お勧め」を自動抽出する仕組みに近いとも考えられますし。

ネットメディアの重心

「ネット」が持てはやされ「テレビ」が飽きられてつつある現状の根幹には、メディアの重心が深く関係していそうです。
ネットには、利用者の利便性を追求しやすい性質があり、そここそが「ウケ」ていると。それはもちろんイノベーションでしょう。

検索エンジンは利用者至上主義を通しやすい

検索エンジンの場合、

  • 利用者の望みが、最初にかなり明確に示される
  • 望みを叶える事に提案自体が含まれている
  • コンピュータシステムで処理している

利用者に重心を持って行きやすい本質を持っています。
もちろん、利用者至上主義で運営する必要はありません。
しかし、他メディアではしたくてもできない事が、簡単に行えるメディアなのです。

googleの重心

近頃のgoogleは、無茶のしすぎで悪名さえ轟いています(笑)。
利用者寄りの重心をもつメディアという点では、googleが最右翼と言えるでしょう。利用者(あくまで利用者)としては、googleは案外誠実なんです。
例えば、リスティング広告の在り方。
ヤフー VS グーグル–見られるリスティング広告はどっち?」では、ヤフーの表示形式の方が効果が高いと持ち上げていますが、これ所詮は「騙しリンク」の手法なんですよね……
一方、googleは広告のクリックレートが落ちようとも、不誠実な表現を避け利用者の利便性を優先しています。

google的重心の怖さ

ストビュや、ブック検索等々、これら線上には様々な問題があり、利便性追求が同時に社会を激しく削りたてています。
これが、イノベーションに伴う新旧価値観のつばぜり合いなのか、「社会」の利益と「利用者」の利益に発生している構造的なラグなのか、単なるやり過ぎなのかは正直、よく分かりません。
ただ、そこにある問題が単純な摩擦を超えている感覚はあります。

マスメディアの重心

ネットの無料モデルに“マスメディア”の未来はない」 では、重心がスポンサーに偏ることの弊害が語られていますが、ネットを持ち出すまでもなく、国内マスメディアの多くは既に利用者寄りの重心ではありません。
マスメディアによって特権のように自称されるジャーナリズムが信頼を取り戻すのは、確かに至難の業でしょう。

広告的提案は不信を買いすぎたか

広告優先な提案は「ついつい」な結果を招きがちです。そもそも騙す気満々のものでさえ存在します。

もっと自分にあった商品が他にあったのに、それどころか不要だったのに、ついつい買ってしまった……
クライマックスをCM明けに引っ張るのでついつい見たがイライラしか残らなかった……
褒めてばかりの記事を信じて買ったが、誰でもすぐに感じる不満がレビューされていなかった……

積もり積もったこれら不信が「広告的提案=スパム」と判断する下地を作ってしまったのかもしれません。
逆に、テレビドラマがスパムと認識されていないのは、作品中の提案がまだ不信を買っていない証左とも言えそうです。

ネットメディアの可能性

利用者の要求に対して、「適した提案」を返す事は、素晴らしい事です(怖くもありますが)。
また、その内容に広告が含まれるかどうかも、提案される側にとっては本質ではありません。

優れた提案には誠実さ

望まれた以上の物を提案する行為は、スポンサーの事情を無視できたとしても難しい事です。
データマイニングシステムと同時に、騙す気のない誠実さとその裏付けが不可欠でしょう。
しかし、技術的にそれらを克服できたとしても、少なからず誤解は発生します。
なぜその提案に至ったかの誠実さを伝えるには、おそらく表面的な「理由」だけでは足りません。
多少角が立とうとも実態に近い立場を明示できるメディアが信用を勝ち取ることでしょう。

ネットでは嫌われる事さえ好かれる以上の結果を生める

嫌いな雑誌を買う人は奇特ですが、嫌いなウェブ記事はそれなりに使われます。
無料モデルが一般的だからでしょうか、「嫌い」な対象を嫌いと、間違っている対象に間違っていると言える文化がネットには存在します。「炎上」や「釣り・煽り」もその性質が目だ立たせた現象と言えるでしょう。
この性質の芯には「信用さえ得られるなら嫌われる事を恐れる必要はない」という意義がありそうです。
※もちろん炎上を目指すべきではありません。その多くは誠実さを欠いてしまったが故に起こる不幸な現象です。

嫌われても信用を取るべきか

「信用」は「好き嫌い」に対抗しうる数少ない基準です。
「好かれているが信用されない存在」
「嫌われても信用はされる存在」
の二択を迫られた際、特にネットの場合はそろそろ後者を選択すべきなのかも知れません。

コメントは受け付けていません。

ページトップへ

城と城下町

[自分ルール] 2009年2月8日(日曜日) 22:43

企業は……国際競争力を……な話で近頃感じるのは、「城と城下町は苦楽を分かち合った方が幸せなんじゃないのか」と言う面です。

城下町が消えて空しい

SF的な意味で極度に成熟した社会に於いては、資産を「金」化するのが自然かつ合理的なのかもしれません。しかし同時に、現代の「金」が、果たしてそこまで認められるに値する価値を得ているとも思えず。
「成熟」しきっていない、歴史的な意味で普通の社会では、資産を様々な形に分散するのが自然でしょう。そして、その資産の一つの在り方として「価値を生み城を守る仕組み」即ち「城下町」自体が在るんじゃないのかなぁと感じるのです。
私は既に小城でさえありませんが、城下町が消し飛ぶ様は見るに忍びません。

その摂理は合理的か

海底火山の噴出口が変わり、消える噴出口周辺の生態系が変わらざるを得ないのは摂理です。また、荷物を抱えすぎては目的地に到達も出来ません。
しかし果たして、それは本当に閉ざさざるを得ない噴出口なのか。果たして駆け足でたどり着く事にどれだけの意味があるのか。
逆に、分かち合うに値する城下町なのか。そこに通じるものがどれだけあるのかと言う視点もあるでしょう。

もったいない

まとまりを欠きますが、昨今の判断は短期的な損得で決せられ過ぎている様に感じます。そして、その代償とされているものが真に「もったいない」ものである可能性も強く。
子供の時には、使い捨ての「ビンやカン」を非常にもったいなく感じました。当時の合理性よりも、当時の子供の感覚の方が正しかったと判断される時代になり10年以上。
ひょっとすると、今、価値の高いものが各地で切り捨てられているのかもしれません。

城下町としての価値を

城下町の価値は短期的な「収支」に留まらず、それが城下町足るか足るべきかを含めて、もう少し多くの角度から精査されてしかるべきかなと感じます。

ええ、酔っぱらいです。

コメントは受け付けていません。

Safari3とFirefox3で文字間が違う

「Macのフォントは文字間が広い」という認識で居たのですが、近頃のMacのFirefoxはそうでもないのですね。
というか、Firefox3とSafari3で同じプロポーショナルフォントを指定しても文字間が違ったのでびっくり。
根拠の薄い直感では、Firefoxが文字間をWindows的に縮めている感覚。

普段は余裕を持たせてコーディング

大抵のデザインでは、テキスト文字(なんたる表現^^;)のドット的長さに余裕を持たせており、文字量が多少前後してもレイアウトに大きな影響を与えない事が前提とされています。そしてHTML化も、そのポリシーに従う日常です。

調整が必要なケースも

Mac Safari3だけデフォルトでの文章改行位置が酷く格好悪くなってしまうケース。そこだけ画像で処理する訳にもいかず。
今回遭遇したそんなケースでは、素直に文字間を弄りました(ノ∀`)
MacのSafariだけletter-spacing:-1px;
ドット的には -2px くらいがちょうど良さげでしたが、将来Mac Webkitの挙動が変わった際に文字が重なってしまう可能性を考えると、最小限の調整で済ませたく感じ1pxに。

コメントは受け付けていません。

互換モードじゃありませんか

DOCTYPE宣言によってはIEの挙動がバグだらけになります。
いわゆる「互換モードと標準モード」における、互換モードの問題です。
そうならない様に「標準モード」になるDOCTYPE宣言を使用するのがセオリーなのですが、今日行ったコーディングではレギュレーションで互換モードが指定されており、久々に汗をかく事に。

ズームでずれる

IEの互換モードではblockのmarginがマトモに解釈されません。一見上手くいっていても、ズームしてみるとずれたり(zoom:1;でも無理)。
私の場合、これはpaddingを主に書き換え必要ならばblockを入れ子にして対応します。
まぁ、ここまでは、HTMLコーディングではよくある事です(ノ∀`)

印刷でずれる

position を使用していると、何故か印刷でずれまくります(ノ∀`) もちろんIE互換モード。
小一時間悩みました。どうやら、印刷の場合はpaddingがマトモに解釈されないようです。

つまり

IE互換モードの(特にpositionを使う)場合、

  • ブラウザ上では特にズーム時にmarginの解釈がおかしい
  • 印刷上では特にpaddingの解釈がおかしい

状態になってしまいます。

今回は、IEのみに印刷用CSSを当てる事で対応しました。

コメントは受け付けていません。

ページトップへ

大分、子供らしく

[日常] 2009年1月22日(木曜日) 0:12

もうすぐ、1歳9ヶ月。
意思の疎通もかなり図れるようになり「赤ちゃん」から「子供」に進化しつつあります。
そんな近頃のメモを羅列してみます。

  1. 前奏を口ずさむと、続きを歌う
  2. 鼻歌を取ると怒る
  3. オムツを替えるのを非常に嫌がる
  4. ダブルバインドが効かない
    嫌がるオムツ替えに際し、パンツ型とテープ型どっちがいい?
    嫌がるお風呂に際し、どのおもちゃを持って行く?
    等で、どちらの選択肢も否定し、嫌だと言う(ノ∀`)
  5. つまみ食いだと良く食べる
  6. 飲み込むミカンと吐き出すミカンがある
    おなかいっぱいなのに食べたがり、飲み込まないケースも
  7. 単語扱いの長文がある
    例:お風呂ちゃっぷんワイワイちゃぷん(湯船に入るの意。唄の歌詞に由来)
  8. 私より気が利く
    お皿の片付けやちょっとした手伝いのタイミングが私よりかなり早い……というか俺がダメ(ノ∀`)
  9. 描いたものの名前を言う(もちろん只の曲線やグルグル)
  10. キイロやキリン等「キ」の音が「チ」になってきた
    2ヶ月くらい前までは明らかに「キ」だったのですが
    他にもなまじ喋れる様になってきたからか?語尾がコテコテの幼児発音になる事も
  11. 未だ、おっぱい最強

コメントは受け付けていません。

ページトップへ

久々の凧揚げ

[日常] 2009年1月12日(月曜日) 23:35

昨日、初詣の帰りに近所の公園で凧揚げをしているのを見ました。
これは息子にもやらせてあげたい(*´ω`*)

翌日、凧を買いに近所のモールへ。
……売り切れてる(ノ∀`)
近頃では凧を揚げられる場所も多くありませんし、時期も確かに遅めですが、まさか、凧が入手出来ないとは……

やむを得ず、凧糸とタケヒゴを買い、グニャグニャ凧を制作。グニャグニャ凧最高(*´ω`*)超簡単。
豪快に天高く……とは行きませんでしたが、少しは飛びました!

しかし、肝心の息子は凧にはほとんど興味を示さず(ノ∀`)久々の工作、楽しかったよー

コメントは受け付けていません。

ページトップへ