Help us understand the problem. What is going on with this article?

SPARQL のお供に Chrome DevTools の Copy as fetch が便利

More than 1 year has passed since last update.

はじめに

こんなかんじの SPARQL Endpoint の Web フォームで SPARQL を実行して

image.png

こんなかんじで結果を確認する、というのは SPARQL を扱う人にはおなじみかと思います。

image.png

で、できあがった SPARQL を curl から使ったり HTML+Javascript から使ったりしようとするわけですが、 Accept ヘッダーに何書けばいいんだっけ?とか curl や javascript fetch で POST どうやるんだったっけ?など少なからずフリクションが発生します。面倒です。

Copy as fetch

Chrome の DevTools を開いた状態で SPARQL を実行させてみましょう。こんなかんじで取得されたリソースが表示されていますね。この場合は ?default-graph-uri... が SPARQL Response です。

image.png

ここで ?default-graph-uri... を右クリックしてさらに Copy をクリックすると下図のようにいろんなメニューがあるのですが、ここで Copy as fetch をクリックすると、 javascript fetch のスニペットがクリップボードにコピーされます。

image.png

GET の場合

Japan Search の SPARQL Endpoint で実行した結果を Copy as fetch してみたところ、こんなかんじです。

fetch("https://jpsearch.go.jp/rdf/sparql/?default-graph-uri=&query=select+distinct+%3FConcept+where+%7B%5B%5D+a+%3FConcept%7D+LIMIT+100&should-sponge=&format=text%2Fhtml&timeout=0&debug=on", {
  "credentials": "include",
  "headers": {
    "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3",
    "accept-language": "ja,en-US;q=0.9,en;q=0.8",
    "cache-control": "no-cache",
    "pragma": "no-cache",
    "upgrade-insecure-requests": "1"
  },
  "referrer": "https://jpsearch.go.jp/rdf/sparql/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

POST の場合

e-Stat の SPARQL Endpointdescribe クエリーを送ってみた結果を Copy as fetch してみたのがこちらの例。

fetch("https://data.e-stat.go.jp/lod/sparql/alldata/query", {
  "credentials": "include",
  "headers": {
    "accept": "text/turtle,*/*;q=0.9",
    "accept-language": "ja,en-US;q=0.9,en;q=0.8",
    "cache-control": "no-cache",
    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
    "pragma": "no-cache",
    "x-requested-with": "XMLHttpRequest"
  },
  "referrer": "https://data.e-stat.go.jp/lod/sparql/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": "query=describe+%3Chttp%3A%2F%2Fdata.e-stat.go.jp%2Flod%2FsmallArea%2Fg00200521%2F2015%2FS141520340%2Fpolygon%3E%0A",
  "method": "POST",
  "mode": "cors"
});

あとは不要なプロパティやヘッダを削除すれば、簡単に HTML+JS に組み込めそうですね。

Copy as cURL

Copy as cURL (bash) をクリックするとこんなこんなかんじです。

GET の場合

curl 'https://jpsearch.go.jp/rdf/sparql/?default-graph-uri=&query=select+distinct+%3FConcept+where+%7B%5B%5D+a+%3FConcept%7D+LIMIT+100&should-sponge=&format=text%2Fhtml&timeout=0&debug=on'
-H 'Connection: keep-alive'
-H 'Pragma: no-cache'
-H 'Cache-Control: no-cache'
-H 'Upgrade-Insecure-Requests: 1'
-H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36' 
-H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3' 
-H 'Referer: https://jpsearch.go.jp/rdf/sparql/' 
-H 'Accept-Encoding: gzip, deflate, br' 
-H 'Accept-Language: ja,en-US;q=0.9,en;q=0.8' 
-H 'Cookie: XXXXXXXXXX' 
--compressed

POST の場合

curl 'https://data.e-stat.go.jp/lod/sparql/alldata/query' 
-H 'Pragma: no-cache' 
-H 'Origin: https://data.e-stat.go.jp' 
-H 'Accept-Encoding: gzip, deflate, br' 
-H 'Accept-Language: ja,en-US;q=0.9,en;q=0.8' 
-H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36' 
-H 'Content-Type: application/x-www-form-urlencoded; charset=UTF-8' 
-H 'Accept: text/turtle,*/*;q=0.9' 
-H 'Cache-Control: no-cache' 
-H 'X-Requested-With: XMLHttpRequest' 
-H 'Cookie: XXXXXXXXXX' 
-H 'Connection: keep-alive' 
-H 'Referer: https://data.e-stat.go.jp/lod/sparql/' 
--data 'query=describe+%3Chttp%3A%2F%2Fdata.e-stat.go.jp%2Flod%2FsmallArea%2Fg00200521%2F2015%2FS141520340%2Fpolygon%3E%0A' 
--compressed

こちらも手元に SPARQL Results をダウンロードする場合に役立ちそうですね。

まとめ

Copy as fetch が導入されたのは 2018-04 の Chrome 67 とのこと。
地味な機能なので気付くまでにだいぶ時間がかかってしまいましたが、便利なので使っていきましょう。

frogcat
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away