Windows Azure上でのiOSアプリケーションのビルド

Windows Azure上でのセットアップ

Windows Azure管理ポータルよりWebサイト、モバイルバックエンド、SendGridの制御することが可能です。本チュートリアルではこれら3つを使用します。

はじめに、ポータル上でSendGridアカウントを作成します。

  1. 画面左下の新規をクリックします。
    Click New
  2. ストアをクリックしてアドオンリストを表示します。
  3. リスト内からSendGridを探してクリックします。 Find SendGrid
  4. 画面右下の矢印をクリックしてステップ2に進みます。
  5. 1ヶ月に25000通のメール送信が可能なフリープランを選択します。 Choose
  6. ステップ3に進み購入をクリックします。

次にWindows Azure Webサイトを作成します。

  1. 画面左下で新規作成をクリックします。
  2. コンピューティング>WEBサイト>簡易作成をクリックします。 Click
  3. 「website.azurewebsites.net」のようにURLを設定します。
  4. 画面右下のWEBサイトの作成をクリックします。

以上で、Azure上で動作するWebサイトの作成が完了しました。次は何かクールなものを作成しましょう。

SendGridのParse APIへの接続

SendGridはあなたのドメイン名でメールの送受信を行うことができます。プレイリストアプリケーションはメール受信を行うことができます。あなたのドメイン上でDNSの設定を行うことを意味します。これは、DNSを誰が制御しているかに依存します。本チュートリアルでは、手順の中でAzureとSendGridの設定を行き来します。DNSの設定変更時はシステム管理者の助けが必要になる可能性があります。

ドメイン名そのものを使用するより、「playlist.example.com」のようにサブドメインを利用するのは良い考えです。何故ならInbound Parse APIは全てのメールを受信するため、そのドメイン宛全てのメールを受信されたくない場合があるためです。Windows Azure上でカスタムドメインを使用するために、Webサイトは共有または標準モードで動作させる必要があります。しかしながら、共有モードは現在利用できません。

管理ポータル上でIPアドレスを確認して、詳細な設定を行います。

  1. 一覧からWebサイトを選択して、トップメニューバーから「スケール」をクリックします。 Select
  2. Webサイトのモードを「共有」に変更して「保存」をクリックして「はい」をクリックします。
  3. トップメニューバーから「構成」をクリックして、画面を下にスクロールして「ドメインの管理」をクリックします。
  4. 「playlist.example.com」のようにサブドメイン+ドメインを追加してチェックマークをクリックします。 Add
  5. このページ上に表示されるIPアドレスと設定手順に注意してください。これらをDNS設定の変更に使用します。

次にWndows Azure管理ポータル外でDNS設定を変更する必要があります。これにより、ドメインへのWebトラフィックはWindows Azureに、メールトラフィックはSendGridに向けられます。DNSの設定変更の方法はDNSの管理方法に依存します。

DNSに対して以下の3つの変更が必要になります:

  1. playlist.example.comに対するAレコードを作成して上記で表示されたIPアドレスを指し示すようにします。
  2. 上記でIPアドレスを表示していた画面に表示されていた手順のCNAMEレコードを作成します。
  3. mx.sendgrid.netを指し示すMXレコードを作成します。

DNSの設定変更が反映されるまで数時間程度かかる場合があります。Windows Azureのドメインの管理画面に戻り、赤い「!」マークが緑のチェックマークに変化することを確認します。

DNSの設定変更が反映されるのを待っている間、SendGridのIncoming Parse API Webhookの設定を準備します。Windows Azureの管理ポータル上で:

  1. アドオンリストの中からSendGridアプリケーションをクリックします。
  2. アドオンの管理セクションで「次の手順のためにSendgrid Webサイトにアクセスする」をクリックします。 Click
  3. SendGridの管理画面が表示されるので画面上部から「Developers」をクリックします。
  4. 画面右側から「Parse Incoming Emails」をクリックして入力画面が表示されることを確認します。 Click
  5. 使用するHostnameとUrlを入力します。例えば:

    • Hostname: playlist.example.com

    • URL: http://website.azurewebsites.net/email

  6. 「Add host & URL」をクリックします。

ODNSの設定変更が反映された後は、ドメイン名が @playlist.example.com 宛の任意のメールアドレスを受信することができるようになります。次のステップで、Windows Azure上のWebサイトでメールを受信する準備が出来ていることを確認します。

Windows Azure上で動作するコードの準備

コードを配置する前に、ソース管理システムを準備する必要があります。今回はGitを利用します。作業を開始する前にローカルマシン上にGitがインストールされていることを確認します。Windows、Mac、Linux、Solaris向けにダウンロード可能です。Windows Azure管理ポータル上でリポジトリのセットアップを行います:

  1. 一覧からWebサイト名をクリックします。
  2. ダッシュボードから「ソース管理からのデプロイの設定」をクリックします。
  3. 「ローカルGitリポジトリ」を選択します。
  4. 後で使用するため、Git URLをクリップボードにコピーします。 https://username@subdomain.scm.azurewebsites.net/playlist.git のような形式です。

次にいくつかの環境変数を設定する必要があります。これによりコード内に認証情報を公開しません。最初に認証情報を確認します。

SendGridの認証情報はWindows Azure管理ポータル上で確認することができます:

  1. アドオン一覧からSendGridをクリックします。
  2. 画面下部のバーで接続文字列をクリックします。 In
  3. パスワード、SMTPサーバー、ユーザー名が表示されます。

次にプレイリストを生成するためのRdio API Keyを取得します。手順については、「http://developer.rdio.com」内の「How to get started」を参照してください。

認証情報が確認できたらWindows Azure管理ポータル上で環境変数に設定していきます。

  1. WebサイトリストからWebサイトをクリックして、「構成」をクリックします。
  2. 「アプリケーション設定」に以下のキーバリューペアを設定します。

    • SENDGRID_USER = username

    • SENDGRID_PASS = password

    • DOMAIN = playlist.example.com

    • RDIO_KEY = your_key

    • RDIO_SECRET = your_secret

    • XHR_POLLING_ONLY = 1

  3. 画面下部の「保存」をクリックします。

ソースコードと環境変数の準備ができたら、アプリケーションを実行するためにソースコードをダウンロードシます。その後、Azureアカウントでコードをアップロードしてください。

ローカルマシン上でコマンドラインを開きコードの準備をします:

  1. コードを格納するローカルフォルダを作成(例 mkdir playlist)します。
  2. 以下のコマンドを実行してフォルダ内にコードをクローンします。 git clone git://github.com/theycallmeswift/playlist.sendgriddemos.com.git
  3. playlist.sendgriddemos.comフォルダに移動します。 cd playlist.sendgriddemos.com
  4. git remote add azure git_url

    • git_urlはソースコントロールのセットアップ後にWindows Azure上で表示される長いURLです。
  5. git push azure master

    • このコマンドはコードをAzure上にpushします。

最後にメールを受信するアドレスを変更する必要があります:

  1. public/index.htmlを開きます。
  2. index.html内のemail(25行目)を使用したいアドレスに変更します。例 play@playlist.example.com
  3. git add .を実行します。

    • 変更したファイルをアップロードのために追加します。
  4. git commit -m "Updating email address"を実行します。
  5. git push azure masterを実行します。

    • 再びAzureにpushします。

Azureにプッシュしたら、Webサイトダッシュボード画面下部の「再起動」ボタンでサーバーを再起動することができます。そして同じメニュー内の「参照」ボタンをクリックしてWebサイトが動作していることを確認します。この時点で、DNSの設定変更が反映されて、このサイトを訪れた人はソングリクエストを送信することができます。

Windows Azureモバイルサービスを利用するバックエンドアプリケーションの追加

Windows Azureはアプリケーション向けにBackend−as−a−serviceとしても動作します。Backend-as-a-serviceはデータのストア、ユーザの認証、通知のプッシュ、その他一般的なモバイル向けのタスクを実行します。このバックエンドはモバイルアプリケーション以外でも使用することができます。

Windows Azure管理ポータルからモバイルサービスを有効化しましょう:

  1. 画面左下の新規をクリックしてモバイルサービスを選択して「作成」をクリックします。
  2. URLを選択します。このURLは任意です。アプリケーション内部でのみ使用されます。 Choose
  3. 「次へ」をクリックします。
  4. サーバーのログイン名とパスワードを入力します。
  5. データベースの詳細設定を行います。 Choose
  6. 「次へ」をクリックして設定を確認して完了をクリックします。

次にデータベースにテーブルを追加します。

  1. 一覧からモバイルサービスををクリックします。
  2. データをクリックしてテーブルを追加します。
  3. テーブル名を入力します。アクセス許可を変更して完了をクリックします。 Choose

index.htmlファイルでBodyタグの終了近くに以下のコードを追加してWindowsモバイルサービスライブラリをアプリケーションに追加します:

1
<script src="https://website.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js"></script>

Mobile Services

js/app.js ファイルで$("#queue").append… の行の後に以下のコードを追加します:

1
2
3
var client = new WindowsAzure.MobileServiceClient("https://website.azure-mobile.net/",  "<Password>");
var item = { request: data.name, song: data.track, user: data.user };
client.getTable("playlist_songs").insert(item);

アプリケーションからDBにアクセスを許可するためにクロスオリジンリソース共有(cors)にURLを追加します。トップメニューバーから「構成」をクリックします。

cors

git経由で変更を加え、Azureにpushします。

以上でWebサイト、モバイルサービス、SendGridアカウント全てがWindows Azure上で連携が取れるようになりました。ここで止めることもできますが、モバイルサービスの真の力を確認するために、ネイティブモバイルアプリケーションを作成します。

Windows AzureモバイルサービスとiOSの接続

Windows AzureモバイルサービスSDKはWindows Azure上でアプリケーションのバックエンドを立ち上げることを簡素化します。Windows AzureチームはAndroid、HTML、Windows Store、Windows Phone向けのSDKがあります。ここではiOSに絞って話を進めます。

Windows Azure管理ポータルからプレパッケージされたモバイルアプリケーションをダウンロードすることができます:

  1. モバイルサービス一覧からモバイルサービス名をクリックします。
  2. クイックスタートタブを表示します。新しいiOSアプリケーションを作成するため、iOSをクリックします。
  3. ソースコードを取得するためにダウンロードボタンをクリックします。 Download

ネイティブiPhoneアプリケーションを作成するために、Mac上にXCodeをインストールする必要があります。ダウンロードサイズが大きい(1GBを超えます)ため、待っている間他の作業を行います。

次にWindows Azureからダウンロードしたサンプルアプリケーションを編集します。

  1. ダウンロードしたファイルを解凍しXCodeを使用してプロジェクトファイルを開きます。
  2. モバイルサービスを作成した際に使用した認証情報とテーブル名で QSTodoService.m を変更します。 Credentials
  3. QSTodoService.m 内のrefreshDataOnSucess関数を変更してキューから全てを返すように修正します。現在のコードを削除して以下のコードに置換します:
1
2
3
4
5
6
7
8
9
10
// Return all song request titles from the table
// items: An NSArray of the records that matched your query.
// totalCount: The total count of items in all pages of the query, not just those returned in the current page. This value is set to -1, unless you explicitly request the total count in your request. For more info, see Return data in pages.
// error: Any error that occurred; otherwise nil.
[self.table readWithCompletion:^(NSArray *results, NSInteger totalCount, NSError *error) {
[self logErrorIfNotNil:error];
items = [results mutableCopy];
// Let the caller know that we finished
completion();
}];

Code 4. QSToDoListViewController.mを表示してonAdd関数を以下の内容で置換します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// Populate the parameters for the SendGrid Web API Call
// Find more details about the [Web API here](/API_Reference/Web_API/index.html).
NSString *username = @"<Your SendGrid Username>";
NSString *apikey = @"<Your SendGrid Password>";
NSString *to = @"<Email to Playlist Service from Appendix A>";
NSString *from = @"<From Email Address>";
NSString *fromname = @"<Your Name>";
NSString *text = @"%20";

// Make sure the data received from the text field is formatted properly
NSString *subject = [itemText.text stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

// Generate the Web API call
NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"https://api.sendgrid.com/api/mail.send.json?to=%@&from=%@&fromname=%@&subject=%@&text=%@&api_user=%@&api_key=%@",to, from, fromname, subject, text, username, apikey]];

// This writes the composed URL in the XCode console for debugging purposes
NSLog(@"URL %@",url);

// Create a request object using the URL
NSURLRequest *request = [NSURLRequest requestWithURL:url];

// Prepare for the response back from the server
NSHTTPURLResponse *response = nil;
NSError *error = nil;

// Send a synchronous request to the server
NSData *responseData = [NSURLConnection sendSynchronousRequest:request returningResponse:&response error:&error];

// Error handling
if (error != nil) {
NSLog(@"%@", [error localizedDescription]);
UIAlertView *message = [[UIAlertView alloc] initWithTitle:@"Error"
                                             message:@""
                                            delegate:nil
                                   cancelButtonTitle:@"OK"
                                   otherButtonTitles:nil];
[message show];
}
itemText.text = @"";
5.    In the same file, replace this line:
label.text = [item objectForKey:@"text"];
with this line:
label.text = [item objectForKey:@"request"];

ユーザインタフェースに調整を行いましょう:

  1. ストーリーボードをクリックしてテキスト入力フィールドをクリックします。 Click
  2. 画面右側でプレースホルダーテキストを「Enter your song request」に変更します。
  3. 次にボタン上でダブルクリックして「Send」に名称変更します。シングルクリックしてテキストボックスとボタンのサイズを調整してください。 Buttons

XCode上のプロジェクトは上記スクリーンショットのようになります。iPhoneアプリケーションを実行するとリクエストされた曲を見ることができ、共有プレイリストに自身の曲を追加することができます。

このチュートリアルのコードはGithub pageから取得することができます。Enjoy!