Opera のスキン パート 1: 入門

By Makoto Mizukami

この翻訳文は、 数多世界氏の翻訳を本人の許諾の下一部編集し、また本人の依頼の元私名義で Dev.Opera に掲載するものです。
This translated document was originally written by amatanoyo. I've been requested to post this to Dev.Opera credited to me, with permission to edit the original translation.

はじめに

Opera のスキンに関する私の最初の記事では、スキンファイルをどこから入手するかや、それをどのように解凍し圧縮するか、ボタンや背景のタイル画像といった基本的な画像ファイルの置き換えの例などを含め、 Opera のスキンの世界について簡単にご説明しました。このシリーズではさらに深く掘り下げて、より実践的な例や skin.ini ファイルに関する詳細なガイド、要素のリファレンス、そして効果的なスキンを作成するためのいくつかの有益な情報や技をご紹介します。この記事の内容は Opera 9.5 用に更新されています。

このシリーズの全5記事には上のリンクからアクセスできます。順番に読む必要はありません — Opera のスキンに関する知識のレベルに関係なく皆様にとって有益な情報があるでしょうから、最も興味を持ったパートまで飛ばすと良いでしょう。(訳注: 他のパートの日本語訳はまだ提供されていないので日本語版にはリンクがありません。それらについては原文をご参照下さい。)

パート 1 の内容:

目次

• スキンファイルのありか
• スキンの圧縮・解凍
• スキンの構成
• skin.ini の紹介
• ネイティブ／非ネイティブスキン
• フォールバック
• 上位・下位互換
• 標準スキンのフォルダ／ファイルのリスト
• 画像のフォーマット
• アニメーション
• 画像の読み込み

スキンファイルのありか

スキンを編集する前に、まずは実際に使用するファイルを探しましょう。設置場所は Opera が動作しているオペレーティングシステムに依存しますので、編集したいスキン — デフォルトのスキンの設置場所は my.opera.com からダウンロード出来る他のスキンパッケージとは異なります。以下のリストは、さまざまなオペレーティングシステムにおけるスキンパッケージ別の設置場所を表しています。:

• Windows:
  • 標準スキン(Opera Standard のこと)は、 Opera のインストールディレクトリにある Skin にあります。大抵の場合 C:\Program files\Opera\Skin にあります。
  • ダウンロードしたスキンは profile\Skin に保存されています。 profile ディレクトリの設置場所を見つけるには、 “ヘルプ > Opera について” を確認しましょう。ショートカットとして、 Windowsメニューから “スタート > 名前を指定して実行” で %APPDATA%\Opera\profile\Skin と入力する方法によりディレクトリにアクセスできます。
• Linux/Unix:
  • 標準スキンは /usr/share/opera/skin にあります。
  • ダウンロードされたスキンは ~/.opera/skin の中に保存されます。 .opera は隠しディレクトリですので、直接パスを入力する必要があるかもしれません。
• Mac OS X:
  • 標準スキンは application パッケージの中にあり、通常は /Applications/Opera.app/Contents/Resources/Skin にあります(基本的に、アプリケーションフォルダにある Opera のアイコンを右クリック(または Control + クリック)し パッケージの内容を表示 を選択することで、 Opera の内部ファイルを表示できます)。
  • ダウンロードされたスキンは、 ~/Library/Preferences/Opera Preferences/Skin の中に保存されます。

Opera は標準スキンである standard_skin.zip と、例えば windows_skin.zip や mac_skin.zip と呼ばれるネイティブスキンを同梱しています。ネイティブスキンは画像ファイルを含んでいない代わりに、標準スキンからの画像を使用しています。ダウンロードしたスキンのファイル名は、通常スキン名に似たものとなっています。

スキンの圧縮・解凍

スキンは zip (.zip) で圧縮されたファイルです。 Opera がスキンを適用するとき、 Opera はパッケージからオンザフライで要求された画像を解凍し読み込みます — たとえ skin.ini から一回以上呼び出されたとしても、どの画像も一度だけ読み込まれます。

スキンを編集する前に、 WinZip や 7zip といった解凍ソフトを使ってスキンを解凍する必要があります。また、後で圧縮することになるので、特定の設置場所で解凍する必要はありません。まずは試しです — 標準的な Opera のスキンを見つけて解凍しましょう。 (Opera 9.5x で見られる)このパッケージのフォルダ構造は次の節で紹介します。

スキン編集後、 Opera が読み込めるようにもう一度圧縮する必要があります。 skin.ini や画像ファイル/フォルダをまとめてフォルダに入れ、このフォルダの全てのコンテンツを選択した状態で、新しい zip ファイルとして圧縮してください。

Opera のスキンを読み込むためには、 zip ファイルを上記で示したダウンロードされたスキンの格納されるフォルダに zip を置き、 Opera を再起動した後 "ツール > 外観の設定" でスキンを選択しなければなりません — その際表示されるスキンのリストからスキンを選択できます。また、もし zip ファイルのルートディレクトリに skin.ini がない場合、「続行することができません。お使いのOperaのバージョンにあったスキンを選択してください。」というエラーメッセージを Opera は表示します。

スキンの構成

skin.zip ファイルを解凍した後に、たくさんの画像が入っているフォルダと skin.ini という名前のファイルを確認できると思います。この ini ファイルはどのテキストエディタでも編集することができ、 Opera に表示されるスキン名や、ユーザーインターフェイスのあらゆる要素で使用される画像、テキストや背景色といったスキンのオプションを決められます。

フォルダにはスキンで使用される画像が入っています。フォルダはスキンの動作のためには必要とされていません — 全ての画像を zip のルートレベルに置くことも出来ます — しかし、全部を整理して扱うには重宝します。

Opera の標準スキンの内容は 画像について で説明します。

skin.ini の紹介

どのスキンのルートレベルにも見つけられる skin.ini はスキンを制御し形作るためのファイルです。このファイルにはメタ情報や諸設定、スキンで使用される各要素の定義がなされています。

ファイルの初めに、 [Info] と始まるメタ情報セクションが書かれているのがわかります。このセクションは以下のようになっているのがわかります:

[Info]
Name=Opera7 Standard Skin
Author=Opera Software
Version=3
Preview Image=

• Name と Author: 最初の二つのオプションには、スキン自体の名称とスキンの作成者を記述します。これらは、スキンのダウンロード後に表示されるダイアログや「外観の設定」ダイアログのスキンの一覧に表示されるものです。
• Version=: この項目はスキンで使用されている skin.ini そのもののファイルバージョンです。スキンのバージョンを表すものではありません。 Opera 9.5 もしくはそれ以上のバージョンに向けたスキンを作るのであれば、 3 と記述してください。
• Preview Image=: この項目は使用されません。この行を省略することもできます。

この次のセクションである [Options] は、スキンがネイティブであるかどうかといった一般的なオプションを指定するためのものです(以下を参照してください)。他のセクションではスキンの要素を定義します。これらのセクションについては、このシリーズの後程で触れます。

ネイティブ/非ネイティブスキン

Opera にはネイティブとノーマルの2種類のスキンがあります。2種間の基本的な違いは次の通りです:

• ノーマルスキンは、ボタンの画像、背景、ダイアログのボタン、スクロールバー、その他多くの要素に及ぶ、ほぼ全てを作れるカズタマイズ性に富んだスキンです。使用中のオペレーティングシステムや他のアプリケーションの外見とは無関係な独自のスタイルを Opera に適用することができます。

• ネイティブスキンはほとんどの要素についてオペレーティングシステムの要素を使用します。ボタンの画像だけがスキンで指定できます。背景やダイアログなどその他全ての要素は実行中のオペレーティングシステムによって描画されます。これにより、 Opera はよりそのオペレーティングシステムのネイティブアプリケーションらしい見栄えになり、他のシステム上のアプリケーションとの統一感が増します。

  ネイティブスキンは Opera が動作する全てのオペレーティングシステムでサポートされています。 Windows では自分が使用している Windows のテーマを元に、 Linux では Qt ツールキットから要素を取得しています。(訳注: Opera 10.60 以降では実行中のデスクトップ環境から取得しています。)

  スキンをネイティブスキンとして扱うためには、 skin.ini に以下を記入してください。これによってスキン読み込み時にしかるべくオペレーティングシステム ネイティブなオプションが自動的に設定されます:

  [Options]
  Native Skin = 1

  ネイティブではないスキンではこの行を省略できます。 Opera はデフォルトでネイディブではないスキンとして処理します。

フォールバック

使用しているスキンから要素を取得できない場合、空白を表示する代わりに、 Opera は自動的にフォールバックし “Opera Standard” にある要素を取得します。要素を定義する skin.ini に該当するものがない — スキンパッケージ内に該当画像がなくても心配無用です。

対応画像がないという状況が発生するのは、古いバージョン向けに作成された Opera のスキンを適用したり、最新の変更で新たにボタンが追加されたりといった場合です。対応画像がないために空白が表示されるのを防ぐため、 Opera は標準スキンが要素を含んでいるかを確認し、もし存在した場合その画像(アイコン)を表示します。場合によってはスキンとの統一感のないボタンが表示されることもありますが、画像がないだけで機能が失われないようにするには仕方ありません。

この技術はネイティブスキンにも使用されています、ネイティブスキンには一切のボタン画像が含まれていません — Opera がネイティブスキンを描画するために、実際のボタン画像は標準スキンから読み込まれるようになっています。

バックグラウンドやフォアグラウンドの画像(ボタン・ダイアログボタンなど)でフォールバックを使用できないようにするには、[Options] セクションの Fallback background と Fallback foreground の設定を使います:

[Options]
Fallback foreground			= 1
Fallback background			= 1

どちらの設定もデフォルトでは有効 (1) になっているので、デフォルトから設定を変えたい場合にのみこれらの行を追加する必要があります。

注意: 上位互換性がなくなるためこの設定の変更は推奨されません!

上位・下位互換

Opera は Opera 7 以降向けに作成されたあらゆるスキンを読み込むことができます。スキン中にある画像全てを表示し、もし該当セクションが無くても “Opera Standard” スキンから読み込むことができる前述の フォールバック機能があります。

追加画像、たとえば自作画像や新しいバージョンの Opera から追加された画像は、無視されます。そのような画像があっても、 Opera がそのスキンの読み込みを中止することはありません。

標準スキンのフォルダ/ファイルのリスト

新しいスキンの作成は、標準スキンのようなあらかじめ用意されているスキンを編集すると簡単に始められます。

以下のフォルダリストは Opera 9.5x に同梱されている標準スキンを元に作成されています。 MyOpera からダウンロードできる多くのスキンも同様のディレクトリ構造をとっていますが、全てにおいてまったく同じだとは保証されません。もし、編集しようとするスキンが標準スキンとは異なるディレクトリ構造をとっていたとしても、ファイル名を確認したり画像ビューアなどを利用したりすることで探しているファイルがどこに保存されているのかがわかります。おおよそスキン作成者は、合理的な表記法やファイル構造を使用していると思います!

フォルダ	説明	プレビュー
a/	キーボードナビゲーションで使用される、選択要素のハイライト。この部分は編集すべきではありません。
account/	Opera 9.5 では使われません。
anims/	スピードダイヤルや Opera Link など、様々な部分で使用されるアニメーション。
backgrounds/	ツールバーの背景画像。
border/	ツールバーやダイアログ内、ツールバーにあるボタン回りの境界線。
buttons/	全てのツールバーのボタンで使用する画像。 skin.ini の Boxes や Images のセクションで参照される。タブバー上のタブのボタンの画像も含まれる。
caption/	メニューバー右上に表示される、最小化・元に戻す・閉じるボタン。Macであれば左側に表示される。
checkbox/	チェックボックスで使用する画像。
contacts/	アドレス帳のリストで使用する画像。
dialog_images/	ダイアログやアラートが表示される際、警告文とともに表示される画像。
dialog_page/	ダイアログの内側の背景及び境界線で使用する画像。
drop_insert/	ボタンをドラッグ & ドロップで配置する際に表示される境界線の画像。
dropdown/	ドロップダウンメニューの背景に使用される画像。
edit/	アドレスバーなどの入力フォームやツリー・リストの表示で使用する画像。オペレーティングシステムによって定義されるものがあるため、全てを変更できるわけではない。
expand_button/	ダイアログ中でツリー式展開メニューに使用される矢印画像。
header_button/	ヘッダで使用する画像。メールや設定の一覧表示で上部に表示される。
icons/	Opera で使用する全てのアイコン。
link/	Opera Link で使用されるステータスアイコン。
notifier/	ポップアップブロックの通知やインライン検索の背景で使用する画像。
pagebar_close_button/	タブの閉じるボタンで使用する画像。
panel_toggle/	パネルの切り替えで使用する画像。
progress/	プログレスバーで使用する画像。
radio_button/	ラジオボタンで使用する画像。
scrollbar/	スクロールバーの背景やプルダウンメニューなどの矢印で使用する画像。
scrollbar_knob/	スクロールバーの取っ手で使用する画像。
selector_button/	ツールバーのボタンやパネル切り替えのまわりの背景画像。
smilies/	全ての絵文字画像。
speeddial/	アイコンや検索欄の境界線、スピードダイヤル設定画面の影つきのオーバーレイやアルファ透過性に対応していないシステムのための影なしのオーバーレイといった、スピードダイヤル上の小物の画像。
trust_and_security_button/	アドレスバーに表示される、セキュリティ関連で使用される画像。緑色のものはバージョン 9.5 から Extended Validation で使用される。

画像のフォーマット

Opera は PNG, JPEG, BMP, GIF の各画像フォーマットをスキンにサポートしています。 PNG 画像はアルファチャンネルをサポートしているので部分的な透過画像に使用することができます。 JPEG 画像を背景に使用すると、場合によっては PNG よりも圧縮率がよくなります。

アニメーション

Opera はアニメーション GIF やアニメーション PNG (APNG フォーマット) をサポートしています。 GIF は256色しか扱えないので、 APNG の方が好まれています。このようなアニメーションは、 Opera が読み込み中の際に表示されるものです。一般の画像ファイルと同様に使用されています。

画像の読み込み

Opera はスキンに使用される全ての画像を一度しか読み込みません。 skin.ini にいくら多く参照を記述していても、 HTML 文書で同じ画像が複数箇所で使用されているのと同じように動作します。 この仕様は、メモリ消費量の削減に寄与しますが、障害が起こることもあります。それは、使用に応じて異なるパラメータを同一の画像に適用するようなことができないということです。スキン読み込み時、 Opera は最初に記述された画像のインスタンスを使用し、これとそのパラメータを記憶します。したがって、同じ画像を異なるパラメータで使用したいのであれば(例えばあるところでは色付けを使ってあるところではこれを無効にしたい場合)、異なるディレクトリから2つの異なる画像を読み込ませる必要があります。

This article is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license.