次の方法で共有

クラウド フローと Power Pages で画像ライブラリを作成する方法

この記事では、Power Pages を作成し、Power Automate クラウド フローを使用して画像ライブラリ Web サイトを設定するための詳細な手順について説明します。 この Web サイトを使用すると、認証されたユーザーは画像のギャラリーを効果的に管理および整理できます。

前提条件

このコースを完了するには、Power Automate と Power Pages 環境が必要です。 ライセンスがない場合は、Power Pages および Power Automate の試用版にサインアップすることができます。

ステップ 1: クラウド フローを作成する

画像更新フロー

このステップでは、Power Pages トリガーを使用してフローを作成し、OneDrive を使用して画像を保存します。

  1. Power Pages にサインインします。

  2. サイト + 編集 を選択します。

  3. アプリの統合で 設定、クラウド フロー の順に移動します。

  4. + 新しいフローの作成を選択します。

  5. Power Pages を検索し、Power Pages がフローを呼び出すとき トリガーを選択します。

  6. + 入力の追加を選択します。 

    1. テキスト を選択します。

    2. 名前 画像名 を追加します。

    3. + 入力の追加を選択します。 

    4. ファイル を選択します。 

    5. 名前 画像の内容 を追加します。

  7. + 新しいステップ を選択します。 

  8. OneDrive を検索し、ファイルの作成 アクションを選択します。  

  9. ファイルの作成 アクションで次の値を入力します:

    1. フォルダー パス / を入力し、動的コンテンツから ユーザーID を選択します。

    注意

    忘れずに先頭に '/' を付けてください

    1. ファイルの名前には、動的コンテンツから 画像名 を選択します。

    2. ファイルのコンテンツには、動的コンテンツから 画像コンテンツ を選択します。

  10. + 新しいステップ を選択します。 

  11. OneDrive を検索し、共有リンクの作成 アクションを選択します。

  12. 共有リンクの作成 アクションで、次の値を入力します:

    1. ファイル ID: 動的コンテンツから

    2. リンクの種類: 動的コンテンツからの表示

  13. + 新しいステップ を選択します。 

  14. Power Pages を検索し、Power Pages に値を返す アクションを選択します。

  15. Power Pages に値を返すアクションに、次の値を入力します:

    1. + 出力を追加 を選択します。

    2. 出力 テキスト の種類を選択します。

    3. 名前: 画像値。

    4. 画像値: { "Id":"< Id from the dynamic content>", "URL":"<Web URL from the dynamic content>"}

    5. フロー名: 画像アップロード フロー。

  16. 保存 を選びます。

  17. + ロールの追加 を選択します。

  18. 認証されたユーザー を選択します。

  19. + 追加を選択します。

  20. フロー URL を後で使用するためにコピーします。

画像リストの取得フロー

画像フローを作成したら、このセクションの手順に従ってフローを表示します。

  1. Power Pages にサインインします。

  2. サイト + 編集 を選択します。

  3. アプリの統合で 設定、クラウド フロー の順に移動します。

  4. クラウド フローの追加 + を選択します。

  5. + 新しいフローの作成を選択します。

  6. Power Pages を検索し、Power Pages がフローを呼び出すとき トリガーを選択します。

  7. + 新しいステップ を選択します。

  8. フォルダー内の OneDrive > ファイルを検索をパスで検索する、次の値を入力します:

    • 検索クエリ: *
    • フォルダー パス: / + 動的コンテンツから ユーザーID を選択
    • ファイル検索モード: パターン

  9. + 新しいステップ を選択します。

  10. 変数 を検索して、変数を初期化する アクションを選択します。

  11. 次の値を入力します:

    1. 名前: 画像配列

    2. 種類: 配列

  12. + 新しいステップ を選択します。

  13. 変数 を検索して 変数を初期化する アクションを選択します。

  14. 次の値を入力します:

    1. 名前: 画像リスト

    2. 型: 文字列

  15. + 新しいステップ を選択します。

  16. コントロール を検索して、それぞれに適用 アクションを選択します。

  17. 次の値を入力します:

    1. 動的コンテンツから body を選択します。

  18. アクションの追加を選択します。

  19. OneDrive を検索し、共有リンクの作成 アクションを選択します。

  20. 共有リンクの作成 アクションで、次の値を入力します:

    1. ファイル ID: 動的コンテンツから

    2. リンクの種類: 動的コンテンツからの表示

  21. アクションの追加を選択します。

  22. 変数 を検索して、配列変数に追加 アクションを選択します。

  23. 次の値を入力します。

    1. 名前: 画像配列

    2. 値:
      { "Id":"<Id from the dynamic content>", "URL":"<Web URL from the dynamic content>" }

  24. + 新しいステップ を選択します。

  25. 変数 を検索して、変数の設定 アクションを選択します。

  26. 次の値を入力します:

    1. 名前: 画像リスト

    2. 値: 画像配列

  27. + 新しいステップ を選択します。

  28. Power Pages を検索し、Power Pages に値を返す アクションを選択します。

  29. Power Pages に値を返すアクションに、以下の値を入力します:

  30. + 出力を追加 を選択します。

  31. 出力の種類として テキスト を選択し、次の値を入力します:

    1. 名前: 画像リスト。
    2. 画像リスト: 動的コンテンツから 画像リスト を選択します。

  32. フロー名を 画像リストの取得フロー として指定します。

  33. 保存 を選びます。

  34. フロー URL を後で使用するためにコピーします。

最終フローが表示されます。

画像を削除する

画像リスト フローを構築したら、このセクションで説明する手順に従って、画像を削除するためのトリガーを作成します。

  1. Power Pages にサインインします。

  2. サイト + 編集 を選択します。

  3. アプリの統合で 設定 と クラウド フロー に移動します。

  4. クラウド フローの追加 + を選択します。

  5. + 新しいフローの作成を選択します。

  6. Power Pages を検索し、Power Pages がフローを呼び出すとき トリガーを選択します。

  7. + 入力の追加を選択します。

  8. テキスト を選択します。

  9. 名前 Id を追加します。

  10. + 新しいステップ を選択します。

  11. OneDrive を検索して、ファイルの削除 トリガーを選択します。

  12. ファイル を更新し、動的コンテンツから Id を選択します。

  13. + 新しいステップ を選択します。

  14. Power Pages を検索して、Power Pages に値を返す アクション、+ 出力の追加 の順に選択します。

  15. Power Pages に値を返すアクションに、次の値を入力します:

    1. 出力の種類: はい / いいえ

    2. 名前: ステータス

    3. ステータス: True

    4. フロー名: 画像削除フロー

  16. 保存 を選びます。

  17. + ロールの追加 を選択します。

  18. 認証されたユーザー を選択します。

  19. 追加 ボタンを選択します。

  20. フロー URL を後で使用するためにコピーします。

ステップ 2: 画像ライブラリを管理するページを作成する

フローを作成し、認証された Web ロールにアクセスできるようにした後、JavaScript を使用してコントロール イベントから呼び出すことができます。

  1. Pages のワークスペースに移動します。

  2. + ページ を選択します。

  3. ページ名に 移動 と入力します。

  4. 移動 ページの横にある ... を選択します。

  5. ページ設定 を選択し、次に アクセス許可 を選択します。

    1. このページを表示できるユーザーを選択します を選択します。

    2. ドロップダウンから、認証されたユーザー ロールを選択します。

  6. OK を選択します。

  7. コードの編集 を選択して、Visual Studio Code を開きます。

  8. 次のコードを貼り付けます:

    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" /> 
<style> div.image-gallery {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 100px;
        gap: 36px;
        width: 840px;
}
    div.image-gallery-header {
        font-family: Helvetica;
        font-size: 32px;
        font-weight: 700;
        line-height: 32px;
        letter-spacing: 0px;
        color: #252729;
}
    div.subHeader {
        font-family: Segoe UI;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0px;
        color: #323130;
}
    div.subHeaderLabel {
        font-family: Segoe UI;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 0px;
        color: #605E5C;
}
    .image-gallery button {
        margin-top: 5px;
        font-family: 'Segoe UI';
        padding: 8px 16px;
        font-size: 16px;
        background-color: white;
        color: #8A8886;
        border: 1px solid #8A8886;
        border-radius: 4px;
        cursor: pointer;
        outline: none;
}
    div.image-gallery-list {
        margin-top: 0px;
}
    div.date-section {
        font-family: Segoe UI Variable;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0em;
        color: #000000E4;
}
    div.image-list {
        width: 1024px;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 10px;
        flex-wrap:wrap;
}
    div.image-1 {
        margin-right: 10px;
        display: flex;
        margin-top: 10px;
        margin-bottom: 20px;
}
    .image-list img {
        width: 268px;
        height: 289px;
        border-radius: 4px;
}
    button.image-delete {
        background-color: #FFFFFF;
        width: 32px;
        height: 32px;
        position: relative;
        right: 40px;
        padding-top: 4px;
}
    .image-delete i {
        display: flex;
        justify-content: center;
}
    div.status-message {
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        text-align: center;
}
</style> 

<div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;"> 
    <div class="container" style="display: flex; flex-wrap: wrap;"> 
        <div class="col-md-12 columnBlockLayout image-gallery" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 310px; word-break: break-word; padding: 0 120px; margin: 60px 0px;"> 
            <div class="image-gallery-header"> 
                Your travel photos 
            </div> 
            <div> 
                <div class="subHeader"> Upload file 
                </div> 
                <div class="subHeaderLabel"> 
                    You can upload JPG, GIF or PNG file 
                </div> 
                <form id="uploadForm"> 
                    <p> 
                        <input type="file" id="fileInput" style="display: none;" accept="image/x-png,image/gif,image/jpeg" /> 
                        <button type="submit"> 
                            <i class="ms-Icon ms-Icon--Upload" aria-hidden="true"></i> Upload 
                        </button> 
                    </p> 
                </form> 
            </div> 
            <div class="status-message" id="statusMessage"style="display: none;"> 
                Uploading your image... Please wait while we process your file. 
            </div> 
            <div class="image-gallery-list"> 
                <div id ="container" class="image-list">
                </div> 
            </div> 
        </div> 
    </div> 
</div> 
<script> 
    var _getImageListFlowURL = "<Get Image List Flow URL>";
    var _uploadImageFlowURL = "<Upload Image Flow URL>";
    var _deleteImageFlowURL = "<Delete Image Flow URL>";
    function createImageElement(element){
        var div1 = document.createElement('div');
        div1.className = "image-1";
         var img = document.createElement('img');
        img.src = element["URL"];
        div1.appendChild(img);
        var button1 = document.createElement('Button');
        button1.type ="submit";
        button1.className = "image-delete";
        button1.data = element["Id"];
        var i = document.createElement('i');
        i.className = "ms-Icon ms-Icon--Delete"; 
        button1.appendChild(i);
        div1.appendChild(button1);
        button1.addEventListener('click', function(){
            this.parentElement.remove();
            var data = {
        }
        ;
            data["Id"] = element["Id"];
            var payload = {
        }
        ;
            payload.eventData = JSON.stringify(data);
            shell .ajaxSafePost({
                type: "POST", url: _deleteImageFlowURL, data: payload 
        }
        ) .done(function (response) {
                const result = JSON.parse(response);
        }
        ) .fail(function () {
                console.log('Error');
        }
        );
    }
    );
        return div1;
}
    document.addEventListener("DOMContentLoaded", () => {
        var data = {
    }
    ;
        var payload = {
    }
    ;
        payload.eventData = JSON.stringify(data);
        shell .ajaxSafePost({
            type: "POST", url: _getImageListFlowURL, data: payload
    }
    ) .done(function (response) {
            const result = JSON.parse(response);
            var imageList =JSON.parse(result['image_list']);
            var imageContainer = document.getElementById("container");
            for (let index = 0;
            index < imageList.length;
            index++) {
                imageContainer.appendChild(createImageElement(imageList[index]));
        }
    }
    ) .fail(function () {
            console.log('Error');
    }
    );
}
);
    document.getElementById("uploadForm").addEventListener("submit", function (event) {
        event.preventDefault();
        var imageInput = document.getElementById("fileInput");
        imageInput.onchange = _ => {
            let selectedFile = imageInput.files[0];
            UploadImageToBlob(selectedFile);
    }
        function UploadImageToBlob(inputFile) {
            var reader = new FileReader();
            reader.readAsDataURL(inputFile);
            reader.onload = function () {
                document.getElementById("statusMessage").style.display="block";
                 var file = {
                }
                ;
                 file.name = inputFile.name;
                 file.contentBytes = reader.result.split(',')[1];
                 var data = {
                }
                ;
                 data["Image Name"] = inputFile.name;
                 data["Image Content"] = file;
                 var payload = {
                }
                ;
                 payload.eventData = JSON.stringify(data);
                 shell .ajaxSafePost({
                     type: "POST", url: _uploadImageFlowURL, data: payload 
            }
            ) .done(function (response) {
                 const result = JSON.parse(response);
                 var imageList = JSON.parse(result['image_value']);
                 var imageContainer = document.getElementById("container");
                 imageContainer.prepend(createImageElement(imageList));
                 document.getElementById("statusMessage").style.display="none";
            }
            ) .fail(function () {
                 document.getElementById("statusMessage").style.display="none";
                 console.log('Error');
            }
            );
        }
         reader.onerror = function (error) {
             console.log('Error: ', error);
        }
        ;
    }
     imageInput.click();
}
);
</script>

  9. URL を以前にコピーしたものに置き換えます。

  10. CTRL + S を選択してコードを保存します。

  11. デザイン スタジオで 同期 を選択します。

ステップ 3: フロー統合をテストする

フロー統合機能をテストするには:

  1. プレビュー を選択してサイトを開きます。

  2. サイトにサインインします。

  3. アップロード ボタンの選択。

  4. 画像を選択してください。

  5. 開く を選択します。