とかいなフットボール

速報試合レポート有り!Jリーグ川崎フロンターレとJFL松江シティと武蔵野シティとマスコットを中心にしたサッカーブログ

サッカーツール

[サッカーツール][開発者向け]初心者がJavaScriptでアニメーションGif作成ツールをこのように作成してみた

投稿日:

※この記事はJavaScript, HTML, CSSを使う開発者向けの記事です。
※この時点の私はJavaScriptを使い始めて約2ヵ月の初心者です。色々拙い箇所がありますが、ご了承ください。

 


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

ツール「TTG」と使い方とソースと開発環境

サッカー アニメーション作成ツール TTG
 
使い方
 
ソースは以下を参照するか、chromeのDeveloperツールなどで参照してください(実験しながら作成したので、コードが不統一、コメント不足、力技のあまり見せたくない実装になっていますが。。)。
https://ttg.tokainafb.net/main.html
https://ttg.tokainafb.net/ttg.js
https://ttg.tokainafb.net/style.css
 
開発環境はVisual Studio Codeです。
レンタルサーバは以前から契約していたエックスサーバーを使用しました。PHPも自動で使えるのでPHPスクレイピングも問題なく動きました。

コンセプト


以前から「サッカーの戦術ボードとかフォーメーション図のアプリを作りたい!」と思っていました。
ただ既に、有名な無料のサッカーの戦術ボード・フォーメーション図作成アプリに、footballtacticsがあり、またスマホアプリでも似たものは多数既にありました。
同じものを作っても仕方ないので、何か一味だそうと考えた結果「選手やボールの動きの動画を作成する」「その動画をツイッターで公開する」のはどうかと考えました。
できれば同じコードでパソコン・スマホ・タブレットで動かしたかったので、どの機種のブラウザでも動き、インストール不要なJavaScriptを使うことにしました。
動画でなくアニメーションGIFにした理由は次で説明します。
 
広告

各機能の実現方法

参考資料


最初は上記の本を購入してみました。
しかし、あれやこれやの実現したい機能を実装するにはこの本では足りず、結局ひたすらググりました。。

アニメーションGIFをJavaScriptで作成する方法

ツールの肝となる部分です。
 
前述の通り、最初は動画を作成しようとしました。ググった所、以下のようなMediaRecorderというAPIを知りました。
MediaRecorder を使ってブラウザの(ほぼ)全てを記録しよう | Mozilla Developer Street (modest) アーカイブ
ただ、色々いじりましたが、初心者の私には思うように使いこなせず、動画が作成できなかったので、この方法は断念しました(Webカメラで撮影した動画を作成する方法はたくさん出てきましたが・・)。。


次に「アニメーションGIFならサイズも軽くて簡単に作れるのでは?」と考え、ググったところ、jsfigというオープンソースのライブラリがあることを知りました。
JavaScriptでjsgifを使ってアニメーションGIFを動的生成する

リンク先のZIP内にある下記4つのJavaScriptファイルを読み込んで使う感じです。
LZWEncoder.js
NeuQuant.js
GIFEncoder.js
b64.js

この方法を試すと、確かにアニメーションGIFが作成できました!
 
ただこのツールは「サーバ上に保存した静止画像を元にパラパラ動画のアニメーションGIFを作成する」ものです。まず「画面のスクリーンショットを撮影」し、次に「撮影した画像を私のレンタルサーバに一度アップする」必要があります。
 
前者はhtml2canvasというライブラリで実現できました。
[JavaScript] JSだけでスクリーンショットを撮ってダウンロードもする方法 – Qiita


問題は後者です。サーバの容量が無くなったらツールが使えなくなりますし、ユーザの情報は面倒なことがおきないようにできるだけ管理したくない・・。
悩んだ挙句「HTML上に撮影したスクリーンショットを割り当てる」「ただし非表示にしてユーザには見せない」ことで、サーバにアップロードせず、ユーザ端末のブラウザ上で完結することができました。
具体的には、

上記のようにHTMLで style=”display:none;” かつsrcが空のimgを40作成しておきます(最大40フレームの動画を作成するため40枚のスクリーンショットの保存場所が欲しかった)。

画面描画は上記のように100ミリ秒ごとにするようにします。
 
次にPlayボタンをクリックすると、

上記のようにPlayボタンの文字列をStopに変更することで、

100ミリ秒毎に呼び出されるdraw()関数でScreenShot()を呼び出せるようになり、

ScreenShot()関数内で、pitchキャンバスのスクリーンショットを撮影して、S1~S40のimgに格納します(gifArrayIndexはグローバル変数で、ScreenShotを呼び出すたびにインクリメントし、s1~s40の文字列を作成するために使用しています)。
 
これで、MakeGifボタンをクリックすると、

上記のように、div animeに囲まれたs1~s40の画像をまとめて取得し、ループを回して encoder.addFrame(ctx); を実行することで、かなり力技ですがアニメーションGIFを作成できました。
もっとスマートな実現方法があるかもしれませんが・・。

上記のようにブラウザの画面を狭くしてピッチ全体が表示されない状態で「Play」ボタンをクリックしないでください。アニメーションGIFの画像が乱れたり、作成に失敗することがあります。

なおhtml2canvasの仕様?上、キャンバス全体が画面表示されてない状態でスクリーンショットを取ると、画面の一部が乱れたり黒く表示されたりしました。有効な手段がなかったので、上記の注意書きを書いておきました。。

選手やボールをPlayボタンをクリックするとアニメーションさせる

ボールを動かす – ゲーム開発 | MDN
上記を参考に作成しました。
前述のfunction draw()関数とsetInterval関数を使いました。
移動速度を変更できる機能を作ろうかとも考えましたが、ひとまず「draw関数内で、100ミリ秒ごとにターン1とターン2の距離を10で割った距離を移動させて描画する」「これを10回繰り返す」ようにしました。
よって、ターン1とターン2の距離が短ければゆっくりと、遠ければ速く移動します。

選手をドラッグして動かす

Javascript でドラック&ドロップを実装 (ライブラリ使わない) – Qiita
上記を参考に作成しました。
 
問題は、2チーム合計36選手分のHTMLとCSSとマウスイベントを作成しなければならないことでした。
うまく抽象化すれば楽にできると思うのですが、初心者には難しかったので、力技で36選手分のコードをひたすら書きました。。

上記はHTML部分ですが、量が多く、似た処理ばかりで、機能追加するたびに修正する必要があり、気が遠くなりそうでした。。ここは要改善箇所ですね。。

スマホやタブレットで選手を動かす

他に地味にひっかかったのは、マウスを使ったイベントと、スマホやタブレットでタッチするイベント名が違ったことでした。
PCでは選手をドラッグできるのに、スマホではできなかったので、しばらく悩みましたが、以下を見つけることで解決できました。
HTML5とJavaScriptでPC・スマホのマルチタッチ対応してやんよ!!! | ときどきWEB
ここの「スマホ・タブレット(タッチ端末)特有のイベント」を見ながら、onmousedownイベントと同じ処理をontouchstartイベントで、onmouseupイベントと同じ処理をontouchendイベントで、36選手分作成しました。地獄でした。。

マウスクリックでボールを画面表示する

HTMLでボール画像を呼び出しておきます。
次にcanvas.addEventListener(‘click’, onClick, false)でピッチキャンバス内のクリックを感知した場合に、

上記のfunction onClick(e)関数でボール画像の位置を移動しました。

セーブとロード

選手とボールの位置は、最初はcookieに保存していましたが、保存する情報が増えていくと思うように動かなくなりました。
ググると、以下のように、cookieは最大4kBまでしか保存できないのですね。。
CookieとWebStorageとSessionについてのまとめ – Qiita
そこで容量の多いLocal Storageを使ってSaveとLoadを実現しました。
これだとファイルを持ち運びが難しいため、ファイルに書き出してもよかったのですが、スマホやタブレットだと不便そうなので、Local Storageのみ使いました。読み書きが簡単で楽でした。

PHPのWEBスクレイピングでスポーツナビのJリーグのスタメン情報をCSV形式で取得する

自分でテストしたところ、背番号と選手名を入力するのが大変だと気付きました。
そこでスタメン情報をスクレイピングで取得し、CSVファイルを作成し、それを読み込ませることで自動入力するようにしました。
スクレイピングは、少し前にPHPをいじっていたこともあり、以下を参考に、phpQueryを使ってPHPで実現しました。
phpQueryを使ってWEBスクレイピングを試してみた – Qiita


ただ、このPHPツールは非公開としました。
理由は、Librahack事件のように、WEBスクレイピングは情報収集時に著作権法違反となる可能性があること、サイトに負荷をかけることから偽計業務妨害容疑をかけられる可能性があることを挙げているからです。
 
一応、以下に、スポーツナビ(例えばここ)からチーム名・背番号・選手名を一括取得するPHPコード(かなり力技ですが)を載せておきますので、ご自身のPHP環境で自己責任でお試しください。

これを実行すると、例えばこのようなCSVファイルがブラウザからダウンロードできます。
 
広告


 
( ・∀・)つ最後にブログ村とSNSのボタンをクリックしていただけると、ちゃさん感激!
 
にほんブログ村 サッカーブログへ にほんブログ村 サッカーブログ 川崎フロンターレへ
にほんブログ村 にほんブログ村
 

-サッカーツール
-, ,

関連記事

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

※2020/7/19(日):Ver1.0公開   これなに?というと、 選手とボールを配置し、動かすことができ、最終的にアニメーションgifを作成するツールです 例えばこんな感じに 見た目がしょぼいの …

サイト内検索

2020年8月
 1
2345678
9101112131415
16171819202122
23242526272829
3031 
[随時更新][2020移籍]現川崎F移籍まとめ
[随時更新][2020移籍]元川崎F(MF/FW)移籍まとめ
[随時更新][2020移籍]元川崎F(コーチなど/GK/DF)移籍まとめ
[随時更新]川崎フロンターレの作り込み過ぎたコラボ選手紹介動画まとめ
[随時更新]川崎フロンターレの普通でない始球式の歴史まとめ
[随時更新]川崎フロンターレの変わった花束贈呈と被害者まとめ
[随時更新]トイレに行けない?川崎フロンターレの楽しいハーフタイムイベントまとめ
[随時更新]等々力陸上競技場近く、ステンレス製の雀(ピコリーノ)と衣装まとめ。かつては「ピーチクー」ユニ着用!
PVアクセスランキング にほんブログ村
ピンクアンブレラ運動 - なくそうよ、虐待。やめようよ、いじめ。子どもは宝。| チャイルドワン

楽天が出資!勝利にこだわるヴィッセル神戸
Jリーグの知識を身につけて、サッカー観戦をもっと楽しみましょう!