はじめに

自作したブラウザ拡張機能をスマホやタブレットのブラウザでも使えないかなと思って調べてみました。

すると
Androidではいくつか方法があるが
iosでは拡張機能を使う方法がないようです。

それでも何とかiosでブラウザ拡張機能を実行できないかと試したところ

iosの「ショートカット」アプリを使うことで、コンテンツスクリプトを使ったchrome拡張機能を実装できました。

やったこと

iosの「ショートカット」アプリを使ってamazonDriveを画像Viewer化する自作拡張機能ををipadのsafariブラウザ上で実行した。

実行結果

仕組み

1.safariで拡張機能を実行したいwebページを開く
2.ショートカットを実行
3.githubから拡張機能に必要なファイルを取得する
4.取得したファイルからDOMを生成し、jsを実行する

githubにリポジトリを作成し、コードを追加する

chrome拡張機能の置き場所はcorsによるクロスドメイン通信でファイルが取得できるなら何処でもいいです。
コードをgitで管理したかったので今回はgithubに置きました。

ショートカットアプリからJS実行

「ショートカット」アプリの使い方はこちらのqiita記事を参考にさせて頂きました。

iPhone 「ショートカット」アプリで JavaScript を実行する

1.「ショートカットを作成」を選択
2.検索欄に「Web」と入力
3.「WebページでJavaScriptを実行」を選択

ショートカットを下記の内容に変更します。

function Main() {

    let jsCount = 0;

    this.run = function () {
        run();
    }

    function run() {

        const base = "https://api.github.com/repos/shiraki-s/amazonDrive/contents/";
        //chrome拡張機能のmanifest.jsonを取得する
        request(base + "manifest.json", function (text) {

            const json = JSON.parse(text);
            const decode = decodeURIComponent(escape(window.atob(json.content)));
            const json2 = JSON.parse(decode);

            //manifest.jsonからjsとcssの相対パスを取得する
            const jses = json2.content_scripts[0].js;
            const csses = json2.content_scripts[0].css;

            //cssをgithubから取得しテキストとして読み込み、DOMを生成
            createCssTag(base, csses);

            //jsをgithubから取得しテキストとして読み込み、DOMを生成
            createJsTag(base, jses, function (script) {

                //全てのjsファイルのDOM生成が完了したら、コンテンツスクリプトを実行する
                init(base, script, jses.length);
            });
        });

    }

    function init(base, script, max) {

        setTimeout(function () {

            if (max == jsCount) {

                const s = document.createElement('script');
                s.innerHTML = script + ' new DriveManager().init("' + base + '");';
                document.body.appendChild(s);

            } else {
                init(base, script, max);
            }


        }, 500);

    }

    function createCssTag(base, array) {

        for (let i = 0, len = array.length; i < len; i++) {

            request(base + array[i], function (text) {
                const json = JSON.parse(text);
                const decode = decodeURIComponent(escape(window.atob(json.content)));

                const style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = decode;
                document.body.appendChild(style);
            });

        }

    }

    function createJsTag(base, array, onLoad) {

        for (let i = 0, len = array.length; i < len; i++) {

            const index = i;

            request(base + array[i], function (text) {

                jsCount++;
                const json = JSON.parse(text);
                const decode = decodeURIComponent(escape(window.atob(json.content)));

                if (index == array.length - 1) {
                    onLoad(decode);
                    return;
                }

                const s = document.createElement('script');
                s.innerHTML = decode;
                document.body.appendChild(s);
            });

        }

    }

    function request(url, callback) {

        var request = new XMLHttpRequest();

        request.onreadystatechange = function () {

            if (request.readyState == 4) {

                if (request.status == 200) {
                    callback(request.responseText);
                    return;
                }
            }

        }

        request.open("GET", url, true);
        request.send();
    }

}

var result = [];
new Main().run();

completion(result);

4.設定から「共有シートに表示」をON
5.完了
6.safariから作成したショートカットを実行する

最後に

この方法でコンテンツスクリプトを使ったchrome拡張機能をipadのsafariで実行できました。

今回は自作した拡張機能のコードを使用したので問題はないですが
この方法ではどんなjavascriptでも実行が可能なので、第三者が作成したコードを使う際には注意が必要です。

最後まで読んでいただき、ありがとうございました。

先日ダークモード対応デビューしたのですが、こんな事件がありました。

「ダークモードで背景の色が白とか明るい色だとステータスバーが見えないor見にくい...」

どいうことかというと、背景を白にするとステータスバーが、
ライトモードの時は...

ある！！

のに、ダークモードの時は...

ない!！

まあ厳密にはないというより見えていないのですが。バッテリー残量の赤いのがちょっと見えてますね。

事件の真相

ステータスバーの黒がライトモード用とダークモード用で分けられていました。
ダークモード用の黒として、OS13以降でUIStatusBarStyleにdarkContentが追加されています。
UIStatusBarStyleがdefaultのままだとダークモードではステータスバーが白になるので事件が起こったわけですね。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
    }

    // ステータスバーの色の決め方
    override var preferredStatusBarStyle: UIStatusBarStyle {
        // OS13以降じゃないならライトモード用の黒で
        guard #available(iOS 13, *) else { return .default }
        // ダークモードならダークモード用の黒、そうじゃないならライトモード用の黒で
        return traitCollection.userInterfaceStyle == .dark ? .darkContent : .default
    }
}

こんな感じにすればOKです。ちなみにステータスバーの白はライトモードとダークモードで別れておらず、同じlightContentです。

誰かの参考になれば幸いです。

ゆめみの日常

ある日社内のSlackでこんなやり取りがありました。

※伯方の塩は博多でつくっているわけではないそうです。

このスレッドをながめていたら、昔Twitterで見た「ずんどこきよしのプログラム」っぽいものが作れるんじゃないかと思い、CoreBluetoothで作ってみました。

そして出来たのがこちら。(※音が流れるので注意！)

https://twitter.com/u11238123/status/1198624428143214592

アプリ通信の流れについて

このアプリはCentral(動画内でのiPhone)側からPeripheral(動画内でのiPad)側にwriteをして音声を出力しています。

Bluetoothは固有の名称などがたくさんあり、それを全て説明していると1つ記事がかけてしまうので詳しく知りたい方は過去に僕がまとめた記事があるのでそれを参照してください。

また、この記事ではCentralの実装の解説だけに絞り、音の再生部分などは省略します?‍♂️

centralの実装

Central側でデータを書き込む流れは以下のような感じです。
① Bluetoothの使用許可をinfo.plistに書く
② CBCentralManagerのインスタンスを作る
③ デバイスがBluetoothを使用可能か判定
④ スキャンを開始する
⑤ 検出したperipheralとコネクトする
⑥ peripheralのServiceを検出する
⑦ Serviceの中のCharacteristicを検出する
⑧ 検出したCharacteristicに対してwriteする

① Bluetoothの使用許可をinfo.plistに書く

ios13からiosデバイスでBluetoothを使用する際permissionの許可が必須になったため記載してあげる必要があります。

    <key>NSBluetoothAlwaysUsageDescription</key>
    <string>伯方の塩で使うよ</string>

ここに記載した文章がアプリ内のアラートに表示されますが、大手などのアプリでもいい加減なものを複数観測しているので、審査の際は書いてあればOKなのかなと思います。

ですが、ユーザに不信感を与えるので何に使うかは詳しく書いておいた方が良いと思います。

② CBCentralManagerのインスタンスを作る

CBCentralManagerのインスタンスを作成すると各種delegateメソッドが呼ばれるようになります。

class ViewController: UIViewController {
    var centralManager: CBCentralManager!

    override func viewDidLoad() {
        super.viewDidLoad()
        centralManager = CBCentralManager(delegate: self, queue: nil)
    }
}
extension ViewController: CBCentralManagerDelegate, CBPeripheralDelegate{}

③ デバイスがBluetoothを使用可能か判定

状態の取得はPeripheralと同じく以下のようなcaseが用意されています。
poweredOn以外の時に無理やり次に進もうとするとクラッシュする可能性があるので注意が必要です。

    func centralManagerDidUpdateState(_ central: CBCentralManager) {
        switch central.state {

        case .unknown:
            print("よくわかないけどダメ！")
        case .resetting:
            print("システムとの接続がよくわからんからダメ！")
        case .unsupported:
            print("Bluetooth許可されてないじゃんダメ！")
        case .unauthorized:
            print("このデバイスBluetooth使えないからダメ！")
        case .poweredOff:
            print("Bluetooth offになってるからダメ！")
        case .poweredOn:
            print("つかえるよ！！！")
        @unknown default:
            fatalError("へんなのきたからダメ！")
        }
    }

④ スキャンを開始する

poweredOnの状態（Bluetoothが使用可能）な場合以下のようにスキャンを開始するメソッドを呼び出します。
伯方の塩（Peripheral）の記事の方でuuidgenを使って作成したUUIDを指定しています。

scanForPeripheralsの第一引数にはnilを指定することも可能で、nilを指定した場合は見つかった全てのPeripheralが検知のメソッドに飛んできます。

    func centralManagerDidUpdateState(_ central: CBCentralManager) {
        if central.state == .poweredOn {            
            central.scanForPeripherals(withServices: [CBUUID(string: "19688AFB-4E68-4F21-BCBA-421220280930")], options: nil)
        }
    }

⑤ 検出したperipheralとコネクトする

scanForPeripheralsが呼ばれて指定したServiceを持つPeripheralを見つけるとcentralManager(_ central: CBCentralManager,didDiscover peripheral: CBPeripheral,advertisementData: [String : Any],rssi RSSI: NSNumber)メソッドが呼ばれます。

この時注意しなくてはいけないのがconnectを行うperipheralはメンバに保持しておかないといけないという点です。
これ以降に呼ばれるメソッドにもperipheralは引数として保持していますが、ローカルに保持していないperipheralに対してwriteなどを行なっても実行されません。

    var myPeripheral: CBPeripheral!

    func centralManager(_ central: CBCentralManager,
                        didDiscover peripheral: CBPeripheral,
                        advertisementData: [String : Any],
                        rssi RSSI: NSNumber) {
         myPeripheral = peripheral
         myCentralManager.connect(myPeripheral, options: nil)
    }

今回は使用していない2つの引数ですが、advertisementDataはその名のとうりperipheral側でadvertiseで持たせたデータが入っています。

RSSIはperipheralの電波強度が入っています。よくRSSIはcentralとperipheral間の距離だと勘違いしている人がいますが、電波強度なのでperipheralの充電が減ったりすると当然値が変化してしまいます。

そのためRSSI==距離ではないので注意

⑥ peripheralのServiceを検出する

コネクトが成功したらメンバとして保持しておいたperipheralにdelegateをセットしてServiceの検索を行います。

こちらもスキャンを行なっていた時同様nilを指定するとコネクトしているPeripheralの全てのServiceを検出します。

    func centralManager(_ central: CBCentralManager, didConnect peripheral: CBPeripheral) {
        myPeripheral.delegate = self
        myPeripheral.discoverServices([CBUUID(string: "19688AFB-4E68-4F21-BCBA-421220280930")])
    }

⑦ Serviceの中のCharacteristicを検出する

Serviceを検出すると以下のメソッドに渡ってくるのでその中でServiceの保持しているCharacteristicをさらに探しに行きます。

discoverCharacteristicsの第一引数にもnilを渡した場合はServiceの保持しているすべてのCharacteristicがそのまま渡されることになります。

    func peripheral(_ peripheral: CBPeripheral, didDiscoverServices error: Error?) {
        if error != nil {
            print(error)
        }
        peripheral.services.forEach { servie in
           if service.uuid.uuidString == "19688AFB-4E68-4F21-BCBA-421220280930" {
               myPeripheral.discoverCharacteristics([CBUUID(string: "999889FF-42B0-4FC8-B5BC-0CAB8C323FD2")], for: service)
           }
        }
    }

⑧ 検出したCharacteristicに対してwriteする

あとはperipheralに向けて値をwriteするだけです。
冒頭の動画では0x01, 0x02, 0x03の値をランダムに送ってperipheral側で音声を出力していました。

    let sendData: [UInt8] = [0x01, 0x02, 0x03]

    func peripheral(_ peripheral: CBPeripheral, didDiscoverCharacteristicsFor service: CBService, error: Error?) {
        if error != nil {
            print(error)
        }

        service.characteristics?.forEach{ characteristic in
            if characteristic.uuid.uuidString == "999889FF-42B0-4FC8-B5BC-0CAB8C323FD2"{
                let data = Data(bytes: [sendData.randomElement()!])
                myPeripheral!.writeValue(data, for: targetCharacteristic, type: .withResponse)
            }
        }
    }

writeは必ずこのメソッドの中で呼ばなければいけないかというとそうではなく、このメソッドに到達した時点でwriteできることが可能だということが証明されるものだと考えてください。

peripheralを他のクラスに渡してwriteやread,notifyなどを行うことも可能です。

Peripheralをiosで実装した際のキャッシュ問題

ios以外でperipheralを作った時は問題ないんですが、CoreBluetoothでPeripheralを実装するともともとデバイスの保持しているServiceやCharacteristicしか検出することができません。
これがデバイスがGATTをキャッシュしていることが問題で起こる問題です。

以下のメソッドの中で再度Serviceの検出を行うことで追加したServiceを見つけることができます。

    func peripheral(_ peripheral: CBPeripheral, didModifyServices invalidatedServices: [CBService]) {
        myPeripheral.discoverServices([CBUUID(string: "19688AFB-4E68-4F21-BCBA-421220280930")])
    }

僕のXcodeでは、画面遷移がデフォルトで下のような挙動になってしまい、
「普通にフルスクリーンで表示させたいんだけどな、、、」
と一瞬詰まったのでメモします。

※Xcodeのバージョンは11.2.1でした。

かなり初心者向けの内容です。

解決方法

（0. 右のInspectorのメニュー画面を出していなかったら、⓪を押して表示）
　1. ①を押してView Controllerの設定を表示
　2. ②を押してAttributes Inspectorを表示
　3. ③のPresentationを、「Automatic」→「Full Screen」に変更

これでフルスクリーンで画面遷移ができるようになります。

おまけ

③のPresentationの上にあるTransition Styleを変更することで、画面遷移のアニメーションを変更することができます。

• Cover Vertical（デフォルト）：次の画面が下から上にスライドしてくる
• Flip Horizontal：回転して画面が入れ替わる。前の画面の裏に次の画面があるような挙動
• Cross Dissolve：クロスディゾルブ。前の画面がフェードアウト、次の画面がフェードインしてくる
• Partial Curl：紙を下からめくるようなアニメーション

はじめに

Swift初心者ではありますが、以前から興味があったCoreMLで機械学習にチャレンジしてみました。
機械学習と聞くと、なんとなく難しそうでハードルが高いイメージがあったのですが、実際に触れてみると想像よりも簡単に実装できましたのでまとめてみました。

そもそもCore MLとは？については、まとめられている記事がありましたので紹介させていだきます。
Appleの機械学習がヤバい

成果物

今回は、機械学習モデルを活用してiPhoneで撮影した画像の中の主要なオブジェクトを分類して、その中で１番割合を占めているオブジェクト名を表示する機能を作成していきます。

Siamese cat = シャム猫のようですね。（正解はラグドールなのでOKですかね？笑）
猫の種類まで検出するのすごい。。
一応猫を判別することに成功しました！

作成の流れ

作成にあたり以下のような流れで進めていきます。

1. Core MLを使用するための前準備

Core MLを使用するためには、モデルのダウンロードとインポートが必要になります。
ここでは、こちらの工程を説明していきます。

1-1. Core MLモデルのダウンロード

今回は、画像識別を行うためのCore MLモデルの1つであるMobileNetV2を使用します。
そのために、以下Apple developerサイトのモデル一覧からダウンロードする必要があります。
https://developer.apple.com/jp/machine-learning/models/

「モデルを見る」をクリックすると以下の画像が表示されます。

赤枠内のファイルをダウンロードすることで、今回使用するCore MLモデルを入手することができます。

1-2. Core MLモデルをインポート

実際に使用するためにXcodeにCore MLモデルをインポートしていきます。
とは言っても、実際にはドラッグ&ドロップするだけの作業になります。。

MobileNetV2.mlmodelが追加されていれば準備作業は完了です。
続いて、実装作業に進んでいきます。

2. 実装

ここでは、
2-1. iPhoneで撮影した画像を表示する処理
2-2. 画像データを機械学習モデルで分類する処理
を順に実装していきます。

2-1. iPhoneで撮影した画像を表示する処理

2-1-1. StoryBoadに設置

今回は個人的に楽に実装しやすそうなNavigationBarにCameraを配置していきます。
撮影した写真を表示させるためにUIImageViewを配置します。

2-1-2. 機能を実装

先ほど設置したオブジェクトにアクションを追加していきます。

• Cameraをタップするとカメラを起動させる
• UIImageViewに撮影した画像を表示させる

ViewController.swift

class ViewController: UIViewController, UINavigationControllerDelegate {
    // 撮影した画像を表示するImageView
    @IBOutlet weak var imageView: UIImageView!

    let imagePicker = UIImagePickerController()

    override func viewDidLoad() {
        super.viewDidLoad()

        imagePicker.delegate = self
        // .photoLibraryにするとフォト内の写真を開くことができます。
        imagePicker.sourceType = .camera
        imagePicker.allowsEditing = false

    }
    /// NavigationbarItemのカメラをタップした時のアクション
    @IBAction func didSelectCamera(_ sender: Any) {
        present(imagePicker, animated: true, completion: nil)
    }
}

/// UIImagePickerの処理
extension ViewController: UIImagePickerControllerDelegate {

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {

        if let userSelectedImage = info[.originalImage] as? UIImage {
            imageView.image = userSelectedImage
        }
        imagePicker.dismiss(animated: true, completion: nil)
    }
}

UIImagePickerController:
https://developer.apple.com/documentation/uikit/uiimagepickercontroller

2-1-3. info.plistでカメラ使用許可などを設定

カメラ使用などにユーザーの許可が必要になるためinfo.plistに設定を追加します。

コードではこちらになります。

info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>こちらの機能にはフォトを使用します</string>
<key>NSCameraUsageDescription</key>
<string>こちらの機能にはカメラを使用します</string>

2-2. 機械学習の処理を実装

今回は、Core MLで画像の分類を行うためVisionフレームワークを使用して実装していきます。

2-2-1. 使用するフレームワークなどをimportする

ViewController.swift

import CoreML
import Vision

Core ML:
https://developer.apple.com/jp/documentation/coreml
Visionフレームワーク:
https://developer.apple.com/documentation/vision

2-2-2. Core MLモデルのインスタンス生成と処理

ViewController.swift

// 使用するCore MLモデルのインスタンスを生成
let model = VNCoreMLModel(for: MobileNetV2().model)
// これでVisionからリクエストを送りmodelを元に解析することができる
let request = VNCoreMLRequest(model: model) { (request, error) in
     // 解析結果を分類情報として保存
     guard let results = request.results as? [VNClassificationObservation] else {
         return
     }
}

VNCoreMLModel:
https://developer.apple.com/documentation/vision/vncoremlmodel
VNClassificationObservation:
https://developer.apple.com/documentation/vision/vnclassificationobservation

2-2-3. 画像の解析リクエストをする

2-2-2で作成したCore MLモデルの解析をリクエストする処理を書いていきます。

ViewController.swift

// Visionへリクエストを送るためにUIImage→CIImageへ変換する
let ciImage = CIImage(image: image)

// 画像解析をリクエスト
let handler = VNImageRequestHandler(ciImage: ciImage)

// リクエストを実行
do {
    try handler.perform([request])
}
catch {
    print(error)
}

CIImage:
https://developer.apple.com/documentation/coreimage/ciimage
VNImageRequestHandler:
https://developer.apple.com/documentation/vision/vnimagerequesthandler

3. 完成形

ViewController.swift

import UIKit
import CoreML
import Vision

class ViewController: UIViewController {
    // 撮影した画像を表示するImageView
    @IBOutlet weak var imageView: UIImageView!

    let imagePicker = UIImagePickerController()

    override func viewDidLoad() {
        super.viewDidLoad()

        imagePicker.delegate = self
        imagePicker.sourceType = .camera
        imagePicker.allowsEditing = false

    }

    @IBAction func didSelectCamera(_ sender: Any) {
        present(imagePicker, animated: true, completion: nil)
    }

}

/// UIImagePickerの処理
extension ViewController: UINavigationControllerDelegate, UIImagePickerControllerDelegate {

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {

        if let userSelectedImage = info[.originalImage] as? UIImage {
            imageView.image = userSelectedImage

            // 画像からオブジェクトを検出し、出力する
            detectImageObject(image: userSelectedImage)
        }

        imagePicker.dismiss(animated: true, completion: nil)
    }

    /// 画像からオブジェクトを検出・結果を出力
    func detectImageObject(image: UIImage) {
        // VNCoreMLModel(for: xx.modle): xxは使用するCore MLモデルによって変わります
        guard let ciImage = CIImage(image: image), let model = try? VNCoreMLModel(for: MobileNetV2().model) else {
            return
        }
        // Core MLモデルを使用して画像を処理する画像解析リクエスト
        let request = VNCoreMLRequest(model: model) { (request, error) in
            // 解析結果を分類情報として保存
            guard let results = request.results as? [VNClassificationObservation] else {
                return
            }

            // 画像内の一番割合が大きいオブジェクトを出力する
            if let firstResult = results.first {
                let objectArray = firstResult.identifier.components(separatedBy: ",")
                if objectArray.count == 1 {
                    self.navigationItem.title = firstResult.identifier
                } else {
                    self.navigationItem.title = objectArray.first
                }
            }
        }

        // 画像解析をリクエスト
        let handler = VNImageRequestHandler(ciImage: ciImage)

        // リクエストを実行
        do {
            try handler.perform([request])
        }
        catch {
            print(error)
        }
    }
}

VisionおよびCore MLを使用した画像の分類
https://developer.apple.com/documentation/vision/classifying_images_with_vision_and_core_ml

まとめ

Core MLの情報はdeveloper.appleにサンプルコードなどがあり、手が出しやすい部類かなと思います。また、用意されているCore MLモデル以外に他社製の機械学習モデルも変換してアプリで使用することができるようなので、かなりの可能性が秘めているなと感じました。ただ、まだ理解できてないところが多いので、実際にコードを書きながら理解を深めて記事でも書ければと思います。

また、本記事に間違い等ございましたら、
大変恐縮でありますがご指摘いただければと存じます。
よろしくお願いいたします。

はじめに

Swift初心者ではありますが、以前から興味があったCoreMLで機械学習にチャレンジしてみました。
機械学習と聞くと、なんとなく難しそうでハードルが高いイメージがあったのですが、実際に触れてみると想像よりも簡単に実装できましたのでまとめてみました。

そもそもCore MLとは？については、まとめられている記事がありましたので紹介させていだきます。
Appleの機械学習がヤバい

成果物

今回は、機械学習モデルを活用してiPhoneで撮影した画像の中の主要なオブジェクトを分類して、その中で１番割合を占めているオブジェクト名を表示する機能を作成していきます。

Siamese cat = シャム猫のようですね。（ラグドールなのでOKですかね？）
一応猫を判別することに成功！

作成の流れ

作成にあたり以下のような流れで進めていきます。

1. Core MLを使用するための前準備

Core MLを使用するためには、モデルのダウンロードとインポートが必要になります。
ここでは、こちらの工程を説明していきます。

1-1. Core MLモデルのダウンロード

今回は、画像識別を行うためのCore MLモデルの1つであるMobileNetV2を使用します。
そのために、以下Apple developerサイトのモデル一覧からダウンロードする必要があります。
https://developer.apple.com/jp/machine-learning/models/

「モデルを見る」をクリックすると以下の画像が表示されます。

赤枠内のファイルをダウンロードすることで、今回使用するCore MLモデルを入手することができます。

1-2. Core MLモデルをインポート

実際に使用するためにXcodeにCore MLモデルをインポートしていきます。
とは言っても、実際にはドラッグ&ドロップするだけの作業になります。。

MobileNetV2.mlmodelが追加されていれば準備作業は完了です。
続いて、実装作業に進んでいきます。

2. 実装

ここでは、
2-1. iPhoneで撮影した画像を表示する処理
2-2. 画像データを機械学習モデルで分類する処理
を順に実装していきます。

2-1. iPhoneで撮影した画像を表示する処理

2-1-1. StoryBoadに設置

今回は個人的に楽に実装しやすそうなNavigationBarにCameraを配置していきます。
撮影した写真を表示させるためにUIImageViewを配置します。

2-1-2. 機能を実装

先ほど設置したオブジェクトにアクションを追加していきます。

• Cameraをタップするとカメラを起動させる
• UIImageViewに撮影した画像を表示させる

ViewController.swift

class ViewController: UIViewController, UINavigationControllerDelegate {

    @IBOutlet weak var imageView: UIImageView!

    let imagePicker = UIImagePickerController()

    override func viewDidLoad() {
        super.viewDidLoad()

        imagePicker.delegate = self
        // .photoLibraryにするとフォト内の写真を開くことができます。
        imagePicker.sourceType = .camera
        imagePicker.allowsEditing = false

    }
    /// NavigationbarItemのカメラをタップした時のアクション
    @IBAction func didSelectCamera(_ sender: Any) {
        present(imagePicker, animated: true, completion: nil)
    }
}

/// UIImagePickerの処理
extension ViewController: UIImagePickerControllerDelegate {

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {

        if let userSelectedImage = info[.originalImage] as? UIImage {
            imageView.image = userSelectedImage
        }
        imagePicker.dismiss(animated: true, completion: nil)
    }
}

UIImagePickerController:
https://developer.apple.com/documentation/uikit/uiimagepickercontroller

2-1-3. info.plistでカメラ使用許可などを設定

カメラ使用などにユーザーの許可が必要になるためinfo.plistに設定を追加します。

コードではこちらになります。

info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>こちらの機能にはフォトを使用します</string>
<key>NSCameraUsageDescription</key>
<string>こちらの機能にはカメラを使用します</string>

2-2. 機械学習の処理を実装

今回は、Core MLで画像の分類を行うためVisionフレームワークを使用して実装していきます。

2-2-1. 使用するフレームワークなどをimportする

ViewController.swift

import CoreML
import Vision

Core ML:
https://developer.apple.com/jp/documentation/coreml
Visionフレームワーク:
https://developer.apple.com/documentation/vision

2-2-2. Core MLモデルのインスタンス生成と処理

ViewController.swift

// 使用するCore MLモデルのインスタンスを生成
let model = VNCoreMLModel(for: MobileNetV2().model)
// これでVisionからリクエストを送りmodelを元に解析することができる
let request = VNCoreMLRequest(model: model) { (request, error) in
     // 解析結果を分類情報として保存
     guard let results = request.results as? [VNClassificationObservation] else {
         return
     }
}

VNCoreMLModel:
https://developer.apple.com/documentation/vision/vncoremlmodel
VNClassificationObservation:
https://developer.apple.com/documentation/vision/vnclassificationobservation

2-2-3. 画像の解析リクエストをする

2-2-2で作成したCore MLモデルの解析をリクエストする処理を書いていきます。

ViewController.swift

// Visionへリクエストを送るためにUIImage→CIImageへ変換する
let ciImage = CIImage(image: image)

// 画像解析をリクエスト
let handler = VNImageRequestHandler(ciImage: ciImage)

// リクエストを実行
do {
    try handler.perform([request])
}
catch {
    print(error)
}

CIImage:
https://developer.apple.com/documentation/coreimage/ciimage
VNImageRequestHandler:
https://developer.apple.com/documentation/vision/vnimagerequesthandler

3. 完成形

ViewController.swift

import UIKit
import CoreML
import Vision

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

    let imagePicker = UIImagePickerController()

    override func viewDidLoad() {
        super.viewDidLoad()

        imagePicker.delegate = self
        imagePicker.sourceType = .camera
        imagePicker.allowsEditing = false

    }

    @IBAction func didSelectCamera(_ sender: Any) {
        present(imagePicker, animated: true, completion: nil)
    }

}

/// UIImagePickerの処理
extension ViewController: UINavigationControllerDelegate, UIImagePickerControllerDelegate {

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {

        if let userSelectedImage = info[.originalImage] as? UIImage {
            imageView.image = userSelectedImage

            // 画像からオブジェクトを検出し、出力する
            detectImageObject(image: userSelectedImage)
        }

        imagePicker.dismiss(animated: true, completion: nil)
    }

    /// 画像からオブジェクトを検出・結果を出力
    func detectImageObject(image: UIImage) {
        // VNCoreMLModel(for: xx.modle): xxは使用するCore MLモデルによって変わります
        guard let ciImage = CIImage(image: image), let model = try? VNCoreMLModel(for: MobileNetV2().model) else {
            return
        }
        // Core MLモデルを使用して画像を処理する画像解析リクエスト
        let request = VNCoreMLRequest(model: model) { (request, error) in
            // 解析結果を分類情報として保存
            guard let results = request.results as? [VNClassificationObservation] else {
                return
            }

            // 画像内の一番割合が大きいオブジェクトを出力する
            if let firstResult = results.first {
                let objectArray = firstResult.identifier.components(separatedBy: ",")
                if objectArray.count == 1 {
                    self.navigationItem.title = firstResult.identifier
                } else {
                    self.navigationItem.title = objectArray.first
                }
            }
        }

        // 画像解析をリクエスト
        let handler = VNImageRequestHandler(ciImage: ciImage)

        // リクエストを実行
        do {
            try handler.perform([request])
        }
        catch {
            print(error)
        }
    }
}

VisionおよびCore MLを使用した画像の分類
https://developer.apple.com/documentation/vision/classifying_images_with_vision_and_core_ml

まとめ

Core MLの情報はdeveloper.appleにサンプルコードなどがあり、手が出しやすい部類かなと思います。また、用意されているCore MLモデル以外に他社製の機械学習モデルも変換してアプリで使用することができるようなので、かなりの可能性が秘めているなと感じました。ただ、まだ理解できてないところが多いので、実際にコードを書きながら理解を深めて記事でも書ければと思います。

また、本記事に間違い等ございましたら、
大変恐縮でありますがご指摘いただければと存じます。
よろしくお願いいたします。

最初に

前回の続きです。
こちらを見てからどーぞ。
https://qiita.com/daichi77/items/0c849108ada04d7083e0#

完成画面

こんな感じで僕のクラロワの最高トロフィーとかを表示できました。

Modelのファイルたち

解説

ClashRoyaleClientError.swift
エラーのパターンをまとめたenum

ClashRoyaleClientError.swift

enum ClashRoyaleClientError: Error {

    //通信に失敗
    case connectionError(Error)

    //レスポンスの解釈に失敗
    case responseParseError(Error)

    //エラーレスポンスを受け取った時
    case apiError(Error)
}

ClashRoyaleAPIError
APIから帰ってきたエラーメッセージなどを格納するやつ

ClashRoyaleAPIError

struct ClashRoyaleAPIError: Decodable, Error {
    struct fieldError: Decodable {
        let error: Bool
        let status: Int
        let message: String
    }
}

Player.swift
APIから取ってきた情報を格納する構造体。
JSONにあわせて作りましょう。
Decodableを継承させておくといい感じにjsonを構造体に変換してくれます。

Player.swift

public struct Player: Decodable {
    let tag: String
    let name: String
    let expLevel: Int
    let trophies: Int
    let bestTrophies: Int
    let wins: Int
    let losses: Int
    let battleCount: Int
    let threeCrownWins: Int
    let challengeCardsWon: Int
    let challengeMaxWins: Int
    let tournamentCardsWon: Int
    let tournamentBattleCount: Int
    let donations: Int
    let donationsReceived: Int
    let totalDonations: Int
    let warDayWins: Int
    let clanCardsCollected: Int
    struct arena: Decodable {
        let id: Int
        let name: String
    }
    struct leagueStatistics: Decodable {
        struct currentSeason: Decodable {
            let trophies: Int
            let bestTrophies: Int
        }
        struct previousSeason: Decodable {
            let id: String
            let trophies: Int
            let bestTrophies: Int
        }
        struct bestSeason: Decodable {
            let id: String
            let trophies: Int
        }
    }
    struct Badges: Decodable {
        let name: String
        let level: Int?
        let maxLevel: Int?
        let progress: Int
    }
    let badges: [Badges]
    struct Achievements: Decodable {
        let name: String
        let stars: Int
        let value: Int
        let target: Int
        let info: String
    }
    let achievements: [Achievements]
    struct Cards: Decodable {
        let name: String
        let id: Int
        let level: Int
        let maxLevel: Int
        let count: Int
        struct iconUrls: Decodable {
            let medium: String
        }
    }
    let cards: [Cards]
    struct currentFavouriteCard: Decodable {
        let name: String
        let id: Int
        let maxLevel: Int
        struct iconUrls: Decodable {
            let medium: String
        }
    }
}

Result.swift
その名の通り結果を返すenum型です。
APIからデータが返ってくればsucceess(T)エラーが帰ってくればfailure(error)
になります。

Result.swift

enum Result<T, Error: Swift.Error> {
    case success(T)
    case failure(Error)

    init(value: T) {
        self = .success(value)
    }

    init(error: Error) {
        self = .failure(error)
    }
}

HTTPMethod.swift
今回はGETしか使いませんがとりあえず他のやつも定義しています。

HTTPMethod.swift

enum HTTPMethod: String {
    case get = "GET"
    case post = "POST"
    case put = "PUT"
    case head = "HEAD"
    case delete = "DELETE"
    case patch = "PATCH"
    case trace = "TRACE"
    case options = "OPTIONS"
    case connect = "CONNECT"
}

ClashRoyaleAPI.swift
ここでpathとかjsonを変換する型(今回はPlayerを取ってくるのでPlayerに)などを決めます。
例えばプレイヤーじゃなくクランを取ってくる場合はResponseの型をClan型にしたりします。
pathなども同様にPostならpostにしたりします。

ClashRoyaleAPI.swift

final class ClashRoyaleAPI {
    struct SearchUser: ClashRoyaleRequest {

        typealias Response = Player//ここは取ってくる情報によって違う値に変更

        let keyword: String
        var method: HTTPMethod {
            return .get
        }

        var path: String {
            return  "players" + keyword
        }
    }
}

ClashRoyaleRequest.swift
ここでリクエストの設定をしたりJsonをPlayer.swiftに変換したりしてます。

ClashRoyaleRequest.swift

//protocolで切り出してます。これをもとにリクエストを作ります。
protocol ClashRoyaleRequest {
    associatedtype Response: Decodable
    var baseURL: URL { get }
    var headers: [String: String] { get }
    var path: String { get }
    var method: HTTPMethod { get }
}
// baseURLとHeaderはどのリクエストでも共通なのでprotocolextensionで初期化
extension ClashRoyaleRequest {
    var baseURL: URL {
        return URL(string: "https://api.clashroyale.com/v1/")!
    }
    var headers: [String: String] {
        return [
            "Authorization": "Bearer {apikey}"//各自のAPIkey
        ]
    }

    func buildURLRequest() -> URLRequest {
        //baseURLとpathを合体。
        let url = baseURL.appendingPathComponent(path)
        let components = URLComponents(url: url, resolvingAgainstBaseURL: true)
        var urlRequest = URLRequest(url: url)
        urlRequest.url = components?.url
        urlRequest.httpMethod = method.rawValue//get
        urlRequest.allHTTPHeaderFields = headers//apikeyなど
        return urlRequest
    }
    //APIから返ってきた値が200から300ならjsonをUserモデルに変換してます。
    func response(from data: Data, urlResponse: URLResponse) throws -> Response {
        let decoder = JSONDecoder()
        if case (200..<300)? = (urlResponse as? HTTPURLResponse)?.statusCode {
            print(Response.self)
            //このResponse.selfはrequestによって型が変わります
            return try decoder.decode(Response.self, from: data)
        } else {
            //ClashRoyaleAPIErrorの型に変換
            throw try decoder.decode(ClashRoyaleAPIError.self, from: data)
        }
    }
}

ClashRoyaleClient.swift

class ClashRoyaleClient {
    private let session: URLSession = {
        let configuration = URLSessionConfiguration.default
        let session = URLSession(configuration: configuration)
        return session
    }()
    //api叩くところです。
    func send<Request: ClashRoyaleRequest> (
        request: Request,
        completion: @escaping (Result<Request.Response,ClashRoyaleClientError>) -> Void) {
        let urlRequest = request.buildURLRequest()
        let task = self.session.dataTask(with: urlRequest) {
            data, response, error in
            switch(data,response,error) {
            case (_,_, let error?):
                completion(Result(error: .connectionError(error)))
            case (let data?,let response?, _):
                do {//responseを読んでjsonを変換
                    let response = try request.response(from: data, urlResponse: response)

                    completion(Result(value: response))
                } catch let error as ClashRoyaleAPIError {//api呼べてないとか
                    completion(Result(error: .apiError(error)))
                } catch {//データは帰ってきたけどparseに失敗した時。
                    //jsonの形式とmodelの形式があっているか確認しましょう。
                    completion(Result(error: .responseParseError(error)))
                }
            default:
                fatalError("invalid response combination \(data),\(response), \(error)")
            }
        }
        DispatchQueue.main.async {
            task.resume()
        }
    }
}

まとめ

前回の記事に書いたPresenterからClashRoyaleClient.swiftを呼んでます。
記事が分かれてしまってすみません。
解説はコメントに書いてありますが聞きたいことがあればコメントください。

前回の記事

https://qiita.com/daichi77/items/0c849108ada04d7083e0#

問題点

ベタ書きでエラーが発生する可能性は十分あるんで悩ましい。

let nib = UINib(nibName: "MyCell", bundle: nil)

か

tableView.register(UINib(nibName: "MyCell", bundle: nil), forCellReuseIdentifier: "MyCellIdentifier")

やりたいこと

• Embedded Framework 対応
  • bundle に入れるべき値は cell class によって変わる
• nibNameの入れ方をスマートに

解決方法

String(describing:)

let nibName = String(describing: MyCell.self)

• 参照 - https://qiita.com/vc7/items/91070050646ecbf21ae3

動的に Bundle を取得

let bundle = Bundle(for: MyCell.self)

Bundle が動的に取得できれば Cell が他の target/framework に定義されても困らない。

合併してみる

合併したらこんな感じになります

let nibName = String(describing: MyCell.self)
let bundle = Bundle(for: MyCell.self)

let nib = UINib(nibName: nibName, bundle: bundle)

よしなにヘルパーを設ける

extension UITableViewCell {
    public static var nib: UINib {
        return UINib(nibName: nibName, bundle: Bundle(for: self))
    }

    static var nibName: String {
        return String(describing: MyCell.self)
    }
}

使い方

tableView.register(MyCell.nib, forCellReuseIdentifier: "MyCellIdentifier")

この書き方にするなら、ヒューマンエラ可能性も低くになると思います。
次は cell reuse identifier の方を書こうと思います。

ゆめみの日常

ある日社内のSlackでこんなやり取りがありました。

※伯方の塩は博多でつくっているわけではないそうです。

このスレッドをながめていたら、昔Twitterで見た「ずんどこきよしのプログラム」っぽいものが作れるんじゃないかと思い、CoreBluetoothで作ってみました。

そして出来たのがこちら。(※音が流れるので注意！)

https://twitter.com/u11238123/status/1198624428143214592

アプリ通信の流れについて

このアプリはCentral(動画内でのiPhone)側からPeripheral(動画内でのiPad)側にwriteをして音声を出力しています。

Bluetoothは固有の名称などがたくさんあり、それを全て説明していると1つ記事がかけてしまうので詳しく知りたい方は過去に僕がまとめた記事があるのでそれを参照してください。

また、この記事ではPeripheralの実装の解説だけに絞り、音の再生部分などは省略します?‍♂️

peripheralの実装

Peripheral側でデータを受け取る流れは以下のような感じです。
① Bluetoothの使用許可をinfo.plistに書く
② CBPeripheralManagerのインスタンスを作る
③ デバイスがBluetoothを使用可能か判定
④ ServiceとCharacteristicをつめる
⑤ アドバタイズ(情報の公開)開始！
⑥ データを受け取る

厳密にアプリを作る際はもっと細かく用意されているメソッドを呼び出してハンドリングなどが必要になりますが、複雑になるので今回は省略します。

①Bluetoothの使用許可をinfo.plistに書く

ios13からiosデバイスでBluetoothを使用する際permissionの許可が必須になったため記載してあげる必要があります。

    <key>NSBluetoothAlwaysUsageDescription</key>
    <string>伯方の塩で使うよ</string>

ここに記載した文章がアプリ内のアラートに表示されますが、大手などのアプリでもいい加減なものを複数観測しているので、審査の際は書いてあればOKなのかなと思います。

ですが、ユーザに不信感を与えるので何に使うかは詳しく書いておいた方が良いと思います。

② CBPeripheralManagerのインスタンスを作る

コードはこんな感じです。
CBPeripheralManagerのインスタンスが作成されるとデリゲートメソッドが呼ばれはじめます。

class ViewController: UIViewController {
    var manager:  CBPeripheralManager!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.manager = CBPeripheralManager(delegate: self, queue: nil)
    }
}
extension ViewController: CBPeripheralManagerDelegate {}

③ デバイスがBluetoothを使用可能か判定し、可能なら情報をつめる

CBPeripheralManagerのインスタンスを作るとまず最初にperipheralManagerDidUpdateStateというメソッドが呼ばれます。

まず最初にデバイスがアドバタイズ可能かを判定する必要があります。peripheral(デバイス)の状態は引数に持っているperipheralのstateから判別することができます。

func peripheralManagerDidUpdateState(_ peripheral: CBPeripheralManager) {

    switch peripheral.state {
    case .unknown:
        print("よくわかないけどダメ！")
    case .resetting:
        print("システムとの接続がよくわからんからダメ！")
    case .unsupported:
        print("Bluetooth許可されてないじゃんダメ！")
    case .unauthorized:
        print("このデバイスBluetooth使えないからダメ！")
    case .poweredOff:
        print("Bluetooth offになってるからダメ！")
    case .poweredOn:
        print("つかえるよ！！！")
    @unknown default:
        fatalError("へんなのきたからダメ！")
    }
}

④ ServiceとCharacteristicをつめる

デバイスが通信可能であれば、アドバタイズ情報の中にServiceとCharacteristicをつめるわけですが、それぞれのUUIDを決める必要があります。
UUID作成用のtarminalコマンド(uuidgen)が用意されているのでそれで作成するのが簡単です。

試しに2つ作成してみました、1つ目をServiceのUUID、2つ目をCharacteristicのUUIDとします。

19688AFB-4E68-4F21-BCBA-421220280930
999889FF-42B0-4FC8-B5BC-0CAB8C323FD2

プロパティとパーミッションは全部盛りにしていますが、今回は実質writeしか使わないのでプロパティはwrite、パーミッションはwritableだけでも問題ありません。

    func peripheralManagerDidUpdateState(_ peripheral: CBPeripheralManager) {
        switch peripheral.state {
        case .poweredOn:
            let serviceUUID = CBUUID(string: "19688AFB-4E68-4F21-BCBA-421220280930")
            let characteristicUUID = CBUUID(string: "999889FF-42B0-4FC8-B5BC-0CAB8C323FD2")

            let service = CBMutableService(type: serviceUUID, primary: true)
            let property: CBCharacteristicProperties = [.notify, .read, .write]
            let permission: CBAttributePermissions = [.readable, .writeable]
            var characteristic = CBMutableCharacteristic(type: characteristicUUID, properties: property, value: nil, permissions: permission)
            service.characteristics = [characteristic]
            self.manager.add(service)
        @unknown default:
        //コードが長くなってしまうのでダメなcaseは省略
            break
        }
    }

図解ServiceとCharacteristic

サービスとキャラクタリスティックの図を僕の過去の記事から引っ張ってきました。

今回はサービス１つ、キャラクタリスティック1つの構成ですが、市販されているPeripheralの多くは複数のサービスとキャラクタリスティックを保持しており、図のよう担っていると思います。

⑤ アドバタイズ(情報の公開)開始

サービスの追加が無事成功するとperipheralManager(_ peripheral: CBPeripheralManager, didAdd service: CBService, error: Error?)というメソッドが呼ばるので、その中でアドバタイズを行います。

    func peripheralManager(_ peripheral: CBPeripheralManager, didAdd service: CBService, error: Error?) {
        if error != nil {
            print("失敗してるよ")
        }
        if self.manager.isAdvertising == false {
            let advertiseData = [CBAdvertisementDataLocalNameKey: "博多の塩"]
            manager.startAdvertising(advertiseData)
        }
    }

引数なしでも良いのですが、せっかくなので名前をつけてアドバタイズさせてみました。
iosデバイス同士でやる時の注意なのですが、一度ペアリングを行ってしまうと以降ここで登録した名前ではなくデバイス名が表示されてしまうので注意が必要です！

アドバタイズが問題なくできてるかの確認はLightBlue® Explorerというアプリを使うのが便利です。

アプリを起動すると画像のように近くでアドバタイズを行なっているデバイスを見つけることができます。

⑥ データを受け取る

central側からwriteされた場合はperipheralManager(_ peripheral: CBPeripheralManager, didReceiveWrite requests: [CBATTRequest])の中にwriteされた20byte以下のData型が飛んでくるのでその中身を見るだけです！

データ型の中身を確認する際は文字列にするのがわかりやすくて良いので以下のようなextendionをData型に生やしておくと便利です。

extension Data {

    struct HexEncodingOptions: OptionSet {
        let rawValue: Int
        static let upperCase = HexEncodingOptions(rawValue: 1 << 0)
    }

    func hexEncodedString(options: HexEncodingOptions = []) -> String {
        let hexDigits = Array((options.contains(.upperCase) ? "0123456789ABCDEF" : "0123456789abcdef").utf16)
        var chars: [unichar] = []
        chars.reserveCapacity(2 * count)
        for byte in self {
            chars.append(hexDigits[Int(byte / 16)])
            chars.append(hexDigits[Int(byte % 16)])
        }
        return String(utf16CodeUnits: chars, count: chars.count)
    }
}

あとはextensionで生やしたメソッドを使い、値を文字列で検出して実現したい処理をおこなうだけです。

func peripheralManager(_ peripheral: CBPeripheralManager, didReceiveWrite requests: [CBATTRequest]) {
        let responseData = requests[0].value?.hexEncodedString()
}

皆さんこんにちは、iOS Advent Calendar 2019の15日目の @imk2o です。

かなり昔に Swift時代の画面遷移実装を考える という記事を書き、実務でも使っていたのですが、今回は改めてより良い実現方法を模索してみたことを紹介します！

Storyboardとコードとの「距離」を縮める

様々な意見があると思いますが、私はStoryboardやSegueを積極的に使っています。
一方でSwiftコードとの相性については決して良いとは言えません。ただそれを理由に使うのを諦めたくはないので、可能な限りシンプルかつ安全なバインディングを模索しました。

Storyboardの要素とコードは、各要素に付与した Identifier によって関連付けますが、Segueの場合そのままではリテラルを多用することになりがちです。
そこで下記のように Segue Identifierと同じ名前のプロパティを定義することで、これを画面遷移則および、遷移先のキーとする ことができるような設計を考案しました。

この方法によって、以下の点が改善されます。

• どんなSegueがあり、どの画面(ViewController)に遷移するのかがひと目でわかる
• Segueの定義と、UIKitの画面遷移ロジックを集約できる
• Segue Identifierを表すリテラルが排除できる

以下は、Item一覧画面からの遷移則を表すコードです。

ItemListViewController.swift

extension ItemListViewController: DeclarativeRouting {
    struct SegueRoutes: SegueRouteDeclarations {
        // Segue Identifierが "showDetail" のAction Segueの遷移則
        private let showDetail = ActionSegueRoute<ItemDetailViewController> { (segue, sender) in
            // 選択したセルに対応するItemを求める
            let source = segue.source as! ItemListViewController
            guard
                let cell = sender as? UITableViewCell,
                let item = source.item(for: cell)
            else {
                fatalError()
            }

            return item.id    // 詳細画面にItem IDを渡す
        }

        // Segue Identifierが "showPageView" のManual Segueの遷移則
        let showPageView = ManualSegueRoute<ItemPageContainerViewController>()

        static let shared: Self = .init()
        private init() {}
    }

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // 代理でハンドリング
        self.segueRoutes.prepare(for: segue, sender: sender)
    }
}

なお遷移先となるItem詳細画面は以下のような実装になっています。

ItemDetailViewController.swift

// MARK: - Routing
extension ItemDetailViewController: DestinationScene {
    typealias Context = Int    // Item IDをパラメータとして受け取る
}

コードからManual Segueを発火する方法も、上記の遷移則を利用します。

ItemListViewController.swift

    @IBAction func showPageView(_ sender: Any) {
        // Segue Routeを使って画面遷移
        // (遷移先画面がパラメータ不要なので()を渡している)
        self.segueRoutes.showPageView.perform(with: (), from: self)
    }

Segue Identifierのリテラルが排除され、遷移先に渡すパラメータの型が明確になったのではないでしょうか。

Global Routing: Segueに依らない画面遷移

ご承知のとおり、Segueのみであらゆる画面遷移を表現できるわけではありません。
Storyboardは使うけどSegueは使わない、と決めて運用しているプロダクトもあるでしょう。
そのような画面はグローバルなルーティング・テーブルに登録し、どの画面からも呼び出せるような仕組みを用意しています。

PreferencesViewController.swift

// MARK: - Routing
extension PreferencesViewController: DescribedDestinationScene {
    // パラメータなし
    typealias Context = Void

    // Preferences.storyboardのInitial View Controllerに対応する
    static let storyboardDescription = StoryboardDescription(name: "Preferences")
}

extension Routes {
    // どこからでも遷移可能なルートとして追加
    static let showPreferences = GlobalRoute<PreferencesViewController>()
}

ItemListViewController.swift

    @IBAction func showPreferences(_ sender: Any) {
        // Global Routeを使って画面遷移
        Routes.showPreferences.perform(with: (), from: self)
    }

原理

SwiftPM化したライブラリとサンプルコードをGitHubで公開していますので、詳細はそちらを読んでください?‍♂️
ポイントだけ列挙すると、

• Segue Identifierと SegueRoutes 下のプロパティとのバインディングは Mirror を使っている
• 遷移先画面は DestinationScene プロトコルに準拠し、受け取る型を宣言している
• 受け取ったパラメータはVCが保有するのではなく ContextStore にVCのインスタンスと紐付けて管理している
  • NSMapTable でVCを弱参照キーとすることで、パラメータは自動破棄
• Global Routingできる画面は
  • DescribedDestinationScene プロトコルに準拠し、インスタンス化のためのストーリーボード情報を記述
  • Routes にタイプ・プロパティを追加して、画面VCに一意な名前を付与

Segue Actionの必要性

このフレームワークが出来てしまうと、iOS13から使えるようになったSegue Actionは果たして必要なのか？という疑問に辿り着きました。Segue ActionによってStoryboard/Segueを使いつつDIできる利点はありますが、このフレームワークでも DescribedDestinationScene に準拠すればDIが可能です。
(正確にはVC自体に注入していないが、意図した振る舞いにはなる)

SomeViewController.swift

protocol SomeViewModel { ... }
class SomeViewController: UIViewController, DescribedDestinationScene {
    typealias Context = SomeViewModel
    static let storyboardDescription = StoryboardDescription(...)
    ...
}

// Test with mock
struct MockViewModel: SomeViewModel { ... }
let injectableVC = InjectableViewController.instantiate(with: MockViewModel())
...

実装コストや複雑さの面においても、Segue Actionと大差ないと思います。
Manual Segueを使う場合は結局Segue Identifierで performSegue() する必要があるため、このフレームワークの方がシンプルに扱えるのではないでしょうか。

引き続きSegue Actionの利点を探りつつ、有用であればフレームワークへ統合していきたいと思います。

今後の課題

まだコンセプトレベルのフレームワークであるため、実用度を上げるべく以下の課題について検討し改善したいと思います。

• Unwind Segue対応
• guard条件(ログインしていないと遷移できない等のコントロール)
• Segue Actionの統合検討

明日は @k0mach1 さんです。お楽しみに！

こんにちは、@y_temp4です。

普段は主にフリーランスエンジニアとして Web のフロントエンド周りの開発をしており、これまでアプリの開発というものはほぼやったことがありませんでした。

しかし今回、最近流行りの Flutter を使って iOS・Android 両対応のアプリをリリースしてみましたので、そこで得た知見や、開発の流れを共有していこうと思います。

開発したアプリ

今回リリースしたのは「レジスタンス vs スパイ」というアプリです。

iOS のリンクはこちら
Android のリンクはこちら

以前職場の人とやったボードゲーム「レジスタンス」がとてもおもしろかったので、アプリで作ってみようと思い開発に挑戦してみました。

人狼ライクなボードゲームで、プレイ人数が 5 ~ 10 人と最低でも 5 人必要なのですが、人狼が好きな人ならハマると思うのでぜひプレイしてみてください ?

これまでの開発の経験

アプリ開発の流れを書いていく前に、開発者である私自信のアプリ開発の経験について共有します。

• 普段は Web のフロントエンドの開発がメイン
• アプリの経験はほぼなし（ほんの少しだけ Monaca に触れたことがあるくらい）
• Flutter は少し前にインストールしてチュートリアルだけやったことがあった

自分は完全に Web 系のエンジニアで、アプリの開発はほぼ未経験でした。これまではネイティブに触れた経験はほぼなくて、React Native や Monaca などクロスプラットフォーム系の開発基盤に少し興味を持っていたくらいです。

Flutter に関しては半年くらい前に触ったことがあったのですが、チュートリアルをやったくらいでそのときにはがっつり開発とまではいきませんでした（当時、特に作りたいものもなかったので）。

開発の手順

では実際に、開発をする上での手順をまとめていきます。

1. 画面構成を決める

まずはじめに、アプリの画面構成を考えました。

アプリの遊び方としては、アプリがインストールされた端末をプレイヤーに順番に回していくスタイル（よくある人狼アプリと同じような感じ）を想定していたので、以下を満たす必要がありました。

• 画面が順番に切り替わっていく
• 前の画面には戻れない（前のプレイヤーの情報が見れてしまうので）

そこで、アプリの画面構成としてはスクリーンを複数作成し、それを順番に切り替えていくような感じにしました。

これを、トップページにある「新しいゲームを始める」ボタンから始められるようにします。

また、アプリの途中では戻るボタンは使えませんが、いつでもゲームを破棄してホームに戻れるように、画面の右上に「ホームに戻るボタン」を配置することにしました。

最後に、トップページでは遊び方へのリンクも欲しかったので配置しました。

main.dart

import 'package:flutter/material.dart';
import 'package:resistance/models/app.dart';
import 'package:resistance/screens/home.dart';
import 'package:resistance/screens/select_member_count.dart';
import 'package:resistance/screens/add_user.dart';
import 'package:resistance/screens/check_position_before.dart';
import 'package:resistance/screens/check_position.dart';
import 'package:resistance/screens/discussion_time.dart';
import 'package:resistance/screens/select_mission_member.dart';
import 'package:resistance/screens/vote_of_confidence.dart';
import 'package:resistance/screens/vote_result.dart';
import 'package:resistance/screens/command_mission.dart';
import 'package:resistance/screens/show_mission_result.dart';
import 'package:resistance/screens/command_mission_before.dart';
import 'package:resistance/screens/show_game_result.dart';
import 'package:resistance/screens/how_to_play.dart';
import 'package:scoped_model/scoped_model.dart';

void main() {
  final app = AppModel();

  runApp(
    ScopedModel<AppModel>(
      model: app,
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'レジスタンス vs スパイ',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: TextTheme(
          display4: TextStyle(
            fontFamily: 'Arial',
            fontWeight: FontWeight.w800,
            fontSize: 24,
            color: Colors.black,
          ),
        ),
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => Home(),
        '/select_member_count': (context) => SelectMemberCount(),
        '/add_user': (context) => AddUser(),
        '/check_position_before': (context) => CheckPositionBefore(),
        '/check_position': (context) => CheckPosition(),
        '/discussion_time': (context) => DiscssionTime(),
        '/select_mission_member': (context) => SelectMissionMember(),
        '/vote_of_confidence': (context) => VoteOfConfidence(),
        '/vote_result': (context) => VoteResult(),
        '/command_mission_before': (context) => CommandMissionBefore(),
        '/command_mission': (context) => CommandMission(),
        '/show_mission_result': (context) => ShowMissionResult(),
        '/show_game_result': (context) => ShowGameResult(),
        '/how_to_play': (context) => HowToPlay(),
      },
    );
  }
}

2. 状態管理の方法を決める

アプリでは、画面をまたいで状態を保持しておく必要がありました。

Fulutter における状態管理の方法をあまり知らなかったので、とりあえず自分は「グローバルなステートがあればいいや」と思いました。

結果的には scoped_model を使い、1 つだけ app というモデルにアプリすべての状態を保持して管理することにしました。

app.dart

import 'dart:math';
import 'package:scoped_model/scoped_model.dart';

...

class AppModel extends Model {
  int _memberCount = 0;
  List _users = [];

...

  int get memberCount => _memberCount;
  String get memberCountString => '$_memberCount';
  List get users => _users;

...

  void setMemberCount(int number) {
    _memberCount = number;
  }

...

}

（※長いので省略しています。ちなみに、コードは全体だと 300 行弱くらいです。）

今回のアプリ制作では、結果的にはこれであまり困ることなく開発を進められました。状態がそこまで多くないアプリであれば、これでもなんとかなるかもしれません。

3. 各画面を実装していく

あとは愚直に画面を作成していくだけです。各画面ではそれぞれ地味にロジックを考える必要があって少し悩むこともありましたが、一応最後まで実装することができました。

2. 状態管理の方法を決めるで定義した scoped_model から値やメソッドを呼び出す際はScopedModel.of<AppModel>(context)を利用します。

参考までに、最初の画面のコードを貼っておきます。

select_member_count.dart

import 'package:flutter/material.dart';
import 'package:resistance/models/app.dart';
import 'package:scoped_model/scoped_model.dart';
import 'package:resistance/functions/to_home.dart';

class SelectMemberCount extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('プレイ人数の設定'), actions: [
        IconButton(icon: Icon(Icons.home), onPressed: () => toHome(context)),
      ]),
      body: Center(
          child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 64),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  MyCustomForm(),
                ],
              ))),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

class MyCustomFormState extends State<MyCustomForm> {
  final numberController = new TextEditingController();
  String memberCount = '5';

  void onClick(BuildContext context) {
    ScopedModel.of<AppModel>(context).setMemberCount(int.parse(memberCount));
    Navigator.pushReplacementNamed(context, '/add_user');
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('プレイ人数：',
                style: TextStyle(
                  fontSize: 18,
                )),
            DropdownButton<String>(
              value: memberCount,
              items:
                  <String>['5', '6', '7', '8', '9', '10'].map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(
                    value,
                    style: TextStyle(
                      fontSize: 18,
                    ),
                  ),
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  memberCount = value;
                });
              },
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: FlatButton(
                onPressed: () => onClick(context),
                color: Colors.blue,
                child: Text(
                  '次へ',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ));
  }
}

苦労したポイント

開発する中で大変だった点をまとめてみます。

ホームに戻る挙動

画面右上のホームに戻るボタンを実装する際、ホームに戻りますか？というダイアログに対して

• はい → ホームに戻る
• いいえ → 元の画面に戻る

という挙動を実装するのに若干手間取ったのを覚えています。最終的には実装できたので、動作するコードを貼っておきます。

Navigator.of(context).pop()とNavigator.pushNamedAndRemoveUntil(context, '/', (_) => false)がポイントですね。

to_home.dart

import 'package:flutter/material.dart';
import 'package:resistance/models/app.dart';
import 'package:scoped_model/scoped_model.dart';

void toHome(context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      // return object of type Dialog
      return AlertDialog(
        title: Text("確認"),
        content: Text('ホームに戻ります。現在のゲームのデータはリセットされますが、よろしいですか？'),
        actions: <Widget>[
          // usually buttons at the bottom of the dialog
          FlatButton(
            child: Text("いいえ"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          FlatButton(
            child: Text("はい"),
            onPressed: () {
              Navigator.pushNamedAndRemoveUntil(context, '/', (_) => false);
              ScopedModel.of<AppModel>(context).reset();
            },
          ),
        ],
      );
    },
  );
}

Admob が本番環境に反映されない

このアプリは firebase_admob を使って広告を表示していますが、本番環境にて広告が表示されずかなり悩んでいました。

が、結果的に原因はこのリンクにあるように、Admob 側で「お支払い」の設定をしていないことが原因でした･･･。

初めて Admob を使った収益化をする方は、気をつけたほうが良さそうです。

さいごに

全体を通しての感想としては、

• Dart は普段 JS / TS を書いている人であれば親しみやすい
• 実装自体は慣れれば割とスムーズにいけそう
• アプリ独特のリリースまでの流れが面倒だった

といった感じでしょうか。やはりアプリ特有のリリース手順や、開発環境の重さ（エミュレータの起動など）は慣れない部分もあり、Web の開発はその点楽だったんだな･･･と感じました。

とはいえ、これでアプリ開発は終了ではなく、今後も機会があればぜひ Flutter には触れていけたらなと思います?

また、全体通して設計には苦労したので、もし「自分だったらこのように実装するのにな〜」などといったアドバイスがありましたら、コメントにて教えていただけますと幸いです?‍♂️

---

もし今回の記事が参考になった方はぜひいいねしていただけますと嬉しいです?

最後まで読んでいただき、ありがとうございました！

レジスタンス vs スパイの iOS のリンクはこちら
レジスタンス vs スパイの Android のリンクはこちら

iOS Advent Calendar 2019の4日目担当の@satoshi-baba-0823です！
最近はBitrise職人になりつつありますが、頑張っていきますのでよろしくお願いします！

はじめに

今年もiOS界隈ではたくさんのアップデートがあったかと思います。
Swift5やSwiftUIなど開発に関わることも多かったですよね。

iOS界隈では毎年6月頃に実施されるWWDCで新機能発表されるケースが多く、その時期は注目を浴びる機能も多いです。
でも、発表直後はよく聞いたけど、最近あの機能の話聞かないなってことありますよね？
これってトリビアになりませんか？

調査方法

Google Trendsでワードごとの比較などでざっくり調べてみたいと思います。
https://trends.google.co.jp/trends/

集計対象は「すべての国」、「過去12か月間」、「すべてのカテゴリ」、「ウェブ検索」

調べてみた

ざっくりここ１年くらいでよく聞いたな〜とか、あれ？こいつってみんな対応してるのかな？って思うものを調べてみました。

Swift4 & Swift5

今年もやっぱりSwiftのアップデートありましたね！

まだまだSwfit4優勢かなと思ってましたが、Swift5が逆転しつつありますね。
アップデートして数ヶ月経ち安定した頃合いなので、そろそろ乗り換える頃合いかもしれませんね。

WatchOS6 & iOS13 & iPadOS & tvOS

今年はiPadOSが新たに発表されましたね。

発表直後とリリース直後はかなり調べられているものの、あまり関心は集められていないようです。
10月頃に跳ね上がっているのは、リリースしているアプリがiPadOSで動くか調査を命じられているSIerが多かったのですかね。

Dark Mode & Apple Arcade & Memoji

こちらはユーザに直接関係のありそうな機能です。
Memojiは今年もアップデート入ってましたよね。

Dark Modeに関してはやはりiOS13リリース前後に跳ね上がってますね。おそらく開発者の動作確認などだと思います。

意外とApple Arcadeの検索が多くないのが意外でした。
もっとユーザに突き刺さっているかと思いましたが、やっぱり安いとは言え有料なのがネックなんですかね。
スマホゲーム界隈の闇を少し感じました。

ARKit & Sign in With Apple & SwiftUI

Sign in With Appleありましたね！
サードパーティの認証使っている開発者には激震走ったかと思います。

別の意味でSwiftUIも激震が走りましたよね！
辛かったUIの構築がこれでかなり改善できるんじゃないかと期待できます。

グラフを見るとやはりSwiftUIが注目を浴びています。
Sign in With Appleも必要に迫られている開発者が多いのか、徐々に上昇傾向にあります。

それに比べてARKitは去年までに比べてかなり落ち着いていますね。
市場に出てから数年経ちますし目新しさがなくなって感があります。
これからサービスに取り入れる場合は、もう1つ工夫がないと埋もれてしまいそうです。

AR & Accessibility & Dark Mode

アクセシビリティも今年注目されたものの1つかなと思います。
機能や事例が増えてはいるものの、これ1つでサービスが劇的に変わるわけではないので、いまいち伸び悩んでいるようですね。

まとめ

やはり今年大注目のSwiftUIは伸び続けていて、来年にはiOSエンジニア必須の知識となりそうです。
Swiftもそろそろ5に引き上げる時期ですかね...！
僕も徐々に対応していこうかなと思います！

それではみなさん！素敵なiOSライフをお送りください！

おまけ

AR & VR & MR & SR

xR系も比べてみました。
MRが恐らく僕が思っていたMRじゃない気がしますね。(医療用語的な)
SRもこんなに浸透しているわけないので、違うSRがヒットしている感じでしょうか。(ソシャゲ的な)
トレンド調査も難しいものがありますね。

はじめに

Hiroshi Takagiと申します。普段は組み込みエンジニアをやっています。

toioで公開されている、技術仕様書とjavascriptライブラリを参考にしながら、Unityを使ってスマホアプリで動作するtoioの開発環境を作りました。

完成した。 pic.twitter.com/SNwwaIIcmn

— Hiroshi Takagi (@TkgHrsh) December 13, 2019

技術仕様ver2.0.0で公開されているものはほぼすべて操作可能なスクリプトもご用意したので、興味ある方はぜひ使ってみてください。

ただ、できるだけ素早く簡単にできることを目標にしたので、Bluetooth Low Energy(BLE)の有料アセットが必要になります。

Unityはつい最近始めたのですが、学習にはこの本がおすすめです。
Unityの教科書 Unity2019完全対応版

それではやっていきましょう。

使ったもの

• Unity (2018.4.14f1)
• toio コア キューブ 1台
• Mac 1台 [Mac mini(2018) OS Version10.14.6]
• iPhone 1台 [iPhone 7]
• Xcode(11.3)

Windows,Androidではまだ試していませんので、もしやってみたかたいましたら、ご連絡いただけると嬉しいです。

アセットのインポート

まずは以下のアセットを新規2Dプロジェクトにインポートします。
https://assetstore.unity.com/packages/tools/network/bluetooth-le-for-ios-tvos-and-android-26661

アセットのImport方法が分からない方はこの記事を参考にするとよいかと思います。

キューブを操作するスクリプトの配置

以下をコピーして、プロジェクト内のC#スクリプトとして使用してください。

コード全文

CubeController.cs

using System;
using UnityEngine;


public class CubeLightParams
{
    public uint red;
    public uint green;
    public uint blue;
    public UInt16 durationMs;
    public CubeLightParams(uint red, uint green, uint blue, UInt16 durationMs)
    {
        this.red = red;
        this.green = green;
        this.blue = blue;
        this.durationMs = durationMs;
    }
}

public class CubeSoundParams
{
    public uint noteNum;
    public UInt16 durationMs;
    public CubeSoundParams(uint noteNum, UInt16 durationMs)
    {
        this.noteNum = noteNum;
        this.durationMs = durationMs;
    }
}


public class CubeController : MonoBehaviour
{
    public enum States
    {
        None,
        Scan,
        ScanRSSI,
        Connect,
        Disconnect,
        Connecting,
    }

    private const string DeviceName = "toio Core Cube";
    private const string ServiceUUID = "10B20100-5B3B-4571-9508-CF3EFCD7BBAE";

    private const string IdCharacteristic = "10B20101-5B3B-4571-9508-CF3EFCD7BBAE";
    private const string SensorCharacteristic = "10B20106-5B3B-4571-9508-CF3EFCD7BBAE";
    private const string ButtonCharacteristic = "10B20107-5B3B-4571-9508-CF3EFCD7BBAE";
    private const string BatteryCharacteristic = "10B20108-5B3B-4571-9508-CF3EFCD7BBAE";
    private const string MotorCharacteristic = "10B20102-5B3B-4571-9508-CF3EFCD7BBAE";
    private const string LightCharacteristic = "10B20103-5B3B-4571-9508-CF3EFCD7BBAE";
    private const string SoundCharacteristic = "10B20104-5B3B-4571-9508-CF3EFCD7BBAE";
    private const string ConfigrationCharacteristic = "10B201FF-5B3B-4571-9508-CF3EFCD7BBAE";

    private string[] _characteristics = {
        IdCharacteristic,
        SensorCharacteristic,
        ButtonCharacteristic,
        BatteryCharacteristic,
        MotorCharacteristic,
        LightCharacteristic,
        SoundCharacteristic,
        ConfigrationCharacteristic
    };

    private float _timeout = 0f;
    private States _state = States.None;
    private string _deviceAddress;
    private int _foundCharCount = 0;
    private bool _rssiOnly = false;
    private int _rssi = 0;

    void Reset()
    {
        _timeout = 0f;
        _state = States.None;
        _deviceAddress = null;
        _foundCharCount = 0;
        _rssi = 0;
    }

    void SetState(States newState, float timeout)
    {
        _state = newState;
        _timeout = timeout;
    }

    void StartProcess()
    {
        Reset();
        BluetoothLEHardwareInterface.Initialize(true, false, () =>
        {

            SetState(States.Scan, 0.1f);

        }, (error) =>
        {
            BluetoothLEHardwareInterface.Log("Error during initialize: " + error);
        });
    }

    // Use this for initialization
    void Start()
    {
        StartProcess();
    }

    // Update is called once per frame
    void Update()
    {
        if (_timeout > 0f)
        {
            _timeout -= Time.deltaTime;
            if (_timeout <= 0f)
            {
                _timeout = 0f;

                switch (_state)
                {
                    case States.None:
                        break;

                    case States.Scan:
                        BluetoothLEHardwareInterface.ScanForPeripheralsWithServices(null, (address, name) =>
                        {

                            // if your device does not advertise the rssi and manufacturer specific data
                            // then you must use this callback because the next callback only gets called
                            // if you have manufacturer specific data

                            if (!_rssiOnly)
                            {
                                if (name.Contains(DeviceName))
                                {
                                    BluetoothLEHardwareInterface.StopScan();

                                    // found a device with the name we want
                                    // this example does not deal with finding more than one
                                    _deviceAddress = address;
                                    SetState(States.Connect, 0.5f);
                                }
                            }

                        }, (address, name, rssi, bytes) =>
                        {

                            // use this one if the device responses with manufacturer specific data and the rssi

                            if (name.Contains(DeviceName))
                            {
                                if (_rssiOnly)
                                {
                                    _rssi = rssi;
                                }
                                else
                                {
                                    BluetoothLEHardwareInterface.StopScan();

                                    // found a device with the name we want
                                    // this example does not deal with finding more than one
                                    _deviceAddress = address;
                                    SetState(States.Connect, 0.5f);
                                }
                            }

                        }, _rssiOnly); // this last setting allows RFduino to send RSSI without having manufacturer data

                        if (_rssiOnly)
                            SetState(States.ScanRSSI, 0.5f);
                        break;

                    case States.ScanRSSI:
                        break;

                    case States.Connect:
                        // set these flags
                        _foundCharCount = 0;

                        // note that the first parameter is the address, not the name. I have not fixed this because
                        // of backwards compatiblity.
                        BluetoothLEHardwareInterface.ConnectToPeripheral(_deviceAddress, null, null, (address, serviceUUID, characteristicUUID) =>
                        {

                            if (IsEqual(serviceUUID, ServiceUUID))
                            {
                                for (int i = 0; i < this._characteristics.Length; i++)
                                {
                                    if (IsEqual(characteristicUUID, this._characteristics[i]))
                                    {
                                        this._foundCharCount++;
                                    }
                                }
                                // if we have found all characteristics that we are waiting for
                                // set the state. make sure there is enough timeout that if the
                                // device is still enumerating other characteristics it finishes
                                // before we try to subscribe
                                if (this._foundCharCount == this._characteristics.Length)
                                {
                                    SetState(States.Connecting, 0);
                                    batterySubscribe();
                                    motionSensorSubscribe();
                                    buttonSubscribe();
                                    idInformationSubscribe();
                                }
                            }
                        });
                        break;
                }
            }
        }
    }

    bool IsEqual(string uuid1, string uuid2)
    {
        return (uuid1.ToUpper().CompareTo(uuid2.ToUpper()) == 0);
    }

    //
    // Motor
    //

    public void Move(int left, int right, uint durationMs)
    {
        if (_state != States.Connecting)
        {
            Debug.Log("Cube is not ready");
            return;
        }
        byte leftDir = (byte)((left >= 0) ? 01 : 02);
        byte rightDir = (byte)((right >= 0) ? 01 : 02);
        byte leftVal = (byte)Math.Min(Math.Abs(left), 0xff);
        byte rightVal = (byte)Math.Min(Math.Abs(right), 0xff);
        byte dur = (byte)Math.Min(durationMs / 10, 0xff);

        byte[] data = new byte[] { 02, 01, leftDir, leftVal, 02, rightDir, rightVal, dur };

        BluetoothLEHardwareInterface.WriteCharacteristic(_deviceAddress, ServiceUUID, MotorCharacteristic, data, data.Length, false, (characteristicUUID) =>
        {
            BluetoothLEHardwareInterface.Log("Write Succeeded");
        });
    }

    public void MoveStop()
    {
        if (_state != States.Connecting)
        {
            Debug.Log("Cube is not ready");
            return;
        }
        byte[] data = new byte[] { 01, 01, 01, 00, 02, 01, 00 };

        BluetoothLEHardwareInterface.WriteCharacteristic(_deviceAddress, ServiceUUID, MotorCharacteristic, data, data.Length, false, (characteristicUUID) =>
        {
            BluetoothLEHardwareInterface.Log("Write Succeeded");
        });
    }

    //
    // Light
    //

    public void LightUp(CubeLightParams[] arr, uint repeat)
    {
        if (_state != States.Connecting)
        {
            Debug.Log("Cube is not ready");
            return;
        }
        if (arr.Length >= 30)
        {
            Debug.Log("too much array Length");
            return;
        }
        byte[] data = new byte[3 + 6 * arr.Length];
        int len = 0;

        data[len++] = 04;
        data[len++] = (byte)repeat;
        data[len++] = (byte)arr.Length;
        for (int i = 0; i < arr.Length; i++)
        {
            data[len++] = (byte)Math.Min(arr[i].durationMs / 10, 0xff);
            data[len++] = 01;
            data[len++] = 01;
            data[len++] = (byte)arr[i].red;
            data[len++] = (byte)arr[i].green;
            data[len++] = (byte)arr[i].blue;
        }

        BluetoothLEHardwareInterface.WriteCharacteristic(_deviceAddress, ServiceUUID, LightCharacteristic, data, data.Length, true, (characteristicUUID) =>
        {
            BluetoothLEHardwareInterface.Log("Write Succeeded");
        });
    }

    public void LightOff()
    {
        if (_state != States.Connecting)
        {
            Debug.Log("Cube is not ready");
            return;
        }
        byte[] data = new byte[] { 01 };

        BluetoothLEHardwareInterface.WriteCharacteristic(_deviceAddress, ServiceUUID, LightCharacteristic, data, data.Length, true, (characteristicUUID) =>
        {
            BluetoothLEHardwareInterface.Log("Write Succeeded");
        });
    }

    //
    // Sound
    //

    public void Sound(CubeSoundParams[] arr, uint repeat)
    {
        if (_state != States.Connecting)
        {
            Debug.Log("Cube is not ready");
            return;
        }
        if (arr.Length >= 60)
        {
            Debug.Log("too much array Length");
            return;
        }
        byte[] data = new byte[3 + 3 * arr.Length];
        int len = 0;

        data[len++] = 03;
        data[len++] = (byte)repeat;
        data[len++] = (byte)arr.Length;
        for (int i = 0; i < arr.Length; i++)
        {
            data[len++] = (byte)Math.Min(arr[i].durationMs / 10, 0xff);
            data[len++] = (byte)arr[i].noteNum;
            data[len++] = 0xff;
        }

        BluetoothLEHardwareInterface.WriteCharacteristic(_deviceAddress, ServiceUUID, SoundCharacteristic, data, data.Length, true, (characteristicUUID) =>
        {
            BluetoothLEHardwareInterface.Log("Write Succeeded");
        });

    }

    public void SoundPreset(uint id)
    {
        if (_state != States.Connecting)
        {
            Debug.Log("Cube is not ready");
            return;
        }
        byte[] data = new byte[] { 02, (byte)id, 0xff };

        BluetoothLEHardwareInterface.WriteCharacteristic(_deviceAddress, ServiceUUID, SoundCharacteristic, data, data.Length, true, (characteristicUUID) =>
        {
            BluetoothLEHardwareInterface.Log("Write Succeeded");
        });

    }

    public void SoundOff()
    {
        if (_state != States.Connecting)
        {
            Debug.Log("Cube is not ready");
            return;
        }
        byte[] data = new byte[] { 01 };

        BluetoothLEHardwareInterface.WriteCharacteristic(_deviceAddress, ServiceUUID, SoundCharacteristic, data, data.Length, true, (characteristicUUID) =>
        {
            BluetoothLEHardwareInterface.Log("Write Succeeded");
        });

    }

    //
    // Battery
    //

    private Action<uint> batteryCb = null;

    private void batterySubscribe()
    {
        BluetoothLEHardwareInterface.SubscribeCharacteristicWithDeviceAddress(_deviceAddress, ServiceUUID, BatteryCharacteristic, null, (address, characteristic, bytes) =>
        {
            if (this.batteryCb != null)
            {
                this.batteryCb(bytes[0]);
            }
        });
    }
    public void GetBattery(Action<uint> result)
    {
        this.batteryCb = result;
    }

    //
    // Motion Sensor
    //

    private bool lastCollisiton = false;
    private Action<bool, bool> motionSensorCb = null;

    private void motionSensorSubscribe()
    {
        BluetoothLEHardwareInterface.SubscribeCharacteristicWithDeviceAddress(_deviceAddress, ServiceUUID, SensorCharacteristic, null, (address, characteristic, bytes) =>
        {
            Debug.Log("motion sensro changed");
            if (this.motionSensorCb != null)
            {
                if (bytes[0] == 01)
                {
                    bool flat = (bytes[1] == 01);
                    bool collisiton = (bytes[2] == 01);
                    this.motionSensorCb(flat, collisiton);
                    this.lastCollisiton = collisiton;
                }
            }
        });
    }

    public void GetMotionSensor(Action<bool, bool> result)
    {
        this.motionSensorCb = result;
    }

    //
    // Button
    //

    private Action<bool> buttonCb = null;

    private void buttonSubscribe()
    {
        BluetoothLEHardwareInterface.SubscribeCharacteristicWithDeviceAddress(_deviceAddress, ServiceUUID, ButtonCharacteristic, null, (address, characteristic, bytes) =>
        {
            if (this.buttonCb != null)
            {
                if (bytes[0] == 01)
                {
                    this.buttonCb(bytes[1] == 0x80);
                }
            }
        });
    }
    public void GetButton(Action<bool> result)
    {
        this.buttonCb = result;
    }

    //
    // ID Information
    //

    private Action<UInt16, UInt16, UInt32, UInt16> idInformationCb = null;

    private void idInformationSubscribe()
    {
        UInt16 positionX = 0xffff;
        UInt16 positionY = 0xffff;
        UInt16 angle = 0xffff;
        UInt32 standardID = 0xffffffff;

        BluetoothLEHardwareInterface.SubscribeCharacteristicWithDeviceAddress(_deviceAddress, ServiceUUID, IdCharacteristic, null, (address, characteristic, bytes) =>
        {
            if (this.idInformationCb != null)
            {
                switch (bytes[0])
                {
                    case 01:
                        positionX = (UInt16)(bytes[1] | (bytes[2] << 8));
                        positionY = (UInt16)(bytes[3] | (bytes[4] << 8));
                        standardID = 0xffffffff;
                        angle = (UInt16)(bytes[5] | (bytes[6] << 8));
                        this.idInformationCb(positionX, positionY, standardID, angle);
                        break;
                    case 02:
                        positionX = 0xffff;
                        positionY = 0xffff;
                        standardID = (UInt32)(bytes[1] | (bytes[2] << 8) | (bytes[3] << 16) | (bytes[4] << 24));
                        angle = (UInt16)(bytes[5] | (bytes[6] << 8));
                        this.idInformationCb(positionX, positionY, standardID, angle);
                        break;
                    case 03:
                    case 04:
                        positionX = 0xffff;
                        positionY = 0xffff;
                        standardID = 0xffffffff;
                        angle = 0xffff;
                        this.idInformationCb(positionX, positionY, standardID, angle);
                        break;
                }
            }
        });
    }

    public void GetIdInformation(Action<UInt16, UInt16, UInt32, UInt16> result)
    {
        this.idInformationCb = result;
    }


}

このスクリプトは、自動的にキューブを探してペアリングして、完了すると各機能の操作および状態の通知が実行されるようになっています。

サンプルアプリケーションの作成

以下をコピーして、プロジェクト内のC#スクリプトとして使用してください。

コード全文

Director.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Director : MonoBehaviour
{
    GameObject Battery;
    GameObject Flat;
    GameObject Collision;
    GameObject CubeController;
    GameObject Button;
    GameObject PositionID;
    GameObject StandardID;
    GameObject Angle;

    GameObject Tap;

    bool enMove = false;

    // Start is called before the first frame update
    void Start()
    {
        this.Battery = GameObject.Find("Battery");
        this.Flat = GameObject.Find("Flat");
        this.Collision = GameObject.Find("Collision");
        this.CubeController = GameObject.Find("CubeController");
        this.Button = GameObject.Find("Button");
        this.PositionID = GameObject.Find("PositionID");
        this.StandardID = GameObject.Find("StandardID");
        this.Angle = GameObject.Find("Angle");
        this.Tap = GameObject.Find("Tap");

        notifyStatus();
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            if (enMove)
            {
                stopMove();
            }
            else
            {
                startMove();
            }
            enMove = !enMove;
        }
    }

    private void startMove()
    {
        CubeSoundParams[] sound = new CubeSoundParams[4];
        sound[0] = new CubeSoundParams(60, 200);
        sound[1] = new CubeSoundParams(72, 200);
        sound[2] = new CubeSoundParams(84, 200);
        sound[3] = new CubeSoundParams(128, 1000);

        CubeLightParams[] light = new CubeLightParams[4];
        light[0] = new CubeLightParams(255, 255, 0, 400);
        light[1] = new CubeLightParams(0, 255, 255, 400);
        light[2] = new CubeLightParams(255, 0, 255, 400);
        light[3] = new CubeLightParams(255, 255, 255, 400);

        this.CubeController.GetComponent<CubeController>().Sound(sound, 0);
        this.CubeController.GetComponent<CubeController>().LightUp(light, 0);
        this.CubeController.GetComponent<CubeController>().Move(20, 20, 0);
        this.Tap.GetComponent<Text>().text = "Tap to stop moving";
    }
    private void stopMove()
    {
        this.CubeController.GetComponent<CubeController>().SoundOff();
        this.CubeController.GetComponent<CubeController>().LightOff();
        this.CubeController.GetComponent<CubeController>().MoveStop();
        this.Tap.GetComponent<Text>().text = "Tap to start moving";
    }

    private void notifyStatus()
    {
        this.CubeController.GetComponent<CubeController>().GetBattery((result) =>
        {
            this.Battery.GetComponent<Text>().text = "Battery残量 : " + result.ToString("D3") + "%";
        });
        this.CubeController.GetComponent<CubeController>().GetMotionSensor((isFlat, isCollision) =>
        {
            if (isFlat)
            {
                this.Flat.GetComponent<Text>().text = "水平検出 : 水平";
            }
            else
            {
                this.Flat.GetComponent<Text>().text = "水平検出 : 水平でない";
            }
            if (isCollision)
            {
                this.Collision.GetComponent<Text>().text = "衝突検出 : 衝突あり";
            }
            else
            {
                this.Collision.GetComponent<Text>().text = "衝突検出 : 衝突なし";
            }
        });
        this.CubeController.GetComponent<CubeController>().GetButton((result) =>
        {
            if (result)
            {
                this.Button.GetComponent<Text>().text = "ボタン : ON";
            }
            else
            {
                this.Button.GetComponent<Text>().text = "ボタン : OFF";
            }
        });
        this.CubeController.GetComponent<CubeController>().GetIdInformation((positionX, positionY, standardID, angle) =>
        {
            if (positionX != 0xffff || positionY != 0xffff)
            {
                this.PositionID.GetComponent<Text>().text = "X座標 : " + positionX.ToString("D3") + " / Y座標 : " + positionY.ToString("D3");
            }
            else
            {
                this.PositionID.GetComponent<Text>().text = "Position ID情報なし";
            }
            if (standardID != 0xffffffff)
            {
                this.StandardID.GetComponent<Text>().text = "Standard Id : " + standardID.ToString("D7");
            }
            else
            {
                this.StandardID.GetComponent<Text>().text = "Standard ID情報なし";
            }
            if (angle != 0xffff)
            {
                this.Angle.GetComponent<Text>().text = "角度 : " + angle.ToString("D3");
            }
            else
            {
                this.Angle.GetComponent<Text>().text = "角度情報なし";
            }
        });

    }
}

今回のサンプルアプリケーションの構成です。

下図のように、空のObjectを二つ（CubeController, Director）とTextオブジェクト(Battery, Flat, Collision, Button, PositionID, StandardID, Angle, Tap)を8個を登録してください。
名前を間違えるとうまく動きませんのでご注意ください。Textの配置とサイズは適当にお願いします。

最後に、CubeControllerにCubeController.csを、DirectorにDirector.csをアタッチすれば準備完了です。

試しにPC上で、実行して動作するか確認してみてください。

ビルドしてスマホに移す

この記事を参考にするとよいと思います。

iOSの話になってしまいますが、一点注意点です。
XCODEから実行する際に、下図のように、Infoに[Privacy - Bluetooth Always Usage Description]を追加する必要があります。これがないとアプリが起動できなくなります。

さいごに

うまく動きましたでしょうか？
あとはサンプルアプリケーションを参考に、自分のオリジナルのtoioアプリが作成できると思いますので、ぜひ使ってみてください。

最新のtoioの技術仕様書を見ると、ver2.1.0に更新されているので、またアップデートしてご紹介したいと思います。

それではよいクリスマスをお過ごしください。