テーマ/作り方

テーマの作り方

Google Chrome のテーマ / スキンを作ってみよう！

バージョン3.0以降

テーマは特殊なChrome拡張として作成します。詳しくはDeveloper's Guideを参照。

• Theme Creation Guide（code.google.com） - 英語ですが各要素の解説と記述方法がまとめられています。
• Chrome crx Theme Creator（chrometheme.chromepub.com） - テーマ作成支援ツール。テーマ名と各要素の色・PNG画像ファイルを指定するだけでテーマを作成できます。

作成例

例としてGoogle Chrome 3.0から5.0までのデフォルトテーマ（ツールバーが水色）と同じテーマを作成してみます。
※現在の安定版（バージョン5.0）にインストールしても見た目は変わりません。開発版（6.0以降）向けです。

現在のGoogle Chrome開発版では、デフォルトテーマが変更されてツールバーが灰色に、フレームが濃い青色に変更されています。
この変更は、Chromium（Google Chromeの先行開発版）のRevision 44116で行われました。
http://src.chromium.org/viewvc/chrome?view=rev&revision=44116
具体的には以下の変更が行われています。
　画像の差替え
　　・通常ウィンドウのフレーム画像 frame_default.png
　　・非アクティブ時の通常ウィンドウのフレーム画像 theme_frame_default_inactive.png
　　・ツールバー画像 theme_toolbar_default.png
　フレームの色指定の変更
　　・通常ウィンドウのフレーム色（frame、ソース上の表記はkDefaultColorFrame）：RGB(77, 139, 217) → RGB(66, 116, 201)
　　・非アクティブ時の通常ウィンドウのフレーム色（frame_inactive、ソース上の表記はkDefaultColorFrameInactive）：RGB(152, 188, 233) → RGB(161, 182, 228)
　　・ツールバー色（toolbar、ソース上の表記はkDefaultColorToolbar）：RGB(210, 225, 246) → RGB(214, 214, 214)
　　※ここでの「フレーム色」とは画像でカバーされないウィンドウ左/右/下のフレーム部分の色です。
　　　「ツールバー色」とはファイルをダウンロードしたときに現れるダウンロードバーなどの部分の色です。
これらの変更前のデータを元にテーマを作成してみます。

手順1. 画像を用意する

このテーマでは以下の7個の画像ファイルを使用します。

1. 通常ウィンドウのフレーム画像
   Chromiumのリポジトリにある以下の変更前の画像をそのまま使います。
   http://src.chromium.org/viewvc/chrome/trunk/src/chrome/app/theme/theme_frame_default.png?revision=44115
   
2. 非アクティブ時の通常ウィンドウのフレーム画像
   以下の変更前の画像をそのまま使います。
   http://src.chromium.org/viewvc/chrome/trunk/src/chrome/app/theme/theme_frame_default_inactive.png?revision=44115
   
3. シークレットウィンドウのフレーム画像
   この画像はリポジトリ上に存在しません。
   テーマ側で指定しない場合は、通常ウィンドウのフレーム画像の色調を自動的に変更したものが使用されます。
   今回は色調の自動変更では期待した色にならなかったので、Chrome 5.0のスクリーンショットを加工して新規に作成しました。
   
4. 非アクティブ時のシークレットウィンドウのフレーム画像
   この画像はリポジトリ上に存在しません。
   テーマ側で指定しない場合は、非アクティブ時の通常ウィンドウのフレーム画像の色調を自動的に変更したものが使用されます。
   これもChrome 5.0のスクリーンショットから新規に作成しました。
   
5. 通常ウィンドウ上のバックグラウンドのタブ画像
   この画像はリポジトリ上に存在しません。
   テーマ側で指定しない場合は、ツールバー画像の色調を自動的に変更したものが使用されます。
   これもChrome 5.0のスクリーンショットから新規に作成しました。
   
6. シークレットウィンドウ上のバックグラウンドのタブ画像
   この画像はリポジトリ上に存在しません。
   テーマ側で指定しない場合は、ツールバー画像の色調を自動的に変更したものが使用されます。
   これもChrome 5.0のスクリーンショットから新規に作成しました。
   
7. ツールバー画像
   以下の変更前の画像をそのまま使います。
   http://src.chromium.org/viewvc/chrome/trunk/src/chrome/app/theme/theme_toolbar_default.png?revision=44115
   

手順2. manifest.jsonファイルを作成する

文字コードはUTF-8を指定します。
このファイルにテーマの名前や、使用する画像・色などを記述します。

1. "version" セクション
   テーマのバージョンを記述します。今回は 1.0.0.0 とします。

   "version": "1.0.0.0",

2. "name" セクション
   テーマの名前を記述します。これはテーマのインストール直後に表示される情報バーに表示されます。
   また、Google Chrome 拡張機能（chrome.google.com）のページにアップロードしたときはこの名前が表示されます。

   "name": "Chrome 3-4-5 Default Theme",

3. "theme" セクション
   このセクションのサブセクションで画像、色、色調変換、プロパティ（画像の配置の方法など）を記述します。
   1. "images" サブセクション
      以下のように画像を指定します。
      今回は"images" というフォルダを作ってその中に各画像ファイルを置くため、右側のファイル名の前に「images/」を追加して記述しています。

      "theme_frame":                    "images/theme_frame_default.png",              // 通常ウィンドウのフレーム画像指定
      "theme_frame_inactive":           "images/theme_frame_default_inactive.png",     // 非アクティブ時の通常ウィンドウのフレーム画像指定
      "theme_frame_incognito":          "images/theme_frame_incognito.png",            // シークレットウィンドウのフレーム画像指定
      "theme_frame_incognito_inactive": "images/theme_frame_incognito_inactive.png",   // 非アクティブ時のシークレットウィンドウのフレーム画像指定
      "theme_tab_background":           "images/theme_tab_background.png",             // 通常ウィンドウ上のバックグラウンドのタブ画像指定
      "theme_tab_background_incognito": "images/theme_tab_background_incognito.png",   // シークレットウィンドウ上のバックグラウンドのタブ画像指定
      "theme_toolbar":                  "images/theme_toolbar_default.png"             // ツールバー画像指定

   2. "colors" サブセクション
      Chrome 5.0の場合の各部分のデフォルトの色指定は、以下のソースファイルで調べることができます。
      http://src.chromium.org/viewvc/chrome/branches/375/src/chrome/browser/browser_theme_provider.cc
      このファイルから以下の部分のデフォルトの色指定を探し出します。
      　・シークレットウィンドウのフレーム色（frame_incognito、ソース上の表記はkDefaultColorFrameIncognito）
      　　→ RGB(83, 106, 139)
      　・非アクティブ時のシークレットウィンドウのフレーム色（frame_incognito_inactive、ソース上の表記はkDefaultColorFrameIncognitoInactive）
      　　→ RGB(126, 139, 156)
      これらとRevision 44116での変更前の値を以下のように記述します。

      "frame":                    [  77, 139, 217 ],   // 通常ウィンドウのフレームの色指定
      "frame_inactive":           [ 152, 188, 233 ],   // 非アクティブ時の通常ウィンドウのフレームの色指定
      "frame_incognito":          [  83, 106, 139 ],   // シークレットウィンドウのフレームの色指定
      "frame_incognito_inactive": [ 126, 139, 156 ],   // 非アクティブ時のシークレットウィンドウのフレームの色指定
      "toolbar" :                 [ 210, 225, 246 ]    // ツールバーの色指定

   3. "tints" サブセクション
      今回は用意した画像を自動色調変換させずにそのまま使うので、すべての要素に [ -1.0, -1.0, -1.0 ] を記述します。

      "frame":                    [ -1.0, -1.0, -1.0 ],   // 通常ウィンドウのフレーム画像の色調変換指定
      "frame_inactive":           [ -1.0, -1.0, -1.0 ],   // 非アクティブ時の通常ウィンドウのフレーム画像の色調変換指定
      "frame_incognito":          [ -1.0, -1.0, -1.0 ],   // シークレットウィンドウのフレーム画像の色調変換指定
      "frame_incognito_inactive": [ -1.0, -1.0, -1.0 ],   // 非アクティブ時のシークレットウィンドウのフレーム画像の色調変換指定
      "background_tab":           [ -1.0, -1.0, -1.0 ]    // バックグラウンドのタブ画像の色調変換指定

   4. "properties" サブセクション
      今回は「新しいタブ」の背景画像やロゴ画像は使わないので、何も記述しません。

最終的な manifest.json の中身は以下のようになります。

{
  "version": "1.0.0.0",
  "name": "Chrome 3-4-5 Default Theme",
  "theme": {
    "images" : {
      "theme_frame":                    "images/theme_frame_default.png",
      "theme_frame_inactive":           "images/theme_frame_default_inactive.png",
      "theme_frame_incognito":          "images/theme_frame_incognito.png",
      "theme_frame_incognito_inactive": "images/theme_frame_incognito_inactive.png",
      "theme_tab_background":           "images/theme_tab_background.png",
      "theme_tab_background_incognito": "images/theme_tab_background_incognito.png",
      "theme_toolbar":                  "images/theme_toolbar_default.png"
    },
    "colors" : {
      "frame":                    [  77, 139, 217 ],
      "frame_inactive":           [ 152, 188, 233 ],
      "frame_incognito":          [  83, 106, 139 ],
      "frame_incognito_inactive": [ 126, 139, 156 ],
      "toolbar" :                 [ 210, 225, 246 ]
    },
    "tints" : {
      "frame":                    [ -1.0, -1.0, -1.0 ],
      "frame_inactive":           [ -1.0, -1.0, -1.0 ],
      "frame_incognito":          [ -1.0, -1.0, -1.0 ],
      "frame_incognito_inactive": [ -1.0, -1.0, -1.0 ],
      "background_tab":           [ -1.0, -1.0, -1.0 ]
    },
    "properties" : {
    }
  }
}

各セクション内の最後の項目（12,19,26,29-31行目）の行末には「,」を書かないというルールがあることに注意してください。
また、画像ファイル名および拡張子の大文字・小文字を間違えないようにしてください。パッケージ化に成功してもインストールできない場合があります。

手順3. テーマ構成ファイルを crx ファイルにパッケージ化する

1. Cドライブの直下に "ChromeTheme" というフォルダを作成します。
2. "ChromeTheme" フォルダの中に "Chrome 3-4-5 Default Theme" というフォルダを作成します。（このフォルダ名が作成される crx ファイルの名前になります）
3. "Chrome 3-4-5 Default Theme" フォルダの中に手順2.で用意した manifest.json を置きます。
4. "Chrome 3-4-5 Default Theme" フォルダの中に "images" というフォルダを作成します。
5. "images" フォルダの中に手順1.で用意した画像ファイルを置きます。
6. Google Chromeを起動して「拡張機能」のページ（chrome://extensions/）を開き、ページ右上の「デベロッパー モード」をクリックして隠しボタンを表示させます。
7. [拡張機能のパッケージ化] ボタンをクリックし、[拡張機能のルート ディレクトリ] 欄に "C:\ChromeTheme\Chrome 3-4-5 Default Theme" を指定します。
8. [OK] ボタンをクリックします。「次のファイルを作成しました」と表示されたら [OK] をクリックして閉じます。
9. ページ右上の「デベロッパー モード」をクリックして隠しボタンを非表示に戻します。

C:\ChromeTheme に テーマファイル "Chrome 3-4-5 Default Theme.crx" と鍵ファイル "Chrome 3-4-5 Default Theme.pem" が作成されます。
※鍵ファイルはバージョンアップ版を同じIDでパッケージ化したい場合に使用します。通常は使用する必要はありません。

作成したテーマファイルのインストール

1. crx ファイルをGoogle Chromeのウィンドウにドラッグ＆ドロップします。
2. ウィンドウ下部にダウンロードバーが現れ、ダウンロードの確認メッセージが表示されるので [続行] をクリックします。

ヒント

crxファイルは7-ZipやWinRARなどの圧縮・解凍ソフトを使って解凍できます。
テーマの配布ページのインストールリンクを右クリックして「名前を付けてリンク先を保存」を選択し、ファイルとして保存してから上記ソフトで展開して中身を見てみると参考になるかもしれません。

バージョン2.0以前

テーマの切り替え機能が正式にサポートされていなかったので、リソースDLLを差し替える必要がありました。
※バージョン4.0以降ではテーマのリソースDLLを使用しないように仕様変更されたので、この方法は適用できません。

必要なもの

• リソースコンパイラ (rc.exe)
  Visual C++ がインストールしてあれば入っているハズ。わざわざインストールしたくない、という人はコレが使えるかも。（未確認）
• Resouce Hacker (ResHacker.exe)
  リソース DLL の書き換えに必要です。DLL をビルドするより楽です。ココからダウンロード。
• TortoiseSVN
  レポジトリからチェックアウトする用事があるので。他にアテのある方は他の SVN クライアントでも OK です。ココからダウンロード。

手順

1. 作業用フォルダを作る
   まずは適当にフォルダを作っておきます。

   C:\Documents and Settings\[ユーザー名]\Local Settings\Application Data\Google\Chrome\Application\0.2.149.27\Themes\default.dll

   がテーマのリソース DLL ですが、今回は default.dll と同じフォルダに "resource" という名前のフォルダを作ることにします。
   
    
2. default.dll をコピーしておく
   作成した resource フォルダにオリジナルの default.dll をコピーしておいてください。
    
3. chromium.org の SVN レポジトリからテーマ関連のファイルをチェックアウト
   エクスプローラで作ったばかりの resource フォルダに移動し、右クリックして [SVN チェックアウト(K)...] を選びます。TortoiseSVN のダイアログが現れるので、[レポジトリのURL] に

   http://src.chromium.org/svn/trunk/src/chrome/app/theme/

   と入力して OK をクリックしてください。ダウンロードが開始されます。
   
    
4. リソース DLL 生成用のバッチファイルを作る
   チェックアウトが完了したら、次はバッチファイルを書きます。リソーススクリプトのコンパイル、およびリソースの書き換えを自動化して、手間を省きます。ファイル名はなんでもよいのですが、今回は make.bat という名前で新しいファイルを作成し、テキストエディタで以下のように内容を編集して保存します。

   rc theme_resources.rc
   "C:\Program Files\Resource Hacker\ResHacker.exe" -modify default.dll, default.dll, theme_resources.RES , , , 

   rc.exe にパスが通ってなかったり、 Resource Hacker の場所が違う場合は適宜書き換えてください。theme_resources.rc がリソーススクリプトです。コイツをコンパイルしてやると theme_resources.RES が生成されます。コイツの中身を Resource Hacker のコマンドラインで default.dll に注入、という流れです。
   
    
5. テーマを編集する
   あとは、画像を編集していくだけです。ファイル名から、ある程度画像と UI の対応部分が推測できると思います。resource フォルダで直接編集せずに、resource フォルダを丸ごとコピーして、そこで編集していくのがベターです。編集が一通り終わったら、先ほどの make.bat を実行して、default.dll を更新してください。
   
    
6. テーマを適用して確認する
   default.dll を Themes フォルダの default.dll に上書きし、Google Chrome を起動してチェックしてみましょう。

ファイル一覧（書きかけ）

リソース DLL 関連

ウィンドウ関連

コメント

• 初心者です。手順4の後半が分からないのですが、詳しく説明していただけないでしょうか。theme_resources.rcには何を書けばいいのか、theme_resources.RESの中身をどうやってdefault.dllに注入するのかよく分かりません。教えてください。 -- 朝倉音姫? 2009-07-30 (木) 17:44:55
• 何の上級者かは内緒です。詳しく説明するのは面倒です。 -- 上級者? 2009-12-16 (水) 14:27:35
• 私も初心者なのでよくわかりませんが、theme_resources.rcに何か書く必要があるんですか？注入は「Resource Hacker のコマンドラインで」とそのまんま書いてありますが、そのような質問が出てくるということはこれ間違った記述なんでしょうか？ -- 超初心者? 2010-06-23 (水) 13:36:13
• 現在の正式安定版バージョン5.0では、このページ後半の「バージョン2.0以前」の方法は使用できません -- 2010-06-24 (木) 01:28:01
• あぁ -- あ? 2010-07-15 (木) 11:38:10
• http://www.chrometheme.net/chrome-theme-creator-online.html -- s0s? 2011-09-18 (日) 13:28:09
• http://www.chromethememaker.com/# -- 2012-11-07 (水) 09:45:22
• tintサブセクションについてなんですが、どのような場合に変えるのでしょうか? また、3つの値の役割(どれをどう変えるると) -- debianedition? 2014-11-19 (Wed) 16:08:44
• 間違えて途中で投稿してしまいました。　tintサブセクションについてなんですが、どのような場合に変えるのでしょうか? また、3つの値の役割(どれをどう変えると どうなるのか等)をご教授いただけますでしょうか? -- debianedition? 2014-11-19 (Wed) 16:10:33