search

yosupo06 / library-checker-frontend

https://judge.yosupo.jp/
Apache License 2.0
12 stars 10 forks source link

API #42

Closed beet-aizu closed 4 years ago

beet-aizu commented 4 years ago

https://twitter.com/___n___z/status/1257932857504399360?s=20

熱烈スクレイピングをしてもいいが https://github.com/kenkoooo/AtCoderProblems/ のUserInfo APIみたいなのがあるとうれしい

yosupo06 commented 4 years ago

gRPCなら既にAPIがある(or Web gRPCならすぐに足せる気がする)んですが、それでは不十分？

yosupo06 commented 4 years ago

よく考えたらUserInfo系のAPIなかった気がします

yosupo06 commented 4 years ago
beet-aizu commented 4 years ago

ありがとうございます　最初のやつを試してみます

yosupo06 commented 4 years ago

gRPC-Webを立てました。以下の手順で使えると思います(htmlにちょっとjsを書き込んでいい感じに使いたい、という用途を想定します)。 なお、私はnpmを初めて使いました

ディレクトリ構成

- library-checker-judge/
  - api/
    - proto/
      - library_checker.proto
- beet/

このようなディレクトリ構成で、beetフォルダの中で作業するものとします(library-checker-judgeはクローンしてください)

protoファイルをjsファイルに変換する

protoc -I ../library-checker-judge/api/proto/ ../library-checker-judge/api/proto/library_checker.proto \
    --js_out=import_style=commonjs:. \
    --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./

を実行してください。gRPC関連の諸々のインストールが必要になります macなら多分以下です

brew install protoc-gen-go protoc-gen-grpc-web

実行するとlibrary_checker_grpc_web_pb.js, library_checker_pb.jsがbeetディレクトリの下に出来ているはずです。

jsファイルを使える(?)jsファイルに変換する

beet/main.jsとして以下のように記述します

const { LibraryCheckerServiceClient } = require('./library_checker_grpc_web_pb');
const { RankingRequest } = require('./library_checker_pb');

let client = new LibraryCheckerServiceClient('https://grpcweb-apiv1.yosupo.jp:443');

client.ranking(new RankingRequest(), {}, (err, response) => {
    if (err) {
        console.log(err.code);
        console.log(err.message);
    } else {
        console.log(response.getStatisticsList());
    }
});

また、beet/package.jsonとして以下を置きます

{
  "devDependencies": {
    "@grpc/proto-loader": "^0.3.0",
    "google-protobuf": "^3.6.1",
    "grpc": "^1.15.0",
    "grpc-web": "^1.0.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  }
}

そして、npm installを実行します。大量のログ出力と時間がかかります。明らかにC++をコンパイルしてそうなログが出てくるんですが何故なのかは謎です。

そしてnpx webpack main.jsを実行します。全てがうまくいくとdist/main.jsが出来ているはずで、このjsファイルはいい感じに使えます。

htmlに入れる

これはやるだけです、例えばbeet/index.htmlとして次を置いて、ブラウザで開きます。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="./dist/main.js"></script>
</head>

<body>
    <p>Hello world</p>
</body>

</html>

うまくいくとコンソールに巨大な配列が出力されているはずです。chromeなら中身がポチポチ見れて、yosupo judgeのランキングを配列にしたものが格納されているはずです。

beet-aizu commented 4 years ago

できました！ありがとうございます！