Skype for Mac のチャットテーマを作って遊ぶ -- テーマコンテスト編

「Create the new Skype for Mac chat style」  なるコンテスト（2011/4/8 締切）が開かれる．
このコンテストは，Skype のチャット画面のデザインを公募し，次のバージョンに搭載されるテーマを決めようというもの．

まず，参加者は，コンテストのサイトからテンプレートがダウンロードし，それを元にすればよい．
そのテンプレートのファイル構造は，以下のようになっている．

テンプレートの中身

ここから分かるように，Skype チャットの UI 部分は実は HTML + CSS でできている !!
これはかなりデザインの自由度がありそうということで，とりあえず「Read Me.rtf」を読む．要約すると，このコンテストでは，
・index.html はいじるな．
・css/main.css をいじれ．必要な要素については，このファイルに列挙してある．
・画像ファイルとかは，gfx に入れろ．
ということが書いてある．
それに従って，とりあえず main.css をいじりはじめるのことにするが，Webkit のレンダリングエンジンを使っているので，CSS3 を使える（コンテストのサイト参照）．


それでは，CSS3 アニメーションを試してみよう．
index.html には Skype で使っているエレメントが列挙されているので，それを参考にする．

まず，トピックを右から左に流れるようにしてみよう．
トピックの文字部分は

    #conversation .topic div.body

なので，

    #conversation .topic div.body {
        font-weight: bold;
        color: rgba(0, 0, 0, 0.30);

        /* ここ以下を追加 */
        overflow-x: -webkit-marquee;
        width: 500px;
        margin-left: auto;
        margin-right: auto;
        -webkit-marquee-repetition: infinite;
    }

というようにしてみる．（main.css の 646 行目付近）
main.css を保存して index.html をブラウザを開くとちゃんと適用されている．

トピックが右から左に流れる

次に，メッセージの背景を点滅するようにしてみよう．
メッセージといっても，既読のメッセージ，新規メッセージなど色々なエレメントが用意されている．今回は，

    #conversation .message div.body

で指定されるメッセージについて，変更してみた．

    #conversation .message div.body {
        padding-top: 4px;
        padding-right: 127px;
        color:#000000;
        background-color:#ffffff;

        -webkit-animation-name: 'anime1';
        -webkit-animation-duration: 2s;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction:alternate;
    }
    @-webkit-keyframes 'anime1' {
        0% {background-color:#ffffff;}
        100% {background-color:#0000ff;}
    }

これは，main.css の 348 行目付近．
見やすくなるわけではないが，ちゃんと動いていることが確認できた．

メッセージの背景が点滅する

以上のように，コンテストでは CSS3 使ってかなり自由度高くデザインを考えることができそうだ．
どういったデザインが見やすいのか，よく考えて応募してみよう．


ただ，せっかく Webkit を使っているので，もっと機能的な追加のために，Javascript を書き替えたいところ．
例えば，ユーザ毎にメッセージをまとめるとか，メッセージにが書かれるごとに処理を追加したり．．．

次のエントリでは，そっちのほうについて書いてみよう．