スマホ×Windows Azure開発講座(iOS編)

第5回 iOSアプリケーションの作成

この記事を読むのに必要な時間:およそ 4 分

UIの作成

MainStoryboard.storyboardを開きます。そうすると,自動的にInterface Builderが表示されます。⁠Main View Controller」のインフォマークボタンを選択します。Attributes Inspector(右ペインの右から3番目のアイコン)を表示します。⁠Button」の[Type]を「Rounded Rect」に,[Title]を「Draw a card」にします。スタイルが変わったボタンを画面の中央に持っていきます。ドラッグ中に補助線が表示されるので,そのときにドロップすると中央に置けます。

次に「Flipside View Controller」を選択します。右下の「Object Library」からUIImageViewを画面上部に1つ,UILabel2つを画面中央と下部に,それぞれドラッグ&ドロップで配置します。

図6 MainStoryboard.storyboard

図6 MainStoryboard.storyboard

UIコントロールをコードから参照する

作ったコントロールにコードから参照するための設定(接続)をします。

図7 EditorとViewの切り替え

図7 EditorとViewの切り替え

Editorを真ん中のAssistant Editorを表示し,左のビューにMainStoryboard.storyboardを開き,Flipside View Controller Sceneを表示します。そして右のビューにGIAFlipsideViewController.hを表示します。Controlキーを押しながら,左側のInterface Builder内のコントロールをドラッグして,ソースの既存の@propertyの次の行にドロップします図8⁠。

図8 コントロールの接続(1)

図8 コントロールの接続(1)

この際,コントロールからカーソル示すソースコード行部分に線が引かれます。ドラッグ&ドロップすると,コード上でコントロールを示す変数名を[Name]欄に入力して[Connect]ボタンをクリックします図9⁠。

図9 コントロールの接続(2)

図9 コントロールの接続(2)

そうすると,プロパティ宣言が自動で生成されます。さらに実装ファイル側に@synthesize(プロパティのメソッドを定義)と,viewDidUnloadとdeallocメソッドにリリース(メモリ上からオブジェクトを解放する)処理も追加されます。プロパティのローカル変数は自動的に定義されるので宣言しなくても構いません。このやり方で,

コントロールName
上部のUIImageViewrankImage
中央のUILabelrankLabel
下部のUILabeldescLabel

とそれぞれ接続してください。ローカル変数は,Nameの先頭に_(アンダースコア)が付きます。

サービスにアクセスする処理の実装

FlipsideViewController.mのviewDidLoadメソッドに以下の処理を追記します。

- (void)viewDidLoad
{
    [superviewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
    
    NSError *error = nil;
    NSDictionary *json = nil;
    NSData *data = [NSDatadataWithContentsOfURL:[NSURLURLWithString:@"http://<ユニークID>.cloudapp.net/Service/DivineService.svc/card/leo"]
                                         options:NSDataReadingMappedIfSafe
                                           error:&error];
    if (!error) {
        json = [NSJSONSerialization JSONObjectWithData:data
                                               options:NSJSONReadingAllowFragments
                                                 error:&error];
    }
    
    if (error) {
        NSLog(@"Error: %@", error);
        UIAlertView *alertView = [[UIAlertViewalloc] initWithTitle:@"Error"
                                                            message:[error localizedDescription]
                                                           delegate:nil
                                                  cancelButtonTitle:nil
                                                  otherButtonTitles:@"OK", nil];
        [alertView show];
        [alertView release];
        return;
    }
    
    int rank = [[json objectForKey:@"rank"] intValue];
    NSString *imageUrlStr = [NSStringstringWithFormat:@"http://<ストレージアカウント>.blob.core.windows.net/rank/%d.jpg", rank];    
    NSData *rankImageData = [NSDatadataWithContentsOfURL:[NSURLURLWithString:imageUrlStr]];
    _rankImage.image = [UIImageimageWithData:rankImageData];
    _rankLabel.text = [NSStringstringWithFormat:@"%d", rank];
    _descLabel.text = [json objectForKey:@"desc"];
}

viewDidLoadは,ビューがロードされた直後に実行されるメソッドです。今回は画面が表示される前に,サービスURL「http://<ユニークID>.cloudapp.net/Service/DivineService.svc/card/leo」にアクセスして下記のようなJSONを,NSDataとしてバイナリデータを取得します。

{"desc":"This is a sample leo Card.","rank":5}

さらにNSJSONSerializationを使って,そのNSDataをJSONとしてパースし,内容をNSDictionaryとして扱えるようにします。

rankImageにrank値をそのままJPEGファイル名として,ブロブ ストレージのURL「http://<ストレージアカウント>.blob.core.windows.net/rank/<rank値>.jpg」を指定して,画像をロードします。rankLabelにはrank値を,descLabelにはdesc値を表示します。

これだけで,アプリケーションの実装は終了です。左上のRunボタンをクリックすると,iOSシミュレータ上でアプリが起動します。[Draw a card]ボタンをクリックすると,毎回違うランクとそれに応じた画像が表示されます図10⁠。

図10 iOSアプリケーションの実行

図10 iOSアプリケーションの実行

最後に

本記事では,Windows Azure上のサービスとブロブ ストレージ上の画像にアクセスするiOSアプリケーションを実装してみました。次回は,Windows Azure Toolkit for iOSを使った実装について,紹介したいと思います。

著者プロフィール

高橋俊光(たかはしとしみつ)

ティルフィン合同会社 代表。

メーカー企業でパッケージソフト開発などに携わった後,ティルフィン合同会社を設立しフリーエンジニアとして,RIAやスマートモバイルアプリとサーバーサイドと広い分野で開発に従事。iOSアプリ トレンドトピック,Newstrushをリリースしている。