ActiveReportsJSとSharePoint Onlineで作る帳票システム（2）

// MSAL設定オブジェクト  
const msalConfig = {  
    auth: {  
        clientId: 'your-clientid', // ここにEntra管理センターで取得したクライアントIDを入力  
        authority: 'your-tenant-id', // ここにテナントIDを入力  
        redirectUri: location.origin  
    }  
};  
  
// MSALインスタンスの作成  
const msalInstance = new msal.PublicClientApplication(msalConfig);  
  
// ログイン要求の設定  
const loginRequest = {  
    scopes: ["User.Read", "Sites.Read.All"] // 必要なスコープを指定  
};  
  
/**  
 * アクセストークンを取得する非同期関数。  
 * @returns {Promise<string>} アクセストークンを返す。  
 * @throws {Error} ユーザーがログインしていない場合やトークン取得に失敗した場合。  
 */  
async function getAccessToken() {  
    const activeAccount = msalInstance.getActiveAccount();  
    if (!activeAccount) {  
        // アクティブアカウントがない場合、セッションストレージから取得を試みる  
        const accounts = msalInstance.getAllAccounts();  
        if (accounts.length > 0) {  
            msalInstance.setActiveAccount(accounts[0]);  
        } else {  
            // アクティブアカウントがない場合、リダイレクトによるログインを開始  
            await msalInstance.loginRedirect(loginRequest);  
            throw new Error("ユーザーがログインしていません。リダイレクトによるログインが開始されました。");  
        }  
    }  
  
    try {  
        const response = await msalInstance.acquireTokenSilent({  
            ...loginRequest,  
            account: msalInstance.getActiveAccount()  
        });  
        return response.accessToken;  
    } catch (error) {  
        console.error('サイレントトークン取得エラー:', error);  
        // トークン取得エラーが発生した場合、リダイレクトによるログインを開始  
        if (error instanceof msal.InteractionRequiredAuthError) {  
            await msalInstance.loginRedirect(loginRequest);  
        }  
        throw new Error("サイレントトークン取得に失敗しました。リダイレクトによるログインが開始されました。");  
    }  
}  
  
/**  
 * リダイレクト後の認証結果を処理する関数。  
 * @returns {Promise<void>}  
 */  
function handleRedirect() {  
    return msalInstance.handleRedirectPromise().then(response => {  
        if (response !== null) {  
            msalInstance.setActiveAccount(response.account);  
        }  
        // URLをクリーンアップ  
        if (window.history.replaceState) {  
            const cleanUrl = window.location.origin + window.location.pathname;  
            window.history.replaceState(null, null, cleanUrl);  
        }  
    }).catch(error => {  
        console.error('認証エラー:', error);  
        document.getElementById('result').textContent = `認証エラー: ${error.message}`;  
    });  
}  
  
/**  
 * ページロード時にアクティブアカウントを設定する関数。  
 */  
function setActiveAccountOnLoad() {  
    if (msalInstance.getAllAccounts().length > 0) {  
        msalInstance.setActiveAccount(msalInstance.getAllAccounts()[0]);  
    }  
}  
  
// 関数とインスタンスのエクスポート  
export { getAccessToken, handleRedirect, setActiveAccountOnLoad, msalInstance };  

import { getAccessToken, handleRedirect, setActiveAccountOnLoad, msalInstance } from './auth.js';  
const siteId = 'your-site-id'; // ここにサイトIDを入力  
const driveId = 'your-drive-id'; // ここにドライブIDを入力  
const folderId = 'your-folder-id'; // ここにフォルダーIDを入力  

/**  
 * SharePointフォルダ内のファイルリストを取得する非同期関数。  
 * @returns {Array} .rdlx-jsonファイルのリストを返す。  
 */  
async function getFileList() {  
    const accessToken = await getAccessToken();  
    const endpoint = `https://graph.microsoft.com/v1.0/sites/${siteId}/drives/${driveId}/items/${folderId}/children`;  
    const response = await fetch(endpoint, {  
        headers: {  
            'Authorization': `Bearer ${accessToken}`  
        }  
    });  
    const data = await response.json();  
    return data.value.filter(item => item.name.endsWith('.rdlx-json'));  
}  

/**  
 * ファイルリストを作成し、クリックイベントを設定する関数。  
 * @param {Array} files - ファイルオブジェクトのリスト。  
 */  
function createFileList(files) {  
    const fileList = document.getElementById('file-list');  
    fileList.innerHTML = '';  
    files.forEach(file => {  
        const listItem = document.createElement('div');  
        listItem.textContent = file.name;  
        listItem.style.cursor = 'pointer';  
        listItem.onclick = () => previewReport(file.id);  //レポート表示処理
        fileList.appendChild(listItem);  
    });  
}  

/**  
 * 指定されたファイルIDに基づいてファイルの内容を取得する非同期関数。  
 * @param {string} fileId - 取得するファイルのID。  
 * @returns {Object} ファイルの内容をJSON形式で返す。  
 */  
async function fetchFileContent(fileId) {  
    const accessToken = await getAccessToken();  
    const endpoint = `https://graph.microsoft.com/v1.0/sites/${siteId}/drives/${driveId}/items/${fileId}/content`;  
    const response = await fetch(endpoint, {  
        headers: {  
            'Authorization': `Bearer ${accessToken}`  
        }  
    });  
    console.log(response);  
    if (!response.ok) {  
        throw new Error('ファイルの取得に失敗しました');  
    }  
    return await response.json();  
}  

/**  
 * 指定されたファイルIDに基づいてレポートをプレビューする非同期関数。  
 * @param {string} fileId - プレビューするファイルのID。  
 */  
async function previewReport(fileId) {  
    try {  
        const fileContent = await fetchFileContent(fileId);  
        const viewerHost = document.getElementById("viewer-host");  
        const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer(viewerHost, { language: "ja" });  
        MESCIUS.ActiveReportsJS.Core.setLicenseKey("YOUR LICENSE KEY GOES HERE"); //ライセンスキーを設定します

        const accessToken = await getAccessToken();  
        viewer.open(fileContent, {  
            ReportParams: [  
                { Name: "Bearer", Value: accessToken }  
            ]  
        });  
    } catch (error) {  
        console.error('レポート表示エラー:', error);  
        document.getElementById('result').textContent = `レポート表示エラー: ${error.message}`;  
    }  
}  

<!DOCTYPE html>  
<html lang="ja">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>SharePoint Online 帳票システム</title>  
    <!-- ActiveReportsJS CSS/jsライブラリの読込 -->  
    <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/5.0.3/styles/ar-js-ui.css" />  
    <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/5.0.3/styles/ar-js-viewer.css" />  
    <script type="text/javascript" src="https://cdn.grapecity.com/activereportsjs/5.0.3/dist/ar-js-core.js"></script>  
    <script type="text/javascript" src="https://cdn.grapecity.com/activereportsjs/5.0.3/dist/ar-js-viewer.js"></script>  
    <script type="text/javascript" src="https://cdn.grapecity.com/activereportsjs/5.0.3/dist/ar-js-xlsx.js"></script>  
    <script type="text/javascript" src="https://cdn.grapecity.com/activereportsjs/5.0.3/dist/ar-js-html.js"></script>  
    <script type="text/javascript" src="https://cdn.grapecity.com/activereportsjs/5.0.3/dist/ar-js-tabular-data.js"></script>  
    <script type="text/javascript" src="https://cdn.grapecity.com/activereportsjs/5.0.3/dist/locales/ar-js-locales.js"></script>  
    <!-- MSAL.jsの読み込み -->  
    <script src="https://alcdn.msauth.net/browser/2.14.2/js/msal-browser.min.js"></script>
    <!-- 認証用スクリプトの読み込み -->  
    <script type="module" src="auth.js"></script>  
    <style>  
        #container {  
            display: flex;  
        }  
        #file-list {  
            width: 200px;  
            border-right: 1px solid #ccc;  
            padding: 10px;  
            overflow-y: auto;  
        }  
        #viewer-host {  
            flex-grow: 1;  
            height: 90vh;  
            padding: 10px;  
        }  
    </style>  
</head>  
<body>  
    <h1>ActiveReportsJS x SharePoint Online Lists</h1>  
    <pre id="result"></pre>  
    <div id="container">  
        <div id="file-list"></div>  
        <div id="viewer-host"></div>  
    </div>  
    <script type="module">  
        import { getAccessToken, handleRedirect, setActiveAccountOnLoad, msalInstance } from './auth.js';  
        const siteId = 'your-site-id'; // ここにサイトIDを入力  
        const driveId = 'your-drive-id'; // ここにドライブIDを入力  
        const folderId = 'your-folder-id'; // ここにフォルダーIDを入力  

  
        /**  
         * SharePointフォルダ内のファイルリストを取得する非同期関数。  
         * @returns {Array} .rdlx-jsonファイルのリストを返す。  
         */  
        async function getFileList() {  
            const accessToken = await getAccessToken();  
            const endpoint = `https://graph.microsoft.com/v1.0/sites/${siteId}/drives/${driveId}/items/${folderId}/children`;  
            const response = await fetch(endpoint, {  
                headers: {  
                    'Authorization': `Bearer ${accessToken}`  
                }  
            });  
            const data = await response.json();  
            return data.value.filter(item => item.name.endsWith('.rdlx-json'));  
        }  

          /**  
         * ファイルリストを作成し、クリックイベントを設定する関数。  
         * @param {Array} files - ファイルオブジェクトのリスト。  
         */  
         function createFileList(files) {  
            const fileList = document.getElementById('file-list');  
            fileList.innerHTML = '';  
            files.forEach(file => {  
                const listItem = document.createElement('div');  
                listItem.textContent = file.name;  
                listItem.style.cursor = 'pointer';  
                listItem.onclick = () => previewReport(file.id);  
                fileList.appendChild(listItem);  
            });  
        }  

        /**  
         * 指定されたファイルIDに基づいてファイルの内容を取得する非同期関数。  
         * @param {string} fileId - 取得するファイルのID。  
         * @returns {Object} ファイルの内容をJSON形式で返す。  
         */  
        async function fetchFileContent(fileId) {  
            const accessToken = await getAccessToken();  
            const endpoint = `https://graph.microsoft.com/v1.0/sites/${siteId}/drives/${driveId}/items/${fileId}/content`;  
            const response = await fetch(endpoint, {  
                headers: {  
                    'Authorization': `Bearer ${accessToken}`  
                }  
            });  
            console.log(response);  
            if (!response.ok) {  
                throw new Error('ファイルの取得に失敗しました');  
            }  
            return await response.json();  
        }  
  
        /**  
         * 指定されたファイルIDに基づいてレポートをプレビューする非同期関数。  
         * @param {string} fileId - プレビューするファイルのID。  
         */  
        async function previewReport(fileId) {  
            try {  
                const fileContent = await fetchFileContent(fileId);  
                const viewerHost = document.getElementById("viewer-host");  
                const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer(viewerHost, { language: "ja" });  
                MESCIUS.ActiveReportsJS.Core.setLicenseKey("YOUR LICENSE KEY GOES HERE"); //ライセンスキーを設定します

                const accessToken = await getAccessToken();  
                viewer.open(fileContent, {  
                    ReportParams: [  
                        { Name: "Bearer", Value: accessToken }  
                    ]  
                });  
            } catch (error) {  
                console.error('レポート表示エラー:', error);  
                document.getElementById('result').textContent = `レポート表示エラー: ${error.message}`;  
            }  
        }  
 
        /**  
         * ページロード時にファイルリストを取得して表示する非同期関数。  
         */  
        window.onload = async () => {  
            setActiveAccountOnLoad();  
            handleRedirect().then(async () => {  
                try {  
                    const files = await getFileList();  
                    createFileList(files);  
                } catch (error) {  
                    console.error('ファイルリスト取得エラー:', error);  
                    document.getElementById('result').textContent = `ファイルリスト取得エラー: ${error.message}`;  
                }  
            });  
        };  
    </script>  
</body>  
</html>