【iOS】Skipを使ってみた

# はじめに
みなさん[Skip](https://skip.tools/)というツールはご存知でしょうか。
SwiftのコードをKotlinにトランスパイルして、Androidのアプリも同時に作れるツールです。
[Github](https://github.com/skiptools/skip)
<img width=700 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/263c57af-70f0-4988-610b-b76d7bb6de5b.png">

この記事ではSkipの導入から簡単なアプリを作成し、iOS/Androidのシュミレーターでビルドするところまでをご紹介します。

:::note warn
注意
Skipをインストールしてから14日間の試用期間は無料です。
それ以降は下記の通りの費用がかかります。
<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/ed4a3512-e233-3f8e-03dd-d54f9bfc5c4d.png">

- Small Bussinessはこちらが当てはまるようです
  - 認定教育機関
  - 登録された非営利団体
  - 前年度と当年度のそれぞれで総収入が250,000米ドルを超えていない企業および団体
  - 総収入が、前年度と当年度それぞれで250,000米ドルを超えない個人
[価格ページ](https://skip.tools/pricing/)
:::

:::note warn
Skipを使うには[Xcode15](https://developer.apple.com/xcode/)と[AndroidStudio2023](https://developer.android.com/studio?hl=ja)が必要になります！
:::

# 本題

### インストール

まずはHomebrewを使用しSkipのインストールを行います。

 ```インストール
brew install skiptools/skip/skip
 ```
この画像が表示されるとインストールが完了です。

<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/bd9c89b2-55f0-e2ad-8693-b0b4073b1ef7.png">

そしてこのコードで開発前提条件が満たされていることを確認します。

```開発環境の確認
skip checkup
```
この写真のように全てにチェックがつけばokです。
<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/7acb5102-0ec8-6799-bc3a-c797258318b0.png">

試用期間後にライセンスキーが必要になるので、こちらのコードで取得します。
```
skip hostid
```
このコマンドを叩くと「AAAAAAAAAAAA」のようなIDが帰ってくるのでこれを`~/.skiptools/skipkey.env`に保存します。
```
SKIPKEY: AAAAAAAAAAAA
```

-----
### アプリの作成＆立ち上げ

作成するアプリの名前と版フォルID、作成するディレクトリを入力して、プロジェクトを作成します。
（このコードではプロジェクトを作成し立ち上げまで実行します）
```
skip init --open-xcode --appid={バンドルID} {ファイル名} {AppName}

(例：SkipSampleというアプリをskip-sampleというフォルダに作成する)
skip init --open-xcode --appid=com.hoge.SkipSample skip-sample SkipSample
```
すぐに開かずにアプリだけ作る場合はこちらでできます！
```
skip init --appid={バンドルID} project-name {AppName}
例： skip init --appid=com.hoge.SkipSample skip-sample SkipSample
```
----
### 実行
いよいよ実行です！
Xcode上で「⌘+R」で実行をする前に、 Androidのシュミレーターを立ち上げる必要があります！
（Androidのシュミレーターは「emulator」と呼ぶらしい）

 AndroidStudioを開いたら出てくるこの画面のOpenの下にある「MoreActions」をタップし、
 「Virtual Device Manager」を選択肢します。
 <img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/1f82a199-3228-89f2-4efd-fccad7523728.png">
 <img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/440fad77-9248-31fa-06f5-eb7c0290f17e.png">

 こんな画面になると思うので、ここで実行ボタンを押します！
 
  <img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/4a09a09c-fcee-d7a8-ad5a-3d7c6d88acd1.png">
  
  <img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/4f91a0f1-8e33-8d42-43eb-af892bdb0182.png">

そして⌘+Rで実行すると、iOS/Androidの両方で、Skipのデフォの画面が表示されたと思います！
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/85149196-f466-e5ca-7690-f004cfa2cdba.png">

# 使ってみての所感
Swiftのコードは`{AppName}/{AppName-Package}/Sources/{AppName}` に入っているのでここをいじれば普段通りにアプリの作成ができそうです。

少し触ってみて思ったのは、
普段`VStack(spacing: 0) {}`とかで書けるところが、Skipを使用すると`The integer literal does not conform to the expected type Double?`というエラー出て、型推論や暗黙的な型変換が効いてない感じです。
なので`VStack(spacing: 0.0) {}`や`.frame(width: 100.0)`のように書かないとコンパイルが通りません。

あと`Image(systemName:)`の使用には注意が必要です。
SwiftUIの何がSkipによってサポートされているのかは[Supported SwiftUI](https://skip.tools/docs/modules/skip-ui/#supported-swiftui)に詳しく書いてありますが、SFImageもその一つです！全てがサポートされているわけではないので確認してから使用してください。
またAndroid側では[MaterialDesignSystemIcons](https://m2.material.io/design/iconography/system-icons.html#design-principles)を参照しているので、少しデザインが変わります！
例えば`Image(systemName: "pencil")`をやるとこうなります。
| Android | iOS |
|----|----|
| <img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/948d61ed-d3d0-5723-fc1e-146037536d4f.png"> | <img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745924/4c98793e-3a90-599d-3a93-0951b4e77251.png">|

そして、ローカルに保存した写真を使用する際に、iOSだけなら
```
Image("Hoge")
```
でいけますが、現在Skipでは`AsyncImage`を使って`Bundle.module.url`から写真のデータを取得する必要がある点も注意です。
```
 AsyncImage(url: Bundle.module.url(forResource: "Hoge", withExtension: "png"))
 ```
 
まだ少ししか触れていないので、他に気になることがあったら逐一追記していきます！

# 最後に
最後までお読みいただきありがとうございました！
SwiftでAndroidのアプリも作れちゃうのは、個人的にはとても嬉しいのでSkipのこれからに期待したいなと思います！

Skipでアプリ作ってリリースしてみた！とか出したい...