Tips » BlackBerry用テーマの作り方 SVG編

以前、Theme Builder を使用した BlackBerry テーマの作り方 についてご説明しました。今回は SVG と組み合わせた、より高度なテーマの作成方法について解説したいと思います。

今回作成するのは、ホームスクリーンのアイコンを縮小表示することで(通常6個のアイコンを)8個同時に表示することのできるテーマです。

今回の例では SVG は (Composer 等で生成するのではなく) 手書きします。これにより柔軟で無駄のないコードを作成することができます。(同じことが Composer を使った SVG 生成でも可能なのかもしれませんが、Composer は私達には難しすぎました…。)

BlackBerry のテーマ用の SVG は独自に拡張されている部分やドキュメント化されていない機能などが多いので、そういった機能についても紹介したいと思います。

目次

1. 8個アイコンのための設計
2. BlackBerry の SVG 仕様
3. SVG の外枠
4. アイコンの定義と配置
5. loadScene でのアプリケーション起動設定
6. フォーカス時のアクション定義
7. 完成した SVG
8. Theme Builder への組み込み
9. ダウンロード

8個アイコンのための設計

BlackBerry Bold 9000 や 9700 では、ディスプレイの横幅は 480 ピクセルです。そしてアイコン画像のサイズは(マージンを含めて) 80 ピクセル角で作成されているため、横に並べられるアイコンの数は6つでぴったりです。

したがってアイコンのサイズを 60 ピクセル角に縮小することで、横に8つのアイコンを並べて表示することができるようになります。

アイコンの縮小は、Theme Builder からアイコンを(60 ピクセルで作成したものに)差し替えることでも可能ではあるのですが、それでは変更がアプリケーションリストにも反映されてしまってそちらの見栄えが悪くなってしまいますし、また置き換えアイコンを用意していないサードパーティーのアプリケーションを使用する場合には破綻してしまいます。

そこでアイコンのサイズの縮小は SVG 内で動的に行うことにします。アイコンの縮小、配置、アクションの設定等までを行う SVG ファイルを作成し、それを Theme Builder で読み込むようにします。

注意: このように縮小したアイコンを使用した場合、OS 4.6 や OS 4.7 のデバイスではホームスクリーンのアイコンに表示される新着インジケータ(あの赤い星)が更新されなくなるという問題があります。デバイス側でのイベント処理の不具合によるものらしいです。わかっていればそれほど大きな問題ではないのですが、気になるかたは注意してください。OS 5.0 以上であればこの問題はありません。

BlackBerry の SVG 仕様

BlackBerry で使用できる SVG の仕様としては、BlackBerry – Plazmic Content Developer’s Kit – Manuals and Guides にある、SVG for BlackBerry Smartphones Reference Guide (PDF) が最新版になると思います。

BlackBerry の SVG は SVG Tiny 1.2 等の各種規格から部分的に取り入れたものの集合に独自の拡張(loadScene や switchGroup など)を加えたものだそうです。ただしそれに加えて文書化されていない(テーマ用の?)独自機能(useApplicationIcons 要素や slot の使い方など)もあり、混沌としています。

SVG の外枠

作成する BlackBerry テーマ用の SVG は、まず以下のような外枠になります。

一行目で XML 1.1 の文書であることを宣言しています。XML のバージョンは上記の SVG の仕様中では 1.1 と 1.0 のどちらの例もあったので、どちらを使用してもよいのかもしれません。Composer の生成した SVG では 1.0 でした。

2行目からはルート要素である svg 要素の開始タグです。開始タグでの各種属性は、たいていはこのまま使用できます。

その後、SVG の各種データを記述していきます。(現在は省略、詳細は以下)

最後に svg 要素を閉じて終了です。

アイコンの定義と配置

ここからが実際のアイコンの定義と縮小、および配置になります。

以下のコードは、アプリケーションリストの先頭にくるアイコンを 60×60 のサイズで用意し、それを「bt0」という名前のグループとして定義した上でスクリーン上の 0,300 座標にセットします。これがボタン1個です。

ボタン用グループの作成

1行目では「bt0」という id のグループを定義しています。g 要素は、その内側にくる要素をまとめて、1かたまりのグループをつくる要素です。この g 要素はコード断片末尾まで続き、全体で「bt0」という名前のボタンを形成します。

このボタンは transform=”translate(0 300)” によって、XY 座標での 0, 300 の位置に配置されます。X=0 は画面左端です。Y=300 というのは 480×360 であるデバイス(Bold 9700 など)において、下端から60ピクセル(アイコンのサイズ)上の座標です。ここで指定すべき値は対象となるデバイスによって異なり、Bold 9000 (480×320)を対象にするならば Y=260 が適切です。

1	useApplicationIcons

続く

要素はくせ者です。

についてはきちんとしたドキュメントが見つけれられないのですが、どうやらこれによってアプリケーションアイコン表示用のプレースホルダとアプリケーションとを結びつけているようです。

app-id で指定している「slot0」というアプリケーションのアイコンのうち、通常時のアイコンを bt_normal で始まるグループ(g 要素)に対して、フォーカス時のアイコンを bt_focus_img で始まるグループに対して適用する、というのがこのコードの意味しているところです。(おそらく、ですが。)

ところで app-id 属性で指定している「slot0」は、「アプリケーションリストの1番目のアプリケーション」を意味しています。同様に「slot1」は2番目、「slot2」は3番目のアプリケーションを指します。(この slot がいくつまで使用できるかは確かめていませんが、手元で実際に試した結果少なくとも25個までは大丈夫でした。もっといけるはずです。)

アイコンの下地画像の配置

続く以下の image 要素では、アイコンの下に表示する画像を指定しています。

表示するアイコンのサイズに合わせた半透明のダーク色画像などを使用すると、壁紙をセットしたときにもアイコンが視認しやすくなります。

(なお、この例では svg ファイルのあるディレクトリに icons ディレクトリをつくり、そこに icon_underlay.png ほか使用するファイルを配置しているとします。)

1	switchGroup

による切替画像の定義

続いての

も複雑です。

は SVG 標準にはない独自拡張要素です。g と同様に子要素をまとめてグループを作りますが、そのうちの1つの要素のみを表示し、他の子要素は非表示にしてしまいます。表示対象の子要素は currentChild 属性で指定します。

この switchGroup には bt_sw0 という id がつけられています。子要素は bt_focus0 および bt_normal0 という2つの g 要素です。bt_sw0 の currentChild としては bt_normal0 と指定されていますから、表示されるのは bt_normal0 のみです。bt_focus0 はデフォルトでは非表示となります。

bt_sw0 の2つの子要素のうち、bt_focus0 はアイコンのフォーカス時用の画像グループ、もう一方の bt_normal0 は通常時用の画像グループです。

通常時用の bt_normal0 では、ただひとつの子要素である image 要素でアイコン画像をロードしています。またここで width=”60″ height=”60″ と、アイコンのサイズを指定しています。

一方、フォーカス時用の bt_focus0 では、子要素はフォーカス時の光る「わく」のための下敷画像と、その上(後から指定された要素は上に積み重なっていきます)に表示されるグループ bt_focus_img0 の2つであり、bt_focus_img0 内の image によって 60×60 サイズのアイコンがロードされています。

ここで最初に設定した

が効いてきます。

で

と指定したことによって、bt_normal0 グループの画像と bt_focus_img0 グループの画像は、アプリケーション「slot0」のアイコンに置き換えられることになります。このため image で指定した message.png などはできあがったテーマでは使用されません。(ただしテーマ選択時スクリーンショットで表示されるので、まじめにセットしておいたほうがよいでしょう。)

ボタンを8つ並べる

以上でボタン(bt0)がひとつ完成しました。

同様に残り7つのボタンを作成・配置します。bt1 〜 bt7 です。app-id は slot1 〜
slot7 に置き換えます。また bt_sw0、bt_focus0、bt_focus_img0、bt_normal0 などは、いずれも 0 の部分を 1 〜 7 に置き換えます。

の部分も、それぞれに適切は座標に変更する必要があります。x座標を60ずつ増やしていけばよいです。

messages.png などはダミー画像なので面倒であればすべて同一でもよいのですが、テーマ選択時に表示されるスクリーンショットはここで指定した画像からつくられますから、見栄えを重視するならば個別に指定したほうがよいでしょう。(この例では、画像は icons ディレクトリ下に配置してあると想定しています。)

loadScene でのアプリケーション起動設定

続いては、ボタンが押されたときのアクションをセットします。

ボタン bt0 が押されたら、アプリケーション slot0 (アプリケーションリストの1番目のアプリ)を起動する、といった具合に、8つのボタンすべてに定義しています。

フォーカス時のアクション定義

最後にフォーカス時/アンフォーカス時のアクションを定義します。

要素が2つあります。

最初のものは bt0 にフォーカスが移ったときに

bt_sw0 の currentChild 属性の値を bt_focus0 に変更します。これによって bt_sw0 の表示内容は bt_focus0 に切り替わり、従ってフォーカス時用のアイコンが表示されるようになります。

後のものも同様で、bt0 からフォーカスがはずれたとき、bt_sw0 の currentChild を bt_normal0 に戻しています。これによってアイコンは通常時用のものに変わります。

これらを bt1 〜 bt7 についても用意すれば SVG は完成です。

完成した SVG

2種類の SVG をご用意しました。Bold 9700, 9600 等の 480×360 サイズのものと、Bold 9000 用の 480×320 サイズのものです。「zip」はこの両方が含まれています。

SVG ダウンロード: 480×360 / 480×320 / zip

(ブラウザではうまく表示できないと思います。一旦ダウンロードして、テキストエディタ等で表示してください。)

このSVGはファイル内の著作権表示と使用許諾を残していただければ自由に使用・改変・再配布していただいて結構です。なお、この SVG やここから派生した SVG を使用したテーマになんらかのクレジットを入れていただく必要はありません。

Theme Builder への組み込み

できあがった SVG は Theme Builder をつかって組込みます。

テーマの基本的な作成方法についてはBlackBerry テーマの作り方を参考にしてください。

1. 今回の SVG ではアイコンの配置は SVG でおこなうので、Theme Builder での Home Screen 設定内の Applications は空欄にしておきます。
2. HomeScreen の SVG File をクリックします。
   （Application Nameがセットされてますが、これはお好みで…どのタイミングでセットしてもOKです）
   
3. 作成したSVGファイルを選択します。
   
4. ファイルを読み込む途中、「SVG failed to import corectly. Certain portions of the SVG may not be rendered correctly. 」といった警告が表示されますが、特に問題ありませんので「OK」ボタンをクリックします。
   
5. 右側の Applications 欄は空のままですが、左側の設定イメージではアイコンが並んでいるのが確認できます。（Applications 欄は空のままでOKです）
   
6. Navigation にはアイコンの代わりに bt0 〜 bt7 が表示されていますので、これを参考にナビゲーションを設定します。（連番になっているので、個人的にはこっちのほうがナビゲーションの設定が非常にやりやすいです）
   

ダウンロード

完成したサンプルテーマを公開しています。

無料テーマ: 8 Zen