2013年度　外国語電子教材作成支援　報告書

プロジェクトNO.　　　研究課題名　　　　代表者所属

3-3 スペイン語ベーシック1～3・インテンシブ1～3・スキル　　　山本純一環境情報学部

I　研究の背景

本研究は、ＳＦＣの外国語教育の一拠点スペイン語研究室として、日々変化する電子媒体による学習環境をかんがみ、目標としてWebを活用した学習者主体のスペイン語ＬＭＳ（Learning Management System）を構築することを掲げる。SFCのスペイン語は、来期から、以下のようにコースが変わる。

　インテンシブ開講当初のコースの目的は、スペイン語の「発信型」、つまり「スペイン語で意見を表明できる」コミュニケーション能力の育成だった。その後、二回に及ぶ大きなカリキュラムの改定を行い、13年度は、14年度から新しくなるコースに対応すべく、新バージョンのHPへと改定し、さらにWeb上へ新教材の追加と、旧教材のバージョンアップを図った。

2　教材開発の目的と課題

2-１目的と課題

　2012年度に開発したスペイン語コース全般で活用する基幹となるWeb上の教材のバージョンアップ

特に、2014年度から採用される新カリキュラムに対応するWeb教材の再編成が主たる目的となった。

１　履修体験者から、新入生をはじめとする履修希望学生へのメッセージビデオの作成

２　2012年度に改定したスペイン語ホームページへ、新カリキュラムに対応する情報を追加

３　フォローアップ教材の更新（履修を取りやめた学生対象のフォローアップ教材のコンテンツ追加）

４　語彙教材の更新（特に、2013年度から新規開講したビジネススペイン語の用語の追加）

2-2本プロジェクトで作成した教材

2-2-１　スペイン語の履修体験者から、履修を希望する学生への授業紹介ビデオと、履修者の作成した映像作品の公開

　初学者から中級者までのスペイン語学習の動機付を高くするため、スペイン語でのナレーションと、映像付きで、SFCスペイン語コースを紹介するプロモーションビデオを作成した。

　スペイン語の授業は、課題が多く、せっかく学習を始めても、途中で挫折する学生も少なくない。そんな中で、スペイン語の既習者から、学習の継続を鼓舞するような映像教材を作成し、数ある教材の中においておく。最初は、何も言えなかったのに、2年後には、どのぐらい、話せるようになるのか、など、目標が明示されることで、語学学習の動機を高く保てるような映像教材を作成した。具体的には、スペイン語をゼロから学び始めた学生が、スペイン語で授業のコースを説明した。また、履修者の作成した、スキットや、映像作品を見られるような仕組みを整え、履修希望の学生に、具体的なイメージを与えようと心がけた。また、数名の履修者が、座談会形式で、本音の体験談を語り合い、スペイン語履修の実態を紹介した。

2-2-2　スペイン語のどのレベルの履修者でも、アクセスできるスペイン語ブログの開発

ベーシック1からスキルレベルまでの全履修者が、各レベルに応じて、アクセスできるスペイン語ブログの開発の継続。教室内で、メイン教材として使われるものとは別に、教室外でも、気楽にアクセスできるように、携帯・スマートフォン対応の教材へと深化させた。

たとえば、スペイン語の歌にアクセスでき、歌詞のなかに、授業で出てきたばかりのフレーズなどを見つけることができ、楽しみながら、学習が継続できるようにした。授業でも使用する一方、気軽に授業外でもアクセスできるようなコンテンツを充実させた。　　具体的には、①　音楽、歌詞から学ぶ、②　スポーツから学ぶ（スペインサッカーリーグ情報など）　③　スペイン便り　（スペイン在住の日本人や、スペイン人に、現地の日常生活を書いてもらう）　④　スペイン料理（レシピ、レストランなど）　⑤　スペイン語圏旅情報　（各地のガイドやお薦めスポット）　⑥　スペイン語圏で活躍する先輩の便り　⑦　日本でスペイン語圏料理が味わえるレストラン情報　⑧　DELEなど資格試験情報　⑨　サラマンカ大学で放送されているスペイン語による日本情報番組へのリンク　など、具体的に、いくつかのコンテンツを準備して、週一回の頻度で更新して、授業とリンクしながら、スペイン語圏の文化や言語へ、学習者のレベルや関心によって、気軽にアクセスできる映像や音声を載せるブログを作成した。

2-2-3　新スペイン語HPの作成（新カリキュラムに対応する情報へのバージョンアップ）

2014年度から始まる新カリキュラムに対応した情報を、１) 新入学の学生向け、2）　在校生へ、履修モデルが変更するために、注意点などを、掲載した。

2-2-4　履修をやめた学生を対象としたフォローアップ教材のコンテンツ追加と、機能の刷新

具体的な開発についての報告は、以下のシステム上の報告を参照。

2-2-5　語彙教材の更新（2013年度から新規開講したビジネススペイン語対応の語彙追加）

　2013年度から、新規開講されたスペイン語スキル「ビジネススペイン語」の教科書に対応したビジネス世用語を新規に作成し、追加した。具体的な開発についての報告は、以下のシステム上の報告を参照。

3　本教材開発のシステム上の報告

　Paco y Pepa や Cocina といったスペイン語研究室開発の音声付の教材では、教材を静的なコンテンツとして開発してきたため、教材の機能拡張や改修が困難という問題があった。本研究では、これらの音声教材をオープンソースのコンテンツマネジメントシステム(CMS)上に移植することにより、教材の拡張性を高め、システムのマルチプラットフォーム化やリッチUIの実現などを行った。

本研究の成果は、以下のURLにて公開しており、実際に活用されている。

Paco y Pepa: http://estudio.sfc.keio.ac.jp/pacopepa/

Cocina: http://estudio.sfc.keio.ac.jp/cocina/

3-1 CMSの導入による教材システムの拡張性の向上

　従来のスペイン語研究室の音声教材は、教材を静的なコンテンツとして開発してきたため、システム完成後の修正や教材の追加、機能の拡張といった変更が難しいという問題があった。例えば、「Paco y Pepa」は静的なHTMLにすべての音声ファイルやスペイン語のスクリプト情報、日本語の要約などが記述されており、HTMLやWebサーバの知識がある専門家でなければ編集が困難であった。また、「Cocina」はFlashとActionScriptを用いて作成されており、Flashを編集するための専用ツールや、専門的な知識がなければ編集することができなかった。また、両者とも教材が静的なコンテンツであるため、適切にデータベース化されておらず、検索やカテゴリ分けなど、適切なコンテンツを探し出すための仕組みが整っていなかった。

　そこで、本研究では、上記のような静的コンテンツの問題を解決するために、Webブラウザ上で簡単にコンテンツを編集できるCMSに音声教材を移植した。具体的なCMSは、オープンソースのブログソフトウェアであるWordPress(バージョン3.8)を使用した。これは、スペイン語研究室のウェブサイトで、すでにWordPressを使っていて、管理の共通化を図れる点や、後述するレスポンシブ対応なテーマが豊富に存在し、モバイル向けの展開をしやすい点などを考慮した。

　WordPressへの移行の利点は、第一に、コンテンツの編集や追加作業のハードルが非常に下がった点が挙げられる。従来の「Paco y Pepa」のような静的なHTMLでコンテンツを編集する場合、HTMLの知識はもちろん、Webサーバ上でのファイル操作の技術や編集権限の付与などが必要であった。また、Flash版の「Cocina」の場合は、研究室にあるFlashの作業用ファイルをコピーし、Flash編集用ソフトウェアのインストールされているPCで作業をするしかなかった。一方、WordPressに移行後のシステムでは、ブラウザ上でコンテンツの編集が可能であり、HTMLの知識がなくてもコンテンツの編集が可能なエディタを備えている。さらに、編集のログを自動で保存するリビジョン管理機能や、プレビュー機能などの恩恵を受けることも可能である。

　WordPressへの移行による第二の利点は、検索機能やカテゴリの機能を使い、適切なコンテンツにすばやくアクセスするためのツールを手軽に提供できる点が挙げられる。例えば、「Paco y Pepa」では、従来ではレベル別にスクリプトをリストとして表示していただけだったが、WordPress上でそれぞれのスクリプトを「記事」として投稿し、その記事に対してカテゴリを付与することにより、レベルだけでなく「文化・地域」「生活・留学」といったコンテンツの中身に応じた絞り込みを動的に行うことができるようになった。また、「Cocina」では、従来ではレベルによる大分類とカテゴリによる小分類による階層構造をたどることでしか個別の単語にアクセスできなかったが、WordPressに移行することにより、スペイン語や日本語のキーワードからマッチする単語を直接検索することができるようになった。

　上記のように、WordPressに音声教材を移行することにより、コンテンツの編集や機能拡張が容易に実現できる環境を整えることができた。本研究では、WordPressに移行した新システムを対象として、さらに以下のような2点の機能拡張を実装した。

3-2　HTML5を用いたマルチプラットフォーム化

　まず、本研究で開発している音声教材を、さまざまなOSやブラウザ、デバイス上で利用するためのマルチプラットフォーム化を実現した。「Cocina」は、もともとFlash教材としてCDで配布したものをPCで利用してもらっていたため、ブラウザ上で利用できるようになった利点は大きい。また、「Paco y Pepa」は、音声の再生にFlashプレーヤを使用していたためにiOSで利用できなかったり、レイアウトがPC向けのものでスマートフォンで最適化されていなかった点を改善した。Flashプレーヤに関しては、HTML5のaudio要素を用いた音声再生に置き換えることにより、iOS上での再生が可能になった。ここで、audio要素で対応しているファイル形式がブラウザによって異なる問題を解決するため、音声ファイルを「mp3」と「ogg」の2種類のフォーマットで用意した。スマートフォン向けのレイアウトの最適化に関しては、WordPressのテーマとして配布されているもののうち、画面サイズに応じて動的にレイアウトが最適化される「レスポンシブ対応」なテーマを導入した。具体的には、「Paco y Pepa (図 1)」で、Pinterest風のグリッドレイアウトによる一覧表示が特徴的なPinbin を採用し、「Cocina (図 2)」では高いカスタマイズ性のある Attitude を採用した。したがって、HTML5の技術やWordPressのレスポンシブ対応テーマを用いて、WindowsやMac OS, iOS, AndroidなどのOS、Internet Explorer や Firefox, Google Chrome などのブラウザの違いに対応するマルチプラットフォームの音声教材を実現することができた。

図 1. Paco y Pepa トップページ図 2. Cocina トップページ

3-3 JavaScriptプログラミングによるリッチUIの実現

　本研究では、音声教材の拡張として、利用者との動的なインタラクションを可能とするリッチUIの実装を行った。「Paco y Pepa」および「Cocina」について、利用者からのフィードバックやユースケースの分析を通じて、それぞれの教材に求められる機能を設計し、それぞれ独自のJavaScriptプログラムを開発・実装した。

「Paco y Pepa」については、「スクリプトの音声が早過ぎる」「同じ部分を繰り返し聞きたい」といった意見を参考に、音声コントロール機能を拡張した。まず、スピードコントロール機能として、通常の1倍速の他に、0.9倍速、0.8倍速のスピードで再生する機能をJavaScriptにより実現した。JavaScriptを用いる利点は、スピードを動的に変化させるため、スピードを変更したファイルを事前に用意しておく必要がなく、パラメータのコントロールも容易である点が挙げられる。さらに、10秒戻る機能や段落の頭から再生する機能を実装し、繰り返し音声を聞くといった利用ができるようになった。

　又、「Paco y Pepa」については、「スペイン語のスクリプトや日本語の要約を見ずにテストとして使いたい」という要望に対し、スクリプトや要約の表示を動的に切り替える機能についても実装した。一方、「Cocina」は、教材に含まれる単語や音声のデータベース化がまだ不十分であり、大規模な音声チェックや間違いの修正が必要とされることから、まずは管理機能の効率化を最優先に実現した。

　まず、JavaScriptを用いた独自のマークアップによる、原稿フォーマットの簡素化を実現した。これは、簡潔な独自記法により教材データを記述し、JavaScriptによって実際のHTMLを出力する手法である。例えば、表 1 のようなデータを記述した場合、実際には表 2 のような出力となる。表 2 のようなHTMLを編集しようとした場合、HTMLやこのシステムについての知識がない場合は、どこを変更すればどのような結果になるかが分かりにくい。一方、表 1のような記法では、データのラベルと実際のデータが明確に定義されており、余計な情報も含まれていないため、初心者でも簡単に編集できると考えられる。

表 1. 独自記法による教材データの記述

<dd class="cocina-term-spanish">buenas tardes</dd>

<dd class="cocina-term-japanese">こんにちは</dd>

<dd class="cocina-term-audio-mp3">buenas-tardes.mp3</dd>

<dd class="cocina-term-audio-ogg"> buenas-tardes.ogg</dd>

<dd class="cocina-term-dictation">buenas tardes</dd>

</dl>

表 2. 実際のHTML出力

<div class="col-xs-5 cocina-test-mode-hide">buenas tardes</div>

</button>

</div>

<div class="col-xs-5 cocina-test-mode-hide">こんにちは</div>

</div>

　また、上記の記法には、分かりやすさの他に、「一つの情報は一箇所にまとめる」という原則を導入し、データの整合性を保つという目的もある。従来のFlash版Cocinaでは、「単語の音声ファイルと読み方、日本語の意味」のデータセットが、単語一覧ページとディクテーションページの2箇所に重複して記述されていた。この場合、単語の間違いを修正するために2箇所を同時に修正しなければならない手間があり、両者の間でデータが食い違う危険性もある。今回実装したシステムでは、重複するデータを一箇所にまとめることにより、これらの問題に対応している。そのため、単語一覧ページとディクテーションページは別ページとして分離されておらず、切り替えボタンで動的に表示が変化するようになっている。

　さらに、単語データのエラーチェックを支援するためのアノテーション機能も実装しており、3000近い数の単語を扱う本教材で、手動チェックを補うための強力な機能となっている(図 3)。これは、機械的に単語をチェックし、問題がないものは再生ボタンが青色で表示され、スペルミスなどが疑われる場合にはオレンジ色、音声が再生できない場合は赤色で警告がされ、必要に応じてエラーメッセージが表示される機能である。

図 3. 単語エラーチェックのためのアノテーション機能

　その他、Cocinaのエンドユーザ向けの拡張機能としては、ディクテーションページにおいて単語の順番を入れ替える「シャッフル機能」を実装した。従来のFlash版Cocinaでは、単語の順番がディクテーションページにおいても固定であったため、音声を聞かなくても場所で単語を覚えてしまうといった場合もあった。今回のシステムでは、単語データを独自フォーマットで一元管理したことにより、単語のシャッフル機能を容易に実現することができ、ディクテーションテストの効果を上げることが期待できる。

4　研究成果物

スペイン語研究室HP　: http://estudio.sfc.keio.ac.jp/

Paco y Pepa: 　http://estudio.sfc.keio.ac.jp/pacopepa/

Cocina: 　http://estudio.sfc.keio.ac.jp/cocina/

文責　寺田裕子（総合政策学部　訪問講師（招聘））　 hterada@sfc.keio.ac.jp