Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
連載:Azureモバイルサービスで作る簡単スマートフォン・アプリ

連載:Azureモバイルサービスで作る簡単スマートフォン・アプリ

モバイル・サービスを活用するAndroidアプリを作ってみよう

2014年4月14日

Azureモバイル・サービスを使用してAndroidのアプリを作成する方法を説明。また、CLIを実際の開発で活用する。

  • このエントリーをはてなブックマークに追加

 今回は、Microsoft Azure(旧称:Windows Azure)モバイル・サービス(以降、モバイル・サービス)を使用してAndroidのアプリを作成する方法を説明する。今回はWindows上で開発を行う。

Android Developer Tools(ADT)をインストールする

ADTのダウンロード

 Microsoft Azureポータルにアクセスし、モバイル・サービスのクイックスタート(次の画面)から[Android Developer Tools (ADT) をインストール]リンクをクリックして、リンク先を開く。

Android Developer Tools(ADT)のインストール先を開く
  • 1クイックスタートをクリック。
  • 2[Android]タブをクリック。
  • 3[Android Developer Tools (ADT) をインストール]リンクをクリック。
[Download the SDK]ボタンをクリック
ライセンスに同意後、プラットフォームを選択してダウンロードをする

32-bitか64-bitはお使いのOSに合わせて選択する。

ADTの起動

 ダウンロード完了後、.zipファイルを解凍して、eclipseフォルダーの中の「eclipse.exe」ファイルをダブルクリックし、次のように起動することを確認する。

ADT起動画面

 もし、何らかのエラーが発生して起動しない場合は、Javaがインストールされていないと思われるので、Java SE DownloadsからJava SE 7(JDK7)をダウンロードしてインストールすればよい。このとき、Java SE 8(JDK8)を選んでしまうと、Eclipseは起動できるが、ビルドができなくなってしまうので注意してほしい。

アプリケーションをダウンロードして実行する

Androidプロジェクトのダウンロード

 AzureポータルからAndroidのプロジェクトをダウンロードして解凍する。

Androidプロジェクトのダウンロード

Eclipseへのプロジェクトのインポート

 次にダウンロードしたプロジェクトをEclipseにインポートする。

インポートを選択する

[File]-[Impor]を選択する。

[Import]画面
[Import]画面

[Existing Android Code Into Workspace]を選択して[Next]ボタンをクリック。

[Import Projects]画面
[Import Projects]画面

[Root Directory]にダウンロードしたプロジェクトを指定して、[Finish]ボタンをクリックする。

エミュレーターの設定

 プロジェクトがインポートできたら、エミュレーターを設定する。

Android Virtual Device Managerを開く

[Window]-[Android Virtual Device Manager]を選択する。

[Android Virtual Device Manager]画面

[New]ボタンをクリック。

[Create new Android Virtual Device (AVD)]画面
[Create new Android Virtual Device (AVD)]画面
  • 1[AVD Name]に「android」というような任意の名前を入力。
  • 2[Device]で「Nexsus S」を選択。
  • 3[Target]で「Android 4.4.2 - API Level 19」を選択。
  • 4[CPU/ABI]で「ARM」を選択。
  • 5[Skin]で「WVGA800」を選択。
  • 6[Use Host GP]にチェックを入れる。

上記入力後、[OK]ボタンをクリックする。

エミュレーターの起動

 エミュレーターの設定後、起動を行う。

[Android Virtual Device Manager]画面

先ほど作成したAVDを選択して[Start]ボタンをクリック。

AVD画面

ロック画面が表示されたら[OK]ボタンをクリックする

Androidアプリのデバッグ

 Eclipseからデバッグを行う。

Eclipse画面

デバッグのボタンをクリック。

エラー画面

アプリの画面が表示され、しばらくすると「401エラー」が表示される。

 このときエラーとなっているのは、第2回目でテーブルのアクセス許可を[認証されたユーザーのみ]に設定していたからだ。

テーブルの認証設定

テーブルのアクセス許可の変更

 第3回で紹介したCLI(コマンドライン・インターフェース)を使って、以下のようにして「アプリケーションキーを持つユーザー」に変更してみよう。

コマンドライン
azure mobile table update -p *=application [サービス名] [テーブル名]
azure mobile table show [サービス名] [テーブル名]
CLI実行結果

全て「application」と表示されていることを確認する。

アプリ実行: タスクの表示確認

 エミュレーターの[Reflesh]ボタンを押して、タスクが表示されることを確認する。

ADT画面

認証機能を追加する

import文の追加

 第2回のiOS版ではFacebookを用いて認証をしていたので、同様に追加していく。まずは次のimport文を「ToDoActivity.java」ファイルの先頭に追加する。

Java
import com.microsoft.windowsazure.mobileservices.MobileServiceUser;
import com.microsoft.windowsazure.mobileservices.MobileServiceAuthenticationProvider;
import com.microsoft.windowsazure.mobileservices.UserAuthenticationCallback;
import文の追加

ログイン画面を表示する処理の追加

 次にログイン画面を表示する次のコードを追加する。

Java
private void authenticate() {
  // Login using the facebook provider.
  mClient.login(MobileServiceAuthenticationProvider.Facebook,
      new UserAuthenticationCallback() {
 
        @Override
        public void onCompleted(MobileServiceUser user,
            Exception exception, ServiceFilterResponse response) {
 
          if (exception == null) {
            createAndShowDialog(String.format(
                    "You are now logged in - %1$2s",
                    user.getUserId()), "Success");
            createTable();
          } else {
            createAndShowDialog("You must log in. Login Required", "Error");
          }
        }
      });
}
 
private void createTable() {
 
  // Get the Mobile Service Table instance to use
  mToDoTable = mClient.getTable(ToDoItem.class);
 
  mTextNewToDo = (EditText) findViewById(R.id.textNewToDo);
 
  // Create an adapter to bind the items with the view
  mAdapter = new ToDoItemAdapter(this, R.layout.row_list_to_do);
  ListView listViewToDo = (ListView) findViewById(R.id.listViewToDo);
  listViewToDo.setAdapter(mAdapter);
 
  // Load the items from the Mobile Service
  refreshItemsFromTable();
}
認証画面の表示処理の追加

ログイン画面を呼び出す処理の追加

 最後にonCreateメソッドを次のように書き換え、認証画面を呼び出す。

Java
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_to_do);
  
  mProgressBar = (ProgressBar) findViewById(R.id.loadingProgressBar);
 
  // Initialize the progress bar
  mProgressBar.setVisibility(ProgressBar.GONE);
  
  try {
    // Create the Mobile Service Client instance, using the provided
    // Mobile Service URL and key
    mClient = new MobileServiceClient(
        "https://nnasaki-bi.azure-mobile.net/",
        "xxxxxxxxx",
        this).withFilter(new ProgressFilter());
    
    // 認証の呼び出しを追加する。
    authenticate();
  } catch (MalformedURLException e) {
    createAndShowDialog(new Exception("There was an error creating the Mobile Service. Verify the URL"), "Error");
  }
}
認証画面の呼び出し処理の追加

 コードの修正は以上だ。

テーブルのアクセス許可を元に戻す

 最後に、テーブルの認証設定を再び[認証されたユーザーのみ]に戻す。

コマンドライン
azure mobile table update -p *=user [サービス名] [テーブル名]
azure mobile table show [サービス名] [テーブル名]
CLI実行結果

「user」に書き換わっていることを確認する。

アプリ実行:ログイン画面の表示確認

 Eclipseから実行して、次のFacebookログイン画面が表示されれば成功だ。自分のアカウントでログインして表示できることを確かめてほしい。

Facebook認証追加後の画面

まとめ

 Androidもこのように簡単に開発ができることがお分かりいただけたと思う。また、CLIを実際の開発で使う方法をご説明した。

連載:Azureモバイルサービスで作る簡単スマートフォン・アプリ
1. iOSアプリを5分で作ろう! Azureモバイルサービスで簡単開発

Azureモバイル・サービス(BaaS)を使用してiOSやAndroidなどのアプリを作成していくことで、その魅力を紹介する連載がスタート。今回はToDoリストを管理するiOSアプリのサンプルを作成して動かしてみる。

連載:Azureモバイルサービスで作る簡単スマートフォン・アプリ
2. 認証機能とプッシュ通知をしよう!

iOSのサンプルでAzureモバイル・サービス(BaaS)の機能を紹介。Twitter、Facebook、Google、Microsoftなどの認証プロバイダーを使用した認証機能とプッシュ通知の実装方法を説明する。

連載:Azureモバイルサービスで作る簡単スマートフォン・アプリ
3. モバイルサービス開発でコマンドラインを活用しよう!(Win/Mac/Linux対応)

Azure管理用のコマンドライン・インターフェース(CLI)を活用して、モバイル・サービス開発を効率化しよう。その活用方法を解説。

連載:Azureモバイルサービスで作る簡単スマートフォン・アプリ
4. 【現在、表示中】≫ モバイル・サービスを活用するAndroidアプリを作ってみよう

Azureモバイル・サービスを使用してAndroidのアプリを作成する方法を説明。また、CLIを実際の開発で活用する。

サイトからのお知らせ

Twitterでつぶやこう!