-
実際にクエリを送って結果を受け取り、表示するという方法がおそらく簡単な利用方法だと思います。
そこで今回は、前後3日を含む1週間にアイドルの誕生日があれば表示するWebページを作成します。
完成形はこちら
- 土台を作る
-
表示するWebページのHTMLはこんな感じです。
-
HTMLについては、特に難しくないので説明しません。
divタグに入れ込むんだなってことが感じ取られますね。
- クエリを作る
-
前後3日を含む1週間にアイドルの誕生日を取得するクエリはこちら
-
6,7行目から解説します。この2行でアイドルの名前と誕生日を取得します。ちなみに7行目で2つの述語をORで取っているのは、一方か両方がマッチすれば良いというものです。理由は
schema:alternateNameのみしか無いアイドル(例:ジュリア・詩花)も同じ変数?nで取得できるようにするためです。
8,9行目は、値を変数に代入するBIND文です。ついでにgMonthDay型にキャストしています。また、本来ならば3日前と3日後の日にちの文字列が入るのですが、サンプルクエリはxxで表現しています。
10行目でフィルタリングします。3日前以降かつ、3日後以前の日にちのみを取得します。
11行目の左側ではまず、主語?subでグルーピングしています。理由は、schema:name, schema:alternateNameの両方が存在する場合(例:エミリー)、それぞれのデータとして分けられてしまいますのでちゃんと一人のアイドルとしてまとめるために主語でグルーピングしています。
右側では、わかりやすいようにデータを日付順に並び替えています。
最後に4行目です。主語?subされているので、他の変数についてはSAMPLE文で抽出しています。
- クエリを送って、返ってきた結果を表示する
-
クエリを扱うJavaScriptはこちら。迷ったらHTMLの
scriptタグに埋め込んでください。
-
1行目から順に説明します。定数
URLはエンドポイントを示します。
2行目は、クエリの文字列を定義しています。配列にしているのは、上記のクエリでxxにしていた部分を切り取っておき、あとで取得する3日前3日後の文字列と結合するためです。
4～12行目では、1週間分の日付の文字列を作っています。後々の比較でラクなのでこの方法を取ってます。
15～31行目では、結果が返ってきた時の動作を定義します。
21行目で、受け取ったJSONの文字列をちゃんとJSON型に変換しています。そして、ついでに結果のみにしておきます。
22～30行目で、結果の各組み合わせ(アイドル名-誕生日)について順に調べていきます。まず、現在の組み合わせの誕生日の文字列を取得します。それと最初に作成した1週間分の日付の文字列を比較し、一致した時のindexとdivタグのidが対応するのでそこにアイドル名を追加します。
35行目では、HttpRequestをGetメソッドでクエリをエンドポイントへ投げる設定をしています。前後3日の日付を配列の間に入れて文字列を結合することでクエリを完成させています。
以上がim@sparqlを使った簡単なWebアプリです。要点だけ言えば、Getメソッドでエンドポイントにクエリを送り、返ってきた結果をデータとして扱うだけです。また、今回紹介できてませんが、Postメソッドを使ったリクエストやXML,CSVで結果を返してもらう方法などの機能もあります。簡単に扱えるアイマスのデータベースとしてぜひともご活用ください。