前回、LinkData上でデータをオープン化するところまで行いました。
今回は実際にアプリを開発してみたいと思います。

データ作品のアプリタブで、そのデータを使って作成されたアプリーケションを見ることができます。
アプリの新規作成もここから行うことができます。

1. 新規作成

「アプリを作成」ボタンをクリックすると、ダイアログが表示されます。
『アプリを新規作成、またはフォークして作る』を選択
『新しいプログラムを作る』を選択
プログラムで使用するデータに関しては初期状態のまま次へ

すると、コード編集の画面に移ります。

2.エディタ画面

コード編集の画面を見ると、初めから以下のコードが入力されています。

/*
This is a Example program to retrieve and display the data.
Press the Run button on the right of the screen (described the behavior of the Example program below).
Please create a new application rewrite this program work.
*/

window.onload = function() {
  var limit = 5;
  var count = 0;
  $.each(LinkData.getWorks(), function(workKey, workValue) {
    $("#result").append("<h3>Work: " + workValue + "</h3>");
    $.each(LinkData.getFiles(workValue), function(fileKey, fileValue) {
      $("#result").append("<h4>File: " + fileValue + "</h4>");
      $.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) {
        count = 0;
	$.each(LinkData.getProperties(workValue, fileValue), function(propKey, propValue) {
	  if(count++ > limit) {
	    return false;
	  }
	  $("#result").append("<div style='padding-top:10px;'>Subject : " + subjValue + "</div>");
	  $("#result").append("<div style='padding-left:10px;'>Property : " + propValue + "</div>");
	  $("#result").append("<div style='padding-left:20px;'>Objects</div>");
	  $.each(LinkData.getObjects(workValue, fileValue, subjValue, propValue), function(objKey, objValue) {
	    $("#result").append("<div style='padding-left:30px;'>" + objValue + "</div>");
	  });
	});
      });
    });
  });
};

わけがわからない。

コード編集の上に複数のタブがあります。
HTMLとCSSとJavaScriptを使うんだなぁってわかります。

そして画面右には実行画面が表示されています。このわけがわからないコードを実行すると、どうやら画面の通りになるようです。

コードを編集して、実行画面上の『reload』ボタンを押すと再実行されます。
『save』ボタンでコードを保存できます。逆に言うとこれを押してない状態だと保存されないので注意。既にアプリが公開されている場合は、『save』したタイミングでアプリが更新されます。
1回目に『save』するとき、アプリ名や公開状態について設定できます。
まずは、非公開にして、好きなようにアプリを編集したりテストしたりするのがよいでしょう。
きちんと動作するようになったら公開に変えましょう。

では、さっそく初期コードの解読から初めていきましょう