【Smart Device Link】サンプルを動かしてみる

Smart Device Link用の開発メモです。
日本語の情報がほぼ皆無だったので、忘れないよう記事にしていきます。
今回は、オフィシャルのサンプルコードをエミュレータ環境で動かすところをまでを目標としています。

# Smart Device Linkとは？

すでに説明されている記事があったので詳しくは以下のページをご覧ください。
https://qiita.com/nishiokya/items/faccf4a0da217504eda6

#### 実行環境
オフィシャルのエミュレータと、先日発売されたばかりの実機環境があります。

###### エミュレータ
オフィシャルのManticoreと、Docker用コンテナ環境があります。
どちらもTcpを利用した接続になります。
今回は、このエミュレータ環境で動作確認を行います。

###### [SDLアプリ開発キット「SDL DEVELOPMENT TOOLS」](http://ascii-store.jp/newly/p/2018113017120/)
現在発売されている実機環境になります。
ターゲットは、Androidのみ動作するようです。
接続は、USBのみで、Wi-Fi、Bluetoothには対応していません。


# サンプルコードを動かす

早速サンプルプログラムを動かしていきたいと思います。
サンプルコードやドキュメントは、以下のリンクをご参考ください。

* [SDLのAndroid版のサンプルソース(hello_sdl_androidがサンプルです)](https://github.com/smartdevicelink/sdl_android)
* [Androidのドキュメント](https://www.smartdevicelink.com/en/guides/android/getting-started/installation/)

_ここからの説明は全て、上記のサンプルが対象となっています。_

#### エミュレータで動くように設定する
今回はTcpでの接続を行うため、Tcp用の設定を行います。

###### Build Variantの設定
Build Variantを**tcpDebug**に設定します。
<img width="80%" alt="Build Variant設定" src="https://qiita-image-store.s3.amazonaws.com/0/189829/583ebca0-fdad-5ef0-b26b-42de7b8441a4.png">


###### 接続先の設定
接続先のIPアドレス、およびポート番号を設定します。
_＊接続情報については別途記載します。_

```java:SdlService.java
private static final int TCP_PORT = 12345;
private static final String DEV_MACHINE_IP_ADDRESS = "エミュレータのIP";
```

とりあえずここまでくれば準備完了です。

# SDLのエミュレーターと接続する
さきほど準備したサンプルコードを動かすためのエミュレータを準備します。

#### Manticoreを使ってみる。
オフィシャルで用意されているエミュレータです。
一番手軽に利用できますが、すべてのユーザと共用しているため、タイミング次第では使えなかったりします。
_＊ネットワーク環境は必須になりますが、個人的にはこれがおすすめです。_
**補足：Manticoreを使用するには、SmartDeviceLinkeサイトへのSIGN INが必要です**

**Manticore** 
https://www.smartdevicelink.com/resources/manticore/

###### 使い方
**[LAUNCH MANTICORE]**ボタンをクリックします。
<img width="80%" alt="Manticore画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/adb1ab7b-c07d-8bc0-d770-d770fce8a97b.png">

順番待ちが発生しても、しばらく待てば利用可能になります。
_＊以下の場合は、１名分待っている状態です。_
<img width="80%" alt="準備待ち画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/f3a30bb6-44ba-cdc0-947b-0252de6224d0.png">

利用可能な状態になると、**URL**と、**PortNumber**が表示されます。
また、左上のボタンを押すと全画面で表示されます。
<img width="80%" alt="準備完了画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/44467013-9fa0-c658-a416-7180ee946b3d.png">

###### サーバー情報を登録する
Manticoreのサーバー情報をサンプルコードに反映します。
`TCP_PORT`に`PortNumber`
`DEV_MACHINE_IP_ADDRESS`に`URL`
を設定してください。

今回の場合、以下のようになります。

```java:SdlService.java

private static final int TCP_PORT = 17680;
private static final String DEV_MACHINE_IP_ADDRESS = "m.sdl.tools";
```

###### 実行してみる

アプリを実行するとシンプルな画面が表示されます。
接続ができた場合は、**「Connected through SDL」**という通知が表示されます。
<img width="80%" alt="Android画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/01760186-9ebd-a2e7-3dfb-ccabb899e50e.png">

アプリ接続後、Manticoreも自動で画面が変わり、アプリアイコンが表示されます。
<img width="80%" alt="アプリ一覧画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/e36c1739-95df-849e-ea12-b21db51035c2.png">

アプリのアイコンをクリックすると、実行されます。
<img width="80%" alt="実行画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/8bbf4710-730f-8418-b855-9bc4a086f212.png">

#### Dockerのエミュレータ環境を使ってみる
[ひさやん](https://qiita.com/hisayan)が、Docker環境用のSDLエミュレーターを公開されています。
_＊12/08時点の最新の環境のようです_

###### コンテナの作成
以下のコマンドを使用して、コンテナを作成します。
<pre>
$ docker run -d -p 12345:12345 -p 8080:8080 -p 8087:8087 -p 3001:3001 --name sdl5 hisayan/sdl_core_docker:5.0.0
</pre>

###### エミュレータの起動

コンテナを起動したら、以下のURLにアクセスします。
<pre>
http://localhost:8080/
</pre>

起動している場合は、エミュレータの画面が表示されます。
<img width="80%" alt="起動画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/e6c4d244-852a-e8c7-2124-f77236ef576a.png">

**[OK]**ボタン（見えにくいですが・・）をクリックするとメイン画面が表示されます。
<img width="80%" alt="メイン画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/808aa660-a276-633a-afed-dc2266bbf64b.png">

###### アプリ接続の許可設定
アプリと接続するために、接続の許可を行います。
真ん中下の**[⚙]**マークを選択し、
**[Allow SDL Functionally]**メニューをクリックします。
<img width="80%" alt="設定画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/73dfcf96-b4e6-118f-0b8d-f42614ee35d0.png">

**[All devices Not Allowed**]をクリックし、
<img width="80%" alt="接続許可画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/78260899-c456-c0b0-823c-a8c86ac89155.png">

**[All devices Allowed]**に変更します。
これで準備は完成です。
<img width="80%"" alt="接続許可設定画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/07a34726-5684-d38a-3231-f57e37dedc0f.png">

###### サーバー情報を登録する
サーバー情報をサンプルコードに反映します。
`TCP_PORT`に`12345`
`DEV_MACHINE_IP_ADDRESS`に`Docker実行環境のIPアドレス`
を設定してください。

私の環境の場合、以下のようになります。

```java:SdlService.java

private static final int TCP_PORT = 12345;
private static final String DEV_MACHINE_IP_ADDRESS = "192.168.0.7";
```

###### 実行してみる

中央下の**[ i ]**アイコンをクリックします。
接続されている場合は、**[Apps]**に、アプリ名が表示されます。
_＊今回は、[Hello Sdl]です_
<img width="80%" alt="アプリ一覧" src="https://qiita-image-store.s3.amazonaws.com/0/189829/18ec096a-6dfa-81d5-6f68-3537fbf69dc8.png">

アプリ名の項目をクリックすると、実行されます。
<img width="80%" alt="実行画面" src="https://qiita-image-store.s3.amazonaws.com/0/189829/bca3c46a-0b4c-47a5-1fe4-69678026c8b6.png">

これでサンプルの実行は完了です。

# 最後に

次回はもう少しプログラム内の説明をしていきたいなと思っています。


あと現在アプリコンテストが実施されています。
せっかくなのでこれを目標にいろいろやっていきます！
[クルマとスマホがつながるSDLアプリコンテスト](http://sdl-contest.com/)