ドキュメント

tierrr.com のサイト全般や、各種ツール（Tier List Maker、Asset Maker）の使い方や仕様について解説します。

トップページから各アプリページに飛ぶことができます。

Templates（テンプレート）には各タイトルの画像セットが用意されており、すぐに使うことができます。括弧内の数字は画像の枚数となります。

Custom Template（カスタムテンプレート）では、自身で用意した画像ファイルを使用したオリジナルのTier表を作成することができます。

Asset Maker は、Custom Templateで使用する画像セットを生成するためのツールになります。保有する画像をまとめて加工し、保存することができます。

トップページにはサイト全体の更新日時が記載されています。更新時にはすべてのアプリにおける、Tier表の状態（ヘッダー右端のボタン含む）などのあらゆる設定がすべて初期化されますのでご了承ください。

Tier List Maker の使い方

デフォルトでA～Fのラベルを持つTier表が用意されています。下部の画像をドラッグ＆ドロップで移動させることができます。画像セットの下には Void領域があり、使わないカードを入れて左下部の「Void」ボタンで開閉することで隠すことができます。

Tier表上部には、「Reset」「Add a Row」「Preview」ボタンがあります。複数の画像セットのあるものは、加えて切り替え用のセレクトボックスがあります。

「Reset」ボタンは、Tier表を初期状態に戻します（ヘッダー右端のボタン設定はそのまま）。加えてカードセットの並び順や、Voidを初期状態に戻します。

「Add a Row」ボタンは、Tier表の最下部に新しい行を追加します。

「Preview」ボタンは、Tier表を画像出力するためのプレビュー画面を開きます。

～プレビュー画面の説明～

プレビュー画面では、出力画像を確認できます。

出力画像の上部には、「Back」「Download Image」ボタンと、列数指定用のセレクトボックスがあります。

「Columns:」の隣のセレクトボックスで、出力画像の列数を 1～20 の範囲で指定できます。

「Download Image」ボタンを押すと、出力画像を PNG形式で「ダウンロード」ディレクトリに保存します（Windows PC や Android のスマホだとそうでしたが、機種によっては保存場所が異なる場合があります）。

PCの場合、表示されている出力画像の右クリックメニューより「名前を付けて画像を保存」や「画像をコピー」にて操作することもできます。

「Back」ボタンで、プレビュー画面から戻ります。

～プレビューの説明終わり～

各行のラベルはクリックで編集可能となります。Enterキーで改行でき、ラベル外をクリックすることで編集モードを抜けます。

各行右端の3点メニューを押すと、行に対する設定メニューが表示されます。

上部の色ボタンで、ラベルの色を変更します（12色 + グレーから選択可）。

「Move Up」は、行を1つ上に移動します。

「Move Down」は、行を1つ下に移動します。

「Remove Images」は、行内の画像をすべて取り除きます（画像セット内に移動）。

「Delete Row」は、行を削除します。

重要な操作に関しては、誤操作防止のためダイアログにて確認メッセージが表示されます。

ヘッダー右端には、「ラベル収縮」「画像クリップ」「操作ロック」切り替えボタンと、XS～XLの画像サイズ調整ボタンがあります。

「ラベル収縮」を有効にすると、ラベル幅を折りたたんで表示します（すべての短いラベル名の場合、変化はありません）。また、ラベル編集中は元の幅で表示します。

「画像クリップ」を有効にすると、Tier表を上部、画像セット領域（Void含む）を下部で分けて表示します。画像枚数が多い場合、下のほうの画像をTier表まで素早く運ぶのに便利です。

「操作ロック」を有効にすると、編集に関するあらゆる操作を無効にします。スマホ使用時、誤操作せずにスクロールのみしたい場合に便利です。

「XS、S、M、L、XL」の5段階で画像サイズを変更できます。カード画像がよくわからないときに一時的に大きくしたりなどにも便利です。

これらのヘッダーボタンの設定は、出力画像には影響しません。編集を効率的にするためのサポート用の設定となります。

Custom Template の独自仕様

Custom Template も基本的には Template のものと使い方は同じですが、一部仕様に違いがあるので説明します。

Tier表上部に画像追加用の「Add Images」ボタンがあります。画像は PNG、JPG、JPEG、GIF、BMP、WEBP、SVG、ICO などのあらゆる形式に対応しています（透過画像にも対応しています）。

画像は幅160pxに成形されるため、あらゆるサイズで問題なく利用できます。

最初に読み込まれた画像のアスペクト比（縦横比）が内部保存され、以降に追加する画像のアスペクト比も統一されます。

複数の画像をまとめて追加できますが、サイズの違う画像が混在している場合は、最初の1枚目だけを単体で追加することでアスペクト比の基準にすることができます。

画像はサーバーにアップロードするわけではなく、自身のブラウザに保存されるため、セキュリティ的にも安心してご利用いただけます。

Custom Template は Templates のものと違い、ブラウザを閉じるとTier表の状態などのあらゆる設定がすべて初期化されます（追加した画像もリセットされます）。

「Reset」ボタンでは、追加した画像や、内部保存された基準となるアスペクト比などのデータもすべてリセットされます。

Custom Templateでは基本的には幅、高さの同じ画像（もしくはおよそ同じ画像）の使用を想定しています（例えばカードゲームの公式サイトから抽出したカード画像など）。そのため、本来最初に読み込まれる画像のアスペクト比が基準となることは考慮することなくすべての画像をまとめて追加して問題ないものです。

Asset Maker の使い方

Asset Maker は、Custom Template で使用する画像セットを生成するためのツールとなります。「BreakingDown」の画像を生成するために使用していたものを一般向けに改良したものになります。BreakingDownのシーズン毎に動画から選手の画像を抽出してテンプレートを作っていましたが、あまりに作業が大変だったため断念し、Custom Templateでの利用をサポートするためにこのツールを開発しました。

使い方の例としては、動画をスクショしてペイントツールなどで人物の顔の部分だけが収まるようにサイズ調整して保存します。Asset Makerの「Add Images」にてそれらの画像を読み込むと、160 x 160[px]の正方形に成形されたものがリストに並びます。リスト内の画像はドラッグ＆ドロップにて並び替えが可能です。

「Download Images」ボタンで、リスト内の画像を「1.png」形式の連番のファイル名で「ダウンロード」ディレクトリに保存します。

大量の画像の場合出力に時間がかかることもあったり、ダウンロードディレクトリに大量の画像が保存されるため、まずは5枚程度で動作の挙動を確認することをおすすめします。

画像が整形される仕様ですが、幅と高さを比べて "短いほう" を基準に、長さを揃えます。その際、画像が中央に来るように長いほうがトリミングされます。そこでできた正方形の画像を、160 x 160[px]に拡大または縮小します。そのため、読み込む画像は縦長でも横長でも、被写体が中央に寄ってさえいれば問題なく出力されます。

読み込む画像ファイルの形式は画像は PNG、JPG、JPEG、GIF、BMP、WEBP、SVG、ICO などのあらゆる形式に対応しています。また、サイズも問いません。

生成される画像は PNG形式となります。透過画像の場合、透過も保持されます。

「Contain Whole（すべて含む）」を有効にすると、画像全体が正方形に収まるように、幅、高さの "長いほう" を基準に成形します。

「Fill Background（背景を塗りつぶす）」を有効にすると、カラーパレットの操作が有効になり、そこで指定した色で成形で出た余白を塗りつぶします（透過画像の場合、透過部も塗りつぶされます）。

Asset Maker はあくまで正方形に成形するためのツールなので、アスペクト比を保持したい場合は Custom Template を直接使用ください。