entry-header-eye-catch.html
entry-title-container.html

entry-header-author-info.html
Article by

【無償配布あり】テニス部活動で生み出したスマートウォッチアプリとFinal Cut Proで使えるスコアボード

Webエンジニアのpawaと申します。今年はピクシブ社員史上初の学会(言語処理学会第24回年次大会ワークショップ)での登壇をこなしたり、ピクシブ史上初の運動部である硬式庭球部を設立したり、ピクシブ史上初のIT健保の硬式テニス大会に出場したりといった1年でした。年内にまだ1つビッグなことがあるはずですが何が起こるかはお楽しみです。

今回は、テニス部(活動詳細はこちら)の活動を通じて私が生み出した、テニス用ITツールを紹介します。無償配布しているのでぜひご利用ください。以下、私がどういう過程で問題を見つけてそれをどう技術で解決したかをトレースできるよう綴っていきます。

Keywords: スマートウォッチ, Pebble, C言語, Final Cut Pro X, Motion5, スコアカウンター, スコアボード, 動画編集, テニス

創作物その1:スマートウォッチ「Pebble」のアプリ「Tennis+」:テニスのスコアカウンター

テニス部活動を通じて初めに作ったツールは「Tennis+ 」というテニスのスコアカウンター(海外では Score keeper と呼ばれるよう)です。自作ながら今も愛用してテニスしています。アマチュアのテニスで使う腕時計型スコアカウンターとしては執筆時点で世界一使いやすい自信があります。

私は、Pebbleというスマートウォッチを2016年から愛用しています。このスマートウォッチ上で使える「Tennis」というテニスのスコアカウンター用のアプリがストアに無償でありました。しかし、アマチュアのテニスのルールまでは十分にカバーされておらず、「かゆいところに手が届かない」状態でした。そこで、私が改良してリリースしたのが今回紹介する「Tennis+」(図1)です。

図1:「Tennis+」動作している様子

実は Pebble Technology は大部分を Fitbit に買収されて、今はPebbleのオンラインサービス(ストアからアプリをダウンロードしたりといった機能)も終了されています。しかし、Rebbleという非公式の開発グループが代替となるオンラインサービスを維持していて、今でも特に問題なく使えます。

そもそもなぜスコアカウンターが必要と考えたか?

テニスの公式ルールブックでは、「チェアアンパイアがつかない試合方法」としてセルフジャッジの方法が定められています。アマチュアのテニスでは、この「セルフジャッジ」をする機会が大変多く(図2)、もしセルフジャッジ中にスコアを忘れた場合はプレーヤー同士が合意できるポイントまでさかのぼってから試合再開となります。

図2:セルフジャッジ時のスコアのコール

「スコアを忘れることなんてあるのか?」と思われる方もいるかもしれませんが、私の初めての大会出場時に、相手プレーヤーがスコアを忘れて試合が過去のポイントに戻るということが実際に起こりました(ボコボコにされる運命には変わりありませんでしたが)。

これを回避するためにスコアカウンターへの需要が生じます。試合中に身につけられるものを考えるとスマートウォッチがちょうど良かったため、スマートウォッチで実現することにしました。

競合となる商品はあるか?

競合となる商品を調査すると、腕に付けるタイプのスコアカウンター「ScoreBand Play」(Amaozn.co.jp で9000円弱)が見つかりました。

しかし、以下のようなアマチュアのテニスで使うルールには対応していないようでした。

  • ノーアド(40 - 40 の後、次の1ポイントでゲーム)
  • タイブレイク
  • 1セットのゲーム数と何セットマッチかなどの調整

Pebbleで使えるオリジナルの「Tennis」アプリも「ノーアド」や「1セットのゲーム数の調整(例えば1セット4ゲームマッチなど)」には対応していません。そこで、「Tennis」がオープンソースであることを利用して、これを改良して、自身でこれらのアマチュアのテニスのルールに対応させた「Tennis+」を作ることにしました。

アマチュアのテニスでも使えるスコアカウンターの要件定義

プロが行うテニスの試合形式には既存の「Tennis」アプリが対応していたので、私が作るのはアマチュアのテニスで使われる以下の機能だけでした。

  • ノーアド対応
  • ゲーム数を 2,4,6,8 から選択可能化
  • 試合途中でスコアカウントを終えられる機能(テニスコートをレンタルして使えるのは通常は時間単位であり、試合途中で終わるということも間々あるため)

C言語で開発

PebbleアプリはC言語かJavaScriptで作れるようですが、「Tennis」はC言語で書かれていたので、C言語で必要な機能を追加していくことにしました。

GitHubでオリジナルの「Tennis」をフォークしてプルリクエストベースで開発しました。以下の3つのプルリクエストで主要な機能は実装完了となりました。

元のコードがとても綺麗だったため、平日の真夜中に3日ほどプログラミングするだけで必要な機能を追加できました(ひょっとしたらどこかにバグがあるかもしれませんが)。

ノーアド対応

https://github.com/pawa-/pebble-tennis-plus/pull/3

ゲーム数を 2,4,6,8 から選択可能化

https://github.com/pawa-/pebble-tennis-plus/pull/5

試合途中でスコアカウントを終えられる機能

オリジナルの「Tennis」では試合終了までスコアカウントすると最後に簡単な統計情報が表示されます(図3)。

図3:試合終了後に表示される統計情報

しかし、下のスクリーンショットの画面にある「Discard match」で試合を途中で放棄すると統計情報が見られなくなります。アマチュアのテニスでは試合形式の練習時などに時間制限で途中で試合を切り上げることもあるので、この機能(Finish match)が欲しいと思って実装しました。途中で Finish match しても統計情報は大体あっているはずですが、バグがないかやや怪しいです。

https://github.com/pawa-/pebble-tennis-plus/pull/7

使い心地のほどは?

ノーアドで試合するときに「Tennis」で面倒だった 40-40 の後にポチポチと2回ボタンを押す手間(アドバンテージを飛ばすため)が1回に減って、少し感動するところがありました。あとは、ダブルスで1セット4ゲームで試合することが多いので、それにも対応しているのは使いがいがあると感じます(「Tennis+」を使わずに試合をするということがまったくなくなりました)。

今後の改良点としては、5-5 からタイブレイクに入ることがたまにあるので、今後もそのケースに当たったら対応する予定です(現時点では https://developer.rebble.io/ からはアップロードできないようなので個人サイトで配布することになるかもしれません)。

補足:pebble app store への登録と公開,Pebbleアプリの開発フロー

この「Tennis+」開発当時(2018年3月末)、FitbitによるPebble買収に伴ってPebbleのアプリストアも3ヶ月後に閉鎖されるという状況でした。オリジナルの「Tennis」にプルリクエストを投げてマージされてリリースされるまでの時間の余裕はないと思われたので「Tennis+」というアプリで pebble app store に登録してあります(図4,今だと rebble app store,どうも私が最後のPebbleアプリ登録者だったようです)。

図4:rebble app store に登録されている様子

今はRebbleという非公式の開発グループが代替のストアを維持しているようなのでそちらからご利用ください(無償):https://apps.rebble.io/en_US/application/5b02f29f461a8dd931000e5a

app store への登録の手順やPebble特有の開発フローはスライドにまとめてあるので、そちらをご覧ください:https://www.slideshare.net/pawa_/ss-98659720

創作物その2:Final Cut Pro X 用のテニススコアボード

テニス部活動を通じて次に作ったのは Final Cut Pro X 用のテニススコアボードです。

社会人になってからテニスを始める我々が効率よく上達するには自身のフォームをよく把握することが不可欠なので、我がテニス部では、第1回目の活動からすべて動画撮影しています。28回の練習会を終えた今、過去の動画を見ると、打ち方がまったく別人という具合で大変感慨深く感じられます。

どうせ動画撮影して編集するなら「部員が観てテンションの上がる編集力」を身に付けたいと思ってしまった私は、テニス経験ゼロからテニス部を創部してコート予約しつつ練習メニューを考えつつ自身のテニスに関するPDCAを回しに回しつつ、動画編集に関しても経験ゼロから独学で学んでいきました。

以下のように3月17日にMacの標準の動画編集ソフト「iMovie」を初めて触って、何本か部活動画を編集して「もうこのソフトを使っても自身は成長しない」と思えた段階で次のステップとなる動画編集ソフトの「Final Cut Pro X」に進んでいきました。

  • 2018年3月17日:iMovie を初めて触る
  • 2018年5月中旬:Final Cut Pro X をトライアル版で初めて触る
  • 2018年6月12日:Final Cut Pro X 購入

音楽の使い方は、テニス系YouTuberである「TENNISISM【テニスイズム】」や「テニスのゴンちゃん」を大いに参考にしました(テニスイズムには実は出演したことがあって、YouTubeに映っていない場面でテニスイズムのメインキャラクターであるテニ男さん・テニ吉さんとラリーしたりしました)。

35歳テニス経験ゼロのテニ吉さんがテニス歴30年以上のテニ男さんの指導を受けて練習して大会出場して勝利を目指すYouTubeチャンネルなのですが、音楽の使い方だけでなく、動画編集の仕方・テニスの考え方・スポーツ経験の生かし方・常に進化を目指し続ける姿勢・経験ゼロからどうやって上達するかなど、多くのことを学ばせてもらっている非常にオススメのチャンネルです。

図5のように20本近く動画編集経験を積んだところで、テニス動画を編集する上で学ぶことはほぼなくなったと感じました。

図5:Final Cut Pro X での動画編集画面

ただ、動画編集時に「うまくスコアを表示する手段がない」という唯一不満に思うことはあったので。この不満を解消しながら動画編集能力をさらに引き上げようと思いました。図6のように表示できるのを理想と考えて要件定義しました(絵は描けないので伝わるか自信がない)。

図6:スコア表示のイメージ

構成要素は図7の通りです。

図7:スコアボードに必要な構成要素

これを Final Cut Pro X 上で実現することを目指しました。

Motion5でスコアボードを実現するまで

「final cut pro tennis score」などで検索しても利用できそうなものは出てこなかったので、どうやれば実現できそうか調べました。どうもMotion5というモーショングラフィックスツールを使えば Final Cut Pro X 上で使えるものが作れそうだということまで分かったのですが、理想的なテニスのスコアボードができるかという確信には至っていませんでした。しかし、これでできないならばどうやっても作れないのではないかと思って2018年10月3日にMotion5を購入しました。

Motion5で実現可能かを検証

まずは本当にMotion5で Final Cut Pro X 上で編集・表示可能なものを作れるかを検証しました。Motion5で適当にテキストを表示する謎のブツ(図8)を作ったところ、Final Cut Pro Xでテキスト編集した上で動画に埋め込めることを確認できました(図9)。あとは、テニススコアボード用の背景を用意して、セット・ゲーム・ポイントごとの入力欄を用意すれば、「理論上は実現可能」という結論に至りました。

図8:Motion5で作ったテキスト表示君

図9:Motion5で作った「テキスト表示君」を Final Cut Pro X で使った様子

実際に作ってみた

実際に作ってみると思っていたよりもずっと簡単にできました(図10-12)。ベースとなるものは6時間もかからなかったくらいです。Final Cut Pro とのシームレスな連携も含めて、Motionが Final Cut Pro の最強のプラグインと言われる訳が分かりました。

図10:Motion5でスコアボードを作った様子

図11:作ったスコアボードを Final Cut Pro X で使った様子

図12:実現イメージと現実の比較

Final Cut Pro X プラグインとして配布する方法は分からず

Final Cut Pro X プラグインとして無償配布したかったのですが、調べてもやり方が分かりませんでした。Motion5のファイルを配布する手が使えそうですが、Motion5が使えるユーザーならこの程度のスコアボードはユーザー自身で作れると思われるのでスコアボードの配布はなしにしました。

IT企業での合同練習・対抗戦相手募集中

ついこの前、taskey株式会社との合同練習が実現しました。元テニスコーチということで、ありがたいことに懇切丁寧に指導していただきました。

まだまだIT企業との合同練習・対抗戦相手を募集中です。ピクシブの中の人とテニスしてみたい方は pawa@pixiv.com までぜひメールをください!

20191219021115
pawa
2015年10月に新卒入社。言葉を扱うWebアプリケーションを作るのが好き。好きなCGIスクリプトはWeB DoRaMa。