« システムディスク換装時の注意点 | トップページ | 地球深部探査船『ちきゅう』 »

2016年9月22日

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 テーマからです

1.My Chrome テーマ

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

Mychrometheme_01

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

Mychrometheme_02

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

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

1920x1080

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

Mychrometheme_03

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

Mychrometheme_04  Mychrometheme_05

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

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

Mychrometheme_07  Mychrometheme_06

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

Mychrometheme_08

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

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

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

Mychrometheme_09

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

Mychrometheme_10  Mychrometheme_11




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

Mychrometheme_12 ⇒ Mychrometheme_13

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

Mychrometheme_14

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

Mychrometheme_15png

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

Mychrometheme_16

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

Mychrometheme_17

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

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

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

Mychrometheme_18  Mychrometheme_19

実はこのテーマの設定ファイルは捜した結果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の拡張機能のページを開いてそこにフォルダ全体をドラッグ&ドロップします。

Theme_appay

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

Manifest_2

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

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

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

Pink_begonia_1366x768_1


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

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

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

2.Theme Creator

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

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

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

Themecreator_01

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


Themecreator_02

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

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

Themecreator_03 Themecreator_04

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

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

Themecreator_08

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

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

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

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

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

Themecreator_05

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

Themecreator_10_2

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

Themecreator_12

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

Themecreator_13

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

Themecreator_14

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

Themecreator_15 Themecreator_16

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

Themecreator_07_1

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

Themecreator_17

Taskbar

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

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


3.テーマCreator

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

Themebox9_01

また、色選択のカラーパレットは一見細かい設定が可能なように見えますが、グレースケールが充実していないため、実際には文字の設定には不向きです。

Themebox9_02

以下使い方を調べていきますが、上記Theme Creatorと類似のため詳細は省略します。

テーマの名称を画面下のテキストボックス内に入力します。右側のメニューは上から順に

【フレーム】 色、画像

【非アクティブタブ】 色、画像、テキストの色

【アクティブタブ】 色、画像、テキストの色

【ボタン】 スタイル(色調)

【ツールバー】 色、テキストの色

【メイン画面】 色、テキストの色、画像、ピクチャーポジション、画像の繰り返し

となっています。

Themebox9_03
各設定項目を開くには項目の右にある青地に3本横線のアイコンをクリックします。

画像の設定画面です。画像を選択するにはクリップアイコンをクリックしてファイルブラウザから画像を選択します。
設定画面を閉じるには「>」アイコンをクリックします。

色の選択は上の図に示したようにカラーパレットを開いて望みの色をクリックします。デフォールトに戻すときは刷毛のアイコンをクリックします。

Themebox9_04
 スタイルはボタンの色調です。
上からグレー、白(太陽アイコン)、黒(月アイコン)となっています。

Themebox9_05
 ピクチャーポジションは背景画像のアンカー位置です。

Themebox9_06
 画像のパターンは繰り返しのパターンです。
上から繰り返し無し、タイル、横(X方向)繰り返し、縦(Y方向)繰り返しとなっています。

テーマが完成したら画面下 名称の右横にあるグリーンの保存ボタンをクリックします。
任意の場所にテーマのzipファイルが保存されますので、テーマを適用するには、一旦zipファイルを解凍しフォルダ全体をChromeの拡張機能ページにドラッグ&ドロップすればOKです。

以上 3つのアプリを比較しましたが、ユーザインタフェースの使いやすさ、再利用、修正が容易なことから2番目の Theme Creator がベストと考えられます。


« システムディスク換装時の注意点 | トップページ | 地球深部探査船『ちきゅう』 »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: Chromeのテーマ作成アプリの比較:

« システムディスク換装時の注意点 | トップページ | 地球深部探査船『ちきゅう』 »

最近のトラックバック

2022年9月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

My Home Pages

無料ブログはココログ