工事中です。暫しお待ち下さい
最近行って判明したこと
前のページでステージサイズと選択アイコンサイズを480x704と192x192と決めうちしましたが
これはメーカのスペックから拾った値ですが、いろいろテストしていて拘る必要がないと判明しました(笑)
アイコン方式の2層式きせかえの場合、画像サイズを可能な限り小さく作ればファイルサイズが小さくできます
100個近いフォーカスアイコンを用意しているため、1つにつき1KB小さく出来れば全体で100KBのサイズダウンです
jpgで作成していますが、画像圧縮率を相当高めて、携帯で画質を確認しながらファイルサイズの縮小を図っています。
今まで192サイズで選択画像を作成していて困ったのは、一つの画像を修正すると、隣りあう画像も修正する必要がありました
一寸した修正に手間が掛かるため、横幅が480なので、3分割した160x160サイズの選択アイコンのテストです。
横幅には被りが全く無くなり、手間が減りました。ついでにアイコン画像110×110の四隅の丸味も全部完全に統一しました
選択画像には、青色のフォーカスリングを被せていますが、隙間や重なりが全く無くなり、画像修正も楽になりました
富士通のF06BはSHときせかえに関するデータが同じ仕様に変わりました。タイルアイコンサイズは152に変更されている
今まで160x160の選択画像で作成していたモノを150x150に変更した。画像そのもののサイズは変更していません
シックタイプ→全ての頁は3列x4段並びの12個アイコン配置、背景画像=480x686(機種により違う)、フォーカス=150x150
通常版→便利ツールは3列x5段配置に変更したので、フォーカス画像は80%縮小の120x120とし、その他は150サイズ、背景は同じ
F01Cでは、便利ツールの2層目の機能が22個とSHのように増えてしまい、アイコン方式の配置に困りました。
いくら便利機能だからといって22機能も同じメニューに配置するのは、リスト表示をスクロールし無くてはダメで探しにくくなり
不便になったのではなかろうか？操作性の向上を訴求しているドコモだけど何故か逆行する方式。SHの考え方に疑問を抱く
ユーザの人達は疑問を抱かないのだろうか？2層目の機能も1ページで収まる程度が使い安いと思うけどな
スマホについては配置数が多くても構わないと思う。UI的にタッチ操作で下層を開くのに使い易くなっているためです
テスト的に4例x5段配置の20個とし、テストしたが悪くはないです。フォーカスは120x120なので、480サイズにピッタリ収まります
F01Cは液晶解像度が960→854とコストダウンを図ったが、スペック上のステージサイズは704と同じです
ソフトキー領域が70ドットと狭くなったのでF07Bと同じ。そのつもりで作成したらビュースタイルでは、タッチメニューに変わるため
いつもの作りだと、最下段のアイコンにタッチエリアが重なってしまう。どの程度重なるのか試したら137ドット(正式には134ドット)
画面下側が機能に取られてしまうので、アイコンを配置した背景画像を677に変更し、上に40ドット黒背景、下に137ドットの
ソフトキー画像を配置することにした。背景画像を9ドット狭くしたので、アイコン配置間隔を3ドット詰めて配置し直しです
最下段のアイコン画像は9ドット上にずらした配置になります。画像修正はレイヤー毎の画像や文字を選択してずらすだけなので
修正する手間は掛かりません。携帯を開いたときの背景画像は最下段の文字の背景色「灰色」が通常だと狭いけれど
F01Cでは最下段の文字の下に同色の灰色エリアが67ドット分広くなりました。携帯のデフォルトメニューでは、全色「黒」が
表示されるようになっています。黒を配置しているのではなく、ブランクにしているだけなのですね
フォーカスアイコンの変更は下段を除き不要です。きせかえツールUIクリエータソフトのボタン座標は修正が必須です
F01Cは、この作り方で良いと思っていたら、MENU開いているときメール着信などでテロップが流れると
テロップがアイコンに被さってしまいました。スペックをよく見てみたら判りにくい表があり、ここにステージサイズ等が書かれている
文字が潰れて拡大しても数値が読めない程酷いデータでした
上側80ドットは端末利用のエリアで、ソフトキー領域が134ドットで結局ステージサイズは640ということなのです
アイコン配置を見直して、640ドットの背景画像で組み直したところ、テロップの被りも当然無くなりOKになった
F01Cは上部を3ドット詰めて77ドットのLabelを置き、その下に640のwindowの背景を収めています。ソフトキーは137ドット
フォーカスエリアは背景の上面から配置するようにしています。最近スクリプトで頁移動が出来るようになったので
データボックスやツール頁の4x5のアイコン配置及び、120x120のフォーカスエリア設定は、他の頁と同じにし1/2、2/2頁を作成
【次に縦配置を考慮してみた】
全体の配置が、以前のきせかえと大きくずれるのも考慮しています。本来なら下の背景ドットの中央にアイコンを配列したいけれど
文字とアイコンの間隔が広がりすぎるので、センタ位置は無視。選択アイコンサイズの中心位置は、前のきせかえとほぼ同じにし
160サイズの位置決めを行うと、選択アイコン間隔を10ドット空ければ良いので、縦サイズは、160x4+10x3=670
しかしこれで作れば、最下段のアイコン画像が下に下がりすぎてしまうため、文字間隔を考慮し下に16ドット加えています。
最下段のアイコン配列をグレーの中心に考えれば、下側に20ドット加え下から100ドットにすればグレーのセンタに納まります。
4ドットは見た目に判らないので背景画サイズは480x686
最下段のアイコン配列を背景のグレードットエリアのセンター配置するには480x690です。
110x110の画像アイコンは、この選択サイズ160x160の中央に配置。位置決めは決定したので早速テストです。
テストの結果は問題なく動作し、タッチも全く変わりません。SH01用のシックタイプもこの作りです
最新版のきせかえツールはこのタイプに統一しました。F06BやF01Cは赤色の文字の通りです
メーカスペックでは、富士通は背景画480×704、選択アイコン192x192。SH01Bは152x152ですが、192x192のきせかえでも動作します
前のページで、きせかえソフトのエレメント構成で、「Label」にメニュー背景を配置した作成方法を書いていますが
現在では「Window」エレメントの背景に、メニューアイコン配置した画像を置いています。「Label」はトップ用とボトム用の2種類を作成し
トップには黒い背景を配置しています。ステージサイズが480x704の時は、縦幅80サイズの黒背景を置きましたが
今回のようにステージサイズを弄る場合は、下のソフトキー領域は同じ縦幅176なので、960-176-ステージサイズ=黒背景サイズ
と計算し、960-176-686=98、480x98にリサイズした黒背景画に変えています。F01Bはソフトキー領域が20ドット狭いため
480x118に変更しています。スクリーンを指定しない場合は「Label」を置かないだけです。後のエレメントは同じ「CLR」「GDBX」を配置しています
背景画像の設定は、y軸のオフセット変更を行っています。何故かボトムのオフセットをマイナス設定しないと、下側の画像が切れてしまう
ソフトキー領域の「Label」画像は、通常トップページで設定すると、2層目の各ページでも反映しますが
ハードキーで該当ページを呼び出す場合、トップページの設定が反映しないためmailページとi-modeページにも配置しています。
SH906iのきせかえを頼まれて作りましたが、SHは反映しないので全ての頁にLabel配置しています
【きせかえUIクリエータの小技】
別のきせかえを作成するとき、新規プロジェクトの作成段階で今まで作成したxmlファイルを新たに作るフォルダにコピペすると良いです
プロジェクトの名前とは、PCの中にフォルダを作成してくれることです。前もってフォルダに名前を付けて作成しておけば
上位のフォルダを選択し、新規プロジェクトの名前(N)欄に、フォルダ名をペーストすれば簡単です
プロファイルを決定して作成すると、ソフトのプロジェクトエクスプローラペインにフォルダアイコンが出来ますので、PageFileを
右クリックして「ページのインポート(M)」をコピペしたxmlを選択すれば、各種設定した項目通りのPageFileが出来上がります
後はResourceに画像を配置するだけです。Resourceに画像を配置するときもドラッグ&ペーストが可能です
ページ構成を変更する場合、もう一つきせかえUIクリエータを立ち上げ、既存のプロファイルを開いて、必要な各エレメントを
コピーして、もう一つのUIクリエータページに貼り付けすることが出来ます。勿論同じUIクリエータの各ページの中からコピペも出来ます
グリッドボックスのアイコンサイズの変更などは、開いたページのページペインの中のGridBoxを右クリックして
指定エレメントの選択でボタンを選択すると、一度に全部のアイコンサイズが変更できます。画像ペインでGDBXエリアが黄色く枠組みされる
【コピペで作業時間短縮】
プロファイルを選ぶと、新規のページ名決め打ちになっています。一度プロジェクトを完成保存すれば、別のきせかえを作るときは次の方法が楽
PCのエクスプローラで該当フォルダを開き、プロジェクト内のVUIファイル以外全てをコピーし、新規フォルダを作成してそこに貼り付けます
umjpファイルだけリネームして、これをダブルクリックできせかえツールUIクリエータソフトが開いてきます。ページも既に作られています
取り込んでいる画像も再読込するので、新しい画像と組み替えるだけです。画像ファイル名も同じにしておけば、ボタン配置等の画像を
入れ替える手間が省けます。富士通の場合メニュー構成が殆ど変わらないため、新機種に対応するきせかえツールを作るとき楽でした
しかしOPPを導入したため、メニュー構成まで大幅変更になったので作成に手間取ります
【ボタンの座標の一括で指定を行うやり方】
ページを開いて、ページペインのGridBoxを右クリックし、「全て展開」を行うとボタンが全部見えます
コントロールキーを押しながら、同列のボタンを選択します。一段目の横を3個選択するとすれば、画像ペインの中が横に黄色く枠組みされます
こうすると、x座標は全て異なるが、y座標は同じなので、プロパティ画面の「General」の「baseyoffset」に数値を記述すればOKです
同様に2段目3段目をを行います。次に縦列のボタンを選択します。こうすると「basexoffset」が一度に決定できます
アイコン座標はページ全てが同じなため、ページペインのGridBoxを右クリックコピーして、次のページのwindowを選択し右クリックペーストします
こうすることで作業は一段と速くなります。後はプロパティのIDの変更やテンキーの飛び先を指定したり、イベントの「oncommand」を記述すればOK
ここもコピーペーストで間違えないようにします。選択画像を配置するときは、左のペインのResourceFileから画像を
プロパティペインの「SelectLayout」の"image"にドラッグすればよいです。この繰り返しです。
画像エリアは、背景画を「Window」に組み込み、ボタンを作成(ペースト)しただけでは表示しません。画像全部ドラッグして初めて見えます
ボタンを選択すると選択エリアが青で表示するので、そこを右クリックで選択状態を(Select)編集にすれば、Select画像が見れます
細かい絵解き説明は省略します。作り始めてUＩクリエータを使っているうちに可能なことが判ったので書いておきました
ちなみに160x160のアイコン座標ですが、x座標(0、160、240)、Y座標(0、170、340、510)です
【勝手なセレクトページの作成】
機能を集約したページを作成しました。標準のMenuページのファイルは「00_topmenu.00.xml」なので
セレクトページは「00_topmenu.01.xml」としました。この作り方では「clear」ハードキーがトップメニューに戻ってしまうので
ページ名は別のプロジェクトの枝番で作成しています。トップから入るアイコンですがiコンシェルの位置に配置し、プロファイルの場所に
iコンシェルを配置しました。しかし「Menu+0」とキーを操作するとプロファイルが開きます。ドコモの仕様です。
iコンシェルを多用する人には不向きです。セレクトページは重宝しています。
【1/2頁⇔2/2頁の移動】
上側アイコン、下側アイコンから上Key/下Key操作でページを切り替える方法及び画面ドラッグで頁切り替えの方法が判りました
前の頁で説明しています
ここからは以前のままです
Topメニューとmail、i-modeメニューの作り方は、前ページの下側の画像のような構成で、UIクリエータソフトの参考画像にて簡単に説明しました。
Window、Label、SoftKey、GridBox、Labelの要素を作成していますすが、F端末はそれ以外のページは、Labelは置いていません。
00_topmenu.00.xmlに配置すれば、全てのページに画像が反映していたので、余分な要素は省略です。
00_mail.00.xmlと00_imode.00xmlはハードキー対応で、直接各ページを呼び出せるため、topページの影響を受けないため
このページにもソフトキー領域に△Buttonを配置した、スクリーンカラー対応の選択画面を配置しています。
ページの名前はIDネームと同じなのがご理解頂けたと思います。IDネームをxmlファイルとして保存し、携帯はこれを読み込むのです
ファイル名「ID+.00.xml」は、01ページを作成する場合などに利用するため、00と付けるわけです
「GridBox」に「Button」を配置するわけですが、この「Button」のIDは必ず「r_b+ID」と変更します。
「Event」の「oncommand」に記述する飛び先も「system.exec("ID名");」にIDを利用します。
別表のidlistが重要なわけです。コピーできるのでご利用下さい。ドコモのサイトには
「F-09A_kisekae_spec_id.xls」が置いてあるのでこのエクセル表にて確認すること。圧縮ファイルに入っていたはず。
富士通携帯の文字の全角・半角表示についても書かれています。
iアプリ以下の「button」の設定も同様です。ルールは簡単なので、間違えなければVUIファイルは簡単に作れます
「Button」の設定は特に問題がないと思います。IDやコマンドを間違えなければ動作します
アイコンが3個ずつ配列されている場合は問題なく矢印キーで移動しますが、8個とかの場合、最終のアイコンから右ボタンでは
飛び先を指定しないと、上手く最初のアイコンにカーソルが戻りません。また1番のアイコンにもアイコンの飛び先IDを指定します
この設定を行えばよい。MUSICのように2つしかアイコンのない場合は何も設定する必要はありません。前ページに書きました
基本的な動作についてはマニュアルに書かれていますので、読解すれば良いでしょう
画像が配置できたら「きせかえツールクリエータ」のメニューの「プロジェクト」からUIエミュレータをクリックします
そうするとVUIファイルをビルドしてエミュレータが起動するので、選択ボタンをクリックしてフォーカスが上手く移動するか確認します
このときフォーカス画像の位置ズレも確認します。全て確認したらファイルを保存して終了です。
ビルドしているとき、ソフトの下側のアウトプット欄にいろんな情報が出ますが、最新版クリエータではF09Aの場合エラー表示します
F01Bだとエラーが出ないのですが・・・iDエラーに関しては無視して問題ないです(笑)
ようやくVUIファイルが完成したのできせかえツールを作成します
きせかえスタジオソフトを起動し、新規作成を行います。プロジェクト(フォルダを作ってくれます)
プロファイルを選択し、名前を決めて下さい。この時のファイル名で「ucp」という圧縮ファイルが作成されます
この作成される「***.ucp」をコピーします。次にパッケージ情報を記述します。必須項目があるので必ず記述します
情報欄は機種にもよりますが、「タイトル」(携帯に保存するときの"ファイル名")、ダウンロードURL("./上でコピーした***.ucp名")
プレビュー画像(私は100×200位で作成しています)、フォントサイズ(必須ではない)、再配布(必須ではない)
次にメニューを開き、「VivdUIメニュー」にクリエータで作成したVUIファイルをドラッグ&ドロップします。右端の「・・・」ボタンから
保存したVUIファイルを選んでも良いです。私は面倒なのでエクスプローラを開いてドラッグ&ドロップしています
12アイコンメニューを設定しちゃうと1層式メニューになるので、これは設定しません。背景も設定していません
待受画面は気に入っている端末に適合した解像度の画像をドロップして下さい。私は自作のFlash画像を組み込んでいます
縦・横がある場合は両方設定すれば、きせかえの設定で反映します。
このようにして電話発/着信画面、メール、センター問い合わせ、アンテナアイコン、電池アイコン等を組み込んだ後ビルドします
プロジェクト(フォルダ)の中に、**.ucp、**ucm、DownLoad.html等が出来上がるので、この3つのファイルを自分のサイトにアップします
きせかえのページを追加して、ページに「DownLoad.html」にリンクを貼れば後は携帯で落とすだけです。名前を変えたらその名前をリンクする
私の場合は、同一機種でスクリーンを変えたり、英語表示の"きせかえツール"を作成しているので
サイトにその機種用のディレクトリを作成し、index.htmlを置いています。このindex.htmlに下記に示す事項を貼り付け保存すればOKです
後はFPTソフトを利用してサイトに上記の"**.ucp""**.ucm"ファイルとindex.htmlをアップすれば完了です
index.htmlファイルは、htmlビルド関係のソフトを使用しなくても、エディタで開いて編集してもOKです
タグはこんな感じです。私の場合は＜OBJECT＞から＜/A＞までをページ内に貼り付けています(表示上全角の"＜"を使用しています)
＜HTML＞
＜HEAD＞
＜TITLE＞Download Page＜/TITLE＞ ←タイトルDownload Pageを判りやすく変更しても良い
＜/HEAD＞
＜BODY＞
＜OBJECT declare id="***"
data="***.ucm"
type="application/x-ucf-package"＞
＜/OBJECT＞
＜A href="#***"＞DOWNLOAD＜/A＞ ←DOWNLAODを好きに変更しても良い
＜/BODY＞
＜/HTML＞
MSワードでぺーじを作ったら、タグが汚いなぁ(笑)
テキストで作成して、画像を左詰で配置し直そうかなぁ。ページが完成したら見直します(笑)
前ページに戻る
mainに戻る
TOPに戻る