<h2 id="%E5%88%9D%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E5%88%9D%E3%82%81%E3%81%AB" aria-hidden="true"></a> 初めに</h2>
<p>この記事は<a href="https://qiita.com/advent-calendar/2022/swiftui" target="_blank" rel="nofollow noopener noreferrer">SwiftUI Advent Calendar 2022</a>の24日目の記事です。<br>
SwiftUIをベースにしたアプリでmacOSとiOSのマルチプラットフォームで動作するアプリを作ったので紹介します！</p>
<h2 id="use-xcode-to-develop-a-multiplatform-app">
<a class="header-anchor-link" href="#use-xcode-to-develop-a-multiplatform-app" aria-hidden="true"></a> Use Xcode to develop a multiplatform app</h2>
<p>WWDC22で発表されたXcode14の新機能に「単一ターゲットで複数のプラットフォームをサポートしたアプリを作れる」という機能があります。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5d007c9b74dae" src="https://embed.zenn.studio/card#zenn-embedded__5d007c9b74dae" data-content="https%3A%2F%2Fdeveloper.apple.com%2Fvideos%2Fplay%2Fwwdc2022%2F110371%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.apple.com/videos/play/wwdc2022/110371/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.apple.com/videos/play/wwdc2022/110371/</a></p>
<p>従来はiOSアプリとmacOSアプリをサポートしたい場合は別のターゲットを用意する必要があったのですが、Xcode14からは単一のターゲットで開発できるようになりました。<br>
これによってBuildSettingsやアプリの共通化したコードベース・アセットの共通化が簡単になると思います。</p>
<h2 id="%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F" aria-hidden="true"></a> 作ってみた</h2>
<p>丁度夏くらいにCsv2Imgというcsvファイルをpng/pdfに変換できるアプリを作っていたので、そのアプリをmacOSとiOSに対応してみました。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/9576937088e2-20221225.png" alt loading="lazy" class="md-img"></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/9c7fa0627d7d-20221225.png" alt width="240" loading="lazy" class="md-img"></p>
<p>GitHubに上げているのでもし良かったらスターをください</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__66dde0667bedf" src="https://embed.zenn.studio/card#zenn-embedded__66dde0667bedf" data-content="https%3A%2F%2Fgithub.com%2Ffummicc1%2Fcsv2img" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/fummicc1/csv2img" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/fummicc1/csv2img</a></p>
<h2 id="%E8%BE%9B%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E8%BE%9B%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> 辛かったこと</h2>
<p>macOSとiOSをサポートするに当たってインターフェースが異なる部分が多く、結局<code>#if os</code>は所々使うことになりました。</p>
<h4 id="nsxxx%E3%81%A8uixxx%3A-application-%2F-view-%2F-responder-%2F-viewrepresentable">
<a class="header-anchor-link" href="#nsxxx%E3%81%A8uixxx%3A-application-%2F-view-%2F-responder-%2F-viewrepresentable" aria-hidden="true"></a> NSxxxとUIxxx: Application / View / Responder / ViewRepresentable</h4>
<p>毎回書くと大変なので<code>Type.swift</code>というOSごとに違うインターフェースだけど同じような責務の型を定義しておくファイルを作りましたが、結局ViewModel内部でもos毎に処理を分ける必要があったのであまり恩恵は得られませんでした。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__33e6a410764a3" src="https://embed.zenn.studio/github#zenn-embedded__33e6a410764a3" data-content="https%3A%2F%2Fgithub.com%2Ffummicc1%2Fcsv2img%2Fblob%2F0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e%2FCsv2ImageApp%2FCsv2ImageApp%2FType.swift%23L11-L25" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/fummicc1/csv2img/blob/0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e/Csv2ImageApp/Csv2ImageApp/Type.swift#L11-L25" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/fummicc1/csv2img/blob/0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e/Csv2ImageApp/Csv2ImageApp/Type.swift#L11-L25</a></p>
<p>もっと綺麗にアーキテクチャ分けすれば共通化できるコードが増えると思います。</p>
<h4 id="%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E9%81%B8%E6%8A%9E%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E9%81%B8%E6%8A%9E%E6%96%B9%E6%B3%95" aria-hidden="true"></a> ファイルの選択方法</h4>
<ul>
<li>iOS: UIDOcumentPickerViewController
<ul>
<li>フォルダアプリからファイルを読み込む・ファイルを出力する</li>
</ul>
</li>
<li>macOS: NSOpenPanel
<ul>
<li>Finder経由でファイルの読み書きをする</li>
</ul>
</li>
</ul>
<p>今回ユーザーがcsvのファイルを選択をする際にiOSとmacOSで別々のアプリから読み書きしたのでAPIを共通化できず分岐が必要でした。</p>
<h4 id="%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%BB%E6%8F%8F%E7%94%BB">
<a class="header-anchor-link" href="#%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%BB%E6%8F%8F%E7%94%BB" aria-hidden="true"></a> カラー・描画</h4>
<p>Appleが提供する色はOSごとに異なります。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7f17905459fd6" src="https://embed.zenn.studio/card#zenn-embedded__7f17905459fd6" data-content="https%3A%2F%2Fdeveloper.apple.com%2Fdesign%2Fhuman-interface-guidelines%2Ffoundations%2Fcolor%2F%23system-colors" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.apple.com/design/human-interface-guidelines/foundations/color/#system-colors" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.apple.com/design/human-interface-guidelines/foundations/color/#system-colors</a></p>
<p>NSColorにもUIColorにもseparator色はあるのですが、<code>separatorColor</code> / <code>separator</code>と微妙に異なる命名がされており、以下のようにマクロで分けることになりました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__e0e773582cc2f" src="https://embed.zenn.studio/github#zenn-embedded__e0e773582cc2f" data-content="https%3A%2F%2Fgithub.com%2Ffummicc1%2Fcsv2img%2Fblob%2F0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e%2FSources%2FCsv2Img%2FImageMaker.swift%23L113-L117" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/fummicc1/csv2img/blob/0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e/Sources/Csv2Img/ImageMaker.swift#L113-L117" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/fummicc1/csv2img/blob/0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e/Sources/Csv2Img/ImageMaker.swift#L113-L117</a></p>
<p>また、GraphicsContextを生成する処理もmacOSには<code>UIGraphicsBeginImageContext</code>や<code>UIGraphicsImageRenderer</code>は存在しなく、一度<code>NSImage</code>を作成して<code>lockFocus</code>メソッドを呼んでからCGContextを取得する流れになっており、分岐が必要でした。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__ab052e69eb054" src="https://embed.zenn.studio/github#zenn-embedded__ab052e69eb054" data-content="https%3A%2F%2Fgithub.com%2Ffummicc1%2Fcsv2img%2Fblob%2F0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e%2FSources%2FCsv2Img%2FImageMaker.swift%23L81-L94" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/fummicc1/csv2img/blob/0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e/Sources/Csv2Img/ImageMaker.swift#L81-L94" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/fummicc1/csv2img/blob/0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e/Sources/Csv2Img/ImageMaker.swift#L81-L94</a></p>
<p>あとは同じCoreGraphicsでもiOSだと<code>.zero</code>が左上になってmacOSだと左下になるので以下の分岐が必要でした。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__7061847707f93" src="https://embed.zenn.studio/github#zenn-embedded__7061847707f93" data-content="https%3A%2F%2Fgithub.com%2Ffummicc1%2Fcsv2img%2Fblob%2F0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e%2FSources%2FCsv2Img%2FImageMaker.swift%23L172-L176" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/fummicc1/csv2img/blob/0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e/Sources/Csv2Img/ImageMaker.swift#L172-L176" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/fummicc1/csv2img/blob/0e4ecd0ab0fc70a5d1603c7fc6e2aa7464ec1f4e/Sources/Csv2Img/ImageMaker.swift#L172-L176</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4ad1e5236a452" src="https://embed.zenn.studio/card#zenn-embedded__4ad1e5236a452" data-content="https%3A%2F%2Fdeveloper.apple.com%2Fdocumentation%2Fcorefoundation%2Fcgrect" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.apple.com/documentation/corefoundation/cgrect" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.apple.com/documentation/corefoundation/cgrect</a></p>
<p>他にもmacOSにはNavigationのpopアニメーションがなかったりと異なる点があり都度対応する必要があると思います。個人的意見ですが企業のようなデザイナーさんがいて仕様通りのデザインやサービス全体で統一されたデザインシステムがあるとSwifUIの中でもっとmacOSとiOS間で分岐処理が必要になってくると思いました。</p>
<h2 id="%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D">
<a class="header-anchor-link" href="#%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D" aria-hidden="true"></a> 良かったところ</h2>
<p>SwiftUIで作れると状態管理が楽ちんなので個人的にはSwiftUI好きです。</p>
<h2 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h2>
<p>SwiftUIでの開発体験が来年再来年と良くなっていくと嬉しいです。来年もよろしくお願いします!</p>


SwiftUIでmacOSとiOSをサポートするアプリを作ってみた

Discussion