無償で使えるLinkDataのオープンデータで、ゆるキャラ名検索エンジンを作ってみた！

公開日：2015/11/14

最近になって、知人から「オープンデータ」について教えてもらうきっかけがあり、なかでも「LinkData.org」というサイトの情報がキレイにまとまっていたので、ここで少しご紹介してみます。

LinkDataのサイト内には、全国の「お城データ」や「道の駅データ」、「避難所データ」、「補助金まとめデータ」、「さくら名所データ」…など、意外とユニークで面白いデータがまとまっているので、うまく利用すれば楽しいWebアプリが作れそうです。

お気に入りのオープンデータを入手しよう！

「LinkData.org」には、誰でも無償で利用でき、商用利用も可能なオープンデータが豊富にまとまっています。
都道府県別で探したり、人気ランキングやキーワードを指定しての検索もできるので、自分が興味のあるデータを探すのも簡単でしょう。

　
今回は、サンプルとして「ゆるキャラ」のデータがまとまっている「ご当地キャラクター」のデータセットを使ってみようと思います。
（data by KeitarouNakayama/ご当地キャラクター）

　
「ダウンロード」の項目下に、「その他の形式のAPIリストを表示」というリンクがあるのでクリックします。

　
すると、外部APIとしてデータが取得できるURLが一覧表示されます。

そこで「JSON」形式のURLをコピーして、実際にブラウザのアドレスバーに入力してみましょう！

　
見事に、JSON形式で全国の「ご当地キャラクター」のデータが表示されたのが分かります。

あとは、このデータをJavaScriptなどを使って、自分のWebアプリに組み込めば良いわけです。

Webアプリにデータを組み込んでみよう！

LinkDataにあるオープンデータは、URLに「callback」を指定すれば「JSONP」としてデータを受け取ることが出来るようになっています。

まずは、コレを覚えておかないと、異なるドメイン間でデータを受け渡しできないので注意しましょう。

　
さて、JSONPを受け取るために、ピュアなJavaScriptやjQueryなどを使っても良いのですが、今回は最近よく利用している「AngularJS」でプログラミングしてみたいと思います。

AngularJSだと、JSONPのデータを受け取る処理は以下のように簡単です。

app.js

$http.jsonp(url).success(function(data) {
//ここに処理を書く

}).error(function(err) {});

「url」の部分には、先ほど確認したJSONを受け取るurlを当てはめれば、あとは「data」の中にご当地キャラクターの情報が入ることになります。

　
また、urlには「callback」を指定する必要があるため、以下のような感じになるでしょう。

http://linkdata.org/api/1/rdf1s3454i/local_character_rdf.json?callback=JSON_CALLBACK

urlの最後に、「?」から始まるcallbackを設定しておきます。

ちょっと特殊なデータ構造に注意

先ほどの例で、「data」の中身をコンソール出力すると分かるのですが、LinkDataの「JSONデータ構造」は少し特殊なようです。

すべて「url」による階層構造になっており、データによってはurlが統一されていないケースもあるようです。

　
そこで、まずは長いurlを変数に格納し、AngularJSに用意されている「forEach」メソッドを使ってデータを取得するようにしました。

app.js

var url = "http://linkdata.org/api/1/rdf1s3454i/local_character_rdf.json?callback=JSON_CALLBACK";
var nameFolder = "http://imi.ipa.go.jp/ns/core/rdf#名称";
$scope.lists = [];

$http.jsonp(url).success(function(data) {
	var num = 1;
	
	angular.forEach(data, function(value, key, obj) {
		$scope.lists[num++] = value[nameFolder][0].value;
	})
	
})

「forEach」メソッドを使うことで、「data」内の各情報へアクセスすることができるので、あとはゆるキャラの名称が記載されている部分を「$scope.lists」へ突っ込んでいます。

　
こうすることで、HTMLに「ng-repeat」を使って一気にゆるキャラ名を表示できるようになります。

index.html

<input type="text" ng-model="type" size="20" placeholder="※ゆるキャラ名を入力...">
<button ng-click="onClick()">検索</button>

<ul>
	<li ng-repeat="list in lists | filter:type track by $index"></li>
</ul>

さらに「filter:type」を指定することで、検索ボックスに入力したキーワードが含まれている「ゆるキャラ名」を自動で表示させています。

サンプルデモ！

今回は、単純に名前を表示するだけで、特に難しいことは一切していないですが、これでも立派な「ゆるキャラ検索アプリ」として使えるのではないでしょうか。

全部のコードと、サンプルはこちら！
(PCブラウザにてお試しください…)

入力ボックスに、ゆるキャラ名の一部を入れて「検索」ボタンをクリックすれば、該当する「ゆるキャラ名称」が一覧表示されます。

例えば、「あのゆるキャラの名前なんだっけ…」とか、「新しいゆるキャラ名が、既存のゆるキャラと被らないかなぁ…」みたいな時に、1文字でも入力して検索すれば一覧で表示されます。
（「く」とか「み」など、1文字だけ入力して検索してみてください）

まとめ

今回ご紹介したLinkDataは、非常に面白いデータがたくさんあるので、アイデア次第でユニークなWebアプリが作れる気がしています。

データに関しては、個人の方が提供しているモノもあれば、行政が積極的に取り組んでいるデータもあるので、開発するアプリによってはこのあたりも確認しておくと良いでしょう。

　
最後に、データのライセンスですが、オープンデータということもあり基本的には「パブリック・ドメイン」なので、特に何もしなくても利用できるモノばかりですが、稀に「CC BY」ライセンスもあります。

これは、クレジット表示が必要となるので、どこからデータを取得しているかを明記するようにしておきましょう。
（今回のゆるキャラデータも「CC BY」なので、デモ画面下部にクレジットを表記しておきました…）

（参考）
「LinkData.org」公式サイト

うえぶまなぶ