Power Automate 実行履歴の一覧表をスクレイピングする方法

Power Automate を利用していて、実行履歴の一覧表に表示される内容を Ctrl + C といった操作でコピーすることができないことについて前々から気になっていました。

例えば、以下のような表。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260552/ebd2fc76-9a73-adc0-dd91-3aa013916405.png)

また、Power Apps 経由で実行されるフローの場合、入力パラメータも表示可能ですが、これもコピーできませんでした。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260552/2a0d8c48-1ec9-a2d5-875e-c22ff4cf0d8b.png)

もちろん、CSV 形式でダウンロードすればより詳細な情報を取得できます。しかし、入力パラメータをコピーするには、CSV 内の JSON オブジェクトを解析する必要があるうえ、さらに取得できる実行履歴は上位 100 件までという制限があります。

「今、画面に表示されている内容をそのまま取得できれば十分」という場合もあるでしょう。

そこで、画面上に表示されている実行履歴情報をスクレイピングし、ローカルに保存するための JavaScript コードを用意しました。以下にコードを記載します。

``` JavaScript
// Power Automate の実行履歴をスクレイピングしてローカル存する
(function(){

    // 文字列をダウンロードする
    function downloadTextFile(filename, text) {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', filename);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    }

    // メイン処理
    const main = function (outputAs) {

        // 変数
        let i = 0;
        let j = 0;
        let colData = [];
        let obj = {};
        let headerArray = []; // ヘッダー情報
        let bodyArray = []; // ボディ情報
        let jsonArray = []; // JSON形式で出力する場合の出力データ
        let csvContent = ''; // CSV形式で出力する場合の出力データ

        // ヘッダー情報を取得する
        document.querySelectorAll('[data-automationid="ColumnsHeaderColumn"]').forEach(headerCell => {
            headerArray.push(headerCell.innerText.split('\n').join('').split('').join('').split('').join('').split('').join(''));
        });
        console.log('ヘッダー情報', headerArray);

        // ボディ情報を取得する
        document.querySelectorAll('[data-automationid="ListCell"]').forEach(row => {
            colData = [];
            row.querySelectorAll('[data-automationid="DetailsRowCell"]').forEach(col => {
                colData.push(col.innerText);
            });
            bodyArray.push(colData);
        });
        console.log('ボディ情報', bodyArray);

        // 出力する
        if (outputAs === 'json') {
            // JSON で出力する場合
            // ヘッダー情報とボディ情報を組み合わせて JSON 形式のオブジェクトを作成する
            for (i = 0; i < bodyArray.length; i++) {
                obj = {};
                for (j = 0; j < headerArray.length; j++) {
                    obj[(headerArray[j])] = bodyArray[i][j];
                };
                jsonArray[jsonArray.length] = obj;
            };
            // コンソール出力
            console.log('取得結果');
            console.table(jsonArray);
            // ローカルに保存する
            downloadTextFile('実行履歴.json', JSON.stringify(jsonArray, null, 4));
        } else if (outputAs === 'csv') {
            // CSV で出力する場合
            // ヘッダーの内容をダブルクオーテーションで囲む (セル内改行に対応するため)
            for (i = 0; i < headerArray.length; i++) {
                headerArray[i] = '"' + headerArray[i] + '"';
                for (j = 0; j < headerArray[i].length; j++) {
                    headerArray[i] = headerArray[i].split('\n').join('');
                }
            }
            // ボディの内容をダブルクオーテーションで囲む (セル内改行に対応するため)
            for (i = 0; i < bodyArray.length; i++) {
                for (j = 0; j < bodyArray[i].length; j++) {
                    bodyArray[i][j] = '"' + bodyArray[i][j] + '"';
                }
            }
            // ヘッダーとボディを結合して CSV 形式の文字列を作成する
            csvContent = headerArray.join(',') + '\n' + bodyArray.join('\n');
            // コンソール出力
            console.log(csvContent);
            // ローカルに保存する
            downloadTextFile('実行履歴.csv', csvContent);
        }
    };

    // 実行する: 引数は 'json' もしくは 'csv'
    main('json');

})();
```

## JavaScript コードを使う手順

### 1. Power Automate の実行履歴画面を開く

Power Automate フローの概要ページで「すべての実行」（下の画像の赤枠部分）を選択し、実行履歴一覧を表示します。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260552/f6fc6b53-7ace-65c8-ced8-431412cf7446.png)



### 2. ブラウザの開発ツールを開く

使用しているブラウザの開発ツールを起動します。

開発ツールの使い方：
- Chrome の場合<br>https://qiita.com/masaa0802/items/04a928a9558711d49ea1
- Edge の場合<br>https://learn.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/overview
- Firefox の場合<br>https://developer.mozilla.org/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools
- Safari (Mac) の場合<br>https://info-con.co.jp/tips/mac-005_safari-developer-tool/


### 3. 出力形式の指定
上記コードの最下部にある 
``` JavaScript
main('json')
```
の引数を任意の形式に変更します。
- 'json': JSON 形式で出力
- 'csv': CSV 形式で出力（画面上のあらゆるデータをダブルクォーテーションで囲みます）


### 4. コードをコンソールで実行

開発ツールのコンソールに上記コードをすべてコピー＆ペーストし、[Enter] キーを押して実行します。
実行後、ダウンロードウィンドウが表示されるので、任意の保存場所・ファイル名を指定して保存してください。

## 注意点

- 上に記載したコードは 2024年12月24日に動作確認したものですので、今後 Power Automate の画面構成が変更されるなどで動作できなくなる可能性があります
- 出力されるファイルは UTF-8 でエンコードされています。そのため、Excel で直接開くと文字化けする可能性があります。開く際には、UTF-8 から Shift_JISなど他の文字コードに変換するか、Power Query を用いてインポートするなどすることをおすすめします