まなびのクリエイト（代表・石井理）がこれまでに作成した教育コンテンツをご紹介いたします。
ご依頼につきまして
弊事業所では、主に「語学学習コンテンツ」および「オンライン授業支援ツール」の開発、そしてWEBサイト・ホームページの製作・運営を承っております。他にも映像作成・編集、音声編集・加工など、ご対応できることはたくさんありますので、まずはお気軽に本ページ最下部のお問合せフォームよりご連絡ください。
語学学習関連
ありがとうゲーム
概要
中国語音声が聴こえてくるので、４つの選択肢から正しいものを選ぶクイズゲームです。
レベルが上がるごとに、ヒントが減っていきます。
- LEVEL１〜２：イラスト、簡体字、ピンイン
- LEVEL３〜４：イラスト、ピンイン
- LEVEL５〜６：イラストのみ
- LEVEL７〜８：全てなし
また、選択肢の種類もステージによって、以下の形で入れ替わります。
- STAGEが5の倍数：正しい日本語訳を選択
- STAGEが奇数：正しい簡体字を選択
- STAGEが偶数：正しいピンインを選択
使用技術
- jQuery（javascript）：タイマー、正誤判定など
スクリーンショット
- 自然と耳に入ってくるので、耳で覚えられそうな気がします。
- 最初、「なんだこれ」と思いましたが、やってみるととっても楽しかったです。こうやって楽しんで中国語を学べて嬉しいです。
- ステージ毎に少しずつ慣れていけて、楽しく中国語の挨拶を学べて良かったです。
（いずれも明治大学の学生さんからお寄せいただいた感想です）
声調三国
概要
制限時間内に次から次へと出てくる中国語単語の赤色になっている簡体字の声調を、スマホの画面をフリックすることにより回答するものです。
- 第一声：画面上方を左から横に
- 第二声：画面左下から右上へ
- 第三声：画面下方を左から右へ
- 第四声：画面左上から右下へ
正解すると、三国志の関羽、張飛、趙雲、黄忠が兵馬俑を斬り倒すのが快感です。
使用技術
- jQuery（javascript）：タイマー、フリック検知、正誤判定など
スクリーンショット
学生さんがスマホで使用するために作ったものなので、PCで開くと表示サイズが合わず、またフリック検知ができません。
ワード・カードで文法パズル
概要
文法構造や品詞を示すグラマー・ボックスに、中国語単語の書かれたワード・カードを当てはめていくことにより、日文中訳の手順を学ぶことができるツールです。
使用技術
- Laravel（php） + MySQL：問題データベース管理、ルーティングなど
- jQuery（javascript）：タイマー、正誤判定など
- html5・css：グラマー・ボックスやワードカードのデザインおよび配色
スクリーンショット
提供先
EDUIC（上海教育情報センター）
解説動画＋文字起こしプレイヤー
概要
左右にフレームをわけ、左側に動画（YouTubeあるいはYouKu）を表示、右側に動画内音声の文字起こしを表示するプレイヤーです。
使用技術
- Laravel（php）+ MySQL：クエリから動画URLおよびテキストファイルを読みこんで表示するためのルーティングなど
スクリーンショット
提供先
EDUIC（上海教育情報センター）
バーチャル少人数授業
概要
オンラインで少人数授業を擬似体験してもらうために作成しているシステムです。
中国人のメイ先生、ドジっ子なソラちゃん、そして主人公（名前はプレイヤーが自由に設定）の３人で、ざっくばらんに会話をしながら授業が進行していく様子をお楽しみいただけます。
使用技術
- Laravel（PHP）：ルーティング
- jQuery（javascript）：CSV読み込み、矢印キー操作、選択肢操作など
- HTML5：音声再生など
- CSS：デザイン
スクリーンショット
提供先
EDUIC（上海教育情報センター）
オンライン授業支援関連
2020年春、各大学でオンライン授業が行われると発表された際、弊事業所では様々な予測を行いました。
- LMSサイトで重たいファイルを保存・運用していると学内サーバーがダウンしてしまうのではないか
- 学生さんによっては自分用のPCがないため、スマホでオンライン授業を受けると通信容量制限がかかってしまうのではないか
- 音声付きパワーポイントのファイルがスマホ上でうまく開かない学生さんもいるのではないか
（その後、様々な大学でこのような事態が実際に起こってしまったことが報告されています。）
弊事業所では、全国的にオンライン授業が実施されるに先立ち、上記のような事態を避けるため、以下のような仕様で「オンライン授業支援ツール」を開発し、大学様にご提案・ご提供いたしました。
- 容量を圧倒的に抑えられる
- あらゆるデバイス・OSで動作が安定
オーディオスライド
おかげさまで、先生方より100件を超えるご依頼をいただいております（2020年6月11日現在）。今後とも変わらぬご愛顧、よろしくお願い申し上げます。
概要
音声付きPowerPointのスライド画像＋音声を、デバイスOSの違いなどに影響されることなく、表示・再生できるツールです。
教員様ご自身で作成していただいた音声付きPowerPointを、以下２通りの方法で保存したデータをアップロードしていただくだけで、クイックプレビューおよびそのままご入稿までしていただけます。
- 「pptxファイル」
- 「画像を保存」
使用技術
- Laravel：再生用URL＋クエリのルーティング
- PHP：オーディオスライド変換用アップローダー（1. フォームからのファイルアップロード / 2. アップロードされたファイルをZIP解凍 / 3. サーバー内で本番用フォルダへ複製保存など）
- jQuery / jQuery UI：クイックプレビューでのスライドおよび音声の複製・削除・移動処理など
スクリーンショット
主な提供先
明海大学外国語学部中国語学科
ミエル・ラジオ
概要
教員様ご自身がDropBoxに保存されている音声に、字幕テロップをつけて再生・表示できるプレイヤーです。動画や画像がつかないので、非常に軽量である点が大きな特徴です。
使用技術
- vue.js：テキストの作成・編集・削除など
- jQuery（javascript）：テキスト表示など
- Bootstrap：デザインなど
スクリーンショット
テロップ・レイヤー・プレイヤー
概要
これは少し変り種です。「YouTube」動画に対して、独自の字幕を作成できるツールです。YouTubeには、動画投稿者が字幕を作成できる機能がありますが、動画引用者はYouTube内で独自の字幕を表示することはできません。そこで、大学の授業などで参考動画を学生さんに見てもらうとき、教員様の解説や日本語訳などを画面に表示しながら再生できるツールとして開発しました
使用技術
- vue.js：テキストの作成・編集・削除など
- jQuery（javascript）：テキスト表示など
- Bootstrap：デザインなど
スクリーンショット
WEBサイト関連
明海大学外国語学部中国語学科WEBサイト
概要
明海大学外国語学部中国語学科のWEBサイトを作成し、毎月の情報更新を業務として承っています。
使用技術
- WordPress：サイト記事更新
- Adobe Illustrator CC：バナー等画像製作
- Adobe Premiere CC：動画製作
スクリーンショット
提供先
明海大学外国語学部中国語学科
中高生・留学準備チャイニーズ
概要
中国留学の準備をしている中学・高校生向けの中国語オンラインスクールのWEBサイトを製作しました。
使用技術
- Laravel（PHP）：ルーティング、テンプレート、コンタクトフォームなど
- jQuery（javascript）：学習内容本体のインタラクティブコンテンツなど
コラボレーション
- EDUIC（上海教育情報センター） 監修
- 石井理 製作
スクリーンショット１
スクリーンショット２
