TweetMac OS Xのインターフェースデザインは、コンピュータのユーザーエクスペリエンスの歴史に影響を与えているであろうと考えるている人は、少なくとも私だけではないと思います。 そこでAppleから発表されて大分たちますが、次期Mac OSX Lionの既に公開されている幾つかのスクリーンキャプチャからうかがい知ることができる、Finderの表示モードを切り替えるボタンについて少し考察をしてみます。

Tweetこの記事は、net-kit.comの10 CSS3 Lightbox Alternativesの説明および、感想で構成されます。 昨今のウェブサイトでは、当たり前のように写真やビデオ、htmlなどを新規にウィンドウを開くことなく、ページに重ねて表示されるLightboxといわれるJavascriptのライブラリが使われています。 また、html5やcss3など新たな技術の登場により、これらを利用した新たなLightboxの実装方法が可能となりました。ここでは１０この例を紹介します。 1.Drop-In Modals CSS3のアニメーション機能を利用したシンプルなLightboxです。 このLightboxでは、JSを使ってモーダルウィンドウとなる要素に”show”クラスをadd/removeさせているだけです。アニメーションの部分はcssでのみ指定されています。 drop-in-modals内82行目 div#simpleModal.show { opacity: 1.0; z-index: 100; -webkit-transition-duration: 0.25s; } div#fancyModal.show { -webkit-transform: translateY(-80px); -moz-transform: translatey(-80px); } 2.CSS3 – Clickbox – Gallery 隣接セレクタを使って複数の画像をページ切り替えできるギャラリタイプのLightboxです。 マウスポインタがCLOSEもしくは、ウィンドウの外にでると非表示となります。 3. Futurebox, lightbox without the javascript and target pseudo-class Javascriptを使用せず、CSS3の:checked擬似セレクタを使用して表示非表示を切り替えるLightboxです。 4. Lightbox effect with Tabindex and CSS3 demo:http://www.creativejuiz.fr/trytotry/lightbox-with-tabindex-and-css3/ HTML5とCSS3のみでアニメーションもついたLightboxです。:focus擬似セレクタを利用して、tabでフォーカスされると拡大表示されます。 Safari5,Chrome9.0.572.1 devでCSS3のトランジションを確認しましたが、scale1.8による拡大縮小のアニメーションに若干違和感がありました。このあたり、今後活用するためには解決しなければならない部分だと思います。 また、ブラウザがバックグラウンドになるとFocusが外れるためLightboxが閉じる部分もCSS3の新しい部分だと思います。 5. Pure CSS3 Lightbox Javascriptを使わずCSS3だけで実現したLightboxです。これもWebkit系のブラウザだとアニメーションが付きます。 違うバージョンとして、Pure CSS Toolbarというものも紹介されています。 HTML5 Pure CSS Toolbar 6. Full CSS3 Lightbox これもCSS3のみで実現しているLightboxです。 Webkit系のブラウザだと非常に美しいフェード処理がされます。4. Lightbox effect with Tabindex and CSS3と比べても大分スムーズなアニメーションである原因は要検証です。 7. [...]

Tweet日本代表がんばれということで、こんな記事を書いてみました。 ワールドカップについて、Twitterでは公式でも応援サイトが公開されています。 World Cup 2010 – What’s Happening? このページでは、各国または試合中の対戦国同士のハッシュタグが付いたつぶやきをリアルタイムで平行してみれるというシステムです。 また、CNNでもTwitterの幾つかのキーワードを元に選手別、チーム別、トピックス別の毎分の数量を統計し面積の大きさで、なにが話題になっているかが識別できる仕組みになっています。 South Africa 2010: World Cup Twitter Buzz これらのサイトは、試合を観戦しながらつぶやくことで、同時に観戦している人たちの声を聞くことで楽しむタイプのサイトです。 また、英国のGuardian紙では World Cup 2010 Twitter replay というサイトが公開されています。 このサイトは試合が終了後、試合のタイムラインに試合中の得失点、選手の入れ替え、レッドカードやイエローカードなどがマークされ、それらの試合中のイベントとTwitter上でつぶやかれたハッシュタグの数量の変化をバルーンの集合で図示化され、まさしく試合を振り返ることができます。 このブログを参考に記事を書きました。 information aesthetics.

TweetSix Apartが提供する法人向けのブログ・ホームページサービス「TypePadビジネス」にMovable Typeで使えていた幾つかのテンプレートタグが追加されました。 「TypePadビジネス」はコンピュータが苦手な人でも、迷わずブログ記事が書けるようシンプルな画面デザインになっています。 その反面、テンプレートをカスタマイズして、より幅広い表現を実現することには制限がありました。 それを打破する一歩となるのが、今回導入されたMTIfとMTSetVarBlockです。 カテゴリ毎に違ったスタイルを適用 たとえば、ニュースブログで複数のカテゴリが存在する場合、セミナーの参加者を募集するために、セミナーカテゴリの記事を強調したいという要望があります。 過去の『TypePadビジネス』では、かなりトリッキーなやり方をするしかありませんでした。しかし、先程紹介した新しいテンプレートタグMTIfとMTSetVarBlockが使えればかんたんに実現することができます。 メインインデックスの一覧部分を表示しているテンプレートモジュール：entry-list-stickyを追加します。 このテンプレートモジュールの中に エントリーのカテゴリーを取得する 取得した情報から条件分岐を作り特定の条件でhtmlタグにクラスを付ける というコードをモジュールに追加することで、カテゴリ名を条件にして、記事のボックスにseminarというクラスを追加します。あとはスタイルシートでseminarクラスに枠線をつける指定をするだけで、セミナーのお知らせにだけ枠線を付けることができました。 モジュール全体は以下のようになります。 "" » | () |>MTElse<| () <MTIf name="categoryLabel" like="セミナーのお知らせ" > <MTElse> </MTIf> "" » | () || () « | » うちの会社でもこんなことやってますので、ご興味がありましたら御覧下さい。

TweetReadWriteWebでCode-Free Augmented Reality in Under 5 Minutes [VIDEO]という記事がしょうかいされていたので、やってみました。 使用する開発環境（とあえて言っておく）は、 Quartz Composer です。 はじめる前に まず、Quartz Composerにプラグインをインストールする必要があります。 http://y30.net/pg/plugins/qc/ 上記、URLより以下のソースコードをダウンロードします。 SingleMarkerDetector MatrixToParams SingleMarkerDetectorは、ARToolKitを使ってカメラから取り込んだ映像からあるパターンの角度や位置座標を出力するオブジェクト。 MatrixToParamsは、SingleMarkerDetectorが出力するマトリクス情報を、XYZのアングルと位置に分解して出力してくれるオブジェクトです。 ダウンロードできるファイルはXcodeプロジェクトになっているので、Xcodeで開き、アクティブな構成をReleaseに、アクティブターゲットをBuild & Copyにしてビルドします。 これで、Quartz ComposerのPluginsフォルダにコピーされ使える状態になります。 さっそく拡張現実 準備が整ったので、さっそく拡張現実します。 Quartz Composerを開き、カメラの映像を取り込むVideo Inputと、それを表示するBillboardを配置し接続します。 次に、カメラから得られる情報からある図形をトラッキングするためにSingleMarkerDetectorを配置し、トラッキングした情報をQuartz Composerの3Dオブジェクトをコントロールするために都合の良い形に変換するMatrixToParamsを配置し接続します。 これでAngleXYZとTranslationXYZが得られるので、3D Transformationを配置し、それぞれ対応するインプットに接続します。 あとは、Quartz Composerの流儀にしたがって3Dオブジェクトを設定していくだけです。 やってみて QuartzComposerは3Dのオブジェクトの扱いが非常に容易なので、一度実践してみると応用パターンがいろいろ思い浮かび、楽しいことが出来そうです。 SingleMarkerDetectorには、トラッキングできる画像パターンが２種類あります。（パターンについてはソースコードの中にPDFが入っています。） 二つのパターンを使い、それらの関連性を利用したもの（例えば２つのパターンの中間に揺れ動くオブジェクトを浮遊させるような）や、得られるパラメータを利用してパーティクルをコントロールするなど、ぱっとした思いつきでも夢が広がりました。 ReadWriteWebで紹介されているムービーはこちら (via:http://www.readwriteweb.com/archives/code-free_augmented_reality_in_under_5_minutes_video.php)