Inside Web Directions East での、私の連載もはじまって、1.5ヶ月間。私のパートは、もともと自分でサイト構築なんかしたことないし、そもそも興味もあまりなかったけれど、ウェブ運営・ウェブプロモーションの担当となった方や、技術的な背景にすこしとっつきにくいと感じているけれど、せっかく業務上関係しているウェブについてもっと知ってみたいという、非エンジニアの方を対称にしています。早い話、このブログの連載担当者の中で、私のブログだけが毛色が違うのはそういう理由があります。私がエンジニアじゃないというのも大きな要因ですけどね。

ですので、オーソドックスな技術やネタをのんびり取扱ってきた？毎週月曜ですが、たまには流行モノを取り上げようということで、今週からはGoogle Chromeを取り上げます。 続きを読む

良い仕事をする上で重要な”モチベーション” 。
仕事を始めたばかりはやる気がみなぎっている事は良くある事ですが、維持していく事は以外にも大変だったりします。 続きを読む

といっても少し、まだ先の話だ。ただし、確実にtransformをFirefox3はサポートする。ただ、そもそもtransformとはなんぞやと思ってる方も多いとおもうので少し紹介しよう。transformとは主にボックスに対してscale(拡大／縮小)、skew(斜めへの傾き)、translate(移動)、rotate(回転)、とそれぞれ指定ができる。これはマウスをのせた状態（hover）に対しても指定が可能。いままでは、このプロパティに関してはwebkit系のみがサポートをしていたが遂にmozillaもサポートサポートを始めたようだ。ただし、minefieldというプロトタイプのみだ。このプロトタイプは以下のURLからダウンロードすることができる。

minefield
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

さていよいよ肝心の書き方だが全てにvendor prefix(接頭辞)の-moz-をつけることになる。

まずはrotate(回転)

body{
-moz-transform: rotate(90deg);
}

※deg=degree(度)の略

これでウェブサイトが時計回りに90度回転する。非常に面白い機能だ。

transformには、他にも様々なプロパティが用意されている、SafariでもchromeでもそしてFirefoxのminefieldでも自由に試してみることができる。
確実にCSS3の時代はそこまできている。ただCSS3はまだ使い方というのはあまり、研究されていない。しかし研究をすれば使い方によっては人を驚かせるような素晴らしいUXを提供することができる。常に先をみてCSSを楽しもう！

※-moz-に関してはmozillaのブラウザーの開発者であるRobert O’CallahanがmozillaのWebTechブログにて最近ではOKと述べているので使用の是非についてはいまさら議論の余地はないだろう。

• 参考
  
  http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined
  

と言ってもリリースはもう少し先のようだ。
だがmozillaの開発メンバーであるJohn DaggetsはMinefieldというWebfontsを使えるバージョンをついに紹介した。いままでデザイナーはユーザーのPCにインストールされているフォントしかウェブサイトで利用することができず見出しに画像を利用したり画像置換を利用して好みのフォントをウェブサイトでは表示してきた。

続きを読む

ついに、その時がきたのか！GoolgeがGoogle Chromeと呼ばれる独自ブラウザーのリリースを9月1日にブログ上で発表した。Google blogscopeには38ページにも昇Scott McCloudが描いた漫画とともに機能が紹介されている。『Safari』や『Android』、『Nokia N60』などでおなじみのWebkitを元にして開発されたGoogle Chromeはいくつかの魅力的な機能を搭載してあるので正式に9月2日（米国西部時間）に発表される前に簡単に紹介したい。

続きを読む

まだ正式にリリース日は決まっていませんが、既に Safari 4 Developer Preview が、開発者の手元には届いているそうです。ユーザーインターフェイスには大きな変化はないかもしれませんが、ウェブで様々なアプリケーションを利用している方にとって嬉しい機能が幾つか実装されています。もちろん、ウェブデザイナーや開発者は注目したい部分が幾つかあります。

• HTML 5 サポート
• グラデーション、マスク、反射 といった表現が CSS だけで可能に
• JavaScript と CSS で図形を描写出来る <canvas> のサポート
• SquirrelFish の実装で JavaScript の処理速度が 1.6 倍
• データをローカルに保管することが出来るのでオフラインでウェブアプリケーションが利用可能に
• リッチインターネットアプリケーションのアクセシビリティ対応の仕様である WAI-ARIA に準拠

続きを読む