Safariセミナー Tweet

昨日、Apple主催のSafariセミナーに参加してきた。

このセミナーを開催しようと思ったきっかけは、日本に於いて、Safariが各サイトの標準ブラウザとして明記されていなかったり、Safariに最適化されていないサイトがまだまだ少ないのではないかと感じていることが発端のようだ。（ADCワールドワイドリレーションズの上田氏談）

実は私もそれは感じている。以前電子入札システムの利用環境を調べた時の話・・・・

私の叔母が経営する法人が仕事の関係上、公共事業の電子入札を行う必要があるのでどんなパソコンがいいのか？
また、パソコンの設定方法や操作方法も分からないので助けてくれないかと連絡してきた時のこと。

ということで実際に利用することになる電子入札システムの仕様や前提などを調べて行くと・・・
なんと！、Windows2000/XPかつ、ブラウザはIE6 SP1以降のみとあった。。。

なんとかっこいい電子入札システムですこと。。。こんなに特定のクライアントOS／特定のWebブラウザ依存の強い公共事業の電子入札システムなんて・・・・なんだこりゃ！？　と言うのが第一印象だった。

とはいうものの電子入札しか行われなくなるので叔母はMacOSXではなく、Windowsしか選択肢は無くなってしまった。。。

公のシステムだからこそ、WindowsのIE6にのみに対応させるのではなく、Firefox2やMacOSXのSafariなどW3C標準に準拠した他のモダンウェブブラウザへの対応が必要なのではないだろうか？

以下、Windowsオンリーな公共事業電子入札システムの一例；埼玉県のサイトから引用
http://www.pref.saitama.lg.jp/A01/B300/ebid/index.htm#system

以下、関連サイト
http://www.cals.jacic.or.jp/coreconso/linkpage/core.pdf

新しい？　アーキテクチャがPDFに記載されているがマルチプラットフォームと書かれてはいるものの、クライアントとして利用できるのははWindowsだけ、WebブラウザもNetscapeとIEと書かれているが埼玉県のサイトを見る限り、IE6のみしか動作確認されていない。いやはや・・（少々引きつりながら）笑うしかない・・・・

そのうえ電子入札システムの使い勝手もかなり悪い！　なんでこうなっちゃうんだろう・・

http://www.cals.jacic.or.jp/coreconso/
http://www.jacic.or.jp/

随分前置きが長くなってしまったが本題のSafariセミナーへと話を戻す。

Safariに関わるいろいろなお話があったのだが、開発者の私としては、すでに多くのBlogでも取り上げられていたと思うがSafariにデバッグメニューを追加する方法や、SafariというかWebkitへアタッチしてデバッグ可能なDrosera（モウセンゴケ）と名付けられたデバッガのお話。

● まずは、Safariにdebugメニューを追加する方法

Terminalから以下のコマンドを実行してSafariを起動するとdebugメニューが表示されるようになり、開発者にはうれしい機能が利用できるようになります。

Last login: Wed Dec 12 05:22:48 on ttyp1
Welcome to Darwin!
G5Server:˜ discus$ defaults write com.apple.Safari IncludeDebugMenu 1

Safariを再起動すると・・・

Debug menuのweb inspectorを起動したところ。

debugメニューを取り除くには、Terminalから以下のコマンドを実行します。

Last login: Wed Dec 12 05:22:48 on ttyp1
Welcome to Darwin!
G5Server:˜ discus$ defaults write com.apple.Safari IncludeDebugMenu 0

● 次はDrosea

Droseaは、SafariのベースになっているWebkitにしかアタッチできないので、まず、http://webkit.org/から最新のWebkit Nightly Buildsをダウンロード。

ダウンロードした.dmgファイルを開くとSafariのようなアイコンとDroseaのアイコンが現れます。

次にWebkitアイコンをダブルクリックして起動後、Droseaアイコンをダブルクリックして起動する。
尚、Safari3とWebkitは起動してしまうと区別するのが難しいのでアイコンで区別してくださいね。DroseaがアタッチできるのはWebkitの方だけなので大丈夫だとは思いますが・・・・

Webkitへアタッチしたらコンテンツをリロードする。するとDroseaのDebug Windowにコンテンツの内容が表示されデバックできるようになります。

DroseaのDebug Window
DashCodeに似てるかな。。

---

おまけ
CSS3（現時点ではDraft)関連では、

background-size
min-device-pixel-ratio

参考URL見つけられず。Media Queriesに含まれるプロパティらしいが・・
http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708/
http://www.evotech.net/blog/2007/06/targeting-safari-30-with-css/

border-radius
border-image

現時点で各プロパティを利用するには

-webkit-を先頭に付加して

-webkit-background-size
-webkit-min-device-pixel-ratio
-webkit-border-radius
-webkit-border-image

にすればよいとのこと。尚、-webkitに替えて-mozを付加すればFirefoxでも利用できるとか。

また、自サイトなどの検証には、http://validator.w3.org/を利用するとよい。検証結果がOKであればSafariでも動作する。