[サッカーツール]選手やボールを配置し、ゴールシーンのアニメーションGIFを作成するツール「TTG」について

※2020/7/19(日)：Ver1.0公開
　

これなに？というと、
選手とボールを配置し、動かすことができ、最終的にアニメーションgifを作成するツールです
例えばこんな感じに
見た目がしょぼいのはご容赦を pic.twitter.com/ICGlsayn95
— とかいなフットボール@Jリーグネタ用アカ (@tokainakurasi) July 4, 2020

選手やボールを配置し、ゴールシーンのアニメーションGIFを作成するツール「TTG(Trail To Goal)」を公開しました。
ここでは基本的な使い方を説明します。

ツール「TTG」はこちら
「TTG」とは？
使い方は？
チーム名や選手名を手入力するのがめんどくさい！(PC中級者向け)
注意事項
ツール作成について(開発者向け)

ツール「TTG」はこちら

サッカー　アニメーション作成ツール　TTG
　

「TTG」とは？

サッカー用のツールです。
選手やボールを配置し、アニメーションしたり、それをアニメーションGIFファイルとしてダウンロードしたりできます。
ゴールシーンのアニメーション作成や、フォーメーションおよび選手の動きの確認などに使ってください。
パソコンのWebブラウザから使用できます。JavaScriptを有効にするだけで使用できます。ソフトのインストール不要です。
スマホやタブレットでも使用できます(ただし操作や画面表示がパソコンより不便かもしれません)。

使い方は？

選手はドラッグで移動でき、ボールはクリックで設定できます。

選手やボールの配置は2か所まで保存できます。

タイトル、チーム名、選手名、背番号、色は自由に設定できます。

途中で選手やボールの配置を変更可能です。

「PosReset」ボタンで選手やボールを配置のみリセットできます。同じチームや選手で新しいアニメーションGIFを作成したい場合に使用してください。
「AllReset」で全情報をリセットできます。一から作成したい場合に使用してください。

チーム名や選手名を手入力するのがめんどくさい！(PC中級者向け)

以下のルールでCSVファイルを作成し、「ファイルを選択」ボタンをクリックしてCSVファイルを指定すると、一括入力可能です。

川崎フロンターレ,
1,チョンソンリョン,
4,ジェジエウ,
5,谷口彰悟,
7,車屋紳太郎,
13,山根視来,
6,守田英正,
8,脇坂泰斗,
22,下田北斗,
9,レアンドロダミアン,
16,長谷川竜也,
41,家長昭博,
24,安藤駿介,
2,登里享平,
10,大島僚太,
19,齋藤学,
25,田中碧,
20,宮代大聖,
30,旗手怜央,
柏レイソル,
17,キムスンギュ,
2,鎌田次郎,
4,古賀太陽,
13,北爪健吾,
15,染谷悠太,
8,ヒシャルジソン,
18,瀬川祐輔,
28,戸嶋祥郎,
10,江坂任,
14,オルンガ,
39,神谷優太,
23,中村航輔,
3,高橋祐治,
20,三丸拡,
7,大谷秀和,
22,マテウスサヴィオ,
19,呉屋大翔,
33,仲間隼斗,

ここにサンプルCSVファイルを置きましたので、流用して使ってください。

注意事項

上記のようにブラウザの画面を狭くしてピッチ全体が表示されない状態で「Play」ボタンをクリックしないでください。アニメーションGIFの画像が乱れたり、作成に失敗することがあります。
作成した情報は、実行した端末のみでしか使用できません。
ツイッターボタンはあくまでツイッターアプリを呼び出すだけです。ツイッターに自動挿入しているURLをクリックしても、作成した情報は他の人には見えません。情報を共有するにはアニメーションGIFを添付してツイートしてください。
動作がおかしくなった場合は、ブラウザの画面をリロードしてください(現在の情報は全てリセットされますので、Saveしてから実行してください)。
初めてJavaScriptを使い、初めてツールを公開しましたので、色々と温かい目で見てもらえれば幸いです。。
予告なしに機能追加やバグ修正をすることがあります。ご了承ください。修正後、「@tokainafb」で告知します。
バグが見つかった場合は、@tokainafb、またはお問い合わせからお知らせください。ただしすぐには対応できない場合がありますのでご了承ください。