[ Siena 目次 ]

パラパラ漫画リーダー

形式に従った zip (中身は xml )ファイルを入力として、様々なパラパラ漫画を再生できるアプリを試作します。パラパラ漫画アプリと、Export / Import のサンプルの成果を掛け合わせた試みです。アプリと入力データの分離を目指します。

試作は完了しましたが、実用には今一つの結果であったことを記しておきます。この辺りの事情は、感想をご覧ください。

実際の画面を確認

シンプルなオープニング画面で始まります。数秒したら、自動で再生画面に移ります。
このあたりのテクニックは、表紙画面のサンプルに詳細を記述していますので、興味のある方はご覧ください。

オープニング画面を挿入したのは、貼り付け要素の表示/非表示をコントロールする変数の初期処理をするためです。

再生画面に移りました。ここで Import ボタンをタッチ(クリック)すると、ファイル選択ウィンドウが開きます。

ファイル選択ウィンドウが開きました。ここで予め準備しておいた zip ファイルを選択して開きます。

スタートボタンが表示され、左下に総コマ数も表示されました。スタートボタンをタッチ(クリック)すると、パラパラ漫画が始まります。

再生途中の１コマを念のため…　この画像は、パラパラ漫画アプリを紹介するときにネット上にアップロードした画像を、そのまま参照しています。再生後に Import ボタンをタッチ(クリック)し、今度は別のファイルを選択します。

ファイル選択ウィンドウが開きました。ここで今度は別の zip ファイルを選択して開きます。

左下の総コマ数が変わりました。スタートボタンをタッチ(クリック)して再生します。

再生途中の１コマを念のため…　この画像は、新たに作成した画像をネット上にアップロードしたものです。一応、アプリと入力データを分離させたことで、様々な作品の再生が可能になりました。この点が、前回のパラパラ漫画アプリと最も異なる点です。

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

[ 目次 ]

実際の画面を確認
事前準備
仕様確認
仕組みの解説

表紙画面のタイマー
Import ボタン
タイマー(スタートボタン)
イメージ
コマ数ラベル

感想
おまけ → パラパラ漫画データ出力アプリ

事前準備

パラパラ漫画の画像を作成しておき、ネット上にアップロードしておきます。実写のコマ撮りでも構いません。
データソースとして読み込む zip (中身は xml ) を作成します。「 ID 」と「写真の保管場所」だけという、シンプルな表を作成し、テーブル変換した後、パラパラ漫画データ出力アプリで出力します。テーブル変換の手順は、こちら（サンプルで気付いたポイント）に記しています。興味のある方はご覧ください。

仕様確認

Import ボタンをタッチ(クリック)したら、ファイル選択用ウィンドウを開き、選択した zip ファイル(中身は xml )を開きます。
データが読み込まれたら、スタートボタン(実際はタイマー部品)を表示します。
スタートボタンがタッチ(クリック)されたら、パラパラ漫画を再生します。
画面左下に、現在のコマ数を表示します。

仕組みの解説

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

表紙画面のタイマー

TimerEnd

Clear(Flips);
If(TimerOfCover!Value=TimerOfCover!End,
Navigate(Screen,ScreenTransition!Fade,{isPlay:false}))

isPlay

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

Import ボタン

Import

Flips

OnSelect

Clear(Flips);Collect(Flips,Import1!Data)

OnSelect

UpdateContext({isPlay:false})

isPlay 変数を false にしているのは、１作目鑑賞後に２作目を Import した時、２作目の静止画像が表示されるのを防ぐためです。

タイマー(スタートボタン)

Text

"Start"

タイマーがタッチ(クリック)されたら、イメージやコマ数が表示されるようにしています。
TimerStart 属性で、 UpdateContext({isPlay:true}) と指定している部分がそれです。
コマの数だけカウントするよう、総カウント数にコレクションの行数を指定しています。
End 属性で、 CountRows(Flips) と指定している部分がそれです。
１カウントの秒数を指定しています。
Interval 属性で 0.5 と指定しているのがそれです。
コレクションの中が空の時は、タイマーが表示されないようにしています。
Visible 属性で CountRows(Flips)>0 と指定しているのがそれです。

イメージ

タイマーのカウント数と一致する画像を表示します。
Image 属性で、 LookUp(Flips,ID=Timer!Value,ImageURL)
と指定している部分がそれです。前回のパラパラ漫画アプリとコーディングを変えました。こちらであれば、最初から対象データを１件しか持ってこないと思っています。事実、動かしたときの印象が、気持ち軽くなりました。
再生に合わせて表示/非表示をコントロールしています。
Visible 属性で、 isPlay と指定している部分がそれです。

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

コマ数ラベル

タイマーのカウントと画像の進行の関係を見るために入れています。
Text 属性を、 Timer1!Value にして、タイマーのカウント数を表示しています。
再生に合わせて表示/非表示をコントロールしています。
Visible 属性で、 isPlay と指定している部分がそれです。

感想

次の二点が気になったので取り上げます。

ネット上の画像取り込みに成功したが、ローカル環境の画像取り込みができなかった。
WiFi 経由によるネット上の画像取り込みは、通信の影響が露骨に出てしまう。タイマーの Interval 属性を短くするに従い画像再生が不安定になり、コマ飛びも発生し、鑑賞に堪えない時もあった。

一点目について、ネット上にアップロードした画像を読み込むことには成功しましたが、どういうわけか、ローカル環境の画像を Publish 後のアプリで見ることができませんでした。

Project Siena の制約に従って、画像をパブリックファルダ配下に保存しましたが、それでも無理でした。

特に不思議だったのが、 Publish していない開発途中に Preview 機能で見られたのに、 Publish 後の完成版アプリだと画像が見られなかったことです。

データソースのエクセル上に記述したローカルパスと、入力の xml に記述したローカルパスの認識に、何かしらの違いが生じているのかもしれません。

解決できない気がしたので、ローカル環境の画像を読み込む試みは諦めました。

二点目について、仕組みとしては動きましたが、 WiFi を使用した環境では、再生の安定性に波がありました。

有線であれば問題ないのかもしれませんが、画像のように容量があるデータを使用する場合は、常に先行して画像２０枚を先読みしておくとか、もっと気を利かした仕組みにしなければいけないようです。
実用性を担保するには、もう少し工夫が必要な状態での試作完了となってしまいました。

おまけ → パラパラ漫画データ出力アプリ

xml を自力で作成できればよいのですが、いかんせん知識がありません。
そこで、Export / Import のサンプルで実証済みだった Export 機能を活用し、 xml を出力するアプリを作ることにしました。

作ったとはいえ、このアプリは Publish することができません。理由は、事前準備で作成したエクセルのテーブルを、データソースとして読み込まなければならないからです。

エクセルテーブルをデータソースとして読み込む手順は、サンプルで気付いたポイントを参照して下さい。