2015
03
22

 Fedora 21 Xfce の UI カスタム: Win10TP 風にしてみた

Fedora21_Xfce_look_like_Win10TP.jpg

Fedora 21 Xfce の UI を、Windows 10 TP 風にしてみました。
移行にて試用環境が余ったんで、初歩の外観カスタムを詳細解説でっす。

まぁ「 Windows 風」なんて、単にイメージ・コンセプト例の話。
質素を通り越して、殺伐とした印象の標準 UI も・・・・
original_theme_xfce_fedora21.jpg
そこそこ弄れば、随分と印象変わりますよっ、ってなお話。

UI に既定要素が大きい環境は、手軽でも「テーマ」に左右される。
この点 Xfce は、多少手間は掛かるけど、細かく弄れますよ。


○ Win 風なアイコン&各種テーマを、収集・適用
 ▽壁紙
まぁ、そんなの Win 10 TP から拝借で完了ですが・・・
なにやら配布されてる方もいらっしゃいます。

Windows 10 Technical Preview Wallpapers and Sounds
http://thenathanns.deviantart.com/art/Windows-10-Technical-Preview-Wallpapers-and-Sounds-485828925

Windows 10 TP ( build 98xx 標準の)壁紙のみ
http://i.imgur.com/aiAvfAM.jpg

Win10 TP 再現でないなら、単純に公式からのチョイスでも。
windows.microsoft.com : Desktop background
http://windows.microsoft.com/en-id/windows/wallpaper

 ⇨配置と設定
壁紙として=任意配置&「デスクトップの設定(S)」>「背景(B)」にて。
ログイン画面( lightdm-gtk-greeter )等にも使うなら、以下で。
 code:
sudo mv 画像名 /usr/share/backgrounds

※備考:システム・サウンドについて
雑に言うと標準機能では再生不可、要・設定記述+スクリプトなので割愛。
えぇ、メンドイんでやりません。そこまで重要とは思えないし。


 ▽ xfwm4 テーマ
XFCE-LOOK : Win8-FirstTry 1
http://xfce-look.org/content/show.php/Win8-FirstTry?content=155906
※注:うち、xfwm4 テーマのみ利用です。
同梱 gtk-theme は描画指定が不適切、同削除でも構いません。

 ⇨配置と設定
~/.themes フォルダを(無ければ)新規作成します。
なお「 ~/. 」とは「ホーム」で「 Ctrl + H キー」= 隠し階層の意。
ついでなんで(アイコン用の) ~/.icons も作成しておいて下さい。

展開した「 Windows-8 」フォルダを「 .themes 」内へ配置。
「設定マネージャー」>「ウィンドウマネージャー」>
「スタイル(S)」タブ>「テーマ(T)」にて設定します。

※備考
システム利用= /usr/share/~配置だけど、ユーザ環境なら上記で可。
ってか GUI 操作が好ましい初級者は、~/. に置く方がラクじゃね?


 ▽マウス・カーソル
GNOME-LOOK : Windows 8 cursors 1.01
http://gnome-look.org/content/show.php/Windows+8+cursors?content=155025

 ⇨配置と設定
展開「 Win8 」フォルダを「 .themes 」内へ配置。
「設定マネージャー」>「マウスとタッチパッド」>「テーマ(H)」タブにて。

※備考 1.
xfwm4 , cursors , gtk-themes は .themes フォルダを共用。
各々 gtk-themes 同梱だと「外観」>「スタイル(Y)」にも反映です。
と言うことで、各テーマ名 ↔ 設定を取り違えませんように。

※備考 2.
Win7 風は「 aero-glass 」と「 Win8 」というカーソル・テーマ。
なんですが、複数の派生テーマ・パックにも同梱になってます。
という訳で、両方+α が入った以下を使う手もアリ。

GitHub : nhermosilla14/WinAte pack for LXDE
https://github.com/nhermosilla14/WinAte
※補足
利用はカーソル( aero-drop / win8 )と、壁紙( Win8 用)のみ。
aero-drop =小ぶりな「影」付き / Win8 =標準的?な Aero スタイル
同梱 gtk-theme (非 OB )も利用可ですが、後述「 Win2-7 」系です。


 ▽アイコン:Metro (= Modern , Flat )風
GNOME-LOOK : (windows8 Style) 0.1 Sigma metro
http://gnome-look.org/content/show.php/+%28windows8++Style%29+0.1+Sigma+metro?content=167327

 ⇨配置と設定
展開「 Sigma-Beta 」フォルダを、上記で作成の「 .icons 」内へ配置。
「設定マネージャー」>「外観」>「アイコン(I)」タブにて。

※備考
正直コレが最良とは思いませんが、現行 GTK 対応にての採用。
要は「最新 Win 風」かつ、アイコン変更ベース、という観点です。


 ▼「 Win2-7 」系アイコン / テーマ・パックについて
GNOME-Look 等で見つかる、殆どの「 Win 風」ってコレ系ですね。

でも元が Ubuntu 9.x / GTK2 用で、現行 GTK には対応問題が多い。
一部 GTK3 を称する内容も、実は旧態( GTK3.x 系)でダメ。
さらに原典 Win2-7 明示しない、名称違いも複数にて、要注意です。

ただまぁ、問題修正(主にサイズ展開)すれば、アイコン適用は可。
と言う訳で「アイコン流用」に適した内容限定で、紹介しときます。

 ▽アイコン: GTK2-Win7 風
GNOME-LOOK : Win2-7 Remix 1.02
http://gnome-look.org/content/show.php/?content=153241


 ◇ 各種アイコン画像の加工について
各種アイコン・ png 画像は、標準系アプリのみで編集可。

 ☆ 適切サイズのアイコン= png 画像を入手したい
使用アプリ: Pinta
 code:
sudo dnf-y install pinta

 ▷ png 画像を Pinta で開き
「画像(I)」>「画像サイズの変更」
resize_icon_Pinta.jpg
「絶対サイズ指定:」>「(任意)ピクセル」指定
「ファイル(F)」>「名前をつけて保存」⇨各アイコン・テーマへ
その後「元に戻す」ボタンから、他サイズへ連続変更可です。

☆ scalable = SVG 画像が欲しい
使用アプリ: Shutter
 code:
sudo dnf-y install shutter

 ▷ png 画像を Shutter で開き
画像編集ボタン>「ファイル(F)」>「 SVG としてエクスポート(E)」
にて、png ⇨ SVG コンバート可能です。

と言う訳で、原画に 96px 以上の png 画像があれば、全て揃います。
なおアイコン置き換え時は、基準モノと名称違いの S リンクに注意。

☆ Windows 用 .ico アイコンを使いたい
上記紹介アプリには、ImageMagick という CUI ツールが内包です。
(同梱なので紹介してませんが、単体入手も可)

ico アイコンを任意フォルダに入れ、同ディレクトリで端末開示
以下コマンドで一括変換です。
 code:
convert *.ico *.png

command_convert_image_magick.jpg

また、定番ツール Resource Hacker 利用なら、本家 ico も抽出可能。
256px 用だけでも良いのですが
ResourceHacker_Win10TP_icon_dll.jpg
(赤枠)グループ・アイコンを吸えば、各種サイズが同梱です。
まぁ、フリー配布の ico アイコンだと、割とこの形式が多いかな。

※激しく注意!
えぇ、上記を応用=完コピな Win アイコン・テーマも作れますね。
無論ソレ、公開しちゃダメ・絶対。


※ Image Magick の活用
ちなみに png 画像のサイズ編集なんかも、Image Magick で可能です。
ただその辺は、同ツール慣れがないと逆に面倒かと思い、紹介してません。
イロイロ覚えたい方は、以下等を参照のこと。

Image Magick コマンドの使い方
筑波大学 流域管理研究室 とらりもん Image Magick
http://pen.agbi.tsukuba.ac.jp/~RStiger/hiki2/?Imagemagick

京都大学大学 環境情報学講座 ImageMagickによる基本的な画像処理

http://www.envinfo.uee.kyoto-u.ac.jp/user/susaki/image/magick_process.html


 ▽ GTK-Theme
複数試してみましたが、私は標準「 Bluebird 」が無難と感じました。
Nemo ( GTK3.1x )フォルダ描画
Nemo_Winlook_Fedora21.jpg

Thunar ( GTK2 )フォルダ描画
Thunar_Winlook_Fedora21.jpg

共に部分アイコンは、任意に変更済み。

※備考: gtk-theme の描画対応について
ざっくり言うと、GTK2/3.14 両対応の内容が必須。
⇨ Xfce 及び、同標準系アプリ描画= GTK2
⇨ GNOME 系の周辺・最新アプリ= GTK3.14 ということ。

注意点は GTK3.x じゃダメで、最低 GTK3.12 以降に要対応。
殆どの Ubuntu 対応テーマ= 3.x 系なんで、同専用になります。


○パネルを「タスクバー」風の外観へ変更
Build 98xx 系の外観を模すと、こんな感じかな
settings_panel_win10_look.jpg
要約:列サイズ:38px 、背景:単一色( Win テーマ)透明度 50%

settings_panel_launcher.jpg
ランチャー(ピン留め再現)は、ソレっぽい画像、間にセパレータx2


○ Whisker Menu を「 Start メニュー」風にカスタム
入ってなければ、以下で導入
 code:
sudo dnf -y install xfce4-whiskermenu-plugin

まず「カテゴリを左に表示する(G)」(赤枠)は必須かも
settings_WhiskerMenu.jpg
1.5 系新機能の透明度(青枠、対応:カテゴリー部)は任意

 ▷配色の変更
作例について、先ず結論というか同内容を書きます。
gtkrc2_WhiskerMenu.jpg

~/.gtkrc-2.0 を新規作成し、以下記述。

style "win10"
{
bg[NORMAL] = "#343131"
bg[ACTIVE] = "#00ace9"
bg[PRELIGHT] = "#198cff"
fg[NORMAL] = "#fff"
fg[ACTIVE] = "#fff"
fg[PRELIGHT] = "#fff"
}
widget "whiskermenu-window*" style "win10"
style "menu-detail"
{
base[NORMAL] = "#2857A6"
base[ACTIVE] = "#00ace9"
text[NORMAL] = "#fff"
text[ACTIVE] = "#fff"
}
widget "whiskermenu-window*TreeView*" style "menu-detail"


なお、同カラー・コードの確認・指定には gcolor2 を利用
 code:
sudo dnf -y install gcolor2
gcolors2.jpg
スポイト機能(青丸部分)を使えば、web 上の色コードも判ります。

ってことで Win10 TP のテーマ配色置いときますね。
Theme_colors_Win10TP.png

※備考:同テーマ・カスタム手法についての参照
Graeme's Blog Theming Whisker Menu
https://gottcode.wordpress.com/2013/11/27/theming-whisker-menu/

上記が初出?みたいですが、私にはコッチの記事が解り易かったです。
 AMG workshop Whisker menu theme
http://amgworkshop.com/whisker-menu-theme/


 ▷ Win キーでメニュー・ポップアップ設定
「設定マネージャー」>「キーボード」
「アプリケーションショートカットキー(P)」タブに「追加(A)」
key_popup_whiskermenu.jpg
コマンド: xfce4-popup-whiskermenu
ショートカット: Win ( Super )キー

※備考 2 : f21 上の Whisker Menu 1.5 動作不全について
「 Mugshot 」(プロファイル・アイコンの編集)=動作せず
error_whiskermenu_magshot.jpg
⇨根本的に Whisker Menu 同梱機能なんで、対処不能

「アプリケーションの編集(E)」(メニューの編集)=機能せず
⇨既定 menulibre = Fedora にパッケージなし
⇨代替に alacarte =設定が反映されない

試しに menulibre ソース・ビルド= alacarte 同様にダメ、設定反映せず
MenuLibre_Fedora21.jpg


○ Cairo-Dock の応用: Win7 風ガジェット
導入
 code:
sudo dnf -y install cairo-dock

作例: Dock 配置を一切せず(隠す設定もしない)、右側へ配置
「時計」「システム・モニタ」「ログアウト」をデスクレット化
WhiskerMenu__Desklet.jpg

で、Dock 表示に見えるのは、各ウィンドウの最小化時のみ。
それ以外では、この部分には全く表示されません。

ちなみに左側 Whisker Menu キャプチャは、Win2-7 系適用モノ。
えぇ、アイコンとしてはコッチの方が見易いんですが・・・
修正範囲が広過ぎて説明ムリ!だったので、記事として不採用っス。

「ログアウト」デスクレットはどれか?というと
logout_desklet_CairoDock.jpg
ダミーに「ゴミ箱」アイコンを据えてるだけ。
Xfce には同等パネル機能アリですが、外観対策でコッチを採用。
あと通知領域アイコン類も、少々弄ってます。


○ lightdm ログオン画面を Win8 風に編集
[greeter] 以下へ追加記述・保存します。
 設定例(例では壁紙、フォントを事前導入)
 code:
sudo leafpad /etc/lightdm/lightdm-gtk-greeter.conf

[greeter]
background=/usr/share/backgrounds/Default-Windows-8.1-RTM-lock-screen-image.png
theme-name=Xfce-dusk
position=25%,center 75%,center
default-user-image=/usr/share/icons/Sigma-Beta/emblems/scalable/emblem-personal.svg
font-name=MMCedar P 11
xft-antialias=true
xft-dpi=96
xft-hintstyle=slight
xft-rgba=rgb
show-indicators=~session;~power
show-clock=true
clock-format=%B%e日 (%a) %R



参考:上記ログオン画面の壁紙
 windows8core.com: Win8.1 RTM ロック画面の壁紙
http://www.windows8core.com/wp-content/uploads/2013/08/Default-Windows-8.1-RTM-lock-screen-image.png


基礎は一通り触れたつもりですが、いかがでしょうか。
家具でも家電でも、UI を重視しない人は居ませんよね?
「余計な配色なく・質素が良い」ってのも、UI 嗜好の一つ。

これ以上は CSS 記述とか、込み入った内容なんで、脱・初級向き。
ってか、そこまで出来れば、自分で gtk-theme 作れますよ。

まっ、やってるうちに慣れるし、応用も効くでしょう。



ドラゴンクエスト メタリックモンスターズギャラリー はぐれメタル
スクウェア・エニックス (2014-11-28)
売り上げランキング: 404
スポンサーサイト

«  | HOME |  »