パブリックAPI で、1つのモデルからグラフと地図を作る

このチュートリアルでは、ヘッドレス CMS である Re:Earth CMS の機能を使って、データを配信します。その仕組みは Re:Earth CMS とはなにか で説明しているので、先に読むことをおすすめします。

Re:Earth CMS にモデルを作り、パブリックAPI を通じて2つの配信先で利用するまでを、次の手順で実践します。

• データの構造を決めて Re:Earth CMS に登録する。
• 登録したデータをパブリックAPI から配信する。
• 同じデータを、表計算ソフト（Microsoft Excel）のグラフと Re:Earth Visualizer の地図でそれぞれ利用する。

モデルに入れるのは、このチュートリアル用に用意した観光施設のデータです。来場者数は実際の数値ではなく、このチュートリアル用の値です。

手順はすべて画面の操作なので、コードエディタを使う場面はありません。

事前に準備するもの

• Re:Earth のアカウント
• Microsoft Excel。表計算ソフトとして使います。

Excel を用意できないときは、Google スプレッドシートで代用できます。データの取り込みの手順は本文に書いています。グラフの作成は Excel の画面で書いているので、Google スプレッドシートの操作に読み替えてください。

プロジェクトを作る

Re:Earth CMS に、観光施設のデータを置く場所として、プロジェクトを1つ作りましょう。

1. Re:Earth CMS のワークスペースのホームで 新規プロジェクト をクリックしてください。
2. プロジェクト名 に Tourist Spots と入力してください。半角英数字なので、プロジェクトエイリアス に tourist-spots が自動で入ります。
3. プロジェクトの公開範囲 で 公開 を選んでください。プランによっては 非公開 も選べます。
4. プロジェクト概要 の入力は任意です。ここでは入力せずに進みます。
5. プロジェクトのライセンス で Creative Commons Attribution 4.0 International を選んでください。
6. OK をクリックしてください。

ワークスペースのホームのプロジェクト一覧に、作ったプロジェクトが表示されます。

手順3で選んだ 公開 は、プロジェクトをオープンデータとして公開する設定です。詳しくは プロジェクトの「公開範囲」 を参照してください。

手順5で選んだ Creative Commons Attribution 4.0 International は、公開したデータを他者が利用・共有してよい条件を伝えるものです。作成者と著作権の表示、ライセンスへの参照を残し、改変したときはその旨を示すことを条件に、改変・再配布・商用利用のいずれも認めます。自分のデータを配信するときは、利用条件に合うライセンスを選びましょう。

施設のモデルを作る

観光施設のデータを入れるモデルを、プロジェクトの中に作りましょう。

1. ワークスペースのホームのプロジェクト一覧で Tourist Spots を開いてください。
2. モデル 画面で 新規モデル をクリックしてください。
3. モデル名 に Facility と入力してください。モデルキー に facility が自動で入ります。
4. モデル概要 は空のまま、OK をクリックしてください。

Facility モデルの スキーマ 画面が開きます。この画面で、モデルに入るアイテムの値を定義するスキーマを設定します。

フィールドを追加する

実際のデータを登録する前に、施設の何を記録するかをフィールドとして決めます。フィールドやスキーマという言葉や、データの登録より先にフィールドを決める理由が分からない場合は、モデルの構造を先に決める を先に読むことをおすすめします。

次の4つのフィールドを、上から順に追加しましょう。

表示名	フィールドキー	フィールド
Name	name	テキスト
Address	address	テキスト
Location	location	ジオメトリエディタ
Visitors	visitors	整数型

1つ目の Name を追加します。

1. フィールド タブで フィールドを追加 を開き、テキスト をクリックしてください。
2. 設定 タブの 表示名 に Name と入力してください。フィールドキー に name が自動で入ります。
3. この値をアイテムの見出しに使うので、タイトルとして使用 をオンにしてください。
4. 検証 タブで このフィールドを必須項目にする をオンにしてください。
5. OK をクリックしてください。

2つ目の Address を追加します。

1. フィールドを追加 を開き、テキスト をクリックしてください。
2. 表示名 に Address と入力してください。
3. 検証 タブで このフィールドを必須項目にする をオンにしてください。
4. OK をクリックしてください。

3つ目の Location を追加します。

1. フィールドを追加 を開き、ジオメトリエディタ をクリックしてください。
2. 表示名 に Location と入力してください。
3. 対応タイプ で Point を選んでください。
4. 検証 タブで このフィールドを必須項目にする をオンにしてください。
5. OK をクリックしてください。

4つ目の Visitors を追加します。

1. フィールドを追加 を開き、整数型 をクリックしてください。
2. 表示名 に Visitors と入力してください。
3. 検証 タブで このフィールドを必須項目にする をオンにしてください。
4. OK をクリックしてください。

フィールド タブの一覧に、追加した4つのフィールドが並びます。必須にしたフィールドには * が、タイトルに設定した Name には タイトル が付きます。

これで、Facility モデルのスキーマができました。このスキーマで定めたフィールドに沿って、アイテムを登録します。

アイテムを登録する

スキーマで定めたフィールドに沿って、施設を1件ずつアイテムとして登録しましょう。登録するのは次の4件です。

Name	Address	Location	Visitors
国立西洋美術館	東京都台東区上野公園7-7	画面上の地図のエディタから入力	100000
浅草寺	東京都台東区浅草2-3-1	画面上の地図のエディタから入力	300000
恩賜上野動物園	東京都台東区上野公園9-83	画面上の地図のエディタから入力	200000
国立科学博物館	東京都台東区上野公園7-20	画面上の地図のエディタから入力	150000

Name と Address に選んだ テキスト は、文字を自由に入力する欄です。Location に選んだ ジオメトリエディタ は、画面上の地図に点を置いて値を入れる欄です。Visitors に選んだ 整数型 は、小数を含まない数値を入れる欄です。

1件目を登録しましょう。

1. コンテンツ の モデル からモデル名 Facility を選んでください。
2. 新規アイテム をクリックしてください。
3. 各フィールドに値を入れてください。
   1. Name に 国立西洋美術館 と入力してください。
   2. Address に 東京都台東区上野公園7-7 と入力してください。
   3. Location の地図にある検索バーに 国立西洋美術館 と入力して検索してください。地図がその施設の周辺に移動します。
   4. 地図の右上にあるマップピンのアイコンをクリックしてください。
   5. 地図上で施設の位置をクリックしてください。点が置かれ、Location の欄に座標が入ります。
   6. Visitors に 100000 と入力してください。
4. 保存 をクリックしてください。

保存すると、アイテムのステータスに ドラフト が付きます。

同じ手順で、残り3件を登録しましょう。フィールドはモデルの中で固定されているので、2件目以降も同じ4つの欄に値を入れて登録できます。

これで、配信するデータの登録が完了しました。

Re:Earth CMS が行うのは、データの管理と配信までです。配信したデータをどう扱うかは配信先で決まり、このチュートリアルでは表計算ソフトと Re:Earth Visualizer の2つを使います。次のステップでは、配信するための設定を Re:Earth CMS で行います。

アイテムを公開する

Re:Earth CMS は、API を通じてデータを配信します。このチュートリアルでは、認証なしで公開データを読み取れるパブリックAPI を使います。詳しくは パブリックAPI設定 を参照してください。

パブリックAPI が配信するのは、ステータスが 公開済み のアイテムだけです。登録した4件のうち、3件を 公開済み にしましょう。

1. コンテンツ 画面の一覧で、国立西洋美術館・浅草寺・恩賜上野動物園 の3件の行のチェックボックスにチェックを入れてください。
2. 公開 をクリックしてください。
3. アイテムの公開 の確認で はい をクリックしてください。

3件のステータスが 公開済み に変わります。国立科学博物館 は ドラフト のままです。これから配信されるのは、いま 公開済み にした3件です。

エンドポイントを取得する

パブリックAPI は、配信するモデルごとに URL を持ちます。この URL を エンドポイント と呼びます。配信先は、エンドポイントからそのモデルのアイテムを取得します。

Facility モデルのエンドポイントを取得しましょう。

1. 左メニューの パブリックAPI を開いてください。
2. 読み取り タブを開いてください。
3. モデル名 Facility の行の エンドポイント の URL をコピーしてください。

有料プランのワークスペースで、プロジェクトの公開範囲を 非公開 にしている場合は、手順3の前に Facility の行の 有効 をオンにして、変更を保存 をクリックしてください。

パブリックAPI は、アイテムを JSON・CSV・GeoJSON のいずれかの形式で配信できます。

次のステップでは、Excel や Re:Earth Visualizer を使って、Re:Earth CMS で作成したモデルの配信や再利用を実践してみましょう。

表計算ソフトで表示する

Re:Earth CMS で取得したエンドポイントの URL を Excel に取り込んで、配信されているデータを表示してみましょう。

1. Excel で空白のブックを作成してください。
2. データ タブの データの取得 から、その他のデータソースから の Web から をクリックしてください。
3. URL に、「エンドポイントを取得する」の手順3でコピーした URL を貼り付けてください。
4. 貼り付けた URL の末尾に .csv を入力してください。
5. OK をクリックしてください。
6. Web コンテンツへのアクセス が表示されます。匿名 での接続であることを確認し、レベルを変えずに 接続 をクリックしてください。
7. 読み込み をクリックしてください。

Google スプレッドシートで進めるときは、手順1から7の代わりに次の操作をしてください。

1. Google スプレッドシートで空白のスプレッドシートを作成してください。
2. セル A1 に =IMPORTDATA("") と入力してください。
3. " と " の間に、「エンドポイントを取得する」の手順3でコピーした URL を貼り付けてください。
4. 貼り付けた URL の末尾に .csv を入力してください。
5. Enter キーを押してください。

新しいシートに、配信されているデータがテーブルとして表示されます。手順4でエンドポイントの URL の末尾に .csv を付けたので、Re:Earth CMS から Excel へ CSV の形式で配信されます。

テーブルの1行目は、「フィールドを追加する」で定義したフィールドキーが入力されています。 id は、アイテムごとに Re:Earth CMS が自動で付ける識別子です。CSV の形式では、ジオメトリエディタのフィールドが配信されないため、Location のフィールドは表示されません。

2行目から下は、「アイテムを登録する」で登録し、「アイテムを公開する」で 公開済み にした3件のアイテムが入力されています。 国立科学博物館 のアイテムは ドラフト のままのため配信されていません。

このように、パブリックAPI のエンドポイントを利用すると、Facility モデルで定義したフィールドキーと、公開したアイテムが、表計算ソフトで扱える構造で配信されます。

表計算ソフトでグラフを作る

APIで配信された Re:Earth CMS のデータは、受け取ったツールのなかで再利用できます。テーブルの visitors の列から、施設ごとの来場者数を比べるグラフを作りましょう。

1. name の B1 から B4 までを選択してください。
2. Ctrl キーを押しながら、visitors の D1 から D4 までを選択してください。
3. 挿入 タブの 縦棒/横棒グラフの挿入 から 集合縦棒 をクリックしてください。

「アイテムを登録する」で Visitors に入力した値が、施設名ごとの縦棒グラフとして表示されます。

このグラフは、配信された visitors の列から作ったものです。グラフの種類も、どの列を軸と棒に使うかも、手順1から手順3で Excel の側で指定しました。

Re:Earth CMS には、グラフの設定はひとつもありません。どのフィールドを使って何を作るかは、配信先で決めています。

次のステップでは、Re:Earth Visualizer の画面で操作します。

Re:Earth Visualizerで地図に表示する

Excel に取り込んだものと同じエンドポイントの URL を Re:Earth Visualizer に入力して、施設を地図に表示しましょう。

はじめに、プロジェクトを Re:Earth Visualizer に作ります。

1. Re:Earth Visualizer のダッシュボードで ＋新規プロジェクト をクリックしてください。
2. プロジェクト名 に Tourist Spots Map と入力してください。
3. プロジェクト別名 に tourist-spots-map と入力してください。
4. プロジェクトの公開範囲 で 公開 を選んでください。プランによっては 非公開 も選べます。
5. 説明 の入力は任意です。ここでは入力せずに進みます。
6. Choose a license で Creative Commons Attribution 4.0 International を選んでください。
7. 適用 をクリックしてください。
8. ダッシュボードに追加されたプロジェクトのカードをダブルクリックしてください。

作ったプロジェクトに、Re:Earth CMS のデータをレイヤとして追加しましょう。

1. 左パネルの ＋新しいレイヤー をクリックしてください。
2. URLから追加 を選んでください。
3. URL に、「エンドポイントを取得する」の手順3でコピーした URL を入力してください。
4. 入力した URL の末尾に .geojson を付けてください。
5. 形式が GeoJSON と検出されたら、追加 をクリックしてください。
6. レイヤの一覧に追加されたレイヤの 移動 をクリックしてください。

地図が施設の周辺に移動し、「アイテムを公開する」で 公開済み にした3件がピンで表示されます。レイヤを追加する手順4で末尾に .geojson を付けたことで、地図で扱うための GeoJSON の形式で配信されました。

「表計算ソフトで表示する」では列に出てこなかった Location の座標が、GeoJSON では配信されています。ピンの位置は、「アイテムを登録する」の手順3で地図上に置いた点の座標です。

エンドポイントの末尾を変えると、表計算ソフトではテーブルとして受け取ったデータを、Re:Earth Visualizer では地理空間データとして扱えます。地図のピン1つが、アイテム1件に対応しています。

GeoJSON形式のデータでも、Location フィールドのほかに、Name・Address・Visitors フィールドも配信されています。Re:Earth Visualizer のインフォボックスを使って、3つのフィールドの値が配信されていることを確かめましょう。

1. 地図に表示された施設のどれかをクリックしてください。
2. インスペクター パネルの インフォボックス タブを開いてください。
3. 有効 スイッチをオンにしてください。

インフォボックスが表示されます。この中に、フィールドごとのブロックを追加します。

1. Name フィールドのブロックを追加してください。
   1. インフォボックスの左上にある ＋ をクリックし、テキスト を選んでください。
   2. 追加されたブロックをクリックしてください。
   3. ブロックの右上に表示される鉛筆のアイコンをクリックしてください。
   4. コンテンツ の入力欄の右にある をクリックし、一覧から name を選んでください。
   5. [→ をクリックしてください。
2. Address フィールドのブロックを追加してください。
   1. ＋ をクリックし、テキスト を選んでください。
   2. 追加されたブロックをクリックしてください。
   3. ブロックの右上に表示される鉛筆のアイコンをクリックしてください。
   4. コンテンツ の入力欄の右にある をクリックし、一覧から address を選んでください。
   5. [→ をクリックしてください。
3. Visitors フィールドのブロックを追加してください。
   1. ＋ をクリックし、テキスト を選んでください。
   2. 追加されたブロックをクリックしてください。
   3. ブロックの右上に表示される鉛筆のアイコンをクリックしてください。
   4. コンテンツ の入力欄の右にある をクリックし、一覧から visitors を選んでください。
   5. [→ をクリックしてください。

地図上の施設をクリックすると、インフォボックスにそのアイテムの Name・Address・Visitors フィールドの値が表示されます。3つのピンを順にクリックして、それぞれの施設の値が表示されることを確かめましょう。

ブロックを追加する手順で の一覧に並んでいた name・address・visitors は、「表計算ソフトで表示する」で1行目に並んでいた列見出しと同じです。

「表計算ソフトでグラフを作る」では施設どうしを比べる列として使った visitors を、ここでは1件ずつの値として表示しています。

未公開のアイテムを配信する

「アイテムを公開する」でチェックを入れなかった 国立科学博物館 は、まだ ドラフト のままです。これを公開して、2つの配信先が両方とも変わることを確かめましょう。

はじめに、Re:Earth CMS に戻ります。

1. コンテンツ の モデル から Facility を選んでください。
2. 国立科学博物館 の行のチェックボックスにチェックを入れてください。
3. 公開 をクリックしてください。
4. アイテムの公開 の確認で はい をクリックしてください。

国立科学博物館 のステータスが 公開済み に変わり、パブリックAPI が配信するアイテムは4件になります。

続いて、Excel で配信されるデータがどう変わったのかを確かめましょう。

1. テーブルの中のセルをクリックしてください。
2. テーブル デザイン タブの 更新 をクリックしてください。

Google スプレッドシートには 更新 に当たるボタンがありません。Google スプレッドシートで進めているときは、手順1と手順2の代わりに、セル A1 の数式を数式バーからコピーし、セルの内容を消してから貼り付けてください。数式を入れ直すと、表が更新されます。

表に 国立科学博物館 の行が増えます。グラフに加えるには、「表計算ソフトでグラフを作る」の手順1と手順2で選んだ B1:B4 と D1:D4 を、B1:B5 と D1:D5 に広げます。

続いて、Re:Earth Visualizer で配信されるデータがどう変わったのかを確かめましょう。

1. 「Re:Earth Visualizerで地図に表示する」で利用したRe:Earth Visualizer のプロジェクトを開き、ブラウザの再読み込みをしてください。
2. デフォルトのカメラ位置（北米上空）に戻ってしまった場合には、レイヤの 移動 ボタンを押して該当のレイヤまでカメラを移動させてください。

地図のピンが4件に増えていることが確認できます。

振り返り

表計算ソフトや地図に出ている値は、Facility モデルのスキーマで決めたフィールドの値です。Re:Earth CMS で行ったのは、「フィールドを追加する」で構造を決め、「アイテムを登録する」で構造に沿って値を入れ、「アイテムを公開する」で配信の対象にすることまでです。

Excel と Re:Earth Visualizer は、その配信先です。どちらも同じ1つのエンドポイントから、それぞれ適切な形式（拡張子）のデータで受け取りました。

受け取ったデータから何を作るかは、配信先の画面で決めました。Excel では name と visitors を選んで縦棒グラフにし、Re:Earth Visualizer では Location をもとに地図に表示されたピンに Name・Address・Visitors のインフォボックスを足して可視化しました。

Re:Earth CMS のモデルは、こうしてデータベースとして運用できます。配信先はここで使った2つに限らず、エンドポイントの URL さえあれば、別のサービスからも自分で作るフロントエンドからも、同じデータを同じ構造で扱えます。

実践したことを確かめる

ここまでで実践したことをもとに、次の4つを考えてみましょう。

1. Re:Earth CMS で管理している座標を持つデータを地図のアプリで使いたいとき、パブリックAPI からどの形式でエンドポイントの URL を取得するとよいでしょうか。
2. Re:Earth Visualizer のインフォボックスのフォントサイズを変えたいとき、編集するのは Re:Earth Visualizer と Re:Earth CMS のどちらでしょうか。また、インフォボックスに出ている施設名と住所を変えたいときは、どちらを編集するでしょうか。
3. Re:Earth CMS を自分で使うとしたら、どんなことに使ってみたいでしょうか。その用途のために、モデルにはどんなフィールドが必要でしょうか。
4. 3で検討したモデルのデータを、パブリックAPI のどの形式のエンドポイントを使って、どんなフロントエンドで使えそうでしょうか。