NCMBのSwift SDKを使ってデモアプリを作ってみます。今回はDeepL APIを使った翻訳アプリです。翻訳結果をNCMBのデータストアに保存し、後で確認できるようにします。データストアにデータを保存したり、逆に取り出すのはよくあるケースなので、様々な場面で応用できるはずです。

今回は画面の説明とSDKの導入までを進めます。

コードについて

今回のコードはNCMBMania/Swift_DeepL_App: Swift NCMB SDKとDeepL APIを組み合わせた翻訳アプリのデモですにアップロードしてあります。実装時の参考にしてください。

利用技術について

今回は次のような組み合わせになっています。

Swift 5.5
Xcode 13.0
NCMB Swift SDK 1.2.2

仕様について

今回はシンプルにするために認証は利用していません。入力されたテキストデータと、DeepL APIで翻訳したデータをデータストアに保存します。履歴画面では最大10件のデータを取得、一覧表示します。

利用する機能について

翻訳アプリで利用するNCMBの機能は次の通りです。

データストア
- 翻訳データの保存
- 翻訳データの検索

画面について

今回はSwiftUIを以下の5つのViewに分けています。

ContentView.swift

タブを2つ表示します。1つ目は翻訳画面（TranslateView）、2つ目は履歴画面（HistoryView）です。

// タブを表示
struct ContentView: View {
    var body: some View {
        TabView {
                    TranslateView()
                        .tabItem {
                            VStack {
                                Image(systemName: "textformat")
                                Text("翻訳")
                            }
                    }.tag(1)
                    HistoryView()
                        .tabItem {
                            VStack {
                                Image(systemName: "list.bullet")
                                Text("履歴")
                            }
                    }.tag(2)
                }
    }
}

TranslateView.swift

翻訳実行画面です。日本語を入力して、翻訳するボタンをタップするとDeepL APIを使って英語に翻訳します。翻訳処理がうまくいったら、日本語と英語をNCMBのデータストアへ保存します。

// DeepL APIのレスポンス用構造体
struct DeepLResult: Codable {
    let translations: [Translation]
    struct Translation: Codable {
        var detected_source_language: String
        var text: String
    }
}

// 翻訳用ビュー
struct TranslateView: View {
    // 日本語のテキスト
    @State private var originalText = ""
    // 翻訳結果のテキスト
    @State private var translatedText = ""
    // 保存完了した際のアラート制御用
    @State private var uploaded = false
    // JSONデコード用
    let decoder: JSONDecoder = JSONDecoder()
    
    // 翻訳実行
    func translation() {
    }
    
    // 翻訳結果をNCMBに保存する処理
    func saveResult() {
    }
    
    // 画面表示
    var body: some View {
        NavigationView{
            VStack(spacing:0){
                ZStack{
                    VStack(spacing:20){
                        // 日本語入力欄
                        TextEditor(text: $originalText)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                            .frame(maxWidth: 280, maxHeight: 100)
                        // 翻訳結果があれば表示
                        if translatedText != "" {
                            Text(translatedText).padding()
                        }
                        // 翻訳実行するボタン
                        Button(action: {
                            translation()
                        }, label: {
                            Text("翻訳する")
                        })
                    }
                }
            }
            .navigationBarTitle("翻訳", displayMode: .inline)
            // 保存完了時のアラート用
            .alert(isPresented: $uploaded, content: {
                Alert(
                    title: Text("保存完了"),
                    message: Text("翻訳結果を記録しました"),
                    dismissButton: .default(Text("閉じる"))
                )
            })
                
        }
    }
}

HistoryView.swift

翻訳履歴データを検索、結果を一覧表示する画面です。最初は日本語だけを表示します。

// NCMBから取得した結果が入るObservableObject
class Histories: ObservableObject {
    @Published var items: [NCMBObject] = []
}

// 履歴画面用
struct HistoryView: View {
    // 履歴が入る配列
    @ObservedObject var History = Histories()
    // NCBMから履歴を取得する処理
    func getHistories() {
    }
    // 画面表示
    var body: some View {
        NavigationView{
            VStack(spacing:0){
                ZStack{
                    List {
                        ForEach(self.History.items, id: \.objectId) { translate in
                            // translateはNCMBObjectです
                            // タスク文字列をタップしたらDetailViewを呼び出します
                            NavigationLink(destination: DetailView(translate: translate)) {
                                Text((translate["original"] ?? "") as String)
                            }
                        }
                    }
                }
            }
            .navigationBarTitle("履歴", displayMode: .inline)
            .onAppear {
                // 画面表示したら履歴を取得する処理を呼び出す
                getHistories()
            }
        }
    }
}

DetailView.swift

一覧でタップされた翻訳履歴の詳細表示を行うViewです。一覧から渡されたデータストアオブジェクトを表示します。

// 詳細表示画面
struct DetailView: View {
    @Environment(\.presentationMode) var presentation
    // 一覧画面からNCMBObjectを受け取る
    @State var translate: NCMBObject
    
    // 画面表示
    var body: some View {
        NavigationView{
            VStack(spacing:0){
                Text((translate["original"] ?? "") as String)
                Spacer()
                Text((translate["translate"] ?? "") as String)
                Spacer()
            }
        }
    }
}

今回のプロジェクト

今回は言語がSwift、インタフェースがSwiftUI、ライフサイクルはSwiftUI Appとしています。

SDKのインストール

プロジェクトを開いて、Package Dependenciesの中にある + アイコンをクリックします。

パッケージ名が色々と出てくるので、左上のURL入力欄にて下記のURLを入力します。

https://github.com/NIFCLOUD-mbaas/ncmb_swift

そうすると ncmb_swift が出てくるので、右下にある Add Package ボタンを押します。

確認ダイアログはそのままで、Add Package ボタンを押します。

これでインストール完了です。

NCMBのAPIキーを取得

mBaaSでサーバー開発不要！ | ニフクラ mobile backendにてアプリを作成し、アプリケーションキーとクライアントキーを作成します。

DeepLのAPI認証キーを取得

DeepL翻訳：世界一高精度な翻訳ツールにて開発者登録し、API認証キーを取得します。

APIKey.plistの作成

API keyを.plistにStringで保存して隠す(例: Google Maps Api) - Qiitaを参考に、KeyManger.swiftを作成します。

import Foundation

// APIKey.plistの内容を返してくれるオブジェクト
struct KeyManager {
    private let keyFilePath = Bundle.main.path(forResource: "APIKey", ofType: "plist")
    func getKeys() -> NSDictionary? {
        guard let keyFilePath = keyFilePath else {
            return nil
        }
        return NSDictionary(contentsOfFile: keyFilePath)
    }
    func getValue(key: String) -> AnyObject? {
        guard let keys = getKeys() else {
            return nil
        }
        return keys[key]! as AnyObject
    }
}

先ほど取得したNCMBのAPIキー、DeepLのAPI認証キーをそれぞれAPIKey.plistファイル（新規作成）に設定します。キーは次の通りです。

DeepLAuthKey
ClientKey
ApplicationKey

初期化

今回はSwiftUIを利用しています。ライフサイクルもSwiftUIです。

まずSDKをインポートします。

import SwiftUI
import NCMB

プロジェクトの App にて、init関数を定義します。その中でアプリケーションキー、クライアントキーを取得してNCMBの初期化処理を行います。

struct translationAppApp: App {
    init() {
        let applicationKey = KeyManager().getValue(key: "ApplicationKey") as! String
        let clientKey = KeyManager().getValue(key: "ClientKey") as! String
        // APIキーの設定とSDK初期化
        NCMB.initialize(applicationKey: applicationKey, clientKey: clientKey)
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

まとめ

今回は翻訳アプリの仕様と画面、NCMBの初期化までを解説しました。次は翻訳処理とデータ登録を解説します。