はじめに
macOSアプリ開発でWKWebViewにToolbarを使用する方法を調べながら練習したので、その方法を記載します。
思ったより設定することが多かったので、自身の備忘録として、また、同じことで詰まっているどなたかの参考になれば幸いです。
（スクショのアプリ名がダサいことには目を瞑っていただければ幸いです。笑）
この記事の対象者
WKWebViewをでToolbarを表示させる方法がわからない人
StoryboardでUIを作成したい人
Swift初心者
開発環境
- OS：macOS Sequoia 15.6.1
- 開発ツール：Xcode
- バージョン：16.4
- 本投稿の開発環境です
- バージョンによっては画面が一部異なる可能性があります
実装方法
Toolbarをwindowに追加
Storyboardで「＋」をクリックし、「Toolbar」で検索します。
ヒットした「Toolbar」を、Window Controller/Window直下に配置します。
ToolbarItemの追加
Toolbarに配置するボタンなど（ToolbarItem）を配置します。
Storyboardで「＋」をクリックし、「ToolbarItem」で検索します。
これを配置したいボタンの数だけ、先ほど追加したToolbarの直下に配置します。
ちなみに、検索バーを配置したい場合は、「Search Toolbar Item」という名前で出てきます。
ToolbarItemの設定
配置した各Itemのアイコン等を設定していきます。
Attributes Inspector(横線と点のアイコン)をクリックし、「image name」の項目から好きなアイコンを選択しましょう。
画像は戻るボタン設定時のものです。
次に、Identifierを設定していきます。
これはコードでItemを取得したり、Itemに処理を実装したりする際に使用します。
Identifierは先ほどのAttributes Inspector(横線と点のアイコン)内の、「identifier」の項目で設定できます。
ToolbarItemの配置
設定を終えたら、ToolbarItemをToolbarに配置していきます。
Storyboardで、画像の赤枠で囲った部分をクリックします。
すると、ToolbarItemの配置を決めるウィンドウが出るので、任意の順番で配置していきます。
ちなみに、画像で使用している「Flexible Space」は、アイテム間の間隔を可能な限り広げる役割があるそうです。（chatGPTの受け売りです。）
配置し終えたら、「Done」をクリックしましょう。
ToolbarItemを中央配置にする方法
またまたAttributes Inspector(横線と点のアイコン)に行き、「Position」のCenteredにチェックを入れましょう。これでセンター配置になります。
表示確認
赤枠で囲った部分が、今回追加した部分になります。
ちゃんと検索バーがセンターに、その他の戻るボタン、更新ボタン、進むボタンは右寄せになっています。
ちゃっかり「Google」と現在のwebページタイトルを取得する処理も実装してしまっていますが、その方法についてはまた別記事で書こうと思います。
おわりに
設定でつまづくことが多かったので、少しでも読んでくださった方の参考になれば幸いです。
今後も記事投稿を行なっていく予定ですので、今後ともよろしくお願いいたします。