PowerApps でオフライン対応アプリを開発するDevelop offline-capable apps with PowerApps

モバイル アプリ開発者として直面する最も一般的なシナリオは、接続が制限されている場合やまったく接続できない場合でも、ユーザーの生産性を損なわないようにすることです。One of the most common scenarios you face as a mobile app developer is enabling your users to be productive when there is limited connectivity or no connectivity at all. PowerApps には、オフライン対応アプリを開発するために役立つ機能と動作のセットがあります。PowerApps has a set of features and behaviors that help you to develop offline-capable apps. 次のことが行えます。You can:

  • オフラインのときに PowerApps モバイル アプリを起動します。Launch the PowerApps mobile app when offline.
  • 開発したアプリをオフライン時に実行します。Run apps you develop when offline.
  • Connection シグナル オブジェクトを使用して、アプリの接続状態 (オフライン、オンライン、または従量制課金接続) を判別します。Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • オフライン時の基本的なデータ ストレージで、コレクションLoadData や SaveData などの関数を使用します。Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

オフライン対応アプリを構築する方法How to build offline capable apps

オフライン シナリオで最初に検討することは、アプリがデータを操作する方法です。The first thing to think about in offline scenarios is how your apps work with data. PowerApps のアプリは、主に、一連のコネクタ を通して、SharePoint、Office 365、Common Data Service などのプラットフォームが提供するデータにアクセスします。Apps in PowerApps primarily access data through a set of connectors that the platform provides, such as SharePoint, Office 365, and the Common Data Service. RESTful エンドポイントを提供するサービスへのアプリのアクセスを可能にするカスタム コネクタを構築することもできます。You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Web API や Azure Functions などのサービスが考えられます。This could be a Web API or a service such as Azure Functions. これらのコネクタは、すべてがインターネット経由で HTTPS を使用します。つまり、ユーザーは、データやサービスが提供するその他の機能にアクセスするには、オンラインである必要があります。All these connectors use HTTPS over the Internet, which means your users must be online for them to access data and any other capabilities that a service offers.

PowerApps とコネクタ

オフライン データの処理Handling offline data

PowerApps の最も興味深い側面の 1 つは、データのフィルター処理、検索、並べ替え、集計、および操作を、データ ソースに関係なく一貫した方法で実行することを可能にする一連の機能と数式です。One of the most interesting aspects of PowerApps is its set of capabilities and formulas that enable you to filter, search, sort, aggregate, and manipulate data in a consistent way regardless of the data source. ソースは、アプリ内のメモリ内コレクションから、SharePoint リスト、SQL データベース、および Common Data Service に及びます。Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. この一貫性によって、アプリのターゲットを簡単に変更して、別のバックエンドを使用することができます。This consistency enables you to easily retarget an app to use a different backend. ここでさらに重要なのは、アプリのロジックをほとんど変更せずに、データ管理でローカル コレクションを使用できることです。More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. 実際、ローカル コレクションは、オフライン データを処理するための主要メカニズムです。In fact, local collections are the primary mechanism for handling offline data.

オフラインの Twitter アプリケーションを構築するBuilding an offline Twitter app

アプリ開発のオフラインの側面へのフォーカスを維持するために、Twitter に重点を置いた単純なシナリオを示します。To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. オフライン中に Twitter の投稿を読み、ツイートを送信することができるアプリを作成します。We'll build an app that enables you to read Twitter posts and submit tweets while being offline. アプリは、オンラインになったときに、ツイートを投稿し、ローカル データを再度読み込みます。When the app comes online, the app posts tweets and reloads the local data.

大まかに言えば、アプリは、次の動作を行います。At a high level, the app does the following:

  1. アプリの起動時 (最初の画面の OnVisible プロパティに基づきます):On app startup (based on the first screen's OnVisible property):

    • デバイスがオンラインの場合は、Twitter コネクタに直接アクセスしてデータをフェッチし、そのデータをコレクションに設定します。If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • デバイスがオフラインの場合は、LoadData を使用してローカル キャッシュ ファイルからデータを読み込みます。If the device is offline, we load the data from a local cache file using LoadData.
    • ユーザーはツイートを送信できます。オンラインの場合は Twitter に直接投稿され、ローカル キャッシュが更新されます。We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. オンラインの場合は 5 分間隔で次の操作を実行します。Every 5 minutes, if online:

    • ローカル キャッシュ内のツイートを投稿します。We post any tweets that we have in the local cache.
    • ローカル キャッシュを更新し、SaveData を使用して保存します。We refresh the local cache and save it using SaveData.

手順 1: 新しい電話アプリを作成するStep 1: Create a new phone app

  1. PowerApps Studio を開きます。Open PowerApps Studio.
  2. [新規] > [空のアプリ] > [電話レイアウト]をクリックするかタップします。Click or tap New > Blank app > Phone layout.

    空のアプリ, 電話レイアウト

手順 2: Twitter 接続を追加するStep 2: Add a Twitter connection

  1. [コンテンツ] > [データ ソース] をクリックするかタップし、[データ ソース] パネルで [データ ソースの追加] を選択します。Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. [新しい接続] をクリックするかタップし、[Twitter] を選択し、[作成] をクリックするかタップします。Click or tap New Connection , select Twitter , and click or tap Create.
  3. 資格情報を入力し、接続を作成します。Enter your credentials, and create the connection.

    Twitter 接続の追加

手順 3: アプリの起動時に LocalTweets コレクションにツイートを読み込むStep 3: Load tweets into a LocalTweets collection on app startup

アプリで Screen1OnVisible プロパティを選択し、次の数式をコピーします。Select the OnVisible property for Screen1 in the app, and copy in the following formula:

If(Connection.Connected,

    ClearCollect(LocalTweets, Twitter.SearchTweet("PowerApps", {maxResults: 100}));

    UpdateContext({statusText: "Online data"})

    ,

    LoadData(LocalTweets, "Tweets", true);

    UpdateContext({statusText: "Local data"})

);

LoadData(LocalTweetsToPost, "LocalTweets", true);

SaveData(LocalTweets, "Tweets")

ツイートを読み込むための数式

この数式は、デバイスがオンラインかどうかをチェックします。This formula checks if the device is online:

  • デバイスがオンラインの場合は、LocalTweets コレクションに最大 100 個のツイートを、検索用語 "PowerApps" 付きで読み込みます。If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • デバイスがオフラインの場合は、"Tweets" という名前のファイルからローカル キャッシュを読み込みます (使用できる場合)。If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. 高さを柔軟に変更できる新しいギャラリーを挿入します ([挿入] > [ギャラリー] > [変更可能な高さ (空)])。Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
  2. Items プロパティを LocalTweets に設定します。Set the Items property to LocalTweets.
  3. 各ツイートのデータを表示する 4 つのラベル コントロールを追加し、次の Text プロパティを設定します。Add four Label controls to display data from each tweet, and set the Text properties to:
    • ThisItem.TweetTextThisItem.TweetText
    • ThisItem.UserDetails.FullName & " @" & ThisItem.UserDetails.UserNameThisItem.UserDetails.FullName & " @" & ThisItem.UserDetails.UserName
    • "RT: " & ThisItem.RetweetCount"RT: " & ThisItem.RetweetCount
    • Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)
  4. イメージ コントロールを追加し、Image プロパティを ThisItem.UserDetails.ProfileImageUrl に設定します。Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

手順 5: 接続状態ラベルを追加するStep 5: Add a connection status label

新しいラベル コントロールを追加し、その Text プロパティを次の数式に設定します。Insert a new Label control, and set its Text property to the following formula:

If (Connection.Connected, "Connected", "Offline")

この数式は、デバイスがオンラインかどうかをチェックします。This formula checks if the device is online. オンラインの場合、ラベルのテキストは [接続中] になり、それ以外の場合は [オフライン] になります。If it is, the text of the label is "Connected", otherwise it's "Offline".

手順 6: 新しいツイートを作成するためのテキスト入力を追加するStep 6: Add a text input to compose new tweets

  1. "NewTweetTextInput" という名前の新しいテキスト入力コントロールを挿入します。Insert a new Text input control named "NewTweetTextInput".
  2. テキスト入力の Reset プロパティを resetNewTweet に設定します。Set the Reset property of the text input to resetNewTweet.

手順 7: ツイートを投稿するためのボタンを追加するStep 7: Add a button to post the tweet

  1. ボタン コントロールを追加し、Text プロパティを "Tweet" に設定します。Add a Button control, and set the Text property to "Tweet".
  2. OnSelect プロパティを次の式に設定します。Set the OnSelect property to the following formula:

    If (Connection.Connected,
    
        Twitter.Tweet("", {tweetText: NewTweetTextInput.Text}),
    
        Collect(LocalTweetsToPost, {tweetText: NewTweetTextInput.Text});
    
        SaveData(LocalTweetsToPost, "LocalTweetsToPost")
    
    );
    
    UpdateContext({resetNewTweet: true});
    
    UpdateContext({resetNewTweet: false})
    

この数式は、デバイスがオンラインかどうかをチェックします。This formula checks if the device is online:

  • デバイスがオンラインの場合、テキストはすぐにツイートされます。If the device is online, it tweets the text immediately.
  • デバイスがオフラインの場合、ツイートは LocalTweetsToPost コレクション内にキャプチャされてアプリに保存します。If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

その後、数式は、テキスト ボックス内のテキストをリセットします。Then the formula resets the text in the text box.

手順 8: 5 分ごとにツイートをチェックするタイマーを追加するStep 8: Add a timer to check for tweets every five minutes

新しいタイマー コントロールを追加します。Add a new Timer control:

  • Duration プロパティを 300000 に設定します。Set the Duration property to 300000.
  • AutoStart プロパティを true に設定します。Set the AutoStart property to true.
  • OnTimerEnd を次の数式に設定します。Set the OnTimerEnd to the following formula:

    If(Connection.Connected,
    
        ForAll(LocalTweetsToPost, Twitter.Tweet("", {tweetText: tweetText}));
    
        Clear(LocalTweetsToPost);
    
        Collect(LocalTweetsToPost, {tweetText: NewTweetTextInput.Text});
    
        SaveData(LocalTweetsToPost, "LocalTweetsToPost");
    
        UpdateContext({statusText: "Online data"})
    )
    

この数式は、デバイスがオンラインかどうかをチェックします。This formula checks if the device is online. オンラインの場合、アプリは、LocalTweetsToPost コレクション内のすべての項目をツイートします。If it is, the app tweets all the items in the LocalTweetsToPost collection. その後、コレクションをクリアします。Then it clears the collection.

これでアプリは完成しました。テストに進む前に、外観を確認しましょう。Now that the app is finished, let's check out how it looks before we move on to testing. 左側のアプリは接続されています。右側のアプリはオフラインであり、再びオンラインになったときに投稿するためのツイートが 1 つあります。On the left, the app is connected; and on the right, it's offline, with one tweet ready to post when it's online again.

完成したアプリのオンライン モードとオフライン モード

アプリのテストTesting the app

次の手順でアプリをテストします。Use the following steps to test the app:

  1. モバイル デバイスがオンラインのときに PowerApps を実行します。Run PowerApps on a mobile device while online.

    オンライン中に少なくとも 1 回アプリを実行して、アプリをデバイスにダウンロードする必要があります。You must run an app at least once while being online, so you can download the app to the device.

  2. Twitter アプリを起動します。Launch the Twitter app.
  3. ツイートが読み込まれ、状態に [接続中]が表示されます。Notice that the tweets are loaded, and that the status shows Connected.
  4. PowerApps を完全に閉じます。Close PowerApps completely.
  5. デバイスを機内モードに設定して、確実にオフラインにします。Set the device to airplane mode to ensure that it's offline.
  6. PowerApps を実行します。Run PowerApps.

    Twitter アプリをオフラインで実行でき、このデバイスがオンライン状態のときに実行していたその他のアプリにアクセスできます (つまり、PowerApps は、デバイスにまだダウンロードされていないすべてのアプリを非表示にします)。You can now run the Twitter app offline, and you have access to any other apps that you have previously run on this device while online (i.e. PowerApps hides any apps that haven't yet been downloaded to your device).

  7. アプリをもう一度実行します。Run the app again.
  8. 接続状態が正しく反映されていることを確認してください ([オフライン])。Notice how it correctly reflects the connection state, with a status of Offline.
  9. 新しいツイートを書きます。Write a new tweet. それは、LocalTweetsToPost コレクション内にローカルに格納されます。It will be stored locally in the LocalTweetsToPost collection.
  10. 機内モードを終了します。Exit airplane mode. タイマーがトリガーされた後、アプリは、ツイートを投稿します。After the timer triggers, the app posts the tweet.

この記事では、オフライン アプリを構築するための PowerApps の機能について、その概要を説明しました。We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. いつものように、フォーラムにフィードバックをお送りください。また、作成したオフライン アプリを PowerApps コミュニティ ブログでサンプルとして共有してください。As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.