← ブログへ戻る

最初の g.* スクリプトを書く

· 1 分で読めます ·
tutorial

Guida をインストールし、いくつかのページを開き、設定を少し見たとします。次に何をすればよいでしょうか。

この記事では、最初の実用的なスクリプトを書きます。ページへ移動し、データを取り出し、役に立つ場所へ保存するスクリプトです。

JavaScript を少しでも書いたことがあれば自然に読めます。未経験でも、API は小さな部品から覚えられます。

スクリプトエディターを開く

Ctrl+N を押すか、File > New Script を開きます。空のエディタータブが表示され、IntelliSense が使える状態になります。g. と入力すると、g.store、g.queue、g.search などに分かれた API が表示されます。

多くの JavaScript スクリプトは次の形にできます。

async function main() {
  // ここにコードを書く
}


await main();

async が必要なのは、多くの g.* メソッドが live browser とやり取りするためです。エディターで F5 を押すと実行できます。

移動して待つ

まず Hacker News を開き、DOM が落ち着くまで待ちます。

async function main() {
  await g.nav.navigateToUrl("https://news.ycombinator.com");
  await g.dom.waitForDomStable();
}


await main();

g.nav.navigateToUrl() はアクティブなブラウザータブへ URL を読み込ませます。g.dom.waitForDomStable() は DOM の変化が止まるまで待ちます。遅れて表示される要素や spinner があるページでは、この待機が重要です。

g.* メソッドの考え方

JavaScript では、g.* メソッドは結果を直接返し、失敗時には例外を投げます。必要に応じて try/catch を使います。

try {
  const elements = await g.dom.getElements(".item", ["innerText"]);
  g.log("見つかった項目数: " + elements.length);
} catch (e) {
  g.log("項目を見つけられませんでした: " + e.message);
  return;
}

g.log() は Console ペインへメッセージを書き込みます。

ページからデータを取り出す

Hacker News のタイトルとリンクを取得してみます。

async function main() {
  await g.nav.navigateToUrl("https://news.ycombinator.com");
  await g.dom.waitForDomStable();


  const items = await g.dom.getElements(
    ".titleline > a",
    ["innerText", "href"]
  );


  g.log("記事数: " + items.length);


  for (const item of items) {
    g.log(item.innerText);
  }
}


await main();

g.dom.getElements(selector, attributes) は DOM を問い合わせ、指定した属性を含むオブジェクトの配列を返します。document.querySelectorAll() に似ていますが、DOM node ではなく構造化データとして返る点が違います。

ワークスペースに保存する

結果を後で使うには、ワークスペースストアへ保存します。

async function main() {
  await g.nav.navigateToUrl("https://news.ycombinator.com");
  await g.dom.waitForDomStable();


  const items = await g.dom.getElements(".titleline > a", ["innerText", "href"]);


  for (const item of items) {
    const key = item.href;
    g.store.put("hn-stories", key, {
      title: item.innerText,
      href: item.href,
      capturedAt: new Date().toISOString(),
    });
  }


  g.log("保存しました: " + items.length + " 件");
}


await main();

この時点で、スクリプトは単なるブラウザー操作ではなく、再利用できる小さなデータパイプラインになります。

次に試すこと