日記 | ヨモツネット

日記

Web on the Beach (CSS Niteの番外編) に行ってきました

2008年7月20日日曜日

Web on the Beach (CSS Niteの番外編) に参加するため、鎌倉の材木座海岸まで行ってきました。

Web on the Beach 自体は夕方からのスタートでしたが、優雅な Web 制作者の会でよくご一緒する皆様に誘っていただき、お昼から海を楽しむことになって、泳いできました。久しぶりの海だったけどとっても気持ちよかったー。でも、ひらっちがこれなかったのが残念。

その後、夕方から人が集まり始め、タコライスや、しらすご飯、焼きそばなどを食べながら色んな人と話したりプレゼントじゃんけん大会などが行われました。今回はOpera のノベルティーが多かったです。Web Site expert の編集長の方もいらしていて、Web Site expert 1 年分のじゃんけんを勝ち抜くことができ、いただけることになりました。ありがとうございます。

あと、いろいろ話とかしていると外村さんと小林さんにいいことがあったようで。おめでとうございます。

その後、屋外でのパーティーも終わり、海の家の中で波の音を聞きながら癒されるライブや Opera などのセッションがありました。

Opera のセッションでは、市川さんと上広さんから、One Web をテーマにした講演がありました。

One Web は、PC でも携帯電話でもゲーム機でもどんな端末からも同じデータにアクセスし、同じ情報を取得することができる Web という感じ
Opera の東京オフィスは 50 人程度で Opera Software 全社中、一番人数が多い
Willcom、ニンテンドー、イーモバイル、その他様々な企業との取引を行っている
Willcom の京ぽんが初めて
Willcom や Windows mobile が搭載されている端末のほとんどに Opera が搭載されている。
15 以上のプラットフォームで Opera が利用できる
アプリケーションは Web 上で動作するものに変わりつつある。マルチデバイスで展開する Opera ではどんなデバイスからもその Web アプリケーションを利用できることを目標としている。ただ、それには規格がしっかりしていることが大切で、Opera はW3C の活動に積極的に参加している。
過去の名残で、有償とか広告つきとかというイメージをもたれていることも多いが、Opera は無料で利用でき、広告もつかない
dev.opera.com, labs.opera.com で積極的に情報公開をしている。labs.opera では Opera の実験ビルドを公開しており、試験的に HTML 5 を実装したものなどがある
Dragonfly は Opera 9.5 から実装されたWeb サイトの解析/デバッグツール
Dragonfly は自動更新をする
Dragonfly は Web の技術で作られていてオープンソース
Dragonfly の Scope API が公開予定。これを使えば、Opera 以外でも Dragonfly を使うことができる
Opera のアドレスバーに opera:debug を入力すとリモートデバッグを利用できる

続きはまたあとで追記します。

コメントはありません

角丸にするためにライブラリを作ってみる

2008年7月18日金曜日

角丸にするためにライブラリはいろいろあるけど、思ったとおりのものが少ないので自分で作ってみようかなといろいろ実験しています。

目的と目標は、角丸のために背景画像を何枚も切り出したり、要素を入れ子にするのは工数もかかるし、運用時も大変。できれば画像使わないで、要素の入れ子もなくしたいといった感じです。

Firefox と Safari では CSS 3 の border-radius を先行実装しているのでそれらで実現が可能ですが、IE と Opera ではいまのところ border-radius は使えないなので、

IE と Opera でのみ動作 JavaScript する
IE と Opera も将来 border-radius を正式に実装するかもしれないので、border-radius が実装されている未知の IE や未知の Opera では動作しないようする
画像を使わないで角丸を実現する。IE は VML で実装して、Opera には canvas 要素をつかって実装してみる
引数とか特別な class 属性がなくてもどうするようにする
1. 要素のcurrentStyle を目印にする
2. border-color、border-width はそのまま引継ぎ、border-radius に該当する部分はあまり使わないプロパティの値を参照する
3. border-radius は、そのまま取得できないので、どこかから取得しないといけない。voice-familyあたりを参照してみる。
4. voice-familyはあまり使わないプロパティかつ、値に任意の文字列を設定できる。例えば voice-family:’border-radius:16px’ みたいにしておいて、element.currentStyle[voice-family] の値を参照する

といった具合のライブラリを作りたいなぁ。

とりあえず、IE での実装から始めてみます。IE では VML を使って実装するので、VML について少し調べてみました。

角丸の実現に使えそうなのは、VML の roundrect がよさそう。roundrect は角丸付きの矩形を描画するためのもので

strokecolor 属性で枠の色 ≈ border-color
strokeweight 属性で枠の太さ ≈ border-width
arcsize 属性で角丸の度合い ≈ border-radius

などの属性を指定できるみたい。

そのほかに注意点として、

namespace に urn:schemas-microsoft-com:vml を指定しておかないと VML が使えない
標準モードでは VML の要素は hasLayout が tlue ではないとうまく表示されない
Math.floor(strokeweight / 2) と同じ分の margin-top と margin-left をつけないと見切れてしまう

というわけで、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VML test</title>
<style TYPE="text/css">
v\:* {behavior: url(#default#VML);}
v\:roundrect {zoom:1;}
</style>
</head>
<body>

<div style="width:500px;">
<v:roundrect style="height:100%; padding:10px; margin:1px 0 0 1px" arcsize="0.2" strokecolor="red" strokeweight="3px">
<p>ie test div</p>
</v:roundrect>
</div>

</body>
</html>

みたいな感じすると、画像を使わずに角丸を実現できます。IE で確認できる実際の HTML も demo として用意してみました。

ただ、そのまま使うには汚すぎる HTML なので、IE だった場合のみ、通常の HTML がこんな感じに自動で変換する仕組みを JavaScript で作っています。

現在は CSS で border-radius を指定してあれば IE でも HTML ソースを綺麗なままで、自動で border-radius をエミュレートできるくらいになってきました。というわけで IE でも自動で border-radius をエミュレートするライブラリベータ版。ためしにこのdemo の HTML ソースを見てみてください。

そんなわけで、こんな感じのライブラリを作っていきます。

角丸ライブラリ参考
- IEでもborder-radiusっぽいことをするbehavior
- れぶろぐ - [CSS][JavaScript] VML を利用して IE で border-radius が使えるようにする
VML 参考
- VML入門
- とほほのVML入門

2件のコメントがあります

CSS Nite in Ginza, Vol.25 に行ってきました

2008年7月10日木曜日

CSS Nite in Ginza, Vol.25 に行ってきました。

今回は Adobe Dreamweaver CS 4 と Fireworks CS 4 の新機能について、Adobe プロダクトマネージャ森房　卓史さんによる講演が行われました。

Dreamweaver CS 4 についてを中心にいろいろメモしてきました。

講演でのフューチャーは最近行われた Dreamweaver 10 周年記念イベントで発表されたものとほぼ同じでしたが、今回は実際に Dreamweaver CS 4 Beta と Fireworks CS 4 Beta を使って、demo を行いながら新機能を見てみる、というものでした。

自分も日々の業務では Dreamweaver CS 4 beta を使っているので、今回紹介された Dreamweaver の 10 の新機能と自分の使用感を合わせてまとめてみると…

関連ファイル

HTML ファイルを開いたとき、その HTML ファイルからリンクしている CSS ファイルと JavaScript ファイルをタブとして表示する機能で、切り替えがとても簡単に行えます。

ただし、CSS や JavaScript を大量に読み込んでいる場合、タブ 1 列に表示しきれなくなるのであふれた分はプルダウンとして表示されます。

タブを選択すると、コードビューが選択したタブの内容になります。

この機能のおかげで、HTML と CSS, JavaScript の行き来が簡単になり、自分にとっては使用頻度の高い機能です。

ライブビュー

通常の Dreamweaver のデザインプレビューから、レンダリングエンジンに Webkit を使ったプレビューに切り替えます。CSS2.1 相当の CSS 対応はもちろん、JavaScript も動作している状態になります。ほぼ完璧なレンダリングが行えるのですが、切り替えが少し重い感じがするので、レンダリングだけを確認する場合は F12 を押したほうがいいのかもしれませんが、後述の機能、ライブコードと組み合わせたときに真価を発揮します。

コードナビゲータ

現在選択中の要素に適用されている CSS のスタイルや onclick などのイベントハンドラを一覧できる機能です。

スマートオブジェクト

Photoshop との連携するための機能で、Web ページで使っている画像と PSD をリンクしておくと、PSD がアップデートされると自動で画像もアップデートできる仕組みです。

ワークスペースの強化

パネルをかなり自由に配置できます。また、その配置を保存できます。

更に、CS 3 にもありますが、挿入 (Insert) パネルのお気に入りを使うことで、ワークスペースを更にカスタマイズできます。

プロパティインスペクタ

Dreamweaver の下部に表示されているプロパティパネル。CS 4 では HTML モードと CSS モードに別れています。

CS 3 以前でもリンクを設定するときになどによく使うパネルですが、CS 4 では CSS モードから HTML モードに変更してからではないとリンクを設定できないので、HTML のボタンを押して切り替える必要があります。

自分はこれがわからなかったのでしばらく、リンク設定はどうやるのか悩みました…。

ライブコード

ライブコードを有効にすると、JavaScript で HTML が書き換えられたとき、その書き換えられた HTML がコードビューに反映されます。

JavaScirpt の停止

ライブコードは常に JavaScript によって書き換えられますが、JavaScirpt を一時停止することで、その時点の HTML がわかるので、JavaScript のデバッグに役に立ちます。

カスタムコードヒント

JavaScript で、オブジェクトなどを作ったときに、コードヒントにそれも反映されます。

例えば

var AAA = new Object;
AAA.BBB = "bbb";

としたとき、AAA.　まで入力すると、コードヒントに BBB が表示されるようになります。しかも、そのコードヒントの参照元が別の JavaScript ファイルになっている場合は、その JavaScript ファイルのファイル名も表示されます。

もちろん、jQuery などのフレームワークに対しても機能するので JavaScript の開発に便利です。

スプライデータセット

という感じでした。

Fireworks については普段使わないのでよくわからないのですが、メジャーツール (ものさし) や PDF に書き出しなど、Web サイトのワイヤーフレームを作るための機能がかなり強化されているようでした。Fireworks をつかったワイヤーフレームもよさそうです

ちなみに Dreamweaver CS 4 Beta と Fireworks CS 4 Beta は Adobe のサイト内からダウンロードすることができます。

Dreamweaver CS 4 beta は GoLive 9, GoLive CS2, Dreamweaver CS 3 のライセンスを持っていれば、そのシリアルナンバーをダウンロード時に専用のフォームで CS 4 beta 用のシリアルナンバーを取得することができ、CS 4 の製品版がリリースされるまで利用することができます。

公開されている CS 4 beta の UI は英語ですが、しばらく使ってみると違和感無く使えるようになってくると思いますのでこれらの新機能を使ってみたいという場合は試用してみるといいかも。ただ、現段階のものはちょくちょくフリーズします…。

終了後は懇親会に参加しました。Adobeのかたと直接お話ができ、とてもよい機会になりました。懇親会で Adobe Creative Suites 3 のストラップをいただきました。

コメントはありません

SwapSkills Vol.15 でお話をしてきました

2008年7月5日土曜日

SwapSkills Vol.15 でお話をしてきました。

inline-block を IE 5 から 7 までと Firefox 2 も含めて使う方法と、inline-block の応用例を紹介してきました。

スライドを使いながら人前で話すなんて滅多に無いことでもの凄く緊張しましたが、うなづきながら聞いていただいている人もいて、後半は安心してきて無事に終えることができました。

たくさん経験値がたまりました。お聴きいただいた皆様、ありがとうございました。

終了後は天狗でアフターパーティーが行われました。

いまは XHTML や CSS を教えてくれるセミナーや書籍はいろいろあるけれどもっと上級なことを教えてくれる場所がないといった話題の流れのなかで、上級の技術の一例として、森田さんが、XHTML でコンポーネントを作っておいて、それを組み合わせて Web ページを作るだけではなくて、そのコンポーネントのための Schematron も作って、そのコンポーネントがしっかり使われていないとエラーがでる仕組みを作ることもしている、と仰っていました。

なるほどー。すごいなぁと感動。XML ももっと勉強しようと思います。

コメントはありません