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があります。主にこの二つのファイルを編集することでカスタマイズを行っていきます。
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 |
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;"とすればよく、その表示方法についてもこれらの内部で指定できます。