スポーツデータサイエンス入門：アプリ開発とデータの測定・分析を体験しよう（筑波大学附属駒場高等学校出張授業）

2024年7月8日 2026年1月2日

jolab

開催日　2024年7月8日

受講生満足度　調査なし

探究学習でスポーツデータ分析をやってみたい、という高校生が増えています。筑波大学附属駒場高校もそのひとつで、私が教員として勤務していた時からそのような要望をもつ生徒が一定数いました。

しかし、スポーツアナリティクス自体の歴史が浅く、アマチュアスポーツや学校教育における方法論はまだ確立していません。

また、スポーツデータを測定したり、分析したりするための機材やアプリケーションも発展途上で、誰でも無料で使えるツールはほとんどない、という現状です。

なので、探究学習でスポーツデータを扱おうとすると、学校としてそれなりの予算を立てて機材やアプリを契約する必要があるのですが、必ずしも十分な予算がつけられるわけではありません。

「だったらアプリを作ってしまえばいいじゃないか」という発想で開催されたのが今回の出張授業です。

今回、生徒さんにチャレンジしてもらったのは、ゲームパフォーマンスの測定アプリです。

どうやってアプリを開発する？

「高校生がスポーツデータ分析のアプリを開発？そんなことできるの？」と思った方は、ぜひ覚えておいてください。Googleアカウントがあれば（無料版でもEducationでも）、誰でもWebアプリの開発ができるんです。

しかも、サーバーを自分で用意する必要もなく、開発環境はブラウザ（Google Chromeが推奨）だけで大丈夫です。もしGoogle Education（Google Workspace）を使っているのであれば、学校内（組織内）のユーザーだけがアクセスできるように設定できるので、セキュリティ的にも安心、という利点もあります。

使用する言語は、HTML、CSS、JavaScript、そしてGoogle Apps Script（GAS）です。詳細は割愛しますが、それぞれの言語は次の目的で使用します。

HTML：Webアプリのインターフェース（文字やボタン、データテーブル、動画再生のプレイヤーをどう配置するか）を記述します。
CSS：HTMLで書かれたボタンやテーブルなどを装飾し、見た目を整えます。
JavaScript：ユーザーがボタンをクリックしたときなどの動きや、サーバーにデータを送信するときの処理などをプログラムします。
Google Apps Script（GAS）：サーバー上での動きをプログラムするための言語です。GASはGoogleスプレッドシートをデータベースの代わりに使用することができます。

ローカルデバイス（ブラウザ）の設計はHTML、CSS、JavaScriptを使用し、サーバー側ではGoogle Apps Scriptを使う。Googleスプレッドシートをデータベースとして使用できる点は個人開発のコスト面では大きなメリット。

スポーツデータに欠かせない動画ファイルをどう扱うか

GASを使ってWebアプリを開発すれば、どんなデバイスであろうと、ブラウザとインターネット環境さえあればそのアプリを使うことができます。もちろん、学校のパソコンで作業した後に、自宅に帰ってスマホで続きの測定をする、といったことも可能です。

しかし、アプリの設計上、もうひとつ欠かせない要素があります。それは動画ファイルの扱い方です。実はGoogle Apps ScriptによるWebアプリでは、自分のGoogleドライブ上の画像を読み込むことはできますが、動画を読む込むことができません。これはおそらくGoogle側の仕様で、ストリーミングによるGoogleドライブの負荷を抑えるためだと思われます。つまり、試合映像を読み込んでデータを測定するWebアプリを開発するには、動画ファイルをGoogleドライブ以外のサーバーに保存しなければならないのです。

スポーツの試合映像のファイルは、少なくとも数ギガバイトになりますので、自前でサーバーを契約するにはコストがかかります。そこで代替手段として、YouTube Player APIが挙げられます。

YouTubeの動画って、よく一般サイトに埋め込まれていますよね。その埋め込み型のYouTubeを、JavaScriptで自由に再生・停止・コマ送りをしたり、再生位置（動画上の時間）を取得したりすることができるのが、YouTube Player APIです。これを使えば、自分のWebアプリにYouTubeプレイヤーを埋め込んで、JavaScriptで自由に制御できますし、動画を保存するサーバーを用意する必要がなくなるので、スポーツデータの測定アプリにはぴったりなのです。

つまり、Webアプリ上にYouTubeプレイヤーをAPIで読み込み、それを再生しながら入力コントロールを使って測定していき、データをテーブルに蓄積していく、という仕組みです。また、測定したデータは、ツールバーのアップロードボタンを押せば、サーバー（Googleスプレッドシート）に保存することができます。

実際にプログラミングしてみよう

Webアプリケーションの開発方法と設計が理解できたところで、さっそくHTMLとCSSでページをレイアウト&デザインし、JavaScritpとGoogle Apps Scriptでプログラムを書いてもらいました。

とはいっても初心者の高校生ですから、ゼロから自分ですらすらと書けるはずがありません。そのため、実際はこちらで用意したコードを写しながら、「これはこのボタンで」とか「ここを押すとこのコードが実行されて」というように、仕組みをイメージしながら作ってもらいました。

生徒さんの感想

今回の取り組み（Webアプリケーションの開発）は、高校生にとってはかなりハードルの高い内容でした。普通に考えると、一日（授業時間は数時間）で終わる内容ではありません。しかし、筑駒生の理解力と集中力はさすがですね。こちらの予想を超えるペースでついてきて、最終的には多くの生徒が自分のWebアプリを完成させ、実際にサッカーやテニスのYouTube動画を使ってデータの測定体験をすることができました。

とてもタメになった。今、様々なスポーツでデータを分析し活用するというのが必須となっている中、非常にタイムリーな講演を行なっていただき、非常にありがたかった。アプリのコードが長すぎて、アプリを作るということの大変さを実感した。

実はgoogleでの開発は授業でも扱ったことがあるが、より発展的な内容を学べて楽しかった。最後の方はコードの意味を追えなかったが、それでもアプリ開発の雰囲気をしれてよかった。

授業後には生徒さんからこのような感想が聞かれ、良い経験になったようです。

筑波大学附属駒場高等学校ホームページでの本講演会の記事を読む。