otakenのブログ一覧

以前 7ways のカスタムスキンを作っているというのを少しご紹介したのですが、解説のご要望をいただいたので 7ways のカスタムスキンの作り方について記しておこうと思います。ただこれについては解析中の部分もあり、また１から説明すると本が何冊か必要になってしまうので、ごく基本的な部分を説明するだけとなることをご了承ください。

ここでの情報に加えて以下の知識/技術があれば解析し編集することが可能と思います。
・任意の画像作成ができる
・XML構造文の基本的な知識
・16進数によるRGBカラー表記についての基礎的な知識

7ways のほかに別途必要なアプリケーションは以下です。紹介しているものには有料ソフトもありますのでご注意ください。
・テキストエディタ（UTF-8 が扱えるもの。秀丸, さくらエディターなど）
・画像編集ソフト（透過PNG が扱えるもの。Photoshop, Fireworks, GIMP など）
・7z 形式圧縮ファイルが解凍できるソフト（7-ZIP など）

１）ファイル構造
7ways のスキンは 7ways フォルダ内の skins フォルダに *.7ws という名前で格納されています。これは 7z 形式で圧縮されたファイルなので、まず元になりそうなファイルを一つ決めて（default か nitro ですね）それを 7z が解凍できるソフトで解凍します。
ごちゃごちゃにならないよう、適当なフォルダを作りその中に展開したほうがよいでしょう。

そうすると以下のようなファイルを得ます。

└─スキンのフォルダ名
　　│　　　　 gui.xml ; メニューおよびマップのレイアウト定義
　　│　　　　 hidelist.xml ; マップ上の非表示項目についての設定
　　│　　　　 map.xml ; map 定義だが昼夜のファイルを include しているだけ
　　│　　　　 skin.xml ; スキン自体の定義ファイル
　　├─gui_day ；日中用メニュー関連ファイルフォルダ
　　│　├─144ppi ； 144ppi の端末向け画像フォルダ
　　│　├─192ppi ； 192ppi の端末向け画像フォルダ ※ Medianav はここしか使わない
　　│　├─288ppi ； 288ppi の端末向け画像フォルダ
　　│　├─432ppi ； 432ppi の端末向け画像フォルダ
　　│　└─96ppi ； 96ppi の端末向け画像フォルダ
　　│　　　　 const.xml ; 色名の変数定義(gui.xml から呼ばれる)
　　├─gui_night ； 夜中用メニュー関連ファイルフォルダ
　　│　　　　 * gui_day と同構造
　　├─map_day ；日中用地図関連ファイルフォルダ
　　│　├─144ppi ； 144ppi の端末向け画像フォルダ
　　│　├─192ppi ； 192ppi の端末向け画像フォルダ ※ Medianav はここしか使わない
　　│　├─288ppi ； 288ppi の端末向け画像フォルダ
　　│　├─432ppi ； 432ppi の端末向け画像フォルダ
　　│　└─96ppi ； 96ppi の端末向け画像フォルダ
　　│　　　　 map.xml ; 地図画面の構造および表示定義（上のフォルダの map.xml から呼ばれる）
　　└─map_night ；夜中用地図関連ファイルフォルダ
　　　　　　　　* map_day と同構造

ppi というのは pixels per inches の略で、画面の解像度を意味します。１インチに何ピクセルの画素があるかという意味ですね。Medianav は 192ppi なので、このフォルダ内の画像を変えるとナビ上の画像も変化します。

２） 開発環境の準備
まずおすすめしたいのは、開発環境を以下のように整えることです。
・7ways Windows 版を Windows PC にインストール
・ショートカット起動パスに 800 480 を加え Medianav と解像度を揃える←参考（必要があれば settings から 192ppi 固定に）
・skin.xml を以下のように編集
<skin title="任意のスキン名" title:ru="任意のスキン名" guiDay="gui_day" guiNight="gui_day" mapDay="map_day" mapNight="map_day" minDisplaySize="60"/>

title アトリビュートを変えることで、展開した状態でも（わざわざ *.7ws に圧縮しなくても）スキンとして認識されます。title:ru はロシア語版の表記で、title:ja とやれば日本語環境での表記を変えることができると思いますが、無意味なのでこれでよいと思います。
ここの title が既存のものと被っていると（default や nitro のままだと）、*.7ws ファイルが優先されナビ上でプレビューできません。
また本来 guiNight には gui_night、 mapNight には map_night が入っていますが、Windows 上で編集する際には GPS からのデータが降ってこないことがほとんどだと思いますし、現在編集しているスキンしか表示してほしくないので、day でも night でも編集中のフォルダを指定します。
（これは 7ways の GUI から Settings > Interface > Mode を変更することでも固定可能です）
編集が終わった後は元に戻すとよいでしょう。

一か所編集して結果をプレビューしたいときは Windows 版 7ways を一度閉じて再起動します。

３） 色指定について
const.xml や map.xml では要素の色が16進数でRGBカラー指定されています。一般的にウェブサイトなどを作るときに使われるものと同じなのでなじみがある方もいると思いますが、

#に続けて6桁の16進数でRRGGBB(赤緑青)の光の三原色を各々256段階で指定します。
#FFFFFF が白
#000000 が黒
#FF0000 が赤
といった具合です。
また red や black などいくつかの色名表記も使えるようですが、ウェブブラウザ互換ではないので RGB 指定するのが無難と思われます。たとえば slateblue なんていう色表記は無視されるどころかスキン自体が読み込まれずデフォルトスキンで立ち上がります。（ltgray や dkgray など見慣れない色表記もあることから、7ways がネイティブで用意している色名のようです。）
画像編集ソフトのほか、このようなウェブサイトで色コードを得ることができます。

またほとんどの要素の色は、const.xml や map.xml の冒頭で定数として定義されています。いずれも const タグ内で定義されていて、ここで定義された色名はそのファイル内（const.xml の場合は gui.xml から include で呼び出されているので gui.xml 内に記述されているものとみなされます）で利用できます。カーナビでは同じ色をいろいろな場所で利用するので、これを利用してカラースキームを構築するのが可搬性があり便利かと思います。

４） hidelist.xml について
このファイルはマップ上に表示しない項目を指定しています。この項目は16進数のコードで管理されていて、「0x」に続く数字がコードになります。
map_day/map.xml を見ると
polygon
polyline
poi
speedcam
など、種類に分かれて定義されているのがわかると思います。
polygon の 0x2c、polyline の 0x2c など、コード自体は一意ではないのでご注意ください。
主に hidelist.xml で非表示定義されているのは polyline で、国境やタイムゾーンの線などが消されています。すべてを見たわけではないですが、今のところ日本で問題になるような非表示項目は特に見つかっていません。

５） 実際の編集作業
これで基礎的なところは解説が終了です。
この後は xml 内の各タグについて詳細な解説をするほかないのですが、マニュアル等は存在しませんし、僕も一つずつテストしながら解析していったので自分が必要な部分しか触っていません。
ここからは各 xml ファイルを読み込んでいただき、必要であれば一つずつ変更しては確かめ、という作業を繰り返すことで進めていただくのがいいと思います。

メニュー画面が編集したいなら gui.xml と const.xml、
マップ画面が編集したいなら gui.xml と map.xml を編集してください。
基本的には各 xml タグ名やアトリビュートは英語ですのでだいたいの想像はつけられるのが幸いです。一部ロシア語が入っていますが、そこは Google 翻訳などをご利用ください。

画像については実際に見てみるのが一番でしょう。同サイズの png 画像(8bitアルファ透過画像)を上書きすれば変更されます。png自体はピクセルサイズが合っていれば ppi は意識しなくてよいですが、画像ソースは 192ppi で作っておいたほうが作成時とナビ上の表示のズレがなくよいかと思います。

６） その他役立つかわからない情報
僕は nitro スキンを元にしたのでそれしか見ていないのですが、既に若干トリッキーな表示構成をしている部分も見受けられました。要素ごとに整理されているわけではないようなので注意が必要です。
オービスに近づいた時の表示がそれなのですが、 gui.xml の
<indicator id="SpeedCamIndicator" title="$SpeedCam" width="60pd" height="48pd" tags="speedcam" fontColor="speedCamTextColor" ～～/>
というタグで定義されていますが、const.xml で定義されている speedCamTextColor の色を変えてもオービスまでの距離表示の文字色が変わりません。上記のタグは画像が載っているだけで、文字と外殻部分は
<button sourceId="WhiteFrameIndicator" text="%speedCamDistance" ～/>で定義されていました。
ちなみに WhiteFrameIndicator は外殻の種類の指定で、別途 <indicator id="WhiteFrameIndicator" ～/> で定義されています。

また if や ifnot といったタグもあり、OS に応じて出力を変えられます。
<ifnot os="Android; iOS; Tizen"> ～～ </ifnot>
というように使うようです。
CE を認識するのか、また OS 以外に識別条件があるかは不明なので役立つかは分かりません。

その他 Medianav 関連の話題はここにまとめています。
https://minkara.carview.co.jp/userid/2308444/blog/34768746/