オンライン部活をITでサポートするWebアプリ【 ２画面動作解析アプリ：Pre-Post 】の開発＜２＞

## 「未来のブカツ」「オンライン部活」について

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352554/a082e134-865c-1326-95be-0a745e55b97d.png)

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

先日、「Webアプリ【 ２画面動作解析アプリ：Pre-Post 】」で連携させていただいている企業から、プレスリリースがあったんですかね？ 詳しくは知らないんですが…
でも、開発に携わっている中でやはり「**未来のブカツ**」や「**オンライン部活**」というワードは、ちょいちょい耳にします。

 ・ [「未来のブカツ」ビジョン（概要版）](https://www.meti.go.jp/shingikai/mono_info_service/chiiki_sports_club/pdf/20220928_2.pdf)
 ・ [STEAM Sportsがオンライン部活を実現する！ ...](https://www.zaikei.co.jp/releases/1542883/)

ビジョンは良いと思います。応援したい。進めるべき方向性だとは思います。
帰宅部 ＆ 麻雀部 を掛け持ちしていた、元高校生としては…

かく言う私も実は、小学6年生の半年間は野球少年でした。
それまでは、自宅の近所の公園で野球をしていて…　その当時はフツーの公園でバットを振り回しボールを投げても、サッカーをしようが、そこで怪我をしようが喧嘩になろうが…　なんでもアリな時代でした。
小学5年生くらいかな？ 自分と同学年の連中でなんとなく野球チーム的な集まりになり、なんか放課後に練習したりしていて、ピッチャーを志望していたヤツが左投げで、なんか一丁前なチームになったような気がしていたんですよ！ 勘違いだったんですけど…

そして、その小学生の勘違いヤロウ達は行動を起こしました。
近所の、元高校野球経験者（ヤクルトの若松と一緒だったかな？）のおっさんの所に『少年野球チームの監督をやってください！』と、子供たちだけで、夕方のおっさんの自宅に押しかけたのです。ようやったわ…ほんと。
まだ…　チームもあるみたいだし。

　　　[手稲山口メッツ](https://teams.one/teams/t_mets)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352554/ac825b3d-14c2-c9c1-8361-c78112bc4e73.png)

ほんと、6年生って言ったって…　1年のうち半分は雪で覆われる札幌では外では野球なんてできないし…　やったら遭難します。（ウソ）
6年生の雪が溶けてから雪が降るまでの、たったの数ヶ月です。
８戦７敗１分け という輝かしい少年野球時代を経験させていただきました。

その一時、住宅地の一地域は湧き上がりました！
そのヤロウ達の保護者も非常に協力的で…　練習の度に集まり応援してくれて、缶ジュースなども差し入れてくれたり、我が（自称スポーツ万能の）オヤジも、参考にならないアドバイスと気合を振りまきながら頑張ってました。

その＂監督＂は今となっては…　凄いことをやってくれてたんだと驚きます。なんの経験も実績も無い我々のために、半年で８試合もマッチングしてくれました。そして毎土日には練習を計画してくれ、ユニフォームを企画したり背番号を与えてくれ、ちゃんと練習できる（公園ではない）グラウンドなども手配してくれたんですよ。全くの未経験で全て無償です。
今、自分がやるなんて…　考えたくも無いし、全く考えられない。

なんか、中高生の部活も地域の少年野球も…　こう言う善意や熱意・そしてほんのちょっとのおせっかいで成り立っているのが現状なのかもしれません。

そして、そこにメスを入れ始めている、経産省の「**未来のブカツ**」構想なんですかね？ 
当の文部科学省はどうかと言うと…　ステークホルダも多く調整など難しいんでしょうけど、なんとなく経産省との温度差も感じます。文科省の最初の目的は、＂土日の…＂なんですよね。そりゃそうです！ 月金で授業をやって…　土日も部活で指導だなんて…　だれも教師をやりたくなくなってしまいます。そんな無償の精神に頼ったシステムは、いつも続かないですからね。

 ・ [学校の働き方改革を踏まえた部活動改革について](https://www.mext.go.jp/sports/content/20200902-spt_sseisaku01-000009706_3.pdf)
 ・ [運動部活動改革のこれまでの経緯・取組について](https://www.meti.go.jp/shingikai/mono_info_service/chiiki_sports_club/pdf/013_05_00.pdf)

まぁ私には、難しいシガラミだとか、ビジネスとしてのブカツへの思惑だとか…　あまり関係ないんで… なるようにはなってくれれば良いのですが。

しかし…　やはり、じゃ子供達にはどういう影響が出てしまうのか？？ というところに注目すべきですよね。
自ら学問を学びたい！と思っている子供たちと同じくらい、純粋に『**スポーツを上手になりたい**』と取り組んでいる少年少女たちの＂上手になるための場＂は維持されるべきと思いますし、だからと言ってプロ組織に直結していたり、スポーツジムの関連したクラブみたいな毎月高額な費用が必要なところだけでは、家庭間の格差の問題も浮き彫りになりますし… スポーツの種類での格差も生まれる可能性も見逃せません。
剣道・弓道なんて、子供達が学校の部活以外で経験できるところがあるのでしょうか？？

あの、くっさい剣道の道着を置いておける部室の存在意義は重要です。（別の用途としては…　タバコの臭いを隠せたのは内緒です…）


## 「未来のブカツ」「オンライン部活」へのITでのサポートについて

現状の【２画面動作解析アプリ：Pre-Post】は、「オンライン部活」などで利用できる注目の機能として、動画の指定のシーンに「**テキストのメモ**」や「**音声のメモ**」を付加することができます。
コーチや生徒本人で、良かったポイントや注意すべきポイントにピンポイントでメモを付加することで、単に動画を見たり比較したりするだけでなく、記録としての情報が追加できます。

また、PCやMacというディバイスに限られてしまいますが…　ブラウザ上で操作している内容を、その操作中に発する音声も含めて動画として記録する「**レコーディング**」機能も提供しています。
「**レコーディング**」された動画はクラウド上に保存したり、ダウンロードすることが可能なので、指導者の伝えたい内容を、複数の生徒や保護者などに共有することが可能となります。

さらに…　「オンライン部活」等でも効果的で使いやすく、さらには実際の教育現場で生まれてくるアイデアなどの機能化を、鋭意継続開発中です。ご期待ください。

そして、開発者視点で、Pre-Postの利用シーンやアップロードされる動画をみると…　
「**動画を見る**」「**動作を比較する**」ところに注力し過ぎている感じがしていますね。 まぁそれが特徴のツールなので間違った使い方ではないのですが…　でもこの【２画面動作解析アプリ：Pre-Post】は、アップロードされた動画を再生すると音声も再生されます。（動画なんで音声が付加されているのはふつーですよね！？）
でもなにかいざ記録としての動画を撮影すると、撮影される側も撮影する側も緊張してなのか、良い映像にしたいのか… **黙る**んですよ！ なんとなく緊張感が漂う。

音声・コトバは、動画に組み込める情報です。
コーチや撮影者は、この映像はどこに意識して動作しているのかを音声で付加してあげても良いですし、被写体本人が発声したって良いんです。
「**ちょっとココを上にこうしてみます！**」とかね… 
上手くできていたら、「**ココをこう変えたら上手くできた！**」というメモ的な音声でも良いし、「**ココをこうしたいんだけど、こうなってしまい上手くできない**」など、その時の体の動きを思い出しやすくするための＂メモ＂情報を、音声として付加するなど。
せっかく情報密度の高い＂動画＂なんですから、遠慮せず音声情報も記録してほしいですねぇ。


## 2画面動作解析アプリ「Pre-Post(プレポス)」の使い方紹介
では、そろそろ…
この＂**STEAMスポーツ**＂として活用してもらいたい、独自に開発したWebツールを簡単に紹介したいと思います。

第２話目の今回は、「オンライン部活」などで有効な機能としての＂**メモ**＂としての機能をフィーチャーして紹介しましょう。

URLは、以下になります。
**[https://2sa.steams-jp.com/](https://2sa.steams-jp.com/?qiita)**

前のセクションでは、撮影時にも＂音声＂でメモ的な情報を付加しましょう！ と提案しました…
しかし、被写体が後で気がついた事や、コーチや保護者が伝えたい事などについては、その場で動画に音声などで指摘などができない場合が多いですよね。タイムラグがあったとしても、アップロードされた動画を見たりした別のタイミングでメモできる機能が、「**未来のブカツ**」や「**オンライン部活**」には必要と考えます。
「Pre-Post(プレポス)」では、３つの”メモ”することが可能な機能が実装されていますので、これらについて解説していきます。

### ①テキストメモ
動画の下部のエリアに、テキストでメモを表示することができます。

プログレスバーに表示される旗マークのタイミング（この動画の場合は10秒目辺り）に、テキストのメモを設定することができます。
このテキストメモが設定された動画を再生する場合にも、そのタイミングになると2秒間の間、設定したテキストメモが表示されます。また、旗マークをタップするとそのタイミングのシーンに移動され、そしてそのテキストメモが表示されます。
この旗マーク（テキストメモ）は、テキストメモを設定せずに単に注目シーンのマーキングとしても利用できます。また、一つの動画に複数設定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352554/924f5ebf-ae08-99b9-1dae-f07fc255a6c7.png)

#### テキストメモの設定の仕方
目的のタイミングの映像を表示した状態で、右下の「①タイムプリセット」タップすると＂**旗マーク**＂が表示され、**＜タイムプリセット選択モード＞**に移行します。（旗マークは<font color="red">**赤色**</font>です）
タイムプリセット選択モードに移行すると、＂**旗マーク**＂をタップで選択すると映像が設定されたシーンに移動し、「①タイムプリセット」のアイコンが＂**吹き出し**＂に変わります。（旗マークが<font color="#ff00cc">**ピンク色**</font>に変わります）
この＂**吹き出し**＂状態をタップするとテキストコメントを設定したり、タイムプリセットを削除したりすることができます。
「①タイムプリセット」が＂**吹き出し**＂の状態でもう一度＂**旗マーク**＂をタップすると、**＜タイムプリセット選択モード＞**が解除されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352554/ba9cbc58-8b1d-a05d-4398-982138038c89.png)

ちなみに…　**＜タイムプリセット選択モード＞**に移行すると、メインの動画のタイム表示の左に、＂**旗マーク**＂の時間からの差分の時間が表示されます。これにより、あるシーンからの指定のシーンまでの時間を計測することができます。
野球だったら、キャッチャーが捕球してからセカンドに送球するまでの時間とか…　キャッチャーの練習でもストップウォッチで計測していたりします。これを動画から割り出すようなことも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352554/23b2e6fb-e9a7-f262-4711-d4047213adb3.png)

### ②音声メモ
動画の指定のタイミングに、音声でメモを付加することができます。

プログレスバーに表示されるマイクマークのタイミング（この動画の場合は18.7秒目辺り）に、音声のメモを設定することができます。
マイクマークをタップするとそのタイミングのシーンに移動され、そしてその音声メモがディバイスのスピーカから再生されます。
この音声メモは、一つの動画に複数設定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352554/1ecb8f27-ea6c-cda8-2632-6dfecd8ddeaf.png)

#### 音声メモの設定の仕方
目的のタイミングの映像を表示した状態で、左下の「②音声メモ」タップすると＂**音声メモ**＂が<font color="#ff00cc">**ピンク色**</font>に変わります。この状態で音声メモの録音が開始されています。
<font color="#ff00cc">**ピンク色**</font>の＂**音声メモ**＂をもう一度タップすると白色に戻り録音を終了し、動画下部のプログレスバーの下部に＂**マイクマーク**＂が表示されます。
＂**マイクマーク**＂をタップすると映像が設定されたシーンに移動し、録音した音声がディバイスのスピーカーから再生されます。
＂**マイクマーク**＂をタップもしくはマウスオーバーすると、＂**マイクマーク**＂の右下に❌が表示され、この❌をタップ部すると＂**音声メモ**＂を削除することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352554/1c91ade3-9694-94da-9f54-0bdfe3135849.png)

### ③レコーディング
【２画面動作解析アプリ：Pre-Post】での **操作および操作者の音声を<font color="red">１分間の動画</font>**　としてレコーディングすることができます。

レコーディングされた動画は、クラウド上へのアップロードもしくはダウンロードすることができ、保存した動画の利用目的により、クラウド上で操作者の＂記録＂として利用することも可能ですし、ダウンロードした動画を、他の人に共有することなども可能となります。

ただし…　現在のスマホやタブレットのモバイルディバイスでは、ディバイスとしてレコーディング機能が実現されていないため、**Windows** や **Mac** などのデスクトップディバイスでの操作時に限られる機能となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352554/d8f725e8-66e0-fa25-6924-66bd7b05f1cf.png)


#### レコーディングの仕方
「③レコーディング」をタップすると、録画する対象を選択するダイアログが表示されるので＂画面全体＂＂ウインドウ＂＂Chromeタブ＂のいずれかを選択し、録画対象を指定します。（どれでも良いですが…　まずは＂ウインドウ＂を選ぶと録画対象を選択しやすくなると思います）
録画対象を選択したら右下の［ 共有 ］ボタンをタップすると録画が開始され、左下の<font color="red">［◉REC］が赤色の文字で60からカウントダウン</font>されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352554/2a819075-1af1-d862-3593-0ca4f13ac90f.png)

60秒間録画すると、録画を終了し動画の処理を選択するダイアログが自動的に表示されます。また、60秒間待たなくても、カントダウンしている数字をタップすると録画は終了し、同様にダイアログが表示されます。
このダイアログの［アップロード］もしくは[ダウンロード]を選択し動画をファイルとして、ローカルにダウンロードされるか、通常のアップロード時と同様にクラウドに保存されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352554/ce995bc8-77b1-5070-756c-35e59d70e933.png)

## 最後に
ここまで「**未来のブカツ**」や「**オンライン部活**」のツールとして重要と考えている＂**メモ**＂を動画に付加したり、指導の作業を＂**録画**＂する機能についての操作方法を説明しました。

この昨今のコロナ禍で、大人の社会でもリモート・オンラインという環境で仕事をする環境もある程度整いました。これらの経験を踏まえ学生の部活などもオンラインの環境に適応させることで、今後の＂部活＂のあり方も変わっていくでしょう。
そして、教師や保護者の負担を軽減しつつ、少年少女たちがスポーツを通していろんなことを学び、技術を身につけプロを目指すような子供が多くなっていけば良いと思います。
　「**未来のブカツ**」や「**オンライン部活**」の構想はまだ検証段階でもあり、今後も変わりながらもう少し時間をかけ、現場の声を反映しながら、良い環境へと進化していくのだと思います。

しかし… ITの技術はもっと先にあります。もういろいろ実現できているのです。
オンラインでなくても利用して良いのですし、＂**未来**＂ではないのです。もう＂**現実**＂なのです。
　「**未来のブカツ**」や「**オンライン部活**」の完成を待っている必要はないのです。
　「**未来のブカツ**」や「**オンライン部活**」で無くたって、動画で体の動きを見て、上手な人の真似をして、自分たちで考えて工夫してみて良いのです。
その工夫の一つとして、音声やテキストで＂**メモ**＂すべきです。記録してみましょう…

こういう今まで一般的ではないような機能をどう利用していくのか？ さらにどう進化させていくのか？ 実際の現場をイメージしながら実装に繋げていくことが重要かなどエンジニアの皆さんにはフツーの仕事なのかもしれません…
なので、この**Qiita**というエンジニアが集う場で、**「STEAMスポーツ」** を紹介したかったのです。

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

**[https://2sa.steams-jp.com/](https://2sa.steams-jp.com/?qiita)**



#### 【シリーズ】
https://qiita.com/takky0330/items/605660def4c5579f98c1

https://qiita.com/takky0330/items/271cf0695e13cb31d8f2

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

以上