SF Symbolsにおける可変カラーの採用

♪ ヒップホップ調の ゆったりした音楽♪ ♪

こんにちは SF Symbols App担当の Paulです 今日ご紹介するのは SF Symbolsに 可変カラーが加わりました これから可変カラーの シンボルをプロジェクトに 取り入れる方法について 説明していきます SF Symbols Appの全ステップで 役立つ使い方も説明します まず可変カラーについて 確認します そして SF Symbolsが どのように機能するのかと 適したケースに ついて確認します 次に 可変カラーを 独自のシンボルへ 導入する方法について確認します 始める前に確認 しておきますが 初めてSF Symbolsを使われる あるいは復習される場合は 去年のセッションを まずはご確認ください "SF Symbols 3 Appの詳細" をお勧めします プロジェクトに便利なシンボルの 活用方法を解説しています もしThaliaさんの トークをご確認いただいてないのなら "SF Symbols 4の新機能" もご覧ください SF Symbolsの ビジュアルデザインや 様々なレンダリングモードを 紹介しています では 可変カラーを 見ていきましょう 可変カラーは SF Symbolsの新機能で パーセント値で見た目を 調整することが可能です このパーセント値を 変更することで シグナル強度や進捗など 時間で変化する値を 反映したシンボルを 簡単に作成できます SF Symbols Appに アクセスして 可変カラーがどのように 機能するか 確認される事を お勧めします SF Symbols Appに今年 新しいプレビューエリア が追加されました レンダリングインスペクタ で全モードでシンボルを 見ることが出来ます レンダリングモードを 切り替えて クリックして色々な表現を 楽しむことができます 新たにピッカーに「自動」 機能が追加されました このオプションで シンボルは独自の レンダリングモードを 選択できます プレビューエリアで それを確認できます 例えばこのsquare.and.arrow.upは モノクロームを好むものですが これらのiPhoneの シンボルは 階層モードを好むもの となっています カラー設定の下に 「可変カラー」の 設定が加わりました さらに可変カラーに 対応したシンボル用の 新しいカテゴリができました Appを実際に体験される際に オススメです このスピーカーのシンボルを 選択し可変カラーを選び もう少し拡大するために ギャラリービューを開きます このボタンをクリックし再度 クリックして可変カラーを オンにして スライダーを下げて パーセント値を適当な値に 減らします 値が小さくなるにつれて シンボルの一部が 薄暗くなっていくのが お分かりかと思います スライダーを上げると シンボルの一部が 色を取り戻します プレビュー画面 を見てみると 4つのレンダリングモード すべてがそうなるのを 確認できるとおもいます グリッド画面に戻ると 可変カテゴリの 全てのシンボルが 変更されているのが わかります 可変カラーについて 分かったことは 可変カラーは SF Symbolsで有効な 各レンダリングモードと共に 利用可能です 可変カラーに対応する すべてのシステムシンボルは モノクロームモード 階層モード パレットモードと マルチカラーモードに対応します 第二にシンボルの いくつのパーツが 可変カラーに影響されるのか には制限がありません あるシンボルでは影響を 受けるレイヤは1つだけですが あるシンボルでは 何十ものレイヤがあります しかし可変カラーは パーセント値で 制御されるため その心配はありません パーセント値を入力するだけで 大丈夫です ではそのパーセント値をシステムは どう解釈するのでしょうか？ 特定のレイヤに 可変カラーが 適用されるのがどのように わかるのでしょう 他のSF Symbolsと同様に Appleプラットフォームにおいて Appがよりマッチするように 可変カラーをデザインしました つまりみなさまが馴染んでいる システムレベルのインディケータから ヒントを得ました このマイクのシンボルを 例にとってみましょう マイクの左側にある 4つのドットは 各々独立したレイヤで 可変カラーに対応しています ある一定の値を超えると 各ドットが作動します ０から100パーセントで 等間隔に配置 されています 0% は特殊なケースで どのレイヤもアクティブになりません 0％以上になれば Ⅰつ目のドットが アクティブになります 26％以上になると 2つ目のドットが アクティブになります ５１％以上になると 3つ目がアクティブになります 76％から100％では ４つ目がアクティブになります そのため可変カラーのシンボルは 0%のときにだけ ビジュアル的に空っぽな 表現となります システムレベルのインディケータで 実際にそれを確認できます Wi-Fi強度や 電池残量など 可変カラーのシンボルが 100％未満になると 見えるようになります このような挙動は システムレベルのインディケータで 例えば 明るさと音量などで 確認にできます 次のシンボルは 3つレイヤで 可変カラーを使用しています つまりレイヤ間の境界は 33.3333％や 66.6667％など厄介な 値になる事があります 端数調整の誤差で記号が 思わぬ形で表示されぬよう 有効桁数が何桁かを 気にする必要があるのは 望ましくありません そのためレイヤ間の閾値は 最も近い数値に切り上げられ その丸められた値から1％以上 上になるまで次のレイヤを 起動しません 33.3パーセントは切り捨てで 最初の基準値に対して 33パーセントになります 2番目のレイヤは1％ ポイント上の34％となります 最終的な基準値は66.7% から67%まで上がります 最後のレイヤは1%上の ポイントとなり 68%となります 当然システムが提供する シンボルは 今回の話の半分に過ぎません SF Symbols Appで 独自のカスタムシンボルの 作成やアノテーションができます さらに良いことに それらのシンボルを システムシンボルと 同じくらい柔軟かつ強力にできます 柔軟かつ強力とは どういうことでしょうか システムが提供する SF Symbolsは 9つの異なるウェイトで利用でき それらのウェイトのそれぞれが 3つのスケールで利用できます つまりそれぞれに対し 27種類のタイプがあり 4つのレンダリングモードと 可変カラーのありとなしで 216通りの の構成を可能にします 幸いなことに カスタムシンボルを 216回描く必要はありません 昨年シンボルを描く作業を 効率化するために 可変テンプレートを 導入しました このようなテンプレートを 使うと 27通りのウェイトと スケールの組み合わせで 描くのではなく3つだけで 大丈夫です 他の24個を自動的に 生成します カスタマイズした シンボルを描いたら "アノテーション" と呼ばれるプロセスで さまざまなレンダリングモードを 取りいれられます 去年 カスタムシンボルに 階層レンダリングモードと パレットレンダリングモードを 採用しようとした場合に シンボルを別々のレイヤに 分割し 各レイヤに対し階層レベルを 割り当てたかと思います シンボルをマルチカラー モードを対応させるには カスタムシンボルを 再度違うレイヤに分割し 各レイヤに色を割り当てたかと 思います つまりすべてのレンダリングモードを サポートするには 2つの別々のレイヤ構造を 管理する必要がありました 今年は その作業内容を効率化します 統一的なアノテーションを 使用します 統一的なアノテーションは シンボルを シングルレイヤ構造で表現し その構造を 全てのレンダリングモードで共有します そのためシンボルを 何度もレイヤに 分割する必要がありません 一度で済みます また 以前の階層 パレット マルチカラー のコントロール機能に加え 新たに モノクロレンダリングモードで シンボルがどのように見えるかを 調整できるようになりました もちろん 統一的なアノテーションで シンボルに可変カラーを 追加することもできます さて実際に統一的な アノテーションに慣れるよう カスタムシンボルの アノテーションに進みましょう 昨年私は家族でできるカード ゲームに挑戦しました お互いに その場に一緒に居なくても できるゲームです その数ヵ月後 パズルキューブに 夢中になりました 今年 そのAppを開発して パズルを解く練習に 役立てたいと思います このデスクトップで作った パズルキューブのシンボルを Appにドラッグして 新しいカスタムシンボルを作成します このシンボルはシステムが提供する キューブシンボルが元となっています パズルキューブの詳細の 一部をここに表記します これによってシンボルが 小さくなったり 違うウェイトでも はっきりと表示することが できます さてこのプレビューエリアを 覚えていますか？ 特にカスタムシンボルへの アノテーションの追加に便利です アノテーションを変更すると カスタムシンボルが それぞれのモードで どのように見えるかが 一目でわかります レンダリングモードを切り替えるには ここをクリックするか ピッカーで別のオプションを選ぶと それに応じてリストの アノテーションコントロールが変わります モノクロもいいけど 階層モードで 深みをだそうと思います そのモードに切り替え 立方体の上部と側面を 新しいレイヤに 変更します これらの新しいレイヤは 自動的にあまり際立たない 2次や3次といったレベルに 替わることが わかるとおもいます このシンボルに深みと 奥行きのある 外観を与えています 作成した階層アノテーションは パレットレンダリングモードの 対応にも使用されることを ご留意ください 2つの新しいレンダリングモードを ワンプライスで 手に入れたことになります 次にマルチカラーモードに 切り替えて シンボルに色をつけて みましょう マルチカラーモードに 切り替えると 階層モードで分離した レイヤを 見ることができます 統一的なアノテーションでは 1つのレンダリングモードで レイヤ構造の変更を 他のレンダリングモードに そのまま反映させます 前面を赤にして 上面は青そして 側面は黄色に うん これはかなり良い感じ パズルキューブを解きかたの 習得で最も重要なのは 何度も何度も練習すること それが一番の習得法です キューブシンボルを タイマーとして使い 練習時間が長くなるにつれて 色が濃くなっていきます それを解決するのが 可変カラーです この分離した前面は タイマーを使ってさまざまな 色彩を加えるのに 最適な場所です それぞれを別のレイヤに 分離してみましょう レイヤを並べる順番に 注目してください 最初に塗りたいレイヤ を下に 最後に塗りたいレイヤ を上に配置します レイヤをすべて選択し このボタンをクリック これで可変カラーが 全てにおいて有効化されます これで完了です 可変カラーのスライダを 動かしてみて 結果をみましょう プレビュー画面から 様々なレンダリングモードで どのような変化があるのかを 楽しむことができます 可変カラーの値を変えたり前面色の レンダリングモードを調整したりと 前面の色がすべての レンダリングモードで調整されます それが統一的な アノテーションの力です あるレンダリングモードでの編集は 他のレンダリングモードにも 適応されるからです １度か２度の作業で4つの レンダリングモード全体で 素晴らしい結果を 得ることができます もう少しトリッキーなことも SF Symbols Appで 対応可能です より複雑なシンボルを 見ていきましょう ふたたび私のシンボルですが システムライブラリの多くの .circle.fillのように 円の内側にシンボルを セットします すでにこのシンボルの アノテーションを始めています 円と立方体のパーツを 別のレイヤに分割します マルチカラーモードで シンボルがいい感じに 見えています 階層モードでもいい感じです しかし モノクロモードでは 立方体と背後の円との コントラストがあまり ありません シンボル内のすべてのパスが 1つのレイヤにある場合 立方体のパスは 円形のパスに穴を作り モノクロモードでは それがとても際立ちます しかし今 円を自身のレイヤに 移動させたので 立方体のパスが 穴を空けないようになります 代わりに円の上に 立方体を移動します 見えにくい感じに なってしまいましたが 幸いなことに新しい機能の 統一的なアノテーションが 役立ちます 「Erace」を選択すると その後ろのレイヤに 穴が開きます だいぶ良くなってきましたね ではもう一度 可変カラーを加えましょう 今回は前面にある全ての ピースを選択します

そしてコンテキスト メニューで 「新規レイヤに分割」を 選択します このボタンをクリックすると 再び可変カラーが適用されます これで完了！ ついでに言うとパスは シンボルテンプレートに 表示されている順番に 分割されています シンボルのパスの順番に 注意して描画すると 後で時間を節約できます 統一的なアノテーションの 簡単な説明でした 独自のシンボルにアノテーションする 迅速で強力な方法です １つのレイヤの構造を作りました それが全てのレンダリングモードに 適用されます シンボルの見た目を モノクロモードで 調節することもできます 可変カラーを シンボルの個々のレイヤに 追加することができます レイヤのZオーダーが レイヤのパーセント値によって 埋まっていく順序を 定義します 各レイヤに使用される閾値は ゼロから100％の間の 等間隔に配置されます レイヤ構造の一部で あるため レイヤが可変カラーを選択すると この設定は 全体のレンダリングモードで 共有されます 新たに2つの新しい レイヤオプションが 統一的なアノテーションに加わり レイヤ構造が簡単に共有できます レイヤを「消去」に設定すると そのレイヤの形状を利用して 背後にあるレイヤを消去します モノクロや階層型の シンボルのように バッジに プラスやマイナスの形がある場合に とても便利です 最後にレイヤを非表示に設定すると それは特定のレイヤから 除外されます レイヤを全てのレンダリングモードで使用 出来ない場合にこの機能を 使ってそのレイヤを限定された モードに使用できます これらの新機能はすべて 新しいテンプレートフォーマットの 4.0規格で対応されます Xcodeに取り込むには SF Symbols Appから 4.0のテンプレートで シンボルをエクスポートし モノクロモードのコントールをし 可変カラーを使用してください 昨年のアノテーション化された シンボルをお持ちの場合は 統一的なアノテーションに 自動的にアップデートされます 階層やマルチカラー アノテーションを 追加する必要はありません また以前の環境にも 対応させる場合 3.0と2.0の環境を 引き続き利用可能です 最後に1つだけ 残っていることがあります パズルキューブの解き方を 楽しく学びました 一番嬉しかったことは 私の娘が 私が解いているのを見て自分も 挑戦してみたいと思ったことです 当然彼女にも私のAppで 練習してもらいたいと 思っています 娘は今年幼稚園に入園 することになってます ゆっくりと取り組んでいく つもりでいます こここそが可変カラーのシンボルが 真価を発揮するところです タイマーのUIをデザイン することができます 文字や数字が 参考になりますが 彼女のようにまだ勉強中や 文字が読めない人には 抵抗を感じる可能性が あります でも実物大と似た キューブパズルの色が 時間と共に変わっていく 過程を実感して なじんでいくかも しれません タイマーのコードを変更する 必要すらありません 使用するシンボルの名前を 変更し 以前と同じパーセント値の値を 渡し続けるだけです 使用中のより大きな立方体 シンボルに使ったのと同じ 値を入力するだけで後は SF Symbolsにおまかせ それがシンボルの力なのです このツールをつかって 言葉や文章を超えた形で 表現することが できるのです Appをよりインクルーシブにする 方法を提供してくれます システム提供のシンボルと カスタムシンボルの両方で 進捗状況などの概念を より明らかに表現でき 強力なシグナルや 時間などを表現できます 3枚の描画と 1つの統一的なアノテーションから すべてがもたらされます かなり画期的なことです しかもそれは キューブパズルを 解くよりも簡単です ♪