スマートフォン／タブレット向けアプリ教材の作成 情報・ものづくりコース 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 に内蔵されている「プレビ
© Copyright 2024 ExpyDoc
