【iOSアプリ】標準搭載のシンボルを使用してアイコンを表示してみよう！！

iOSアプリでアイコン表示するために使用する「SF Symbols」をご紹介したいと思います。

SF Symbolsは簡単にアプリのユーザービリティが向上でき、アニメーションやグラデーション機能でさらに見た目もカッコよくなります。

まずは簡単にアプリクオリティを上げたい方へは一度使用してみることを勧めします。

SF Symbolsとは

SF Symbolsは アップルプラットフォーム向けにAppleが提供していてシステムフォントとシームレスに統合できるようデザインされているシンボルです。

標準搭載なのでプログラムに組み込んで利用する際に事前のインストール等は不要で、iOS iPad,macOS tvOS watchOSなどのAppleプラットフォームで利用可能です。

かつ、システムフォントとも合うよう考慮されているのでクオリティが高く見た目良くアプリに組み込む事できます。

この記事ではシンプルに高品質なシンボルがの簡単に使用する方法に抜粋して紹介します。もっと詳しく知りたい方など、詳細はAppleDevelopperで詳しく説明されていますのでそちらをご参照ください。

SF Symbols - Apple Developer

SF Symbols 7のライブラリには6,900を超えるシンボルが用意されており、AppleプラットフォームのシステムフォントであるSan Franciscoとシームレスに統合できるようデザイ…

Apple Developer

SF Symbols - Apple Developer

SF Symbols 7のライブラリには6,900を超えるシンボルが用意されており、AppleプラットフォームのシステムフォントであるSan Franciscoとシームレスに統合できるようデザイ…

Apple Developer

アプリでの使用方法

使用方法する方法は簡単　4Step

以上で自分のアプリに指定したシンボルを表示する事ができます。

検索したシンボルをアプリ内のコード記述方法

例） SF Symbolsで見つけた「speaker.wave.3」 をアプリで表示したい場合

表示したい箇所でシンボル名＋ 「.fill 」を記載する事で表示されるようになります。

Image(systemName: "speaker.wave.3.fill")

シンボルの装飾

表示するシンボルは色、可変色、アニメーションなどのを付加することができます。

可変色

可変色の設定で値を表現することが可能

例）「speaker.wave.3」で可変色を設定することによりボリューム値を表現することができます。

SF Symbolでどのような可変色の指定が可能か確認する事ができます。

添付の絵の赤枠でスライダーを動かし%値を変更する事で実際の表示イメージを確認できます。

確認した%値で表示するようコードで記述するには引数「variaeValue:」で指定します。（指定しない場合は1.0（全表示）として表示されます。

Image(systemName: "speaker.wave.3.fill", variableValue: 0.3)

アニメーション

アニメーションを追加するにはImageにアニメーション用Modifierを追記します。

SF Symbolsでどのようなアニメーションか確認する事ができます。

アニメーション項目を選択して再生ボタンをタップするとアニメーションの確認ができます。

確認したアニメーションで表示するようコードで記述するModifierで指定します。

指定する値は、SF Symbolsのアニメーション設定画面の右下にある「コピー」アイコンから「Swift用の構成をコピー」を選択するアニメーション用の指定値が取得できるので、その値をアニメーションをさせいたいIconのコードに続きに貼り付ける事でコード記述完了します。

.symbolEffect(.bounce)

アニメーションには他にも

• 揺れ「.wiggle」
• 回転「.rotate」
• 呼吸「.breathe」

など色々ありますのでSF Symbolsで試して自分好みのシンボルを使用できます。

SF Symbolsアプリで「▶️」してみるとイメージでき楽しいです。ぜひお試ししてみてください。

イメージしたアイコンや・好みのアイコンの検索方法

• カテゴリー
  • SF Symbolsアプリ画面の左側に表示されているカテゴリーリストの項目を選択することでカテゴリーを絞る事ができます。
• 名称
  • SF Symbolsアプリ画面の右上の検索窓（🔍）に名称などを入力する事で項目を絞る事ができます。検索のコツは英語で入力です。

シンボルのOS対応バージョン確認方法

最後に注意点として、SF Symbolsは毎年更新されていますので近年リリースされたシンボルはリリース以前のOS搭載デバイスでは表示できませんので注意・考慮しておく必要があります。

シンボルが対応しているかはSF Symbols で確認したいアイコンを選択し右側の「i」タブ選択で表示されるシンボル情報か、リスト表示させる事で中央に「使用可能」リストで確認する事ができます。

まとめ

SF Symbolsアプリですが、アニメーション部分以外のコードも取得可能にしていただけるともっと便利なのにと思っいますが、いつか対応されるのかな。　こんな感じでSF Symbols を使用したアイコンの表示方法をご紹介しました。少しでも参考になったと思ってもらえましたら嬉しいです。ここはどうなの？もっとこんな情報が欲しい、これ間違ってる！！などなんでも良いのでコメントでご意見いただけると嬉しいです。今回はこれで終了となります。最後までお読みいただきありがとうございました。引き続き色々記事にしていきますのでよろしくお願いいたします。