Safari 3.1 と @font-face

どうも思うような動きになっていなくて、これが正しい動作なのかもよくわからないのですが、とりあえず自分のやりたい事ができる方法がわかりました。

やりたいことは Osaka bold が指定された場合の表示が汚くなるので使用するフォントを変えてしまう事です。　次のように記述した独自のスタイルシートを用意して Safari の環境設定で指定して使用しています。

@font-face {
  font-family: "Osaka";
  src: local("Osaka");
}
 
@font-face {
  font-family: "Osaka";
  font-weight: bold;
  src: local("Lucida Grande");
}
 
body {
  font-family: "Lucida Grande","Hiragino Kaku Gothic Pro";
}

２つ目の @font-face で "Lucida Grande" を指定していますが、これで半角英数は "Lucida Grande" で日本語は "Hiragino Kaku Gothic Pro" にフォールバックされて表示されるようになります。　本当は unicode-range を使用して明示的に指定した方が良いのかもしれませんが面倒なのでやっていません。

bold の時だけ変えたいのですが、最初の @font-face が無いと normal の時もフォントが変わってしまいます。
２つ目の指定では、bold の場合は "Hiragino Kaku Gothic Pro W6" などと指定できた方が思い通りになりそうなのですが、そうすると "Hiragino Kaku Gothic Pro W6" をさらに太らせた表示になってしまいます。

どうなるのが本当なのだかよくわからないですし、思い通りにならないなという感じです。

Safari 3.1

CSS の @font-face が使用できるようになりました。　しかし期待した事ができませんでした。

font-weight: 指定をした時の動作がおかしいと思うのです。　それともこれが正しい動作なのでしょうか？　そんな事はないだろうと思うのですけれど…

レンダリングや JavaScript のエンジンを強化するだけではなく、セキュリティ関係やクッキー管理の機能強化もしてもらいたいです。　その辺りは変わりませんね。　サイト毎に簡単に制御できるようになってくれないと不便です。　ごちゃごちゃいろいろな機能をつけるよりもシンプルに行くという、Apple らしい割り切りなのかなとは思うのですけれど。

WebKit が CSS @font-face に対応

まだ feature branch の方だけですが、使えるようになりました。　早く Safari に組み込まれてほしい機能です。

例えば、Safari 3 では Osaka のボールドは表示が汚いですよね。　汚い表示を見たくない時に次の様に指定します。

@font-face {
  font-family: Osaka;
  font-weight: bold;
  src: local("Hiragino Kaku Gothic Pro");
}

この記述を書いたスタイルシートファイルを、環境設定の詳細にあるスタイルシートの設定で指定すればデフォルトで Osaka ボールドはヒラギノ角ゴ Pro で表示されるようになります。

@font-face 使用するとけっこう自由にフォントを指定できる様になると思います。

汚いボールド表示の方も改善してほしいですけれどね。

Safari の Windows 版

これは期待ですね。　文字表示が Mac OS X と同等に美しくなってほしいです。

文字が美しいのは OS の機能だから Windows 版ではだめだと思ったのですけれど、Safari の中に Font smoothing の設定があったのです。　ということは、独自に描画していると思われますよね。

残念ながらまだ完成度が低いようで、日本語の扱いに問題がありすぎて実用にはならないような感じです。　早く完成度を上げてもらいたいですね。

検索機能を変更

Google を使用してサイト内の検索ができるようにしていましたが、条件の指定を変更しました。

以前はサイト指定でディレクトリ部分の指定はできなかったのですが、いつの間にかできるようになったようです。　リクエストも出していたのですが対応してもらえたのはうれしいですね。

そのため、ディレクトリまで指定しタイトルの条件は外しました。　確実な条件指定ができるようになりましたし、すっきりしました。

Safari とカラーマッチングの問題

Surfin' Safari に Color Spaces という記事が出ていました。

これを読むとよく検討されていることがわかりました。　その通りだと思います。

何かうまい実現方法はないのでしょうか？　ウインドウ毎（実際にはもう少し細かい単位）にカラースペースを設定できるような機能があればいいのになと思うのですけれど。　ディスプレイ毎に設定できるのをもっと細かく設定できるという感じで。　そうすれば plug-in が描画する色も変換して表示できると思うのですけれど。　なぜそういうことができないのでしょうかね。

Safari のボールドとイタリック表示

最近 WebKit の Nightly Builds がダウンロードできるようになりました。
http://nightly.webkit.org/builds

これを使用すると、日本語のボールドやイタリック表示の問題が改善されています。
太いウエイトのフォントがない場合には描画処理で太くなります。（きれいな表示だとは言えませんが）　描画処理で斜体にもなります。

Safari も日本語の扱いにはいろいろな問題がありましたが、少しずつ改善されて来ているのでうれしいですね。

Mail の方の改善もお願いしますよ！　Apple さん！

Safari とカラーマッチング（実験版）

WebKit を改造して、文字、バックグランド、プロファイルが埋め込まれていない画像を sRGB として表示するように変更したものを作成しました。　Mac OS X 10.4 上の Safari 2 用です。

WebKit+sRGB20050906.dmg (2,292,537)

実際のところどうなの？ と興味がある方は試してみてください。　実際に違いを見てみるのが一番わかるでしょう。

こんな程度の差など気にしないというかたの方が多いのかもしれませんけれど…（苦笑）　なるほどちゃんと色を合わせた方がいいのだなと思っていただける方もいる事を信じています。　特に Apple の方々には！ :)

GIF 画像にも対応できたので公開してみる事にしました。　完成度の高いものは期待しないでください。　これはあくまでも実験的なもので、表示の違いを見てもらえるようにしてみたものです。

この改造版 WebKit を使用して Safari を起動するシェルスクリプトが入っています。　手抜きな方法ですみません。

色に関する参考資料
HTML 4.01 Specification 6.5 Colors
http://www.w3.org/TR/html4/types.html#h-6.5

A Standard Default Color Space for the Internet - sRGB
http://www.w3.org/Graphics/Color/sRGB

CSS3 Color Module 3.3. ICC Color Profile: the 'color-profile' property
http://www.w3.org/TR/2003/CR-css3-color-20030514/#icc-color

Safari とカラーマッチング（画像）

WebKit の改造で、プロファイルが埋め込まれていない JPEG ファイルを sRGB で表示できるようになりました。

WebImageData.m 内で kCGImagePropertyProfileName の値が取り出せない画像は、CGImageSourceCreateImageAtIndex の後に CGImageCreateCopyWithColorSpace で sRGB を設定するという方法です。

しかし、これでは GIF 画像の場合うまくいきません。　Indexed Color Space をどのように sRGB 化すればいいのか…？？

それと、CGImageSource から CGImage を作る時に sRGB を設定できないものなのか…？

難しいようです…

Safari とカラーマッチング

Safari が出た時からずっと、Apple 製のブラウザであれば色にもこだわってほしいと思っていました。

Web でも sRGB が標準になっていますが、Mac の標準は sRGB ではありません。

Mac OS X 10.3 になった時から、プロファイルの埋め込まれた画像についてはカラーマッチングが行われるようになりました。

しかし、Safari にはプロファイルが埋め込まれていない画像や、文字やバックグラウンドに指定された色はデフォルトで sRGB として扱うようにする所までやってほしいと思っていました。

その辺りのところを公開されている WebKit のソースで確認してみたいと思っていたのですが、最近ようやく行うことができました。

どうやら何も考えていないわけではないようです。　以前の WebCore ソースにはなかったコードが入っていました。　COLORMATCH_EVERYTHING を true にしてコンパイルすると何カ所かで動作が変わるような記述がありました。

しかし、それは sRGB への対応ではなく Generic RGB としているだけでした。　そのような対応ならやらなくてもいいと思います。

自分で改造を行ってみたところ、KWQColor.mm を少し変える事で、文字とバック部ラウンドの色を sRGB として描画させる事ができるようにはなりました。

しかし、プロファイルが埋め込まれていない画像のデフォルトを sRGB にする事は、どこでどのようにすれば良いのかまだわかっていません。　たぶん、WebImageRenderer.m か WebImageData.m の辺りなのだろうと思うのですが。　どうにか対応させてみたいものなのですけれど。

CSS3 では color-profile という指定が可能になるようです。　しかし、それが実装されるのはいつになる事やら…　現実に使えるようになるものなのかも…？？？

検索機能を付けました

サイト内の検索ができるようにしました。　と言っても Google を使用しているだけですが。

自分のサイトのみに絞り込むためには、Google のサイト指定でドメイン名だけではなく、ディレクトリの部分まで指定できるようになってほしいですね。　それができないのでタイトルの条件も入れました。　完全ではありませんが、これで問題ないでしょう。

ココログだけはユーザー毎のドメイン名がもらえるわけですが、これをアット・ホームページでも利用できるといいと思うのですけれどね。　いろいろな面でうまく統合してほしいものです。

引っ越し

NIFTY のメンバーズホームページからアット・ホームページへの移行作業をやっと行いました。

http://member.nifty.ne.jp/arai/ 以下にあった内容は http://homepage3.nifty.com/arai/ 以下に移りました。

作業を始めたら容量オーバーしていることに気がついて、少し急ぎで作業を行いました。
最近、写真のサイズを 600x450pixel にして数も増やしたことが容量を大きくする主な原因だったので 400x300pixel と小さくすることにしました。

今 20MB は少ないですね。　NIFTY さん、容量を増やしてください。　ココログの 30MB とのバランスも悪いと思います。　とりあえず両方あわせて 50MB まで使えるようにしてほしい。

ベクターに置いているものはそのままにしました。　変更が少ない方がいいと思ったので。

毎日新聞のサイトが MSN に…

毎日新聞のサイトが MS の手に落ちたようです…

Mac では Sherlock からニュースを見る事ができなくなっています。

引っ越しの検討

NIFTY がメンバーズホームページを終了するので、引っ越しをしなければならなくなってしまいました。

アット・ホームページへの移行はいいのですが、URL が変わってしまうのです…。　URL を変えずに移行できるようにしてくれないのはどうも納得がいかないところなのですが。

どうせ変わるなら NIFTY ではなくてもいいですよね…。　どこかいいところはないか…。

この際、ベクターのところと分けておいてあるのも見直した方がいいか。

いろいろと検討が必要になりました。　　ううむ…

Mac 用 IE と UTF-8

Mac 用の IE (Internet Explorer) で charset=UTF-8 のページを表示した場合に、フォームのテキスト入力で文字化けをしてしまうようです。

ココログも UTF-8 を使用しているのでコメントの入力が文字化けしてしまいます。
詞織さんの「コメント文字化けMAC＆ＩＥ」を読むまで気付いていませんでした。

試した所、IE の環境設定で、文字セットが「ユニバーサル文字（UTF-8）」の場合のフォントを日本語のフォントに設定しておけば解決できるようだということが分かりました。

これで特に対策を行っていない所でも問題はなくなるのではないでしょうか？

ここは大丈夫なようでした。

ここではあえて具体的なフォント指定を行っていません。　皆さんのお好みのフォントで読んでいただけるようにということで。

GoLive CS

Adobe GoLive CS にアップグレードしました。

スタイルシートを扱う機能の改良が一番良いところではないかと思います。

まだ少ししか使用していませんが、気付いたことを書きます。

スタイルシート

カーソルのある位置で適用されているスタイルが表示されるのは参考になってよいかなと思いました。

新規ページを作成した時の状態

スタイルの適用やエディタで、見本が表示されるのも分かりやすくてよいかもしれません。

プレビューでの表示がかなり良くなりました。　しかし、環境設定のフォント設定は反映されず、レイアウトモードとは違う表示になるようです。

レイアウトモードでは、フォント設定のセリフフォントがデフォルトで使用されます。　これを変えることは簡単にはできなそうです？　Web 設定のプロファイル設定で指定できそうですが、あの辺りは説明がほとんどない所です。

便利になったと思うのですが、やはりスタイルシートの仕組みが分かっていないと使いこなせないと思います。　GoLive とは別でも良いのですが、もっと誰でも簡単に使えるようなものもできると良いと思うのですが。

カラーマネージメント機能

カラー設定が環境設定とは独立しました。　Photoshop のカラー設定と似ているのですが、どうも扱いが異なるようです。

例えば、作業用として sRGB を指定します。　このとき、sRGB のプロファイルを埋め込んだ JPEG ファイルを表示すると色の変換は行われないようで、sRGB の色で表示されません。

作業用としてディスプレイと同じプロファイルを指定すると、sRGB のプロファイルを埋め込んだ JPEG ファイルは sRGB の色で表示されるようになります。　しかしこの時、表示の基本プロファイルで Windows 用のブラウザを選択すると sRGB への変換が２重に実行されてしまうのだろうと思うのですが、変な色で表示されてしまいます。

どのような使い方を想定しているのかどうもよく分かりません。

アップロード

更新したファイルをアップロードする時の、更新されたファイルの確認がとても速くなったようです。

PDF 出力

html の PDF 化はいまいちです。　レイアウトモードと同様になります。　改善されたプレビューモードのようになればいいと思うのですが。

怪しい動作

前のバージョンが出た時はかなりひどい状態だったので気になりますよね。（苦笑）
まず最初に設定を行う所で、おかしなものを見つけました。

一番右の三角です。　クリックしても反応はありません。　スタイルシート編集のウインドウでも同様なものが表示されます。

JavaScript エディタで編集中のインスペクタ表示で、オブジェクトが何もない状態になることがあります。　スクロール位置の制御が問題のようです。　カーソルキーの上下を押すと出てきます。

前のバージョンでもそうなのですが、一番下に行を追加した時にカーソルがウインドウからはみ出して表示されない状態になっても自動的にスクロールしてくれません。　これはとても不便です。　ここが修正されないのは納得できませんね。

動作速度

重いと思います。　特によく使用するテーブルで、マウスクリックによってカーソルを移動する時の反応が遅く感じます。　最近の高速な機種を使用していれば気にならないのかもしれませんが。