Realmに保存したデータをListで表示、
Cellごとに閲覧、編集、削除できるようにしたい。

と思っていましたが、削除する度に
Index 1 is out of bounds (must be less than 1)が出てクラッシュ。
長い間いろいろ英語の文章を参照したのですが、解決できなかった。

久しぶりに調べてみたら、この記事が救ってくれました。
https://llcc.hatenablog.com/entry/2020/04/26/205254

私のような新人の理解では、本来Listを出すには直接Realmへデータを取りに行くんですが、
今度は、ListのCellに対するView Modelを作り、View全体もView Modelを作り、
Listを出すにはViewModel経由で取得、

ForEach(model.myModels, id: .id)
↓
ForEach(model.cellModels, id: .id)
もう削除したデータ、存在しないデータへ取りに行くことは発生しない

中身はこんな感じ：

private var token: NotificationToken?
    private var myModelResults = try? Realm().objects(MyModel.self)
    @Published var myModels: [MyModel] = []

    init() {
        token = myModelResults?.observe { [weak self] _ in
            self?.myModels = self?.myModelResults?.map { $0 } ?? []
        }
    }

    deinit {
        token?.invalidate()
    }

ForEach(model.myModels, id: \.id) 

を以下へ変更

private var token: NotificationToken?
    private var myModelResults = try? Realm().objects(MyModel.self)
    @Published var cellModels: [ContentViewCellModel] = []

    init() {
        token = myModelResults?.observe { [weak self] _ in
            self?.cellModels = self?.myModelResults?.map { ContentViewCellModel(id: $0.id, title: $0.title) } ?? []
        }
    }

    deinit {
        token?.invalidate()
    }

ForEach(model.cellModels, id: \.id)  

このようにしたら、エラーが綺麗に解消できました。

Simulatorとの戦いはまだまだ続く（泣）

いっぱいSimulatorのバージョンを入れたせいか、
ビルド成功した後、以下エラーが出てSimulatorが動けなくなった。。。
Unable to boot device due to insufficient system resources

参照してみた：
https://www.366service.com/jp/qa/29bc4dae4b18727a1595807565b57e5a
https://blog.csdn.net/CC1991_/article/details/88399495

sudo launchctl limit maxfiles 1024 unlimitedを実行

次にXcodeでビルドしたら、無事にSimulatorが動きました。

Swiftの構文

struct

struct Game{
    let title: String
    let version: Double
    init(title theTitle: String, version theVersion: Double ) {
        self.title = theTitle
        self.version = theVersion
    }
    func play(){
        print(self.title + " is playing.....")
    }
}
let MyGame = Game(title: "MyFirstGame", version: 0.1)
MyGame.play() // MyFirstGame is playing.....

プロトコル

Javaでのインターフェイスに対応する

protocol Updatable{
    func update(_ version: Double)
}

struct Game: Updatable{
    ~~~ 略 ~~~
    func update(_ version: Double) {
        print("updated")
    }   
}

構造体名: プロトコル名とする

SwiftUI

これを踏まえたうえでContentView.swiftから引用

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

つまりはContentView構造体をViewプロトコルを使用し定義している
Viewプロトコルではbodyプロパティを実装必要があるのでそのとおりに
some型はViewプロトコルに適合した任意の型なので、必ずしもViewなくてならないわけではない

Simulatorとの戦いが続く

Simulatorのいろいろなバージョンをインストールしているから、
結構ストレージを占めて、ストレージ不足。古いバージョンをを削除しようと、
この記事を参照して削除した。
https://shinespark.hatenablog.com/entry/2018/03/10/090000

'''
/Library/Developer/CoreSimulator/Profiles/Runtimes から、不要なシミュレータのバージョンのディレクトリを削除する。 rmtrash を使っている人はrmをシングルクォートで括って実行しよう。

~/Library/Developer/Xcode/iOS DeviceSupport にもバージョンごとにディレクトリが作成されているので、ここも削除する。
'''

そして使いたいバージョンを新しくインストールした。

私がどこかで変に操作したせいで、このエラーが続いて、Simulatorが出てこない。
Unable to boot device because it cannot be located on disk.

今度はこの記事を参照：
https://blog.ukoasis.me/2019/01/21/unable-to-boot-device/

xcrun simctl erase allを実行してSimultorのログファイル？を削除して
再度ビルドしたら、Simulatorが動いた。

Macのプレビューは、元となる画像ファイルさえあれば注釈を入れたり、図形を描き込んだり、サイズや解像度を変更したり、色を調整したりできるかなり万能なプリセットアプリです。ただ、一つ残念なこととして、元となる画像がなければ、Windowsのペイントアプリのように空のキャンバスを開くことが出来ません。そこで、今回はデスクトップやFinderで右クリックして表示されるコンテキストメニューから、プレビュー向けの空キャンバスを作成して開けるショートカットツールを作ってみました。

Preview Helper

右クリックでメニューを開いて、「新規キャンバスをプレビュー.appで開く」を選択

ファイル名、キャンバスの幅・高さを指定して「保存して開く」を押す

プレビュー.appが自動で開いて編集開始！

Simple is the best!!

ツール使用前の準備

アプリをアプリケーションフォルダに入れて一度起動した後、システム環境設定の拡張機能のところでPreview Helper Extensionを有効にする必要があります。アプリの初回起動時に導線が出るので従えばOK。

主に使った技術

• Finder Sync Extension
• NSSavePanel

文献があまりないこと以外に難しいことはなかったです。

配布

https://github.com/Kyome22/PreviewHelper/releases/tag/1.0
とりあえず、dmgを置いておきます。（あとでプロダクトページを用意したい...）

Macのプレビューは、元となる画像ファイルさえあれば注釈を入れたり、図形を描き込んだり、サイズや解像度を変更したり、色を調整したりできるかなり万能なプリセットアプリです。ただ、一つ残念なこととして、元となる画像がなければ、Windowsのペイントアプリのように空のキャンバスを開くことが出来ません。そこで、今回はデスクトップやFinderで右クリックして表示されるコンテキストメニューから、プレビュー向けの空キャンバスを作成して開けるショートカットツールを作ってみました。

Preview Helper

右クリックでメニューを開いて、「新規キャンバスをプレビュー.appで開く」を選択

ファイル名、キャンバスの幅・高さを指定して「保存して開く」を押す

プレビュー.appが自動で開いて編集開始！

Simple is the best!!

ツール使用前の準備

アプリをアプリケーションフォルダに入れて一度起動した後、システム環境設定の拡張機能のところでPreview Helper Extensionを有効にする必要があります。アプリの初回起動時に導線が出るので従えばOK。

主に使った技術

• Finder Sync Extension
• NSSavePanel

文献があまりないこと以外に難しいことはなかったです。

配布

https://github.com/Kyome22/PreviewHelper/releases/tag/1.0
とりあえず、dmgを置いておきます。（あとでプロダクトページを用意したい...）

Macのプレビューは、元となる画像ファイルさえあれば注釈を入れたり、図形を描き込んだり、サイズや解像度を変更したり、色を調整したりできるかなり万能なプリセットアプリです。ただ、一つ残念なこととして、元となる画像がなければ、Windowsのペイントアプリのように空のキャンバスを開くことが出来ません。そこで、今回はデスクトップやFinderで右クリックして表示されるコンテキストメニューから、プレビュー向けの空キャンバスを作成して開けるショートカットツールを作ってみました。

Preview Helper

右クリックでメニューを開いて、「新規キャンバスをプレビュー.appで開く」を選択

ファイル名、キャンバスの幅・高さを指定して「保存して開く」を押す

プレビュー.appが自動で開いて編集開始！

Simple is the best!!

ツール使用前の準備

アプリをアプリケーションフォルダに入れて一度起動した後、システム環境設定の拡張機能のところでPreview Helper Extensionを有効にする必要があります。アプリの初回起動時に導線が出るので従えばOK。

主に使った技術

• Finder Sync Extension
• NSSavePanel

文献があまりないこと以外に難しいことはなかったです。

配布

https://github.com/Kyome22/PreviewHelper/releases/tag/1.0
とりあえず、dmgを置いておきます。（あとでプロダクトページを用意したい...）

フィルタリングの意義

センサにはノイズがつきものです。突然データがピンッと跳ねることがあります。
また人間は非常にアナログです。指を止めているつもりでもデータがブルブルと揺らいだりします。

これをそのままデジタルに用いると非常に不安定なシステムになってしまいます。
そこで生のデータを整えるフィルターが重要となります。

フィルター

指数移動平均（EMA）フィルターを用います。（参照）

S_t = α \times Y_{t-1} + (1-α) \times S_{t-1}

αの値が大きいほど古い値の重みが小さくなります。逆も然り。

ローパスフィルター

瞬間的な変動値を減衰します。ブルブルを抑えたデータが得られます。

var lastVal: CGFloat = 0.0
var alpha: CGFloat = 0.4

func lowpass(val: CGFloat) -> CGFloat {
  lastVal = alpha * val + lastVal * (1 - alpha)  
  return lastVal
}

ハイパスフィルター

瞬間的な変動成分のみにします。グイッと変化した際のデータが得られます。

var lastVal: CGFloat = 0.0
var alpha: CGFloat = 0.4

func highpass(val: CGFloat) -> CGFloat {
  lastVal = alpha * val + lastVal * (1 - alpha)
  return val - lastVal
}

解説

$\vec{0}$ではないベクトル $\vec{a} =(a_1,a_2), \vec{b}=(b_1,b_2)$ のなす角度を$\theta$とすると次が成り立つ。

\begin{align}
\cos\theta &= \frac{\vec{a}\cdot\vec{b}}{|\vec{a}||\vec{b}|} \\
&=\frac{a_1 b_1 + a_2 b_2}{\sqrt{a_1^2 + a_2^2}\sqrt{b_1^2 + b_2^2}}
\end{align}

ここで求められたcos$\theta$の逆余弦（アークコサイン）を求めれば$\theta$が求まる。

コード

func angleBetween(_ vec1: simd_float3, and vec2: simd_float3) -> Float {
   let cosT = (vec1.x * vec2.x + vec1.z * vec2.z) / (sqrt(pow(vec1.x, 2) +
              pow(vec1.z, 2)) * sqrt(pow(vec2.x, 2) + pow(vec2.z, 2)))
   let deg = acos(cosT) * 180 / Float.pi
   return deg
}

let v1 = simd_float3(20, 0, 20)
let v2 = simd_float3(0, 0, 20)
let angle = angleBetween(v1, and: v2)

print(angle) //45度

話題のアニメーションライブラリLottieの導入法をイチから解説。
これであなたのアプリもめっちゃモダンでかわいくなります。
ボタン類も豊富に用意されています。

導入方法

( SwiftPackageManagerバージョンです。手順通りにやれば大丈夫です）

Lottieを導入したいXcodeプロジェクトをひらきます。
Build Settings の Linking から Dead Code Stripping を No にします。

File > Swift Packages > Add Package Dependencyを選択します。

RepositoryにLottieのGitHub URL： https://github.com/airbnb/lottie-ios をコピペします。
そしてNext。

ブランチなどもそのままでNext。

Finish で Lottie フレームワーク がプロジェクトに入ります。

使用方法

Lottie アニメーションのJsonファイルを取得

LottieのHPからLottie JSON をダウンロード。

プロジェクトにドラッグ＆ドロップ。
（ファイル名は好きな名前.jsonに変えて大丈夫）

Animation View を追加

Lottie をインポートします。

import Lottie

Lottieアニメーションビューを初期化します。
UIViewと同じようにあつかえます。

var animationView = AnimationView()
animationView.frame = view.frame
animationView.contentMode = .scaleAspectFit
view.addSubview(animationView)

Animationを初期化して再生

var animation = Animation.named("36596-the-woman-sitting-on-the-phone")
// JSONファイルをフォルダにまとめている場合は、 var animation = Animation.named("36596-the-woman-sitting-on-the-phone", subdirectory: "Animations")
animationView.animation = animation
animationView.play()

背景透過で再生されました。

オプション

animationView.stop( )　：停止

・animationView.pause( ) ：一時停止

animationView.loopMode　：ループモード（Default：.playOnce）

オプション	挙動
.playOnce	一度だけ再生
.loop	ループ再生
.autoReverse	再生・逆再生を繰り返す
.repeat(Float)	指定回数繰り返し
.repeatBackwards(Float)	指定回数再生・逆再生

animationView.backgroundBehavior　：アプリがバックグラウンドになった時のアニメーションの挙動

オプション	挙動
.pause	一時停止状態で止まる
.pauseAndRestore	一時停止状態で止まり、アプリがフォーグラウンドになるとそこから再生
.stop	アニメーションの冒頭に移動
.forthFinish	アニメーションの末尾に移動

animationView.play(fromProgress:), animationView.play(toProgress:)　：アニメーションの範囲を指定（０〜１）

自前のアニメーションを作る

デザイナー向けチュートリアルで　After Effect というソフトを使ってLottieアニメーションを作る方法を学べるそうです。

また、一から作るところまでは行かなくても、既存のLottieアニメーションをLottieエディタにドロップして編集できます。

公式サイトでは、無料・有料アニメーションはじめ、Webに埋め込む方法などたくさん情報があります。

?

---

お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

Twitter
Medium