shortcut Webデザインとかガジェットについてつらつらと書き連ねています

223月/090

iuiを使ってみた

iPhoneOS3.0が発表されましたね。

OSレベルでコピーペーストができるようになったり、bluetoothのサポート範囲が広がったりして、非常に便利になりますね。
個人的にはキーボードを接続できるようになるといいな、と思ってます。

で、折角iPhone界隈が盛り上がってるのでなんとなくライブラリを触ってサンプル作ってみました。

Color Set Liteという、ドイツ工業規格のカラーチャートを表示するアプリのweb safe color版みたいなものですね。

iui使って形だけ整えただけなので特に複雑な作業はしてません。iuiは本当に良くできてます。

全然実用的ではないですが、なんとなくカラーコードを俯瞰したりするのに使えるかな、と思います。

Filed under: web No Comments
162月/090

ウェブとテレビの関係について考えてみた

ひとまわり遅れての反応です。

2009 International CESで展示されていたテレビのネットワーク対応の記事を見てつらつら考えてみます。

日本国内は未だにメディアであるテレビ局の力が強いため、なかなか進まないテレビのオープン化ですが、日本以外では着々と形になりつつあるようですね。

今の段階では、天気予報やニュースといった、設定したプッシュできるコンテンツを受信できるようになる、といったところで、今後は映画やドラマのビデオオンデマンドとか、画像共有サービスを利用できるようになるんでしょうね。

あ、アクトビラがもうやってるか。

あのプラットフォームがもう少しオープンになってくれると嬉しい反面、今のインターネットはほぼ無法地帯なので、そこを流れる情報をそのままテレビに流してしまうのはどうなんだろう、と思う部分もあります。
まあ、そこはコンテンツホルダーと呼ばれる人達がコントロールしていけばいい話なので、電波からインターネットへの転換が今後どのように進んでいくかが問題ですね。

日本での今後の選択肢としてはこんな感じでしょうか。

  • コンテンツを握っているウェブのポータルサイトがテレビに参入してくる
  • インフラを握っているゲームハードのメーカーが参入してくる
  • アクトビラのオープン化され、コンテンツホルダーの参入が容易になる
  • アクトビラがプラットフォームとしての基盤を固め、放送局に次ぐメディアになる

やっぱりアクトビラ次第なのかなぁ、と思いつつ、ウェブ屋からすると、まだ市場として熟成していないプラットフォームはテレビくらいしか残っていないので、なんとか食いこめないかなぁ、と思っています。

Filed under: web No Comments
28月/080

Googleニュースを少しだけ見やすくする

エントリー書くのも久しぶりです。

今年の夏は厳しく、早速暑さと風邪でダウンしています...。
もう少し体を鍛えないとなぁ、と思う今日この頃です。

今更なのですが、Google ニュースでニュースを見るようになりました。
クロールしたニュースをアルゴリズムでランキングする手法は検索のインデックス生成の方法と原理は良く似ていますよね。
技術を生っぽく前面に押し出すのはいかにもGoogleっぽい感じがして、個人的には好きです。

ただ、プレゼンテーション部分が非常に生っぽいので、折角なので、多少CSSを書き足して読みやすくなるようにしてみました。
FirefoxのStylishを使用してください。

これが現状で

これが整形後です。

で、実際のCSSはこんな感じです。GoogleニュースはほとんどHTMLマークアップによる構造化がされていないので、隣接セレクタを多用しています。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("news.google.com") {
/* news module */
.lh
{
border-bottom:1px solid #aaa;
padding-bottom:10px;
}
.lh br
{
display:none;
}
/* anchor */
.lh a
{
text-decoration:none;
}
.lh a:hover
{
text-decoration:underline;
}
/* title */
.lh a+br+font
{
display:block;
margin-bottom:5px;
}
/* photo provider */
.lh table font
{
display:block;
}
/* description */
.lh a+br+font+br+font
{
display:block;
line-height:1.5 !important;
margin-bottom:7px;
}
/* destination */
.lh a+br+font+br+font+br+font,
.lh a+br+font+br+font+br+font+br+font
{
display:block;
margin-bottom:5px;
margin-left:20px;
}
.lh font.p
{
display:block;
margin-top:7px;
margin-left:20px;
}
.lh font.p+br+font.p
{
margin-top:0;
}
}

あとはGreaseMonkeyつかってショートカットを足すくらいかな?

Filed under: web No Comments
243月/080

CSS Niteに行きそびれた…

そういうわけで(どういう訳?)祝日に行われたCSS Niteに行きそびれました。
「詳細HTML&CSS」で長らくお世話になり、今はWeb Designingの連載「CSS Analytics」でお世話になっている大藤さんが、わざわざ札幌から来ていたにも関わらず…。

勿体ない…。

Filed under: web No Comments
910月/070

CSS Nite LP4に行ってきた。

CSS Nite LP4 に行ってきました。

「 Web 標準の日々」が超過密スケジュールで見たくても見れないセッションが多かったので、その声に応えてのアンコールということだったのですが、実際にはディレクショントラック + αといった感じでした。
ちょうど、プロジェクト管理とかディレクションといったところに非常に興味があったので、タイミングが良かったです。

一緒につくろう! XHTML+CSS ガイドライン 〜ディレクションバージョン〜

遅刻して後半 10 分しか見れませんでした…。
複数人で効率とクオリティを落とさずにコードを書くためのガイドラインを作りましょう、という話だと思います。

ガイドラインは当然必要なのですが、コードに限っていうと、できるだけパーサーやバリデーターや整形ツールのような各種ツールで個々人の差を吸収してしまうのが楽でよいのかな、とも思ったりしました。

ビジネス・アーキテクツのコミュニケーションデザイン

bA の森田さんのお話。
bA はとにかくハイクオリティの仕事を目指してかつそれを実践できる会社なので、どんな話を聞いても参考になりますし、話を聞くたびに自分の現状を思い知らされます。

某案件のスケジュールとか某案件の見るだけで身の引き締まる思いのする提案書などを見れて幸せでした。

最小単位の作業項目が入ったスケジュール表を見せて「ディレクターは一番最初にヒアリングしたときにこれくらいのスケジュールをバーっとかけなきゃダメですよ」なんて言っていたのが非常に印象的でした。
ディレクターはイマジネーションなんですね…。

Web 制作におけるアートディレクションとテクニカルディレクション

アンカーテクノロジーの佐分利さんと神森さんのお話。 佐分利さんがアートディレクション寄りで、神森さんがテクニカルディレクション寄りの話をしていました。
どちらも非常に砕けた雰囲気で現場の話をしていて、よくある web ディレクターの募集要項に突っ込んでみたり、クライアントと作業者の橋渡しをいかに上手くやっていくか、といった内容 (どんな内容) でした。
「デザイナーとマーケッターは話ができないので、そこを上手く翻訳するのがアートディレクターの役割」と、佐分利さんが言われていたのは納得でした。 立場の違う人が話すと、端から見ると意思疎通が図れているように見えて、実際には全然違う解釈している場合がありますからねぇ。

みっちりみちみち バージョン管理!

福岡の開発会社、ヌーラボの橋本さんによる SubVersion の話。
入門編のような位置づけだったので、ほとんど難しい話はでなかったのですが、橋本さんのとにかく侠気あふれるプレゼンは面白かったです。 いいですねぇ。
Adobe のバージョン管理アプリ、Version Cue が CS3 になってから劇的に性能とインタフェースが良くなったので、そっちでもいいかな、とも思っていたのですが、柔軟性は SubVersion の方が断然上なので、導入を検討してみたいです。

Web Direction Next: クライアントの Happy を実現するための Web ディレクションとプロジェクトマネジメント

ロフトワークの林さんのお話。
ロフトワークはクリエイティブやマークアップの実動部隊を持たないディレクションのみ会社なので、当然のように制度やリテラシーがしっかりしています。
今回は PMBOK のざっくりとした紹介にとどまりましたが、事例紹介なども見てみたいです。
林さんの話の中でも「ディレクターは作業内容をどこまで想像できるか」といった話が出ていましたので、やはりディレクターは管理ではなく想像する職種なんでしょうね…。

Filed under: web No Comments
227月/070

web標準の日々に行ってきた。

もう一週間近くたってしまいましたが、行ってきました。
あと、一セッション話してきました。どこで、というのは色々書きづらいので、適当に察してください。

いろいろな人がいろいろなところで感想なりレポートを書かれているので、ざっくりと感想をば。

A1 WCAG 2.0:見えてきたアクセシビリティの新基準

植木 真(インフォアクシア)

もしうまくいけば、今年の9月にlast call working draftになるかもしれないWCAG2.0の概要と、JIS x 8341-3との相違点やWCAG2.0とのマッピングについての話でした。

基本的にはJIS X 8341-3はWCAG2.0に包括されるということなので、今後WCAG2.0が勧告されればアクセシビリティについてはWCAG2.0に則ってサービスなりコンテンツを作れば大丈夫、ということらしいです。

現状、WCAG1.0やJIS X 8341-3は四肢障害や聴覚や視覚などの感覚障害へのサポートを想定したものが多いのですが、今後は認知障害などのルール化しにくい部分もガイドラインに納めるということなので、そのようなガイドラインの必要性を問われるくらいにwebも生活のインフラになったのだなぁ、と実感しました。

X2 名前のウェブとXHTML文書のプロファイル

神崎 正英

「名前」という切り口でRDF、XHTML、CSSを語り、神崎さん謹製のmetaprofの紹介につなげる、というお話でした。
HTMLをメタ言語としてとらえる機会がここ最近なかったので参考になりました。HTMLの拡張と言えばidや暮らす属性かxmlnsしかないと思っていたのですが、プロファイルを使えばグローバルにあまりコストをかけずに拡張できるというのは知りませんでした。
なんとか仕事に繋げられないか思考中…。

A3 富士通の実践、アクセシビリティ/ユーザビリティ。そしてファインダビリティ

高橋 宏祐(富士通)

アクセシビリティに配慮したコーポレートサイトといえば富士通、というくらい日本では著名な富士通のwebサイトマスター、高橋さんのお話。
今回は子供向けコンテンツのユーザビリティとアクセシビリティについて、という、非常に珍しい事例の紹介でした。
「子供向けの玩具」とか「子供向けのテレビ番組」といえば、いかに興味を引いてもらえるかとか、親御さんがいかに安心して見せられるかとか、いかにお母さんに興味を引いてもらえるようなイケメン俳優を集めるかとkったコンテンツ部分がフォーカスされがちで、大体はそこに使い勝手なども含まれたりはしますが、webで、かつ、ユーザービリティという切り口で語られるのは珍しいので、興味深かったです。

A4 JIS X 8341-3最新動向 & Ajaxのアクセシビリティ

梅垣 正宏

ものすごいゆるい感じなのにいきなり高度な話が間に挟まったりする不思議なセッションでした。途中の動画でなぜかプロレスしている植木さんが登場していたし。
Ajaxは基本的にスクリーンリーダーなどでイベントを取得するのが難しいので、ブラウザ側での実装を想定したメタ言語(ARIA-Roles)を実装する事で対応できないか、という事と、実質日本ではほとんど取り組みがなされていない事を憂慮されていました。
アメリカでリハビリテーション法508条が施行されたように、日本でもアクセシビリティ関連の法案ができればもう少し何とかなるので頑張る、と話されていましたが、まさに頑張ってほしいです。
ここは他人任せではいけないところではありますが…。

U5 ゼロから考えるユーザー・エクスペリエンス概論 ~使いやすければいいの?~

小久保 浩大郎(ビジネス・アーキテクツ)

おなじみ小久保さんのセッション。マークアップエンジニアなのになぜかユーザーエクスペリエンストラックでのセッションです。
おおまかな「ユーザーエクスペリエンスって何?」って概論からそれをどう実作業に落とすか…、というところで時間切れになってしまったのが非常に残念でした。
自分もほぼ耳学問の分野だったので、聞いていて考え方が整理できてよかったです。
でも、あまりにもweb制作者や会社の実態とは慣れている事も多かったりするので、ここの分野を日本で語れる人はまだ少ないだろうなぁ…と思ったりもしました。
いまだに「ガワを作る人」って認識が(制作者の内部でも)多かったりしますからねぇ…。

M6 ソーシャルメディアが生み出すコンテンツ多層化と意味変化

樋口 進(シンクエージェント/IMJビジネスコンサルティング)

ソーシャルメディアの実態と各サービスの位置づけ、そしてそれを活かしたマーケティングの行い方についてのお話でした。
メモを会社に持っていってしまったので細かい話をできないのが悔しいところですが、ソーシャルメディアのコミュニティやトピックのコントロールは難しいけどやって然るべきところだなぁ、と思ったり。

まあ、普段関わる事が少ない分野なのであまり理解できなかったというのもあります。


そんな感じで、やはり各分野のエキスパートの方のお話は非常に勉強になるし、刺激になりました。
自分が結構同じ場所で足踏みしているというのも分ったところで、もっと精進したいと思います。

Filed under: web No Comments
216月/070

「Web標準の日々」でスピーカーやります。

こう、宣言してしまうのも非常におこがましいのですが、アクセシビリティ/ユーザービリティのトラックでスピーカーやります。
根っからの現場の人間なので、できるだけ具体的な現場の話をしようと思います。当日はもやっとボールなどは投げ込まないようにお願いします。

去年の今頃は、おっかなびっくり六本木ヒルズに行って「web標準の日」で話を聞き、感銘を受け、それでも日頃の仕事にうまく活かせずに悶々としていました。
それから一年経ち、今度は自分が話す立場になった事を思うと、この一年いろいろあったなぁ…、と感慨に耽ってしまう今日この頃です。

とりあえず、去年自分が受けた感銘を同じくらいの大きさと温度感で伝えられれば、と思っています。

Filed under: web No Comments
235月/070

フォントサイズの%とpxの換算表を作ってみた

コーディングコンテストの受賞者の方のコードを見て、自分がいかに文字サイズに無頓着だったかを思い知る今日この頃ですが、みなさんいかがお過ごしでしょうか?

ソースの綺麗さとか、アクセシビリティとかに関してはそれなりに知っているつもりでしたが、それにかまけてビジュアル面に対する考え方がずいぶん甘くなっていたようです。だって、文字可変してもレイアウトが破綻しないサイトでページのビジュアルを追い込めと言われてもねぇ…

まあ、そんな言い訳はさておいて、いくつかの文字サイズを基準としたときに、%指定で何pxになるかを調べてみました。
12px〜16pxを基準にして、大体使うであろうサイズを調べてみました。

実際作ってみて気づいたのですが、ブラウザによって%の解釈が微妙に異なりますね。firefoxでは12pxのはずがsafariで11pxとか。

ちなみに、YUIのfont cssでは、smallのフォントサイズである13pxを基準にしていますね。スクリプト方面が目立つのであまり話題になりませんが、reset.cssとかfont.cssはかなり使い勝手がいいですね。

Filed under: web No Comments
145月/070

CSS Nite LP3に行っていろいろ考えてしまった。

CSS Niteの拡張版、CSS Nite LP3に行って来ました。
今回は参加者が300オーバーという大人数のイベントです。
LP2の時が200人近くだったはずですから、回を追うごとに大きくなっていますねぇ。

今回は「coder`s high」というサブタイトルで、CSS・HTMLを含めた「コード」を書くところにフォーカスした内容でした。
その中で、bAの小久保さんが話していた「フィロソフィー・オブ・コーディング」を聞いて、コードを書くときの意識がいかに甘かったかを実感させられてしまいました。

ここ最近、「web標準」と言われるまっとうなHTMLやCSSを書くという概念がwebデザイナーの間で認知されつつあります。今までモヤモヤとしていた部分をキーワードに置き換えることで、説明はしやすくなったのですが、それでも実際に仕事に取り入れようとするとクライアントや開発の人に理解してもらうのに苦労することがあります(時には同じwebデザイナーにさえも)。

大体が特定のブラウザによるレンダリング結果のみにフォーカスして話をしてしまうのが理解されにくい原因なのですが、それを

  • デザイン本来の目的は「コミュニケーション」をとることである
  • webでコミュニケーションの基本技術はHTMLである
  • webというメディアは、データをどのように閲覧するかはユーザーに委ねられている
  • 今度受け手の方法が多様化・階層化していった場合、よりHTMLのクリーンさが求められる

といった具合に、デザインそのものの考え方や、「環境と因子」といったもっと広範囲の視点から抽象的に捉えては話していました。
最近、新入社員が入ってきたりして、「デザインとは何ぞや?」と漠然と考える事が多かったのですが、それをコーディングの作業に結びつけることができず、いつも回答がでないままモヤモヤとした感じで忘れてしまうことが多かったのですが、今回のセッションを聞いてかなり整理できそうなので、もう一度しっかり考え直してみようと思います。

と当時に、今までかなり漫然とコードを書いていたのだなぁ…、と、かなり焦ってしまいました。「作業」はしていたけど「デザイン」はしていなかったことに気づかされました。
転職して半年が経ち、ゆとりが出てきたと思っていましたが、実はゆとりではなく単に慢心していただけだったんですね…。

Filed under: web No Comments
224月/070

corder’s highのデータ作成終了

CSS Nite LP3と連動したコンテスト、コーディングコンテスト Vol.1 ~Coder's High~のデータ作成がついさっき終わりました。

普段なら、自分でデザインを起こしたり内容を理解した上でデザインを受け取ってからコーディングをするので、構造を考えやすいのですが、デザインカンプだけ受け取ると考える事が多くて以外と時間がかかりました。
主催者宛てに送ったコメントにも書きましたが、日本でもこうやってコーダー主導のイベントが行われるくらい意識の高い人が増えてきたのはよい事ですね。

まあ、自分の歳とか考えると、応募するんじゃなくて主催者側に回るべきなんじゃね?と言われそうですが…。

追記(070424)

参加者一覧が出ました。みんな若そうですね…。

Filed under: web No Comments