>   >  Unityでつくるインタラクティブコンテンツ:第14回:図鑑コンテンツをつくる
第14回:図鑑コンテンツをつくる

第14回:図鑑コンテンツをつくる

今回は、データベースを検索して結果を表示する図鑑コンテンツの実装方法を紹介します。

TEXT_高田稔則 / Toshinori Takata(Codelight
EDIT_小村仁美 / Hitomi Komura(CGWORLD)

今回のサンプルデータはこちら
https://github.com/toshinoritakata/DictSample

<1>Unityで検索コンテンツをつくる3つの方法

こんにちは、高田です。今回は「検索コンテンツ」に関して紹介してみます。

「検索コンテンツ」とはあるデータの集まりから必要な情報を引き出し、表示させるものと考えてください。弊社では美術品、大学や地域の歴史、機械のパーツ紹介など様々な情報検索コンテンツをUnityで作っています。今回はUnityでの検索コンテンツの作り方の一例を紹介していきます。

身近な検索コンテンツはWeb上にあります。まずシンプルな検索ページである「Yahoo!きっず図鑑」を見てみましょう。

●Yahoo!きっず図鑑
https://kids.yahoo.co.jp/zukan/


トップページから「動物」を選ぶと「名前からさがす」「なかまからさがす」「場所からさがす」「大きさからさがす」の4つの方法で動物を探すことができます。

試しに「名前からさがす」を選び、「あ」で始まるものを探すと、「アイアイ」「アイナメ」「アオウミガメ」「アオオサムシ」などが表示されます。では、これらの動物のデータはどのように管理しているのでしょうか?


「あ」で始まる動物の検索結果のURLを見てみると、

https://kids.yahoo.co.jp/zukan/animal/a/a/

となっています。

「/a/a」は「あ行」の「あ」を示していると考えられます。このサイトでは複合的な検索ができないので、データ登録の際に、分類に沿った静的なページ構造を作っているのでしょう。こうすることでサーバの負荷を最低限にすることができ、サイトの構築も楽になります。

<2>データのディレクトリ階層をたどる

Unityでもこの考え方は利用できます。展示用に作る図鑑コンテンツの場合、サーバを置くことは少なく、それぞれのPC単独で動くように作ることが多い印象です。その理由としては、2つ大きな点があると思います。

1:不特定多数のアクセスがない
2:閲覧中に情報の更新がない

そのため、Yahoo!きっずの図鑑のようにファイル階層そのものを検索画面に反映させる方法が良く使われます。

それでは、実際に図鑑コンテンツを作ってみましょう。以下のように「海の生き物」、「陸の生き物」フォルダを用意します。


各フォルダには表示させたい画像を入れておきます。


これをUnityで表示させるときに自動的にUIを構築していきます。カスタムのファイルビューアを作るイメージです。


今回のサンプルコードは下記に置いています。
https://github.com/toshinoritakata/DictSample

今回はSample1〜3の3つを用意しました。Sample1がここで説明するディレクトリを探索していくタイプで、Sample1.csだけで処理が完結しています。Sample2、Sample3は後半で説明します。

Dataフォルダ内で見つかったデータがフォルダの場合は名前付きボタン、jpgファイルの場合は画像を表示します。



この作り方の利点は大きく2つあります。

1:プログラムが簡単になる
2:指定通りにファイルとフォルダを作ってもらえればそのまま反映できるため、直感的に管理できる

利点1で大きいのはUnityに集約できることだと思っています。検索コンテンツだけHTMLで構築して、CSSでページレイアウトを行なったり、JavaScriptでページ遷移の演出を入れたりするのは対応が煩雑で難しいため、Unityで全て行えるのは助かります。

利点2は、データ構造がわかりやすく、コンテンツの運営スタッフの人が理解しやすいことです。登録のプログラムも不要でルール通りにファイルを置いてもらうだけです。実際、この方法はとても多く使われており、図鑑コンテンツの8割方はこの方法で済ませることができます。

<3>データベースを使って検索できるようにする

しかし、この方法では、ページをたどるだけで検索を行うことができません。検索できるようにするにはどうすれば良いでしょうか。

メトロポリタン美術館の、所蔵美術品を検索できるページを例にみてみましょう。
https://www.metmuseum.org/art/collection/search


ここで、素材をブロンズ、時代を紀元前2000年から1000年として検索を行うと、以下のURLのページが表示されます。

https://www.metmuseum.org/art/collection/search#!?perPage=20&searchField=All&sortBy=Relevance&offset=0&pageSize=0&material=Bronze&era=2000-1000%20B.C.

これはURLに検索条件を加え、サーバに対して問い合わせを行なっていると考えられます。様々な検索条件の組み合わせを全て静的にページ構築するのは無理なので、データベースを構築し、それに対して問い合わせた結果の情報からHTMLを生成して表示しています。

このような、Webシステムなどで情報を管理するしくみは「データベース」と呼ばれ、MySQL、PostgreSQL、SQLiteなどがあります。これらのデータベースはC#からでも接続できるため、Unityで利用することもできます。

MySQL、PostgreSQL、SQLiteは全て「リレーショナルデータベース」と呼ばれる歴史のある形式のデータベースです。中でも、SQLiteはインストールも不要で最も軽量なため、Android端末では標準ライブラリとして使用されています。

MySQLはWordPressなどのCMSのバックエンドで利用されています。このためWebの開発では馴染み深いものだと思います。

メトロポリタン美術館のデータベースの一部はGitHub上にcsv形式で公開されているので、自分で検索システムに組み込むこともできます。

●The Metropolitan Museum of Art's Open Access Initiative
https://github.com/metmuseum/openaccess

ただ、このデータは大きすぎるので、以下のようなシンプルなものをSQLiteを使って検索できるようにしてみましょう。


SQLiteを下記のサイトからダウンロードします。ここではPrecompiled Binaries for Windowsのsqlite-tools-win32-x86-3310100.zipを使用しますが、お使いの環境によって適したものを選んでください。

●SQLite Download Page
https://www.sqlite.org/download.html


zipファイルを展開して、以下のように実行します。

.\sqlite3.exe test.db  

起動したら、以下のようにテーブルとデータを登録します。

1.	create table animals(id int primary key, category text, name text, size integer);  
2.	insert into animals values(1, '哺乳類', 'アイアイ', 400);  
3.	insert into animals values(2, '鳥類', 'アオサギ', 930);  
4.	insert into animals values(3, '爬虫類', 'ムカシトカゲ', 600);  
5.	insert into animals values(4, '両生類', 'ツチガエル', 40); 

次に、SQLを使って問い合わせを行います。

1.	-- 登録されている全ての情報を表示  
2.	select * from animals;  
3.	1|哺乳類|アイアイ|400  
4.	2|鳥類|アオサギ|930  
5.	3|爬虫類|ムカシトカゲ|600  
6.	4|両生類|ツチガエル|40  

1.	-- 爬虫類の名前を問い合わせる  
2.	SELECT name FROM animals WHERE category='爬虫類';  
3.	ムカシトカゲ  

1.	-- 爬虫類もしくはサイズが40mmの生き物を問い合わせる  
2.	SELECT name FROM animals WHERE category='爬虫類' or size=40;  
3.	ムカシトカゲ  
4.	ツチガエル  

SQLはリレーショナルデータベースへの操作を定義するための言語で、問い合わせや登録など全て行うことができます。しかし、今回のような図鑑コンテンツでは前述したようにデータの更新がまず起こらないため、本格的なデータベースを別に用意するのは面倒です。もう少し手軽に使える方法がないか調べるうちに、「MasterMemory」が良さそうだと感じ、導入を行いました。

次ページ:
<4>MasterMemoryを使う

その他の連載