ランチャーとタグ

1. アプリやリンクを、タグで代替

(図1)は、「ランチャーの登録」ページの(図2)に、アイテムを挿入した例です。


(図1)ランチャーのアイテム一覧 



 

(図1)の「名前」列には、端末画面のアイコンに付随する文字列が表示されます。 

「プログラム」列には、アイコンのリンク(プログラムへのパスまたはファイルへのURL)が
表示されます。 

これらは、タグに代替されてランチャーのテンプレートで記述されます。
 

アイコン画像のファイル名も、MobiControlのランチャーのテンプレートでは、タグで代替されて記述されます。
 

ここでいうタグとは、次表で、< と > で挟まれた文字列を指します。



 
(図1)での列の名前 
-->
名前
プログラム
 
アイコン画像
のファイル名
アイコンに
付随する文字列
アイコンのリンク 
(プログラムへのパス
またはファイルへのURL)

1番目
<MCExeIcon0>
<MCDisp0>
<MCLink0>

2番目
<MCExeIcon1>
<MCDisp1>
<MCLink1>

3番目
<MCExeIcon2>
<MCDisp2>
<MCLink2>


 


画像ファイル名は、(図1)には表示されていませんが、文字列やリンクと紐づけられています。
文字列やリンクを入力した(図2)で、画像ファイル名も一緒に指定したからです、


(図2)アイテムの入力画面 



 

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



(図3)テンプレート(例) 





(図3)には、<MCExeIconN>、<MCLinkN>、
<MCDispN>の文字列が含まれています。

 


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)で、「上へ」「下へ」ボタンを使うと、<MCDispN>などのタグが代表する
アイテムは入れ替わります。



2. 画面でアイテムを横に並べる







通常の<ul> <li>の構文では、アイテムは縦に並びます。
 

例えば、
下記のような構文は、右のように表示されます。 


<ul style="list-style-type: none;"> 

<li>最初 

<li>2番目 

<li>3番目 

</ul>



最初
2番目
3番目




 







ところが、<li>に、下記のようなスタイルシート(赤文字)をつけると、アイテムは横に並びます。

 



<ul style="list-style-type: none;"> 

<li style="float:left;">最初 

<li style="float:left;">2番目 

<li style="float:left;">3番目 

</ul>



最初
2番目
3番目



 


端末画面のアイコンなどの表示順序は、各段に横に並べます。そのためには、<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. 画像をバックグラウンドに


<MCExeIconN>は、アイコン画像を代替するタグですが、
<MCDispImgN>という、タグもあります。 


<MCExeIconN>は、HTML記述オブジェクトと同じレイヤーに画像を置きます。
 

<MCDispImgN>は、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文書を作成します。
 
 「ランチャーのテンプレート」を参照してください。