1. Google App Engine Java Standard + Spring Boot 環境構築
  2. Spring Bootのテンプレートエンジン Thymeleafを適用

  3. Spring BootにVue.jsを利用する

  4. Spring BootにVuetify導入からクロスドメインAjax通信

  5. Spring Boot+Vuetify GAEへデプロイ、動作確認

  6. Xamarin.FormsアプリをiOS用にビルド

  7. Xamarin.Forms ポップアップの表示と Http通信

  8. Spring Boot+Vuetify ファイルのアップロードとJSONで結果を返す

  9. Google Google Cloud Vision でOCR。VuetifyからSpringBoot経由で呼び出し

  10. Xamarin ファイル選択

  11. Xamarin ファイルのアップロード

1.Vue Router の導入

Vuetify導入、REST リクエストを投げられるようにした状態に対して、Vue Routerを導入し、画面遷移を実現する。

https://router.vuejs.org/ja/

1.1 インストール

$ npm install vue-router

1.2 Vue Routerに対応させる

プロジェクトの構造

vue_router_struct

main.js

import パス中の、@/ は、Webpack が、/src/に解決するようだ

import Vue from 'vue'
import VueRouter from 'vue-router'
import '@/plugins/vuetify'
import App from '@/App.vue'

import FavoPhrase from '@/components/FavoPhrase'
import About from '@/components/About'

Vue.config.productionTip = false
Vue.use(VueRouter)

const routes = [
  { path: '/',      component: FavoPhrase },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

App.vue

Vue Router のAP)リファレンス https://router.vuejs.org/ja/api/#router-link-props

<v-btn to=”パス名”> で、遷移可能

<template>
  <v-app>
    <v-toolbar>
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>FavoPhrase</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat to="/">Home</v-btn>
        <v-btn flat to="/about">About</v-btn>
        <v-btn flat>Link Three</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
</script>

About.vue

<template>
    <v-container>
        About
    </v-container>
</template>

2.実行

App.vueで定義した、ヘッダー部分のボタンをクリックすることで遷移する。

vue_router1

vue_router2

意外と簡単に導入できるのでうれしい。

  1. Google App Engine Java Standard + Spring Boot 環境構築
  2. Spring Bootのテンプレートエンジン Thymeleafを適用

  3. Spring BootにVue.jsを利用する

  4. Spring BootにVuetify導入からクロスドメインAjax通信

  5. Spring Boot+Vuetify GAEへデプロイ、動作確認

  6. Xamarin.FormsアプリをiOS用にビルド

  7. Xamarin.Forms ポップアップの表示と Http通信

  8. Spring Boot+Vuetify ファイルのアップロードとJSONで結果を返す

  9. Google Google Cloud Vision でOCR。VuetifyからSpringBoot経由で呼び出し

  10. Xamarin ファイル選択

1.ファイルのアップロード

GAE側で、Google Cloud Vision APIを使って、OCRを実行するAPIを作成 し、Xamarinでファイルを選択することが出来たので、APIに、Multipart Postでファイルを送信し、OCRの結果を得る。

https://docs.microsoft.com/en-us/dotnet/api/system.net.webclient.uploadfile?

https://stackoverflow.com/questions/19954287/how-to-upload-file-to-server-with-http-post-multipart-form-data

この辺りを参考に。

private async void FilePick()
{
    var file = await CrossFilePicker.Current.PickFile();

    if (file != null)
    {
        byte[] fileBytes = null;
        using(MemoryStream ms = new MemoryStream()) {
            byte[] buf = new byte[1024 * 16];
            int read;
            var inputStream = file.GetStream();
            while ((read = inputStream.Read(buf,0,buf.Length)) > 0)
            {
                ms.Write(buf, 0, read);
            }

            fileBytes = ms.ToArray();
        }
        if (fileBytes != null)
        {
            string uri = "https://favophrase.com/api/upload-file";

            HttpClient httpClient = new HttpClient();
            MultipartFormDataContent form = new MultipartFormDataContent();

            form.Add(new StringContent(file.FileName), "fileName");

            form.Add(new ByteArrayContent(fileBytes, 0, fileBytes.Length), "file", file.FilePath);
            HttpResponseMessage response = await httpClient.PostAsync(uri, form);

            response.EnsureSuccessStatusCode();
            httpClient.Dispose();

            string sd = response.Content.ReadAsStringAsync().Result;

            await Page.DisplayAlert("Uploaded File.", sd, "OK");
        }
    }
}

2.実行結果

Android,iPhone,UWP にて、それぞれ、ファイル選択から、ファイルアップロード、OCRの結果を表示できた。

xamarin_fileupload_android


xamarin_fileupload_ios

xamarin_fileupload_uwp

いい感じ。

Xamarin.Forms ファイル選択

  1. Google App Engine Java Standard + Spring Boot 環境構築
  2. Spring Bootのテンプレートエンジン Thymeleafを適用

  3. Spring BootにVue.jsを利用する

  4. Spring BootにVuetify導入からクロスドメインAjax通信

  5. Spring Boot+Vuetify GAEへデプロイ、動作確認

  6. Xamarin.FormsアプリをiOS用にビルド

  7. Xamarin.Forms ポップアップの表示と Http通信

  8. Spring Boot+Vuetify ファイルのアップロードとJSONで結果を返す

  9. Google Google Cloud Vision でOCR。VuetifyからSpringBoot経由で呼び出し

Vuetify から、ファイルアップロード、Google Cloud Vision を使用して、OCR機能の検証まで実施。

次は、Xamarin側で同等の機能を実現したい。

まずは、ファイル選択機能。

どうやら、Xamarin.Forms標準では用意されていなさそうだ。

Xamarin ポピュラープラグインから探す。(ただし、現時点でURLに登録されているバージョンは古いため、新しいものを選択する)

1.ファイル選択プラグイン

1.1 インストール

https://www.nuget.org/packages/Xamarin.Plugin.FilePicker/2.0.135

NuGetで、Xamarin.Plugin.FilePicker を検索しインストール

xamarin_filepicker_nuget

古いバージョンでの説明だが、以下のサイトの手順がわかりやすい。

https://www.c-sharpcorner.com/article/how-to-create-file-picker-in-xamarin-forms/

1.2 Androidアクセス許可を追記

Androidプロジェクト - Properties - AndroidManifest.xmlに、use-permission の下記2行、READ_EXTERNAL_STORAGE、WRITE_EXTERNAL_STORAGEを追記。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.FavoPhrase" android:installLocation="preferExternal">
  <uses-sdk android:minSdkVersion="19" android:targetSdkVersion="27" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <application android:label="FavoPhrase.Android"></application>
</manifest>

https://docs.microsoft.com/ja-jp/xamarin/android/app-fundamentals/permissions?tabs=windows

2.実装

2.1 呼び出しボタンの追加

<Button Margin="0,10,0,0" Text="Pick File"
        Command="{Binding FilePickCommand}"
        BackgroundColor="{StaticResource Primary}"
        TextColor="White"/>

2.2 ViewModel

ボタン押下時のコマンドの定義、選択されたファイル名をポップアップ表示させる。

using System;
using System.Windows.Input;
using System.Diagnostics;

using Xamarin.Forms;
using System.Net.Http;
using Plugin.FilePicker;

namespace FavoPhrase.ViewModels
{
    public class AboutViewModel : BaseViewModel
    {
        public AboutViewModel()
        {
            Title = "About";
            FilePickCommand = new Command(FilePick);
        }

        private async void FilePick()
        {
            var file = await CrossFilePicker.Current.PickFile();

            if (file != null)
            {
                await Page.DisplayAlert("Selected File", file.FileName, "OK");
            }
        }
        public ICommand FilePickCommand { get; }
        public Page Page
        {
            get;
            set;
        }
    }
}

3.実行

3.1 Android

Google Drive含む様々なロケーションからファイルを選択できる。

xamarin_filepicker_android

xamarin_filepicker_android2

xamarin_filepicker_android3

3.2 iPhone

こちらも、iCloud含むさまざまなロケーションからファイル選択可能

xamarin_filepicker_ios

xamarin_filepicker_ios2

xamarin_filepicker_ios3

3.3 UWP

おなじみのファイルチューザー

xamarin_filepicker_uwp

xamarin_filepicker_uwp2

割といい感じだ。