このDX図鑑アプリは連想配列のデータを元に動的に図鑑を表示する、ちょっとデラックスなアプリです。なお、JavaScriptを使用せずにHTMLとCSSだけで組まれた図鑑のサンプルアプリとして図鑑アプリも存在します。

DX図鑑アプリの概要

写真と説明文が表示されます、また、写真の著作権者の名前も出せるようにしてあります。

左上のハンバーガーメニューで図鑑の一覧を表示しています。

サンプルアプリの入手方法

Monaca用のプロジェクトとして公開されています
図鑑アプリ(ダイレクトインポート)

学習内容

このアプリでは繰り返しとDOMを利用して図鑑を描画しています。
元のデータは連想配列で持っています。

おわりに

和歌山県の『きのくにICT』における『アプリプログラミングシート』では、約4時間分の授業案が掲載されています。
アプリプログラミングシート(サンプルアプリを元にしたスライド教材)