投稿

Angular(Ionic)で非同期通信を実装する

フロントエンドアプリケーションフレームワークであるAngular(Ionic)で非同期通信を実装する方法をサンプルアプリとして紹介します。動作確認用にPythonで作成したバックエンドコード付きです。

Angularの場合、非同期通信を実装するにはHttpClientModuleをapp.module.tsに追加して、tsファイルで呼び出して使うだけです。AngularはReactと異なりフルスタックなので、この辺の安心感はReactにはるかに勝ると思います。

Angular公式サイトの説明

ソースコードの素性

ソースコードの素性ですが、Ionic(Aunglar)のblankアプリから実装しました。なお、バックエンドのサンプルコードも作成しましたが、こちらはPythonのFlaskを使っています。Flaskでホスティングした http;//127.0.0.1:5000 のURLを叩いてデータを取ってくるアプリです。
GitHubにコードあげたのでそのまま動作確認できると思います。

環境

フロントエンド

Angular CLI: 10.0.5
Ionic CLI : 6.10.0
Node: 12.18.0

バックエンド

Python 3.7.3
Flask 1.1.2
Flask-Cors 3.0.9

コード

app.module.ts

app.module.tsに
import { HttpClientModule } from ‘@angular/common/http’;
を追加します。importするのも忘れずに

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,HttpClientModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ionicの場合、moduleファイルが複数あるけど、app.module.tsにだけ書いておけば問題ないです。

home.page.ts

こちらには
import { HttpClient } from ‘@angular/common/http’;
import { DomSanitizer } from ‘@angular/platform-browser’;
の2つを追加します。あとは処理を書くだけです。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  unsafeImageUrl:any;
  imageUrl:any;

  constructor(
    private http: HttpClient,
    private sanitizer:DomSanitizer)
  {
    this.hello();
  }

  hello(){
    this.http.get('http://127.0.0.1:5000',{responseType:'blob'})
     .subscribe(
       (res:any) => {
         console.log(res);
         this.unsafeImageUrl = URL.createObjectURL(res);
         this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(this.unsafeImageUrl);
       })
  }
}

home.page.html

htmlはを追加するだけです。

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <img [src]=imageUrl>
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

これでOK.anyを指定してしまっていますので書き方知っていたら教えてください。

バックエンド

バックエンドはこちら

# -*- coding: utf-8 -*-
import io
import numpy as np
import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
from flask import Flask, send_file
from flask_cors import CORS
import json

app = Flask(__name__)
CORS(app)

@app.route('/',methods=["GET","POST"])
def hello():
    image = io.BytesIO()
    x = np.linspace(0, 10)
    y = np.sin(x)
    plt.plot(x, y)
    plt.savefig(image, format='png')
    image.seek(0)
    return send_file(image,
                     attachment_filename="image.png",
                     as_attachment=True)

if __name__ == "__main__":
    app.run(host='127.0.0.1',debug=True)

AngularでWebAPIからblob形式で返された画像データを取得する方法

フロントエンドアプリケーションフレームワークであるAngular(Ionic)を使って、非同期通信で画像を読み込む方法をサンプルアプリとして紹介します。動作確認用にPythonで作成したバックエンドコード付きです。

Angularの場合、非同期通信を実装するにはHttpClientModuleをapp.module.tsに追加して、tsファイルで呼び出して使うだけです。画像の場合は、さらにresponseTypeに’blob’形式を指定し、DomSanitizerでサニタイズして読み込みます。HTML側は<img [src]=imageUrl>で行けます。

AngularはReactと異なりフルスタックなので、この辺の安心感があります。

参考にしたサイト

stackOverflow

ソースコード

githubはこちら

解説

app.module.ts

app.module.tsに
import { HttpClientModule } from ‘@angular/common/http’;
を追加します。importするのも忘れずに

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,HttpClientModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ionicの場合、moduleファイルが複数あリますが、app.module.tsにだけ書いておけば問題ないです。

home.page.ts

こちらには
import { HttpClient } from ‘@angular/common/http’;
import { DomSanitizer } from ‘@angular/platform-browser’;
の2つを追加します。あとは処理を書くだけです。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  unsafeImageUrl:any;
  imageUrl:any;

  constructor(
    private http: HttpClient,
    private sanitizer:DomSanitizer)
  {
    this.hello();
  }

  hello(){
    this.http.get('http://127.0.0.1:5000',{responseType:'blob'})
     .subscribe(
       (res:any) => {
         console.log(res);
         this.unsafeImageUrl = URL.createObjectURL(res);
         this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(this.unsafeImageUrl);
       })
  }
}

これでOK。anyを指定してしまっていますので書き方知っていたら教えてください。

home.page.html

htmlはを追加するだけです。

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <img [src]=imageUrl>
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

バックエンド

バックエンドはこちら

# -*- coding: utf-8 -*-
import io
import numpy as np
import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
from flask import Flask, send_file
from flask_cors import CORS
import json

app = Flask(__name__)
CORS(app)

@app.route('/',methods=["GET","POST"])
def hello():
    image = io.BytesIO()
    x = np.linspace(0, 10)
    y = np.sin(x)
    plt.plot(x, y)
    plt.savefig(image, format='png')
    image.seek(0)
    return send_file(image,
                     attachment_filename="image.png",
                     as_attachment=True)

if __name__ == "__main__":
    app.run(host='127.0.0.1',debug=True)

製造業において、Pythonに加えてWebも活用して飛躍しよう

最近、製造業におけるPythonの導入が進んでます。自動化やアプリケーション制作に便利ですし、今後もこの勢いは止まらなそうです。

ところが、私は実務担当として工場でPythonを導入して5年になるのですが、近年はWeb技術を使用することが多くなりました。Pythonを使い始めた当初、Web技術と言えばHTMLとCSS?データ分析メインの俺にはあんまり関係ないよね?と思っていました。でも、実務を行う中でPythonとWeb技術の相性が非常に良いことに気付き、最近はWebとPythonを半分ずつ使っています。

記事の内容

この記事では、とある工場で働くエンジニアがWeb技術の重要性について発見したことを書きたいと思います。おそらく、最近の空気は、製造業でもPythonは役に立つが、Webは分野が違うので関係ないという感じだと思います。でも、私はWeb技術があってこそPythonが100%生かせるのではないかと思っています。ある工場でPythonを導入した結果、Web技術の(意外な?)重要性について発見したことを共有したいと思います。

構成

構成としては
・製造業におけるPythonの使い所を整理し、
・Web技術の重要性について
述べたいと思います。

製造業におけるPythonの使い所

少し冗長ですが、そもそも製造業のおけるPythonの使い所として主に下記の3つがあると感じています。
・データ整形や業務の自動化
・高度なデータ分析
・業務アプリの制作(AIアプリ制作含む)

1.データ整形や業務の自動化

まず一つ目です。工場だと、製造に必要なファイルはエクセルで管理されていることが多いと思います。そして、どこかのフォルダに入っているデータをそのエクセルにコピペして行う集計作業も多いと思います。Pythonの使い所として最初に出てくるのがこの作業の自動化です。csvで管理されているデータならPandasで読み込めますし、Excelも操作できるので集計作業を一瞬で終わらせることができます。Pythonは汎用プログラミング言語ですので、PC上で行う「手順の決まった繰り返し作業」であれば、原理的にはすべて自動化できるというのは心強いです。

2.高度なデータ分析

二つ目が高度なデータ分析です。研究系で使用される方はこの用途が多いのではないかと思います。当然オフラインで行うこともできるのですが、うまくやれば高度な分析も自動化できます。
つまり、一般的には

  1. 最初はオフラインで工場からデータをもらう
  2. 手元のPCで分析して結果報告
    って流れがありがちだと思うのですが、Pythonを使うとこういった流れも自動化してラインに組み込むことができると思うのです。後述するAPIの作成や、データの取得部分の自動化、分析コードのライブラリ化が必要になりますが、すべての製造ロットについて自動で不良原因を分析したり、品質を予測と言ったことができるようになります。オフラインに留まらず工場の中で生きたものとして分析コードが利用できるというのは夢がありますよね。

3.業務アプリの制作

三つ目が業務アプリ制作です。
自分ごとで恐縮なのですが、私はPythonを使い始めた時、主に自分の業務の自動化で使っていましたが、次第にある欲求が抑えられなくなってきました。「作ったアプリを周りに活用して欲しい」という欲求です。結構あるあるだと思いますので、業務アプリの制作というのも製造業におけるPython活用のよくあるパターンだと思います。あるいは、最近はAIを実装すると言った業務もあるのではないでしょうか。
そして、私がWeb技術の活用が必要だとおもったきっかけは、この3つ目の用途においてです。

Web技術の必要性

PythonでGUIを作ってしまうと、使用する人全員に同じ環境を用意しなければなりません。一桁程度ならなんとかなるのですが、人数が増えるとその手間は大きくなり苦痛に感じるようになりました。
かといって実行ファイルにするとサイズが大きくなったり、コンパイルに失敗したりデバッグできなかったりで使い勝手が悪かったです。そこで、サーバPCを用意して環境構築をその1台だけで完結させ、使用者はそこにアクセスすることでサービスを提供できるようにするためにはどうすればいいだろうかという課題に直面しました。Pythonの活用が進めば進むほどこのニーズが大きくなり、Web技術の必要性が出てくると思います。

また、二つ目の高度なデータ分析におけるWeb技術の活用のメリットも大きいです

A.手渡ししてもらったデータをオフラインで解析する
B.解析コードをラインに組み込んで全ロットで自動に結果を出す

という違いは大きいと思うのですが、後者のためにWebが非常に役立つからです。

Webを導入する他のメリット

つまり、Web技術を導入すると、分析の自動化のために必要な下記の2点が可能になります。
・整形したデータをAPIを介して配信できる(データの活用の裾野が広がる)
・本社や現場で集めたデータを活用するスマホアプリまで作れる(実行環境を問わずデータを活用するアプリケーションが開発できる)

整形したデータをAPIを介して配信できる

Pythonの使い所の一つ目で挙げたとおり、データ整形という用途はPython活用の王道だと思います。そして、整形したデータを活用するというのを考えた時、Webブラウザを叩いてデータが返ってきたらめちゃくちゃ便利ではないかと思い至りました。要するにWebAPIで配信するということです。
ロットやデータ数を指定してAPIを叩いたらデータが勝手に得られる環境というのは、分析の自動化にもだいぶ役に立つと思います。Pythonだけだとデータ整理で終わったかも分からないのですが、APIを作ることでPythonで集計したデータを他事業所からアクセスしてもらえるようにしたり、より広く活用することができるようになります。個人的には、バックエンドをFlaskでAPI化して、フロントエンドはクロスプラットフォームフレームワークのAngularかReactという構成が好きです。でも、今ならVue.jsから始めるかもしれません。

現場で活用するスマホアプリも作れる

発見だったのがこれです。Web技術というとHTMLとCSSの静的なサイトのイメージが強かったのですが、最近はSPA(シングルページアプリケーション)という技術があるそうで、SPAを使うとデスクトップアプリと同等のものを作れます(SPAとセットでよく使う言葉にPWA(Progressive Web アプリ)という物もあります。SPAという技術で作った物の性質を表すときにPWAと表現していると理解しています。なので、文脈的にはSPAよりPWAの方が正確かも)(注釈1)。AngularやReact、Vueといったフレームワークがそれなのですが、これらはTypeScriptやJavaScriptの拡張言語であるJSXなどをかなり駆使しますので、HP制作というよりアプリケーション開発のイメージです。これによりTKinter、PysimpleGUI、PyQt、のようなデスクトップアプリをWeb上でも作ることができます。
加えて、AngularやReact、Vueではクロスプラットフォーム性があります。つまり、Webアプリだけではなく、AndroidやiOSのアプリにも出力が可能ということです(!)(注釈2)。これにより、ブラウザを介してユーザーのアクセス性を確保しつつ、ブラウザでアクセスできない場所(=例えば現場)ではアプリとして使ってもらうことができるようになります。これはWebを導入して見つけた想定外の発見で、PythonだけではスタッフのPCで動作するアプリ開発しかできなかったと思いますが、Webを導入することで多くの人や場面で使ってもらえるための開発手段を手に入れられました。
相変わらずバックエンドはPythonで書いていますが、フロントエンドはWebに移行することで大きなメリットが得られました。

まとめ

少し冗長な説明になってしまいましたが、上記のようにWeb技術を使うとPythonで作ったデータを活用できる幅が広がったり、Pythonの普及に伴う環境整備の手間が低減できます。
近年注目されるPythonによる高度な分析についても、Webの力を借りることで、オフラインに留まらず全ロットに対して自動で行いそれを工場全体で生かす仕組みも構築できます。
Pythonについては製造業でも普及が進みつつあると思いますが、Webについては分野が違うという認識をされがちです。でも、Webがあるとより活用の幅が広がると思いますので、ぜひ検討してみてください。

この記事が役に立ったと思ったらLGTMお願いいたします:thumbsup:
製造業でのIT活用頑張りましょう!

注釈1:PWA、SPAとはなんぞや
注釈2:クロスプラットフォームとは何

 個人サイトの方で解説した記事1(個人・少人数のシステム開発にはAngularがオススメ)
 個人サイトの方で解説した記事2(pythonとangularの組み合わせが最強な理由)
 Monacaの記事
 勉強した本1(掌田津耶乃さんのAngularの本。React版でもいいかも。Vue.jsもいい本あると思います)
 勉強した本2(AngularをIonicベースで利用)
 

個人・少人数のシステム開発にはAngularがオススメ

Angularとは

 GoogleのドキュメントやGCPで使われているAngularは、Googleが中心開発している JavaScript フレームワークです。AngularJSと混同されていている方もいらっしゃいますが、AngularJSのメリットを生かしたまま互換性のない形で生まれ変わったのがAngularです。Angularは、SPA (Single Page Application)と呼ばれる技術を用いて、従来のWebでは実現できなかった機能を提供する技術です。イメージ的には、従来のWebページよりアプリケーションよりのものを作りやすくなると感じています

SPAの特徴

 最近、従来のWeb技術では考えられなかったようなサイトが増えてきています。たとえば、オフラインでも動作するWebページやGoogleのドキュメントのように同じURLなのに検索ワードによって違う内容が表示されるページなどです。SPA (Single Page Application)ではindex.htmlだけを読み込み、そのあとはDOMの操作をフロントエンドで行って擬似的な遷移を行っています。これによりオフラインでも画面遷移ができたり、検索クエリによって動的にページを書き換えたりといったことができます。

SPAフレームワークにおけるAngularの特徴

 SPAのフレームワークはいくつかあります。Facebookの開発しているReact.jsなどが有名ですが、個人的にはReact.jsよりも断然Angularがおすすめです。Reactが最小限の本体とサードパーティのライブラリで構成されているのに対して、Angularは開発に必要な機能をすべて盛り込んだフルスタックです。開発に必要なデータバインディング、フォームバリデーション、非同期通信、ルーティング、テスタビリティ、セキュリティへの配慮など、一通りの機能がすべてあらかじめ用意されているので、Angular を選択することでコーディングに集中できます。ライブラリが複数あるとどれを使えばいいのか迷いますしライブラリ間の依存関係などを気にする必要が出てくると思いますが、そういった懸念から解放されコーディングに集中できることがAngularのメリットだと考えています。個人的にはAngularは「控えめにいって最高」のフレームワークです。

クロスプラットフォームなのもよい

わたしは個人でシステム開発をしているのですが、iOS用にSwiftで、Android用にKotlinで、そしてWeb用にJavaScriptで開発をしていたらいくら時間があってもたりません。そこで一つのソースコードでさまざまなプラットフォームで動作すればありがたいわけです。そこでクロスプラットフォームの仕組みとして「Ionic 」「Cordova」「NativeScript」「React Native」Electron」「Capacitor」「Xamarin」「Unity」などが候補にあがるわけですが、Angularは「Capacitor」というMacデスクトップアプリ、Windowsデスクトップアプリ、Web、iOS, Androidに出力できるこれまた最高のフレームワークと組み合わせることができます。したがって、Angularは効率的にプロジェクを作成し、それを複数のプラットフォームに同時に出力できるという夢のような生産性を実現するフレームワークです。

AngularJSとの非互換性について

Angularの前身であるAngularJSがあまりにも有名なため、AngularJSの終了から5年弱経っているのにまださまざまなところで混同されています。しかし、AngularはAngularJSで顕在化した問題を解決するべく、内部構造から細部に至るまで再設計され実装されています。

一般的にフルスタックフレームワークだと、開発規模が大きくなるにれバンドルされるファイルサイズが大きくなりパフォーマンス面で悪影響を与えることもあります。AngularJSでも顕在化したその問題を解決するために、AngularではJavaScript VM (Virtual Machine) フレンドリーな実行コードを生成することで実行速度を改善したり、AoT コンパイル(Ahead-of-Time Compilation)と呼ばれるビルド時に表示を高速化するための仕組み、さらに段階的にソースコードをよみこむLazyLoadingと呼ばれる仕組みを利用して高速化する方法も提供されるなどです。最初にAngularで開発するときに訳が分からなくなってしまいがちですが、AngularJSとは互換性がないということを覚えておくといいと思います。半年毎にバージョンが変わるのですが(例えばAngular8が現在のバージョンなら、半年後はAngular9がでる)これらには一部の機能を除いて互換性があります。

まとめと結論

SPAの技術の一つであるAngularについてまとめました。近年普及が急速に進んでいるPWAアプリ作成のフレームワークとして代表的な物で、一つのコードで複数のプラットフォームに出力できるクロスプラットフォーム性について記載しました。

Angularで個人で作ったアプリがあります。OCRという写真から文字を抜き出す技術を使って、ブログなどを早く書くためのツールです。これも一つのコードでAndroid ,Web,iOSに出力できるので大変便利でした。

iOS => https://apps.apple.com/app/id1497498494

Android => https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr