【ショートカットアプリ】WebページでJavasSriptを実行のサンプルコードはどんな処理？

“WebページでJavasSriptを実行”の初期コードの処理内容

iOSを搭載したiPhoneに初めからインストールされている「ショートカット」アプリは大変便利です。今やインターネット上にはコピペするだけで使える“ショートカットレシピ”と呼ばれる便利なプログラムコードが至る所で公開されているほどです。

ショートカット

Apple無料posted withアプリーチ

このショートカットアプリには、SafariからWebページの情報をゴニョゴニョしたい時に使用する“WebページでJavasSriptを実行”というアクションがあります。

WebページでJavaScriptを実行のアクション

この“WebページでJavasSriptを実行”には初めからサンプルコードが書かれているのですが、サンプルプログラムの処理内容が気になったので今回記事にしました。

毎回すぐに消して新しいコードをコピペしたり、書き込んだりするけど、元からあるプログラムは一体何の処理を行うためのものなのか？こちらを詳しく解説します。

では早速参りましょう・ｗ・

サンプルコードはWebページからURLとリンク名を取得するプログラム

「ショートカット」アプリのアクションで“WebページでJavasSriptを実行”を選んだ時に、初めから書かれているコードが以下です。

var result = [];
// Get all links from the page
var elements = document.querySelectorAll("a");
for (let element of elements) {
    result.push({
        "url": element.href,
        "text": element.innerText
    });
}

// Call completion to finish
completion(result);

コメント部分には「// Get all links from the page」と書かれていますが、処理内容はこのままで、このサンプルコードはショートカットを実行したWebページ上にある全てのリンクを抽出するプログラムです。

ただし、このサンプルコードをこのまま実行しても結果が入っているresultをどう処理するか？のコードが書かれていないので何も起こりません。

実行時の確認通知は出る

一応アクション実行時の確認通知は出るのですが、何も起きない感じです。

コードの解説

結構シンプルなものなのでコメントアウトで補足を入れる形でコードを解説します。

//配列オブジェクトresultの初期化
var result = [];
// Get all links from the page（ページからすべてのリンクを取得する）

//実行したページ上のa要素をすべて取得してelementsに格納する
var elements = document.querySelectorAll("a");

//for ofループで取得したリンクの数だけ処理を回す
for (let element of elements) {

//配列オブジェクトにurlとtextを順番に格納する
    result.push({
        "url": element.href,
        "text": element.innerText
    });
}

// Call completion to finish（完了ハンドラの呼び出し：アクションからデータを返す）
completion(result);

まずdocument.querySelectorAll("a");でHTMLのリンクタグに使用されるa要素を、JavaScriptを実行したページ上から全て取得します。
続いて、for (let element of elements)で取得した要素の数だけurlとtextに内容をpushで格納していくという感じですね。

使用されている関数はメジャーなものなので詳細は調べればすぐ出ます。

最後のcompletion(result);の部分ですが、これは“WebページでJavasSriptを実行”のアクションからデータを返すための関数のようで、JavaScriptとショートカットAppの値のやり取りに必要なもののようです。

サンプルコードが取得する値は全てのa要素のURLとリンク名

実際、a要素を取得してどのような値がurlとtextに入っているか気になるところです。

ただ、先ほども少し触れた通りで“WebページでJavasSriptを実行”のサンプルコードには取得したリンクをどうするか？の処理が書かれていないので、このまま実行しても何も起きません。

そこで実際に取得した値を確認するためにalert()で表示してみます。
取得した値は配列オブジェクトなのでそのままでは表示できませんでした…ので、JSON.stringify(result);でアラートに表示してみました。

alert(JSON.stringify(result));を追記

completion(result);の１つ前の行にalert(JSON.stringify(result));を追加します。
このまま共有シートから値を受け取るように設定しなおして実行してみましょう。

実際にリンクを取得、表示した結果

実行すると「JavaScriptタイムアウト」というエラーが出ましたが、途中まで？の値は取得できました。調べるとalertのような同期関数では制限時間内（２秒？）に処理が終わらないとタイムアウトが出るようですが、今回は問題ないので無視します。

“WebページでJavasSriptを実行”のサンプルコードで取得した値は以下です。

サンプルコードで取得したオブジェクトの値

当サイトのトップページで“WebページでJavasSriptを実行”を実行したところ、上記のような値が取れました。
１つめの配列オブジェクトにはページ上部のサイトタイトル“ソロ学”と、そのリンクURLである“https://sologaku.com/”が入っていました。

続く配列オブジェクトの中身はどうやらカテゴリーのa要素のようです。
WordPressってサイドバーからNodeを作成するんですかね？

まぁ“WebページでJavasSriptを実行”を実行して取得できる値はこんな感じでした。

まとめ

以上「ショートカット」アプリの“WebページでJavasSriptを実行”というアクションに初めから書かれているサンプルコードの解説と動作についてでした。

サンプルコードは完成しているものではなく、その後にresultをどう使うかを指定する必要があるという事ですね。サンプルコードをそのままを使う人は少ないと思いますが、何かの参考になれば幸いです。