2008年11月アーカイブ

シンクロ

| コメント(0) | トラックバック(0)
職場では、別にスーツではなくそれなりの格好をすればいい感じのおれ。
特に営業ではないし、・・・という意味で。

お世話になっていて、仲良くしてもらっている先輩がいるんだけど、
今日、その人と服装がかぶってしまった。

黒系のタートルネックに、茶色のジャケット。
そこそこ黒系のズボンに、こげ茶色の靴。

まさにシンクロ。

この二人が今日社内を練り歩くと、おそらく漫才師みたいに見えるだろう。
この二人が今日車で移動すると、ペアカップルのようにみえるだろう。

きも。
書籍『現場のプロから学ぶXHTML+CSS』を会社で買っていた。後輩ちゃんが真剣に読んでいたのをちょっと拝借して、ざっと見てみた。
基本的な部分から、テクニカルなことまで。

すごい内容。というか執筆陣がすばらしい。個人的には、ハック系やマルチデバイス系、javascript系の話が興味深い。まだざっと見ただけなので、後輩ちゃんが読み終わったら、もう少しじっくり読みたい。
(というか買ったほうがいいかも・・・)

この本はかなーりおすすめ。CSSをこれから勉強したい方も、CSSをもう少しレベルアップさせたい方にも。


CSS3のサイト

| コメント(0) | トラックバック(0)
海外だけど、CSS3の情報がのったサイト。
http://www.css3.info/

名前そのまんま。

このサイトから情報を収集して自分のサイトに情報を載せていこうと思います。

新たにCSS3というカテゴリを作ってそこにCSS3情報をまとめて記載していこうと思います。
MT4を使って、各エントリーに対して関連記事を記載することが多くなってきている。毎回関連記事を書きこむという手法をとっていたけど、ちょっと面倒になってきたので、「関連記事って結局同じカテゴリじゃねーかい?」って考えのもと、記事に対する同じカテゴリに入るものを表示することにした。
これをテンプレートで実現しようとおもって、いろいろやってみた。

んで、テンプレートとして作ってみたので、もし必要なひとがいたらどうぞコピペしてください。
<MTSetVarBlock name="nowcat"><$MTEntryCategory$></MTSetVarBlock>
<MTSetVarBlock name="nowID"><$MTEntryID$></MTSetVarBlock>
<div class="rel_entry">
<h3>関連記事</h3>
<ul>
<MTEntriesWithSubCategories category="$nowcat" lastn="5">
<MTSetVarBlock name="chkID"><$MTEntryID$></MTSetVarBlock>
<MTUnless name="chkID" eq="$nowID">
<li><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></li>
</MTUnless>
</MTEntriesWithSubCategories>
</ul>
</div>
このテンプレートでは、自分のエントリーは表示しないようにしています。
単純に、自分のカテゴリーとIDを把握しておいて(1,2行目)、そのカテゴリーに属するエントリーを列挙し、その列挙したものの中で自分と同じIDを持つものは対象から外す。
このやり方で表示が可能になります。

ということで。
ちょっとアクセス解析をおこなっていると、
ん?という感じのキーワードでやたらとうちのホームページに来ているみたい。

なので、その街頭ページに関連する他の記事へのリンクを設けて、
ページ遷移を促してみようかな~。

面白い結果がでるといいんだけどね。。。
ボックスのあしらいが、角丸の四角の場合でしかも中身が可変でのびる場合、角丸の上部と下部をどうCSSで表現するかということになる。

やり方としては、
1.テキストを表示するエリアの上下に空タグを設けて、その空タグの背景にそれぞれ指定する。
2.入れ子構造(ネスト)をしてその背景の上下にそれぞれ指定する

の2種類の方法がある。


さーて、これはどっちがいいか。

となる。

ので、AさんとMさんにヒアリングをしてみた。

その結果
2.の手法がいいということに。

やはり空タグを多く設けるよりも入れ子構造のほうが妥当ということだ。ただし、divタグでやたら入れ子にするのではなく、できるだけ無駄な入れ子はなしにしましょうということだった。

ということで、みなさーん、そのように。
wowowのサイトです。
12個のカメラでとったものをユーザがスイッチングして編集できるというコンテンツ。
出来上がったものをアップロードできます。

スイッチングっておもしろいが、
曲のことを知らないとタイミングがよくわからん・・・。

でもおもしろい。

編集好きにはたまりませんな。
ちょっと今会社でコーディングについていろいろやっているので、その中で思ったコーディングのスピードを上げる方法を個人的見解のもと書いてみる。
参考になれば・・・ということで。

1.まず紙の上で全体像をみて、ワイヤーフレームをつくる
個人的にだが、モニター上で色々を判断するのが苦手。デザイナーが上げてきたデザインデータ(PSDなど)を一度プリントアウトしてワイヤーフレームを作る。直接線が引けるので、個人的にいいと思ってる。

2.ワイヤーフレームは外から攻める。
ワイヤーフレームを作る際に、細かい部分はさておき、大枠から狭めていく手法がいい。
この段階も紙の上

3.とにかくXHMTLのマークアップを正確に行う(自分なりに)
途中でCSSにいくことなく、とにかくXHTMLを完成させる。まずはきれいなXHTML文書を作り出す

4.XHTMLが出来上がったら、枠のCSSコーディングを行っていく。
細かい部分はあとで。divタグのレイアウトをCSSコーディングで・・といってもいいくらいのコーディングを行って、レイアウトを作り上げる。

5.CSSコーディングはとにかくXHMTLの上からせめていく。
枠が出来上がったら、できるところからやるのではなく、XHTML文書の上からどんどんコーディングしていく。ちょくちょく確認をしながらやるのは面倒だが、地道にそれが必要と思われ・・・。

6.確認は、firefoxのみでまず行う。
ひとまずfirefoxで完璧に表示できる形を作り出す。firebugなどのプラグインを使いながら・・・。

7.他のブラウザへの対応を行う。
firebugを使い、どの要素がおかしいかをみて、それぞれのハックをかけていく。


以上こんな感じが早いかな~と思っている。
俺が特に重要かなと思うのが、1,2,3。
個人的見解からいうと、XHTMLがそれなりにできていれば、ブラウザごとのエラーの修正(ハック)も比較的楽な感じがしている。
以前別のブログで、「マークアップエンジニアは大工みたいなもん」的なエントリーをみたことがあるが、結局そうなんだと思う。XHTMLマークアップがきちんとしていると、そのCSSもスムーズにいく。土台がそれなりにきちんとしていると、装飾は意外とすんなり・・・ってことだろう。

ということで、おれは意外とCSSコーディングよりもXHTMLのマークアップのほうを重要視してるのです。
にゃは。
今更ながら、CSSでTabelをコーディングするときに、おれの中で結構重要かなと思われるプロパティを。

border-collapse

このプロパティをcollapseに指定すると、要素の間の線を重ねちゃうよってことになるし
このプロパティをseparateに指定すると、要素の間の線を話して書いちゃうよってことになる。

CSSコーディングのときにこれを知らなかったら、「うわ、テーブルめんどくさ」ってことに拍車がかかる。
というかかかってたおれ。

日々勉強ですな。
ということでメモ。


昨日Wiiで初めてインターネットをしてみて思ったことをつらつらと書きとめてみる。
もちろんこれは私見だから、これ読んで何か思うことがあれば、どしどしコメントいただけると面白いかなと思う。

まず思ったのは、
これからのWebは2極化するんじゃないだろうか?
ということ。
リッチとそうでないものという意味ではなく、personalとimpersonalという意味。

WebはこれまでPC、つまりパーソナルコンピュータで見るものだった。PCはあくまで個人で扱うもの。まぁ2,3人でちらっとみることはあるかもしれないが・・・。この世界から新しいWiiのような個人ではなく集団(グループ)でみるWebの世界が広がっていくのではないだろうか?

Wiiはいわば、impersonal computer(個人的でないコンピュータ)だ。
茶の間にあるから一人でみるもんじゃない。(一人暮らしはこの際別と考えてくださいね)
みんなで見るもの。Wiiしか今そういう類のものがないが、impersonal computerが広がっていくといわゆる「ネオ茶の間」が普及する。そうなると、現在のようなWebサイトでは不都合が起きそうじゃない?と思うのだ。

ユーザビリティもあくまで個人が・・という視点をどうしても持ってしまう。ユーザビリティのことを考えるとき、「お年寄りでも・・・」とか考えるのがWeb標準準拠の姿勢だが、それはあくまで個人としての「お年寄りでも・・・」だ。

今後仮説として、impersonal computerが普及したとしたら・・・
ユーザビリティの考え方も広がる。(※変わりはしない)。「お年寄りと子供が・・・」というような考え方も生まれてくるのではないか?(※・・・に変わるのではない)

個人的には、impersonal computerの方向性。「○○と」という文化・・・「with」なWebサイト、Webコンテンツに興味がある。さみしがり屋なのかもしれないが、和気あいあいとものを見る世界・・それがよさげ。

プロモーションなどの仕方として、Wiiなどの世界のほうが適しているものもあるのでは?と思う。
パーソナル(personal)ではなく、インパーソナル(impersonal)が適したPRが。

ちょっとそのあたり調べてみようかな。と思うわけで・・・。


Re:Creator's Kansaiのサイトに記事がのっていたので、メモとしてメモ。

http://www.re-creators.jp/blog/2008/10/29_147.html


インターフェースの考え方についてはもろもろ考えるところもある。でもなかなか答えがでてこないというか、どうどうめぐりというか。あっちをたたせれば、こっちがたたず的な感じもしている。

そのモヤモヤした感じが俺の場合少し改善した感じを受けた。

以下引用。

  1. 1.一貫性を維持する。
  2. 2.アクティブユーザがショートカットを使えるようにする。
  3. 3.意味あるフィードバックを用意する。
  4. 4.システム間のつなぎ目が分かるようにデザインする。システムはあるタスクの固まりが複数連結して構成されているものだ。ユーザはその固まりを1つ処理できたと分かることによって、満足や安心を得られるものだ。
  5. 5.簡単にエラーを処理できる。
  6. 6.やり直しをできるようにする。
  7. 7.システム内部の動きが把握できるようにする。特にそのシステムに慣れた人はそのもの自体に責任を持っているし、その動きにどんな意味があるのかを知りたいものだ。
  8. 8.人間の短期記憶に負担をかけない。

この中でなるほどーと思ったのは、4番。
「つなぎ目の認識を意識しながらのデザイン」。
なかなかできるもんではないが、すごく納得がいく。この感覚は完全にユーザ目線の考え方。
以前は、CSSの部分で、ユーザに対するおもてなしの心を記事投稿したけど、
これはシステムにおいてのおもてなしの心だね~。

このユーザ目線で考えられた、ユーザエクスペリエンスつまり「おもてなしの心」がやっぱり必要になってくるんだろうな~と思ったのでした。


関連記事
http://sevenstyleweb.com/blog/2008/09/css-8.html




アイシテル

| コメント(0) | トラックバック(0)
昨日のこと。
CHAGEのライブに行ってきた。
タイトルは「アイシテル」です。
久々のソロライブ。嫁と一緒に行ってきたんだが、久々にフィーバーした。
あんな曲からこんな曲。もちろんMCも劇オモロー。アンコールでは、みんなであの曲を大合唱。大笑い。ネタばれになるから、この辺で。

会場はドラムロゴスというライブハウス。小屋がせまく、舞台との距離ももちろん近い。
マイクなしの声も聞こえたり、実に楽しかった。

んで、ライブ終了後、
会場近くのラーメン屋「山ちゃん」へ。
ラーメンやら、地鶏の塩焼きを食していると、店頭に1台のバンが止まる。?と何気なく目をやると入ってきたのは、レミオロメン。こなーゆきーのレミオロメン。

奥のほうにいって飯食ってた。たぶんライブの打ち上げ。
もしくは前日入りの食事会。

お客さん誰もきづかず。

俺と嫁が気づいて、レミオロメン。

特にどうするでもなく、帰宅。

CHAGEとレミオロメンを見たこの休日でした。

    follow me on Twitter

    このアーカイブについて

    このページには、2008年11月に書かれたブログ記事が新しい順に公開されています。

    前のアーカイブは2008年10月です。

    次のアーカイブは2008年12月です。

    最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。