Edited at

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


はじめに

こんなかんじの 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 とのこと。

地味な機能なので気付くまでにだいぶ時間がかかってしまいましたが、便利なので使っていきましょう。