Reflective UI実践：現実世界が映り込むUI表現｜usagimaru｜note
先日Reflective UIなる興味深いトレンドを紹介している記事を見かけました。
カメラを使って写り込みや環境を反映させたり、加速度センサーを使って反射を表現したりと、インタラクションでUIを変化させるというものです。
今はフラットデザインやマテリアルデザインなどシンプルなUIが主流ですし、実際のアプリに組み込もうと思ったらカメラの許可が必要などハードルは高そうですが、面白い流れではあると思います。
上記記事で紹介されている中で、とりあえずこちらをちょっと真似してみようかと思ったのですが、加速度センサーなどの利用が必要なため、端末で実行することが前提となります。
なので本来プロジェクトを作ってアプリとして制作しないといけないのですが、UI1個試すためにこれは少し大袈裟すぎる気がします。
なんとかプレイグラウンドで加速度センサーを利用できないか方法を探してみたところ、条件はつきますが、割と簡単にやれるみたいでした。
結論から言うと、iPadのSwift Playgroundsからだと実際のセンサーの値が取得できるようです。
こちらをSwift Playgroundsで実行して、iPadをグリグリすると以下のようになります。
肝となるのはこちらの一文です。
PlaygroundPage.current.needsIndefiniteExecution = true
このプロパティーをtrueにすると、プログラムが終了せず無期限で実行されるようになる、というものです。
Playgroundで非同期処理を行う際に意味もわからず差し込んでいましたが、今回ちゃんとした意味を知りました。
Swift Playgroundsで非同期処理の完了を待つ方法
こちらが参考になります。
もう少し探ってみると、センサーだけでなく、カメラなどの利用もできるようです。
また、Swift PlaygroundsのファイルはiCloud経由で同期できるので、Macでコードを書いてiPadで実行、というワークフローが可能です。
こちらは端末に依存した機能を試す際には積極的に利用していきたいところです。
上記が伝えたいことの全てではありますが、CoreMotionを利用したUIを作ってみたので公開します。
画面の傾いている向きに対して、ハイライト部分が移動するUIです。
こちらをもう少し作り込めば上記YoutubeのUIにたどり着けるのではないかなという気がしています。