Chromeのテーマギャラリーがローンチしてからというもの、素敵なテーマが溢れんばかりの今日この頃ですが、それでもやはり自作してみたい、という方のためにChromeテーマの自作方法をご紹介。思っているよりも全然簡単ですよ。
実際、ChromeテーマはJavaScriptもHTMLコードも含まない単純なアドオンで、2つの構成エレメントからなっています。
その2つとは
- 画像 x 数枚
- .jsonマニフェストファイル x 1個
これらのエレメントが.crx形式にパッケージされています。.crxファイル形式とはGoogle Chromeが使用しているZIPファイルのバリエーションの一つです。
下の画像を使って作成したChromeテーマが、そのもう一つ下の画像です。このテーマは下記に記したやり方で作成しました。
＜ビフォー＞ ＜アフター＞お気付きの方もいるかもしれませんが、背景画像に対して新規タブページ上の全てのリンクがくっきりと表示されるように、画像を少し暗く加工しています。
Chromeテーマ作成に必要なものは下記の通りです。:
- テーマに使用したい壁紙
画像を加工したい場合、画像エディター（Aviary Phoenixが個人的にはおすすめですが、他にもオプションは多数あります。MSペイントでも簡単なことであれば出来ますが、もう少しパワフルなものが欲しい方は優秀でしかもフリーで使えるPaint.netを試してみて下さい）。 - Notepadのようなベーシックなテキストエディター（NotepadまたはNotepad++あたりが個人的にはおすすめですが、これも選択肢は多数あります）。
- テーマ作りの基盤となるクリエイティブなアイデア。
必要なツールが揃ったら、下記の手順に沿って挑戦を。:
手順1: テーマ名を付けたフォルダを作成このフォルダが作成出来たら、その中にもう一つフォルダを作り、"images"という名称にします。このフォルダにはテーマで使用する画像を格納します。以後の説明に出てくる"マイテーマ"とはこのテーマ名を付けたフォルダを示します。
手順2: テーマ用の画像を作成 注：最初に注意する必要があるのが、Chromeテーマで使用する画像は全てPNG画像である、ということです。JPG画像の場合、オンラインツールなどを使って、PNGへ変換して下さい。きゅうりのようにクールなテーマを作成するためには4つの画像エレメントが必要です。五番目のテーマ作成者ロゴはオプションで追加可能、という参考までにのお話です。それぞれの必須サイズとスクリーンショットを一緒に掲載しておきます。
- テーマフレーム - この画像はChromeテーマのフレーム、「閉じる」、「最大化」、「最小化」ボタンの背景画像として表示されます。この画像を指定しない場合、デフォルトChromeテーマのネイティブOSタイトルバーを表示します（画像要件: 高さ30px以上、幅制限なし）
- テーマツールバー - この画像は次へ、戻る、再読み込みボタン、アドオンツールバーの背景として表示されます。現在のタブ、ツールバーの両方に使用されます（画像要件: 高さ120px以上、幅制限なし）。
- テーマタブ背景 - この画像は複数のタブが開いている際、表示されていないタブ上に表示されます（画像要件: 高さ65px以上、幅制限なし）。
- 新規タブページ背景 - 新規タブを開いた際のメイン画像として表示されます。奨励されている画像サイズは800x600以上ですが、スクリーンの解像度にあったものがベストです。
- テーマ属性 - これはChromeテーマの右下の隅に表示される画像です。これはオプションなのでテーマ作成者のロゴを入れたい場合などに便利です。
これらの画像の準備が出来たら、手順1で作成したimagesフォルダにペーストします。
テーマフォルダに画像をペーストするとimagesフォルダは上の画像のようになります。
背景画像とマッチした画像を作成するためのコツ:- テーマに最も近いマッチングカラーを使用しましょう。自分が選んだ壁紙とどの色がマッチするのかは、メイン画像のカラーパレットを作成する、などを試してみると分かりやすいです。
- 画像エディターを使ってメイン画像の一部の切り取り、サイズ変更を行います。例えば、「Ethereal 2」というテーマを作成した時にはメインの背景とフレーム画像に同じものを使用しました。
- 画像の一部にグラデーションを使いたい場合、『Dynamic Drive』というツールを使うとグラデーション画像がいとも簡単に任意のサイズで作成出来ます。
- 基本的なルールとしてフレームに最も暗い色、背景タブ画像が最も明るい色を使うと良いです（もちろん、これは背景画像として選んだ画像にもよりけりですが）。
Chromeアドオン、インストール可能なウェブアプリおよびテーマには必ず「manifest.json」という名のJSON形式のマニフェストファイルが含まれています（JSONはデータ形式に気取った名前を付けているだけなので、恐れる必要はありません）。
このファイルには画像、色、色調、プロパティが含まれています。全てのテーマに使えるベーシックなマニフェストを下記に掲載しているので、使ってみて下さい。またここからサンプルテーママニフェストもダウンロード出来ます。
"version": "1.0",
"name": "My Theme",
"theme": {
"images" : {
"theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/background.png",
"theme_tab_background" : "images/tab.png",
"theme_ntp_attribution" : "images/theme_ntp_attribution.png"
},
"colors" : {
"ntp_link": [255,255,255],
"ntp_text": [255,255,255],
"ntp_section_link": [255,255,255],
"ntp_section_text": [10 , 17 , 27],
"ntp_background": [10 , 17 , 27],
"frame": [10 , 17 , 27],
"toolbar": [10 , 17 , 27],
"tab_text": [255,255,255],
"tab_background_text": [10 , 17 , 27],
"bookmark_text": [255,255,255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom",
"ntp_background_repeat": "no-repeat"
}
}
}
コードを見てもらったなら、次はそれぞれのセクションが、どうテーマを変更させていくのかを解読していきましょう。
- 画像 - テーマに使用される画像エレメントはmanifest.json fileの"images"セクションで定義されます。これらは手順2で作成し、imagesフォルダに保存された画像です。imagesフォルダ内で付けた名前をここから指定する必要があります。
- 色 - このセクションのそれぞれのエレメントはテーマで使用される様々な色を定義します。どのエレメントがテーマのどこに紐づけられているかを下記に示します。
テーマ用の色を選ぶ際には下記の3つのコツを参考にしてみて下さい。:
○ ステータスバーの背景色は選択したツールバーと同色にする。
○ ステータスバーのテキスト色は選択したタブテキストの色と同じにする。
○ツールバーボタン（ダウンロードツールバー）テキスト色はブックマークテキストの色と同じ。 - 色調 - この色調エレメントはツールバーの全てのボタン内（戻る、次へ、再読み込み、など）の色調を指定します。色調の値は0から1または-1の範囲内の浮動値。このマニフェストファイルではもっとも頻繁に使用される「ボタン」エレメント一つのみを使用しています。
- 色調の値は0から1または-1の浮動値です。-1を使用するとエレメントの色は変化しません。色調値は[色調、彩度、輝度]の順に構成されているので0.346, 0.1, -0.5などの値が使用できます。ボタンが目立つように、またはうまく調和するようにこれらの値を調整します。
- プロパティ - テーママニフェストではプロパティセクションを使って、メイン背景画像の動作を調整します。画像を上、下、または中央に配置し、x軸、またはy軸に沿って画像を繰り返す、または繰り返さないなどの調整が出来ます。
ブログ「不定期日記」さんでも解説がありましたので、合わせて参照してください。
これでマニフェストファイルは作成済みとなるのでこれを「マイテーマ」フォルダに保存します。
マニフェストファイルを保存した後のフォルダは上の画像のようになるはずです。マニフェストとClassic Chromeテーマ用の画像が入ったシンプルテーマパッケージはここからダウンロード出来ます（ZIPファイル）。このファイルを初期段階の参考にして新しいテーマの作成に活用してみて下さい。
手順4: テーマのパッケージ作成およびプレビューここまでの手順で、画像ファイル、マニフェストファイルは揃いました。ここからはテーマのテストを行って行きます。まず最初にGoogle Chromeを立ち上げ、アドオンページを開きます。これは"chrome://extensions/"とアドレスバーに入力し、エンターキーを押すと開くことが出来ます。
そこから右にある"開発者モード"リンクの隣にある+サインをクリック。ページの上部にいくつか新しいオプションが表示されるので"アンパックアドオンを読み込む"をクリックし、"マイテーマ"フォルダへナビゲートします。
マイテーマフォルダをクリックし、OKをクリックするとテーマがブラウザに読み込まれます。全てが思い通りに出来ているかどうかを確認して下さい。
トラブルシュート: アドオンを読み込めませんでした、というエラーダイアログが表示された場合、マニフェストファイルのJSON形式が有効かどうかを確認して下さい。manifest.json.txtやmanifest.json.rtfではなくmanifest.jsonが正しい形式です。マニフェストファイルの形式に問題があるかどうかはJSON validatorで検証することが出来ます。エラーメッセージがある場合、エラーが起こった行数が表示されるので、修正はさほど難しくありません。プレビューを見て満足の出来映えであった場合、パックアドオンボタンをクリックすると、Chromeはテーマを作成し、マイテーマフォルダのペアレントフォルダに保存します。
この操作によりテーマ用のPEMまたはプライベートキーが作成されます。これはChromeアドオンギャラリーにアップロードした後にアプリを更新する際に必要となります。万事順調であれば.crxファイル、.pemファイルが作成されました、というメッセージが表示されるはずです。またこれらのファイルの場所も表示されます。
上記の手順を何度かやってみると、Chromeのテーマ作成がいかに簡単か、どれほどのカスタマイズが可能なのかが良く理解出来るかと思います。
上記のマニフェストにはクールなテーマ作成に便利なエレメントがいくつか含まれているのでぜひ活用してみて下さい。またテーマ作成についてより深く知りたい方はテーマ作成ガイドやこちらのブログを参考にしてみて下さい。
Chromeテーマ作成用のリソースはオンラインにもデスクトップにもありますが、それぞれに制限があります。一番大きな制限は2MB以上のファイルをアップ出来ない、ということです。オフラインのテーマ作成ツールもかなりベーシックなものしかなく、バグも多いのが現状です。しかも最初のリリースからChromeはどんどん変化して行っているのに対してこれらのツールはこの変化に追いつけていない感じです。
今回紹介した手順でどんなテーマが作成出来るのかをもっと見てみたい、という方はGoogle Chromeテーマギャラリーで私たちが作成したテーマをご覧下さい。
この手順は一見、難解そうに見えますが、やってみるとさほど難しくもないです。基本的な画像編集やシンプルなコードのコピペに慣れている方であれば問題なく出来るかと。
やってみた方は感想をぜひコメントで教えて下さい。また、質問がある方、補足説明などもぜひコメントでお寄せ下さい。
Vikram Kinkar (原文／まいるす・ゑびす）