モバイルチュートリアル：バックエンドストレージ用に BaaS を使用する（iOS および Android）

モバイルチュートリアル：モバイルアプリケーション開発（iOS および Android）への移動

このチュートリアルでは、Kinvey および Parse を BaaS プロバイダとしてバックエンドストレージを使用する基本手順を説明します。

このチュートリアルではショッピングリストを作成します。追加した項目は BaaS プロバイダによってクラウドに格納されるため、必要であればさまざまなデバイス間で共有したり更新することができます。

iOS	Android
iPod	Nexus 7

バックエンドストレージを使用して、ファイルやデータをクラウドに格納することができます。その情報は、後で取得、更新、削除することができます。

このチュートリアルでは、以下を行います。

新しい項目を作成してクラウドに格納する。
項目をクラウドから取得する。
項目をクラウドから削除する。

1 Kinvey および Parse でのアプリケーションの準備
2 ユーザーインターフェイスの設計とセットアップ
3 バックエンドコンポーネントの追加
4 オブジェクトの作成と格納
5 オブジェクトの削除
6 オブジェクトの取得
7 アプリケーションの実行
8 関連項目
- 8.1 コードサンプル

Kinvey および Parse でのアプリケーションの準備

このチュートリアルを開始する前に、Kinvey または Parse のアカウントが既にあることと、バックエンドプロバイダ内にアプリケーションを既に作成していることを確認してください。

Kinvey および Parse 入門

ユーザーインターフェイスの設計とセットアップ

このチュートリアルでは、UI コンポーネントに TListView を使用して、クラウドから取得した情報を表示します。

以下の手順で、このサンプルチュートリアルの UI をセットアップします。

空のマルチデバイスアプリケーションを作成します。以下のいずれかを選択します。
- Delphi の場合： ［ファイル｜新規作成｜マルチデバイスアプリケーション - Delphi｜空のアプリケーション］
- C++ の場合： ［ファイル｜新規作成｜マルチデバイスアプリケーション - C++Builder｜空のアプリケーション］
フォームに TLabel をドロップし、［オブジェクトインスペクタ］で次のプロパティを設定します。
- Text プロパティを「Shopping List」に設定します。
- Align プロパティを Top に設定します。
- TextSettings 内の HorzAlign プロパティを Center に設定します。
TLabel 上に TButton をドロップし、［オブジェクトインスペクタ］で次のプロパティを設定します。
- Align プロパティを Right に設定します。
- StyleLookup プロパティを refreshtoolbutton に設定します。
- Name プロパティを「RefreshButton」に設定します。
フォームに TEdit をドロップし、［オブジェクトインスペクタ］で次のプロパティを設定します。
- Align プロパティを Top に設定します。
TEdit 上に TButton をドロップし、［オブジェクトインスペクタ］で次のプロパティを設定します。
- Align プロパティを Right に設定します。
- Text プロパティを「Add Item」に設定します。
- Name プロパティを「AddItemButton」に設定します。
フォームに TListView をドロップし、［オブジェクトインスペクタ］で次のプロパティを設定します。
- Align プロパティを Client に設定します。

バックエンドコンポーネントの追加

このチュートリアルでは、TBackendStorage サービスコンポーネントを使用してバックエンドストレージを管理し、オブジェクトの作成、取得、更新、削除を行います。また、次のいずれかの BaaS プロバイダコンポーネントも使用します。

TKinveyProvider： Kinvey BaaS プロバイダコンポーネント。Kinvey クラウドサービス接続についての情報を含みます。
TParseProvider： Parse BaaS プロバイダコンポーネント。Parse クラウドサービス接続についての情報を含みます。

引き続き、以下の手順を実施します。

アプリケーションで使用するバックエンドプロバイダに応じて、2 つの BaaS プロバイダコンポーネント（TKinveyProvider、TParseProvider）のいずれかをフォームにドロップします。
フォームに TBackendStorage をドロップし、［オブジェクトインスペクタ］で Provider プロパティを先ほどの BaaS プロバイダコンポーネントに設定します。
使用する BaaS プロバイダに応じて、次のいずれかを行います。
- KinveyProvider1 コンポーネントを選択し、［オブジェクトインスペクタ］で AppKey、AppSecret、MasterSecret を Kinvey から提供された値に設定します。
- ParseProvider1 コンポーネントを選択し、［オブジェクトインスペクタ］で ApplicationID、MasterKey、RestApiKey を Parse から提供された値に設定します。

オブジェクトの作成と格納

アプリケーションで TEdit に何かを入力して［Add Item］をクリックすると、TEdit に入力した内容が、Kinvey または Parse BaaS プロバイダのクラウドに格納されます。オブジェクトの作成には CreateObject メソッドを使用します。

AddItemButton をダブルクリックして次のコードを入力します。

Delphi の場合：

procedure TForm1.AddItemButtonClick(Sender: TObject);
var
    LJSONObject: TJSONObject;
    LEntity: TBackendEntityValue;
begin
    if Edit1.Text = '' then
      ShowMessage('Please, enter an item.')
    else
      begin
        LJSONObject := TJSONObject.Create;
        LJSONObject.AddPair('item', Edit1.Text);
        BackendStorage1.Storage.CreateObject('ShoppingList', LJSONObject, LEntity);
        ShowMessage('New item created: ' +Edit1.Text);
        LJSONObject.Free;
        Edit1.Text := '';
      end
end;

C++ の場合：

void __fastcall TForm1::AddItemButtonClick(TObject *Sender)
{
	TJSONObject *LJSONObject;
	TBackendEntityValue LEntity;

	if (Edit1->Text == "") {
		ShowMessage("Please, enter an item.");
	}
	else  {
		LJSONObject = new TJSONObject;
		LJSONObject->AddPair("item", Edit1->Text);
		BackendStorage1->Storage->CreateObject("ShoppingList", LJSONObject, LEntity);
		ShowMessage("New item created: "+ Edit1->Text);
		LJSONObject->Free();
		delete LJSONObject;
		Edit1->Text="";
	 }
}

オブジェクトの削除

ユーザーがリストから任意の項目を削除できるようにします。TListView コンポーネントで、TListView の 1 つの項目上で指を左または右にスワイプすると、右側に削除ボタンが表示されます。項目の削除ボタンがクリックされたときにその項目を削除するには、以下を行います。

TListView を選択し、［オブジェクトインスペクタ］の［イベント］タブで OnDeletingItem イベントをダブルクリックします。このイベントは項目が削除される前に発生します。次のコードを追加します。

Delphi の場合：

procedure TForm1.ListView1DeletingItem(Sender: TObject; AIndex: Integer; var ACanDelete: Boolean);
var
  LQuery: string;
  LJSONArray : TJSONArray;
  LEntities: TArray<TBackendEntityValue>;
begin
  ACanDelete := False;
  LJSONArray := TJSONArray.Create;
  try
    LQuery := Format('query={"item":"%s"}', [(Sender as TListView).Items[AIndex].Text]); // 'query={"item":"%s"}' in Kinvey and 'where={"item":"%s"}' in Parse
    BackendStorage1.Storage.QueryObjects('ShoppingList', [LQuery], LJSONArray, LEntities);
    if (Length(LEntities) > 0) and BackendStorage1.Storage.DeleteObject('ShoppingList', LEntities[0].ObjectID) then
      ACanDelete := True
    else
      ShowMessage ('Item could not be deleted.');
  finally
    LJSONArray.Free;
  end;
end;

メモ： The line LQuery := Format('query={"item":"%s"}', [(Sender as TListView).Items[AIndex].Text]); is for Kinvey. Parse では、単語 query は where に変更しなければならず、Parse を BaaS プロバイダとして使用している場合には、この行はこのようになります： LQuery := Format('where={"item":"%s"}', [(Sender as TListView).Items[AIndex].Text]);。

C++ の場合：

void __fastcall TForm1::ListView1DeletingItem(TObject *Sender, int AIndex, bool &ACanDelete)
{
	System::UnicodeString LQuery[1];
	DynamicArray<TBackendEntityValue> LEntities;
	ACanDelete = False;
	TJSONArray *LJSONArray;
	LJSONArray = new TJSONArray;
	try {
		TListView* list = reinterpret_cast<TListView*>(Sender);
		LQuery[0] = ("query={\"item\":\""+(listView1->Items->operator[](AIndex)->Text)+"\"}"); // "query={\"item\":\"" in Kinvey and "where={\"item\":\"" in Parse
		BackendStorage1->Storage->QueryObjects("ShoppingList", LQuery, 0, LJSONArray, LEntities);
		if (((LEntities.Length)>0) & BackendStorage1->Storage->DeleteObject("ShoppingList", LEntities[0].ObjectID)) {
		   ACanDelete = True;
		} else {
			ShowMessage("Item could not be deleted.");
		}
	}
	__finally {
		LJSONArray->Free();
	}
}

メモ： この行、LQuery[0] = ("query={\"item\":\""+(list->Items->Item[AIndex]->Text)+"\"}"); は、Kinvey の場合です。Parse では、単語 query は where に変更しなければならず、Parse を BaaS プロバイダとして使用している場合には、子の行はこのようになります： LQuery[0] = ("where={\"item\":\""+(list->Items->Item[AIndex]->Text)+"\"}");。

オブジェクトの取得

行われた変更をすべて反映するよう TListView のすべての内容を更新するには、QueryObjects でオブジェクトを取得し、リストビューをクリアし、バックエンドストレージから取得したすべての項目を追加します。

リストの表示を更新するための新しいメソッドを追加するには：
Delphi の場合：
- ［表示｜クラスエクスプローラ］を選択してクラスエクスプローラウィンドウを開きます。
- クラスビューア ペインで Unit1 の下の TForm1 を右クリックし、［オペレーションの追加...］を選択します。
- ［メソッド名］に「RefreshList」と入力し、［メソッドタイプ］で［手続き］を選択して、［OK］をクリックします。
C++ の場合：
- ［表示｜C++ クラスエクスプローラ］を選択してクラスエクスプローラウィンドウを開きます。
- 型リスト ペイン（左側のペイン）でプロジェクトを展開し、その下の TForm1 を右クリックして、［オペレーションの追加...］を選択します。
- ［名前］に「RefreshList」、［戻り値の型］に「void」と入力し、［可視性］を［public］に設定して、［追加］をクリックします。

作成した新しいメソッドに次のコードを追加します。

Delphi の場合：

procedure TForm1.RefreshList;
var
  LJSONArray : TJSONArray;
  LItem: TListViewItem;
  I: Integer;
begin
  LJSONArray := TJSONArray.Create;
  try
    BackendStorage1.Storage.QueryObjects('ShoppingList', [], LJSONArray);
    ListView1.ClearItems;
    for I := 0 to LJSONArray.Count-1 do
    begin
      LItem := ListView1.Items.Add;
      LItem.Text := (LJSonArray.Items[I].GetValue<string>('item'));
    end;
  finally
    LJSONArray.Free;
  end;
end;

C++ の場合：

void TForm1::RefreshList()
{
	String LQuery [1];
	TJSONArray *LJSONArray;
	TListViewItem *LItem;
	TJSONObject *LJSONObject;
	String ItemText;
	int i;
	LJSONArray = new TJSONArray;
	try {
		BackendStorage1->Storage->QueryObjects("ShoppingList", LQuery, 0, LJSONArray);
		ListView1->Items->Clear();
		for (i = 0; i < LJSONArray->Count; i++) {
			LItem = ListView1->Items->Add();
			LJSONObject = dynamic_cast<TJSONObject *>(LJSONArray->Items[i]);
			ItemText = (LJSONObject->Values["item"]->Value());
			LItem->Text = ItemText;
		}
	}
	__finally {
		LJSONArray->Free();
	}
}

RefreshButton をダブルクリックし、このボタンで RefreshList メソッドを呼び出すよう、次のコードを追加します。
Delphi の場合：
```
procedure TForm1.RefreshButtonClick(Sender: TObject);
begin
  RefreshList;
end;
```
C++ の場合：
```
void __fastcall TForm1::RefreshButtonClick(TObject *Sender)
{
	RefreshList();
}
```
項目が追加されたときにリストの表示を更新します。AddItemButton をダブルクリックして先ほど追加した OnClick イベントのコードを開き、else の最後の文として次のコードを追加します。
Delphi の場合：
```
RefreshList;
```
C++ の場合：
```
RefreshList();
```
項目の削除後にリストの表示を更新します。TListView を選択し、［オブジェクトインスペクタ］の［イベント］タブで OnDeleteItem イベントをダブルクリックします。このイベントは項目が削除された後に発生します。次のコードを追加します。
Delphi の場合：
```
procedure TForm1.ListView1DeleteItem(Sender: TObject; AIndex: Integer);
begin
  RefreshList;
end;
```
C++ の場合：
```
void __fastcall TForm1::ListView1DeleteItem(TObject *Sender, int AIndex)
{
	RefreshList();
}
```

アプリケーションの実行

アプリケーションを実行するには、次のステップに従います：

［プロジェクトマネージャ］で、アプリケーションを実行するターゲットプラットフォームを選択します。
メモ： このアプリケーションは、swipe-to-delete 機能を使用します。この機能は、モバイルアプリケーション（iOS および Android）でサポートされると共に、タッチ入力が利用可能なデスクトップアプリケーション（Windows および OS X）でもサポートされます。
［実行｜実行］または［実行｜デバッガを使わずに実行］を選択します。
アプリケーションで項目を追加または削除したら、Kinvey コンソールまたは Parse ダッシュボードを開いて、クラウドでも変更を確認できます。

iOS	Android
iPod	Nexus 7

モバイルチュートリアル：バックエンドストレージ用に BaaS を使用する（iOS および Android）

目次

Kinvey および Parse でのアプリケーションの準備

ユーザーインターフェイスの設計とセットアップ

バックエンドコンポーネントの追加

オブジェクトの作成と格納

オブジェクトの削除

オブジェクトの取得

アプリケーションの実行

関連項目

コードサンプル

案内メニュー

個人用ツール

名前空間

変種

表示

その他

検索

RAD Studio 10.2 Tokyo

RAD Studio 10.2 トピック

他言語版

以前のバージョン

Assistance

ツール

モバイル チュートリアル：バックエンド ストレージ用に BaaS を使用する（iOS および Android）

目次

Kinvey および Parse でのアプリケーションの準備

ユーザー インターフェイスの設計とセットアップ

バックエンド コンポーネントの追加

オブジェクトの作成と格納

オブジェクトの削除

オブジェクトの取得

アプリケーションの実行

関連項目

コード サンプル

案内メニュー

検索

モバイルチュートリアル：バックエンドストレージ用に BaaS を使用する（iOS および Android）

ユーザーインターフェイスの設計とセットアップ

バックエンドコンポーネントの追加

コードサンプル