タイピングのお手本画像をプログラムに作らせる

こんにちは。「Playgram（プレイグラム）」開発チームの岡本（おかもと）です。チームでは、主にタイピング練習アプリ「プレイグラムタイピング」の企画・開発を担当しています。以前にも、当ブログの「タイピングを身につけよう！」シリーズの連載を担当しました。お時間があれば、こちらも併せてご覧ください。

プレイグラムタイピングは、キーを押す際のお手本となるホームポジションの指使いが練習画面にビジュアル表示されるようになっており、これを真似しながら問題文を打つことで、それぞれのキーをどの指で押せばよいかを直感的に身につけることができます。また、画面を見ながら打つ習慣が身につくので、後にタッチタイピング（キーボードの盤面を見ずに打つ方法）へ移行する際に役立ちます。

ところで、この機能を実現するには、キーボード上の全てのキーに対応するポーズを取った手指の画像を一枚ずつ制作する必要があります。人が見て違和感のない手指のポーズを描くのはそれ自体が簡単なことではありませんが、今回の企画では、それを 50 個近くのキーに対して別個に用意しなければなりません。プレイグラムタイピングはソフトウェアエンジニアのみの少人数のチームで開発していることもあり、普通の方法で多数のデジタル素材を用意するのは困難でした。

そこで、私は画像処理プログラムで手指の写真からベクター画像を生成し、それを下絵としてデザイナーさんに仕上げを依頼するという方法を取りました。この方法はうまくいき、短期間かつ低予算で必要な数の指使い画像を揃えることができました。

今回の記事では、連載「タイピングを身につけよう！」でもお話したプログラミングを通じた知的創造の一例として、アプリの素材を画像処理のプログラミングで創り出した方法についてご紹介します。

写真からデジタル素材を作ろう

撮影した手指の写真からお手本画像を生成した方法を簡単に解説します。

また、今回使ったコードを Google Colaboratory のノートブックとして用意しました。これを使えば、皆さんもご自身で撮影した手指画像を使って素材の生成を実際に試すことができます。ブラウザ上の操作だけで実験できるので、お手元にプログラミングの環境は必要ありません。Colaboratory 自体の使い方については、以前の記事でも解説しているので併せてご覧ください。

素材の制作は以下の4工程で行いました:

写真を撮る
手指をくり抜く
エッジを検出する
輪郭線を抽出する

では、上から一つずつ見ていきましょう。

写真を撮る

まず、何はともあれ写真を撮りましょう。ここでは三つの工夫をしています:

写真は緑色の布の上で撮る
- あとで、写真の手指の部分をクロマキー合成の原理でくり抜くためです
緑色のキーボードの絵を用意する
- 撮影時に指の位置を決めやすくします。また、緑色にすることで後の工程で消せるようにします
写真の光の加減（照度）を調整する
- 明るすぎたり暗すぎたりすると、うまくくり抜けません

撮影にあたっては、チームメンバーのご家族に協力をお願いしました。この場を借りて改めてお礼を申し上げます。

手指をくり抜く

次に、撮った写真から手指の部分のみをくり抜きます。これは、後で手の輪郭線を抽出する際の仕上がりを左右する重要な工程です。

ここでは、画像の色空間を YCrCb に変換してから、手指の色に対応する部分のみを抽出したマスクを作成し、それを元画像に合成して手指をくり抜きました。

エッジを検出する

手指をくり抜いた画像から手指のエッジ（縁）を検出した画像を作ります。少し見えにくいですが、手の輪郭が青白い線として抽出されているのが分かると思います。

輪郭線を抽出する

最後に、エッジ画像から輪郭線を抽出します。以下の画像は、抽出した輪郭線の情報を画像として再構成したものです。これを見ると、エッジ画像から輪郭線が抽出されていることが分かると思います。

プレイグラムタイピングでは、この輪郭線の情報からベクター画像を生成してお手本画像の制作に活用しました。

プログラミングのクリエイティブな可能性

この記事で紹介した手指の輪郭を抜き出してデジタル素材を作るプログラムの処理を、すべて手作業でやったとしたらどうでしょう。手の周りをペンでなぞり、それをスキャナで取り込んで…という工程を、人手で一枚ずつ作業する必要があります。これを50回も繰り返すのは、とても現実的とは思えません。

プログラミングを使うと、ひとたび画像から輪郭を抜き出すコードを書けば、あとはコンピュータが何十枚でも何百枚でも自動的に処理してくれます。

今回、緑色の背景から手指を抜き出すのに使ったクロマキー合成はテレビや SF 映画の撮影で広く使われている方法で、そこではもちろんプログラムが活躍しています。このような場面では、映像を1フレームずつ切り抜いたり中継中にリアルタイムに処理する必要があるので、とても人力でこなせる仕事ではありません。プログラミングの力は偉大ですね。

デジタル素材を生成する画像処理技術には他にも様々なものがあり、私たち Preferred Networks (PFN) もさらに高度なデジタル素材生成の技術開発を行っています。一方で、この記事で紹介したようなシンプルな画像処理であれば誰でも簡単にプログラミングできます。ぜひ自分の手で試してみてください。

皆さんもプログラミングを学んで、コンピュータをクリエイティブに活用する方法を身に着けましょう！