地平線の果てに…

　タグ：アプリ ( 2 ) タグの人気記事

Qonoha用スキン作り方

[ 2014-04 -18 20:28 ]
Qonoha用スキンを作ってみた

[ 2014-04 -14 20:18 ]

Qonohaにはスキンについての簡単なマニュアルが添付されていますが、
初めてスキンを作る方にはザックリし過ぎて不親切なものになっています。
今後分かりやすく書き直される予定があるかも？とも思ったのですが、
ファイルのタイムスタンプを見たら２年以上更新されていない。

もうこれは今後の（自分の）為にもう少し詳しく書いておくしかない！
てことで、添付されているマニュアルを元に、作り方を書いておくことにします。

■はじめに

スキンとは、アプリケーションのウィンドウやボタンなどのデザインを定義したものです。
一般的に画像ファイルと設定ファイルで構成されています。

※この記事は Qonoha バージョン2.2.3 の仕様を元に書かれています。バージョンアップにより仕様が変更されることがあるかもしれません.
※むしろ変えてほしい仕様がいくつかあります。
※公式マニュアルに書かれていないことは実際に使用し確認してから書いています。使用したOSはWindows8.1 なので、それ以外のOSでは違った結果になるかもしれません。

■用意するもの

画像を編集するアプリ
小さい画像を編集する事になるので、画像を拡大しながらでも編集しやすいものが良いです。
設定ファイルを書くテキストエディタ
公式マニュアルによれば、UTF-8（BOM※1付）形式かUTF-16（BOM付）形式のいずれかで保存する必要があります。保存可能なエディタを用意してください。
試しにシフトJIS形式で作ってみたところ問題なく使えましたが、公式に従ったほうが無難でしょう。

※1. BOMとは Byte Order Mark の略で Unicodeで符号化されていることや、符号化の種類の判別に使用されるファイルの先頭に埋め込まれている数バイトのデータ。

■画像作成

スキン画像とプレビュー画像があります。
スキン画像は、ウィンドウ、プログレスバー、ボタンのパーツ群で構成されています。それらのパーツを１枚の画像に描き、BMP形式、ファイル名"skin.bmp"で保存します。
プレビュー画像はQonohaでスキンを選択する時に表示される画像で、BMP形式、ファイル名"preview.bmp"で保存します。

画像の透過
画像を透過処理させることができます。
例えばウィンドウを四隅を丸く削った時など、透過させたい範囲を透過色（カラーコード#FF00FF（　　））で塗ることにより、あたかもそこには何も無いかのように背後のものが透けて見えるようになります。
但し、全ての画像パーツを透過処理させることはできません。透過処理の可否は各項目を参照してください。

ウィンドウ
Qonohaメインとプレイリストの２つウィンドウを描きます。
メインとプレイリストの画像を共有しても構いませんが、処理に異なる点があるため注意が必要です。詳しくは skin.ini設定の項目を参照してください。

メインウィンドウのサンプル画像です。
実際は小さい画像ですが、ピクセルが分かるように拡大してあります。
四隅は丸く削ってあるため、透過色が塗られています。
メインウィンドウは四隅と上下左右の8つパーツに分解して使います。中央部分が映像が流れる場所になります。
実働サイズとのギャップは、上下左右のパーツが繰り返し並べられたり、削られることによって調整されます。
メインウィンドウは四隅のパーツのみ透過処理ができます。上下左右のパーツに透過色を使っても、そのままの色で描画されます。
また、透過された場所はウィンドウとして扱われません。

ボタン
ボタンには、通常、フォーカス（マウスカーソルがボタン直上にある状態）、押下（ボタンを押している状態）、使用禁止（クリックできない状態）の４つの状態があります。更にトグルになっているものもある為、１つのボタンで最小４つ、最大８つのパターンを描くことになります。

[閉じる]ボタンです。左から[通常][フォーカス][押下][使用禁止]の順で隙間なく並べて描きます。それぞれのサイズは同一でなければなりません。
これがボタンの基本セットです。

[最大化・元に戻す]ボタンです。２つの機能が交互に切り替わるトグルになっているボタンです。
基本セットを２つ上下に隙間なく並べて描きます。トグルボタンはこれで１つのセットになります。
それぞれのサイズは同一でなければなりません。

トグルボタンには、[再生/一時停止]、[最小化/元に戻す]、[全画面ON/OFF]、[連続再生ON/OFF]、[リピートON/OFF]があります。

ボタンも透過処理ができます。但し、制限（バグ？仕様？）があるので注意が必要です。
一番左（トグルボタンの場合左上）の通常状態ボタンに描かれた透過位置が全てのボタン状態に適用されます。それ以外のボタン状態に描かれた透過色はそのままの色で描画されます。故にボタン状態によって透過位置を変えることはできません。
また、透過された場所はボタンとして扱われないため、クリックができません。

プログレスバー
シークバーとボリュームバーがあります。
バーは４つのパーツから構成されています。左から、左端絵、バック絵、バー絵、右端絵です。
実働サイズとのギャップは繰り返し並べられたり、削られることによって調整されます。

ブログレスバーは少し特殊な仕様になっているため、図解で説明します。

プログレスバーのサンプル画像です。
上から、左端絵、バー絵、バック絵です。
左端絵は右と左で色を変えてあります。

左端絵（右端絵も同様）は画像が読み込まれると左右半分に分割され、重ねた状態にされます。
左右どちらの画像が描画されるかは、バー絵と重なっているか否かで決まり、バー絵やバック絵より手前に描画されます。
左半分はバー絵と重なっていないとき、右半分は重なっているときに描画されます。
左端絵の左端から5ピクセル以降が実際にシークできる範囲になります。
緑の矢印が示しているラインは4ピクセル目と5ピクセル目の間に引かれています。

実際に表示されるとこうなります。
上がシーク0目盛りの場合、下がシーク14目盛りの場合です。
黄色の細線は実際のシーク位置を表しています。
シーク0でも点滅している4ピクセル分は描き込まれているため、右半分（バーと重なっている）が描画されます。

こんな感じでシークしていきます。
右端絵の場合、右端4ピクセルはバー絵と重なることはありません。

よく分からない場合は、左端絵と右端絵は幅8ピクセルで作り、外側4ピクセル分は表示されない、と考えてください。

プログレスバーは透過処理はできません。

プレビュー画像
Qonohaでスキンを選択するときに、プレビューを表示させることができます。
画像がない場合は表示されません。

プレビューと言っても単に画像ファイルを表示しているだけです。
スキンを作ったら実際に使っているところをキャプチャして作りましょう。
サイズは幅203高さ217を超えると画面に入りきらず切れてしまうので、それ以下に調整しましょう。

■skin.ini設定

設定ファイルは、UTF-8（BOM付）形式かUTF-16（BOM付）形式で作成し、ファイル名は"skin.ini"でなければなりません。
skin.ini には、MAINとBUTTONの２つのセクションがあります。
MAINはウィンドウやプログレスバー、フォントの設定を行い、BUTTONはウィンドウに配置するボタンの設定を行います。

各セクションの先頭には'['+"セクション名"+']'と記述します。
例：[MAIN]

RECT
RECTとはrectangle（矩形,長方形）の略で、矩形の始点座標と終点座標（又はサイズ）の情報のことです。
Qonohaスキンでは、水平方向をX軸、垂直方向をY軸、画像データ（skin.bmp）の左上の座標を(0,0)として、矩形の始点（左上）の(X,Y)座標と終点（右下）の(X,Y)座標の4つ数値を指します。

例：10,20,300,400

公式マニュアルによればそういうことになってますが、実際の仕様は少し違うため注意が必要です。
例えば(100,100)を始点座標として、幅10ピクセル高さ20ピクセルの矩形を指定する場合、終点座標は(109,119)になるので、(100,100,109,119)としたいところですが、Qonohaでは(100,100,110,120)となります。
何故このような仕様にしたのか定かではありませんが、おそらく内部的に、幅110-100=10ピクセル、高さ120-100=20ピクセル、と計算するためでしょう。
ということで、幅（Xサイズ）と高さ（Yサイズ）を始点座標(X,Y)に足した数字が終点座標になると考えてください。

COLORREF
COLORREF とは色を表す数値の事です。Qonohaスキンでは10進数で記述します。
例えば、カラーコード#7B02E1をCOLORREFにする場合、まず、R,G,B に分解し（R:7B,G:02,B:E1）、それをBGRの順に並び替え（E1027B）、16→10進数変換します。B*65536+G*256+Rと同じです。

アンカー
ウインドウ上の基点の事です。
（上、下）と（左、中央、右）があります。２つを組み合わせることによって最大６つ基点を表すことができます。
また、片方だけ使うことにより、上側、下側、左側、右側、という使い方もされます。

[MAIN]セクション
ウィンドウやプログレスバー、フォントの設定を行うセクションです。
[キー]=パラメータ
のように記述します。

各キー説明は以下の通り。

MAIN
Qonohaメインウィンドウの設定をします。
例：MAIN=18,320, 124,0,140,18, 127,0,143,18, 126,0,134,18, 124,2,125,10, 142,2,143,10, 124,3,128,31, 127,3,143,31, 126,3,130,31, 320,0,3
MAIN=
タイトルバー（キャプション）の高さ,
最小の幅,
左上パーツ（RECT）,
右上パーツ（RECT）,
上枠パーツ（RECT）,
左枠パーツ（RECT）,
右枠パーツ（RECT）,
左下パーツ（RECT）,
右下パーツ（RECT）,
下枠パーツ（RECT）,
音楽ファイル再生時の幅,
映像表示部分の最小の高さ,
全画面時にマウスの位置によって表示する部分（1:上、2:下、3:上下、4:全て）
左上、右上、左下、右下、の４つのパーツのみ透過処理ができます。

FONT
タイトルバーの文字のフォントを設定します。
例：FONT=MS UI Gothic,13,1,5295100,288658,16,3,0,46079,90
FONT=
フォント名,
フォントの高さ,
フォントを太字に（1:する、0:しない）,
フォントの色（COLORREF）,
陰の色（COLORREF）,
表示位置（左から）,
表示位置（上から）,
陰の位置（0より大きいと右下、小さいと左上）,
非アクティブ時のフォントの色（COLORREF）,
文字が表示される範囲の右端の位置（右から）
INFOPANEL
再生時間と再生速度を表示するパネル設定をします。
このキー設定を省略した場合はシークバーに表示されます。
INFOPANEL=
パネル画像（RECT),
左端の位置（アンカー1からの距離、中央の場合はマイナスも可）,
上端の位置（アンカー2からの距離）,
アンカー1（0:右、1:左、2:中央）,
アンカー2（0:下、1:上),
フォント名,
フォントの高さ,
フォントを太字に（1:する、0:しない）,
フォントの色（COLORREF）,
再生時間の表示位置（左から）,
再生時間の表示位置（上から）,
再生時間表示の基準点（0:右、1:左、2:中央）,
再生速度の表示位置（左から）,
再生速度の表示位置（上から）,
再生速度表示の基準点（0:右、1:左、2:中央）,
再生速度の表示（0:非表示、1:変更時のみ、2:常に表示）
透過処理ができます。

SEEKBAR>
シークバーの設定をします。
例：SEEKBAR=6,251,104, 259,2,251,10, 259,10,251,11, 259,0,251,1, 259,32,27,85,35,0,再生位置、区間指定,Tahoma,10,1,-1,0,5295100,0,1
SEEKBAR=
左端パーツ（RECT）,
右端パーツ（RECT）,
バックパーツ（RECT）,
経過を示すバーパーツ（RECT）,
シークバー左端の位置（左から）,
シークバー上端の位置（アンカーからの距離）,
シークバー右端の位置（右から）,
シークバー下端の位置（アンカーからの距離）,
アンカー（0:下　1:上）,
ツールチップに表示する文字,
時間などを表示するフォント名,
フォントの高さ,
フォントを太字に（1:する、0:しない）,
フォントの表示位置（上から）,
フォントの色（COLORREF）,
区間再生範囲を表示する色（COLORREF）,
区間再生範囲を表示する位置（0:下、1:上）,
マウスによるシークの際に再生位置の時間を表示するか（1:する　0:しない）
※「シークバー下端の位置（アンカーからの距離）」はアンカーを下に設定した場合、問題があり注意が必要です。
本来なら「シークバー上端の位置（アンカーからの距離）」からシークバーの高さ分を引いた値になりますが、逆に足した値にしてください。
バグだと思いますが、今更修正しても既存のスキンとの互換性が失われるため修正できずにいるのかもしれません。

SEEKTHUMB
シークバーのつまみを設定します。
この設定は時間表示パネルが有効の時のみ使用できます。
この設定をしない場合、つまみは表示されません。
SEEKTHUMB=
つまみの画像（RECT）,
つまみの位置（上から）
透過処理はできません。

VOLUME
ボリュームバーの設定をします。
例：VOLUME=6,244,104,251, 2,244,10,251, 10,244,11,251, 0,244,1,251, 70,7,71,26,0,0,ボリューム
VOLUME=
左端パーツ（RECT）,
右端パーツ（RECT）,
バックパーツ（RECT）,
音量を示すパーツ（RECT）,
全体の幅,
全体の高さ,
左端の位置（アンカー1からの距離、中央の場合はマイナスも可）,
上端の位置（アンカー2からの距離）,
アンカー1（0:右、1:左、2:中央）,
アンカー2（0:下、1:上）,
ツールチップに表示する文字
VOLUMETHUMB
ボリュームのつまみを設定します。
この設定をしない場合、つまみは表示されません。
VOLUMETHUMB=
つまみパーツ（RECT）,
つまみの位置（上から）
透過処理はできません。

LIST
再生リストのウィンドウの設定をします。
例：LIST=0,0,0,0, 0,0,0,0, 124,48,140,52, 126,48,142,52, 125,48,141,52, 0,0,0,0
LIST=
左上パーツ（RECT）,
右上パーツ（RECT）,
左下パーツ（RECT）,
右下パーツ（RECT）,
下端パーツ（RECT）,
左右パーツ（RECT）
左上と右上の設定はLISTTOPに移行されました。ここでの設定は無効です。
左端と右端でパーツの区別はなく、左右パーツが共に使われます。

透過処理はできません。

LISTCOLOR
再生リストの色に関する設定をします。
例：LISTCOLOR=5000268,0,5426172,0,-1,46079,46079,9211020,1
LISTCOLOR=
背景の色（COLORREF）,
通常の文字色（COLORREF）,
選択中の背景色（COLORREF）,
選択中の文字色（COLORREF）,
再生中の背景色（COLORREF）（指定しない場合は-1）,
再生中の文字色（COLORREF）,
選択中のセル枠色（COLORREF）,
再生中のセル枠色（COLORREF）,
再生中の文字を太字に（1:する、0:しない）
LISTTOP
再生リストウィンドウのタイトルバーの設定をします。
この設定を省略した場合、メインウィンドウの設定が使われます。
LISTTOP=
左上パーツ（RECT）,
右上パーツ（RECT）,
上枠パーツ（RECT）,
文字の表示位置（RECT）（左から）,
文字の表示位置（RECT）（上から）
左上と右上のみ透過処理ができます。

LISTCLOSE
再生リストウィンドウのタイトルバーに表示する[閉じる]ボタンの設定をします。
LISTCLOSE=
ボタン画像（RECT）,
表示位置（アンカー1からの距離）,
表示位置（アンカー2からの距離）,
アンカー1（0:右、1:左、2:中央）,
アンカー2（0:下、1:上）
透過処理ができます。

[BUTTON]セクション
ボタンの設定を行うセクションです。
以下の書式で記述します。

Count=ボタンの数

[番号（1からの連番）]=
　　コマンド（左クリック）,
　　コマンド（右クリック）,
　　ボタンセットRECT,
　　ツールチップ文字,
　　表示位置（アンカー1からの距離、中央の場合はマイナスも可）,
　　表示位置（アンカー2からの距離）,
　　アンカー1（0:右、1:左、2:中央）,
　　アンカー2（0:下、1:上）

例：1=PLAY,,80,323,200,383,再生/一時停止,10,38,1,0
例：2=CAPTURE,SHOWCAPDLG,80,0,200,60,キャプチャ/キャプチャダイアログ,30,38,1,0

コマンドとその機能は以下の表を参照してください。

コマンド
機能
PLAY 再生、一時停止
STOP 停止
LIST 再生リスト
EXIT 閉じる
MAXIMIZE 最大化
MINIMIZE 最小化、元に戻す
FULLSCREEN フルスクリーン ON・OFF
PREVIOUS 前へ
NEXT 次へ
FORWARD 早送り
REWIND 巻き戻し
SKIP スキップ1
SKIPBACK 逆スキップ
SKIP2 スキップ2
SKIPBACK2 逆スキップ2
STEP コマ送り
STEPBACK コマ戻し
OPEN ファイルを開く
POWER 再生終了後の動作（４種類の絵）
RATE_UP 再生速度アップ
RATE_DOWN 再生速度ダウン
RATE_RESET 再生速度リセット
MENU_RATE 再生速度の選択メニュー
STARTPOS 区間再生開始位置指定
ENDPOS 区間再生停止位置指定
CLEAR_SECTION 区間再生区間解除
CAPTURE キャプチャ
SHOWCAPDLG キャプチャダイアログ
SEQUENCE 連続再生ONOFF
REPEAT リピートONOFF
SHUFFLE シャッフルONOFF
PRECLIST 以前のリストを復元
MUTE ミュートONOFF
MENU_FILE ファイルメニュー
MENU_FAVORITES お気に入りメニュー
NORMALIZE 音量ノーマライズONOFF
廃止の可能性あり
NORMALIZE2 音量ノーマライズONOFF
モード表示
MENU_NORMALIZE ノーマライズモードの選択メニュー
MENU_PITCH 音程の選択メニュー

・ボタンは左クリックコマンドの種類により有効・無効が切り替えられるため、右クリックコマンドは適切な割り当てが必要です。
・上記以外のコマンドはコマンドIDを記述することで割り当てることが可能です。コマンドIDは"commands"というファイルを参考にしてください。例えばcommandsのなかに「サイズ(オリジナル) 32829」と言う記述があります。この場合32829をコマンド名として記述すれば「サイズ(オリジナル) 」のコマンドボタンを作成できます。ただしコマンドIDは変更されるかもしれません。

■最後に

公式マニュアルを元に書いていますが、一部、名称や説明文を変更したり、情報の訂正や補完をしてあります。
Qonohaスキンを作りたい方のお役に立てれば幸いです。

自作したスキン置き場はこちら
たまに更新してます。

■ [PR]

▲ by angrywaves | 2014-04-18 20:28 | メモ

　 Qonoha用スキンを作ってみた

純国産マルチメディアプレイヤー Qonoha

長年 GOM Player を使っていたのですが、64bit版もないし、広告の為にネットにアクセスするので設定ファイルを書き換えたり、ファイヤーウォールでブロックしたりと、とても厄介でした。
そこにウィルス騒動があり、
「GOMってデメリットの方が大きいんじゃね？！」
と思い、GOMを捨てる事を決めたのです。

他に良いプレイヤーはないかと探しまわり見つけたのが Qonoha でした。
使い始めて思ったのが、使い慣れたものが良いものとは限らない、という事ですかね。

なんというか・・・、GOMより断然良かった。

うざい広告がない
怪しいネットアクセスがない
64bit版がある
サクサク動く
カスタマイズできる
様々な形式の動画が再生できる（codecは別）
現在も更新されている

求めていた条件を完全にクリア。

国内では知られたプレイヤーのようですが、まだ使ったことがない方にはお勧めです。
キー操作などカスタマイズできるので、使い慣れたプレイヤーを真似れば、スムーズに移行できるかと思います。

以上の理由から Qonoha を使っていくことになったわけですが、
見た目がどうにも気にいらない。
GOM然り、WMP然り、デフォルトのデザインを好きになれたためしがない。

デフォルトスキンはこんな感じ。

※動画再生画面
　サンプルとして FF13 ライトニングリターンズ
　1080pを1/3スケールで再生
　原寸大を見たい方は画像クリックでビュワーへ
悪くはない。
シンプルだし、無駄なデザインがなく必要以上に場所を取らない。
悪くはないんだけれども、
何だか野暮ったい感じがする。
シンプル且つコンパクトが一番重要だけど、できればデザインも良くしたい・・・。
そんなスキンはないものか。

スキンを探し始めて気づいたのが、
Qonoha には"スキンについて.pdf" という
自作する人へ向けたリファレンスマニュアル的なものがあったりします。
内容は skin.ini の設定方法だけなので、マニュアルとしては不完全ですが、
それでも大いに手助けとなります。

今までは誰かが作った自分の好みに一番近いものを使ってきましたが、
自分で作れば探す必要がない。
求めるものの１つはシンプル。
シンプル故、比較的簡単に作れるのではなかろうか。

他の方が作ったスキンを参考にしつつ
ドット絵エディタを使い、ちまちまとした作業を繰り返し、
作ってみました。

シンプル！
コンパクト！（デフォルトより少しだけ・・・）

黒いウィンドウは映像を引き立たせるので、
ウィンドウモードで動画を見るには良いと思うんですよね。
パーツを小さくさせすぎず、でもなるべくコンパクトに作ってあるので、
使いやすさを保ちつつ、スペースを無駄に使うこともない。
作業をしながら動画を見たい、そんな俺に打ってつけ。

シークバーを細くすれば、もう少し削れるかとも思いますが、
細くしすぎるとマウスカーソルを合わせづらくなってしまうんですよね。
それは使用しながら微調整していこうかと。

ということで、折角作ったので公開。
>ダウンロードはこちら
興味のある方は使ってみてください。
ボタンの機能はマウスをかざすと出るポップアップメッセージに書かれています。
左右のクリックで機能が違う場合は、「左クリック / 右クリック」という表記になっています。

Qonoha用スキンを作ってみたい方はこちら

■ [PR]

▲ by angrywaves | 2014-04-14 20:18 | 雑記


	ファン申請 ※ メッセージを入力してください

ファン申請