Chromeのテーマ作成アプリの比較: 末那識２

常用のブラウザとしてChromeを使用している方は結構いると思います。バージョンの違いを含めると世界中でのシェアは約50％を占めているそうです。勿論ブラウザの中では第1位です。

軽快な動作及びGoogleアプリとのシームレスな連携、端末を選ばないこと等使い易さが人気の理由だと思われますが、Chromeの魅力の一つとしてテーマを簡単に変えられることも挙げられるでしょう。ブラウザのテーマに限らず、PCの壁紙、スマホ、携帯の待ち受け画面を他人と違った自分だけのものにしたいと言った欲求は誰しも持っているようです。

テーマを変更するには、Chromeの「設定」＞「テーマを取得」で「Chrome ウェブストア」を開き、そこから自分の気に入ったテーマを選んでインストールすることもできますが、アプリを使って自分のオリジナルテーマを比較的簡単に作成することもできます。

テーマ作成アプリには何種類かありますがその中から3種類を選んで使い勝手等を比較してみました。
3つとは、My Chrome　テーマ、themebeta.comのTheme Creator 及び同じテーマCreator の名称ですがbox9studios.comが提供しているものです。Chromeの「設定」＞「拡張機能」＞「他の拡張機能を見る」に移動するか、直接「Chromeウェブストア」に移って拡張機能を選び検索でTheme Creato　と入力すれば見つかりますので、「+CHROMEに追加」ボタンをクリックして機能を追加します。My Chrome　テーマは検索から見つかりにくいのでここから追加しました。

では最初は一番操作が簡単なMy Chrome　テーマからです

１．My Chrome　テーマ

アプリを起動すると次のような画面が表れます。

画面上の注釈が気になります。2015-8-4以降はサポートが中止されているようで、後述のように一部の機能は動作しないようです。
とりあえず無視して先に進むこととします。画面の「テーマの作成を開始」ボタンをクリックすると、画像の選択画面に移ります。

ここで問題となるのが背景画像のサイズです。一昔前ならディスプレイモニタの解像度もアスペクト比もそれほど種類が多くはなかったのですが、現在は大型のディスプレイからタブレットまで多種多用です。かつての標準であったアスペクト比4:3は保留してアスペクト比16：9に限定し、フルハイビジョン相当（1920×1080）及びHDTV（1280×720）の場合について調べてみます。因みに今使っているモニタは17"の1280×1024（SXGA　5:4）のものです。またサブとして使っているノートはFWXGA（1366×768　16:9）です。
作成したテーマを他の人にも使ってもらうためには現在一番標準的かつ最大解像度の1920×1080としたほうが良さそうですが、はたしてそうでしょうか？

まず元の画像はこれです。

これを先ほどの「画像をアップロード」と書かれた部分にドラッグ＆ドロップします。するとブラウザのウィンドウに背景画像を配置したイメージが表示されます。配置の調整をするためのボタンも表示されますが、全体のアスペクト比は必ずしもモニタ画面のアスペクト比には合っていないようです。ただし画像がはめ込まれる部分の比率は正しいようです。

試しに「位置を調整」ボタンをクリックしてみると、

「画面に合わせる」の場合画像全体が画面に収まるように大きさが自動的に調整されるようです。上の図では16：9の画像を5：4の画面に収めるため画像横方向を画面幅に合わせたため縦方向に余白ができました。さらに縦の配置位置の選択ができるようです。「中央」と「下」の場合を示しました。

意図した場合を除き余白ができるのは望ましくないので「画面全体に配置」を選択してみます。

今度は画面の縦方向に画像の高さが合わせられ横方向は画面幅でトリミングされます。トリミングの位置も「左」、「中央」、「右」から選べます。
その他の配置も選べますが確認は省略します。また、「画像効果」により画像の色調等を変更することが可能ですが、細かな効果を狙うのであればここで変更するよりはあらかじめ他のフォトレタッチソフト等で加工した画像を準備したほうが良いでしょう。

なお元の画像として1280×720のサイズを用いた場合でも見た目の結果は同じとなりました。

続いて、フレームやタブの色調の変更を行います。

「手順2に進みます」ボタンをクリックし次の調整画面を表示させます。

画面上部の説明にもあるとおり、色調の設定には２つの方法があります。まずは画像全体の色調からそれにマッチした色調を自動で選んでくれる「I'm Feeling Lucky」、もう1つはフレーム、アクティブタブ、非アクティブタブの色をそれぞれバルーンをクリックして表示されるカラーパレットから選択する方法です。どちらも場合もタブ等の文字色はコントラストが確保できるように黒か白に自動的に設定されるようです。

「I'm Feeling Lucky」を選んだ場合は自動的に次のステップに進みますが、個々に色を設定した場合は決定後「手順3に進みます」ボタンをクリックして次の「インストールと共有」画面を表示させます。

　⇒　

テキストボックスにテーマの名称を入力し適宜説明文を加えたら「テーマを作成」ボタンをクリックします。
テーマをインストールまたは共有スルタンの画面が表示されますが、残念ながらテーマの共有は機能しないようです。このボタンをクリックすると、URLを設定中とメッセージがでたままスタックしてしまいますのでクリックしないでください。

「自分のテーマをインストール」ボタンをクリックすると画面左下に警告が表示されますが、かまわず「続行」をクリックします。

続けてChromeにテーマを追加するかどうか確認のダイアログが表示されますので「テーマを追加」をクリックします。

Mychrometheme_16

テーマがインストールされました。

本来のアスペクト比でテーマ作成時のプレビュー画面とほぼ等しい範囲の画像が取り込まれていることがわかります。

さてインストールができたのは良いとしてこのテーマを再利用するにはどうすればよいでしょうか？

My Chrome テーマのHome画面に戻ると、今作成したテーマのサムネイルが追加されているのがわかります。
ただしこのサムネイルをクリックしてもブランクの画面が表示されるだけで、テーマの再利用、共有機能はうまく動作していないようです。

実はこのテーマの設定ファイルは捜した結果Windows7の場合

C:\Users\（自分のアカウント名）\AppData\Local\Google\Chrome\User Data\Default\Extensions\（テーマのフォルダ）

にあることが分りました。

ただし、Extensionsフォルダには意味不明のアルファベット文字列からなるフォルダがいっぱいあるのでどれが目的のフォルダか分りません。テーマのフォルダは、imagesフォルダとCached Theme Material Design.pakファイル及びmanifest.jsonファイルから構成されているので *.pak 等の文字列を使って検索をかければすぐ見付けられます。

Theme_folder

フォルダが見付かったら、一式コピーしてわかりやすい場所にペーストしておきます。フォルダの名称は1.0_0などとなっていますので、これもわかりやすくテーマの名前に変更しておきます。
テーマをChromeに適用するにはChromeの拡張機能のページを開いてそこにフォルダ全体をドラッグ＆ドロップします。

manifest.json ファイルにはテーマのスタイルが記述されているようなのでテキストエディタで開いてみます。

スタイルシートに良く似た記述となっていますので、なんとなくやっていることが判りそうです。

さて、5：4の画面にあわせて作成したテーマを他の16：9の画面を持つPCに適用したらどうなるでしょうか？

先ほどのテーマフォルダをOneDriveに移動し、1366×768の解像度を持つノートPCに適用してみました。

横の表示範囲は5：4の画面とほぼ同じ、縦は上からアクペクト比分だけ表示され下はクリップされています。改めてテーマフォルダ内imagesフォルダのtheme_ntp_background.jpegのプロパティを調べてみると1280×1024となっておりテーマ作成時にクリッピングされたようです。また、manifest.json の画像配置プロパティは、

"properties": {
"ntp_background_alignment": "top",
"ntp_background_repeat": "no-repeat"
}

となっていますので、まあ当然の結果です。やはり端末ごとに最適化をしないとだめなようです。また、上述の再インストール方法も失敗する場合やそもそもフォルダが見付からないケースもあるのでやはりテンポラリにすばやくテーマを変えたいといった用途に限定したほうが良さそうです。

２．Theme Creator

２番目はthemebeta.comのTheme Creator です。

基本的な仕組みはMy Chrome テーマと同じですが、ユーザインタフェースが判りやすくもう少し細かい項目まで設定が可能です。

アプリを立ち上げると次の画面が表示されます。

テーマの名称を入力し、画像の設定に移ります。プレビュー画面のアスペクト比は使用しているモニタに合わせて変化するようです。

用いる画像のサイズについては次のようにリコメンドされています。

What is the recommended size for each image?
- theme_frame: ∞ x 30px

- theme_toolbar: ∞ x 120px

- theme_tab_background: ∞ x 65px

- theme_ntp_background: Recommended Minimum Size for images 800 x 600px

- theme_frame_overlay: 1100 x 40px

- theme_button_background: 30 x 30px

画面左の上の項目から順番に設定していきます。最初はNTB Background（背景画像）です。モニタのアスペクト比と画像のアスペクト比が同じなら悩まなくてすむのですが、背景画像は800×600以上であれば良いとのとのことなので、１．My Chrome　テーマと同じく1920×1080の物を選びました。「Choose Image」ボタンにポインタのカーソルを合わせると、変更の対象部分が赤く色が変わります。ボタンをクリックしてファイルを選択します。続いてプレビュー画面の下に画像配置の指定があるので、左から順に　center、bottom、no repeat、fill　screen　と設定します。一番右のリストボックスのnormal size は原寸、fill screen が画面に余白ができないようにサイズを調整しはみ出した左右または上下をカット、fit to screenは画面に全画像が収まるようにリサイズしたがって上下または左右に余白が生じます。アンカーの設定は初めの2つのリストボックスで設定した位置になります。

後で気が付いたことですが、fill　screen　の場合の画面のトリミングとアスペクト比は16：9と4：3相互間を前提としてなされているようです。私のモニタは前述のように5：4なので上下方向が微妙に伸びた画像となってしまいます。一般公開を前提としてテーマを作成する場合は、特殊なアスペクト比のモニタでは作業をしないほうがよさそうです。

次はFrame（フレーム）の色を決めます。正方形のアイコンをクリックするとカラーパレットが開くので色相と明度を調整して好きな色を選びます。RGBの16進表示での入力もできるので、他の部分の色と統一感を出すためには、数値入力のほうが良いかもしれません。フレーム背景画像を透過させる場合は白（#ffffff）としておきます。

Tool BarはデフォールトでGradientにチェックが入っていますのでそのままにすれば下から上に向かって薄くなるグラデーションが掛かります。

また、Tab Backgroundはデフォールトで透過特性が設定されているのでフレームに背景画像を用いる場合などあまり濃い色とはせずそのまま使ったほうが良いようです。さらに透明度を変更させる等の場合は自分で画像を準備します。説明では任意×65となっていますが実際は30×200が完成後のファイルからの調査結果です。

Frame Overlayはタブ部分の背景画像の設定です。推奨の1100×40の意味が良くわかりませんが、背景画像と同じ画像としても問題なさそうです。フレームに全面の画像を設定している場合は二重に設定する必要はありません。

NTP Attributionにはクレジット等の画像を追加することができます。

以上でImages部分の設定は終了です。

次に左上のタブをクリックしてColorsの設定画面に移ります。ここでは主にテキストの色を設定できます。プレビューを見ながら背景とのコントラストが取れるように色・明るさを設定します。（詳細の説明は省略します）

全ての設定が終了したらPackに移ってテーマの保存と適用を行います。

すぐ結果をインストールして確かめたいところですが、２番目の「Pack and Download」をクリックしてテーマを自分のPCに保存しておきます。"theme[N].crx"（[N]は10桁の数字.crxはChrome Extensionを表す拡張子）と言う名前のファイルが「ダウンロード」フォルダに保存されます。一番上の「Pack and Install」をクリックするとテーマが適用されますが、まだこの画面は閉じたり他に遷移したりしないままでいます。
先ほどの.crxファイルをChromeの拡張機能のページにドラッグ&ドロップすれば、他のテーマに変更後も自分で作成したテーマを適用できますが、修正のためにアプリに読み込ませることはできません。
アプリの提供元である www.themebeta.com にアカウントを作成しておくとファイルの保存、修正などが後でできます。アカウントの作成は省略しますが、何かのアクションをしようとするとログインか新たにアカウントを作成するようにダイアログが表示されますので、その指示に従うだけです。アカウントを作成しログインしたら画面上部のゴミ箱アイコンの左隣りにある「Save As New Theme」ボタンをクリックします。

すると次のダイアログが表示されますので、テーマ名称の入力、一般公開する場合は「Public」、個人のアーカイブとするなら「Private」のラジオボタンをオンし、カテゴリーを選択したら「Save」ボタンをクリックします。

これで同サイトの「Load And Edit Your Theme」にいけば保存したテーマのプレビュー、編集、ダウンロードができるようになります。

さて、完成したテーマを表示させてみると次のようになりますが、フレームの画像と背景画像が繋がって見えません。

どうしても画像を綺麗につなげたい場合は、特定の解像度のモニタに最大表示したときのみしか通用しませんがモニタと同じ解像度、アスペクト比の画像を用意し、背景画としてはleft、bottom、normal lsize で配置し、同じ画像をフレームに用いると全画面で画像がうまく繋がります。ただし横方向にウィンドウを縮めてもOKですが、縦方向に縮めると繋がらなくなります。これをアスペクト比の違うモニタに適用したら多分レイアウト（または画像のアスペクト比）は崩れると思われますが検証はしていません。また、タスクバーを固定表示にしている場合はその高さ分背景画像が上にずれますので、画像が繋がりません。タスクバーのプロパティで「タスクバーを自動的に隠す」にチェックを入れておけば解決します。

Taskbar

まあ、でもここまでこだわる必要性は正直言って私は感じていません。画像によっては非アクティブタブの文字が読みづらくなるのでフレームは単色のほうが使いやすいです。また、タスクバーも常時表示させておいたほうが何かと便利です。この辺は各人の好み次第だと思います。

なお、Pack画面で「Pack and Download Zip File 」をクリックすれば、.zip形式で圧縮したテーマを任意のフォルダに保存できますが、あまり使い道はなさそうです。

３．テーマCreator

最後はテーマCreatorですが、できることは２．Theme Creator とほぼ同じです。ですがユーザインターフェースが今一使いづらく、画面右側の要素の設定メニューにポインタを持っていくと一応該当の箇所に青い矢印がホバー表示されますが、メニューが全て「色」、「画像」、「テキストの色」となっていて咄嗟には混乱します。また、プレビュー画面のアスペクト比はTheme Creatorと違って使用しているモニタに合わせてはくれません。