Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

クロス開発ツール「Xojo」での一歩進んだiOSアプリ開発 ~ ネットワーク通信、DB連携からビルドまで

クロス開発ツール「Xojo」によるiOSアプリの開発 第2回

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

 本連載ではグレープシティが日本語版を提供する統合開発環境「Xojo(ゾージョー)」を用いたiOSアプリの開発について紹介します。前回は画面切り替えやテーブル・タブといった基本的な画面表示を中心に解説しましたが、今回はスマホアプリに欠かせないネットワーク通信とデータ操作、iOSネイティブ機能の利用について説明します。またXojoのアプリを端末実機で動作させる方法や、App Storeで公開するためのアプリビルド方法についても紹介します。

目次

はじめに

 グレープシティが日本語版を提供する統合開発環境Xojoは、Windows/Mac/Linux/Raspberry Pi向けのネイティブアプリや、ブラウザで動作するWebアプリを、VBライクの統一言語とビジュアル環境で開発できるツールです。iOSアプリの開発も可能で、本来であればXcodeを使ってObjective-C/Swiftで記述するiOSアプリを、Xojoの他プラットフォーム向けアプリと同じビジュアル環境で開発できます。

 本記事ではiOSアプリ開発時に利用頻度が高いネットワーク接続とデータベース機能について、利用方法を紹介します。一方でXojoがカバーしないiOSネイティブメソッドを呼び出す方法も説明します。開発者はこれらの機能を組み合わせてより本格的・実用的なアプリをXojoで開発できます。

 アプリが完成したら、やはり端末の実機で動作させたり、App Storeで世界に公開したりしたいところです。端末での動作やApp Storeへの公開用に、Xojoで作成したiOSアプリをビルドする方法を本記事の後半で説明します。

対象読者

  • iOSアプリ開発は敷居が高くて手が出ないと思っている人
  • 昔学んだVBスキルを活用したい人
  • Xojoで本格的にiOSアプリのリリースを考えている人

必要な環境

 XojoでiOSアプリ開発を行う場合はMac(OS X)にXojoとXcodeをインストールする必要があります。インストール方法は前回記事を参考にしてください。

 今回は以下の環境を利用します。

  • OS X 10.11.2
  • Xojo 2015r3.1
  • Xcode 7.1.1

HTTPSocketでWeb APIを利用

 本章ではHTTP通信を行うXojoコントロールである、HTTPSocketの利用方法を説明します。例としてYahoo! JAPANのオークションWeb APIから商品リストを取得するアプリを作ります。パラメータや戻り値の型式などAPIの詳細はYahoo!デベロッパーネットワークを参照してください。

 最初にビューにHTTPSocketオブジェクトを追加します。ライブラリから「Generic Object」をビューにドラッグアンドドロップします。Generic Objectは任意クラスのオブジェクトを表し、親クラスを指定するとそのクラスのオブジェクトとして扱えます。

図1 Generic Objectをビューに追加
図1 Generic Objectをビューに追加

 追加したGeneric Objectを選択して、インスペクタで親クラス(Super)を「xojo.Net.HTTPSocket」にします。この指定でHTTPSocketオブジェクトを利用できるようになります。なお、Superはテキストボックス右側のボタンをクリックすると候補の一覧から選ぶことができます。名前(Name)はあとで他の場所から参照するときに指定するもので、ここでは「HTTPSocket1」としておきます。

図2 オブジェクトの名前と親クラスを設定
図2 オブジェクトの名前と親クラスを設定

 ビューには検索条件を入力するテキストボックスと検索実行ボタン、結果を表示するTableを配置します。

図3 アプリの画面構成(Xojo001WebAPI)
図3 アプリの画面構成(Xojo001WebAPI)

 ボタンのActionイベントハンドラには、HTTP POSTでWeb APIを呼び出す処理をリスト1のように記述します。

リスト1 HTTP POSTの処理(Xojo001WebAPI)
'API URLとアプリID ...(1)
Dim APIURL As Text = "http://auctions.yahooapis.jp/AuctionWebService/V2/search"
Dim AppID As Text = "<ここにアプリIDを記述>"

'POSTパラメータを設定 ...(2)
Dim PostParam As new Dictionary()
PostParam.Value("appid") = AppID
PostParam.Value("output")  = "json"
PostParam.Value("query") = TextField1.Text

'POST文字列を作成 ...(3)
Dim PostBody As Text
For Each entry as DictionaryEntry in PostParam
  If (PostBody.Length > 0) Then
    PostBody = PostBody + "&"
  End If
  PostBody = PostBody + (entry.Key + "=" + entry.Value)
Next

'POST実行 ...(4)
Dim Data As MemoryBlock
data = TextEncoding.UTF8.ConvertTextToData(PostBody)
HTTPSocket1.SetRequestContent(data, "application/x-www-form-urlencoded")
HTTPSocket1.Send("POST", APIURL)

 (1)はAPIのURLとAPIを実行するために必要なアプリIDです。アプリIDはYahoo!デベロッパーネットワークのWebページで取得します。(2)と(3)はPOSTパラメータを作る処理です。APIが要求するアプリID(appid)、出力形式(output)、検索文字列(query)をDictionaryオブジェクトに格納した後「key1=value1&key2=value2...」といったPOST文字列を生成しています。HTTPSocketによる通信処理は(4)です。SetRequestContentメソッドでPOSTデータを設定してSendメソッドで通信開始しています。なおSendメソッドの第1引数を"GET"にするとHTTP GET通信になります。

 次にHTTPSocket1を選択して「挿入」-「イベントハンドラ」とし、一覧から「PageReceived」を選択して「OK」をクリックします。

図4 HTTPSocketオブジェクトにイベントハンドラを追加
図4 HTTPSocketオブジェクトにイベントハンドラを追加

 HTTPSocketの主なイベントを表1に示します。PageReceived以外のイベントはここでは利用しません。

表1 HttpSocketの主なイベント
名前 発生タイミング
PageReceived Webページ受信完了時
Error 通信エラー発生時
SendProgress 送信中(どこまで送信したか)
ReceiveProgress 受信中(どこまで受信したか)

 PageReceivedイベントハンドラにはリスト2の画面表示処理を記述します。

リスト2 API戻り値を画面表示する処理(Xojo001WebAPI)
'JSONP戻り値の接頭辞・接尾辞 ...(1)
Dim jsonpPrefix As Text= "loaded("
Dim jsonpSuffix As Text = ")"

'戻り値からJSON部分を抽出 ...(2)
Dim resp As Text = TextEncoding.UTF8.ConvertDataToText(content)
resp = resp.Mid(jsonpPrefix.Length, resp.Length - jsonpSuffix.Length - jsonpPrefix.length)

'JSON文字列を解析して結果配列を抽出 ...(3)
Dim items() As Auto
Dim dict As Dictionary = ParseJSON(resp)
Dim dictResultSet As Dictionary = dict.Value("ResultSet")
If (dictResultSet.HasKey("Result")) Then
  Dim dictResult As Dictionary = dictResultSet.Value("Result")
  If (dictResult.HasKey("Item")) Then
    items = dictResult.Value("Item")
  End If
End If

'結果配列をTableに表示 ...(4)
If (items <> nil) Then
  Table1.RemoveAll
  Table1.AddSection("")
  For Each d as Dictionary in items
    Dim title as Text = d.Value("Title")
    Table1.AddRow(0, title)
  Next
End If

 APIの戻り値はJSONP(JSONを引数として呼び出すJavaScriptメソッドの記述を含んだ文字列)なので、(1)(2)でJavaScriptメソッドの記述を取り除いています。(3)でJSON文字列をDictionaryオブジェクトに変換して解析し、検索結果を配列itemsに格納しています。itemsの型Autoは「なんでも格納できる型」です。最後に(4)でitemsからタイトル(Title)をTableに設定しています。

 アプリを実行してキーワード検索を行うと、出品されているオークションが一覧表示されるようになります。

図5 Web APIでオークション一覧を取得(Xojo001WebAPI)
図5 Web APIでオークション一覧を取得(Xojo001WebAPI)

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

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:クロス開発ツール「Xojo」によるiOSアプリの開発

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5