要旨 ファイル

スマートフォン／タブレット向けアプリ教材の作成 情報・ものづくりコース 3 年 E4221 石崎一騎 E4227 鈴木陸生 担当教員 鵜川義弘 1. はじめに ム機などの、様々なプラットフォ
現在、小中学生のスマートフォン普及率は年々上昇しタブ
ームでも動作するゲームを作成で
レットの教育利用が進み、親しみ深いものとなっている。そ
き、アプリ化もできる。 こで、スマートフォンやタブレットで見ることのできるアプ
ゲームサラダ 幅広いゲームアプリがプログラミ
リ教材を作成することにした。 ングなしで開発できる。主な機能
これまでの鵜川研究室の研究では、プログラミング知識を
は無料で使用することができる
必要とする X-code などでのアプリ開発が多かった。しかし、
が、Android アプリは有料版のみ開
プログラミング言語などの習得には多くの時間を費やさな
発可能。Mac 版と Windows 版がある
くてはならない。それでは、専門的な知識を持つ限られた者
が、日本語版は Windows 版しかリ
しかアプリを開発することはできないことになる。そこで、
リースされていない。 私達は、誰でも簡単に使用できる開発環境を調査しスマート
以上の４つの環境の中から最も「ティラノビルダー」が私
フォンやタブレット PC 向け教材の作成を研究することにし
達の作成する教材に適していると考え、使用することにした。 た。 2-2.ティラノビルダーとは 2. 内容・流れ ティラノビルダーは前身のティラノスクリプトという
2-1.アプリ開発の環境の検証 HTML でノベルゲームが作れるものを更に簡略化したもので、
まず、様々ある開発環境の中から、比較的簡単であること
上から順に行動が示されたブロックを置いていき、その各行
を条件に以下の４つを選定し検証した。 動毎に使う画像、音源などのファイルを決めて位置やタイミ
ングなど入れるだけでノベルゲームが作ることができるソ
表 1. 各開発環境の概要 フトである。ティラノスクリプトは HTML を自分で書かなけ
ればならないのに対して、ティラノビルダーは HTML の知識
名称 概要 モナカ HTML5 でアプリが作れるオープン
もいらず、ドラッグ＆ドロップでゲーム作成が行える。 プラットフォーム。iOS、Android
両対応のアプリを開発することが
2-3.ティラノビルダーの機能 でき。Web 上で無料で開発できる。
アプリ開発に必要なサイクルを全
て Monaca 上で行うことができる。
ゲーム作成画面は、画面左の「左エリア」（図１-①）、画
面中央の「シナリオエリア」（図１-②）、画面右の「パラメ
ータエリア」（図１-③）の 3 つで構成される。
しかし、HTML を組むことのできる
最低限のプログラミング知識が必
要である。 アップ・ビルダー Web 上で無料で開発できる。iOS ア
プリ専用。用意されている機能を
複数選択し、必要な文字や画像を
入力するだけでアプリが完成す
る、誰でも簡単に作れるが、機能
以外の事はできないため、作成で
図 1．ゲーム作成画面
きるアプリの自由度は低い。 ティラノビルダー 無料でアドベンチャー、ノベル系
のゲームを作成できる。本体は
Windows 版と Mac 版がある。PC、ス
マートフォン、タブレット、ゲー
各エリアの役割について述べていく。
(1)左エリア
①シナリオファイル
新規シナリオの作成、各シナリオの編集画面の呼び
出しを行う。
②コンポーネント
ゲーム作成において操作の起点となる機能が密集し
ている。ゲーム進行中のキャラクターやテキスト、背
景、音楽などの機能や、シナリオへのジャンプや分岐
などの機能の追加が行える。
③機能
保存やプレビュー、リリースなどゲームデータの管
理に関する機能が集まっている。
(2)シナリオエリア
このエリアはゲーム進行の流れを表し、上から順に実
行されていく。
(3)パラメータエリア
図 3．画面サイズ選択画面 このエリアはシナリオエリアで選択された各コンポ
次に「メニューボタンをつけない」と「タイトル画面を
ーネントの詳細な設定を行う。キャラの選択や位置設定、
用意しない」の 2 つの項目を設定する。このメニューボタ
ジャンプ・分岐するシナリオの選択などを行う。
ンでアプリが進行する中での「セーブ」、
「ロード」や「タ
ゲーム作成の基本的な流れは、左エリアからコンポーネ
イトルに戻る」などの機能を行う。図の右下にある歯車ボ
ントを選択し、シナリオエリアに上から順に挿入し、パラ
タンがメニューボタンであり、メニュー画面を開くことが
メータエリアで詳細を決定してプレビューで確認すると
できる。 いう作業を繰り返すものである。
2-4.作成の手順
まず、ゲーム作成までの準備について述べる。 ホームページからティラノビルダーをダウンロードし、
アプリケーションに追加する。 次にティラノビルダーを開き、スタート画面から「新規
プロジェクト作成」を選択する。新規プロジェクト名は半
角英数字のみ使用可能である。 次に「アドベンチャー形式」と「サウンドノベル形式」
の 2 つの形式から選択する（図 2）。アドベンチャー形式
図 4. メ ニュ ー画 面
はキャラクターや動作が加わるゲーム形式、サウンドノベ
ル形式はテキストや音声中心のゲーム形式である。 次に、ゲーム作成画面での基本的な手順について述べる。
左エリアの「キャラクター管理」ボタン(図 5-①)で管理ウ
インドウを開き、
「＋」ボタン(図 5-②)で登場キャラのフォル
ダを作成する。作成したフォルダに登場人物の画像をまとめ
てドラッグ＆ドロップする(図 5)。
図 2．ゲーム形式の選択画面 次に画面サイズを「よこ型」、
「たて型」の 2 つから選択
する。よこ型は PC ブラウザ・スマホ両方に汎用的であり、
たて型はスマホで見るのに適している。
図 5．キャラクター管理画面
左エリアから「キャラ登場」コンポーネントをシナリオエ
リアに挿入する(図 6-①)。パラメータエリアでキャラ画像フ
ォルダを選択し、位置を設定する(図 6-②)。
ン」を挿入し、パラメータ内の「ターゲット」から各シナリ
オに配置したラベルを選択する。
図 6．キャラ登場の様子
テキストも「キャラ登場」と同様の手順で、「テキスト表
示」コンポーネント、「テキスト」コンポーネントの順に挿
入し、テキストエリアに内容を記述することで編集できる。
図９．分岐ボタン ゲーム中キャラクターの表情を変化させたい際は、「キャ
3. 作成した教材 ラ変更」コンポーネントを挿入し、パラメータ内の「キャラ」
3-1.英語補助教材 で選択したフォルダ内の画像をダブルクリックで選択する。
3-1-1.作成背景 指導要領の改定に伴い小学校
高学年における英語の教科化が
行われるのに対して、現行の体制
では小学校教員にとって英語の
授業がとても大きな負担になる
と考え、小学校教員の英語の授業
のサポートが行える教材を考え
た。 図７．キャラ変更の様子
背景の設定も同様の手順で、「背景イメージ」コンポーネ
ントを選択し、パラメータエリアでファイル内に登録した画
図 10． 完成 した 教材
像をダブルクリックで選択する。
英 語補 助教 材 QR コード
ストーリー中に背景を変える際も「キャラ変更と同様の手
順を「背景変更」コンポーネントで行う。
3-1-2 概要 これらの作業を繰り返しシナリオが完成したら、左エリア
タイトル画面で自分の学びたい単元を選ぶことができ
上部にある「新規シナリオ」ボタンでシナリオを作成し「シ
るようになっている。 ナリオ選択」から読み込むことで各シナリオを編集できる。
単元を選ぶとその単元の授業を Ms.Brown とまなぶくんと
タイトル画面も同様に「シナリオ選択」から読み込み編集
一緒に学習することができる。構成としては最初に単元の
する（図 8）。
説明を行い、最後に確認テストを行うとい構成になってい
る。 工夫した点は、各単元の要点をまとめ、いくつかの板書
を用意して、ノートを取りながら勉強できるようになって
いる。最後には確認テストがあり単元の理解度を図ること
ができる。 ・ 本アプリの使用場面 図 8．タイトル画面 シナリオが複数ある際、タイトル画面から各シナリオへ飛
本アプリは英語の授業の補助教材となっている。使用
ぶために「分岐ボタン」コンポーネントを使用する。まず、
場面としては以下の２つが挙げられると考えている。 各シナリオのはじめに分岐ボタンの飛び先を表す「ラベル」
コンポーネントを挿入する。次にタイトル画面に「分岐ボタ
・授業の復習 ュー」というアプリケーション内の「スマート投げ縄」とい
・反転授業（予習） う機能を使用した(図 12)。スマート投げ縄は、複雑な形を切
・授業の補習教材 り取るのに適している。
3-2.スマホ危険体験アプリ 3-2-1.作成背景 内閣府『青少年のインターネット利用環境実態調査』によ
ると、平成 22〜23 年までの小学生の携帯電話・スマートフ
ォンの所有率は 20％であるのに対して、平成 25 年の所有率
は 36.6％とここ 2 年で急激に上昇している。スマートフォン
に限定すると、平成 24 年の所有率が 7.6％であるのに対して
図 12．スマート投げ縄編集画面
平成 25 年では 16.3％まで上昇した。このことから、今後小
学生がスマートフォンを活用するにあたって、情報モラル教
資料の画像はパワーポイントを使って作成する。例として、
育の必要性が更に高まると考えられる。そこで、小学校高学
Twitter 画面の資料は iPhone で撮ったスクリーンショット
年を対象とした「スマホ危険体験アプリ」の製作を開始した。 画像をパワーポイントに添付し、図形オブジェクトを上に重
ねることで作成した。
3-2-2.概要 作成した画像を「iPhone Screenshot Maker」というサイ
「スマホ危険体験アプリ」は、小学校高学年を対象とした、
トを用いて、iPhone の画面に写した画像を作成した(図 14)。
スマホを使う中で起こりうるトラブルをストーリーで解説
する教材である（図 11）。 図 11. スマホ危険体験アプリ、QR コード
図 14．作成画像例
使用場面は、児童が学校外で短時間で学べるもの、情報モ
ラルの授業で事例として活用できるものを想定した。
4. まとめ ストーリー内容は、ワンクリック詐欺、架空請求、Twitter
今回のティラノビルダーを用いたアプリ教材作成を通し
炎上、情報社会でのマナーについての４つである。
て、様々な有用性を実感することができた。 また、課題も見つかった。 3-2-3.スマホ危険体験アプリの開発 一つ目は、ブラウザゲームとして配布するとネット環境が
作成したスマホ危険体験アプリを例に、アプリ開発の概要
無い場所ではアプリを開くことができないということであ
について述べていく。
る。地方の教育現場で、スムーズに作動するかが課題である。
はじめにストーリー中に使用する画像を作成する。今回は
アプリとして配布する方法もあるがお金と時間がかかる。 生徒、先生、背景、資料の 4 種類の画像を使用する。
二つ目は、作成な必要な画像編集や、音源の使用方法など
生徒、先生、背景の画像は「イラスト AC」を利用した。
の知識が最低限必要であるということである。難しい操作で
生徒・先生の画像は同キャラクターで数種類の表情があるこ
はないが、情報分野を苦手とする人には画像サイズや拡張子
と、画像サイズが均等であることを基に決定する。次に集め
の調節に苦労するため、作成に関する一連のマニュアルの必
た画像からキャラクター以外の背景などの余分な部分を切
要性を感じることである。今後様々な教材を作っていく中で、
り取る。これはキャラクター画像を登場させた際に、余分な
マニュアルの必要性も意識して取り組みたい。 部分がストーリーの背景を隠してしまうことを防ぐためで
ある。画像の切り取りには、Mac に内蔵されている「プレビ