2006-12-06

sIFR でアンチエイリアス フォントの埋め込み

Logo_sifr2

sIFR とは?

sIFRは、Flash に埋め込んだフォントのアウトラインと JavaScript を利用して、制作者のお好みのタイプフェイスでテキストを表示する仕組みです。

導入例 僕がこれまでいた大学の世界ででも、アクセシビリティ確保+セマンティックマークアップと、見栄え重視という2つのトレードオフに関する対立はしばしばありました。その、ひとつの歩み寄り策として、目下、制作している新しいブログで、sIFRという仕組みを導入してみることにしました。

続きを読む "sIFR でアンチエイリアス フォントの埋め込み"

| | コメント (1) | トラックバック (1)

2006-06-11

振る舞い分離 JavaScript ライブラリ一覧(途中)

とりあえず、昨日(「続 JavaScript ソースが HTML から消える日」)の続きです。

あとで、対応ブラウザと対応セレクタ、ライセンスの一覧をアップしますが、とりあえずは現時点で把握している選択肢だけでも挙げておきます。

と昨日いいましたけど、ちょっと検証までやってる時間がないので、現時点で把握している範囲内の情報だけでもアップしておきます。(参考リンクもあらためて探し直してきたらボロボロ出てきたので整理しないと..。)また追々情報を追加していくつもりですけど、情報リーク大歓迎です。

対照表へ

こういう情報って配信形態として Blog よりも Wiki の方が向いてるよなぁ..とかいうジレンマも自覚しつつ..。(- -;)

それと、一応、この振る舞いの完全分離 —特に getElementsById の枠を超える部分のマイナスの面にも言及しておくべきでしょうね。

  • Shibuya.js Technical Talk #1 を終えて。(IT戦記)
    (パワーポイント形式ですが、これまで紹介してきたライブラリ類を利用される方も、自作している方も必見の内容です。ちょっとした記法の違いでいかに重くなるか、どうすれば動作を軽くできるかということが、非常にわかりやすく紹介されています。prototype.js 1.5 の $$() にも言及してます。)

続きを読む "振る舞い分離 JavaScript ライブラリ一覧(途中)"

| | コメント (0) | トラックバック (0)

2006-06-10

続 JavaScript ソースが HTML から消える日

なんか、はてなブックマーク経由で、突然、昔のエントリー(JavaScript ソースが HTML から消える日)にアクセスが集中しているのに気づいて、急遽、フォローアップ エントリーをアップすることにしました。あのエントリーを書いてからまだ半年ですけど、あの時点で僕が気づいていなかったことも幾つかありましたし、何より状況が随分変化してます。

手みじかにおさらいしておくと、「JavaScript ソースが HTML から消える日」で紹介したのは、Ben Nolan 氏が開発した behaviour.js という JavaScript ライブラリです。このライブラリは、関数の実行場所を、外部 js ファイル内で CSS セレクタを使って指定することができ、これによって従来 HTML 中に埋め込んでいたイベントハンドラ部分も含め、文書構造(document structure → HTML の役割)と振る舞い(behaviour → JavaScript の役割)のほぼ完全な分離をお手軽に実現できるようになったというお話でした。

ところがその後、似たようなライブラリが相次いで公開されたり、既存のライブラリに同様の機能が追加されるなどで状況が変化してきています。behaviour.js 自身も、その後 Google Groups を中心に、対応セレクタの問題、メモリリークの問題、prototype.js など他のライブラリとの連携の問題、behaviour.js v2 の機能実装の方向性の問題など、さまざまな問題が上げられています。

あとで対応ブラウザと対応セレクタ、ライセンスの一覧をアップしますが(2006-06-11: 「振る舞い分離 JavaScript ライブラリ一覧(途中)」をアップしました)、とりあえずは現時点で把握している選択肢だけでも挙げておきます。

  1. behaviour.js
  2. getElementsBySelector
  3. cssQuery()
  4. jQuery の $() 関数。(参考: jQuery - PrototypeにインスパイアされたJavascriptライブラリ
  5. prototype.js v1.5 に $$()関数 が追加。ただしかなり重い..。(2006-01-18)

続きを読む "続 JavaScript ソースが HTML から消える日"

| | コメント (1) | トラックバック (2)

2006-05-14

niftycube.js - 角丸効果 JavaScript ライブラリ

対応ブラウザ: IE 5+ Mozilla Firefox Netscape 4+ SafariOpera: 表示に乱れあり)

先日、"Nifty Corners Cube" という、ボックスの外枠に角丸効果を出すための JavaScript ライブラリを知りました。「え?今頃知ったの?」って方はともかく、「何でいまさら角丸効果を JavaScript で出す必要なんかあるの?!そんなの、CSS でできるじゃない?」と怪訝に思われる方もいるでしょうが、まずはこの niftycube.js の特徴をご覧あれ。

主要機能

  • 文書構造上、無意味なブロック要素(div など)を HTML 上に記述することなく、単一の div 要素に対してでも角丸効果を出すことができる。
  • (以前に紹介した behaviour.js のように)角丸効果を適用する場所を CSS セレクタで指定できる。
  • CSS の背景色や背景画像などを niftycube.js が自動的に検出してくれるため、JavaScript の記述量が非常に短い。(JavaScript 初心者でも簡単に扱える。)
サンプル 1
サンプル 2

続きを読む "niftycube.js - 角丸効果 JavaScript ライブラリ"

| | コメント (0) | トラックバック (0)

2006-05-07

邦人による Ajax 関連書

今日はかねてからずっと勉強しようと思っていた、Ajax 関係の積んどく本の中から。まだ斜め読みの段階なので、ひょっとしたら後で意見が変化するかもしれません。ま、第一印象ってことで。(^ ^;)

続きを読む "邦人による Ajax 関連書"

| | コメント (3) | トラックバック (0)

2006-01-05

JavaScript ソースが HTML から消える日

[2006-06-10 付記]このエントリーは、2006-01-05 時点のもので情報が古くなってます。現時点で把握している最新情報を「続 JavaScript ソースが HTML から消える日」にアップしましたので、あわせてご参照ください。

Behaviour.js ― JavaScript ソースを (X)HTML から完全分離できるライブラリ

昨日、職場の同僚の人がたまたま見つけた JavaScript ライブラリを教えていただたんですけど、これがもうびっくり!なんと、このライブラリがあれば、イベントハンドラーも含めて JavaScript ソースが (X)HTML の body 内から、ほぼ完全に分離できてしまいます! しかも、HTML 内で JavaScript 関数を適用する場所は、なんと JavaScript ソース内に CSS セレクタを書き込むことで指定!あまり日本では取り上げられていないようですが、設置も簡単だし、何より HTML ソースが劇的にすっきりするので、少なくとも僕はもうコイツを手放せなくなりそうです!

はっきり言います!この behaviour.js という JavaScript ライブラリと CSS セレクタで、html/body内の属性は class や id も含めて 90% 消せるようになります!( IE を無視できればですけど..。(^ ^;) 別に無視しなくても、70~80% は消せるかと思います。)

続きを読む "JavaScript ソースが HTML から消える日"

| | コメント (0) | トラックバック (6)