はじめに

九州大学データ駆動イノベーション推進本部 次世代型オープンエデュケーション推進部門の部門長を務める岡田義広氏（システム情報科学府情報理工学専攻担当教員）の講演の記録です。岡田氏が九州大学の日本史学の研究室と協働して開発した、平安時代の宮中儀礼「官奏」「除目」を3次元CGアニメーションで再現する対話型のウェブ教材について、制作の進め方、教材の機能と仕組み、授業や博物館での活用を扱います。あわせて、福岡市の鴻臚館を対象とした観光情報としての歴史学ウェブ教材や、360度VR・点群を使ったコンテンツの取り組みも取り上げます。歴史資料の内容を3DCGで教材にする方法や、日本史学と情報系の協働の進め方に関心のある方に役立ちます。

日本史学対話型3Dウェブ教材の始まり

この教材の開発は、九州大学文学部のEEP（九州大学内の「教育の質向上支援プログラム」）「文系ディシプリン科目教科書・副教材の開発－人文学教育カリキュラムの充実を目指して－」の一環として始まりました。このプログラムは講演時点ではすでになくなっています。九州大学附属図書館付設の教材開発センターができて間もなく、人文科学研究院の坂上康俊教授（現・名誉教授）から、人文系の科目でもiPadなどのICT（Information Communication Technology、情報通信技術）を活用した教材を開発したいと声がかかり、岡田氏らが共同で取り組むことになりました。

宮中の儀式の様子を紙の媒体だけで学ぶのではなく、3次元CG（Computer Graphics）アニメーションや3Dプリンターで出力した建物のモデルを見ながら学ぶことで、学習内容をより深く理解でき、学習対象に興味もわかせることができると考えて、この取り組みを進めました。活動は2014年度に始まり、10年ほどを経て一段落し、講演時点では止まっている状態です。

官奏・除目の3D教材の制作

対象とした儀礼と制作期間

教材が対象とするのは、平安時代の次の2つの宮中儀礼です。

  • 官奏：諸司・諸国からの上申文書を、大臣が天皇に奏上する儀礼です。岡田氏は、下級の役人がまず選択をしたうえで、そのいくつかを天皇に奏上するものと説明しました。
  • 除目：諸官を任命する宮中の年中行事です。「除」は前官を除いて新官を任ずる意味、「目」は目録に記すことを表します。3日間にわたって行われます。

官奏の教材は2014年度から2016年度にかけて作成しました。除目の教材は、官奏の教材の作成と並行して2015年7月に作成を始めました。除目は官奏よりも登場人物の振る舞いが細かく、3日間にわたる長い儀式でもあるため、アニメーションデータの作成に多くの時間を要し、2023年度に3日間の儀式がほぼ完成しました。

故実書をもとにした建物と人物のモデル化

岡田氏の側の専門は情報で、日本史学のことはよく分からないため、坂上氏と研究室のメンバーから故実書などの情報を提供してもらい、それを読んで岡田氏の側がアニメーションデータを作るという分担で制作しました。

建物は、紫宸殿・陣座・清涼殿の3つの形状モデルを作成しました。写真があるわけではなく、手がかりは故実書に描かれた絵だけだったため、それをもとにスタッフが3Dのソフトウェアを使って建物を起こしました。登場人物は大臣・大弁などをモデル化し、振る舞いを定義してアニメーションさせました。月に1回、坂上氏の研究室と打ち合わせを行い、作成したアニメーションデータを見てもらって確認し、次に作る部分を決めるという流れで少しずつ進め、数年をかけて2つのコンテンツを作りました。

除目の教材では、復元の典拠を次のように整理しています。

  • 儀場である清涼殿の設えや、硯筥・第一〜三筥の構成・内容：「年中行事絵巻」「魚魯愚別録」「雲図抄」「除目抄」など
  • 儀式の全般的な進行と、天皇・執筆・公卿などの動作：主に「江家次第」をもとにし、適宜「西宮記」「北山抄」を参照
  • 第一夜から第三夜にみられる筥の移動や大間書を繰る動作、顕官挙・受領挙などの動作：「魚魯愚別録」「除目部類記」などの除目故実書や古記録も参照

登場人物をピクトグラムで表した理由

登場人物は、着物を着た姿ではなく、通称「棒人形」と呼ばれるピクトグラムで表しています。着物を着せた3Dモデルを起こすと作業に非常に時間がかかり、人手と時間のコストが高くなるため、岡田氏の側から坂上氏にピクトグラムにさせてほしいとお願いしました。坂上氏のグループの側でも、登場人物がどのような着物を着ていたかは分からない部分があり、適当に着物を着せるとさまざまな問題が生じるだろうということから、分からないところは分からないままにしてピクトグラムで表すことにしました。

そのうえで、天皇の前での役人の振る舞いを日本史学を学ぶ学生に理解してもらうことを目的に、動きに主に焦点を当てて開発しました。人物は色分けされており、官奏の教材では大臣を赤、大弁を青で表しています。

教材の機能と画面

教材はWebGL（JavaScriptの3次元CGライブラリ）とThree.jsを利用したウェブコンテンツで、任意のウェブブラウザで閲覧して学習できます。タブレット端末やスマートフォンなどがあれば、時間や場所に制限されずに学習できるように作られています。3次元CGで表した建物や登場人物の振る舞いに加えて、静止画・説明文の表示や動画・音声の再生の機能を備えています。対話型のコンテンツと動画は、次世代型オープンエデュケーション推進部門のICT活用対話型電子教材のページに一覧があり、学外からも見られるようになっています。

建物のデータが重いため、初回のアクセスでは建物が全部表示されるまで時間がかかりますが、一度アクセスするとキャッシュされるため、2回目以降はそれほど時間がかかりません。マウスで視点を対話的に操作でき、紫宸殿・陣座・清涼殿や鳥瞰図などのカメラ位置もあらかじめ設定されています。初期化の「前半」ボタンを押すと陣座に大臣や大弁が登場し、「次へ」ボタンで儀式を進めます。

スライド05

3次元CGアニメーションで表した建物や登場人物の振る舞いを見たことで、テキストを読むだけの場合よりも宮中の儀式の様子を深く理解できたという感想が、学生から寄せられました。

コンテンツを再利用するためのフレームワーク

岡田氏の側は研究の要素も入れたいと考え、一度作ったコンテンツのうち再利用できる部分を別のコンテンツの開発に使えるようにするフレームワークを提案・開発しました。3次元のモデルやアニメーションデータを3Dアセットとして別に登録・保存し、それらを呼び出す形でコンテンツを作ります。フレームワークは次の要素で構成されています。

  • メインのコンポーネント（Main.html）：建物のオブジェクト、アニメーションキャラクターのオブジェクト、テキスト・画像・動画・音声ファイルに関する関数をまとめたもの
  • サブのコンポーネント（AnimationCharacter.js）：動くキャラクターのための新しいクラスと、そのメンバー関数
  • Three.jsライブラリの補助的なコンポーネント：ColladaLoader.js、OBJMTLLoader.js、PointerLockControls.jsなど
  • ストーリー定義ファイル（官奏の場合はKanso.js）：テキストデータは変数として直接定義し、それ以外のデータはファイル名で指定します。画像（jpg）、動画（mp4）、音声（mp3）、動くキャラクターのアニメーション用のCollada（dae）ファイル、建物のオブジェクト用の3Dモデル（objとmtl）ファイルを扱います

個々の教材（官奏の場合はKanso.html）は、これらを組み合わせた対話型の3Dウェブコンテンツとして作られています。

教材の活用と展示

授業・放送での利用

教材開発センターが発行していたニュースレターの近況報告には、成果が学外でも活用されていることが記されています。坂上氏が担当する放送大学の講義「古代中世の日本」の摂関時代の収録部分で除目のアニメーションが使われ、放送される予定であること、また、聖心女子大学現代教養学部の授業で、佐々木恵介教授が平安時代の政務処理を説明する際に官奏のアニメーションを利用しているという情報が寄せられたことです。講演では、放送大学の講義でこのコンテンツの動画が紹介されたことにも触れ、岡田氏は第7回だったと思うと述べました。

教材開発センターは講演の前年の3月になくなり、業務の一部は岡田氏が現在所属する部門が引き継いでいます。センターのウェブサーバーは講演時点でも残っています。

国立歴史民俗博物館の企画展示

除目の教材は、国立歴史民俗博物館の企画展示「歴史の未来 ー過去を伝えるひと・もの・データー」（2024年10月7日〜12月8日）の一部として展示されました。展示にあたっては、来館者に対話的に操作してもらうと必ずトラブルが発生するため、できるだけ対話的でないものにしてほしいという依頼がありました。そこで、対話性のある動画も用意したうえで、最終的には動画の形にし、博物館では中くらいの大きさのディスプレイに表示してもらいました。

展示用の動画は、平安時代宮中儀式３D教材（除目儀式）として、動画だけを再生するウェブコンテンツにまとめ、九州大学のウェブサーバーで公開しています。3日間の儀式を「初夜・除目の準備」から「第三夜・清書の準備」までの9つの場面に分け、長い動画では見てもらえないため、それぞれ重要な部分を数分の動画にしました。対話型のコンテンツで表示される説明文と同様の文章が、字幕として表示されます。

スライド10

観光情報としての鴻臚館ウェブコンテンツ

福岡市には、市として歴史的にアピールする福岡城と鴻臚館があります。鴻臚館は平安時代に迎賓館の役割をしていたと言われる建物で、現在は建物がありませんが、発掘で柱が出てきて実在したことが分かっています。福岡市では鴻臚館を3次元CGで復元して見られるようにする取り組みが行われていました。それをウェブで見られるようにしたのがこのコンテンツです。

背景には、福岡市の「福岡城・鴻臚館を活かした観光都市戦略事業」があります。同事業では「鴻臚館・福岡城バーチャル時空散歩」として、鴻臚館跡・福岡城跡の当時の姿をCGなどのデジタル技術でタブレット端末の中に再現し、ボランティアガイドの案内とともに史跡内を散策しながら、その場所で当時の姿などを体験できるAR（Augmented Reality、拡張現実感技術）のシステムが運用されていました。福岡城の櫓のところでiPadを使って空を見上げると建物が見られるというものでしたが、岡田氏は、講演時点ではもう行われていないようで、ページのリンクもなくなっていたと述べました。

教材開発センターはこの事業の一環として、福岡市・特定非営利活動法人「福岡城市民の会」と連携して教材を開発しました（協力：福岡市経済観光文化局文化財部）。2015年度には、基幹教育院総合科目「Mobile Application Development Tutorial」で、鴻臚館の観光用モバイルARアプリケーションや、ウェブブラウザで鴻臚館の3DCG再現モデルの中を歩き回りながら平安時代の鴻臚館の様子を体験できるVR（Virtual Reality、仮想現実感技術）アプリケーションの開発に取り組みました。

自宅で鑑賞・学習できるウェブコンテンツ

鴻臚館の建物のモデルは、福岡市が費用をかけて業者に作らせたもので、福岡市から提供を受けて使用しました。宮中儀礼の教材で開発したフレームワークを利用し、ウェブブラウザ上で対話的に移動しながら鑑賞できるVRコンテンツとして提供しています。鳥瞰図や広場から建物を見た視点で表示でき、講演ではキーボード操作で移動して見せました。

スライド14

さらに、自宅で学習できる歴史学ウェブ教材として、静止画・説明文の表示や動画・音声の再生の機能も利用しています。新しい機能として、当時の催し物の様子を表す室川画伯作の画像をアニメーション表示する機能を加えました。

水彩画のアニメーション化

室川画伯は、遣唐使などが来たときの場面をイメージして水彩画に描いています。この絵をもとに、人物が首を振ったり船が動いたりするコンテンツにしました。講演で示した絵は、船が出られずに歌を詠んで時間を過ごしているところを描いたもので、岡田氏は別れを悲しんでいる場面とも説明しました。作成の手順は次のとおりです。

  1. 画像をパーツ画像に分割する
  2. パーツ画像ごとに板を用意し、重ねて配置する
  3. テクスチャーマッピングで板にパーツ画像を表示する
  4. 板を動かしてアニメーション表示する

パーツへの分割は、教材開発センターのテクニカルスタッフが手作業で行いました。人物の部位ごとに切り分けたパーツをそれぞれ透明の板に貼り付け、JavaScriptのプログラムで板を回したり動かしたりしています。岡田氏は、今であればAIを使ったAdobeのソフトウェアやPhotoshopなどで、ある程度きれいにセグメンテーションできるかもしれないと述べました。

スライド19

福岡市博物館での展示

平安時代の鴻臚館の様子をVRで体感できる教材と、鴻臚館のイラストや3Dモデルを見ながら学習できるウェブ教材は、福岡市博物館の発見100年記念特別展「よみがえれ！鴻臚館 ー行き交う人々と唐物ー」（2017年9月7日〜10月22日）で展示されました。

Linked Data・360度VR・点群の取り組み

Linked Dataに基づく対話型3Dウェブ教材

講演資料の最後の項目として、Linked Dataに基づく対話型3Dウェブ教材（日本史学・3D CG版）を取り上げました。文学部で日本史学を学ぶ学生がこうした教材で学ぶ際に、関連する情報をLinked Dataの形で得られれば、テキストや動画、画像を使った対話型のマルチメディア教材になるという一つの例です。

360度VRコンテンツ

岡田氏は、現在所属する次世代型オープンエデュケーション推進部門で作成しているコンテンツも紹介しました。360度VRカメラを使ったウォークスルーや、動画によるナビゲーションのコンテンツがあります。中央図書館のナビゲーション版では、学生に360度VRカメラを頭に付けて館内を歩いてもらい、視点を360度自由に変えられるようにしています。画面左上のマップで経路をクリックするとその地点に移動でき、館内に表示されているパネル画像とビデオ動画を別にもらって、360度VR画像が表示される球体の中で、それらが表示できるようにしています。

点群コンテンツ

点群のデータは非常に重く、すぐに1ギガバイトから数ギガバイトのデータサイズになります。視点を対話的に変えられるようにするため、点群をかなり間引いて粗くしています。講演では、風洞実験室の点群データを、フリーの点群ビューワーであるポットリーで表示しました。ポットリーではプログレッシブレンダリングが行われ、待たされることなく、詳細な部分を後から表示できます。

岡田氏らもレーザースキャナーを所有しており、同じ勉強会の先の講演で紹介された、レーザースキャナーで点群を取得してポリゴンに起こす取り組みと似たことを行っています。目的は工学的に重要なもののアーカイブではなく、学生が実験をする前に、どのような実験をしてどのような機材を使うかをあらかじめ見てもらう事前学習です。

講演情報

関連リンク

この記事は、講演記録を基に生成AIを利用して作成したユースケース記事です。