「STEAMスポーツ」について

いやぁ…　子供達に限定するつもりではないんですが。

みなさん！「STEAM教育」って知っていますでしょうか？
私はまったく知りませんでした…　
「STEAM教育」については、JUST SYSTEM社の以下のサイトの解説がわかりやすかと思います。
　STEAM教育とは

ひょんなことから、この「STEAMスポーツ」を推進しようとしている会社の皆さんと接点を持つようになり、少し協力させていただいています。

お気づきかと思われますが…　「STEAM教育」は、以下の５つの部門を中心に＂これら5つの分野の学習を通して、子どもを今後のIT社会に順応した競争力のある人材に育てていくための教育方針＂と定義されています。

S：科学
T：技術
E：工学
A：芸術
M：数学

なぜ、ここに＂S:スポーツ＂が含まれていないんでしょうか… ？？

わかります。私も小さい頃は＂S：科学＂に興味を持ち、学研の科学と学習の＂科学＂だけを購入してもらいました。こういう好奇心を入り口として自ら学び、理解し、さらに考える力を育んでもらえる環境は必要と思います。そしてスポーツだって科学ですし、気合や根性だけではなく科学的視点を持って、取り組んでも良いとは思います。

でも、自ら学びたい！と思っている子供たちと同じくらい、純粋に『スポーツを上手になりたい』と取り組んでいる少年少女たちも、たくさんいるはずです。
「上手になりたい」という好奇心をスタートラインとして、学ぶ力を育む環境も必要であると思います。

こんな『スポーツを上手になりたい』と思っている少年少女達が、自分たちでも使えて、そしてその指導者にも使えるようなツールを提供する取り組みがあっても良いのではないかと思います。

スポーツとITの関係性

じゃあ、純粋に『スポーツを上手になりたい』みんなには、どんなツールが必要なのか？？

ここからは少し、私の若い頃の経験からのお話を…
もう、３０年以上前の、二昔前のお話になります。Qiitaユーザーの年配の皆さんに分かりやすくいうと…　まだまだインターネットの黎明期のお話です。

インターネットを利用するためには、pppでモデムを通してダイアルアップ接続しないと利用はできません。IIJと契約し…PC９８にWindows3.1と"Internte Chameleon"というソフトをインストールし電話線のモジューラジャックに繋いだモデムから、9,600bpsでppp接続し、MosaicやNetscape（というブラウザ）ででアクセスすることで、初めてインターネットという世界に潜り込むことができた時代です。（私が初めてモデムという機会に触れた時は、1,200ボーというスピードでしたので、少しは進化していました。その前は電話の受話器をカップラーというもので接続していたっけ…）
私もまだ若かったですからね…　せっかくインターネット接続しても、結局は1/3以上の時間は世界中のエロい画像を探すことに費やされることになるのですが！？

　参考：その時代がイメージできるサイト…

それから暫くしてひょんなことから、プロ野球の一球づつのコースや球種とその打席の結果などをパソコンに記録できる、プロ向きのスコアブックみたいなものを作っているヘンテコな集団に出会い、ヘンテコな私はその集団に合流しました。
その頃はスポーツにパソコンなんて全くそぐわない存在でしたし、まぁスポーツ選手とは遠い存在ではあったのですが、それでも一部の監督やコーチ・スコアラーさんには興味を示してもらえ、NPBのいくつかの球団とはお付き合いをさせていただける存在にはなりました。この頃ちょうど日本で「データ野球」や「ID野球」をいうワードを耳にするようになってきた頃です。

結局は一般的には、2011年公開のマネーボールという映画で、＂データ＂と＂野球＂というワードが結びつくイメージが具体的に定着することになり、その原作であるノンフィクションが、2003年に全米でベストセラーとなる5年も前だったわけで、日本のその頃のオジサンのための＂プロ野球＂には、ちょっと早すぎたんでしょうね！？

実はその日本では早すぎたかもしれない時代に、メジャーの球団にも売り込みに行っています。メジャーで会ってくれた３球団ほどに、それらを売り込んでいます。ヤンキースにも会ってもらえ、キャッシュマンGMにもプレゼンしましたが…　採用には至りませんでした。残念！！

残念ながら簡単には世界進出ができませんでしたが、エロいことにしか使えていなかったインターネットに、＂この1球毎の情報をリアルタイムに流せれば、世界進出が叶う＂というイカガワしい考えから、独自にかつ独断で＂Data Stadium＂というサイト名で、NPBの全試合のインターネット中継を始めたのでしたぁ！！
そしてこれが、後の『Yahoo！一球ごとの速報』としてみなさんの目にもとまっているかと思います。（Yahoo!がこの中継を始めるころは、私はこの集団から離れていますが…）

あぁ…　昔話に華が咲いてしまいました。そんなことはどうでも良く…

このヘンテコ集団が提供していたもう一つのツールが…　ビデオ（ベータ方式）の２つの映像を、1つのPCの画面に表示できるアプリケーションです。この『２画面ツール』は、ヘンテコ集団の親分が自分のゴルフの上達のために、大枚をはたいて開発したそうなのです。
これも、複数の球団やプロ野球選手・プロゴルファーに利用してもらっていましたし、大学の水泳部とコラボってみたり、トップレベルのスピードスケートの合宿に同行させていただいたこともあります。

この『２画面ツール』は、以下のようなシンプルな機能なのですが、なかなか一般的には実現ができない機能であり、コマ単位で繰り返し観たり、線を引きながら違いを観察するには、非常に良いツールと思っていました。

両画面を独立した映像を流せる
両画面を同スピードで同期して流せる
両画面を独立して１コマ単位で移動できる
直線や矩形をPCの画面上に描画できる
ペン・タブレット装置で自由線や文字をPCの画面上に描画できる

その当時、パソコンにビデオを表示することすら大変で、PCにビデオカードをセットし…　ベーカム２台をビデオカードに接続し、コントローラやタブレット装置を接続するなど、たった２動画を同期して表示するだけで大掛かりな仕組みが必要でした。

さ〜て、ようやくここからが本題です！

この『２画面ツール』を操作しプロの選手やコーチと選手などが、好不調の体の使い方の違いや、選手間での差異などを話しているのを聞くと、全くの素人の私でもその内容が理解できるんです。１試合の間だけでも、足の位置や肘の高さなどに差が出てきてしまいますし、１シーズンを通してみると更にフォームに変化が出てきたりもします。

プロの現場であっても、こんなにシンプルな機能でも効果はあることを知っていました。そしてちびっ子達にこそ、こんなシンプルな機能が必要であるべきなのかと思っています。

自分の動作・姿をしっかりと確認する
比較すべき姿を素早く簡単に表示する
どこがどのくらい違うのかを明確する
差異に対する原因と影響を考える
直した動作を確認する

今時は、ラプソードやトラックマン・ダートフィッシュなどもっともっと緻密で詳細で、これまでには分からなかった球の回転数やバットのヘッドスピードだとかまで計測できたりします。しかしこれらのツールは＂結果＂を数値化したものです。理想のフォームで、高いレベルのスピードで、いつも思ったところに投げられている人は、これらのツールも効果的です。おおいに利用すべきです。

でも、まだそこに至っていない場合は、よりSTEAMの精神により寄ったシンプルなツールが必要なのではないかと考えます。そして、ボールやバットヘッドのスピードを高めるための原理を理解し、コントロール良く投げられ遠くまで飛ばせる基本を知る必要があるのです。
このためにも、選手と指導者が同じ目線で、同じコトバでコミュニケーションを取れることが重要ですし、少年少女が自発的に"分析"・＂確認＂・＂トライ＂してみたくなるようなツールが必要と考えます。

「STEAMスポーツ」について

そしてここからは、「STEAMスポーツ」についてですね。

「STEAMスポーツ」としては、少年少女向けに＂タグラグビー＂というゲームを通して戦略やプレイを考えつつ、そしてそれを活かしつつプログラミングを学ぶ場の提供や、教員向けのコンテンツをLiblaryとして公開し、それを元に経産省の推進する「未来の教室」の実証事業に参加しています。

その中でも私が直接携わっているのが、最初の画像のように動画を二つ並べて、２つの動画を同時に再生できるWebアプリケーションです。今の時代ではどぉってことのないツールです。似たようなツールはいくらでもあると思います。
しかし、これがウン10年前には、先に述べたようにPCやベーカムなどを組み合わせた大掛かりなシステムでないと、なかなか実現できなかった仕組みなのです。

今となってはそんな仕組みが、Webアプリケーションとして提供でき、PCやMacにiPadなどのタブレットからスマホなどの複数のディバイスで簡単に実現できてしまうんですよねぇ…　しかもそのディバイスで映像を撮ることまででき、その動画をそのまま２画面で比較することもできるんです。はぁ…　すごい時代です。

そんなわけで…　少年少女がITを活用し、スポーツに興味を持っている子も、今まではスポーツを苦手にしている子も、自分で考えながら、さらに上手になったり苦手を克服したり… スポーツを楽しいものにして、ヤるのもミるのも好きな活発にスポーツに関わってもらえるような利用のされ方をされたら良いなぁ。と思っています。

そしてようやく現在では、いくつか複数の中学校・高等学校にトライアルとして利用してもらっています。
特に１つの高校では非常に活発にそして効果的に利用してくれています。ログデータなどを確認する限りではもう今の時点で５００もの映像をアップロードしています。生徒数はそう多くはない学校と思いますが、数ヶ月で５００映像なので相当な利用頻度です。
部活でも利用してくれているようですが、授業でも取り入れてくれているようです。

使われ方のログを見ると、まだ『細かな動作を２画面で同時に見て、フォームや動作を比較・修正する』というような、作り手から見た期待する方法ではないかもしれませんが、自分で見て・違いを感じ・考えて変えてみるという＂STEAMスポーツの理念＂を体現してくれているような気がします。

みんなで見本となる人の映像を見る
みんなでそれほど上手ではない人の映像を見る
自分の映像を見る
そこから、自分は次はどうしようか考える
先生・コーチは、ちょっとしたヒントやアドバイスを加える
トライした取り組みの結果の映像を見て、さらに感じ・考える

2画面動作解析アプリ「Pre-Post(プレポス)」の使い方紹介

では、そろそろ…
この＂STEAMスポーツ＂として活用してもらいたい、独自に開発したWebツールを簡単に紹介したいと思います。

この2画面動作解析アプリ「Pre-Post(プレポス)」は、バックエンドを Python＋Flsk＋MriaDB でAPIサーバー構成し、フロントエンドはピュアなJavaScriptで実装しています。
まだまだ素人っぽい構造やデザインだったり…　ツッコミどころはたくさんあるのでしょうが、まずはプロトタイプ的なプロダクトとして一人で開発し最低のコストで運用をスタートしています。

URLは、以下になります。
https://2sa.steams-jp.com/

ログイン画面

最初にログイン画面が表示されます。

アカウント登録

ログイン画面の下の方に [アカウント登録はこちら] ボタンがありますので、そのボタンをクリックしアカウント登録フォームから登録をお願いします。
この登録で１４日間、無料で全ての機能が利用できます。

事務局が、なんだかマーケティングを意識して…　皆さんのいくつかの情報を"必須"で登録してもらいたかったようで、入力量は若干多くはなっていますが…　現状ではDMだとか何もしていませんので、余り気にせず登録してみてください。

動作環境

基本的に、最新のWebブラウザ（Chrome or Safari）を対象としています。
教育現場で利用されることの多いChromebookやiPadでも、WindowsやMacとほとんど同様に利用できることがキモです。学校で先生も生徒も、同じ映像を同じ操作で利用できます。

以下のような環境で利用可能です。

OS	ブラウザ
Windows10	Chrome
Windows10	Edge
Mac	Safari
Mac	Chrome
iPad	Safari
iPad	Chrome
iPhone	Safari
iPhone	Chrome
Android	Chrome
Chromebook	Chrome

iPhoneやAndroidのスマホやタブレットは、ディバイスの向きによって画面の向きが変わりますので、縦や横でも自在に２画面を表示できます。撮影したい・比較したい映像に合わせて利用できます。
また、Webアプリですので利用シーンも選びません。学校で撮影した映像を、自宅で予習・復習ができます。通勤・通学時だって構いません。ちょっとした時間に気になったらすぐに確認しましょう。

簡単に基本機能の説明を…

①動画の操作

一番基本の「動画の操作」です。
左から、「最初に戻す」「再生」「戻し」「送り」「２画面同時再生」 です。

②画面の操作

上から、「２画面／１画面切り替え」「左右画面切り替え」「拡大」「初期化・中央」「縮小」　になります。
左右の画面は独立して、再生・停止や拡大・縮小を指定できます。

③動画のスクロール

動画の再生時間を 「スクロール」 で表現します。この 「スクロール」 をマウスや指で操作することで、動画の再生シーンを移動することもできます。
「ベースタイム前」「ベースタイム後」 は、動画の基本の動画長を指定できます。注目したい動画のスタート時間とエンド時間それぞれを指定ます。左端の ［← →］ ボタンで指定の動画長だけを再生するように設定できます。

④描画機能

動画に描画できます。直線・三角・長方形・円 があり、フリーハンド も利用できます。
描画情報は記録されますので、別のタイミングに同じ動画を再生した場合、描画した内容が再生されます。

⑤距離計測機能

「基準ライン」 と 「計測ライン」 を組み合わせて、歩幅や動作の ＂距離＂ を計測できます。
比較することで、長い・短いは把握できます。でもSTEAMですから…　定量的な値で把握できた方が良いですね！
以下の画像で説明すると…　基準ラインは柵の支柱に合わせました。この幅が1.2mであることを事前に計測し基準距離として1.2mを設定します。その後、計測ラインを計測したい距離に合わせれば、比例の関係で距離を算出します。（遠近の関係で多少の誤差はありますが…　その辺はご愛嬌で！）

⑥角度計測機能

スポーツでは膝や肘、バットやゴルフクラブなどいろいろなシーンで角度に注目が集まります。
これも、定量的な値で把握・比較すべきです。そんな時に利用します。

⑦ローカル動画読み込み

ローカル動画 も直接読み込めます。アップロードはしませんのでクラウド上に保存はできませんが、iPhoneで撮影した動画を、ちょっと確認したりすることも可能です。（画像はMac）

⑧クラウド動画読み込み

アップロード済み のデータを クラウド から読み込みます。
チーム契約で利用する場合は、チーム単位・クラス単位で動画を整理できます。
また、タグを付与することで、動画の選択をスムーズにすることができます。

最後に

ここまで、「STEAMスポーツ」 や 「スポーツとITの関係性」 について、一方的に好き勝手なことを書き、そして 2画面動作解析アプリ「Pre-Post(プレポス)」の使い方を紹介させていただきました。

エンジニアのお父さん・お母さん。お子さんのスポーツをより科学的により具体的に説得力のあるサポートをしてあげませんか？？お父さん・お母さんがスポーツが得意である必要はありません。
お子さんに、スポーツが上手になることを通して＂考える＂そして＂変わる＂喜びを伝えてあげましょう。

自分が子供の頃の＂おやじ＂は本人はスポーツは（自称）万能でしたが、教え方といえば「がっ」とか「ぐっ」とか擬音ばっかでまったく科学的ではなく、良い結果の時には「そうそう」と言ってはくれるのですが何が良かったのか＂むすこ＂は理解もできておらず…　そして最後は＂気合＂で何とかさせようと熱心に教えてくれました！っが、当の息子本人は運動音痴ではないけど、ズバ抜けた技術も身につけることはできませんでした。たぶん…＂おやじ＂が教えてくれなくても、上達度は変わらなかったと思います。
ビデオカメラですらまだ一般家庭には普及していない時代ですし、凡人にはそんな光景がふつ〜な時代だったと思います。

しかしこんなに、子供が学ぶには良い時代になっているんです。習い事や地域での活動でも良いのです。ちょっとだけ…　お父さん・お母さんがサポートしてあげてください。

また、スポーツだけにこだわるべきことでもありません。
ダンスだって良いし、日本舞踊だって茶道だって先生の所作を真似て覚えるのです。動画で比較してみてください。

そして、教育現場で苦労なされている先生の皆さん。
もしかすると理科の実験や家庭科での裁縫や料理でも良いかもしれません。
子供たちに伝えるツールとして、動画を取り入れてみませんか？？

ちなみに、このツールは経済産業省が実施する「EdTech導入補助金」に採択されています。
安心して利用いただける状態になっていると思います。
　　２画面動作解析アプリ Pre-Post（プレポス）、経済産業省実施の「EdTech導入補助金」に採択！

たぶん、いろんなシーンで…　私もまだ気がついていない利用ケースがあるのかもしれません。
だからこそ、このQiitaというエンジニアが集う場で、「STEAMスポーツ」 を紹介したかったのです。

ここまで、なが〜い駄文を、根気よく読んでいただきありがとうございました。
興味があれば…　ちょっと覗いてみてください。

https://2sa.steams-jp.com/

【シリーズ】

今後、細かな機能なども説明を加えられれば良いと思っており、開発・運営でも進捗があれば、皆さんにお知らせしたいと思います。

以上