https://www.tokoro.me/ Recent content on TOKOROM BLOG Hugo -- gohugo.io ja Copyright © tokorom. All Rights Reserved. Wed, 18 Jun 2025 19:00:37 +0900 https://www.tokoro.me/img/hugo.png https://www.tokoro.me/ https://www.tokoro.me/posts/import-icon-composer-icons-into-xcode-project/ Wed, 18 Jun 2025 19:00:37 +0900 https://www.tokoro.me/posts/import-icon-composer-icons-into-xcode-project/ 新しいアプリアイコン WWDC25で新しいアプリアイコンの形式が発表されましたね。 iOS/iPadOS 26以降では、これまでvisionOSやtvOSがサポートしていたような複数レイヤーのアイコンをサポートするようになりました。 Icon Composer 新しいアプリアイコンの詳細についてここでは書きませんが、新しい形式のアプリアイコンを作るためのIcon Composerという専用ツールもリリースされました。 アプリアイコンのファイル これまではiOS/visionOS/tvOS用にそれぞれ別のアイコン画像をXcode上で設定していました。 しかし、新しいアプリアイコンは.iconという拡張子の１つのファイルにパッケージングされ、その１つの.iconファイルを適用すれば、全てのプラットフォームのアプリアイコンが含められるようになりました。 Xcodeプロジェクトへの取り込み方法 ということで、デザイナーさんがIcon Composerで作ってくれた新しいアプリアイコンを適用しよう！と思ったのですが、WWDC25のセッションビデオを探してもなかなかその情報が見つかりません。 探してみたところ、こちらのドキュメントの最後のほうに明記されていました！ Add your Icon Composer file to an Xcode project If you create your Icon Composer file outside of Xcode, you can add it to your Xcode project anytime to view your icon in Simulator and on real devices. Just drag the Icon Composer file from Finder to the project navigator, and Xcode provides feedback on where to drop it in a target folder. https://www.tokoro.me/posts/import-icon-composer-icons-into-xcode-project/icons.png https://www.tokoro.me/posts/wwdc25-visionos-widget-summary/ Mon, 16 Jun 2025 18:00:00 +0900 https://www.tokoro.me/posts/wwdc25-visionos-widget-summary/ visionOS 26 で 空間Widget（ウィジェット） がサポートされましたね！ この記事では空間Widgetでできることをサンプルコードを交えて解説します。 空間Widgetとは iOSやmacOS同様にWidgetKitで構築したWidgetをvisionOSにも表示できます。 visionOSが他OSと大きく違うのはWidgetを現実世界の机や壁に設置できるところです。 机の上など水平面に設置したWidgetは自動でユーザーのほうに向きます。 机の上に配置 壁に設置 Widgetのサイズ Widgetのサイズは以下５種類から選べます。 Small 158x158pt Medium 354x158pt Large 354x354pt Extra Large Portrait 354x550pt Extra Large Landscape 550x354pt どのWidgetもユーザーが任意にリサイズ（縦横比は変わらず75%から125%の範囲内で）できます。 どのサイズをサポートするかは従来のiOSなどのWidgetと同様にsupportedFamiliesモディファイアで指定できます。 .supportedFamilies( [.systemExtraLarge, .systemExtraLargePortrait] ) 素材 visionOSのWidgetは素材が Paper(紙) なのか Glass(ガラス) なのかを指定できます。 Paperは印刷物のようなリアルなあしらいになり、Glassなら前景と背景の間に深みが出ます。 PaperとGlassで周辺環境の明るさによる見え方の違いも出てきます。 素材はwidgetTextureモディファイアで指定できます。 .widgetTexture(.paper) マウントスタイル マウントスタイルとして以下２つをユーザーが選択可能です。 Recessed 埋没したようなスタイル Elevated 浮き上がったようなスタイル 壁面に設置する場合はどちらのスタイルも選べますが、机など水平面に設置する場合はElevatedのみです。そのため、マウントスタイルとしてRecessedしかサポートしていない場合、水平面に設置できなくなります。 デフォルトで両方のマウントスタイルをサポートしますが、必要ならsupportedMountingStylesモディファイアでどちらか片方のみに限定できます。 .supportedMountingStyles([.recessed]) 距離によるUIの変更 visionOSのWidgetは他OSのWidgetと違い、現実世界に設置されるためユーザーからの距離が遠くなることもあります。 そのため、ユーザーからの距離を検知してUIを変更できます。 例えば、ユーザーが離れたら表示項目を減らしてより大きなフォントで表示するなどです。 .default 距離が近い .simplified 距離が遠い 距離による切り替えはlevelOfDetail environment variable により可能で、以下２種の値を検知できます。 .default デフォルト/距離が近い .simplfied 簡易表示/距離が遠い @Environment(\. https://www.tokoro.me/posts/wwdc25-visionos-widget-summary/top.png https://www.tokoro.me/posts/wwdc25-swiftui-new-features/ Fri, 13 Jun 2025 15:00:36 +0900 https://www.tokoro.me/posts/wwdc25-swiftui-new-features/ WWDC25のセッション SwiftUIの新機能 で紹介されたSwiftUI新機能をカテゴリごとにまとめます。 昨年のWWDC24のSwiftUIの新機能から引き続き盛りだくさんなアップデートですね！ Liquid Glassデザインの適用 アプリを新しいXcode（SDK）でリビルドするだけで、全プラットフォームでLiquid Glassデザインが適用されます。 例えば、ナビゲーションコンテナが一新され、タブバーやツールバーもコンパクトな新スタイルに変更されました。これらはナビゲーション遷移時にアイテムがなめらかにモーフィング（形状変化）します。 iPadOSやmacOSのサイドバーも半透明のガラスのようなデザインになり、背後のコンテンツが映り込むようになりました。 もちろんトグル、セグメントコントロール、スライダーなど標準UIコントロールもデザイン刷新され、プラットフォーム全体で統一感のあるモダンな見た目になっています。 Build a SwiftUI app with the new design ToolbarSpacer ToolbarSpacerを使用することで、ツールバー項目のセクション分けを調整できるようになりました。 このサンプルでは、上下の矢印ボタンのグループと、設定ボタンの間に固定スペーサを配置して分離しています。 .toolbar { ToolbarItemGroup(placement: .primaryAction) { UpButton() DownButton() } ToolbarSpacer(.fixed, placement: .primaryAction) ToolbarItem(placement: .primaryAction) { SettingsButton() } } ToolbarSpacer Liquid Glassへの着色 ツールバーの特定のボタンを目立たせたいなど、必要ならLiquid Glass UIにtintで着色できます。 .toolbar { ToolbarItem(placement: .primaryAction) { SaveLocationButton() .buttonStyle(.borderedProminent) .tint(.pink) } } Searchableの刷新 .searchableによる検索UIは、iPhoneでは画面下部に表示されるよう変更されました。一方、iPadやmacOSでは画面右上に表示されるなど、プラットフォームに応じて適切な場所に表示されます。 NavigationSplitView { Text("Sidebar") } detail: { Text("Detail") } .searchable( text: $query, prompt: "What are you looking for? https://www.tokoro.me/posts/wwdc25-swiftui-new-features/top.png https://www.tokoro.me/posts/cursor-ios-build-run/ Tue, 20 May 2025 10:30:00 +0900 https://www.tokoro.me/posts/cursor-ios-build-run/ CursorでiOSアプリ開発を本格的に実施するようになり、1ヶ月弱が経過しました。 今のところ無事にVimからの移行に成功しています。 前回、Cursorでswift-formatする記事を書きましたが、今回はBuild&Runについて解説します。 Build&Runを実施する方法の候補 CursorでiOSアプリのBuildを行うには、以下の方法が考えられます。 Taskでxcodebuildを実行してproblemMatcherにかける SweetPadなどのプラグインを使用する BuildはXcodeで行うと割り切る わたしは最初にxcodebuildから試してみました。 結果として、Build自体は問題なく実行でき、BuildエラーをProblemsに取り込むことも問題ありませんでした。 しかし、xcodebuildとXcodeでのBuildは厳密には異なり、どうしてもXcodeのほうがBuildが速く終わるのです1。 SweetPadなどのプラグインも便利そうですが、そのBuildはxcodebuildを使用する実装になっているとのことでした。また、わたしは老害なので、まだ困っていない部分で大きなプラグインを導入することに抵抗があるため、今のところSweetPadの導入は見送っています。 Build&RunはXcodeに任せる 最終的に、わたしはBuild&RunはXcodeに任せることにしました。 それが最もBuildが速く、その後すぐにiPhone実機などでRunするのもスムーズだったためです。 Buildするタスク CursorからXcodeにBuildを実行するのは、タスク経由でosascriptを実行するだけです： { "label": "Build Project", "type": "shell", "command": "osascript", "args": [ "-e", "tell application \"Xcode\" to activate", "-e", "tell application \"System Events\" to keystroke \"b\" using {command down}" ], "problemMatcher": [] } このタスクでは、 Xcodeをアクティブにして Cmd + b キーを押す という操作を行っています。 Runするタスク Runを実行したい場合は、この設定を少し変更して Cmd + r キーを押すようにするだけです： { "label": "Run Project", "type": "shell", "command": "osascript", "args": [ "-e", "tell application \"Xcode\" to activate", "-e", "tell application \"System Events\" to keystroke \"r\" using {command down}" ], "problemMatcher": [] } 現在のプロジェクトをXcodeで開くタスク このBuild&Runのタスクは、あくまでも現在開いているXcodeプロジェクトでBuild&Runするだけですので、あらかじめ対象のプロジェクトをXcodeで開いておく必要があります。 そこもタスクで実行したい場合は、以下のような設定が使えます： https://www.tokoro.me/posts/cursor-ios-build-run/top.png https://www.tokoro.me/posts/cursor-swift-format/ Wed, 14 May 2025 11:22:00 +0900 https://www.tokoro.me/posts/cursor-swift-format/ 先日よりCursorでiOSアプリ開発をするようになり、これまでVimでやっていたことを順々にCursorに移植しています。 その中の1つが swift-format です。 わたしは現在編集中のファイルのみswift-formatでチェックするのが好みです。 プロジェクト全体をswift-formatにかけるのはビルドのタイミング ファイルを保存したタイミングでそのファイルだけをswift-formatでチェック という区分けをしています。 実際にCursorでswift-formatを利用している様子がこちらです。Problemsでの一覧表示や自動整形にも対応しています。 swift-formatの使い方 Xcodeに内蔵されたswift-formatで特定のファイルをチェックするコマンドは以下です。 xcrun swift-format lint Sample/Sample.swift Cursor/VSCodeのタスク これをCursor/VSCodeのタスクに設定したのが以下です。 { "label": "Lint Current File", "type": "shell", "command": "zsh", "args": [ "-c", "if [ \"${fileExtname}\" = \".swift\" ]; then xcrun swift-format lint \"${file}\"; fi" ], "problemMatcher": [ { "owner": "swift-format", "fileLocation": ["absolute"], "pattern": { "regexp": "^(.*):(\\d+):(\\d+):\\s+(error|warning):\\s+(.*)$", "file": 1, "line": 2, "column": 3, "severity": 4, "message": 5 } } ], "presentation": { "reveal": "silent", "revealProblems": "onProblem" } } 基本的には xcrun swift-format lint \"${file}\" というコマンドを実行するだけです。 https://www.tokoro.me/posts/cursor-swift-format/top.png https://www.tokoro.me/posts/writing-blog-with-cursor-ai/ Thu, 08 May 2025 11:00:00 +0900 https://www.tokoro.me/posts/writing-blog-with-cursor-ai/ はじめに まだAIによる執筆支援はうまく活用できていません（アドバイス求む！） Cursor/VSCode自体の設定については別途こちらに書きました 記事のファイル作成と見出し案 まず記事を書くにあたってタイトルだけ決めて、CursorのAgentに以下のように依頼しました： [title] というタイトルでブログ記事のファイルを作ってください。 記事のファイル名は index.md で、content/posts ディレクトリに記事のタイトルを簡易な英語にした新しいディレクトリを作り、その直下に設置してください。 Front Matterのtitleには指定したタイトルを、tagsには記事内容に適したTagを幾つか設定してください。 記事の本文を書く必要はありませんので、この記事を書くための見出しの案だけ作ってください。見出しはMarkdown形式で連番を付与せずにSEOも考慮して構成してください。 これにより、適切なディレクトリを作成し、index.mdを設置し、そこに見出しの案を書いてもらうことができます。 はじめは文章の案も作ってもらったのですが、イメージ通りの文面になかなかならないため、見出しだけを作ってもらうことにしました。 たとえば、このブログ記事のタイトルに対してCursorが作ってくれた見出しの案が以下です： ## CursorのAI機能とは ## ブログ記事執筆での活用方法 ### 文章の推敲と改善 ### コードブロックの生成と最適化 ### 画像の最適化と管理 ### SEO対策の提案 ## 実践的な使い方のコツ ### プロンプトの工夫 ### 段階的な改善 ### コードと文章のバランス ## 注意点と制限事項 ## まとめ ## 今後の展望 けっきょくこのまま使うわけではないですが、ゼロから書き始めるよりは良いかなということで。。。 このあたりはAIへの指示をもっときちんとすれば精度が良くなるのかも？ アイキャッチ画像の生成と保存 結果としてこれはCursor単体ではできていません。 Cursorに「この記事のアイキャッチ画像を生成してtop.pngという名前で保存してください。」とお願いしても、 申し訳ありませんが、現在のツールセットには画像を生成する機能が含まれていません。 とつれない反応。 MCPなどを使いこなせば実現できそうですが、いったんあきらめて、外部でChatGPTに作ってもらった画像をドラッグ＆ドロップすることにしました。 ChatGPTへのお願いのしかた いきなりアイキャッチ画像の生成をお願いすると、長い時間をかけてイメージと違うものが生成されて無駄になることが多かったため、まずは以下のように依頼します： [title] というタイトルのブログ記事のアイキャッチ画像を作りたいのですが、まずは画像を生成せずにテキストベースで、どのようなキーワードで作成すべきかの案をいくつか出してください。 そのままコピペできるようにカンマ区切りのおすすめのキーワードの組み合わせを日本語で箇条書きで列挙してください。 案の中のいくつかには、犬というキーワードも含めてください。 これで、そのままコピペで使いやすいよう、カンマ区切りのキーワードの組み合わせを箇条書きで列挙してもらいます。 その中でイメージにあったキーワードの組み合わせがあればそれをコピーして以下のように画像生成をお願いします： [keywords] というキーワードで1200x630のアイキャッチ画像を作ってください。 画像にテキストは含めないでください。 これで少なくともイメージと全く違うものにはならないはずなので、そのあと、何度かリテイクすればそれっぽいアイキャッチ画像ができるはずです。 本文を書く これもやってみたものの、まだうまく活用できていません。 Cursorに作ってもらった見出しを自分で整理したら、見出しごとに本文を書いていきます。 この際、Cursorの ⌘K による Inline Generation で本文の案を作ってもらうこともできます。 ある程度書き始めてから このセクションの続きを書いて。次のセクションには行かないで。 とすると、書き途中のセクションに限定して案を出してくれます。 https://www.tokoro.me/posts/writing-blog-with-cursor-ai/top.png https://www.tokoro.me/posts/basic-settings-for-blog-writing/ Tue, 06 May 2025 15:00:00 +0900 https://www.tokoro.me/posts/basic-settings-for-blog-writing/ 最近は本業のプログラミングを専らAIエディタのCursorで書くようになりました。 このブログ記事はずっとVimで書き続けていたのですが、こちらもVSCodeやAIの恩恵を受けられるのではないかと考え、環境の移行を開始しました。 本記事では、その移行でCursor（VSCode）にどのような設定を加えたかをまとめています。 まだこの設定で運用を開始したばかりの段階ですので、改善点やアドバイスをいただけると幸いです！ 前提条件 わたしはCursor/VSCode初級者です ブログは昔からの経緯でStatic Site GeneratorのHugoを使っています これから新しく採択するなら別のものにすると思いますが、今Generatorに不満があるわけではないのでそのままで わたしはVimmerなのでVSCodeVimを使いますがこの記事ではそのことに触れません 別途記事を書く予定です この記事ではAIの利用方法については触れません AIの利用については別途こちらに書きました Cursor導入後にやったこと（要約） この記事では以下の内容について紹介します。 Front Matterを設置しやすくする そのほかスニペットを設定 画像をドラッグ＆ドロップして記事に挿入する タスクで画像のファイルサイズ縮小をまとめてやる 記事のリアルタイムプレビュー 拡張機能 Front Matterを設置しやすくする このブログ記事では具体的には、 --- title: "Cursor/VSCodeでブログ記事を書くときの基本設定" date: 2025-05-06T15:00:00+09:00 draft: false authors: [tokorom] tags: ["vscode", "cursor", "blog", "AI", "markdown"] images: [/posts/basic-settings-for-blog-writing/top.png] --- というFront Matterを設定しています。 Cursorに自動で設定してもらってもそれっぽくはなるのですが安定しなかったので以下のスニペットを .vscode/markdown.code-snippets に設定しました。 { "Hugo Blog Markdown Front Matter": { "scope": "markdown", "prefix": "markdown-frontmatter", "body": [ "---", "title: ${1:${TM_DIRECTORY/.*\\/([^\\/]+)\\/?$/$1/}}", "date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}+09:00", "draft: false", "authors: [tokorom]", "tags: [$2]", "images: [/posts/${TM_DIRECTORY/. https://www.tokoro.me/posts/basic-settings-for-blog-writing/top.png https://www.tokoro.me/posts/wwdc24-whats-new-in-swiftui/ Tue, 25 Jun 2024 10:56:06 +0900 https://www.tokoro.me/posts/wwdc24-whats-new-in-swiftui/ WWDC24の What’s new in SwiftUI のまとめです。 今回、このセッションで紹介される項目の数が例年以上に多すぎてびっくりでした。 セッションでは短い間隔でポンポンとたくさんの機能が流れるように紹介されていきます。 このまとめでは、セッションでは軽く触れられた程度の内容も、APIリファレンスへのリンクをつけるなどしてもう少しだけ補足します。 このセッションを視聴する/この記事を参照する目的は、WWDC24で発表されたSwiftUIの新機能をさらっと把握し頭の中にインデックスを貼ることだと思います。 サイドバー/タブバー サイドバー/タブバーがより柔軟に フローティングタブバーをサポート 項目の並び替えや使用頻度の低いオプションの非表示など、ユーザーが自分好みにカスタマイズすることもできる TabViewに内包する要素も新しいタイプセーフな書き方に struct KaraokeTabView: View { @State var customization = TabViewCustomization() var body: some View { TabView { Tab("Parties", image: "party.popper") { PartiesView(parties: Party.all) } .customizationID("karaoke.tab.parties") Tab("Planning", image: "pencil.and.list.clipboard") { PlanningView() } .customizationID("karaoke.tab.planning") Tab("Attendance", image: "person.3") { AttendanceView() } .customizationID("karaoke.tab.attendance") Tab("Song List", image: "music.note.list") { SongListView() } .customizationID("karaoke.tab.songlist") } .tabViewStyle(.sidebarAdaptable) .tabViewCustomization($customization) } } tabViewStyleに sidebarAdaptable を指定することで、プラットフォームごとに柔軟にサイドバー OR タブバーが適用される https://www.tokoro.me/images/wwdc24-whats-new-in-swiftui/top.jpg https://www.tokoro.me/posts/visionos-simplest-full-immersion-space-app/ Thu, 28 Sep 2023 11:00:50 +0900 https://www.tokoro.me/posts/visionos-simplest-full-immersion-space-app/ ぼくがやりたかったのはシンプルに完全没入空間 immersiveStyle = FullImmersionStyle になにか表示するというだけなのですが、それなのに地味にはまったため記事にしています。 完全没入空間とは 日本語訳が正しいかわかりませんが、パススルー領域が全くない３６０度全面が1つのアプリで覆われた空間が完全没入空間です。 visionOSならではのUIであるため、なにかしら試してみたいかたも多いのではないでしょうか。 Appleのサンプルでは宇宙空間に没入するデモがあります。 最もシンプルなサンプルがほしい！ このAppleのサンプルを動かせばことが済む話でもあるのですが、このサンプルでも地球や月などのコンテンツを読み出してRealityViewに設置するなどしなければならず、RealityKitに慣れていない僕にとってはこれでも冗長かなあという感覚でした。 僕からすると未知のファイルなどがなにもなく、単に目の前に四角形が1つ出る程度の最もシンプルなものが欲しかったんです。 それをベースにちょっとずつ自分で実験をしていければ、と。 これが最低限の３ファイルだ！ app.swift アプリのエントリポイントです。 import SwiftUI @main struct SimplestFullImmersionApp: App { var body: some Scene { WindowGroup { ContentView() } ImmersiveSpace(id: "ImmersiveSpace") { ImmersiveView() } .immersionStyle(selection: .constant(.full), in: .full) } } body内に初期表示される WindowGroup と ImmersiveSpace を置きます ImmersiveSpace は完全没入スタイルにするため immersionStyle に full を指定します ContentView.swift 初期表示されるWindowのViewです。 import SwiftUI struct ContentView: View { @Environment(\.openImmersiveSpace) var openImmersiveSpace var body: some View { Button("Open Immersive Space") { Task { await openImmersiveSpace(id: "ImmersiveSpace") } } } } Environmentの openImmersiveSpace を使えるようにします Buttonを1つ設置し押したら openImmersiveSpace で app. https://www.tokoro.me/images/visionos-simplest-full-immersion-space-app/top.png https://www.tokoro.me/posts/iosdc2023-shareplay/ Mon, 18 Sep 2023 11:37:41 +0900 https://www.tokoro.me/posts/iosdc2023-shareplay/ Photo by @huin 去る2023年9月1日に iOSDC Japan 2023 に参加し、 SharePlayの歴史と進化 - そしてvisionOSへ というセッションをもたせていただきました。 遅ればせながら iwillblog ! セッションスライドは 公開 しているものの、スライドにはあまり内容書いておらず台本がメインのため、以下、スライドを添付しつつセッションの内容を簡単にまとめます。 SharePlayってなに？ 2021年の発表時点ではFaceTime通話中に離れた場所の知り合いとアプリのコンテンツを共有するもの」と紹介していましたが、じつはこの2年でSharePlayの基本概念自体も大きく変わってきています。 まず2022年に「FaceTime通話中」という制限が撤廃され、2023年のiOS17では「離れた場所の知り合い」という前提条件もなくなり、むしろ積極的に近くの誰かとアプリを共有することを推し出すものとなりました。 SharePlayは、大きく3種に分けることができます。 Screen Sharing、Media playback、Custom UIです。 Screen Sharingは表示されているアプリの画面をそのまま共有する機能です。 Media playbackは動画や音楽を同期再生するものです。 Custom UIは各アプリで自由にイベントを送受信するためのものです。 Media playbackとCustom UIは各アプリに組み込が必要な機能で、この2つは同居できます。 SharePlayの歴史と進化 2021年にSharePlayが発表されました。しかしこの時点ではFaceTimeの通話中にしか発火できないという大きな制限がありました。 翌年2022年には、FaceTime通話中でなくても、アプリ手動でSharePlayを開始したり、さらにはiMessageをトリガーとしてFaceTimeを介さずにSharePlayをすることも可能になりました。 ただ、この時点でもFaceTimeかiMessageのどちらかが必要なので「連絡先を知っている相手」とのみSharePlayができると言う制限がありました。 そして2023年、SharePlayに革新的なバージョンアップがありました！ こちらはAppleのWebサイトのスクショですが「iPhone同士を近づけてAirDropできるようになった」という紹介とともに「iPhoneを近づけるだけでSharePlayが開始する」というSharePlayの新機能の紹介が押し出されています。 そうです！AirDropでSharePlayを開始できるようになったのです。 AirDropでSharePlayとだけ聞くと、ひょっとすると「AirDropでできるのちょっとだけ便利になったね」くらいの印象かもしれません。 しかし実際にはこれは 「連絡先を知らない相手」とも気軽にSharePlayが可能になった というSharePlayの歴史においては革新的なバージョンアップなんです。 これでSharePlayを利用開始する敷居は格段に下がりました。 また、AirDropするということはAirDropする相手がすぐ近くにいるということですので、これまで特にコロナ禍でリモートで離れた場所にいる家族や友達とのSharePlayという押し出しかただったのと比較し、2023年には「近くにいる知り合い」とのSharePlay！というのも大きく推し出されるように変わりました！ もっというとAirDropの採用は、連絡先を登録しあうまでではない知り合いとの インスタントなSharePlay がユースケースに加わったということを示しています。 その他のバージョンアップ まず、2022年 iOS15.4でSharePlayのカスタムUIで一度に送信できるメッセージのサイズが64KBから256KBに拡大されました。 次にiOS15.4でメッセージ送信のレイテンシを改善する機能も入っています。具体的には優先度の低いメッセージをアプリで明示的に指定し、UDPで高速に送信できるようにする仕組みです。 たとえばお絵描きアプリであれば、線を描いている途中経過については低レイテンシで高速にメッセージを送信し、線を全て描き終わったタイミングで線の全ての情報を改めて信頼性の高いメッセージで送信しなおす、といったことが可能です。 またiOS15.4ではアプリがSharePlayの開始を簡単に実現できるようにGroupActivitySharingControllerというクラスも追加されました。 これを利用することでアプリ手動でSharePlayを開始し、FaceTimeやMessageで友達をSharePlayに招待するUIをOS任せで簡単に実現できるようになりました。 そして2023年、iOS17でSharePlayの仕組みの中でファイル送信も可能になります！ これまでは画像やPDFなどの重いファイルをSharePlayの仕組みの中だけで送受信することはできませんでした。 iOS17からは、たとえばお絵描きアプリの写真やPDF添付機能もSharePlayの仕組みの中だけで完結できます。 さらに素晴らしいことにSharePlayのファイル転送の仕組みは、SharePlayに後から参加した人へのフォローもしてくれます。 通常SharePlayは後から参加した人に現在の状態を伝えるために、他の参加者がこれまでの経緯をまとめて送り直す必要があります。 しかしサイズの大きいファイルを送り直すのは大変です。SharePlayのファイル転送機能では、他の参加者が送り直さなくてもAppleのサーバから直接ファイルをダウンロードすることが可能とのことです。 そして最後に、tvOS17からはApple TVでもFaceTimeが可能になりました！ これ自体はSharePlayに関するアップデートではありませんが、マルチプラットフォームでSharePlayを扱いやすくなったという点で非常に良いニュースかと思います。 visionOSでのSharePlay とここまでSharePlayの歴史と進化について紹介してきましたが、今年2023年にはApple Vision Proも発表されました。 SharePlayは、もちろんvisionOSにも対応します。 https://www.tokoro.me/images/iosdc2023-shareplay/top.jpg https://www.tokoro.me/posts/visionos-volume-3dmodel/ Mon, 26 Jun 2023 17:27:14 +0900 https://www.tokoro.me/posts/visionos-volume-3dmodel/ visionOS SDK Betaがリリースされましたので少しずつ勉強していきます！ まずは第一歩目としてSwiftUIアプリの中で3Dモデルを表示してみました。 どうやって表示する？ WWDCセッションの紹介としてはどうやらSwiftUIのViewで Model3D(named: "xxx") とするだけで表示できるようです。 簡単すごい！ どんな3Dモデルを表示できる？ https://developer.apple.com/documentation/realitykit/model3d/init(named:bundle:) によると The name of the USD or Reality file to display. USDファイル Realityファイル を読み込めるよう。 Realityファイルについてはよく知らないがApple独自のものっぽいです。 USDは Universal Scene Description といってピクサーの開発した3Dシーングラフ形式とのことらしい。 今回はどこかからUSDファイルをお借りして表示してみることにします。 使わせていただいたUSDファイル J CUBE Inc. - Maneki USDZ for AR / CC BY 4.0 ベースとなるSwiftUIアプリ マルチプラットフォーム対応のシンプルなSwiftUIアプリをベースとしました。 App import SwiftUI @main struct app: App { var body: some Scene { WindowGroup { ContentView() } .windowStyle(.volumetric) } } SwiftUIアプリはデフォルトではWindowタイプ（平面）になるため、3D表示するためのVolumeタイプにするため、WindowGroupに .windowStyle(.volumetric) モディファイアを適用しました。 変更したのはその1行だけです。 https://www.tokoro.me/images/visionos-volume-3dmodel/top.png https://www.tokoro.me/posts/wwdc2023-keynote-pro-vision/ Thu, 15 Jun 2023 15:11:44 +0900 https://www.tokoro.me/posts/wwdc2023-keynote-pro-vision/ タイトルのとおりですが、KeynoteのApple Pro Visionの紹介部分を見直して、一場面一場面停止して詳細を眺めつつ、感じたことを１つ１つ細かくコメントしていきました（3時間以上かかりました…）。 留意事項 ソフトウェア面に注視し、ハードウェアの説明の部分はスキップしています あくまでも所が思ったこと感じたことをコメントしていくだけでエビデンス等はありません Keynoteを視聴しながら都度思ったことを時系列に書き込んでいますので検討外れなことを言ったりもします 視聴が進んでいく中で前半にコメントした疑問が後半で解決したり訂正されたりもしています イントロダクション ホーム画面 丸いアプリアイコンが並ぶ フォルダらしきものもある iPhoneのホーム画面のようにページをサポートしたりするのだろうか？ Spotlightやウィジェットなどの扱いは？ 左端に３つのモード？を切り替えるようなボタンがある １つはアプリモード １つは隣あった人のアイコン SF Symbolsでいうと person.2.fill なんらか人とコミュニケーションをとるためのモードか？ コミュニケーションがトップレベルに位置しているのがそこを重要視しているあらわれか １つは景色的なアイコン SF Symbolsで言うと mountain.2.fill に似ているが同じものは見つからず（それに星的なものが付いている） アプリ、コミュニケーションに並んでトップレベルに置かれるもの、なんだろう？ ARでなく全面を覆うVRモード的なものに入ったりする？ （と思ったが後にDigital Crownで現実と仮想の深度を調整できると紹介されていたので違いそう） 写真アプリ ウィンドウ内で写真のリストをスクロールするデモ ホーム画面にもあった左端のボタンリストが写真アプリに入って切り替わった おそらくこれがvisionOSにおけるタブバーだろう タブバーがホーム画面にも存在するというのはiOSなどではなかった 画面下部にはコンテキストのスイッチャー的なUIがある これはiOSの写真アプリにもあるものだが写真アプリのウィンドウから少し外れて表示されているのが特徴 おそらくiOS標準のUIコントローラを利用していればこのようにOSに合わせて良きように表示してくれるのだろう 可能な場面では標準のUIコントローラを利用するのがより重要になりそう さらにこの下に謎のドットとバーのUIがある バーはiOSだとドラッグ可能であることを示すUI これでウィンドウの場所を変更するなどできるのかもしれない その隣にあるドットもウィンドウをなんらか変更するUIかも？たとえばウィンドウを最小化するとか UI 目、手、声で操作する 重要視する操作方法の順番と思われる 目（Eye Tracking）が一番はじめにくるのが特徴か 360度？好きな位置にウィンドウを配置できるとのこと 「好きな大きさで」アプリを使うというキーワードもあった iOS/iPadOSではなかった複数のアプリが同時にフォアグラウンドにあるという状態がありそう もしくは注視している１アプリがフォアグラウンド扱いとか制御される？ ディスプレイサイズの制限はもちろんないのでアプリのUIデザイン（レイアウト）のしかたは大きく変わってくるのか？ アダプティブなレイアウト（ウィンドウサイズが柔軟に変わる）をサポートする知見は重要 ウィンドウが並ぶのでドラッグ＆ドロップなどアプリ間の連携を意識することもより重要になるだろう このスクショの画面をみるかぎり、真正面にないアプリにもフォーカスがあたっている 複数のアプリがフォアグランドになるか、視線があたっているアプリ１つがフォアグランドになるかのどちらかで確定っぽい この写真がグワっと拡大して没入モードになるところすごい いちおうウィンドウサイズのテンプレート的なもの（Normalサイズ、Expandサイズとか）はあるのかな？ この部分のトップバー的な位置に目を向けると、iOSではナビゲーションバーのleftButtonItem、rightBarButtonItemに配置される要素がある これは透明なナビゲーションバーなのか、それとも別の概念なのか なおKeynote内で他にもナビゲーションバー的なものの他のバリエーションが散見される これらがMacアプリだとこうなる、visionOSアプリだとこうなるみたいなアプリ種別によるものなのか もしくはアプリの状態やモードによるものなのか この場面には利用者本人が映っているのでイメージだろうが、映画やゲームで背景をコンテンツに合わせたものに差し替えるというのはありそう 映画視聴で背景を暗くするというのは後から具体的に説明があった これも利用者本人がいるのでイメージだろうが、FaceTimeなどでプレゼン資料と参加者の顔が空間内で横並びになっているのはリアルに近いミーティングができそうですごい Macがパーソナルコンピューティング iPhoneがモバイルコンピューティング そしてVision Proが空間コンピューティングを切り拓く！しびれる！ Vision Proを実際に使う体験 この画面は「ホームビュー」という名称で紹介されていた アプリの背景は透過されブラーがかかっていて角丸 このタブバー？はフォーカスされることで拡がり、アイコンのみ表示からタイトル付き表示に切り替わった このフォーカスされることで領域も内容も拡大される挙動はタブバーだけでなくアプリ全体の共通のUIのよう アプリのウィンドウの影が現実世界に投影されるのがすごい ウィンドウの右下隅のカーブ状のノブでウィンドウサイズが変更可能とのこと ふだんは表示されていないのでウィンドウの隅を注視すると表示されるのかもしれない ウィンドウ下のバー（ノブ）はウィンドウを動かすUIであることが確定 ここではZ方向に動かしているが、XY方向に動かせるかは不明 アプリ（ウィンドウ）を複数開くと自分（の真正面？）を中心に自動的にスペースが割り当てられるとのこと この場面では、アプリが２つの場合は真正面にどちらか一方がくるのではなく真正面の左右にそれぞれが配置されていた アプリ主動で背景（現実世界）部分を暗くしたりのカスタマイズができるというのも確定で良さそう 現実世界 OR 仮想世界の境界（深度）はデジタルクラウンで任意で調整できるとのこと ２択でなく曖昧にでき、ハードウェアでいつでも？調整できるというのが素敵 視線を向けた部分にフォーカスが当たるというので確定っぽい アプリアイコンはフォーカスが当たると分解されて一部が浮き上がっている！ ということはアプリアイコンをそういう作りにできる（することが推奨される）ということ アプリアイコンのレイヤー分けはtvOSアプリ用のアイコンで既に採用されている フォーカスがあたっている要素を選択するのは「２つの指同士をタップ」 スクロールは「２つの指を上下にずらす」 検索フィールドに視線を合わせたら「声で検索キーワードを入力できる」とのことだが、声を使うのは最後の手段だろうなという印象 複雑なURLやパスワードを打つのは大変そうだから基本的には文字入力はさせないことをベースに考えるのだろう いっぽうで既にAppleTV+iPhoneの連携でtvOSの画面のパスワードをiPhoneで入力という機能は実現されているし、visionOSでも物理キーボードが使えることが明示されているので、複雑な文字入力が必要な場面があっても問題はないだろう EyeSight 装着車の目がゴーグルの前面のディスプレイに表示されるとのこと（見た目はちょっと不気味の谷 ゴーグル装着者を周りから孤立させない（逆もまた然り）という考え方は素敵 EyeSightも「近くに人がいる時は」というトリガーなので良さそう アプリを使っているとき、没入モードのときなど装着者の状態を周りの人が判断できるようになっているのもすごい 装着者目線だと没入モード時に近くに人が来たら自動的に背景が透けてその相手が見えるとのこと 実際の使用感 Vision ProはiPhone/iPad/Macと常に同期 iCloudで常に同期（これは既存にもあるので特別ではない） 真ん中にSafari、左右に別のアプリがある状態で「Safariを拡大」した時はこうなる 拡大（Expand）モード的なものがあり、そのモードになると他のウィンドウは見えなくなるっぽい visionOSのナビゲーションバー（トップバー）はこのコンテンツウィンドウから離れた場所に表示されるものが基本っぽい ここでアプリのウィンドウは「前後にも上下にも積み重ねられる」ことが明示された アプリ内の要素のドラッグ＆ドロップができることも明示 しかも他アプリだけでなく現実世界へのドロップ！ メッセージで届いた3Dオブジェクトを現実世界の机の上におけるのすごい もちろんMagic TrackpadやMagic Keyboardも使える Bluetoothアクセサリ…と紹介されていたので、ぼくのHHKBもきっと使えるはず あとはこれがすごすぎる 現実世界のMacを見つめるとMacのスクリーンがVision Proのほうに映るとのこと もちろんVision Proのアプリと並列に並ぶ iPhoneやiPadもそうなるのかな？ これはApple製品にどっぷりつかる理由になるな（もう既にどっぷりつかってるけど） リモートで同僚と同じ書類を使いながらの共同作業が…とあるが、これはvisionOSではじまったものではなく既存からあるもの こういった共同作業サポートがスタンダードになったら嬉しいがアプリ開発の難易度は確実に上がる… この場面ではアプリが上下に並んでいる実例が このFaceTimeでのミーティングの風景 プレゼン資料が投影されているがこれがSharePlayであることが明示された そのため、SharePlay対応していればサードパーティアプリでもこのような使い方ができるはず そもそもiOSの画面共有もSharePlayなのでなにも対応してなくても自分のアプリをここに投影できる可能性が高い 今考えるとSharePlayがFaceTimeと密結合なのはこのVision Proでの利用を見据えてだったのかもな、と 家での体験 アプリ手動で背景（現実世界）をいじれることを再確認 この場面はパノラマ写真をパノラマ表示したものだったようだ Vision Proでは3Dカメラによる空間再現写真・ビデオの撮影が可能 もちろん空間再現写真・ビデオを視聴することもできる 映画視聴のときは、フッド山などの環境を開いて（おそらく背景に奥行きのある壮大なものを選ぶのが良いということかと）スクリーンを拡大するのがおすすめとのこと もちろん背景は自動的に暗くなる 空間オーディオの品質が高いのはお墨付きだし映画視聴良いかもな もし視聴中に家族がきて声をかけられても、自動でそれを検知して家族の姿が見えて声も聞こえるようになるのがvisionOSのすごいところ Apple TV+だけでなく他の動画視聴サービスにも対応しているとのこと 標準のAVPlayer使っていれば対応してくれるのだと予想 3Dムービーにも対応 アバター２をこれで視聴してみたい 恐竜がウィンドウからXYZ全方向にもはみ出してるのもすごい Apple Arcaceのゲームを遊べるという件は…コンテンツ次第か ウィンドウに収まらない３Dのゲームとか出たら体感的にはすごそう それよりもNintendo SwitchのゲームをVision Pro経由で遊びたいですね ウォルト・ディズニー Kyenoteでウォルト・ディズニーが登場して、コンテンツが揃っていることを（目標にしている）前面に押し出しているのを感じる コンテンツと一緒に背景も配布してくれるみたいのがあるのかも スポーツ観戦でさまざまな付加情報が表示されたり あとは複数のカメラの映像が同時に表示されていて、おそらく視線を向けたカメラに切り替わるだろうUIになっているのが興味深い ミッキーが自分の部屋に降臨！ ディズニーでなくても、自分の好きなキャラクターが自分のそばにいて動いて喋ってくれるのは喜ぶ人たくさんいそう 現実世界の自分の腕にブレスレットが装備される場面 こういう現実世界とかけあわせたコンテンツはVision Proならではの体験になりそうか 後から出てくるがこういうアプリを「空間対応アプリ」と呼ぶよう ハードウェア （ハードウェアの部分は基本スキップします。気になったところだけスポットで。） https://www.tokoro.me/images/wwdc2023-keynote-vision/top.png https://www.tokoro.me/posts/potatotips-74-shareplay/ Mon, 28 Jun 2021 13:29:12 +0900 https://www.tokoro.me/posts/potatotips-74-shareplay/ potatotips #74 2021年6月23日（水）にWantedlyさんご主催のオンラインpotatotips（iOS/Android開発Tips共有会）が開催されました。 イベントページ 当日のLT一覧 私はpotatotipsの運営窓口を担当しているのですが、今回はひさびさにLTもさせていただきました。 LTの内容は「5分でSharePlay」です！ スライドは コチラ。 今回は、このLTの内容をこちらにブログ記事としてまとめさせていただきます。 SharePlayとは？ SharePlayとは、FaceTime通話中に離れた場所の友達とアプリのコンテンツを共有する機能です。 このスクショは離れた場所にいる2人が不動産アプリを一緒に見ながら新しい家の候補を決めている様子です。 利用シーン SharePlayの利用シーンは様々です。 WWDC21の各セッションの中でも様々なシーンが紹介されています。 一緒に映画やスポーツを視聴する ゲームのスーパープレイを自慢する 旅行のときの写真を友人や家族と一緒に見る グループでお絵描きする Swift Playgroundsで一緒にSwiftを学ぶ 不動産アプリで新しい家の候補をふたりで探す 実家の両親がアプリの使い方がわからないのをサポートする 3種のSharePlay SharePlayには大きく3種あります。 Screen sharing: 画面共有 Media playback: 動画や音楽の共有 Custom UI: カスタム ※カスタムについてはこの記事では紹介しませんが、デバイス間でカスタムなコマンドを自由に送受信できる柔軟な仕組みがあります 画面共有への対応 SharePlayの画面共有に対応するには各アプリでどの程度の実装が必要でしょうか？ じつは各アプリでの対応は必要なく、なにもしなくても画面共有に対応できます。 正確には画面共有はホーム画面ごと共有され、その時開いているアプリの画面もそのまま共有されます。 自動的に隠される要素 画面共有は自動的にされる（されてしまう）のですが、一部、共有されない要素があります。 パスワードなどセキュアな入力フィールド DRM（FairPlay）で保護されたコンテンツ です。 その他、必要なら各アプリで隠したい要素（View）をカスタムすることもできます。 動画の共有への対応 最後に動画の共有への対応についてです。 AppleのTVアプリの例 AppleオフィシャルのTVアプリでは次の手順で動画のSharePlayを開始できます。 まず、FaceTime中にTVアプリを起動すると、コンテンツ表示部分に SharePlayが可能であることを示すアイコン が表示されます。 このとき動画を再生しようとすると、 SharePlayするかどうかを確認するダイアログ が表示されます。 ここで SharePlay を選べば動画のSharePlayの開始です。 動画のSharePlayでできること 動画のSharePlayをすると、 DRMで保護されたコンテンツの共有 再生・停止・シークなどによる再生位置の同期 などがデフォルトでサポートされます。 動画のSharePlay対応に必要なコード 実際に動画のSharePlayに対応してみた ViewController のコードが以下です。 import AVKit import GroupActivities import UIKit class ViewController: AVPlayerViewController { private var groupSession: GroupSession<MovieWatchingActivity>? https://www.tokoro.me/images/potatotips-74-shareplay/top.png https://www.tokoro.me/posts/wwdc21-meet-group-activities/ Thu, 10 Jun 2021 12:56:44 +0900 https://www.tokoro.me/posts/wwdc21-meet-group-activities/ Meet Group Activities を視聴して内容をまとめたものです。 先に簡単にまとめ SharePlayはiOS、iPadOS、tvOS、macOSの全てで利用できる ビデオや音楽のShareはmacOSのブラウザでも利用できる SharePlayは大きくは「ビデオや音楽のShare」「その他のカスタム体験のShare」の2つに分けられる ビデオや音楽のShareは、再生、一時停止、シークなどによる再生位置の変化が同期される カスタム体験のほうは一緒にお絵描きさせるなどだいぶ柔軟性がありそう ビデオや音楽のShareはAVPlayerを使えば簡単に実現できるが、独自のプレイヤーを実装していても実現するすべがある アプリごとに自由に独自のイベントを送受信すること可能 導入 離れた場所にいる人たちと同じ部屋にいるような感覚でアクティビティを楽しめる新しい方法として SharePlay は開発されました。 SharePlayは、GroupActivities フレームワークによって実現されています。 このセッションでは、サードパーティアプリにSharePlayを採用する方法が紹介されています。 Communication Appleは、スムーズに自然なコミュニケーションができることが最重要であると考え、FaceTimeとMessagesにSharePlayを組み込んでいます。 ユーザーは、自分にとって最も身近な人たち、友人や家族とのコミュニケーションにかなりの時間を費やしています。 それらは、映画を見るためにリビングルームに招待する対象となるような人たちです。 SharePlayで促進したいのは、まさにそのような人たちとの体験の共有です。 Session SharePlayには、Sessionという概念があります。 Sessionを開始すると、ユーザーはいつものMessagesやFaceTimeで、テキスト、オーディオ、ビデオを使ったコミュニケーションができるようになります。 ユーザーはSessionの中でこれらを柔軟に切り替えられます。 開始済みのSessionに新しい人を招待したり、Sessionの途中で離脱もできます。 SessionをOSが管理してくれるため、ユーザーはSession中でもあらゆるアプリを利用することができます。 各アプリの開発者は、Group Activitiesを使えば、これらの機能を全て利用できます。 Platform Group ActivitiesはiOS、iPadOS、macOSの全てに同じ体験を提供できます。 それだけでなくWebサイト（WebKitブラウザ）でも利用できます（後からmacOSではという言及もあったので要調査）。 Apple TVでも動作するので、大画面のテレビでも楽しめます。 Sessionにはどのデバイスからも参加できますし、複数のデバイスをシームレスに使うこともできます。 AirPodsをはじめとするBluetoothデバイスにも素晴らしいオーディオを提供できるように設計されています。 Playback 共視聴体験のトリガーになるのは、再生ボタンです。 ユーザーがどのコンテンツに時間を費やすかを決める瞬間です。 Appleは、すべての再生ボタンがSharePlayと連動することを目標としています。 ユーザーが友達とFaceTimeで話しているときに、アプリ内のメディアをいつでもSharePlayできるようにしたいと考えています。 各アプリが簡単にSharePlayできるよう、既存のコードそのままで使えように設計したAPIを提供しています。 グループで会話をしているときにいつでも、各アプリの再生ボタンからSharePlayを開始できるようになります。 Time-Synced Playback SharePlayでは、再生の同期が可能です。 誰かが再生ボタンを押すと、グループ全員のデバイスで同時に再生が開始します。 お気に入りのシーンにジャンプすれば、他の全員にもそのシーンが表示され、まるで同じ部屋にいるかのように体験することができます。 この同期は、手元のメディアを再送信することで実現しているわけではありません。 各々のデバイスに直接ストリーミングされ、各デバイスでの最高品質のメディアを再生できます。 スマートボリューム 再生中に誰かが発言すると、コンテンツの音量が自動的に下げられ、同じ部屋にいるようにコミュニケーションをとることができます。 Picture in Picture Picture in Pictureとの相性も抜群で、PiPによりコンテンツを視聴しながら他の様々なアプリを利用することができます。 Content FaceTimeで通話中のユーザーは、各アプリを起動したとき、そのアプリのコンテンツを共有できることを期待するようになります。 SharePlayにより、各アプリのタッチポイントを拡大し、アプリにかかわる時間を増やすことができます。 既存ユーザーが友達とSharePlayをすることで、自然にあなたのアプリを広めてくれることでしょう。 Group Activities Group Activitiesはフレームワークのコアコンセプトです。 Group Activitiesは、FaceTimeでSharePlayをして楽しむ対象（オブジェクト）です。 https://www.tokoro.me/images/wwdc21-meet-group-activities/top.png https://www.tokoro.me/posts/wwdc2021-keynote/ Tue, 08 Jun 2021 17:50:33 +0900 https://www.tokoro.me/posts/wwdc2021-keynote/ iOS 15 2021年6月8日、WWDC21のKeynoteでiOS 15についての発表がありました。 iOS 15だけでも盛りだくさんな内容でしたので、Keynoteをもう一度見直し、1つ1つ確認しながらメモをして復習してみました。 これから詳細なセッションもどんどんと公開されますので、これをインデックスに興味を持った新機能のセッションにダイブしていこうと思います！ FaceTime Spatial audio 空間オーディオ。 自然に感じられるようビデオ通話画面の各メンバーが映っている方向から音声が聞こえてくるように表現される。 Voice isolation 声を分離。 周いの騒音を遮断できる。 周りの音も拾いたければワイドスペクトラムに設定することで可能。 Grid view 全員の顔をグリッド表示する新しいレイアウト。 Portrait mode ポートレートモード。背景をぼかし、あなたの顔に自然に焦点が合うように。 FaceTime links FaceTimeの通話に招待するリンクを作成し、どのツールででも共有できる。リンクを事前に作ってカレンダーに登録しておくなども可能。 AppleのデバイスでだけでなくAndroidやWindowsでもブラウザ経由で参加可能！ FaceTimeはEnd-to-endで暗号化されておりプライバシーが損なわれることもない。 SharePlay 体験を共有する。 FaceTime中に楽しめる。 例えば通話中に音楽を流して一緒に聴いたり、映画やテレビ番組を観ることもできる。 その他のアプリも画面共有が可能で無限の可能性がある。 音楽 SharePlayで音楽を同期再生している間、誰でも再生待ちリストに曲を追加でき、再生や一時停止、次のトラックへのスキップもできる。 映像 FaceTime中にアプリで映像を再生すると、通話中の友達と同じビデオを同期した状態で観ることができる。 映像を同時視聴している間も通話は続くし、他のアプリを起動してテイクアウトを注文、なども可能。 その間もピクチャ・イン・ピクチャでビデオと友達の顔の両方が見える。 PiPをタップすることでSharePlayのコントロールが表示される。 同時視聴中のビデオをAppleTVでAirPlayし、テレビの大画面で再生することもできる。 SharePlay API SharePlay APIによりサードパーティ製アプリもFaceTimeに組み込むことができる。 Disney+ Hulu HBO Max NBAアプリ twitch TikTOk MasterClass ESPN+ Paramaount+ Pluto TV などが既に対応を進めている。 Screen sharing 画面共有。 将来のルームメイトと一緒に不動産アプリで物件を閲覧したり、ゲームの画面を共有したり、画面共有して困っている人を助けたり。 Messages コラージュデザイン 新しいコラージュデザイン。スワイプで写真をめくったりタップして全部の写真を見たりできる。 Shared with You あなたと共有。 https://www.tokoro.me/images/wwdc2021-keynote/top.png https://www.tokoro.me/posts/swift-superellipse/ Fri, 29 Jan 2021 15:04:26 +0900 https://www.tokoro.me/posts/swift-superellipse/ 弊社デザイナーの @kudakuarge が スーパー楕円に関する良記事 を投稿していました。 スーパー楕円は最近話題になっているClubhouseでも使われているとのこと。 そのため便乗してiOS+Swiftでスーパー楕円UIを実装してみます。 どう実装する？ iOSアプリの上で上にUIImageViewとか様々なViewをのせるような使い方をすることになりそうですので、基本的にはUIViewのサブクラスである必要がありそうです。 スーパー楕円を表示（描画）するだけならUIBezierPathなどでスーパー楕円を作って UIViewのdrawメソッド をオーバーライドしてfillするなどで良さそうです。 しかし、上のUIImageViewなどをのせて、上にのせたViewも一緒にスーパー楕円でマスクされないといけないので、 CALayerのmask でスーパー楕円の形にマスクすべきかもしれません。 スーパー楕円はどう作る？ 上の記事 にJavaScriptのサンプルコードがありますが、これはベジェ曲線での描画ではなく、スーパー楕円を構成するドットの配列を作る例のため、今回の用途にはアンマッチです。 ただ、同じ記事の後半でFigmaやSketchなどのツールで円形からアンカーポイントを移動させてスーパー楕円を作る例が紹介されていて、おそらくこの例のように4つのベジェ曲線を使い、アンカーポイントを調整することでスーパー楕円が作れるだろうということが予想できました。 実装例 ということで、まずはUIBezierPathでスーパー楕円を作ってみます。 引数で渡した四角形（CGRect）に沿って、4つのベジェ曲線を追加しているだけです。 引数kでアンカーポイントの位置（結果としてスーパー楕円の丸み）を調整できるようにしています。 import UIKit public struct Superellipse { public let bezierPath: UIBezierPath public init(in rect: CGRect, k: CGFloat) { let path = UIBezierPath(ovalIn: rect) let handleX: CGFloat = rect.size.width * k / 2 let handleY: CGFloat = rect.size.height * k / 2 let left = CGPoint(x: rect.minX, y: rect. https://www.tokoro.me/images/swift-superellipse/top.png https://www.tokoro.me/posts/commit-message-inline-translation/ Thu, 17 Dec 2020 11:22:39 +0900 https://www.tokoro.me/posts/commit-message-inline-translation/ 完成後に収録した画面 対象者 Vimでコーディングしている人 Vim以外でコーディングしてるがgit commitのときだけVimが起動する人（macOSだとデフォルトでそうなります） ぼくの課題 git commitでcommitメッセージを書く時、英語で書くことが多いと思います（プロジェクトによるとは思いますが）。 ぼくは英語でcommitメッセージを書くのが得意ではなく「あの不具合をこんな感じに修正したんだよなあ、それを英語で書くと…」と考えつつ面倒になってFix a problemとか意味のないcommitメッセージを残してしまうことがありました。いちばんひどいときは.とか…。ごめんなさい。 しかし昨今はDeepLなど優秀な翻訳サービスがあるわけですし、それを使えば良いだけじゃんは思うものの、実際にgit commitした後に翻訳サービスを開いてそこに日本語を入力して、翻訳結果をコピーしてエディタに戻ってきてペーストする、というのが日々のコーディングの流れの中では面倒すぎてけっきょくFix a problemとしてしまうわけです… 解決案 それを解決するのは簡単で、git commitで開かれたエディタで入力した日本語がその場で英訳されれば良い、というだけです。 技術的にも英訳APIが使えればすぐにでもできる話ですので、先日、半日程度時間が作れるタイミングでやってしまおう、となったというお話です。 作る 翻訳API 愛用しているDeepLにAPIがあったのでそれを使います。 https://www.deepl.com/docs-api/translating-text/request/ APIの利用はとても簡単で、テキストの翻訳なら、 curl https://api.deepl.com/v2/translate \ -X POST \ --data 'auth_key=AUTH_KEY&target_lang=EN-US&text=おはよう' とするだけでとても簡単です。 英訳コマンド 今時点ではDeepLにCUIコマンドがないため、上の翻訳APIを叩くコマンドを自分で作ります。 といっても上のPOSTリクエストを1つ叩くだけなのですぐできます。 エディタから使いやすいように、 STDIN（標準入力）から翻訳したいテキストを受けて STDOUT（標準出力）に翻訳後のテキストを返す のが良さそうです。 ぼくがSwiftで書いたのが、 https://github.com/tokorom/deepl-cui-swift です。 ここは誰かが作ったのを使ってもいいし、自分で作ってもすぐできるかと思います。 git commitから呼び出す この記事ではgit commitで起動するエディタがVimであることが前提です（macOSではデフォルトです）。 Vimからツールを呼ぶということはpluginを入れる必要がある？と思いがちですが「選択したテキストを外部コマンドに渡して結果と置き換える」というのはVimが標準で備ている機能です。 具体的には!lsとコマンド実行すればVimにlsの結果が挿入されますし、JSON文字列を選択して!jq .でjqコマンドに選択範囲を渡して整形してもらった結果で置き換えるといったことが普通にできます。 今回は、STDINを英訳するコマンドを作ったので（deepl-cui-swiftコマンドとする）、翻訳したいテキストを選択して !deep-cui-swift を実行するだけでこれが実現できます。 ショートカット 必要なら.vimrcにショートカットキーを用意しましょう。ぼくは、 nnoremap ze <S-v>!deepl-cui-swift -s JA -w<CR> とzeで現在行を英訳コマンドに渡す（ついでに翻訳前の言語を明示して、翻訳前のテキストも結果に含めるオプションを指定）ショートカットを用意して使っています。 動作確認 これでgit commit後のエディタで日本語でメッセージを書き、zeするだけで英訳されるようになりました！ ワイワイ！ オマケ DeepL APIの料金 なお、DeepL APIは無料で使えるわけではありません。 https://www.tokoro.me/images/commit-message-inline-translation/top.png https://www.tokoro.me/posts/ios14_blank_back_button/ Mon, 26 Oct 2020 17:02:15 +0900 https://www.tokoro.me/posts/ios14_blank_back_button/ 先にまとめ if #available(iOS 14.0, *) { navigationItem.backButtonDisplayMode = .minimal } else { navigationItem.backButtonTitle = " " } でOK！ 概要 iOS14のアップデートの1つに、 ナビゲーションバーの戻るボタンを長押しすると、画面遷移のヒストリーが表示され、いくつか前の画面までいっきに戻ることができる というのがありますよね。 ユーザー目線ではたいへん便利な機能ですが、例えば、デザイン的に「戻るのタイトルを空欄」にしていたりすると、 と、この長押し時の戻り先リストも空欄になってしまうなどの問題が出てきます。 iOS13以前の方法 iOS13以前では、例えば、 Xcodeで該当画面（戻り先の画面）のNavigation ItemのBack Buttonに空白を1つ入れるなどして、戻るのタイトルを消すワークアラウンドがありました。 しかし、これをすると、iOS 14以降では長押し時の戻り先リストがおかしくなってしまうわけです。 iOS14でのきちんとした方法 そのため、まずiOS14ではBack Buttonの設定はいじらないようにしましょう1。 そうすると当然、 このように戻るボタンのところに画面名が表示されてしまいます。 そのうえで、iOS14から追加されたUINavigationItemのbackButtonDisplayModeを設定します。 https://developer.apple.com/documentation/uikit/uinavigationitem/3656350-backbuttondisplaymode 戻り先のUIViewControllerで、 if #available(iOS 14.0, *) { navigationItem.backButtonDisplayMode = .minimal } else { navigationItem.backButtonTitle = " " } と navigationItem.backButtonDisplayMode に .minimal を設定することで、戻るボタンのタイトルが非表示になります。 また、Back Buttonなどもいじっていないため、戻るボタン長押し時の戻り先のリストも、 のようにきちんと表示されます。 UINavigationItem.BackButtonDisplayMode なお、backButtonDisplayMode には以下の３種の値を設定できます。 BackButtonDisplayMode 挙動 default デフォルト値はこれで従来の挙動。具体的には画面のスペースに応じて「前画面のnavigationItem.backButtonTitle」「前画面のtitle」「Back（戻る）」「空欄」の優先順位でいずれかが表示される generic スペースがあれば「Back（戻る）」を表示、なければ空欄 minimal 常に空欄 例えば、先ほどの画面にgenericを設定した時のサンプルはこちらです。 https://www.tokoro.me/images/ios14_blank_back_button/top.png https://www.tokoro.me/posts/iosdc2020/ Tue, 06 Oct 2020 14:57:02 +0900 https://www.tokoro.me/posts/iosdc2020/ 2020年9月に開催された iOSDC Japan 2020 今年も盛り上がりましたね！ 2020年は初のオンライン開催でオフラインにはない良さも再認識することができました。 私も HomeKit 2020 というセッションで発表者として参加しました。 概要 セッションの概要はこんな感じです。ご興味がある題材がありましたら是非セッションビデオをご覧ください！ HomeKit Frameworkざっくり入門 HomeKit Frameworkでどんなことができるのか HomeKitの構成 具体的に電球を点灯させるコードの紹介 隠しキャラクター（HomeKitがサポートしていない気圧）を参照するテクニック HomeKitだからこそできる具体例 時間指定でなく「日の入」「日の出」をトリガーに 家に「誰もいなくなったら」をトリガーに 自動点灯したライトをN秒後に消灯する 「部屋が明るければ」自動点灯させない HomeKitのBridgeについて Hueには電球、人感センサー、スイッチなどあるが直接HomeKit対応しているのはじつは… オープンソースのソフトウェアBridge「Homebridge」 HomebridgeでHomeKit未対応製品をHomeKit対応 ルンバ、スマートロック、赤外線リモコンなどもHomeKit対応できる！ Homebridgeを利用する具体的な方法　プラグインの自作 HomeKit ADKで作る自作アクセサリ HomeKit ADK概要 Homebridgeとの違い ソフトウェアでHomeKit対応アクセサリーを作る！ セッションビデオ スライド HomeKit入門の無料公開 iOSDC 2020とほぼ同時に、ちょうど良いタイミングでZennというサービスが始まり、Web上で簡単に書籍を執筆・公開できるようになりました。 そのため、かねてよりどこかで公開しようと思っていた『HomeKit入門』1 をZennで無料公開しました。 https://zenn.dev/tokorom/books/homekit-framework iOS 11リリース当時に執筆したものですが、HomeKit FrameworkにはiOS 12以降大きな変更は入っていませんので、現在でも十分有効な内容かと思います。 ご興味ありましたら是非ご参照ください！ iOS 11 Programmingの第12章に掲載したものです https://peaks.cc/books/iOS11 ↩︎ https://www.tokoro.me/images/iosdc2020/top.png https://www.tokoro.me/posts/improve-my-internet-connection/ Mon, 07 Sep 2020 16:56:36 +0900 https://www.tokoro.me/posts/improve-my-internet-connection/ Photo by Franck V. on Unsplash 改善のきっかけ 自宅のインターネット接続環境は、改善前は通信速度が 10Mbps〜40Mbps 程度でした。 これで特に不満もなく使っていたのですが、同じプロバイダーを使っている同僚の @kudakurage が 「IPv6にしてWi-Fiルーターをいいやつに変えたら500Mbps以上出るようになったよ」 と教えてくれたので、 絶対に負けてられない！ せっかくなので自分も改善してみよう！ と思ったのがきっかけです。 前置き 私はネットワークに関する専門的な知識を持ち合わせていないため、おかしなことを書いたりしているかもしれません。 間違いなどありましたらよろしければ Twitter までご連絡ください。 以下、速度計測は全て Fast.com で実施しています 以下、速度計測は全て無線接続で実施しています 有線接続では計測していません Wi-Fi 6での計測はiPhone 11 Proを利用しています 改善前の状態 Key Value 通信速度 10〜40Mbps プロバイダー Interlink ZOOT NEXT IP IPv4 接続方式 PPPoE LANケーブル CAT6のフラットケーブル Wi-Fiルーター Apple AirMac Time Capsule Wi-Fi規格 Wi-Fi 5 (11ac) 上で同僚と同じプロバイダーと書きましたが、正確には「IIJmioひかり」と固定IP用に「Interlink ZOOT NEXT」の2つのプロバイダーを契約しており、同僚は「IIJmioひかり」を常用していて私は「Interlink ZOOT NEXT」を常用していました。というのに後から気づいたため、はじめはInterlinkのほうで計測しています。IIJmioのほうに切り替えても速度はそれほど変わらなかった記憶があります。 LANケーブルだけ変えた後 せっかくなのでいっきに全部変えてしまうのでなく、１要素ずつ変更して速度計測することにしました。 まず一発目に「これは効果はないだろうなあ」と思いつつも、LANケーブルだけ新調しました。 光回線の終端装置（ONU）とWi-FiルーターをつなぐLANケーブルです。 LANケーブルを新しいものに変えて計測したところ… いきなり最大 130Mbps まで速度が跳ね上がってしまいました。 https://www.tokoro.me/images/improve-my-internet-connection/top.jpg