Skip to content
RainbowMage edited this page Dec 5, 2014 · 1 revision

このページの記述はバージョン 0.2.2.0 時点でのものです。 最新のバージョンでは変更になっている可能性があります。

CSS による外見の変更

表示設定 (1) と書かれている部分の設定方法です。

基本フォント

基本フォントの設定を変更するためには、11 行目から 15 行目の

* {
    /* フォント (一部のフォントは上手く適用されない) */
    font-family: "Meiryo";
    font-size: 12px;
}

の部分を編集します。font-familyが表示するフォントの名前(デフォルトではメイリオ)。font-sizeが表示するフォントのサイズです。

背景色

背景色を変更するためには、38 行目から 40 行目の

    /* 背景色 */
    background-color: transparent;
}

の部分を編集します。background-colortransparentに設定すると完全に透明になり、色名(redなど)やカラーコード(#FF0000)を設定すると指定した色で塗りつぶされます。

半透明にしたい場合は、rgba(R, G, B, A)の書式を使います。RGBはそれぞれ赤、緑、青の光の強さを0から255までの数値で入力します。Aは不透明度を0.0から1.0までの数値で入力します。

たとえば、透明度が0.5の半透明な黒の背景はrgba(0, 0, 0, 0.5)のように指定します。

文字の色を変更する

エンカウント情報とテーブルの見出し(Name や Job など)の文字色は、63~34 行目の

color: #DED7BE;
text-shadow: -1px 0 2px #795516, 0 1px 2px #795516, 1px 0 2px #795516, 0 -1px 2px #795516;

を、テーブルのデータ本体の文字色は、51~52行目の

color: #E2EBF5;
text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;

を編集することで変更が可能です。文字の基本色は color の、影の色は text-shadow#XXXXXX のカラーコードの部分を編集することで変更できます。カラーコードについてはhttp://html-color-codes.info/japanese/を参考にして作成してください。

スクリプトによる表示内容の設定

表示設定 (2) と書かれている部分の設定方法です。

エンカウント情報のフォーマットを変更する

エンカウント情報とは、初期設定状態で表示を行うと「木人 / Time: 12:34 / DPS: 234」と表示される部分のことです。これは、99 行目から 104 行目の

// エンカウント情報の定義
var encounterDefine = "{title} / Time: {duration} / DPS: {ENCDPS}";

// 上記のエンカウント情報を HTML として扱うなら true
var useHTMLEncounterDefine = false;

を編集することで変更が可能です。ここで指定した文字列が、エンカウント情報の書式として使用されます。書式は ACT の Mini Parse ウィンドウで表示するものと互換性があります。

http://ff14act.phpapps.jp/index.php?ShowMiniを参考にして書式を作成し、作成した書式の文字列をダブルクォーテーションの中に書き込んでください。

ただし、JavaScript の制約上、直接記述できない文字が存在します。それらの文字はhttp://www.ajaxtower.jp/js/num/index2.htmlなどを参考にして入力してください。

なお、単体の { は今のところ入力することができません。

useHTMLEncounterDefinetrueに設定すると、HTML のタグを使用することができるようになります。

表に表示するデータを設定する

105 行目から 129 行目の

// ヘッダの定義
var headerDefine =
[
    //{ text: "#", width: "5%", align: "center" },
    { text: "Name", width: "25%", align: "left" },
    { text: "Job", width: "8%", align: "center" },
    { text: "DPS (%)", width: "18%", align: "center", span: 2 },
    { text: "HPS (%)", width: "18%", align: "center", span: 2 },
    { text: "Acc.(%)", width: "16%", align: "right" },
    { text: "Crt.(%)", width: "14%", align: "right" },
];

// 表示するデータの定義
var bodyDefine =
[
    //{ text: rankingText, width: "5%", align: "center", effect: deadYatsuEffect },
    { text: "{name}", width: "25%" },
    { text: "{Job}", width: "8%", align: "center" },
    { text: "{encdps}", width: "16%", align: "right" },
    { text: "{damage%}", width: "5%", align: "right" },
    { text: "{enchps}", width: "16%", align: "right" },
    { text: "{healed%}", width: "5%", align: "right" },
    { text: "{tohit}%", width: "16%", align: "right" },
    { text: "{crithit%}", width: "14%", align: "right" },
];

を編集することで、表のヘッダ(見出し)と、表示するデータを設定することができます。

上記のデフォルト設定は、以下のような表を定義しています。

Name Job DPS (%) HPS (%) Acc.(%) Crt.(%)
{name} {Job} {encdps} {damage%} {enchps} {healed%} {tohit}% {crithit%}

慣れないうちは行をコピーして増やしたり、いらない行を減らしたりして値だけを弄るようにしてください。

ヘッダ項目

ヘッダ項目には、以下のプロパティを設定することができます。

プロパティ 説明
text 文字列 セルに表示する文字列を指定します。
html 文字列 セルに表示する文字列を指定します。こちらに指定すると、内容が HTML として解釈されて表示されます。
width 文字列 セルの幅を設定します。表の幅に対する割合で指定したり(20%)、ピクセル単位(30px)で指定することができます。
align 文字列 行構えを設定します。leftcenterrightjustifyの 4 種類のいずれかを選択できます。
span 数値 自らのセルも含めた、右側に結合する数を指定します。たとえば、2 と指定すると右側のセル 1 個と結合します。

データ項目

データ項目には、以下のプロパティを設定することができます。

プロパティ 説明
text 文字列 セルに表示する文字列を指定します。htmlと同時に指定された場合はこちらが優先されます。
text 関数 セルに表示する文字列を結果として返す関数を指定します。指定した関数の第 1 引数にその行のキャラクターに関するデータのKey-Valueペア、第 2 引数に 0 から始まる並び順が設定され、実行されます。戻り値に ACT の書式は使用できませんので、必要な場合は parseActFormat 関数を使用してパースしてください。
html 文字列 セルに表示する文字列を指定します。こちらに指定すると、内容が HTML として解釈されて表示されます。
html 関数 text(関数)と同様です。ただし、こちらは戻り値が HTML として解釈されて表示されます。戻り値に書式を指定できないのも同じです。
width 文字列 セルの幅を設定します。表の幅に対する割合で指定したり(20%)、ピクセル単位(30px)で指定することができます。
align 文字列 行構えを設定します。leftcenterrightjustifyの 4 種類のいずれかを選択できます。
effect 関数 値に応じてセルを装飾する処理を記述した関数を設定します。指定した関数の第 1 引数にセルの DOM 要素が、第 2 引数にその行のキャラクターに関するデータのKey-Valueペア、第 3 引数に 0 から始まる並び順が設定され、実行されます。この関数はすべての設定が終わった後に呼び出されます。