2.きせかえUIクリエーター
(1)ソフトのインストール
・uicreator20 30.zipの解凍。ダウンロードした時に解凍し、インストールしておいても良い。
適当な場所に解凍します。左のフォルダが出来ますのでtoolフォルダを開きます。現在はuicreator30です
インストーラーが起動するので、指示に従って次へ進みます。
インストール場所は指示通りに進めば、C:\Program Filesの中に作られて、スタートメニューのプログラムに
「きせかえUIクリエータ」フォルダが出来ます。作成時はその中にある「きせかえUIクリエータ」をクリックするとソフトが起動します。
きせかえツールスタジオのインストールも同じ要領で進めます。
(2)きせかえUIクリエータを起動
ファイル(F)をクリックし、新規プロジェクト(N)をクリックします
「新規プロジェクト」作成画面が開くので、名前(N)を付け・プロファイル(P)を選び、「参照(B)」をクリックしい保存する場所を選びます。
場所を選んでOKボタンをクリックしたのち、上の画像の「作成(C)」をクリック
次にページを作成します。「ページの新規作成(N)」をクリック
新規作成画面から<UIのテンプレートの選択(U)>を行います。アイコンタイプの場合は「Blank」を選ぶ
選んだら「ページ一覧(P)」をクリックすると次のメニューが表示します
00_****を選ぶ。最初は00_topmenuからです
選んだ後「参照(B)」をクリックすると名前を付けて保存する場所が開く。プロジェクトで選んだフォルダが開いてファイルが保存される
ページを作る場合は、全てのページのファイル名の拡張子の前に00.を書き加えること。数字のゼロです。
同様にして、各ページの新規作成を行う
左のツリーにResource Filesがあり、そこに作成した画像をドロップしておきます。
画像を配置するには、Resourceフォルダで右クリック・インポートでも良いし、エクスプローラで画像フォルダを開き、全部選択しドラッグしてもOK
ファイルがグチャグチャになってしまうので、メニュー毎にフォルダを作成し格納すると良いです。
(00〜09等と数列を付けておくと上手く並びます)
00_topmenu.00.xmlファイルをダブルクリックで開く。Window(ID:000)で開きますので、IDを変更します右の000をWindowと書き直す
レイアウト(L)メニューから、適宜拡大を変更し見やすくすると便利。このトップページに各要素を作ります。
左から2つ目の赤枠のファイルを右クリック、又は編集(E)の挿入から要素を選びます。
必要なものsoftkey、GridBox、Label等です
最近は作り方を変えLayoutのオフセットを変更していますY=98,width=480,height=686,clipbottom=-98
IDの変更(画像はF01Cを作成したときのもの、480x677、480x40、480x137サイズの画像を配置)
※F01Cのきせかえは、menuを開いているときに、新着メール等ﾒｯｾｰｼﾞが表示されるとアイコンに被ってしまうので
上領域は80ですが77ドットとし、背景画像は480x640でアイコン配置を見直してきせかえを組み直した
フォーカス領域は背景上づら合わせ。 上側77ドット、背景640ドット、下ソフトキー領域137ドット合計854ドット
下の画像の40→77、677→640、-40→-77と変更
SoftKeyはクリアを割り付けるのでCLR、GridBoxはDGBX、Labelは適宜IDを変えます
【注意】下の画像では下層の頁をダミーも含め複数作成しているので、00_lifekit.00.xml〜00_lifekit.04.xmlとなっています
「SoftKey」のid変更(KeyはプルダウンメニューからCLEARを選択する、oncommandは記述する)
IDを変えたのが開いた窓で確認できます。Windowの詳細が右のプロパティペインで判ります。これを変更することで位置・サイズが変わる
最近の作り方はプロパティの480、677。『Layout』のオフセットを変更しています。Y=40,width=480,height=677(背景画像の大きさで変える)
clipbottom=-40 これを書かないと背景画像が欠けてしまう。下側を基準にして作成しているので、上部は40ドット下げています
「Label」には背景色と同じ単色の画像を置いています。windowで40オフセットしているのでマイナス40のオフセットで上端に配置
左のツリーのResourceFilesに画像をドロップしていて、この画像を右下のイメージにドラッグしてある
(機種によりheightやオフセットは異なる)
※F社は、Labelは全頁に反映するが端末のハードキーで呼び出す場合は反映しないので、メールやiモードページもLabelは配置する
F06Bでは右のGeneralの数値はwindowでオフセットしているのでbaseyoffset=-98、basewidth=480、baseheight=98
下のLabelはF01Cの当初作成時の配置ですが、現在の設定は、baseyoffset=-77、basewidth=480、baseheight=137
「Soft
Key」戻り用のキーなので、ハードキー対応のKeyからCLEARを選ぶ。
oncommandは必ず記述する。「00_topmenu.00.xml」ページのCLRはEventの「oncommand」にsystem.exec("00_finalize");と記述
下層ページのCLRは「key」欄をプルダウンから"CLEAR"を選び、「href」欄はプルダウンから作成したページが表示されるので
"00_topmenu.00"を選ぶ。この設定を行わないとclearキーでMENUに戻れない(oncommandの記述は必要ありません
ここは端末の機能を呼び出す項目です)
(枝番ページの場合は"href"欄にプルダウンメニューから戻り先頁を選択)すれば良い。
またハードキーに飛び先ページを指定する場合、windowに「Soft Key」を挿入して、「key」と「href」を設定すれば良い
F06Bでは「Windowエレメント」でオフセットしているのでbaseyoffsetは0、basewidth=480、baseheight=686。画像は背景サイズが677の場合
サイズや配置は取り立てて気にしなくても良い
3x4タイルアイコン画像の配置の作り方
『Grid Box』(ここに選択画像を配置する) GridBoxを選択し右クリックで「Row」を挿入、「Row」を選択し右クリックで「Column」を挿入
「Column」を選択し「Button」を挿入。「Button」まで挿入した「Column」をコピペすると作業は速くなる
※基本的には『Grid Box』の構成は、「Row」を作り、その下に「Column」を3個配置する。
画像が2個なら「column」を2つ配置し、さらにその中に「Button」を配置
アイコンが8個なら「Row」は3個作成し、それぞれの中に「Column」が3個、3個、2個と配置。「Button」も同様
IDは「Row・Column」は続けてID001,ID002・・・ID0nnと変更する
簡単に作成するには、プロパティの各種設定を行った後、コピペしてから各IDを変更し、画像を左のリソースからドラッグしてやればよい
「Button」のプロパティは下の(3)で説明する
最近の作り方ではアイコンサイズはbasewidthもbaseheightも192→160→150に変更している。作成した画像サイズを記述する
ボタンのidは必ずidリストで確認しr_b00_**と記述。コピペすると間違えない
1つの「Row」にアイコンが3個の配置の場合は、十字キーの動作は、デフォルトで動くので設定の必要はないが
2つ以上の「Row」の最後に「Button」が1個とか2個の場合の動作は異なるため、「Column」のGeneralにて飛び先の設定をする必要がある
この矢印key操作によるフォーカス移動の動作は、きせかえ作成のためのpdfファイルに書かれているので読んでおくと良い
下の例は受信メールアイコンの時ですが、十字キー"左"を押しても、選択は10番目のアイコンに飛ばないので
赤枠のleft_idに飛び先の「Column」のid番号を指定する。この場合の最終アイコンの「Column」はID014なのでそれを記述
「Column(id:ID014)」ではrigt_idをID002と指定すると右ボタンで最初のアイコンに飛ぶ
MUSICメニューのように2個しかボタンがない場合や、複数のRowがあり3個ボタンがある場合は、標準動作をするため設定する必要はない
ボタンにフォーカス画像を配置する
【注意】Topmenuはフォーカスを『データBOX』に当てたいので、r_b00_databoxボタンの「selected」を"true"にする
各リンク先のページは1番にフォーカスを当てたいので、1番アイコンの「button」の「Advanced」のselectedを"true"に設定
下層が1/2、2/2と複数ページに渡りスクリプトで移動する場合も同様。但し、1/2、2/2頁をハードキー対応や
クリアで戻る場合の設定は「markpage」="false"、「nextpageinit」="true"とするがfalseでもよい
Topmenuに戻る「Soft Key」の「CLR」は"false""false"とすることで、ターゲットフォーカスが選択時の状態で戻る
1/2頁、2/2頁へハードキーで移動するには、Windowのエレメントに「Softkey」を追加し「accesskey」をドロップメニューから選択し
使用したいハードキーを選び「Advanced」の「href」(移動先のリンク)をドロップメニューから選ぶ
例えば便利ツールなら追加した移動先頁の00_lifekit.00.xmlや00_lifekit.01.xmlを選ぶ。戻りも同様に設定すれば
ハードキーでページ切替えが簡単に可能になる
【スクリプトによるページ移動】
1/2ページの1番のアイコンの「上キー操作」や、最終番のアイコンの「下キー操作」でも2/2頁へ切り替えたい場合
1/2ページを開き、WindowのエレメントにScenario(シナリオ)を2つ追加
シナリオのIDを「UPNEXT」「DOWNNEXT」に書き直し
シナリオの配下に「Run」をそれぞれ挿入し、右ペインの「General」の「・・・」に以下のように記述します
(00_***.00.xmlと00_***.01.xmlは書く内容が異なるので注意)
00_***.00.xmlのScenario(id:UPNEXT)のRunは
menu.flag = 2;
page.go_and_init("00_***.01.xml"); ←移動したいページ
Scenario(id: DOWNNEXT)のRunは
menu.flag = 0;
page.go_and_init("00_***.01.xml");
←移動したいページ
次にWindowにScriptを挿入します。ScriptのGeneralの「・・・」に以下のように記述します
矢印キーでフォーカスが当たる設定です
DCM.AccessLog.setSortType(1);
/* focus 設定 */
if(menu.flag == 1) {
obj = getElementById("r_b***"); ←一番最後のボタンの機能IDを書きます
} else {
obj = getElementById("r_b***"); ←一番最初のボタンの機能IDを書きます
}
obj.focus = 1;
menu.flag = 0;
次にWindowのエレメントのグリッドボックス(id:GDBX)に新たにボタンを作成します
Row(idは続きで書きます。アイコン12個配置だとID017とID021)を作成し
その中にColumn(ID018,ID019,ID020)とColumn(ID022,ID023,ID024)と3個ずつ作成、その中にbuttonを挿入します
buttonの機能IDは適当にID018〜ID020はr_b00_down、ID022〜ID024はr_b00_up等とします。同じで良い
(Buttonを3個ずつ配置した方がエラーが起きない)
r_b00_downのbuttonを選択し右プロパティのSelectLayoutのscenarioidをプルダウンからDOWNNEXTを選ぶ
r_b00_upのbuttonも同様にUPNEXTを選ぶ。Scenarioの書き直したidがここで反映される
このr_b00_upボタンの入っているRowをGDBXの直ぐ下にドラッグで移動する。Row(ID001)の上に移動
この2つのbuttonは画像はありませんが、適当に背景の上側と下側に位置します。配置はGeneralのオフセットで設定
タッチ機種ではこのボタンを配置することで画面のドラッグ操作によるページ切り替えが可能になる
ダミーボタンの座標は、機能アイコンの選択エリアに隣接して上に配置するとタッチ操作の移動が安定します
Rowを新たに作成したので、フォーカスアイコンの移動について変更する必要がる
Rowの並び順にターゲットフォーカスの移動は、基本動作的に行われます
3個ずつダミーボタンを挿入したので、ボタンの移動動作は基本的には変更が無いが、1番の機能アイコンの左Key操作で
上に配置したRowに移動するので、移動先を#番の機能アイコンのIDに変更する必要がある
同様に#番機能アイコンの右Key操作でも下側のRowに移動するので、1番の機能アイコンのColumnIDを記述する
Column(id:ID002)の「left_id」にID016と記述、Column(id:ID016)の「right_id」はID002と記述する
3x4個のアイコン配置の場合はこれだけOKです
各ボタンから矢印Keyの移動に関しては、1〜3番のボタンの上Key操作では、上に配置したRowのダミーボタンに
移動するので、シナリオ通りに次ページにmenuが切替わる。*,0,#番ボタンの下Key操作も同様です
アイコンが4個とか少ない場合は、下に配置するRowに3個ボタンがあるため移動先IDの設定は注意して下さい
UIエミュレータで動作確認しながら設定すれば良い
Rowの中のボタンフォーカスの移動は、3個配置では右・左キーは全部端まで移動して、右キーだと下のRowの左に移動
左キーでは上のRowの右端に移動します。最上部のRowは左キーだと最下部のRowの3番目に移動します
最下部のRowにボタンが3個未満だと、上段のRowの3個目にフォーカスが移動します
次に2/2ページの00_***.01.xmlを開き、1/2ページと同様にWindowにScenario(シナリオ)とそれぞれRunを挿入します
ScenarioのIDは上と同じで「UPNEXT」「DOWNNEXT」と書き直します
00_***.01.xmlのScenario(id:UPNEXT)のRunは
menu.flag = 1;
page.go_and_init("00_***t.00.xml");
Scenario(id: DOWNNEXT)のRunは
menu.flag = 0;
page.go_and_init("00_***.00.xml");
次にWindowにScriptを挿入します。ScriptのGeneralの「・・・」に以下のように記述します
DCM.AccessLog.setSortType(1);
/* focus 設定 */
if(menu.flag == 2) {
obj = getElementById("r_b***"); ←一番最後のボタンの機能IDを書きます
} else {
obj = getElementById("r_b***");←一番最初のボタンの機能IDを書きます
}
obj.focus = 1;
menu.flag = 0;
「button」の挿入は1/2と同様に行います。Rowの中に「button」が1つの場合は
同じ中に「Columnとbutton」を2つ挿入しても構いません
この「button」はScript移動用のダミー「button」なのでhrefは書かなくても良いです
機能アイコンからのKey操作によるターゲットフォーカスの移動はUIエミュレータで動作を確認します
ダミーButtonの配置座標は機能アイコンの選択エリアの直下に設定するとタッチ操作の移動動作が安定します
(3)フォーカスアイコンの配置座標及び幅と高さ
従来の192サイズの作り方は下記の黒文字の通りですが、現在の150サイズではoffsetは異なっている
背景画像に配置するアイコンの位置や、フォーカスエリアによってもX,Y座標が異なってくるので、最初に画像を配置するときから計算しておく
「General」の"basexoffset"、"baseyoffset"は、X軸は、0、144、288。Y軸は、0、171、342、512と記述。"basewidth"、"baseheight"は192と記述
"nextpageinit"は全てtrue、"selectd"は「detabox」だけtrueとします。Menuボタンを押したとき、DetaBoxが選択状態で開くため。
F06Bでは150サイズのため、X軸は5・165・325の座標、Y軸は5・175・345・515。座標は予め配置を考慮して決めておく
ボタンを全て選択する方法、ツリーのGridBoxグリッドボックスを選択後右クリックで「指定エレメントを選択」からButtonを選ぶと
右ペインのGeneralの、共通的に設定する事項(例えばアイコンサイズのbasewidthやbaseheight)に150、150と記述すれば
開いているページの全てのButtonの設定が出来る。Advanceのmarkpageも「false」にする。Buttonの座標も横並び、縦並び
をPCのキーボードのCtrlkeyを押しながらツリーのButtonを選択して横を選択すれば、baseyoffsetを設定出来る
縦のButtonを選択する場合はbasexoffsetを設定する。この方法だと座標の設定が早い
更にGeneralのIDや、oncommandを記述する前に、windowエレメントをコピーして、次のPageを開きペーストすれば
一度に設定が簡単に行える。Button等の機能IDは個々に記述する必要がある
(4)「Button」のコマンド コマンドを間違えるとページや機能が開かない
「Button」のプロパティでは、各アイコンのハードキーに対応する設定を行う。
・プロパティの「General」"accesskey"は、メールの場合プルダウンからKEY_1を選び、"href"はプルダウンから/00_mail.00.xml。順次全て設定する
・TopMenuのみ「Event」の「oncommand」は記述しないが「プロファイル」と「iコンシェル」だけは必ず記述
それぞれ system.exec("00_profile"); と、system.exec("00_agentservice"); を記述します。
・2層目の各ページの「Button」の設定は「Event」の「command」には、開きたい機能を必ずsystem.exec("機能id名");を記述
(5)GridBox内のButton idの変更
TopMenu及び2層目の各ページの「Button
id」は必ず「r_b+id」と記述します。id名はドコモからDLした圧縮ファイルの中に入っているのでコピペします
Mailはr_b00_mail、i-modeはr_b00_imode、i-appliはr_b00_iappli、電話帳はr_b00_phonebook、DetaBoxはr_b00_databox、LifeKitはr_b00_lifekit
アクセサリはr_b13_accessory、設定はr_b00_setting、MUSICはr_b00_music、おさいふはr_b00_osaifu、プロファイルはr_b00_profile
iコンシェルはr_b00_agentservice等、機種による異なっているので「機能idリスト」で確認が必要
(4)、(5)に関しては、各2層目のメニューでも同様に記述します。異なる点は下記の通りです。
2層目の各メニューに作成する「softkey(id:CLR)」の「General」項目にある「KEY」及び「href」は、全てCLEAR、/00_topmenu.00.xmlとします。
携帯のクリアボタンの設定です。複数に分割し枝番のページからの戻り先は好みで前ページを選択出来る
※各ページを開いて「Button」の設定をするとき、コピー&ペーストを行った方が誤りが発生しにくい
(6)機能IDについて。(ドコモのきせかえツールDLサイトにあるスペックで確認して下さい)
こちらのID表(F09A)を参考にして下さい。
タイルアイコンのきせかえの作り方にはいろんな方法があります
基本的には下のイメージのような構成で作っています。Label:bottom画像はTopとメールとiモードしか配置していません
下記の画像は各エレメントに配置する画像のスタイルです「Window」の背景にmenu背景画像、「Label」黒背景画と
ソフトキー領域の画像を配置している
Labelは全てのページに反映するが、ハードキー対応のメールやiモードは、直接ページを呼び出すので
Labelが反映しないためそれぞれのページエレメントに黒の背景と、ソフトキーの画像を配置します
Label:background Window CLR
上手くVUIファイルが完成したら、別の名でフォルダを作成し、作成したプロジェクトフォルダを開いて、作った全ての***.00.xmlファィルと
プロジェクト名の.umpjファイルを新規に作成したフォルダにコピー&ペーストして利用すると、設定の手間が省けて便利です。
ソフトキー領域のスクリーンカラー別のきせかえを作る場合は、基本設定は全く同じなので、コピーしたumpjファイルをクリックしてuiクリエータを
立ち上げ、リソースファイルをセットすれば良いからです。ResourceFileも同じ名前で作ります。
ソフトキー領域の画像だけ変更し、Generalの画像を入れ替えるだけで、ビルドすればVUIファイルが簡単に作成できます。作ったら上書き保存します
次はグリッドのButtonの設定について次のPageで説明します
その前にButtonの動作についてです。メニューを開くと必ず5番(Fはデータボックス)にフォーカスが当たります。
これは5番目のButtonのGeneralのAdvancedの項目にある「selected」が「true」に設定しているからです
同様にトップメニューから開く各ページは1番にフォーカスが当たります。これも1番のButtonに同様の設定を行っているからです
また戻りの動作は、CLRキーの設定で戻りますが、今回作成したF06Bの従来型の富士通メニューの作成では、枝番のページを幾つか
作成しています。枝番ページとは「abc.00.xml、abc.01.xml、abc.02.xml」等です。
これはCLR動作で戻り先を、元のページに戻りたいためページを作成しています。例えばToolboxの中のページを開く設定にすると、CLRで戻ると
Toolboxに戻ってしまいます。セレクトのページに戻りたい場合は、呼び出すページの枝番を変える必要があるためです
また戻りページのフォーカスの当て方ですが、開いたページに戻り用のアイコンを配置していると、前述のAdvancedの中の「nextpageinit」の設定を
「true」にしていると、戻りページの「selected」のTrueが有効になり、5番や1番にフォーカスが当たってしまいます
前のページの選択したアイコンにフォーカスを当てるためには、「nextpageinit」を「false」にします。CLRは1部を除き「false」の設定です
この様な設定を行うことで、戻り先のフォーカスの当て方が変えられます。
セレクトページを配置して、呼び出すページを「ツール」や「設定」のページと同じにしているため、同じページのダミーを作成し
戻り動作をCLRキーや戻り用のアイコンで前のページに戻れる設定を行っています。
例えばセレクトページから「00_lifekit.01」を呼び出した場合、このページのCLR設定は「00_lifekit.00」なので戻れません
「00_lifekit.02」という「00_lifekit.01」と同じ内容のコピーページを作成し、ここのCLR設定をセレクトページに指定しています