九十九電機ロゴ  125x125  黒 TSUTAYA online  トレンドマイクロ・オンラインショップ  スカパー! レンタルサービス

Spotlightのカスタマイズ、あるいは選択されたメニュー項目の描画

delicious はてな この記事をクリップ! | 2005年05月05日09:03 | 編集

 Mac OS X 10.4上でguiKitを作成する場合、Spotlight関連リソースの収納場所を探すのに苦労しそうですが、大きく分けて3ヶ所からなります。

Elements > Finder > Spotlight Get Info Window
 (「情報を見る」ウインドウで示される、Spotlightコメント部分)

Elements > Menu Extras > Spotlight
 (ルートメニュー右端のSpotlightアイコンと、プルダウンされたメニュー部分)

Elements > Spotlight Results
 (Spotlightウインドウ。 検索結果をウインドウとしてティアオフしたコンテンツ部分)



Spotlightに関してはShapeShifter側の為なのか、様々な制限が設けられており、例えばルートメニュー右端のアイコンはリサイズ出来ません。 このリソースは横幅46pxあり、右の数pxはマージンです。 このマージンを削除する事は許されません(ShapeShifterは不具合を察知してアクアのアイコンを描画するでしょう)。

また、そこからプルダウンされたメニューには検索結果のダイジェストが表示されますが、背景に注目して下さい。 透過しておりますがこれをキャンセルする事は出来ず、またその背景パターンは独自リソースです(左右別々のリソースです)。

また、ShapeShifter 2.1はまだバグが残っているらしく、それはこのSpotlightにもあります。 検索結果をメニューではなくてウインドウで表示した場合、ヘッダーはそのデザインを変更しているのであれば当然に結果が反映されなければなりませんが、時としてアクアが描画されてしまう事があるようです。 またこれはSystemUIServerの再起動では戻らず、guiKitを切り替え直す必要があります(それで確実に不具合が解消されるかはわかりません)。

しかしながらこれは今後の開発において克服される事でしょうし、作者はこの不具合を把握している筈(フィードバックしました)ので今は目をつむるとして、これから書くのは恐らくシステムのバグに由来するであろう不具合です。

このような画像を作ります(グラデーション部分のみ)。 Spotlightにおいて選択されたメニュー項目は、MenuEnhancerを用いている場合でもデフォルトのそれが用いられます。 少々例が複雑ではありますが、MenuExtrasのルートメニューでの選択されたメニュー項目がデフォルトのそれを用いるのに似ています。 独特の描画体制なのでしょう。 統一されていないGUIの隠れた代表とも言えます。

さて、結果はこのようになります(クリックして原寸でご覧になれます)。

普通、選択されたメニュー項目の背景は、選択箇所がメニュー上のどの部分にあっても、常に描画位置は定まっております。 ベタ塗りの単純なデザインを使わないguiKitデザイナーはこの点に注目している筈です。 詰まり、(0,0)に赤い点を置けば、選択されたメニュー項目がメニュー上のどの位置にいようと、2番目だろうと4番目だろうと常にその(0,0)に描画されます。

ですがSpotlightの独自メニューではこのような描画がなされません。 上の画像をご覧下さい。 場所によってグラデーションの位置が異なっているので一目瞭然かと思われます。 アクアの様な相当に単純なデザインであれば、またどの位置にスクロールされても必ず同じようなデザインを示すものであればこのような不具合に気をつける必要はありませんが、もしも凝ったデザインで連続性に乏しいものを考えている、または既に使っているのであれば、Spotlightについてデザインの再考が促されます。

余談ですが、背景というリソースは2つの描画方法があり、実はこの一見描画不具合に見えるものも、その描画方法の中の1つです。 昔のMac OS Xで、システム環境設定パネルのツールバーの高さが広かった頃、この描画方法が使われておりました。 ツールバーとコンテンツは確か同じリソースを用いてましたが描画箇所は別でありました。 この時システムはこれらを1つのパターンとしてきっちりとしたタイリングをさせたのです。 ですのでユーザーはこれらが別個のリソース描画だとは気付かなかったでしょう。

さておき、このSpotlightの問題の解決は、出来るだけ単純で連続性のあるデザインにするか、mesの様にMenuEnhancer用とデフォルト用とデザインを分けてしまう方法にあると言えます。 MenuEnhanerを入れた(Enableにした)場合、相当の場面でこのリソースが用いられ、デフォルトのデザイン...ここで言えば

Elements > Global Elements > Menubar and Menus > Menu Item Selected - Blut (or Graphite)

ですが、これは今回の様にSpotlight等でしか用いられません。


Search

Archives

Contact

■Administrator
padmacolors@gmail.com

■Akane Miyashita
akane.padma@gmail.com
イラスト、デザインのお仕事を承ります!

フィードメーター - padma colors / 

スカウター : padma colors / 

(C) 1997-2009 padma colors All Rights Reserved. Powered by Movable Type. RSS feed