WorseTVカスタマイズガイド

WorseTVのカスタマイズ

WorseTVは様々なカスタマイズが可能な構造になっています。

ここでは外観をどのようにして変化させるかを説明しています。

内容はバージョン0.2.9に基づいていますのでその他のバージョンでは違いがあるかも知れません。

カスタマイズに必要なツール

WorseTVに含まれるHTMLとCSSファイルはShift JISのファイルなのでカスタマイズにはOS Xに標準でついているテキストエディットでできます。

Pythonスクリプトを利用している部分はUTF-8エンコードなのでスクリプトを編集する際はUTF-8を読めるエディタを使用してください。OS X付属のDeveloper Toolsに含まれるXcodeで編集することもできます。

ファイルを編集するにはウィジェットの中身を取り出さなければいけません。ウィジェットがインストールされているフォルダ(ホーム/ライブラリ/Wigetsかシステム/ライブラリ/Wigets)を開き、コントロールキーを押しながらクリックしてください。

表示されるコンテキストメニューから「パッケージの内容を表示」を選択するとWorseTVのソースが表示されます。

パッケージの中にはBetterTV.htmlとBetterTV.cssがあります。主にこの二つのファイルを編集することでカスタマイズを行っていきます。


HTMLのパラメタを変更する

BetterTV.html中にはJavaScript用のパラメタが含まれています。この値を変えることでJavaScriptの知識がなくても動作を変えられるようになっています。

各パラメタは<parameter>タグに書かれており、nameとvalueの二つの値の組になっています。例えば55行目には

  <parameter name="expandBothSide" value="true"/>
	
というパラメタが設定されていますが、value="false"とするとウィジェットが変形する際に両側に変形していたものが一方向だけに変形するようになります。

またデフォルトでは現在から3時間以内に放送する番組を表示するようになっている拡大モードの番組表ですが、1時間以内で十分だという場合には

  <parameter name="displaySpan" value="60"/>
	
とすればシンプルになります。

全てのパラメタはnameとvalueの二つの組になっており、以下のパラメタが用意されています。

name意味デフォルト値
collapseWaitウィジェットのサイズ変更の速さ33
collapseStepsウィジェットのサイズ変更の滑らかさ8
channelWidth番組表の一つのチャンネルの横幅80
expandHeight全体表示の際のウィジェットの高さ180
channelFormat全体表示をするときの番組表示のテンプレート
autoCollapseフォーカスが外れたときに自動的に小さくなるかどうかfalse
expandBothSide大きくなる際に両側にのびるか片側のみにのびるかtrue
displaySpan拡大画面での表示範囲(分)180
updateInterval番組表自動更新の間隔(秒)60
activityCheckIntervalスレの勢いを何回目の自動更新にあわせて行うか3
dateLine日付の変更時刻04:00
oddLaneColor奇数列のチャンネルの色#ffffff
evenLaneColor偶数列のチャンネルの色#e8f8f8

CSSの変更

WorseTVのデザインはBetterTV.cssに記述されています。このCSSを変更することでデザインをカスタマイズすることができます。

各要素は下の図のような名前で登録されているのでそれに対応したCSSを変更します。先頭が#とついているものはタグのid要素であり、ピリオドがついているものはclass要素です。変更したい要素についてBetterTV.css内で名前を検索し、その位置のCSSを書き換えてください。



以下では具体的に例を示します。

文字の大きさの変更

縮小画面で放送中の番組を表示し、拡大画面で番組の詳しい説明を表示するのはidが#descriptionの要素を編集します。 デフォルトでは

#description 
{
  position    : absolute;
  left        : 0px;
  top         : 0px;
  bottom      : 0px;
  right       : 0px;
  font-family : "HiraMaruPro-W3" "Lucida Grande";
  font-size   : 9px;
  background  : #fff;
  z-index     : 200;
  overflow    : hidden;
  padding     : 8px;
}
	
となっていますが、このfont-sizeを大きくすることで文字の大きさを変えられます。フォントの指定はfont-familyで指定できます。

拡大画面の番組表の指定は.programsのCSSを変更します。デフォルトの

.programs
{ 
  position   : absolute;
  background : white;
  overflow   : hidden;
  top        : 20px;
  left       : 2px;
  right      : 2px;
  bottom     : 0px;
}
	
にはフォント情報は含まれていませんが、これは.programsを含む.channelに書かれており、それを継承しているからです。.channel内のフォント情報を書き換えてもよいですが、そうすると放送局名まで変化してしまうので.programs内にフォント情報を書き加えた方がよいでしょう。例えば
.programs
{ 
  font-size  : 11px;
  ....(略)
}
	
とすればデフォルトよりも大きい文字で表示されます。

ウィジェット大きさの変更

デフォルトのデザインは画面の小さな機種で多くの放送局があっても画面からあふれないように、またウィジェットが画面を占有してしまわないようにサイズもフォントも小さめにしていますが、大画面を使用していてWorseTVにより広い空間を与えても構わない場合、あるいは逆にもっと小さくしてしまいたい場合には設定を変更することができます。

縮小モードの大きさはCSSに

#front 
{
  position : absolute;
  left     : 120px;
  top      : 0px;
  width    : 160px;
  height   : 260px;
  color    : black;
  z-index  : 100;
}
	
と書かれており、widthとheightを変更すると大きさを変えられます。

ただし注意しなければいけないのはウィジェットは起動したときに初期設定で大きさが決められており、その大きさを超えると表示されなくなってしまうためサイズを大きくするとウィジェットの一部しか表示されなくなってしまうことです。

起動したときのサイズはInfo.plistというファイルに書かれていますので、大きさを変更した場合にはこちらも変えなければいけません。Info.plistもウィジェットの中に入っています。

Info.plistには

  <key>Width</key>
  <integer>400</integer>
  <key>Height</key>
  <integer>260</integer>
	
というサイズが書かれており、この範囲を超えるとウィジェットが表示されません。そこでCSSで大きさを変更した場合は右端と下端が収まるようにこの値も増やしてください。

番組ジャンルの強調

各番組には映画、スポーツ、音楽、アニメ等の情報が含まれています。しかしデフォルトではこれらの情報は活用されていません。BetterTV.cssには以下のような記述があります。

/* genre classification */
.food    {}
.drama   {}
.sports  {}
.anime   {}
.music   {}
.movie   {}
.general {}
	
これらを書き換えると、各ジャンルに対してデフォルトでclassが設定されているので、それらに対して操作することができます。例えばスポーツ番組の背景を赤くするのであれば
.sports  { background:red; }
	
とします。フォントや文字の色、レイアウト等も変更できますが、詳しくはCSSの解説本を読んでください。

(現在ジャンルの設定が不完全なようですが、原因は調査中です)

番組情報の表示

拡大モードではデフォルトで番組名をクリックすると詳しい情報が表示されるようになっています。

イベント処理は基本的にJavaScriptで行いますが、番組用のテンプレートがHTML内に書かれているパラメタの書き換えでもある程度可能です。channelFormatパラメタはデフォルトでは以下のように記述されています。

  <parameter
   name="channelFormat" value="$program-start$ 
   <div onclick='showProgramDescription(event)'
   gcode='$gcode$' iepg='$iepg$' description='$description$'
  class='$genre$'> <span class='time'>$starttime$</span>$title$</div>
  $program-end$" />
      

記述が面倒ですが、番組情報の表示であるshowProgramDescription関数を呼ぶイベントがonclickになっています。 onclickをonmouseoverに変えるとクリックしたときではなくマウスを番組名の上にのせたときに詳しい情報が表示されるようになります。

録画補助情報の表示

番組のジャンルと同様にGコードやiEPG情報も含まれていますが全ての人が必要とする情報ではないのでデフォルトでは表示していません。

これらの情報はBetterTV.cssの.gcode要素と.iepg要素で指定されています。デフォルトでは以下のように両方とも表示されない(display:none)ようになっています。

.gcode 
{ 
  display      : none;
  ....(略)
}

/* iEPG icon to download */
.iepg
{ 
  display          : none;
  ....(略)
}
	
これらを表示させるには"display:block;"とすればよく、その表示方法についてもこれらの内部で指定できます。