車とスマホがつながるSDLの世界 第8回

SDLのライブラリを組み込み、車載機のユーザーインターフェースを実現してみよう！

SDL対応アプリ開発環境の構築その4～白紙のiOSプロジェクトから作るSDLアプリ

サブメニューを含むメニューを設定する

　今回の最後に、車載機側の画面に表示するメニューの内容を設定してみよう。画面の右上にある「≡」のような、いわゆるハンバーガーメニューと呼ばれるボタンによって開くメニューだ。

　そのメニュー項目には、一般のパソコンのメニューと同じように、サブメニューを持つものと持たないものがある。サブメニューを持たないメニュー項目は、それを選択した時点で、それに設定されたコマンドが実行される。サブメニューを持つメニュー項目は、それを選択することで、また別のメニュー選択画面を表示する。

　メニュー項目は、すべてSDLMenuCellオブジェクトとして作成する。この例では、サブメニューを持たないメニュー項目を、cel00という名前で作成している。実際に画面に表示するタイトルは「Menu Item without Submenu」だ。それに対してサブメニューを持つものをcell01として作成する。タイトルは「Menu Item with Submenu」とした。そこから開くサブメニューの項目はcell10とcel11だ。

　タイトルは、それぞれ「Submenu Item A」と「Submenu Item B」のように設定している。サブメニューを持つ項目は、そこから開くサブメニューの項目を指定して作る必要があるので、cell01よりも先にcell10とcell11を作成しておく必要がある。下のコードでは、cel00→cell10→cel11→cell01という順番でSDLMenuCellクラスのオブジェクトを作成しているのはそのためだ。

let cell00 = SDLMenuCell(title: "Menu Item without Submenu", icon: nil, voiceCommands: nil) { (triggerSource: SDLTriggerSource) in
    print("First Menu Item Selected: \(triggerSource)")
}
 
let cell10 = SDLMenuCell(title: "Submenu Item A", icon: nil, voiceCommands: nil) { (triggerSource: SDLTriggerSource) in
    print("Submenu Item A Selected: \(triggerSource)")
}
let cell11 = SDLMenuCell(title: "Submenu Item B", icon: nil, voiceCommands: nil) { (triggerSource: SDLTriggerSource) in
    print("Submenu Item B Selected: \(triggerSource)")
}
let cell01 = SDLMenuCell(title: "Menu Item with Submenu", icon: nil, subCells:[cell10, cell11])

　作成したメニューセルは、SDLManagerの中のスクリーンマネージャのmenuプロパティに、配列として設定するだけで機能するようになる。ここで設定するのは、「≡」ボタンを押すと最初に表示されるルートのメニュー画面に設定するメニューセルcell00とcell01だけだ。

self.sdlManager.screenManager.menu = [cell00, cell01]

　以上のメニューに関するコードも、スクリーンマネージャを使って更新するものなので、これまでのUI要素と同様、スクリーンマネージャのbeginUpdates()とendUpdates {}の間に入れればいい。

　結果を画面で確認しよう。アプリ画面右上のいわゆる「≡」マークの部分をクリックすると、まず2つのメニュー項目を持つルートレベルのメニューが表示される（図19）。

図19：車載機のアプリ画面の右上にある「≡」ボタンをクリックすると、2つのメニュー項目が表示される。サブメニューを持たないもの（上）と持つもの（下）だ

　このうち、上の「Menu Item without Submenu」コマンドは、サブメニューを持たず、特に動作を設置していないので、クリックしても元のアプリ画面に戻る。それに対して下の「Menu Item with Submenu」の方は、クリックすると、そのメニュー項目に設定してある2つのサブメニュー項目を持つ新たなメニュー画面に切り替わる（図20）。

図20：サブメニューを持つ方のメニュー項目をクリックすると、メニュー画面は2つのサブメニューを選択可能なものに切り替わる

　これらのサブメニューについても、意味のある動作は何も設定していないので、クリックすれば結局は元のアプリ画面に戻る。ただし、各メニュー項目には、選択された際にコンソールにログを表示するようにしてあるので、Xcodeのプロジェクトウィンドウ内のコンソールで確認できるはずだ（図21）。

図21：メニュー操作の状況は、Xcodeのコンソールで確認できる。サブメニューを持つメニュー項目は、コマンドではなくサブメニューを開くだけなので、ログは出力していない

　以上、iOSについて、Xcodeの標準的なアプリプロジェクトを作成するところから始め、そこにSDLのライブラリを組み込んで、基本的な車載機のユーザーインターフェースを実現する方法を、かいつまんで解説した。オリジナルのSDL対応iOSアプリの開発の参考にしていただきたい。

■関連サイト

• SDL（Smart Device Link）

（提供：トヨタ自動車株式会社）