1. アプリやリンクを、タグで代替
(図1)ランチャーのアイテム一覧

(図1)の「
名前」列には、端末画面のアイコンに付随する文字列が表示されます。
「
プログラム」列には、アイコンのリンク(プログラムへのパスまたはファイルへのURL)が
表示されます。
これらは、タグに代替されてランチャーのテンプレートで記述されます。
アイコン画像のファイル名も、MobiControlのランチャーのテンプレートでは、タグで代替されて記述されます。
ここでいうタグとは、次表で、< と > で挟まれた文字列を指します。
(図1)での列の名前 --> | 名前 | プログラム |
| アイコン画像 のファイル名 | アイコンに 付随する文字列 |
アイコンのリンク (プログラムへのパス またはファイルへのURL) |
1番目 | <MCExeIcon0> |
<MCDisp0> |
<MCLink0> |
2番目 | <MCExeIcon1> |
<MCDisp1> |
<MCLink1> |
3番目 | <MCExeIcon2> |
<MCDisp2> |
<MCLink2> |
画像ファイル名は、(図1)には表示されていませんが、文字列やリンクと紐づけられています。
文字列やリンクを入力した(図2)で、画像ファイル名も一緒に指定したからです、
(図2)アイテムの入力画面

(図3)は、ランチャーのテンプレートの例です。
(図3)テンプレート(例)

(図3)には、<MCExeIcon
N>、<MCLink
N>、
<MCDisp
N>の文字列が含まれています。
Nは、0から始まる整数
これらがタグで、(図1)での、文字列やリンクを代替しています。更には、関連するアイコン画像ファイル名を代替しています。
下表の右欄のように記述すれば、それは、左欄のように記述したのと同じ効果となります。
タグを使わない構文例 | タグを使った構文例 |
<a href=Launch://jp.kyocera.camera>
<img src="Camera.png"><br>
カメラ</a>
|
<a href="<MCLink0>">
<img src="<MCExeIcon0>"><br>
<MCDisp0></a>
|
但し、(図1)で、「上へ」「下へ」ボタンを使うと、<MCDisp
N>などのタグが代表する
アイテムは入れ替わります。
2. 画面でアイテムを横に並べる
通常の<ul> <li>の構文では、アイテムは縦に並びます。
例えば、
下記のような構文は、右のように表示されます。
<ul style="list-style-type: none;">
<li>最初
<li>2番目
<li>3番目
</ul>
|
|
ところが、<li>に、下記のようなスタイルシート(赤文字)をつけると、アイテムは横に並びます。
<ul style="list-style-type: none;">
<li style="float:left;">最初
<li style="float:left;">2番目
<li style="float:left;">3番目
</ul>
|
|
端末画面のアイコンなどの表示順序は、各段に横に並べます。そのためには、<li>に、
style="float:left;"のスタイルシートを付けることで実現します。
実際のテンプレートでは、スタイルシートは一括定義します。
下記のサンプルが、<li> のスタイルシートの一括定義の例です。
(サンプル)
<style type="text/css">
ul {list-style-type: none;
}
li {float: left;
}
</style>
<ul>
<li>
<a href="<MCLink0>">
<img src="<MCExeIcon0>"><br>
<MCDisp0></a>
</li>
<li>
<a href="<MCLink1>">
<img src="<MCExeIcon1>"><br>
<MCDisp1></a>
</li></ul>
|
左で
<MCDisp0> は MobiControlを
<MCDisp1> は MyWebを
を代替しているとします。
また、画像は
<MCExeIcon0>が |  | を代替しているとします。 |
<MCExeIcon1>が |  | を代替してい
るとします。 |
左サンプルのHTML構文だと、端末画面には次のようにアイコンが横に並びます。
MobiControl
| MyWeb
|
|
3. 画像をバックグラウンドに
<MCExeIcon
N>は、アイコン画像を代替するタグですが、
<MCDispImg
N>という、タグもあります。
<MCExeIcon
N>は、HTML記述オブジェクトと同じレイヤーに画像を置きます。
<MCDispImg
N>は、HTML記述オブジェクトの背景レイヤーに画像を置きます。
(例)ここで<MCDisp0>は、 mobicontrolという文字列の代替 |
画像は
 を参照 | |
構文例 | ランチャでの表示例 |
<a href="<MCLink0>">
<img src="<MCExeIcon0>"><br>
<MCDisp0></a>
|
| <br>を使って、 改行してから文字列表示 |
<a href="<MCLink0>">
<img src="<MCExeIcon0>">
<MCDisp0></a>
|
| 改行しないので 右横に文字列 |
<a href="<MCLink0>">
<img src="<MCDispImg0>">
<MCDisp0></a>
|
|
画像が背景に表示される
|
4. テンプレートの活用
HTML文書には、「文字のサイズ、フォント、色」、バナーや背景色など、様々な要素を記述します。
これらを配慮して、MobiControlは、幾つかのHTML文書をテンプレートとして用意してあります。
これには、前述した、タグが挿入されています。
これらを活用して、ランチャー用のHTML文書を作成します。
「
ランチャーのテンプレート」を参照してください。