Google Glass Enterprise Edition 2の公式サンプルCardSampleにRetrofit2.0 GET送信を加えてNode-REDと連携するメモ
Google Glass Enterprise Edition 2の公式サンプルCardSampleにRetrofit2.0 GET送信を加えてNode-REDと連携するメモです。
経緯
Google Glass Enterprise Edition 2が来たので、他のテクノロジーとの連携を探っています。
@shanonim さんとワイワイ協力し、つどつど知見集めながら Mobile Advance 社から購入して Planet Express を初めて利用して Google Glass Enterprise Edition 2 が先日届きました！#GoogleGlass2 #Google pic.twitter.com/1appBIugLd
— Tanaka Seigo (@1ft_seabass) February 19, 2020
Node-REDにGET送信を受けつける仕組みを作る
自分のネットワーク上にあるNode-REDに以下のようにシンプルな通信の設定をします。
フローをインポートできるJSONファイルも置いておきます。
js
[{"id":"23b80426.65da4c","type":"http in","z":"f5146fe6.90b9f","name":"","url":"/gesture","method":"get","upload":false,"swaggerDoc":"","x":300,"y":400,"wires":[["2d961849.aa9138","77444174.11c4b"]]},{"id":"f554fc49.4dd16","type":"http response","z":"f5146fe6.90b9f","name":"","statusCode":"","headers":{},"x":730,"y":440,"wires":[]},{"id":"2d961849.aa9138","type":"debug","z":"f5146fe6.90b9f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":530,"y":380,"wires":[]},{"id":"77444174.11c4b","type":"change","z":"f5146fe6.90b9f","name":"{\"response\":\"OK\"}","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"response\":\"OK\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":440,"wires":[["f554fc49.4dd16"]]},{"id":"28fd5f4e.2e34e","type":"comment","z":"f5146fe6.90b9f","name":"Glassからジェスチャー来る {\"gesture\":\"SWIPE_FORWARD\"}","info":"","x":680,"y":340,"wires":[]},{"id":"7e81bd1e.7269d4","type":"comment","z":"f5146fe6.90b9f","name":"Glassへの返答","info":"","x":540,"y":480,"wires":[]}]gestureというURLに、/gesture?gesture=SWIPE_FORWARDのようにGET通信を受け付けていてdebugノードが結果を表示します。また、Glass側にはresponse OKというJSONデータを返事します。
Glass Enterprise Edition 2 の公式サンプルをゲットする
こちらに公式サンプルがありまして、CardSampleというものがあります。
Code samples | Glass Enterprise Edition 2 | Google Developers
まず、公式サンプルがあるのでゲットします。
googlesamples/glass-enterprise-samples: Glass Enterprise Edition 2 Samples
CardSampleというフォルダがあるのでそれをAndroid Studioで読み込みます。2020/02/23現在、私は3.5.3を使っています。
余談：RunできないのでSync Project with Gradle Files対応
これは、Android開発で熟練した方であれば問題ないと思うのですが、Runできないエラーにはまったので対応。
こういう感じです。
:appモジュールがGradleに認識されていないエラーです。
プロジェクトのルートディレクトリにある、settings.gradleにinclude ':app'と書かれた行があるので、これを削除してからSync Projectします。で、完了したら削除したinclude ':app'を元通り書き直してもう一度Sync Projectします。
teratailのアドバイスの通り、File→Sync Project with Gradle Files の対応で解決しました。
CardSample\app\build.gradle にretrofit2.0を登録
Android:Retrofit2.0ではてなAPIとおしゃべりしてみた - techium
こちらの記事を参考に、CardSample\app\build.gradle のdependenciesのところにretrofit2.0を使えるように登録しました。
dependencies {
implementation 'com.example.glass.ui:gesture-lib-sample:0.1.0-SNAPSHOT'
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'
testImplementation 'junit:junit:4.12'
testImplementation 'org.robolectric:robolectric:4.1'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
implementation 'com.squareup.retrofit2:retrofit:2.6.4'
implementation 'com.squareup.retrofit2:converter-gson:2.0.0'
implementation 'com.google.code.gson:gson:2.6.2'
}最後の3行がretrofit2.0関連です。
retrofit2.0の実装をする
先ほどのNode-REDの仕組みに合わせてretrofit2.0でGET送信の実装をします。このあたりは、めちゃくちゃ以下が役に立ちました。
【Android】【Retrofit】Retrofit 2.0.1使い方メモとハマりどころメモ - Tumbling Dice
ほんと感謝です。
com.example.android.glass.cardsampleにdataを掘って実装します。
API の設定
API の設定をNodeRedApiServiceというインタフェースで定義します。
package com.example.android.glass.cardsample.data;
import retrofit2.Call;
import retrofit2.http.GET;
import retrofit2.http.Query;
public interface NodeRedApiService {
@GET("/gesture")
Call<NodeRedSample> getGesture( @Query("gesture") String gesture );
}特に、詳細の挙動は Query (Retrofit 2.7.1 API) ここのドキュメントで把握できました。
戻り値の定義
戻り値はNodeRedSample データクラスで定義します。
package com.example.android.glass.cardsample.data;
public class NodeRedSample {
public String response;
public String getResponse() {
return response;
}
}（今思えば、NodeRedResponseでよかったかもしれないが、一旦進む）
MainActivity に仕込む
MainActivity のコードを頑張って理解して、ジェスチャーをGET送信できるよう仕込みます。
ソースは以下の通りです。
/*
* Copyright 2019 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.example.android.glass.cardsample;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import com.example.android.glass.cardsample.data.NodeRedApiService;
import com.example.android.glass.cardsample.data.NodeRedSample;
import com.example.android.glass.cardsample.fragments.BaseFragment;
import com.example.android.glass.cardsample.fragments.ColumnLayoutFragment;
import com.example.android.glass.cardsample.fragments.MainLayoutFragment;
import com.example.glass.ui.GlassGestureDetector.Gesture;
import java.util.ArrayList;
import java.util.List;
// retrofit2を追加
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;
/**
* Main activity of the application. It provides viewPager to move between fragments.
*/
public class MainActivity extends BaseActivity {
private List<BaseFragment> fragments = new ArrayList<>();
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.view_pager_layout);
final ScreenSlidePagerAdapter screenSlidePagerAdapter = new ScreenSlidePagerAdapter(
getSupportFragmentManager());
viewPager = findViewById(R.id.viewPager);
viewPager.setAdapter(screenSlidePagerAdapter);
fragments.add(MainLayoutFragment
.newInstance(getString(R.string.text_sample), getString(R.string.footnote_sample),
getString(R.string.timestamp_sample), R.menu.main_menu));
fragments.add(MainLayoutFragment
.newInstance(getString(R.string.different_options), getString(R.string.empty_string),
getString(R.string.empty_string), R.menu.special_menu));
fragments.add(ColumnLayoutFragment
.newInstance(R.drawable.ic_note_50, getString(R.string.columns_sample),
getString(R.string.footnote_sample), getString(R.string.timestamp_sample)));
fragments.add(MainLayoutFragment
.newInstance(getString(R.string.like_this_sample), getString(R.string.empty_string),
getString(R.string.empty_string), null));
screenSlidePagerAdapter.notifyDataSetChanged();
final TabLayout tabLayout = findViewById(R.id.page_indicator);
tabLayout.setupWithViewPager(viewPager, true);
}
@Override
public boolean onGesture(Gesture gesture) {
// ジェスチャーの送信
sendGesture(gesture.name());
switch (gesture) {
case TAP:
fragments.get(viewPager.getCurrentItem()).onSingleTapUp();
return true;
default:
return super.onGesture(gesture);
}
}
private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
ScreenSlidePagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
// 送信する部分の設定
private void sendGesture(String gesture) {
Log.d("sendGesture", gesture);
Retrofit retrofit = new Retrofit.Builder()
.baseUrl("http://192.168.XX.XX:1880/")
.addConverterFactory(GsonConverterFactory.create())
.build();
NodeRedApiService service = retrofit.create(NodeRedApiService.class);
Call<NodeRedSample> call = service.getGesture(gesture);
call.enqueue(new Callback<NodeRedSample>() {
@Override
public void onResponse(Call<NodeRedSample> call, Response<NodeRedSample> response) {
Log.d("onResponse", response.body().getResponse());
}
@Override
public void onFailure(Call<NodeRedSample> call, Throwable t) {
Log.d("onFailure", t.getMessage());
}
});
}
}具体的には、
// retrofit2を追加 の部分で関連クラスのインポート- sendGestureで retrofit2.0に合わせて送信する部分の関数を作った。
http://192.168.XX.XX:1880/は、実際には自分のネットワーク上のNode-REDのアドレス- onGesture部分でジェスチャーイベントをとらえているのでsendGestureにジャスチャーチを流すようにした
といった実装です。
AndroidManifest.xml にandroid.permission.INTERNET追加
HTTP通信が使えるように、パーミッションを設定します。
<uses-permission android:name="android.permission.INTERNET"/>こちらを加えました。
余談： not permitted by network security policy が出たので対応
HTTPS上に応答するサーバーを置くなら問題ないと思いますが、Node-REDをサッと起動するとHTTPサーバーとして立ってしまうので、
D/debug2: CLEARTEXT communication to 192.168.XX.XX not permitted by network security policy
通信を試みたところ、上記のようなエラーが出ました。
以下、調べたところ以下の対応で解消できました。
Android 9(Pie)でHTTP通信を有効にする - Qiita
まず、AndroidManifest.xmlで、android:networkSecurityConfig設定。
<application
android:networkSecurityConfig="@xml/network_security_config"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher"
android:supportsRtl="true"
android:theme="@style/AppTheme">CardSample\app\src\main\res\xml の中に、network_security_config.xmlを設置します。
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">192.168.XX.XX</domain>
</domain-config>
</network-security-config>192.168.XX.XXは今回接続するNode-REDのアドレスとなります。
動かしてみる
さて動かしてみましょう。
このようにVysorでミラーリングしたGoogle Glass2の画面とNode-REDの画面を一緒に表示しています。
これができると、外部連携ができて、いろいろと広がりますね！