[ Siena 目次 ]

動物図鑑アプリ

世界地図から、動物の生息地域を学習するアプリを試作します。
ボタンをタッチして、ビデオスクリーンで動物の動画を再生します。


実際の画面を確認

作成したのは2スクリーンです。（動物の動画は NHKクリエイティブ・ライブラリー より）
スクリーン1
起動時は、世界地図の上に、黄色い星マークが配置されています。
スクリーン2
星マークを一つタッチすると、その星マークが赤くなり、右上に、動物の画像が表示されます。
ビデオボタンをタッチすると、ビデオスクリーンに移ります。閉じるボタンをタッチすると、右上の画像が閉じ、星マークが黄色に戻ります。
スクリーン3
ビデオボタンをタッチした後です。画像に表示されていた動物の動画が再生されます。
左上の戻るボタンをタッチすると、世界地図スクリーンに戻ります。
スクリーン4
戻るボタンをタッチして、世界地図スクリーンに戻ったところです。
スクリーン5
他の星マークをタッチすると、別の動物が表示されます。


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

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



事前準備

  1. 使用する画像を準備しておきます。
    2. 世界地図は、 3D World Map さんのフリー素材を使用しました。オリジナルサイトへのリンクが切れていたので、このサイトを紹介しているウェブページから入手しました。
    世界地図

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

    エクセル表

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



仕様確認

タブレット型を意識しつつ、部品を配置しました。
  1. 星マークをタッチして、その土地の動物の画像を、右上に表示します。選択された星マークは赤色に変わります。
  2. 表示された画像の左上のビデオボタンをタッチして、ビデオスクリーンに移ります。
  3. ビデオスクリーンは、選択された動物の動画を再生します。
  4. ビデオスクリーン左上の戻るボタンで、世界地図スクリーンに戻ります。
  5. 他の星マークについても、上記と同様の動作をします。



仕組みの解説

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

  1. 星マーク
    2. 描画機能があるので、星型の画像を準備する必要がありません。
    タッチされたとき、対応する動物のデータを、データソースからコレクションに保存しています。
    また、タッチのタイミングで画像が表示されるようにしています。
    OnSelect 属性で、
    Clear(SelectedAnimal);
    Collect(SelectedAnimal,First(Filter(Animals,Name="キリン")));
    UpdateContext({isImageVisible:true})
    としている部分がそれです。

    また、動物の表示/非表示に合わせて、赤/黄の色を変換しています。
    Fill 属性で、 If(And(isImageVisible,First(SelectedAnimal)!Name="キリン"),RGBA(255, 0, 0, 1),RGBA(255, 242, 0, 1))
    としている部分がそれです。
    星マーク毎に動物の名前を変えて、コーディングしています。
    星マーク
    eraseAll 変数は、ペン入力ボードの Clear 属性で利用されています。

  2. 動物イメージ
    3. この部品は、コレクションの画像を表示しています。
    Image 属性で、 First(SelectedAnimal)!ImageURL としている部分がそれです。
    動物イメージ1
    また、星マークのタッチに合わせて、表示/非表示を行っています。
    Visible 属性で、 isImageVisible と、ブーリアン変数を指定している部分がそれです。
    動物イメージ2

  3. ビデオボタン
    4. この部品をタッチして、ビデオスクリーンに移ります。
    OnSelect 属性で、 Navigate(Video, ScreenTransition!Fade,{isPaused:false}) としている部分がそれです。
    ビデオボタン1
    また、動物イメージと同様、表示/非表示を行っています。
    Visible 属性で、 isImageVisible と、ブーリアン変数を指定している部分がそれです。
    ビデオボタン2

  4. ビデオタイトル
    5. 動物イメージの下に、ビデオタイトルを表示します。
    Text 属性で、 First(SelectedAnimal)!Title としている部分がそれです。
    ビデオタイトル1
    また、動物イメージと同様、表示/非表示を行っています。
    Visible 属性で、 isImageVisible と、ブーリアン変数を指定している部分がそれです。
    ビデオタイトルB

  5. 閉じるボタン
    6. この部品をタッチして、動物イメージを閉じます。
    OnSelect 属性で、 UpdateContext({isImageVisible:false}) としている部分がそれです。
    閉じるボタン1
    また、動物イメージと同様、表示/非表示を行っています。
    Visible 属性で、 isImageVisible と、ブーリアン変数を指定している部分がそれです。
    閉じるボタン2

  6. ビデオプレーヤー
    7. ここから、2スクリーン目の部品です。
    選択された動物の動画を再生します。
    Media 属性で、 First(SelectedAnimal)!VideoURL としている部分がそれです。
    また、スクリーンが表示されたとき、すぐ再生されるようにしています。
    DefaultPaused 属性で、 isPaused と、ブーリアン変数を指定している部分がそれです。
    ビデオプレーヤー

  7. 戻るボタン
    8. この部品をタッチして、世界地図のスクリーンに戻ります。
    OnSelect 属性で、 UpdateContext({isPaused:true});Navigate(WorldMap, ScreenTransition!Fade) としている部分がそれです。
    戻るボタン

  8. ビデオタイトルB
    9. この部品は、ビデオタイトルを表示します。
    Text 属性で、 First(SelectedAnimal)!Title としている部分がそれです。
    ビデオタイトルB



感想

今回は動物を取り上げましたが、同じような形式のアプリで欲しいと思ったものは、恐竜図鑑 です。

一時代だけを取り上げるのではなく、各時代に生息した恐竜を、何枚もの世界地図を重ねたイメージで作成し、各々の時代の恐竜生息分布を確認するのです。

さすがに実写とはいかないので、可能な限り、コンピュータグラフィックスを使用して、恐竜の動くイメージを伝えます。 そうすることで、大陸移動と恐竜の生息地域の関係なども、同時に学ぶことができるのでは、と思っています。

動物や恐竜だけではなく、歴史・農業・社会制度・文化など、様々な切り口での知識を世界地図に重層的にマッピングして、それをタブレットで見る。もしそんなことができれば、結構面白い総合型コンテンツになるなあ、などと、勝手な想像を膨らませてしまいました。
私がそのアプリを作成するとしたら、『ナレッジ・マッピング』とネーミングしたいところです。

こうしたコンテンツの難点はデータ量の多さにあると思いますが、クラウド環境を駆使すればアプリの負担は軽くなるので、将来的に、楽しくて深みのあるコンテンツに期待したいところです。