[ Siena 目次 ]

パラパラ漫画再生アプリ

今回は、タイマー機能を使用して、パラパラ漫画の再生アプリを試作します。

実際の画面を確認

画面の進行を見るため、参考として4画面掲載します。

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

[ 目次 ]

1. 実際の画面を確認
2. 事前準備
3. 仕様確認
4. 仕組みの解説
• タイマー
• イメージ
• ラベル

事前準備

1. まず、パラパラ漫画の画像を作成しておきます。実写のコマ撮りでも同様です。
写真は以下の 28 枚です。稚拙なサンプルですが、ご了承ください。




2. データソースとして読み込むエクセル表を作成します。
「 ID 」 と「 写真の保管場所 」だけという、シンプルな表を作成し、テーブル変換しておきます。実際のシートには、28行分、入力しています。 テーブル変換の手順は、こちら（サンプルで気付いたポイント）に記しています。興味のある方はご覧ください。

仕様確認

スタートボタンをクリックしたら、パラパラ漫画を最後まで再生します。
タイマーとデータソースの関係がわかるように、タイマーの進捗を表す値も、画面右上に表示します。

仕組みの解説

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

1. タイマー
タイマーは、貼り付けた部品をクリックすると、カウントが始まるようです。
コマの数だけカウントするよう、総カウント数にデータソースの行数を指定しています。
End 属性で、 CountRows(Flips) と指定している部分がそれです。
また、作品の趣向に合わせて、カウントの間隔を指定しています。
Interval 属性で 0.16 （秒）と指定しているのがそれです。

Interval 属性は、一カウント毎の秒数のようです。


2. イメージ
タイマーのカウント数と一致するコマを表示します。
Image 属性で、 First(Filter(Flips,ID=Timer1!Value))!ImageURL と指定している部分がそれです。

このアプリに限らず、イメージのポジションは Fit を選ぶことが多いです。無駄に大きくなり過ぎない、という印象です。


3. ラベル
この部品は必須ではないのですが、タイマーのカウントと画像の進行の関係を見るために、入れてみました。 Text 属性を、 Timer1!Value にして、タイマーのカウント数を表示しています。