[ Siena 目次 ]

ビデオプレーヤー　ペン入力付き

今回は、ビデオプレーヤー機能とタッチ入力機能を使用して、ペン入力機能付きのビデオプレーヤーを試作します。


実際の画面を確認

作成したスクリーンは一つだけです。（映像は NHKクリエイティブ・ライブラリー より）
スクリーン1
アプリを立ち上げたとき、とりあえず一番上のコンテンツが選択されています。本来ならば無選択にすべきかもしれませんが、そのあたりの指定の仕方が、まだよくわかっていません。
スクリーン2
右上の再生ボタンをタッチして、動画の再生を始めます。下のスライダーが、放映時間に合わせて動いています。
スライダーは、いささかぎくしゃくした動きになってしまいました。
スクリーン3
List ボタンをタッチして、動画リストを非表示にしました。
スクリーン4
動画の上から描画ができます。テレビのサッカー解説などで時々見る機能です。右下の消しゴム機能を選択して消去したり、全消去ボタンにタッチして、描いたものをすべて消去できます。


以下に、作成時のポイントを記述します。

[ 目次 ]
  1. 実際の画面を確認
  2. 事前準備
  3. 仕様確認
  4. 仕組みの解説
  5. 感想



事前準備

  1. 使用する画像を準備しておきます。
    2. 文房具画像については、 DesignContest さんのフリー素材を使用しました。
    文房具
    ビデオプレーヤーの再生/一時停止ボタンは、 総合素材サイト｜ソザイング さんのフリー素材を使用しました。
    プレーヤーボタン

  2. データソースとして読み込むエクセル表を作成します。
    3. 「 ID 」「 Title 」「 VideoURL 」だけのエクセル表を作成し、テーブル変換しておきます。 テーブル変換の手順は、こちら（サンプルで気付いたポイント）に記しています。興味のある方はご覧ください。

    エクセル表

  3. 使用する動画を準備しておきます。
    4. 無料の動画を公開している、 NHKクリエイティブ・ライブラリー さんから3本、手に入れました。
    画像の中に入っている映像も、 NHKクリエイティブ・ライブラリー さんのものであることを記しておきます。

    本来はサッカーの動画を使用したかったのですが、見つけることができなかったので、別の動画にしました



仕様確認

一応、タブレット型を意識しつつ、部品を配置しました。
今回の一番のポイントは、ビデオプレーヤーを下地にし、その上にペン入力ボードを配置して、動画の上から描画を可能にする、という点です。

  1. 再生ボタンをタッチして、動画を再生します。
  2. 再生する動画は、表示されるリストから選択可能にします。
  3. リストボタンで、リストの表示/非表示をコントロールします。
  4. ペン入力機能で、動画再生中/一時停止中に、動画の上から描画ができるようにします。
  5. 描画の一部を消したいときは、消しゴムボタンをタッチして、描画した部分を触って消去します。
  6. 描画内容をすべて消したいときは、全消去ボタンをタッチして消去します。



仕組みの解説

ここでは、貼り付けた部品の属性を ExpressView で確認します。
部品を選んで右下の ExpressView ボタンをクリックすれば、画面右に開きます。
以下、画像をクリックすると拡大画面が表示されます。

なお、ペン入力ボード・ペンイメージ・消しゴムイメージ・全消去イメージ部品は、英単語スペルチェックアプリ と同じ仕組みを使用して作成しました。

  1. ビデオプレーヤー
    2. リストで選択された動画を再生するように指定しています。
    Media 属性で、 List!Selected!VideoURL としている部分がそれです。
    また、ビデオの再生/一時停止を、ブーリアン変数でコントロールしています。
    DefaultPaused 属性で、 videoPaused というブーリアン変数を指定している部分がそれです。
    あと、再生終了時、右上のボタンを再生待ちに切り替えています。
    OnEnd 属性で、 UpdateContext({videoPaused:true}) としている部分がそれです。
    ビデオプレーヤー

  2. ペン入力ボード
    3. 描画のための部品です。タッチパネルでない場合は、マウス等でも入力可能です。
    全消去ボタンがタッチされたときに、領域全体をクリアするようにしています。
    Clear 属性で、 eraseAll というブーリアン変数を指定している部分がそれです。
    ペン入力ボード1

    また、選択されている道具に合わせて、動作を変更しています。
    Mode 属性で、 If(item="Pen",PenMode!Draw,PenMode!Erase) としている部分がそれです。 その他、太さ・色・ペン先の形などを予め指定する代わりに、 ShowControls 属性を false にしています。
    ペン入力ボード2

  3. ペンイメージ
    4. この部品をタッチして、ペン入力状態にします。
    OnSelect 属性で、 UpdateContext({item:"Pen"}) としている部分がそれです。
    この処理と、ペン入力ボードの Mode 属性が連携しています。
    ペンイメージ1

    また、選択/非選択に対応して、背景色を変化させています。
    Fill 属性で、 If(item="Pen",RGBA(255, 255, 255, 1),RGBA(69, 69, 69, 1)) としている部分がそれです。
    ペンイメージ2

  4. 消しゴムイメージ
    5. この部品をタッチして、消しゴム状態にします。
    OnSelect 属性で、 UpdateContext({item:"Eraser"}) としている部分がそれです。
    この処理と、ペン入力ボードの Mode 属性が連携しています。
    消しゴムイメージ1

    また、選択/非選択に対応して、背景色を変化させています。
    Fill 属性で、 If(item="Eraser",RGBA(255, 255, 255, 1),RGBA(69, 69, 69, 1)) としている部分がそれです。
    消しゴムイメージ2

  5. 全消去イメージ
    6. この部品をタッチして、ペン入力ボードを全面クリアします。
    OnSelect 属性で、
    UpdateContext({eraseAll:true}); UpdateContext({item:"Pen", eraseAll:false}) としている部分がそれです。
    この処理と、ペン入力ボードの Clear 属性が連携しています。
    全消去イメージ

  6. リストボタン
    7. この部品をタッチして、動画リストを表示/非表示します。
    OnSelect 属性で、
    If(galleryVisible=true,UpdateContext({galleryVisible:false}),UpdateContext({galleryVisible:true})) としている部分がそれです。
    この処理と、リスト（ギャラリー）の Visible 属性が連携しています。
    リストボタン1
    また、リストの表示/非表示に対応して、背景色を変化させています。
    Fill 属性で、 If(galleryVisible=true,RGBA(255, 255, 255, 1),RGBA(0, 0, 0, 0)) としている部分がそれです。
    リストボタン2

  7. ギャラリー
    8. 事前準備したエクセル表をデータソースとして読み込み、ギャラリーに結びつけています。
    Items 属性に、 Videos と、テーブル名を入れている部分がそれです。
    ギャラリー1
    また、リストボタンに合わせて、表示/非表示を行っています。
    Visible 属性に、 galleryVisible と、ブーリアン変数を指定している部分がそれです。
    ギャラリー2

  8. ギャラリー個別領域
    9. ここでは、描画された線を全消去した上で、選択された動画を再生するようにしています。
    OnSelect のタイミングで、 UpdateContext({eraseAll:true}); UpdateContext({item:"Pen", eraseAll:false,videoPaused:false}) と指定している部分がそれです。
    ギャラリー個別領域
    Text は、 ThisItem!Title と指定して、タイトルを表示するようにしました。

  9. スライダー
    10. 動画の進行に合わせて、動くようにしています。
    Default 属性に、 VideoPlayer1!Time と指定することと、
    Max 属性に、 VideoPlayer1!Duration と指定することで実現しました。
    きちんと動きますが、ややぎこちない印象でした。
    スライダー



感想

技術的な点からいくつか。

ビデオプレーヤーの上にペン入力ボードを重ねた都合上、ビデオプレーヤーの操作盤を表示できなくなりました。 その代わりに、再生/一時停止ボタンやスライダーをプレーヤーの外に配置したのですが、結局、

  1. スライダーで再生位置を変えること（いきなり動画の中盤に移動するとか）
  2. ボリュームコントロールを付けること

はできませんでした。調査不足の可能性もありますが、現時点では、これが限界でした。
「ビデオプレーヤー＋ペン入力ボード」 という組み合わせはとても面白いと思っているので、ビデオプレーヤーの操作にかかわる部分を属性として公開し、ビデオプレーヤーの外側で処理出来るようにしてほしいなあ、と思いました。

「ビデオプレーヤー＋ペン入力ボード」の組み合わせ で作ってみたいと思ったものは、

  1. 「漢字の書き順動画」の上で、書き順をなぞるアプリ　(小学生や外国人をターゲット)
  2. 「筆文字が書かれる動画」の上で、筆の動きをなぞるアプリ　（習字愛好者をターゲット）
  3. 「簡単なイラストを描く動画」の上で、筆の動きをなぞるアプリ　（絵が苦手な人をターゲット）

などです。もちろん、サッカー・ラグビー・フットボールを指揮する人に役立つようなアプリも検討可能では、と思ったりします。 ただ、ペンが一種類（ペイントソフトのように筆・マーカー等々がない）なので、そのあたりの機能拡張に期待したいところです。