あなたのFirefox「くすんで」ない？モニタプロファイルを見直した方がいいかもよ？

windows mozilla

どうも、Firefoxのレンダリングエンジンがカラープロファイルに対応してから、会社のPC(いまだにWindowsXP)でWebの画像をみるとどうも色あせて表示される現象が発生するようになっていた*1。

本来「白」で表示されるべきところ、自分の目には「セピア色」がかって見えていた。IEなど他のブラウザでは普通に表示されていた（少なくとも自分の目にはIEの方が普通の色に見えた）

いろいろ調べてみると、どうやら自分のPCに設定されているカラープロファイルがよろしくない状態なのが原因っぽい。

とりあえず、「画面のプロパティ」で「既定のモニタプロファイル」ってやつをいじってみたら比較的ちゃんと表示されるようになった。カラープロファイルを理解していないので本当にこんなやり方でいいのかわからないけど...

既定のモニタプロファイルの変更

設定変更方法は以下のような感じで行った。

Firefoxは起動時にこの既定のカラープロファイルを読み込んでいるらしく、この設定を変更したら再起動する必要がある。

もう一つの選択肢（カラープロファイルを読み込まない）

もう一つの選択肢として、レンダリングエンジンのカラーマネジメントの機能をOFFるという方法もある。

Discoloured whites • mozillaZine Forums

カラーマネジメント機能を無効化するには、about:configを開いて、gfx.color_management_modeの値を 0 にすればよい。

この設定値は、以下のようになっている。*2

  • 0 カラーマネージメントなし
  • 1 常にカラーマネージメントする
  • 2 タグ付きの画像のみカラーマネージメントする（デフォルト）

カラーマネージメントなしにすることでも、普通（に見える）の色で画像が表示されるようになる。

参考

*1:同じレンダリングエンジンを使っている Thunderbird でも同じ現象

*2:ソースコードより http://mxr.mozilla.org/mozilla-central/source/gfx/thebes/gfxPlatform.h#120

「少しの手間で大きく変わる、細部にこだわったWebデザイン」をできるだけCSSでやってみた

css

【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス

を読んで、「CSSだけである程度できそうだな」と思ったのでやってみた。

デモページ

とりあえず完成品が見たい方は、ここ

まず基本となるHTMLを用意する

とりあえず、角丸四角形でボタンらしきものを作る。

<html>                                                                                                                                               
  <head>
    <style type="text/css">
       .buttonBase {
        position: relative;
        width: 300px;
        background-color: #3699D0;
        text-align: center;
        border-radius: 10px;
        cursor: pointer;
      }
      .caption {
        color: #02659C;
        font-family: impact;
        font-size: 40pt;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="buttonBase">
      <span class="caption">
        Download
      </span>
    </div>
  </body>
</html>

まず、この状態からスタートする。

グラデーションを加えてみる

以下のようにボタンの下地にグラデーションを追加してみる。Mozilla系とWebKit系書き方が異なるので書き分けている。background-color: を消しておかないとグラデーションが反映されないので注意。

      .buttonBase {
         :

        /* グラデーションを加える */
        /* background-color: #3699D0; */
        background: -moz-linear-gradient(top, #56B9F0, #3699D0); /* Mozilla系 */
        background: -webkit-gradient(linear, left top, left bottom, from(#56B9F0), to(#3699D0)); /* Webkit系 */
      }

グラデーションは控え目にしたほうがエレガントな雰囲気が出る。

参考

CSS3 グラデーション（gradient）の指定方法 | CSS Lecture

1pxのラインを加えてみる

ボタンのボーダーに1pxのラインを引いて。ボーダーの内側に box-shadow を使ってハイライトを加える。

      .buttonBase {
         :
        /* 1pxのラインを加える */
        border: 1px solid #02659C;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
                    inset 1px 0 0 rgba(255, 255, 255, 0.3),
                    inset -1px 0 0 rgba(255, 255, 255, 0.3),
                    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
      }

ハイライトもあまりくっきりとしてると「わざとらしさ」が出るので、半透明にして自然な感じにする。上下だけでなく、左右にも気持ち少しだけハイライトを加えるのが隠し味となっている。

参考

CSS3 text-shadow box-shadow の使い方 | CSS Lecture

ボタンにドロップシャドウを加えてみる

:after 擬似要素を使って楕円形の影をボタンの下に加える。

      /* ドロップシャドウを加える */
      .buttonBase:after {
        content:"";
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 80%;
        height: 50%;
        border-radius: 100%;
        box-shadow: 0 0.3em 0.7em rgba(0, 0, 0, 0.5);
        z-index: -1;
      }

どうなっているのか分かりにくいかもしれないので、分かりやすくした画像を貼っておく。

このように、ボタンの裏側に楕円形があってそのドロップシャドウがボタンの端から覗いている感じになっている。

参考

CSS3 角丸を表現する border-radius | CSS Lecture

ノイズ...

さすがにCSSだけでノイズを生成することはできないので、パス。

レタープレス効果を加えてみる

最後の仕上げとして、ボタンのキャプションにレタープレス効果を加える。これだけでグッと見た目が引き立つ。

      .caption {
         :

        /* レタープレス効果を加える */
        text-shadow:  0 -1px 0 #000,
                      0 1px 0 rgba(255, 255, 255, 0.6),
                      1px 0 0 rgba(255, 255, 255, 0.3),
                      -1px 0 0 rgba(255, 255, 255, 0.3);
       }

「1pxのラインを加えてみる」と同様、左右にも少しハイライトを加えている。

参考

Create a Letterpress Effect with CSS Text-Shadow


これで完成。

最終的に出来上がったソースコードは以下のような感じ。

実際にどのように見えるかは、デモページで。

参考ページまとめ

最後に、参考となったページをまとめておく。

追記:2011/08/11

まさしく同じようなことをやっている方が...
「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 | Ginpen.com
こちらの方は、「ノイズ」をPNGのアルファ値で表現しています。確かにその方法を使えばData-URIスキームでcss上で表現可能だったか...。

nanowwwを使ってSSL経由でBasic認証を通してリクエストを投げるサンプル

nanowww c++

書いてみた。
nanowwwを拡張してBasic認証のためのヘッダを送信する BasicAuthClient というクラスを定義してみた。
コンパイルには OpenSSL が必要。

以下のようにコンパイルする。 -DHAVE_SSLと-lssl,-lcryptoがミソ。

g++ -DHAVE_SSL -Inanowww -Inanowww/extlib -lssl -lcrypto nanowww/extlib/picohttpparser/picohttpparser.o basic_auth.cpp -o basic_auth

使っている OpenSSLの関数が古いのか、deprecated だという warning がいっぱいでるけど今は気にしないでおく。

参考

C++でいい感じでHTTPが扱えるライブラリnanowww使ってみた

c++ http

ずいぶん前に見かけてたけどすっかり忘れてた。cURLpp使うの結構めんどいと思ってたら nanowww というシンプルなライブラリがあった。

Big Sky :: picojsonとnanowwwを使って「関係ないbot」書いた。

Rubyとかスクリプト言語に慣れた身にはすごくしっくり来る使い心地。

まず、Gitで管理している自分のプロジェクトに submodule として nanowww を取り込む。

git submodule add https://github.com/tokuhirom/nanowww.git

さらに、nanowww自身も他のプロジェクトを submodule として参照しているのでそれらのソースを取得する。

cd nanowww
git submodule init extlib/*
git submodule update

これで必要なソースが揃った。そして nanowww を make する。いまいちこれで合ってるかわかってないけど、 

perl Makefile.PL
make

ソースがコンパイルされてテストが実行される。
いくつかテスト失敗したけど今は気にしないで置く。

サンプルで、以下のようなコードを用意して...


g++ -o hello hello.cc ../nanowww/extlib/picohttpparser/picohttpparser.o -I../nanowww/extlib

こんな感じでコンパイル。

picojsonと合わせて使うと、RESTなクライアントがC++で結構簡単に書けてしまいそう。

pitの使い方メモ（ちょっと詳しく）

ruby

pitがどういうものか、というのは以下のリンクを参照。

アカウント情報を管理するコマンド pit - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech

久しぶりに使うとすっかり忘れてたのでメモ

アカウント情報の登録

アカウント情報の登録はpit setコマンドで

$ pit set アカウント名

という感じで行う。アカウント名は任意の文字列。例えば、Twitterのアカウントの設定とかだと

pit set twitter.com

という感じになる。これを実行すると、環境変数EDITORに設定されているエディタが起動するので、そこに設定をYAML形式で記述する。
例えば、以下の用な感じ。*1

user: hoge
pass: fuga

テキスト編集後、エディタを閉じると ~/.pitフォルダ配下にその設定が保存される。

設定値の取得

設定値の取得方法は、Rubyのコードで

config = Pit.get('twitter.com')
p config['user']
=> "hoge"
p config['pass']
=> "fuga"

という感じでハッシュとして値が取得できる。

パラメタに:require => {}で設定されていない場合のデフォルト値を設定することもできる。

コマンドラインからpit getで取得することもできる。ただしターミナルに直接出力はできないようになってるので、

pit get hoge | less

とかコマンド経由で確認できる。
~/.pit 配下の xxx.yaml ファイルを直接開いて確認することもできる。

参考

*1:デフォルトで'--- {}' とか出力されるが、気にせず削除していい