よりひろい フロントエンド
Author : Kazuhiro Hara
Author : Kazuhiro Hara
Sat Mar 09 2024

VisionOS 向けアプリをつくってみる (城崎温泉ワーケーション成果スライド)

VisionOS上で動く自家製アプリケーションのスクリーンショット

開発合宿系のワーケーションで一番大事なことは、現地で環境構築をしないということではないかと考えている。新しい技術に挑戦する場合でも、必要な環境やエディタなどのセットアップを行い、せめてHelloWorldくらいは終わらせておきたい。

昔、過去の開発合宿で何も準備せずにやってきてインストールや環境構築などで終わってしまった人がいた。それが目的ならいいが、現地の細い共有回線を巨大なSDKのダウンロードに費やしたりなどするとほかの人に迷惑がかかる可能性がある。

今回は、城崎温泉ワーケーションの最終回、第4回だ。過去の記事はこちら。

今回は成果紹介ということもあり、前回までの紀行文的な雰囲気とは毛色が異なる。

さて、前述のとおり、今回持参した M2 Mac mini は既に Xcode のインストールおよび VisionOS のシミュレータ、そして HelloWorld 的なアプリの作成までは終えてある。逆に言えば、まだ購入したばかりなので、最低限のセットアップとこれら環境構築くらいしか出発前まではできなかった。

さて、行きの新幹線の中では Mac mini 起動するわけにもいかず MacBook 12 inch で Swift UI の学習をするのみとなったが VisionOS と似た部分も多い iOS の開発も今となってはこの Mac では難しい。以前であれば iPhone アプリの開発もこの筐体で出来たのだが OS のアップデートや Xcode のアップデート、シミュレータのアップデートなどに伴い重くなってしまった。

しかし、そんな状況でもやれることはあった。Mac のアプリであれば MacBook 12 inch でも十分実用に耐えられる。おまけに実は Mac のアプリも Swift UI で作成できるのである。ということで、行きの新幹線では Mac アプリを作りつつ Swift UI のお作法を学ぶという時間に割り当てられた。

Swift UI は React 以降の SPA フレームワークを扱った人であればある程度早く理解ができるように思う。今時の SPA フレームワークのトレンドの一つに「宣言的UI」というパラダイムがあるが、これは Swift UI においても採用されている。アプリケーションの状態をデータとしてとらえ、ビュー自体はデータを引数にした関数の結果として管理していく。データが変わるのでビューも変化する、というスタイルだ。

おまけに Swift UI では @State というわかりやすいプロパティで状態を定義することができる。React では useState hook を使うことで同様のことができるが、返り値が慣れないとわからない配列になって返ってくるためむしろ Swift UI のほうが洗練されていてわかりやすさすらあった。

状態の管理方法がわかれば、あとはビューの書き方ということになり、これは HTML タグ形式ではないものの、レイアウト構造に沿って書いていく感じは他の UI フレームワークに慣れていればすぐに扱えるだろうと感じた。

さて、ここまでは Swift UI の理解の話になるが、そこから先は宿で行った。VisionOS アプリにはいくつかの独特な概念がある。これの理解には若干時間を割いた。特に AR もしくは VR アプリとしてふるまうようにするには共有スペースやフルスペースといった概念を理解する必要があった。

Swift UI を使った iPhone アプリのようなものを空間に奥には Window というレベルでアプリケーションを作成すればいい。これは行きの新幹線で作っていたコードがほとんどそのまま使うことができた。

ただし、おそらく VisionOS の開発にはいくつかわかっておいたほうがいいツボのようなものがあり、そのうちの一つが、共有スペースとフルスペースの切り替えだろうと思った。Swift UI で書ける空間に配置されたパネルから、より没入感の高い領域としてシーンを切り替えて使える ImmersiveSpace というシーンがおそらく VisionOS が最も威力を発揮するだろうと思えたからだ。この部分の扱い方を学習することができれば、今回の合宿は成功だと思えた。

ということで、今回の合宿では Swift UI を使った簡単なパネル型コンテンツが空中に配置されており、そこから ImmersiveSpace に遷移するというアプリケーションを作り、それを発表するということが目標となった。

いちおう発表の主体としては「よりひろいフロントエンド」として行っており、自分の発表時間を「よりひろいフロントエンド vol.00」として行った。今年はイベントもいくつかやっていきたいと思う。

成果発表のスライド表紙「VisionOS向けアプリをつくってみる」

成果発表は2日目の夜で、一応参加者全員発表しましょうというたてつけで行われた。スライドは2日目の午後には用意できたので、発表時は作成したデモやリンク先の解説などを交えつつ20分くらい行った。実際は30分くらい話したかもしれない。この日は大体の人が長く話す結果になったがトピックとしてはいろいろな分野があり、退屈しなかった。必ずしも開発の話ばかりであったわけではなく、研究の話やコミュニティの話、取り組んでいる活動の話など。

ただ、2日目の夜は大量の松葉ガニを食べ、お酒も飲んだ後であったため、一時期は眠気との闘いが大変であった。発表順としては一番最後が自分であり、最後のほうはお酒も抜け、有意義な発表ができたと思っている。

今回で VisionOS の全容がわかったなんてことは微塵も言えないが、開発スタイルや開発の流れの全体像を把握するということが出来たというのは参加費を軽く上回る成果だったように思う。ちなみに会場は kazamori 社のスポンサードでした。大変な感謝ともに、厚く御礼申し上げたうえで城崎温泉ワーケーション合宿の記事を締めくくりたいと思う。

WorkationMacvisionOSXR

Share

About site

「よりひろいフロントエンド」はじめました

いろいろやっている自分を一言で表す言葉として「より広いフロントエンド」を思いつきました。このサイトではこの言葉を中心に ウェブ、XR、UI デザイン、バックエンド、インフラストラクチャーやその周辺のことを興味の赴くまま広くディスカバリーしていきます

About Me

カンソクインダストリーズのロゴ

「よりひろいフロントエンド」運営元 カンソクインダストリーズ では、フロントエンドを中心によろずご相談お受けいたします。お気軽にお問い合わせください。