docomo Palette UI きせかえ

docomo Palette UI きせかえの概要や作成フロー、技術仕様や開発ツールなどについてご紹介します。

docomo Palette UI きせかえとは

docomo Pallet UIきせかえ(以降、きせかえ)とは、NTTドコモが提供するホームアプリ「docomo Palette UI」のデザインを変更する機能です。
きせかえ用に作成されたコンテンツ(以降、きせかえコンテンツ)をダウンロードし、docomo Palette UIに設定することで、ホーム画面をさまざまなデザインに変更することができます。

docomo Palette UI きせかえとはの画像

注意docomo Palette UI についてはdocomo Palette UIページをご確認ください。

きせかえの概要

きせかえコンテンツの使い方

手順1の画像

きせかえコンテンツの使い方を説明します。

端末でdocomo Palette UIが起動されている状態で端末のメニューキーを押し、「きせかえ/壁紙」を選択します。

注意docomo Palette UIのバージョンによっては、きせかえに対応していない場合があります。(対応していない場合、上図の赤枠内には「壁紙」と表示されます。

手順2の画像

表示されたメニューから「きせかえ」を選択すると、外部メモリに保存されているきせかえコンテンツの一覧が表示されます。

手順3の画像

一覧から目的のきせかえコンテンツを選択し、画面右下の「設定する」を押してください。
これでdocomo Palette UIのデザインがきせかわります。

きせかえられる範囲

きせかえでは、docomo Palette UI のホーム画面、Dockエリア、アプリケーション一覧画面の各エリアのきせかえを設定することができます。

きせかえの対象箇所(ホーム画面、Dockエリア)

Homeエリア、Paneエリア、Dockエリアにてきせかえコンテンツにより設定できる箇所は以下の通りです。

きせかえの対象箇所(ホーム画面、Dockエリア)の画像

項目 説明
壁紙画像 ドコモHOMEアプリの壁紙画像を設定することができます。
パーソナルエリアインジケータ
FirstViewインジケータ
ホーム画面インジケータ

各インジケータを任意の画像に設定することができます。
ドコモHOMEアプリのインジケータには3種類(「パーソナルエリアインジケータ」「FirstViewインジケータ」「ホーム画面インジケータ」)があります。
ホーム画面インジケータのみ、ユーザの利用状況に応じて複数並びます。

  • 注意作成ツール上ではそれぞれ異なる名称がつけられていますのでご注意ください。「パーソナルエリアインジケータ」→「docomoエリアインジケータ」、「FirstViewインジケータ」→「Homeインジケータ」、「ホーム画面インジケータ」→「インジケータ」
  • 注意パーソナルエリアはAndroidTM OS 4.0以降では非対応となります。
アイコン背景 ショートカットアイコンの背景画像を変更することができます。(ショートカットアイコンそのものの画像を設定することはできません)
アプリ一覧アイコン アプリケーション一覧画面を表示するためのアイコンを設定することができます。
Dockエリア背景 Dockエリアの背景画像を設定することができます。

きせかえの対象箇所(アプリケーション一覧画面)

アプリケーション一覧画面にてきせかえコンテンツにより設定できる箇所は以下の通りです。

きせかえの対象箇所(アプリケーション一覧画面)の画像

項目 説明
グループバー背景 グループバーの背景画像を変更することができます。
最大24種類の画像を設定することができます。
グループバークローズ
グループバーオープン
グループが開いている状態と閉じている状態を表すアイコンを設定することができます。
また閉じている状態については、さらに「新着通知あり」「新着通知なし」の2種類の画像を設定することができます。
「新着通知」とは、グループ内のアプリに何らかの新着通知が来ていることを表すもので、一度グループを開くと「新着通知なし」の状態に戻ります。
アイコン背景 ショートカットアイコンの背景画像を設定することができます。(ショートカットアイコンそのものの画像を変更することはできません)
アプリケーション一覧画面背景 アプリケーション一覧画面の背景画像を設定することができます。

きせかえの対象範囲(タブレット向けBox画面)

タブレット向けBoxエリアにてきせかえコンテンツにより着せ替えられる箇所は以下の通りです。

ドコモHOMEアプリ(タブレット向けBoxエリア)の画像

項目 説明
Box背景画像(横) Boxエリアの背景画像を設定することができます。
(画面の上部及び下部にてUIが重畳するため、結果として画像の上部と下部が少し切れて表示されることに注意してください)
グループフォーカス グループが選択されていることを表すフォーカス画像を設定することができます。
グループ用新着アイコン グループ内に新着のアプリケーションが存在していた場合に表示されるアイコン画像を設定することができます。

きせかえコンテンツの作成

素材画像の準備

使用できる画像フォーマットは「PNG8」および「PNG24」です。
素材画像の縦横サイズは端末の画面サイズおよび画像の適用箇所によって最適なサイズが異なります。素材画像の縦横サイズの詳細はコンテンツ作成ガイドを参照してください。

9patch画像について

きせかえコンテンツで使用する9patch処理された画像は、AndroidTM SDKを使用して作成できる形式ではなく、NTTドコモが提供する「docomo Palette UI きせかえコンテンツ作成ツール」に含まれている「9patch.exe」を使用して作成する必要があります。「9patch.exe」は、「docomo Palette UIコンテンツ作成ツール」のインストール先のフォルダにインストールされます。「docomo Palette UIコンテンツ作成ツール」のインストール方法は、「コンテンツ作成ツールをインストールする」を参照してください。
コンテンツに設定されている9Patch画像は、AndroidTM OSの仕様に従って描画が行われます。

9patch画像の作成は以下の手順で行います。

9patch画像についての画像

以上で9分割の目印がつけられた9patch画像が生成できます。
ファイル名は、[任意の文字列].9.pngとする必要があります。

推奨サイズと異なるサイズの画像を利用する際の注意

推奨サイズと異なるサイズの画像を利用する場合、画像はアプリケーションによって自動的に拡大・縮小処理されて表示されます。
このとき、画像自体のアスペクト比は維持されないため、画像によっては非常に歪んだ状態で表示される場合があります。
画像はなるべく推奨サイズのものを用意するか、またはアスペクト比を合わせた画像を用意してください。

docomo Palette UI きせかえコンテンツ作成ツールを使う

docomo Palette UI きせかえコンテンツ作成ツールは、必要な項目を入力することでプレビューを見ながら簡単にコンテンツを作成することができるツールです。
ここでは、ツールの使い方について説明します。

準備

コンテンツを作成するためには、対象機種を設定する必要があります。
設定は、対象機種設定画面から行うことができます。(コンテンツ作成ツールのメニューバーから「編集」→「対象機種設定」と選択)

設定は、対象機種設定画面上で直接値を入力することもできますが、NTTドコモが提供するプロファイルデータをインポートすることで簡単に対象機種情報を設定することができます。
プロファイルデータは、ダウンロードした作成ツールの「推奨サイズ機種設定ファイル」フォルダに同梱されています。

対象機種を設定することにより、設定された画像のサイズチェック、およびエミュレータの利用が可能になります。コンテンツそのものへは影響ありません。

ツールバー

よく使う操作を簡単に実行できます。

ツールバーの画像

項目 内容
新規作成 プロジェクトを新規に作成します。
開く 既に作成されたプロジェクトを開きます。
上書保存 作成したプロジェクトを上書き保存します。
ファイルサイズ 開いているプロジェクトからコンテンツを出力した際に生成されるコンテンツファイルの予想ファイルサイズを表示します。
また、必須項目の入力状況などをチェックします。
エミュレータ プロジェクトの内容を元に、端末上でのコンテンツの動きを再現するエミュレータを起動します。
端末連携 プロジェクトの内容を元にコンテンツを生成し、PCにUSBにて有線接続されている端末にコンテンツを出力します。
出力 プロジェクトの内容を元にコンテンツを生成し、PC内の任意の場所に出力します。

基本項目設定

画面上部の「新規作成」ボタンを押し、プロジェクトを作成します。
プロジェクトとは、きせかえコンテンツを作成するために必要な各種設定や素材となる画像ファイルの情報を含んだもので、これを元にきせかえコンテンツを出力することができます。

基本項目設定の画像

項目 内容
対象機種 コンテンツの対象機種を選択します。
対象機種(プロファイルデータ)を選択すると、エミュレータ起動時に端末の環境(画面サイズなど)をエミュレートするための情報が読み込まれます。
タイトル 最大40byte(全角20文字、半角40文字)の文字列を設定します。
ここで設定した文字列は、端末上できせかえコンテンツの一覧を表示する際に使用されます。
説明文 最大100byte(全角50文字、半角100文字)の文字列を設定します。
ここで設定した文字列は、端末上できせかえコンテンツの一覧を表示する際に使用されます。
選択用サムネイル 端末できせかえコンテンツ一覧を開いた際に表示されるサムネイル画像を設定します。

Pane/Dockエリア

きせかえコンテンツのホーム画面のイメージを表示します。
Pane/Dockエリア−編集エリアで編集した内容は、プレビュー表示でリアルタイムに確認することができます。

Pane/Dockエリアの画像

項目 内容
壁紙画像 ドコモHOMEアプリの壁紙画像を設定します。
インジケータ(選択時) 各インジケータの選択時および非選択時の画像を設定します。
インジケータ(非選択時)
homeインジケータ(選択時)
homeインジケータ(非選択時)
docomoインジケータ(選択時)
docomoインジケータ(非選択時)
Dock背景画像(横) Dock背景画像を設定します。
Dock背景画像(縦)
Boxアイコン(新着通知あり) Boxアイコンを設定します。
Boxアイコン(新着通知なし)

AndroidTM OS 4.0以降の端末の一部(主にタブレット端末)では、端末を横向きにした状態でもdocomo Palette UIを利用することが可能になります(AndroidTM OS 3.x 以前の機種は非対応)。その状態に対応したきせかえコンテンツを作成する場合は、画面上部にある「画面の向き」のラジオボタンで「横」を選択することで、設定可能な項目が表示されます。

BOXエリア

きせかえコンテンツのBOX画面のイメージを表示します。
BOXエリア−編集エリアで編集した内容は、プレビュー表示でリアルタイムに確認することができます。

BOXエリアの画像

項目 内容
アプリアイコン背景 各アプリアイコンの背景画像を設定します。
グループバー グループバーの画像を設定します。
最大24種類まで設定することができます。
グループバークローズ
(通知なし)
グループが閉じた状態を表すアイコンの画像を設定します。
閉じている状態については、「新着通知あり」「新着通知なし」の2種類の画像を設定することができます。
「新着通知」とは、グループ内のアプリに何らかの新着通知が来ていることを表すもので、一度グループを開くと「新着通知なし」の状態に戻ります。
グループバークローズ
(通知あり)
グループバーオープン グループが開いた状態を表すアイコンの画像を設定します。
グループバーオフセット グループバー上に表示されるグループバー名の、縦方向の表示位置を設定します。
値が小さいほど、上側に表示されます。
端末の画面サイズによって設定できる値が異なります。
各画面サイズに対応する値については、後述の表を参照してください。

グループバーオフセット一覧

画面サイズ 種別 デフォルト値 最小値 最大値
WVGA Phone 30 18 42
QHD Phone 30 18 42
HD Phone 40 24 56
WXGA(density2.0) Phone 40 24 56
WXGA(mdpi) Tablet 30 18 42
WXGA(tvdpi) Tablet 30 18 42

エミュレータ

設定した画像が端末上でどのように表示されるかは、エミュレータを起動することで確認することができます。
コンテンツ作成ツールの画面上部にある「エミュレータ」ボタンを押すことで、エミュレータが起動します。

エミュレータの画像

項目 説明
機種 エミュレートしたい機種をあらかじめ対象機種情報として設定されているものから選択します。
ズーム エミュレータ画面の画面右側に表示する端末イメージの表示サイズを指定します。
50%、75%、100%が選択でき、値が小さいほど小さく表示されます。
画面の向き エミュレータの画面の縦画面表示・横画面表示を切り替えます。(タブレット向け)
切り替え エミュレータ画面の画面右側の端末イメージ内に表示するエリアを切り替えます。
グループ表示形式 Boxエリアのグループの表示形式を切り替えます。
イベント イベントのON/OFFを切り替えることができます。
「BOX新着」をON(押下した状態)にすると、Boxアイコンが「Boxアイコン(新着あり)」に切り替わります。
「グループ新着」をON(押下した状態)にすると、グループアイコンが「グループクローズ(新着あり)」に切り替わります。
スクリーンショットを保存 エミュレータのスクリーンショットを保存します。

きせかえコンテンツの出力

コンテンツ作成ツールの画面上部にある「出力」ボタンを押すと、その時点での設定内容を元にきせかえコンテンツ(拡張子が「.kin」のファイル)が出力されます。

コンテンツの出力時に表示されるメッセージについて

コンテンツを出力する際に、WarningメッセージやErrorメッセージが表示されることがあります。
Errorメッセージが一つでも存在すると、コンテンツを出力することができません。
出力内容をご確認のうえ、修正を行ってください。
Warningメッセージは主に画像サイズと設定箇所のサイズが合っていない場合に表示されます。無視してそのままコンテンツを出力することも可能ですが、画像がゆがんで表示されるなど端末上で正常に表示されない可能性があります。

コンテンツの保存方法

コンテンツをダウンロードする

作成したきせかえコンテンツを端末に保存する方法は「Webサイトからダウンロードする方法」と「USB接続でPCから設定する方法」があります。

Webサイトからダウンロードするためには、あらかじめ端末にきせかえに対応しているdocomo Palette UIがインストールされている必要があります。
Webサイトからダウンロードする方法には、コンテンツダウンロード用のリンクを用意する方法と、サーバからリダイレクトによる応答を返す方法の2つがあります。
コンテンツダウンロード用のリンクを用意する方法でWebサイトからダウンロードするためには、以下のような独自スキームを含むリンクをWebサイト内に用意する必要があります。
端末のブラウザアプリケーションにて該当Webサイトを開き、リンクを押すことでコンテンツのダウンロードが開始されます。

コンテンツダウンロード用のリンクのサンプル画像

きせかえコンテンツのダウンロードURIには、独自スキームを利用する必要があります。独自スキームを含めることにより、きせかえコンテンツ専用のダウンローダー(docomo Palette UIの機能)が起動し、ダウンロードが始まります。
スキームとして利用できる文字列は以下の2種類です。

  • dcmkispc (http通信用)
  • dcmkispcs (https通信用)

それぞれ異なる通信プロトコル種別を表していますので、目的に合わせて使い分けてください。
オプションパラメータを指定した場合は、ダウンローダからのリクエストにもオプションパラメータが含まれます。セッション管理を行う際などに利用することができます。

サーバからリダイレクトによる応答を返す方法でWebサイトからダウンロードするためには、レスポンスとしてリダイレクト応答のLocationフィールドに独自スキームを含めたURIを指定する必要があります。 この方法を利用することによりCGIなどで任意の処理を行ってからダウンローダーを起動させることができます。
以下は、レスポンスのHTTPヘッダの例です。赤線の部分がダウンローダーを起動するためのURIです。

レスポンスのHTTPヘッダのサンプル画像

ファイル名とWebサイトのエンコードに関する注意

コンテンツのファイル名には、半角英数字及び「_」「.」「-」が使用できます。これ以外の文字を使用したファイル名をつけた場合、コンテンツを正常にダウンロードできない場合があります。
また、ダウンロード用のWebサイトのエンコードがUTF-8以外の場合、コンテンツが正常にダウンロードできない場合があります。

同名ファイルのダウンロードに関する注意

同じファイル名のコンテンツをダウンロードした場合、コンテンツは自動的に別名のファイルとして保存されます。
このとき、コンテンツに設定されているコンテンツ名も同じだと、コンテンツ一覧画面でコンテンツの区別がつきません。
同名コンテンツを再度配布する際には、区別がつくよう工夫したコンテンツ名を設定してください。

コンテンツダウンロード時のエラーについて

ブラウザを用いてサイトからコンテンツをダウンロードする際に、「不正なコンテンツです。コンテンツ提供者にお問い合わせください。<エラーコード:X>」 (Xにはエラーの内容を表す数値が表示されます)と表示され、ダウンロードが中止することがあります。
この場合、コンテンツになんらかの問題がある可能性があります。

以下に、エラーコードとその内容について説明します。

エラーコード 説明
0 コンテンツファイルが壊れている可能性があります。
1 コンテンツの定義ファイル(mapping.xml)がコンテンツファイル内に存在しない可能性があります。
2 コンテンツの定義ファイルに誤りがある可能性があります。
3 コンテンツの定義ファイルの親要素名に誤りがある可能性があります。
その他、Content-Lengthの値の設定誤りなどサーバ側の設定内容に誤りがある可能性があります。

USB経由で保存する

端末とPCをUSBケーブルで接続した状態でツールの「端末連携」ボタンを押すと、端末に挿入されている外部メモリにコンテンツが保存されます。

USB接続された端末にコンテンツを出力する際の注意

接続された端末の「ストレージモード」がONになっていないと、コンテンツの出力に失敗する場合があります。
ストレージモードへの切り替え方法は、各端末の取扱説明書等を参照してください。

コンテンツ作成ツールを使わずにコンテンツを作成する

サーバ側でコンテンツを自動生成したい場合など、コンテンツ作成ツールを使わずにコンテンツを作成する方法について説明します。
コンテンツに必要なファイルは「コンテンツ定義ファイル」と「素材画像」です。
コンテンツ定義ファイルと素材画像を1つのフォルダ内に納め(このとき、素材の種別ごとにフォルダを分けるなど階層構造を内部に作成すると、コンテンツとして正常に動作しなくなるので注意してください)、ZIP圧縮します。
次に、生成されたZIPファイルの拡張子を「.kin」に変更します。
こうして完成したきせかえコンテンツファイルは、コンテンツ作成ツールで出力したものと同様にきせかえコンテンツとして利用することができます。

コンテンツ定義ファイルの作り方の表

コンテンツ定義ファイルの作り方

コンテンツ定義ファイルはmapping.xmlというXMLファイルとして作成する必要があります。
ただし、1から定義ファイルを作成するのはあまり効率的ではないので、まずはコンテンツ作成ツールにてコンテンツを作成することをお勧めします。完成したコンテンツファイル(拡張子が「.kin」のもの)の拡張子を「.zip」に変更しそれを解凍することで、コンテンツに含まれているmapping.xmlを取り出すことができます。
このmapping.xmlを参考にコンテンツ定義ファイルを作成してください。

技術資料ダウンロード

docomo Palette UI きせかえの技術資料をダウンロードできます。

資料名 版数 公開日 資料概要
2.0.1 2012年12月13日 きせかえの詳細およびコンテンツ作成方法、配信方法についての詳細と注意点について説明しています。

開発ツールダウンロード

きせかえコンテンツを開発するための、「docomo Palette UI きせかえコンテンツ作成ツール」をダウンロードできます。

docomo Palette UI きせかえコンテンツ作成ツール

  • 注意「Android」は、Google Inc.の商標または登録商標です。

このページのトップへ

フッターナビゲーション