業務アプリ開発に使えるUIが満載、「Xuni（ズーニー）」で作るAndroid／iOSアプリ（AD）

iOSアプリできれいなグリッドやグラフを表示しよう

業務アプリ開発に使えるUIが満載、「Xuni（ズーニー）」で作るAndroid／iOSアプリ第3回

2016/04/05 14:00

ポスト

　本連載では、表計算ソフトのような表示が可能なモバイルアプリを開発できる「Xuni」について解説します。前回までは、AndroidでXuniを使用して、グリッドやグラフの表示したり、クラウド上のデータと連携したりといった機能をご紹介しました。今回は、iOSでXuniを動かしていきます。

ポスト

必要環境

　今回の記事における筆者の環境は下記の通りです。実際は、これより新しくても動作すると思われます。

Xcode Version 7.2（7C68）
Mac OS X Yosemite 10.10.5
Xuni 2015J v3

まずは動かしてみよう

　Xuniの概要やインストールについては、第1回で説明していますので省略します。早速サンプルプログラムを動かしてみましょう。

　サンプルプログラムはAndroidと同様の場所に保存されています。

~/Documents/XuniJp/iOS/Samples

　Androidでも試したFlexGridのサンプルを見ていきます。

Xcodeからプロジェクトを開く

　iOS版は、従来からあるObjective-Cと比較的新しいSwiftの2種類の言語を選択できます。今回は新しいSwiftを使用します。次のサンプルプロジェクトをXcodeにて開きます。

~/Documents/XuniJp/iOS/Samples/Swift/FlexGrid101

アプリを実行する

　Runボタンをクリックして実行します。

　シミュレーターが立ち上がり、アプリが起動します。「列の定義」をタッチしましょう。

　Android同様スワイプでスクロール、タップで選択が出来ます。ダブルタップで編集は「セル内容の編集」の画面で出来ます。

アプリの実装を見る

　iOSのアプリの画面はStoryBoardで組み立てます。各画面の遷移は線をつなげて関連を表します。今回は最初のMenuから各画面に遷移するので、Menuからの各画面への線が張り巡らされています。

　実装の詳細を見てみると、画面名ごとにControllerがあります。例えば先の「列の定義」であれば、「ColumnDefinitionController.swift」になります。どのような実装になっているか見てみましょう。

class ColumnDefinitionController: UIViewController {
    var _flex = FlexGrid()
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.

        _flex.autoGenerateColumns = false

        //（1）
        let c1 = FlexColumn()
        c1.binding = "customerID"
        c1.header = NSLocalizedString("ID", comment: "")
        c1.width = 100
        let c2 = FlexColumn()
        c2.binding = "firstName"
        c2.header = NSLocalizedString("First name", comment: "")
        let c3 = FlexColumn()
        c3.header = NSLocalizedString("Last name", comment: "")
        c3.binding = "lastName"
        let c4 = FlexColumn()
        c4.binding = "orderTotal"
        c4.header = NSLocalizedString("Total orders", comment: "")
        c4.format = "N1"
        _flex.columns.addObject(c1)
        _flex.columns.addObject(c2)
        _flex.columns.addObject(c3)
        _flex.columns.addObject(c4)

        //（2）
        _flex.itemsSource = CustomerData.getCustomerData(100)
        //（3）
        _flex.isReadOnly = true
        //（4）
        self.starSizing(_flex)
        //（5）
        self.view.addSubview(_flex)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        _flex.frame = CGRectMake(0, 65, self.view.bounds.size.width, self.view.bounds.size.height - 65)
        _flex.setNeedsDisplay()
    }
    func starSizing(g: FlexGrid){
        for var i : UInt = 0; i < g.columns.count; i++ {
            var c = FlexColumn()
            c = g.columns.objectAtIndex(i) as! FlexColumn
            c.widthType = FlexColumnWidth.Star
            c.width = (i == 0) ? 3 : (i == 3) ? 3 : 4
        }
    }
}

FlexGridの各カラムを設定する。
itemSourceに対してFlexGridに表示するデータソースを設定する。
読み取り専用にする
スターサイズ機能を使用して列のサイズを横スクロールしないように調整する
ビューにFlexGridを追加する

　XuniのAndroid版と見比べてどうでしょうか？ JavaとSwiftの文法の細かい違いはありますが、FlexGrid自体の使用方法はそれほど変わらないと思います。

クラウドにデータを用意する

　次にクラウドと通信してデータを取得する部分を作成します。利用するデータは「Azure Web Apps」に用意します。データの準備やクラウドへの配置、REST API作成の手順は、第2回「クラウド上のデータをグリッドやグラフで表示してみよう」で作成したAndroidアプリと同じなので、第2回を参照してください。

FlexGridからREST APIを呼び出す

　データをREST APIから取得する方法も、Androidアプリ同様に、Azure Mobile AppsのSDKを利用します。「MicrosoftAzureMobile.framework」をプロジェクトに組み込みます。サンプルコードでは、「ColumnDefinitionController.swift」に組み込んでいます。以降説明する実装はすべて組み込み済みです。

　次に、前述の「ColumnDefinitionController.swift」の（2）でサンプルデータを作成していた箇所を、次のように書き換えます。

//（2） itemsSourceにAzureから取得したJSONを格納するように変更する
let client = MSClient(applicationURLString:"https://62ad1595-0ee0-4-231-b9ee.azurewebsites.net")
client.invokeAPI("population", body: nil, HTTPMethod: "GET", parameters:nil, headers: nil) { (data, response, error) -> Void in
    let newArray = data!["populations"] as? NSMutableArray
    let populationArray = NSMutableArray()
    for item in newArray! {
        let dicItem = item as! NSDictionary
        let population = PopulationData()
        population.year = dicItem["year"] as! Int
        population.under14 = dicItem["under14"] as! Int
        population.between15to64 = dicItem["between15to64"] as! Int
        population.over65 = dicItem["over65"] as! Int
        population.sum = dicItem["sum"] as! Int
        populationArray.addObject(population)
    }
    self._flex.itemsSource = populationArray        }

　"https://62ad1595-0ee0-4-231-b9ee.azurewebsites.net"は、Azure Web AppsのURLで、第2回で取得方法を説明しています。<62ad1595-0ee0-4-231-b9ee>の部分はユーザーごとに異なりますので、皆様の環境に合わせて書き換えて下さい。

FlexGridの機能を見る

　つづいて、FlexGridの機能を解説します。

フィルタ

　フィルタについては「フィルタ処理」をご確認ください。

　さらに「フィルタ処理」を選択するとフィルタ画面が表示されます。

　フィルタ画面にて「Noah」と入力し、「値と同じ」を選び「フィルタ処理」をタッチします。

　すると、「Noah」と一致するセルのみが表示されます。

　実装の詳細は「FilterController.swift」及び「FilterFormController.swift」を参照して下さい。

ソート

　再び「列の定義」を見ていただき、カラムをタップするごとに昇順・降順でソートが可能です。Androidと同様にデフォルトで有効になっており特に実装は不要です。年次をタップして降順にした画面がこちらです。

グラフを表示する

　次にグラフで表示してみましょう。

FlexChartを追加する

　グラフを表示するために、「XuniChartCoreKit.framework」と「XuniFlexChartKit.framework」をプロジェクトに追加します。

グラフ画面を表示するボタンを追加する

　Androidと考え方は同じです。「ColumnDefinitionController.swift」にグラフ表示のボタンを追加し、「PopulationGraphController」の画面を表示できるようにします。画面を表示する際に、人口のデータをパラメーターとして渡します。

override func viewDidLoad() {
    // ... 中略 ...
    //（6） グラフ表示ボタンを追加
    _graphButton = UIButton(type: UIButtonType.System)
    _graphButton.setTitle("グラフ表示", forState: UIControlState.Normal)
    _graphButton.addTarget(self, action: "graphButtonClicked", forControlEvents: UIControlEvents.TouchUpInside)
    self.view.addSubview(_graphButton)

// グラフ表示ボタンが押された時の処理
func graphButtonClicked(){
    self.performSegueWithIdentifier("GraphFormSegue", sender: self)
}

グラフ表示画面を実装する

　Androidのときと少し違うのは、前の画面から受け取るパラメーターをセットするのは前の画面ということです。具体的には、ColumnDefinitionControllerのprepareForSegueにて、PopulationGraphControllerにitemsSourceをセットします。

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?{
    if segue.identifier == "GraphFormSegue" {
        let populationGraphController = segue.destinationViewController a PopulationGraphController
        populationGraphController._chart.itemsSource self._flex.itemsSource
    }
}

　棒グラフが表示されます。

　Androidと同様に、このままでは見づらいので折れ線グラフにしてみましょう。グラフの種類はPopulationGraphControllerに次のようにセットするだけで簡単に切り替えられます。

_chart.chartType = XuniChartType.Line

　積み上げ面グラフにしてみます。設定は次の通りです。

_chart.chartType = XuniChartType.Area
_chart.stacking = XuniStacking.Stacked

軸に説明を追加する

　縦軸・横軸の単位を設定します。

_chart.axisX.title = "年次"
_chart.axisY.title = "人口(単位:1000人)"

　横画面も綺麗に表示されます。以下はiPadで表示させてみたものです。

ズームを有効にする

　ピンチイン・ピンチアウトによるズームを有効にする場合、これもAndroidとほぼ同じコードで実現できます。

_chart.zoomMode = XuniZoomMode.XY

　iPadでズームした場合、以下のような表示になります。

まとめ

　Xuniで、iOSもAndroid同様にデータを表示することができました。iOS版も「Xuni for iOS のユーザーガイド」及び「Xuni for iOS のAPI リファレンス」が参考になりますが、Objective-Cで記述されているため、Swiftは多少読み替えが必要です。

　そのときは本記事を参照していただくか、サンプルソースにはObjective-CとSwift版が同梱されていますので、両者を見比べるとヒントが得られるかもしれません。

　Xuniは、AndroidとiOSで実装方法はほぼ同じで、画面もほぼ同様に表示されます。グリッドとグラフがひとつで実現でき、使い勝手も良いコンポーネントですので、ぜひ皆様お試し下さい。

この記事は参考になりましたか？

WEB用を表示

ポスト

【AD】本記事の内容は記事掲載開始時点のものです　企画・制作　株式会社翔泳社